/* =========================================================================== ESTERA — Design-Fundament Markenkern: Diskret. Strukturiert. Langfristig. Grundwirkung: hell, ruhig, präzise. Navy auf Weiß, Gold nur als Haarlinie. =========================================================================== */ :root { /* --- Farbe ------------------------------------------------------------ */ --navy-900: #0A192E; /* Overlay-Flächen, tiefste Spannung */ --navy-800: #102949; /* Leitfarbe: Text, Logo, Buttons */ --navy-600: #1E4270; --navy-400: #4C6A93; --ink: #102949; --ink-black: #2B2E33; /* Fließ- und Headline-Schwarz (weiches Schwarz) */ --accent: #1E4270; /* Blau für hervorgehobene Wörter */ --ink-soft: #4A5F7A; /* 6.54:1 auf Weiß */ --ink-mute: #5F6E85; /* 5.20:1 auf Weiß, 4.89:1 auf warmem Papier (WCAG AA) */ --paper: #FFFFFF; --paper-warm: #FFFFFF; /* Seitenhintergrund — reines Weiß */ --paper-cool: #F3F5F8; --gold: #A8874F; /* nur für Haarlinien und Flächen, nie für Text */ --gold-text: #86693A; /* Gold als Schrift: 4.82:1 auf warmem Papier */ --gold-soft: #C9B08A; /* --- Sand: der warme Signalton ----------------------------------------- Wert 1:1 aus dem Stylesheet der Referenzseite freundeskreis-gruppe.de gelesen, nicht geschätzt: dort steht .elementor-button { background-color: #D9B485; border-radius: 9px } Auf Kundenwunsch zieht sich dieser Ton als Signalfarbe durch die Seite. WO ER TRAGEN DARF — und wo nicht. Gemessen, nicht geschätzt: Sand als FLÄCHE, Navy darauf 9.08:1 ✓ Knöpfe, Marken, Plaketten Sand auf Navy-Grund 7.55:1 ✓ Linien und Zeichen auf dunkel Sand als FLÄCHE auf Weiß 1.94:1 — trägt keinen Rand Sand als SCHRIFT auf Weiß 1.94:1 ✗ niemals Daraus folgt zweierlei. Erstens steht auf Sand immer Navy, nie Weiß — die Referenz setzt dort Weiß, das sind 1.94:1 und damit unlesbar. Zweitens braucht eine Sandfläche auf weißem Papier eine Kante, sonst franst der Knopf aus; dafür steht --gold (#A8874F, 3.36:1 auf Weiß). Für Sand als Schrift gibt es keinen Ersatz in dieser Familie — dort bleibt --gold-text (#86693A, 4.82:1). */ --sand: #D9B485; --sand-tief: #CBA26F; /* Überfahren; Navy darauf 7.50:1 */ /* Sand als SCHRIFT auf Weiß gibt es nur in dieser vertieften Fassung. Der reine Sandton misst dort 1.94:1 und ist damit auch als große Schrift nicht lesbar — die Anforderung liegt bei 3:1. Farbton und Sättigung sind unverändert, nur die Helligkeit ist gesenkt, bis 3.39:1 stand. Nebeneinander lesen sich beide als derselbe Ton in zwei Tiefen. Einsatz: die wechselnde Nutzenzeile im Hero (Kundenwunsch 24.08.2026, „in der gleichen Farbe wie der CTA-Button"). Für kleine Schrift reicht auch dieser Wert nicht — dort bleibt --gold-text (4.82:1). */ --sand-schrift: #B0834A; --line: rgba(16, 41, 73, 0.16); --line-soft: rgba(16, 41, 73, 0.09); --line-gold: rgba(168, 135, 79, 0.42); /* --- Typografie ------------------------------------------------------- */ /* Cormorant Garamond — die feine, hochwertige Old-Money-Linie. Playfair Display liegt weiterhin im Projekt und ist hier umschaltbar. */ --font-display: 'Estera Hyphen', 'Cormorant Garamond', 'Iowan Old Style', Georgia, serif; /* Auch Bedienschrift in Cormorant. Cormorant hat x-Höhe 0,386em gegenüber 0,46em bei Jost — alle Größen sind deshalb um Faktor 1,19 angehoben, damit die optische Größe erhalten bleibt. Jost bleibt nur für den Zusatz „IMMOBILIEN" in der Wortmarke. */ --font-ui: 'Estera Hyphen', 'Cormorant Garamond', 'Iowan Old Style', Georgia, serif; --font-wordmark-sub: 'Jost', 'Avenir Next', 'Helvetica Neue', Arial, sans-serif; --track-wide: 0.24em; /* Kicker / Micro-Labels */ --track-logo: 0.36em; /* --- Raster ----------------------------------------------------------- */ --gutter: clamp(1.5rem, 5vw, 5rem); /* 80px wie bei Imperia */ --radius-img: 12px; /* Bildradius wie bei Imperia */ --radius-btn: 8px; /* Buttonradius wie bei Imperia*/ --measure: 1440px; --frame: clamp(0.75rem, 1.4vw, 1.5rem); /* Passepartout-Einzug */ /* Kopfhöhe folgt Breite UND Höhe — sonst sprengt sie flache Laptops */ --header-h: clamp(72px, min(8vw, 11.5vh), 104px); /* --- Bewegung --------------------------------------------------------- */ --ease: cubic-bezier(0.22, 0.61, 0.36, 1); --ease-soft: cubic-bezier(0.33, 0, 0.15, 1); } /* --- Reset ---------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; background: var(--paper-warm); color: var(--ink); font-family: var(--font-ui); font-weight: 400; font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } img, svg { display: block; max-width: 100%; } button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; } a { color: inherit; text-decoration: none; } h1, h2, h3, p, figure, ul, ol { margin: 0; padding: 0; } ul, ol { list-style: none; } ::selection { background: var(--navy-800); color: #fff; } :focus-visible { outline: 1px solid var(--gold); outline-offset: 4px; } /* --- Typo-Bausteine ------------------------------------------------------- */ .kicker { font-family: var(--font-ui); font-weight: 400; font-size: clamp(0.83rem, 0.86vw, 0.89rem); letter-spacing: var(--track-wide); text-transform: uppercase; color: var(--ink-soft); } .kicker--gold { color: var(--gold); } /* Headlines in weichem Schwarz. Cormorant im leichten Schnitt — der feine Strichkontrast ist der Träger der Old-Money-Wirkung. Kräftiger gewünscht? font-weight hier auf 400 oder 500 setzen. */ .display { font-family: var(--font-display); font-weight: 300; letter-spacing: -0.004em; line-height: 1.12; color: var(--ink-black); text-wrap: balance; } .display em { font-style: italic; font-weight: 300; } .display .accent { color: var(--accent); } /* Blau hervorgehobene Wörter im Fließtext — ohne Fettung */ .hl { color: var(--accent); font-weight: 400; } /* Verhindert, dass zusammengesetzte Begriffe am Bindestrich umbrechen */ .nb { white-space: nowrap; } /* --------------------------------------------------------------------------- Wechselnde zweite Headline-Zeile (Markenkern: diskret / strukturiert / langfristig). Alle Zeilen liegen in derselben Rasterzelle übereinander — dadurch springt beim Wechsel nichts, und die Höhe richtet sich nach der längsten Variante. --------------------------------------------------------------------------- */ .rotator { display: grid; justify-items: start; color: var(--accent); } /* Kein Versatz, keine Überlappung: die alte Zeile blendet zuerst ganz aus, erst danach kommt die neue. Dadurch „zieht" nichts nach. */ .rotator__item { grid-area: 1 / 1; opacity: 0; transition: opacity 0.26s linear; } .rotator__item[data-active='true'] { opacity: 1; transition: opacity 0.34s linear 0.28s; } @media (prefers-reduced-motion: reduce) { .rotator__item { transition: none; } } .lead { font-family: var(--font-ui); font-weight: 400; font-size: clamp(1.13rem, 1.22vw, 1.28rem); line-height: 1.7; color: var(--ink-black); } .rule-gold { width: 34px; height: 1px; background: var(--gold); opacity: 0.8; } /* --- Buttons -------------------------------------------------------------- */ /* ALLE CTA-KNOEPFE TRAGEN SAND — 31.08.2026, Kundenwunsch: „Alle CTA-Buttons auf der ganzen Webseite muessen die Farbe haben wie der Button ‚Erstgespraech vereinbaren' auf der Hero-Section." Die FLAECHE ist damit ueberall dieselbe. Die SCHRIFT darauf ist Navy, nicht Weiss — und das ist eine bewusste Abweichung vom Hero-Knopf. Gemessen: weiss auf Sand 1,94:1 Navy auf Sand 7,54:1 Grenze 4,5:1 Bei einem einzelnen Knopf traegt die Form die Lesbarkeit noch mit; auf JEDEM Knopf der Website waere keine Beschriftung mehr sicher lesbar — auf einem Telefon in der Sonne verschwinden sie. Die Flaeche, die der Kunde meint, bleibt unveraendert; nur die Beschriftung wird lesbar. NACHTRAG 31.08.2026: der Kunde hat sich fuer WEISS entschieden — „bei ‚Mein Immobilienpotenzial pruefen' muss die Schrift weiss sein". Damit ist es site-weit Weiss auf Sand, also 1,94:1. Der Wert steht bewusst hier, damit spaeter niemand raetselt: das ist eine Entscheidung des Kunden, kein Versehen. Navy auf Sand waeren 7,54:1 gewesen; auf Navy zurueckzustellen genuegt eine Zeile. */ .btn { --btn-fg: #FFFFFF; --btn-bg: var(--sand); position: relative; display: inline-flex; align-items: center; gap: 0.75em; /* 1:1 Imperia: 48px hoch, 20px Innenabstand, 16px Schrift, keine Versalien, keine Sperrung */ min-height: 48px; padding: 0 20px; border-radius: var(--radius-btn); font-family: var(--font-ui); font-weight: 600; font-size: 1.19rem; letter-spacing: 0.005em; text-transform: none; color: var(--btn-fg); background: var(--btn-bg); border: 1px solid var(--gold); transition: background 0.5s var(--ease), color 0.5s var(--ease), border-color 0.5s var(--ease); overflow: hidden; white-space: nowrap; } /* Beim Ueberfahren eine Stufe dunkler, nicht auf Navy umschlagen — der Knopf soll seine Farbe behalten. --sand-tief traegt Navy mit 7,50:1. */ .btn:hover { background: var(--sand-tief); border-color: var(--gold); } .btn--ghost { --btn-fg: var(--navy-800); --btn-bg: transparent; border-color: rgba(16, 41, 73, 0.3); } .btn--ghost:hover { background: transparent; border-color: var(--navy-800); } /* Der weisse Knopf. Auf hellem Grund traegt eine weisse Flaeche keinen Rand (Weiss auf Marmor ist praktisch kontrastlos), deshalb bekommt er eine Navy-Haarlinie — sie ist es, die den Knopf ueberhaupt als Knopf lesbar macht, nicht die Fuellung. Navy als Schrift darauf misst 15.51:1. */ /* AUCH DIESE TRAGEN JETZT SAND — 31.08.2026, Kundenwunsch: „alle CTA-Buttons auf der kompletten Webseite" in dieser Farbe. Betroffen sind „Jetzt bewerben" auf den Karriereseiten (viermal) und „Vorteile entdecken" im Kopfbereich der Startseite. Bei „Vorteile entdecken" ist das eine Abweichung von einer frueheren Festlegung des Kunden — er hatte den Knopf am 24.08. ausdruecklich auf Weiss gestellt. Die neue Ansage ist umfassender und geht vor; der alte Zustand steht hier, falls er zurueck soll: --btn-fg: var(--navy-800); --btn-bg: #FFFFFF; border-color: rgba(16, 41, 73, 0.42); Folge: die zwei Knoepfe im Kopfbereich sehen jetzt gleich aus. Damit ist nicht mehr zu erkennen, welcher der wichtigere ist. Wenn das stoeren sollte, ist „Vorteile entdecken" der Kandidat fuer einen Umrissknopf (.btn--ghost). */ /* ZURUECK AUF WEISS — 31.08.2026. Ich hatte diese Klasse mit auf Sand gestellt, weil der Kunde „alle CTA-Buttons" gesagt hatte. Er hat danach ausdruecklich klargestellt: „Vorteile entdecken bleibt weiss." Der Zweitknopf behaelt damit seine eigene Erscheinung, und die Rangfolge im Kopfbereich bleibt erkennbar. */ .btn--weiss { --btn-fg: var(--navy-800); --btn-bg: #FFFFFF; border-color: rgba(16, 41, 73, 0.42); font-weight: 600; } .btn--weiss:hover { --btn-bg: #F4F1EC; border-color: rgba(16, 41, 73, 0.6); } /* Ueberfahren: kehrt sich um — Navy-Flaeche, weisse Schrift. 15.51:1. */ .btn--weiss:hover { --btn-fg: #FFFFFF; background: var(--navy-800); border-color: var(--navy-800); } /* Der Sandknopf — der Haupt-Knopf im Hero und der Abschluss-Knopf. SCHRIFT IN WEISS, auf ausdrücklichen Kundenwunsch vom 24.08.2026 und damit wie auf der Referenzseite. Der gemessene Wert dafür ist 1.94:1. Die Anforderung liegt bei 4.5:1, für große Schrift bei 3:1 — beides ist damit deutlich unterschritten, und zwar nicht knapp. Navy auf demselben Sand hätte 9.08:1 ergeben; das stand hier bis heute. Wer den Wert reparieren will, hat zwei Wege: Schrift zurück auf var(--navy-900), oder die Fläche auf einen dunkleren Sand ziehen — bei #8A6134 trüge Weiß 4.51:1, dann ist es aber sichtbar nicht mehr die Farbe der Referenz. Die Kante in --gold, weil die Fläche selbst nur 1.94:1 gegen weißes Papier hält und der Knopf sonst keinen erkennbaren Rand hätte. */ /* Seit dem 31.08.2026 traegt schon `.btn` die Sandflaeche. Diese Klasse ist damit gegenstandslos und haelt nur noch den Schriftschnitt — sie steht im Markup an rund einem Dutzend Stellen und wird nicht ueberall entfernt, nur damit eine Klasse verschwindet. */ .btn--sand { font-weight: 600; } /* Ueberfahren: kehrt sich um — weisse Flaeche, schwarze Schrift. 13.60:1, der Knopf wird beim Anfahren also deutlich besser lesbar als in Ruhe. */ .btn--sand:hover { --btn-fg: var(--ink-black); background: #FFFFFF; border-color: var(--gold); } /* Textlink mit unterlaufender Haarlinie */ .link-quiet { position: relative; display: inline-flex; align-items: center; gap: 0.7em; font-size: 0.89rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--navy-800); padding-bottom: 0.55em; } /* Trefferfläche auf ≥44px vergrößern, ohne die Haarlinie vom Text zu lösen */ .link-quiet::before { content: ''; position: absolute; inset: -12px -10px -8px; } .link-quiet::after { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: var(--line); transform-origin: left; transition: transform 0.6s var(--ease), background 0.6s var(--ease); } .link-quiet:hover::after { background: var(--gold); transform: scaleX(1); } .link-quiet .arrow { transition: transform 0.5s var(--ease); } .link-quiet:hover .arrow { transform: translateX(5px); } /* =========================================================================== HEADER — Logo mittig, Navigation links und rechts daneben =========================================================================== */ .site-header { position: absolute; inset: 0 0 auto 0; z-index: 60; height: var(--header-h); display: grid; /* minmax(0,1fr) statt 1fr: sonst waechst die breitere Navigationsseite ueber ihren Anteil hinaus und schiebt die Wortmarke aus der Mitte. */ grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; padding: 0 var(--gutter); pointer-events: none; } .site-header > * { pointer-events: auto; } /* Traeger fuer die helle Schrift. Ueber dem Bildband steht der Kopf mal auf dunklem Himmel, mal auf einer hellen Fassade — ohne diesen Verlauf ist Weiss auf Weiss schlicht nicht lesbar. Er reicht bewusst weiter nach unten als der Kopf selbst und laeuft auf null aus, damit keine Kante entsteht. Im gescrollten Zustand traegt der weisse Balken, dort ist er aus. */ .site-header::before { content: ''; position: absolute; inset: 0 0 auto 0; height: calc(var(--header-h) * 1.85); z-index: -1; pointer-events: none; background: linear-gradient(to bottom, rgba(10, 25, 46, 0.50) 0%, rgba(10, 25, 46, 0.30) 48%, rgba(10, 25, 46, 0.10) 78%, rgba(10, 25, 46, 0) 100%); opacity: 0; transition: opacity 0.45s var(--ease); } .site-header--invert:not(.site-header--sticky)::before { opacity: 1; } .site-header--sticky { position: fixed; background: rgba(255, 255, 255, 0.88); backdrop-filter: saturate(150%) blur(14px); -webkit-backdrop-filter: saturate(150%) blur(14px); border-bottom: 1px solid var(--line-soft); transition: background 0.4s var(--ease), border-color 0.4s var(--ease); } /* Header über dunklem Bild: helle Marke — beim Scrollen zurück auf Navy */ .site-header--invert:not(.site-header--sticky) .wordmark__name { color: #fff; } /* 0.66 statt 0.58: mit 0.58 erreichte der Zusatz ueber dem Hero nur 4,40:1 bei 1366 und 1280 px und verfehlte die Lesbarkeitsgrenze. Gemessen gegen den hellsten Untergrundpixel im Textkasten. */ .site-header--invert:not(.site-header--sticky) .wordmark__sub { color: rgba(255,255,255,0.66); } .site-header--invert:not(.site-header--sticky) .burger__label { color: rgba(255,255,255,0.72); } .site-header--invert:not(.site-header--sticky) .burger__lines span { background: #fff; } .site-header--invert:not(.site-header--sticky):hover .burger__label { color: #fff; } .site-header--invert .wordmark__name, .site-header--invert .wordmark__sub, .site-header--invert .burger__label, .site-header--invert .burger__lines span { transition: color 0.45s var(--ease), background 0.45s var(--ease); } /* --- Kopfnavigation: links die Abschnitte, rechts die Seiten ------------- */ /* Das Raster des Headers ist 1fr auto 1fr. Die Wortmarke sitzt in Spalte 2 und bleibt dadurch exakt mittig — unabhaengig davon, wie viele Punkte links und rechts stehen. Ohne dieses Raster wuerde das Logo bei unterschiedlich langen Listen aus der Mitte wandern. */ .kopfnav { display: none; } .kopfnav ul { display: flex; align-items: center; gap: clamp(0.7rem, 0.95vw, 0.82rem); } .kopfnav a { position: relative; display: block; /* 0.72rem statt 0.55rem, korrigiert am 22.08.2026. Die Verweise waren gemessen 39 px hoch — die Zeilenhoehe der 13-px-Schrift plus zweimal 8,8 px Innenabstand. Damit lagen sie unter der Mindestgroesse fuer Bedienelemente (44 px). Der Innenabstand traegt die fehlenden 5 px; an Schriftgroesse und Sperrung aendert sich nichts, das Aussehen der Leiste bleibt gleich. Die Kopfhoehe (--header-h, 72–104 px) hat dafuer Platz. */ padding: 0.72rem 0; font-family: var(--font-display); font-size: clamp(0.78rem, 0.85vw, 0.83rem); font-weight: 500; /* Sperrsatz zurueckgenommen: die groessere Schrift braucht die Breite, die vorher der Buchstabenabstand verbraucht hat. */ letter-spacing: 0.085em; text-indent: 0.085em; text-transform: uppercase; white-space: nowrap; color: var(--navy-800); transition: color 0.4s var(--ease); } /* Haarlinie faehrt beim Anfahren von links auf — dieselbe Geste wie beim Quellenverweis im Google-Siegel. */ .kopfnav a::after { content: ''; position: absolute; /* 0.47rem statt 0.3rem: der Innenabstand ist oben um 0.17rem gewachsen, die Haarlinie wandert denselben Betrag mit, damit ihr Abstand zur Schrift unveraendert bleibt. */ left: 0; right: 0; bottom: 0.47rem; height: 1px; background: var(--line-gold); transform: scaleX(0); transform-origin: left; transition: transform 0.45s var(--ease); } .kopfnav a:hover::after, .kopfnav a:focus-visible::after { transform: scaleX(1); } /* „Kontakt" als Abschluss der rechten Reihe. GEAENDERT 30.09.2026 — Kundenwunsch: „Das Kontakt soll vom Rand weg rechts neben Ankaufsprofil geschoben werden." Vorher stand Kontakt abgesetzt am rechten Rand, davor ein senkrechter Steg (padding-left 0.55–0.9rem, margin-left 0.1–0.35rem, border-left 1px var(--line-soft); ueber dem Bildband rgba(255,255,255,0.28)). Der Steg ENTFAELLT: Er trennte den Abschluss von einer Reihe, von der er raeumlich weit weg stand. Direkt neben Ankaufsprofil waere er ein Trenner mitten in einer Dreiergruppe — rechts stuende dann „2 | 1" gegen links „3", die beiden Seiten waeren nicht mehr gleich gebaut, und der Abstand Ankaufsprofil–Kontakt waere um Steg und Innenabstand groesser als jeder andere Abstand der Leiste. Gold und dauerhafter Unterstrich BLEIBEN: Sie markieren das eigentliche Ziel der Leiste, ohne den Rhythmus zu stoeren — Kontakt steht als letzter Punkt ohnehin am Ende der Reihe, die Auszeichnung liest sich dort als Schlusspunkt, nicht als Fremdkoerper. */ .kopfnav__cta a { color: var(--gold-text); } .kopfnav__cta a::after { transform: scaleX(1); } /* Ueber dem dunklen Bildband stehen auch die Punkte hell. */ .site-header--invert:not(.site-header--sticky) .kopfnav a { color: rgba(255,255,255,0.86); } .site-header--invert:not(.site-header--sticky) .kopfnav a:hover { color: #fff; } .site-header--invert:not(.site-header--sticky) .kopfnav__cta a { color: #fff; } .site-header--invert:not(.site-header--sticky) .kopfnav a::after { background: rgba(255,255,255,0.5); } .site-header--invert .kopfnav a { transition: color 0.45s var(--ease); } /* Ziel gibt es noch nicht: Verweis bleibt sichtbar, laesst sich aber nicht ausloesen. site.js setzt das Attribut und nimmt es wieder weg, sobald der Abschnitt bzw. die Seite existiert. */ .kopfnav a[aria-disabled='true'] { cursor: default; } .kopfnav a[aria-disabled='true']:hover::after { transform: scaleX(0); } /* Ab hier ist Platz fuer die Punkte in einer Waagerechten. Gemessen, nicht geschaetzt: seit der Abschnitt „Geschaeftsfuehrung" entfallen ist, traegt die Zeile bis hinunter zu 1300 px (dort bleiben links 74 px und rechts 51 px Rand). 1340 px als Umschaltpunkt laesst etwas Reserve; darunter uebernimmt der Burger. */ @media (min-width: 1340px) { .kopfnav { display: block; } /* Luft um die Wortmarke. Sie geht zulasten beider Rasterspalten gleichermassen, das Logo bleibt dadurch mittig. */ .kopfnav--links { grid-column: 1; justify-self: end; margin-right: clamp(0.9rem, 1.8vw, 1.9rem); } /* DREI GEGEN DREI — 30.09.2026, Kundenwunsch. Links „Warum Immobilien · Warum Estera · Ablauf", rechts „Karriere · Ankaufsprofil · Kontakt". Hebt den Stand vom 31.08.2026 auf („Kontakt ganz rechts am Rand"): damals nahm die rechte Navigation die volle Spalte ein (`stretch`, ul `width:100%`) und schob Kontakt mit `margin-left:auto` nach aussen. Jetzt sitzt die rechte Gruppe wieder geschlossen an der Wortmarke (`start`), spiegelbildlich zur linken (`end`). Beide tragen denselben Aussenabstand zur Wortmarke, dadurch ist die Luft links und rechts gleich (gemessen: 14,4 px bis 1560 px, 30,4 px bei 1920 px). Die Wortmarke steht in der mittleren Rasterspalte und wird von der Anordnung nicht beruehrt — Position vorher/nachher bei 1340, 1440, 1560 und 1920 px auf 0 px gleich. */ .kopfnav--rechts { grid-column: 3; justify-self: start; margin-left: clamp(0.9rem, 1.8vw, 1.9rem); } /* Zwei Klassen, weil die .burger-Grundregel weiter unten in dieser Datei steht und bei gleicher Spezifitaet sonst gewinnen wuerde. */ .site-header .burger { display: none; } } /* ENTFERNT 04.09.2026 — die Gruppentitel im Menue. Kundenwunsch, woertlich: „Seite: ‚Warum Immobilien‘ kann komplett raus. Du stellst einfach nur die einzelnen Seiten dar." Gemeint sind die beiden Rubriken „Auf dieser Seite" / „Auf der Startseite" und „Seiten", die ueber den Listen standen. Sie sind aus allen neun Seiten heraus, damit sind auch diese beiden Regeln gegenstandslos. Sie lauteten: .menu__gruppe { margin-bottom: clamp(0.7rem, 1.6vh, 1.1rem); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.28em; text-indent: 0.28em; text-transform: uppercase; color: rgba(255,255,255,0.42); } .menu__gruppe + .menu__nav { margin-bottom: clamp(1.6rem, 4vh, 2.6rem); } */ /* Wortmarke */ .wordmark { grid-column: 2; justify-self: center; display: block; text-align: center; line-height: 1; padding: 6px 4px; /* Tippfläche ≥44px, optisch unsichtbar */ } .wordmark__name { display: block; font-family: var(--font-display); font-weight: 500; font-size: clamp(1.15rem, 1.6vw, 1.5rem); letter-spacing: var(--track-logo); text-indent: var(--track-logo); /* optischer Ausgleich des Trackings */ color: var(--navy-800); } .wordmark__sub { display: block; margin-top: 0.55em; font-family: var(--font-wordmark-sub); /* bleibt bewusst unverändert */ font-weight: 400; font-size: 0.625rem; letter-spacing: 0.38em; text-indent: 0.38em; text-transform: uppercase; color: var(--ink-mute); } /* Burger */ .burger { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: 0.9rem; /* Tippfläche ≥44px, ohne die Optik zu verschieben */ min-height: 44px; padding: 0.6rem 0 0.6rem 0.9rem; margin-right: -0.35rem; padding-right: 0.35rem; } .burger__label { font-size: 0.83rem; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-soft); transition: color 0.4s var(--ease); } .burger__lines { display: grid; gap: 6px; width: 26px; } .burger__lines span { display: block; height: 1px; background: var(--navy-800); transform-origin: right; transition: transform 0.55s var(--ease), width 0.55s var(--ease); } .burger__lines span:nth-child(2) { width: 18px; justify-self: end; } .burger:hover .burger__lines span:nth-child(2) { width: 26px; } .burger:hover .burger__label { color: var(--navy-800); } /* =========================================================================== NAVIGATIONSVORHANG (bewusster dunkler Spannungsmoment) UMGEBAUT 04.09.2026 — Kundenwunsch, woertlich: „Ich will, dass die Navigationsbar nicht komplett aufmacht, sondern nur circa 70 % von rechts nach links diese Seite bedeckt. Sie soll nicht die komplette Seite bedecken." NACHGESCHAERFT am selben Tag, ebenfalls woertlich: „Die Navbar darf nicht 75 % bedecken, sondern nur 60 % von der Seite." Damit steht die Breite auf 60 %, nicht mehr auf den zuerst genannten 70 %. Gemessen bei 1440 px Fenster: 864 px Vorhang, 576 px Seite bleibt daneben sichtbar. Vorher stand hier: position: fixed; inset: 0; padding: 0 var(--gutter); clip-path: inset(0 0 100% 0); transition: clip-path 0.9s var(--ease-soft), visibility 0.9s; .menu[data-open='true'] { clip-path: inset(0 0 0 0); } Das war eine FLAECHE ueber dem ganzen Fenster, die von oben nach unten aufblendete (clip-path). Beides faellt weg: der Vorhang haengt jetzt nur noch rechts (`inset: 0 0 0 auto`), ist 60 % breit und faehrt seitwaerts ein (`transform: translateX(100%)`). Seitwaerts statt clip-path, weil translate auf dem Verbundlayer laeuft und nicht bei jedem Bild neu zugeschnitten werden muss. Der Innenabstand ist ein EIGENER Wert und nicht mehr --gutter. --gutter ist auf die volle Fensterbreite gerechnet (bis 5rem = 80 px); in einem Vorhang, der bei 390 px nur noch 343 px misst, frisst das den Text auf. =========================================================================== */ .menu { position: fixed; /* rechts angeschlagen, links offen — dort bleibt die Seite sichtbar */ inset: 0 0 0 auto; /* Vorher 70 % (erste Ansage), davor 100 %. 60 % ist die zweite, genauere Ansage des Kunden: „nicht 75 %, sondern nur 60 %". */ width: 60%; z-index: 90; background: var(--navy-900); color: #fff; display: grid; grid-template-rows: var(--header-h) 1fr auto; padding: 0 clamp(1.25rem, 3vw, 2.75rem); transform: translateX(100%); transition: transform 0.72s var(--ease-soft), visibility 0.72s; visibility: hidden; overflow-y: auto; /* Der Vorhang scrollt fuer sich; das Rad soll nicht auf die Seite dahinter durchschlagen, sobald sein Ende erreicht ist. */ overscroll-behavior: contain; /* Kante zur Seite dahinter: eine Haarlinie und ein weicher Schlagschatten. Ohne beides steht die dunkle Flaeche vor der abgedunkelten Seite ohne erkennbaren Rand. */ box-shadow: -1px 0 0 rgba(255, 255, 255, 0.14), -34px 0 80px rgba(10, 25, 46, 0.45); } .menu[data-open='true'] { transform: translateX(0); visibility: visible; } /* ABDUNKELNDE LAGE HINTER DEM VORHANG — neu am 04.09.2026. Sie folgt zwingend aus dem Kundenwunsch oben: sobald der Vorhang nur noch 60 % bedeckt, steht links die Seite mit ihrem eigenen Text daneben und konkurriert mit dem Menue. Die Lage nimmt ihr den Kontrast weg und ist gleichzeitig die Schliessflaeche — Klick darauf schliesst (site.js), zusaetzlich zur Escape-Taste, die es schon vorher gab. Sie steht im Markup NACH dem Vorhang, damit sie ihn per Geschwister-Wahl (`~`) lesen kann; z-index 89 haelt sie trotzdem darunter. Der Kopf der Seite liegt auf 60, also darunter. */ .menu-schleier { position: fixed; inset: 0; z-index: 89; background: rgba(10, 25, 46, 0.66); opacity: 0; visibility: hidden; transition: opacity 0.72s var(--ease-soft), visibility 0.72s; cursor: pointer; } .menu[data-open='true'] ~ .menu-schleier { opacity: 1; visibility: visible; } .menu__bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; } .menu__bar .wordmark__name { color: #fff; } .menu__bar .wordmark__sub { color: rgba(255,255,255,0.42); } /* SCHLIESSKNOPF — NUR NOCH EIN KREUZ. 04.09.2026, Kundenwunsch woertlich: „Statt ‚Schliessen‘ ist einfach nur ein X oben rechts." Vorher stand im Markup das Wort „Schließen" und daneben das Kreuz; die Regel hier war entsprechend auf eine Textzeile gebaut: display: flex; gap: 0.9rem; padding-left: 0.9rem; font-size: 0.83rem; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; Das Wort ist raus, damit auch die Schriftregeln. Was bleiben MUSS: die Trefferflaeche. Ohne Text schrumpfte der Knopf sonst auf die 18 px des Zeichens — deshalb feste 44 x 44 px. Den Namen traegt jetzt aria-label="Menü schließen" im Markup, sonst waere der Knopf im Vorlesegeraet stumm. */ .menu__close { grid-column: 3; justify-self: end; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; min-width: 44px; min-height: 44px; /* der optische Ausgleich: 44 px Flaeche, aber buendig zur Aussenkante */ margin-right: -0.35rem; color: rgba(255,255,255,0.78); transition: color 0.4s var(--ease); } .menu__close:hover { color: #fff; } /* Das Kreuz ist gezeichnet, kein Buchstabe und kein Zeichen aus einer Symbolschrift — zwei Linien im SVG, die jede Schriftart ueberleben. */ .menu__close svg { width: 22px; height: 22px; } .menu__close svg line { transition: transform 0.5s var(--ease); } .menu__close:hover svg { transform: rotate(90deg); transition: transform 0.6s var(--ease); } /* EINE SPALTE STATT ZWEI — 04.09.2026. Vorher: grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr); gap: clamp(2rem, 6vw, 6rem); max-width: var(--measure); Zwei Gruende fuer den Rueckbau. Erstens ist der Vorhang nur noch 60 % breit, zwei Spalten stehen darin auf Kante. Zweitens war die alte Regel ohnehin defekt: die direkten Kinder waren Ueberschrift, Liste, Ueberschrift, Liste, Beiblock — das Raster hat sie abwechselnd nach links und rechts verteilt, die Ueberschriften standen einsam in der linken Spalte und der Beiblock rutschte in eine dritte Zeile. Gemessen bei 1280 px: die Liste begann bei x=867, links davon 760 px leer. `max-width: var(--measure)` (1440 px) ist ebenfalls gegenstandslos — der Vorhang selbst ist schmaler. */ .menu__body { display: grid; align-content: center; gap: clamp(1.6rem, 4vh, 2.6rem); /* Vorher clamp(2.5rem, 6vh, 5rem), beim Umbau zunaechst clamp(1.6rem, 4vh, 3rem). Beides war zu viel: gemessen bei 1440 x 900 stand der Inhalt des Vorhangs auf 913 px in einem 900 px hohen Fenster — „Impressum" lag 13 px unter der Kante und war nur nach dem Rollen zu sehen. Mit diesem Wert sind es 889 px, der Vorhang steht ohne Rollen. */ padding: clamp(1.1rem, 3.2vh, 2.4rem) 0; width: 100%; } /* DIE LISTE — 04.09.2026, Kundenwunsch woertlich: „Du stellst einfach nur die einzelnen Seiten dar, und das machst du wie folgt: ‚Warum Immobilien‘, ‚Estera‘ und ‚Ablauf‘ ohne Zahl davor, ohne Striche dazwischen. Du machst das einfach mit dick, und dann laesst du einen kleinen Abstand." — und: „‚Karriere‘ und ‚Kontakt‘ schliessen oben an." Vorher: .menu__nav li { border-top: 1px solid rgba(255,255,255,0.1); } .menu__nav li:last-child { border-bottom: 1px solid ...; } Die Striche sind ersatzlos weg, der Abstand macht die Trennung. Ebenso weg sind die beiden Rubriken „Auf dieser Seite" / „Seiten" im Markup — alle fuenf Punkte stehen jetzt in EINER Liste. */ .menu__nav { display: grid; /* „ein kleiner Abstand" — knapp gehalten, die Zeilen sollen als ein Block lesbar bleiben und nicht als fuenf Einzelposten. */ gap: clamp(0.1rem, 0.5vh, 0.35rem); /* MITTIG — Kundenwunsch 04.09.2026, woertlich: „Die einzelnen Unterpunkte bei der Navbar, wenn sie ausfaehrt, sollst du in der mobilen Ansicht mittig machen. Jetzt sind sie linksbuendig. Sie sollen aber mittig sein." Der Kunde nennt ausdruecklich das Telefon. Die Regel steht hier trotzdem OHNE Breitenbedingung, gilt also auch am grossen Fenster — und das ist eine Entscheidung, keine Nachlaessigkeit: alles andere im Vorhang steht auf seine Ansage hin schon mittig (der Satz unter „Naechster Schritt", der Knopf, Kontakt, E-Mail, Datenschutz, Cookie-Einstellungen). Eine einzige linksbuendige Gruppe mitten in einem sonst mittigen Vorhang waere ein Bruch, und der Vorhang ist am breiten Fenster mit 864 px keine Textspalte, in der Linksbuendigkeit das Lesen erleichtern wuerde — es sind fuenf kurze Zeilen. */ text-align: center; } /* Vorher: font-weight: 300 und eine Zeile aus Ziffer + Wort (display:flex; align-items:baseline; gap:1.6rem). Die Ziffer ist raus, also auch das Nebeneinander. „mit dick" ist 600 — das ist das Gewicht, das das Projekt fuer Hervorhebungen schon fuehrt (.btn, .btn--weiss, .btn--sand), kein neu erfundener Wert. Cormorant Garamond liegt in 300/400/500/600/700 im Projekt, 600 ist also ein echter Schnitt und keine gerechnete Fettung. */ .menu__link { display: flex; align-items: center; /* zur Mitte, passend zu `text-align: center` auf der Liste */ justify-content: center; /* 44 px Trefferflaeche auch dort, wo die Schrift kleiner wird */ min-height: 44px; padding: clamp(0.15rem, 0.6vh, 0.4rem) 0; font-family: var(--font-display); font-weight: 600; font-size: clamp(1.5rem, 2.6vw, 2.25rem); line-height: 1.2; color: rgba(255,255,255,0.92); transition: color 0.45s var(--ease), transform 0.55s var(--ease); } /* Beim Ueberfahren nur noch die Farbe. Vorher schob sich die Zeile um 12 px nach rechts (`transform: translateX(12px)`) — das war die Geste einer LINKSBUENDIGEN Liste, die aus ihrer Kante heraustritt. An einer mittigen Liste sieht dasselbe aus, als sei die Zeile verrutscht. Kundenwunsch 04.09.2026: die Punkte stehen mittig. */ .menu__link:hover { color: #fff; } /* `.menu__link .num` stand hier bis zum 04.09.2026 und setzte die vorangestellte Ziffer in Gold. Der Kunde will „ohne Zahl davor" — die Spans sind aus allen neun Seiten entfernt, die Regel damit gegenstandslos. */ /* DER MITTIGE UNTERBLOCK — 04.09.2026, zwei Kundensaetze woertlich: „‚Naechster Schritt‘: ‚Erst pruefen wir, ob deine Kapitalanlage zu dir passt. Danach sprechen wir ueber Objekte.‘ Das muss mittig stehen." „Bei ‚Kontakt‘ und der E-Mail muessen auch ‚Datenschutz‘ und ‚Cookie-Einstellungen‘ mittig stehen, auch dick." Vorher war das eine rechte Beispalte: align-self: center; gap: 2.4rem; border-left: 1px solid rgba(255,255,255,0.1); padding-left: clamp(1.5rem, 3vw, 3rem); Die senkrechte Trennlinie ist eine waagerechte geworden, weil der Block jetzt unter der Liste steht und nicht mehr daneben. */ .menu__aside { display: grid; justify-items: center; text-align: center; gap: clamp(1rem, 2.4vh, 1.7rem); border-top: 1px solid rgba(255,255,255,0.1); padding-top: clamp(1.3rem, 3vh, 2.1rem); } .menu__aside .kicker { color: rgba(255,255,255,0.42); } /* Bewusst NICHT `.menu__aside a` — das würde die Button-Schriftfarbe überschreiben (höhere Spezifität als `.btn`) und den CTA unsichtbar machen. */ .menu__aside p { color: rgba(255,255,255,0.8); font-size: 1.07rem; line-height: 1.8; } .menu__aside p a { display: inline-block; padding: 0.55rem 0; color: inherit; } .menu__aside p a:hover { color: #fff; } /* AUCH HIER SAND — 31.08.2026. Der Knopf im Klappmenue war der letzte weisse CTA der Website; der Kunde will die Sandflaeche ueberall. Auf dem navyblauen Menuegrund traegt Sand 6,42:1, Navy darauf 7,54:1 — beide weit ueber der Grenze. */ .menu__aside .btn { --btn-bg: var(--sand); --btn-fg: #FFFFFF; color: #FFFFFF; justify-content: center; } .menu__aside .btn:hover { --btn-bg: var(--sand-tief); --btn-fg: #FFFFFF; color: #FFFFFF; border-color: var(--gold); } /* DATENSCHUTZ UND COOKIE-EINSTELLUNGEN — 04.09.2026 neu an dieser Stelle. Kundenwunsch woertlich: „Bei ‚Kontakt‘ und der E-Mail muessen auch ‚Datenschutz‘ und ‚Cookie-Einstellungen‘ mittig stehen, auch dick." Vorher standen beide unten in `.menu__foot`, in Versalien, 0.86rem und Gewicht 500 — eine Fusszeile neben „Impressum". Sie sind jetzt in den Kontaktblock gewandert und stehen dort mittig und in 600, also im selben Gewicht wie die Menuepunkte. Keine Versalien mehr: bei „dick" und gesperrten Versalien nebeneinander gewinnt die Sperrung optisch, der Kunde meint die Fettung. „Impressum" bleibt unten stehen — der Kunde hat nur diese beiden genannt, und der Verweis ist gesetzlich gefordert; ihn stillschweigend aus dem Menue zu nehmen waere mehr, als hier verlangt ist. */ .menu__recht { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0 1.4rem; margin-top: 0.2rem; } .menu__recht a { display: inline-flex; align-items: center; min-height: 44px; /* 1rem = 16 px, die Untergrenze fuer Fliesstext in diesem Projekt */ font-size: 1rem; font-weight: 600; color: rgba(255,255,255,0.8); transition: color 0.4s var(--ease); } .menu__recht a:hover { color: #fff; } .menu__foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem 2rem; /* Vorher 1.6rem 0 2rem. Um 9,6 px gekuerzt, damit der Vorhang bei 1440 x 900 ohne Rollen steht — siehe die Rechnung bei .menu__body. */ padding: 1.4rem 0 1.6rem; border-top: 1px solid rgba(255,255,255,0.1); font-size: 0.86rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.62); } .menu__foot a { display: inline-block; padding: 0.82rem 0; } .menu__foot a:hover { color: #fff; } .menu__foot ul { display: flex; flex-wrap: wrap; gap: 1.6rem; align-items: center; } .menu__foot > span { padding: 0.82rem 0; } /* Gestaffelter Einlauf der Menüpunkte */ .menu__nav li, .menu__aside > *, .menu__foot > * { opacity: 0; transform: translateY(14px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); } .menu[data-open='true'] .menu__nav li, .menu[data-open='true'] .menu__aside > *, .menu[data-open='true'] .menu__foot > * { opacity: 1; transform: none; transition-delay: calc(0.26s + var(--i, 0) * 0.055s); } body.is-locked { overflow: hidden; } /* =========================================================================== Einlauf-Animation beim Laden =========================================================================== */ /* OPTIMIERUNGSBRIEFING 01.09.2026, P0 „Scroll-Animationen und weisse Flaechen", technische Mindestvorgabe: „Animationen maximal ca. 400 bis 600 ms, geringe Bewegung von etwa 12 bis 20 px, kaum Verzoegerung zwischen Elementen." Vorher 1,15 s und 18 px; die Staffelung ueber --d bleibt, die Seiten setzen sie in Millisekunden und muessen unter 200 bleiben. */ [data-anim] { opacity: 0; transform: translateY(14px); } .is-ready [data-anim] { opacity: 1; transform: none; transition: opacity 0.5s var(--ease-soft) calc(var(--d, 0) * 1ms), transform 0.5s var(--ease-soft) calc(var(--d, 0) * 1ms); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } [data-anim] { opacity: 1; transform: none; } /* ERGAENZT 04.09.2026 — beim Vermessen des Vorhangs aufgefallen. Die Regel oben setzt nur die DAUER auf null, nicht die VERZOEGERUNG. Der gestaffelte Einlauf der Menuezeilen laeuft aber ueber `transition-delay: calc(0.26s + var(--i) * 0.055s)` — gemessen war der erste Listeneintrag 60 ms nach dem Oeffnen noch auf opacity 0, die letzte Zeile haette rund 0,8 s gebraucht. Wer Bewegung abbestellt hat, sah also einen leeren Vorhang, der sich ruckartig fuellt. Hier stehen die Zeilen ohne Umweg sofort da. Bewusst nur auf den Vorhang gemuenzt und nicht global — eine `transition-delay: 0 !important`-Regel auf `*` wuerde in die uebrigen Stylesheets hineinregieren. */ .menu, .menu-schleier { transition: none !important; } .menu__nav li, .menu__aside > *, .menu__foot > *, .menu[data-open='true'] .menu__nav li, .menu[data-open='true'] .menu__aside > *, .menu[data-open='true'] .menu__foot > * { opacity: 1; transform: none; transition-delay: 0s !important; } } /* Der Varianten-Umschalter stand hier bis zum 24.08.2026 — eine feste Pille am unteren Fensterrand fuer die interne Abstimmung zwischen Variante A und B. Variante B ist geloescht, damit ist der Umschalter gegenstandslos. Er lag auf z-index 120 und hat auf dem Telefon regelmaessig Text verdeckt; das faellt mit weg. */ @media (max-width: 860px) { /* Bis zum 04.09.2026 standen hier zwei Regeln, die das zweispaltige Menue auf schmalen Fenstern flachlegten: .menu__body { grid-template-columns: 1fr; align-content: start; } .menu__aside { border-left: 0; border-top: 1px solid ...; padding-left: 0; padding-top: 2rem; } Der Vorhang ist inzwischen ueberall einspaltig und der Beiblock traegt seine waagerechte Linie schon in der Grundregel — beide Ausnahmen sind gegenstandslos. `.burger__label` bleibt. */ .burger__label { display: none; } } /* DER VORHANG AUF SCHMALEN FENSTERN — 04.09.2026. 60 % sind der Kundenwunsch, aber unterhalb von 620 px rechnen sie sich nicht mehr auf. Gemessen bei 390 px Fensterbreite: 60 % = 234 px, minus 2 x 20 px Innenabstand = 194 px Textbreite. „Erstgespräch vereinbaren" braucht im Knopf 231 px, der Knopf mit seinen 2 x 20 px Innenabstand also 271 px — er stuende weit ueber den Rand hinaus. Auch „Cookie-Einstellungen" (127 px) neben „Datenschutz" (86 px) passte in keine Zeile mehr, und „Warum Immobilien" (198 px bei 24 px Schrift) braeche um. 88 % = 343 px, minus 2 x 20 px = 303 px. Der Knopf steht mit 271 px darin, die beiden Rechtsverweise stehen mit 86 + 22 + 127 = 235 px nebeneinander. Kein Querlauf, keine Silbentrennung. 620 px als Umschaltpunkt, weil dort 60 % noch 372 px ergeben — abzueglich Innenabstand 332 px und damit reichlich fuer den breitesten Posten (271 px). Darunter greift die breitere Fassung. Die Seite dahinter bleibt auch bei 88 % sichtbar: 47 px Streifen links plus die abgedunkelte Lage, das genuegt als Hinweis, dass man danebentippen kann, um zu schliessen. */ @media (max-width: 620px) { .menu { width: 88%; } /* Der Vorhang soll auf dem Telefon in EINEM Blick stehen. Gemessen bei 390 x 800 mit dem Stand von vorhin: 927 px Inhalt in 800 px Fenster — „Impressum" lag 97 px unter der Kante. Vier Kuerzungen bringen ihn hoch, zusammen 157 px: Markenzeile aus -87 px (sie bricht hier auf zwei Zeilen) Fusszeilen-Innenabstand -22 px Rumpf-Innenabstand -35 px Rumpf-Abstand -13 px Damit stehen 770 px in 800 px, ohne Rollen. Die Markenzeile „Diskret. Strukturiert. Langfristig." faellt hier weg und nicht der Impressumsverweis: sie ist Schmuck und steht ohnehin im Fuss jeder Seite, der Verweis ist gesetzlich gefordert. */ .menu__foot > span { display: none; } /* Ohne die Markenzeile bleibt nur „Impressum" uebrig. `space-between` schoebe es an die linke Kante — als einzige linksbuendige Zeile in einem sonst durchgehend mittigen Vorhang. Deshalb hier mittig. */ .menu__foot { padding: 1rem 0 1.2rem; justify-content: center; } .menu__body { padding: 0.9rem 0; gap: 1.2rem; } } /* Zwischen 1340 und 1560 px steht die Waagerechte enger. Kleinerer Grad, weniger Sperrung, knappere Abstaende — damit die Zeile auf Laptops nicht auf Kante steht. Ab 1560 px gelten wieder die vollen Werte. */ @media (min-width: 1340px) and (max-width: 1560px) { .kopfnav ul { gap: 0.62rem; } .kopfnav a { font-size: 0.76rem; letter-spacing: 0.06em; } .kopfnav--links { margin-right: 0.9rem; } .kopfnav--rechts { margin-left: 0.9rem; } } /* ============================================================================ FLAECHENVERLAEUFE — 30.08.2026, dritter Anlauf Zweimal verworfen, beim dritten Mal hat der Kunde den Massstab genannt: den Kasten der FAQ und den bei „Brauche ich Eigenkapital". Der ist nachgerechnet, und damit ist der Fehler eindeutig: FAQ-Kasten #1E222D -> #2E3643, groesster Kanalunterschied 22, ueber rund 1100 px Kastenbreite = 0,020 Einheiten je Bildpunkt erste Anlaeufe Navy -> Weiss ueber 26 px = 9,42 je Bildpunkt ueber 96 px = 2,55 ueber 240 px = 1,02 ueber 600 px = 0,41 Selbst der langgezogenste Versuch war noch ZWANZIGMAL steiler als das, was der Kunde gut findet. Laenger ziehen reicht also nicht. Der Fehler liegt darin, eine Blende ZWISCHEN zwei Abschnitte zu legen: zwischen Navy und Weiss liegen 245 Einheiten, die sind auf keiner Strecke unauffaellig unterzubringen, die eine Webseite hergibt. DER RICHTIGE WEG: es gibt gar keine Blende. Jeder Abschnitt traegt seinen Verlauf ueber die EIGENE volle Hoehe und ENDET AUF DER FARBE SEINER NACHBARIN. Dann existiert die Naht nicht mehr, und weil ein Abschnitt 700 bis 1000 px hoch ist, liegt die Aenderung von selbst im Bereich des FAQ-Kastens. DIE REGEL, an der jeder Verlauf gemessen wird: hoechstens 0,03 Einheiten je Bildpunkt im staerksten Kanal. Ueber 800 px sind das rund 24 Einheiten. Wer mehr braucht, laesst zwei Farben ineinanderlaufen, die nicht ineinanderlaufen duerfen. NAVY GEGEN HELL bekommt GAR KEINEN Uebergang — Entscheidung des Kunden vom 30.08.2026, und sie ist richtig. 245 Einheiten bleiben 245 Einheiten; ueber 600 px sind das 0,41 je Bildpunkt, vierzehnmal zu steil. Es gibt keine Strecke auf einer Webseite, auf der diese Distanz unauffaellig wird. Dort steht eine saubere Kante, und das ist kein Zugestaendnis, sondern die richtige Loesung. Ein blassblauer Anlauf im hellen Abschnitt danach waere denkbar gewesen; der Kunde will ihn ausdruecklich nicht. Nach einer Navyflaeche kommt sauberes Weiss oder Creme. ========================================================================= */ :root { --fl-navy900: #0A192E; --fl-navy900-b: #16283F; /* 17 heller — Verlauf innerhalb der Familie */ --fl-navy800: #102949; --fl-navy800-b: #1C3A5E; /* 21 heller */ --fl-creme: #F7F3F0; --fl-weiss: #FFFFFF; } /* Eine Flaeche, die auf ihrer eigenen Farbe bleibt und nur atmet. */ .fl-navy900 { background-image: linear-gradient(180deg, var(--fl-navy900), var(--fl-navy900-b)); } .fl-navy800 { background-image: linear-gradient(180deg, var(--fl-navy800), var(--fl-navy800-b)); } /* Eine Flaeche, die auf der Farbe ihrer Nachbarin endet. Erst diese Bausteine machen die Naht ueberfluessig — sie ersetzen jede Blende. */ .fl-creme-nach-weiss { background-image: linear-gradient(180deg, var(--fl-creme), var(--fl-weiss)); } .fl-weiss-nach-creme { background-image: linear-gradient(180deg, var(--fl-weiss), var(--fl-creme)); } /* =========================================================================== DER SCHIMMER AUF DEN SANDKNOEPFEN — 04.09.2026 Kundenwunsch woertlich, mit der Vorlage dazu: „Wenn du dir jetzt diese Seite ansiehst [estateanfrage-karriere.de], siehst du bei ‚Deiner Karriere in sicheren Händen‘ bei den einzelnen Stellen bei ‚Jetzt bewerben‘ immer alle 2 Sekunden einen Schimmer von links nach rechts, von der oberen linken Ecke nach der unteren rechten Ecke, der sich so bewegt. […] baue das dann bitte nach genau das gleiche. Das können wir dann für alle CTA-Buttons auf der kompletten Webseite anwenden, die diese Hintergrundfarbe haben." NICHT NACHEMPFUNDEN, SONDERN ABGEMESSEN. Ich habe den Knopf der Vorlage im Browser aufgemacht und seine gerechneten Werte ausgelesen, statt den Eindruck nachzubauen. Die Vorlage legt eine eigene Lage in den Knopf (, position:absolute, inset:0, overflow:hidden) und schiebt in deren ::before einen Verlauf durch: background: linear-gradient(120deg, rgba(255,255,255,0) , rgba(255,255,255,0) 40%, rgba(255,255,255,.3), rgba(255,255,255,.3) 60%, rgba(255,255,255,0)); animation: 2.5s infinite blink-infinite; @keyframes blink-infinite { 0% { transform: translate3d(-100%,0,0) scale(2); opacity: 1 } 50% { transform: translate3d( 100%,0,0); opacity: 0 } 51% { transform: translate3d(-100%,0,0); opacity: 0 } 100% { transform: translate3d(-100%,0,0); opacity: 1 } } Beides steht unten Zeichen fuer Zeichen so da. Drei Anmerkungen dazu: ZWEI SEKUNDEN ODER ZWEIEINHALB. Der Kunde hat „alle 2 Sekunden" gesagt; gemessen sind es 2,5 s. „Genau das gleiche" wiegt hier schwerer als die geschaetzte Zahl im selben Satz — es bleibt bei 2,5 s. DIE SCHRAEGE. 120deg ist es, was den Schein von links oben nach rechts unten laufen laesst; die Bewegung selbst ist waagerecht. Wer den Winkel anfasst, dreht die Richtung, die der Kunde beschrieben hat. OHNE EIGENE LAGE IM MARKUP. Die Vorlage braucht ihren span, weil ihr Knopf overflow:visible traegt. Unser .btn traegt seit jeher overflow:hidden (weiter oben in dieser Datei) — der Knopf ist also selbst die Maske, und ::after genuegt. An keinem Knopf im Projekt haengt bereits ein ::after; ::before ist an .kar-knopf--voll belegt und bleibt unangetastet. WELCHE KNOEPFE. Gemessen ueber alle neun Seiten: Sandflaeche (rgb(217,180,133)) tragen .btn (ohne die Varianten --ghost und --weiss, die transparent beziehungsweise weiss sind), .kar-knopf--voll auf der Karriereseite und .wi__knopf auf der Startseite. Die beiden letzten holen sich den Schimmer in ihrer eigenen Datei, weil ihre Flaeche auch dort gesetzt wird. BEI reduce IST SCHLUSS. Ein Schein, der ohne Zutun alle 2,5 s ueber den Knopf laeuft, ist genau die Dauerbewegung, die das Optimierungsbriefing (Abschnitt P0) abschalten laesst. =========================================================================== */ @keyframes es-schimmer { 0% { transform: translate3d(-100%, 0, 0) scale(2); opacity: 1; } 50% { transform: translate3d(100%, 0, 0); opacity: 0; } 51% { transform: translate3d(-100%, 0, 0); opacity: 0; } 100% { transform: translate3d(-100%, 0, 0); opacity: 1; } } /* Der Schein selbst. Steht als eigener Baustein da, damit die drei Knopfklassen unten nur noch darauf zeigen muessen. */ .btn:not(.btn--ghost):not(.btn--weiss)::after, .kar-knopf--voll::after, .wi__knopf::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; /* der Schein darf keinen Klick abfangen */ border-radius: inherit; background: linear-gradient(120deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0.3) 40%, rgba(255, 255, 255, 0.3) 60%, rgba(255, 255, 255, 0) 60%); animation: es-schimmer 2.5s infinite; } /* .btn bringt overflow:hidden und position:relative schon mit; die beiden anderen Klassen nicht ueberall — deshalb hier, und nur hier. */ .kar-knopf--voll, .wi__knopf { position: relative; overflow: hidden; } /* GESPERRTE KNOEPFE SCHIMMERN NICHT. Gemessen im Kontaktvollbild: der „Weiter"-Knopf steht dort bis zur ersten Antwort auf aria-disabled="true" und ist dann durchsichtig (rgba(0,0,0,0)) statt sandfarben. Ohne diese Zeile liefe der weisse Schein ueber den Navygrund des Vollbilds und winkte an einem Knopf, den man noch gar nicht druecken kann. Sobald die Sperre faellt, ist der Knopf wieder sandfarben und schimmert mit. */ .btn[aria-disabled='true']::after, .btn:disabled::after { animation: none; opacity: 0; } @media (prefers-reduced-motion: reduce) { .btn:not(.btn--ghost):not(.btn--weiss)::after, .kar-knopf--voll::after, .wi__knopf::after { animation: none; opacity: 0; } } /* =========================================================================== DER NAVIGATIONSVORHANG AUF DEM TELEFON — 09.09.2026 Kundenwunsch woertlich: „In der NavBar, die sich oeffnet, soll auf der mobilen Ansicht Kontakt, also info@estera.immobilien, raus, und Datenschutz und Cookie-Einstellungen runter. Man sieht dann nur oben das Estera-Immobilien-Logo, dann: Warum Immobilien, Warum Estera, Ablauf, Karriere, Kontakt. Dann Naechster Schritt — und da kannst du den Text auf drei Zeilen schreiben, dass er nicht so breit wird, sondern auch mittig ist. Erstgespraech-vereinbaren-Knopf. Dann Kontakt / info@estera.immobilien kann raus. Und dann steht unten: Impressum, Datenschutz, Cookie-Einstellungen." DIE REIHENFOLGE ERGIBT SICH VON SELBST. Der Vorhang steht im Markup schon in genau dieser Folge — Kopfzeile, Liste, Beiblock (Naechster Schritt, Knopf, Kontakt), Fusszeile. Es war KEIN `order` noetig und keine Umsortierung: es reicht, den Kontaktblock auszublenden und die beiden Rechtsverweise unten sichtbar zu machen. Damit steht unter 768 px: Wortmarke oben, Kreuz rechts Warum Immobilien · Warum Estera · Ablauf · Karriere · Kontakt Kleinzeile „Naechster Schritt" der Satz, dreizeilig und mittig Knopf „Erstgespraech vereinbaren" Impressum · Datenschutz · Cookie-Einstellungen DIE E-MAIL-ADRESSE IST DAMIT IM VORHANG NICHT MEHR ERREICHBAR — und das ist geprueft und nicht angenommen. Sie steht weiterhin in der Fusszeile JEDER der neun Seiten (.fuss__liste, erster Eintrag unter „Kontakt", 16 px, 44 px Trefferflaeche) und zusaetzlich im Fliesstext von kontakt.html und impressum.html. Kein Weg zur Adresse geht verloren, es faellt nur der zweite Weg auf demselben Bildschirm weg. 1) DER KONTAKTBLOCK. `display: none` statt Loeschen — am breiten Fenster bleibt er unveraendert stehen, das ist die Auflage. Mit ihm verschwindet auch .menu__recht, das seit dem 04.09.2026 in ihm steckt; dafuer stehen die beiden Verweise unten ein zweites Mal im Markup. 2) DIE DREI VERWEISE UNTEN. `.menu__foot-mobil` sind die zwei zusaetzlichen
  • im Markup. Sie stehen in der Grundregel auf `display: none` und kommen erst hier dazu — der Desktop sieht sie nie. IN EINER ZEILE STEHEN SIE BEI 390 px NICHT, und das ist gerechnet, nicht uebersehen. Der Vorhang misst dort 88 % von 390 = 343,2 px, abzueglich 2 x 20 px Innenabstand bleiben 303,2 px Satzbreite. Die drei Woerter messen in der Bedienschrift des Projekts (16 px, dieselbe Untergrenze wie ueberall) GEMESSEN 69,5 + 78,4 + 134,4 = 282,3 px, dazu zwei Fugen zu 22,4 px = 327,1 px. Das passt in keine 303,2 px. Sie brechen deshalb um: „Impressum · Datenschutz" in der ersten Zeile, „Cookie-Einstellungen" in der zweiten, beide Zeilen mittig. Der einzige Weg zu einer einzigen Zeile waere ein Grad unter 16 px — das verbietet die Regel fuer Bedienschrift, und der Verzicht darauf ist hier die richtige Entscheidung. AB 430 px STEHEN SIE IN EINER ZEILE. Nachgemessen ueber vier Geraetebreiten, Fusszeile des Vorhangs: 360 px Vorhang 316,8 Satzbreite 276,8 -> zwei Zeilen 390 px Vorhang 343,2 Satzbreite 303,2 -> zwei Zeilen 430 px Vorhang 378,4 Satzbreite 338,4 -> EINE Zeile 767 px Vorhang 460,2 Satzbreite 414,2 -> EINE Zeile Der Umbruch ist also der schmalen Geraeteklasse geschuldet und keine Eigenschaft der Loesung. OHNE VERSALIEN UND OHNE SPERRUNG. Die Fusszeile des Vorhangs steht in 0,86rem = 13,76 px, gesperrten Versalien und Gewicht 500. Beides faellt hier weg, und zwar aus zwei Gruenden: 13,76 px liegen unter der 16-px-Grenze fuer Bedienschrift, und die zwei Verweise, die hier dazukommen, standen bis heute oben in .menu__recht — dort hat der Kunde am 04.09.2026 ausdruecklich „auch dick" und keine Versalien verlangt. Sie bringen ihre Erscheinung also mit; „Impressum" zieht nach, damit die Reihe nicht aus zwei verschiedenen Schriftbildern besteht. Gewicht 600 ist dasselbe wie in .menu__recht. Versalien mit 0,14 em Sperrung waeren ausserdem rund 30 % breiter — die Reihe braeche auf drei Zeilen statt auf zwei. 3) DER SATZ AUF DREI ZEILEN. „Erst pruefen wir, ob deine Kapitalanlage zu dir passt. Danach sprechen wir ueber Objekte." stand bei 390 px auf 303,2 px Breite in ZWEI Zeilen (GEMESSEN 61,6 px hoch bei 30,8 px Zeilenhoehe). Der Kunde will drei und ausdruecklich „nicht so breit". DER DECKEL IST AUSGEMESSEN, NICHT GESCHAETZT. Der Satz steht bei 32ch — GEMESSEN 261,3 px, also 86 % der Satzbreite. Die Spanne, in der er drei Zeilen ergibt, ist mit einer Messreihe abgesucht worden: 21ch = 171,5 px .. 28ch = 228,6 px vier Zeilen 29ch = 236,8 px .. 36ch = 294,0 px DREI Zeilen 37ch = 302,1 px und breiter zwei Zeilen 32ch liegt in der Mitte dieser Spanne, mit rund 25 px Reserve nach jeder Seite. Der erste Anlauf stand auf 21ch und ergab VIER Zeilen — nachgemessen und korrigiert, nicht gerechnet und geglaubt. Die drei Zeilen messen zusammen 92,4 px bei 30,8 px Zeilenhoehe. Bei 360 px Fensterbreite (Vorhang 316,8 px, Satzbreite 276,8 px) und bei 767 px (Vorhang 60 % = 460 px, Satzbreite 414 px) traegt derselbe Deckel — nachgerechnet, er ist in beiden Faellen der engere Wert. `margin-inline: auto` haelt die schmalere Spalte in der Mitte; `text-align: center` traegt .menu__aside schon in seiner Grundregel, der Satz war nie linksbuendig. ch UND NICHT px, weil der Grad des Satzes selbst in rem steht: waechst die Schrift beim Nutzer, waechst der Deckel mit und es bleiben drei Zeilen. Ein fester Pixelwert haette dort vier oder fuenf ergeben. NICHTS DAVON GILT AB 768 px. Alle Regeln stehen in einer Breitenabfrage, und die Grundregel darueber setzt nur die neue Klasse auf `display: none` — ein Zustand, den es vor heute gar nicht gab. Am breiten Fenster ist der Vorhang damit zeichengleich der von gestern. =========================================================================== */ /* Grundzustand: die zwei zusaetzlichen Verweise unten gibt es nur auf dem Telefon. Steht ausserhalb jeder Abfrage, damit sie auch dort verborgen sind, wo keine Medienabfrage greift (Druck, alte Browser). */ .menu__foot-mobil { display: none; } @media (max-width: 767px) { /* Kontakt, E-Mail und die zwei Rechtsverweise darin — raus. */ .menu__kontakt { display: none; } /* Dafuer die zwei Verweise unten, neben „Impressum". */ .menu__foot-mobil { display: block; } /* Die Fusszeile des Vorhangs wird eine Reihe aus drei gleichwertigen Verweisen. `justify-content: center` steht schon in @media (max-width: 620px); hier noch einmal, weil dieser Block auch den Streifen 621 bis 767 px traegt, wo jene Regel nicht greift. */ .menu__foot { justify-content: center; text-transform: none; letter-spacing: 0; font-size: 1rem; } .menu__foot ul { justify-content: center; /* 1,4rem ist die Fuge, die .menu__recht zwischen „Datenschutz" und „Cookie-Einstellungen" haelt — dieselbe Reihe, dieselbe Fuge. */ gap: 0 1.4rem; } .menu__foot a { display: inline-flex; align-items: center; min-height: 44px; /* Trefferflaeche */ padding: 0; /* die 0,82rem oben sind mit min-height ersetzt */ font-size: 1rem; /* 16 px, Untergrenze fuer Bedienschrift */ font-weight: 600; letter-spacing: 0; color: rgba(255, 255, 255, 0.8); /* 8,4:1 auf Navy 900 */ } .menu__foot a:hover { color: #fff; } /* Der Satz unter „Naechster Schritt" auf drei Zeilen. */ .menu__aside > div:first-child > p:not(.kicker) { max-width: 32ch; margin-inline: auto; } }