/* =========================================================================== VARIANTE A — Bildband + eingelegter Kasten Prinzip MLP: niedriges, vollbreites Bildband. Prinzip Imperia: Text links, Objektbild rechts, Headline zweizeilig mit farbig abgesetzter zweiter Zeile. Der Kasten ist bewusst breit und flach — er soll das Band rahmen, nicht ersetzen. =========================================================================== */ .heroA { --panel-pad: clamp(1.8rem, 5vw, 5rem); /* Der Schriftgrad der Ueberschrift und die Hoehe EINER ihrer Zeilen (Zeilenabstand 1.1). Beides als Token, weil die Lage des Objektbildes rechnerisch daran haengt — siehe .heroA__figure. --h1-fest ist der Grad, bei dem die Bildlage vom Kunden abgenommen wurde („Das Bild bleibt genau in derselben Position. Das ist sehr gut."). Er ist der Bezugspunkt und darf nicht mitwandern, wenn die Ueberschrift groesser gestellt wird. */ /* EIN TICK KLEINER — 01.09.2026, Kundenwunsch nach dem Livegang: „Die Headline ragt leicht in das Bild hinein." Die neue Ueberschrift aus dem Briefing ist zweizeilig und laenger als die alte; 2,95 -> 2,7. Der Bildzug (.heroA__figure, -2 Zeilen) haengt an derselben Variable und rechnet sich von selbst nach. */ --h1-groesse: clamp(1.9rem, 2.7vw, 2.7rem); --h1-fest: clamp(1.9rem, 2.75vw, 2.75rem); --h1-zeile: calc(1.1 * var(--h1-groesse)); --h1-zeile-fest: calc(1.1 * var(--h1-fest)); position: relative; /* NAVY ALS GRUND, WEISSER MARMORKASTEN DARAUF. Der Grund war zuerst weiss, dann Navy, kurz der Sandton des Knopfes und seit dem 24.08.2026 wieder Navy — so vom Kunden festgelegt. Der Marmorkasten steht damit frei auf dunklem Grund, statt wie urspruenglich nach unten in weisses Seitenpapier auszulaufen. Die weisse Kante unter dem Bildband traegt auf diesem Grund am staerksten: Weiss auf Navy sind 17.63:1, auf Sand waren es 1.94:1. */ /* NUR background-color. Der Abschnitt traegt seit dem 30.08.2026 die Klasse `fl-navy900` aus base.css: die Flaeche bleibt in ihrer eigenen Farbfamilie und atmet von #0A192E auf #16283F — 17 Einheiten ueber die volle Hoehe, also weit unter der Regel von 0,03 je Bildpunkt. Das ist kein Uebergang zu einer anderen Farbe, sondern derselbe Fall wie der Verlauf im FAQ-Kasten. Die Kante zur Cremeflaeche darunter bleibt sauber; sie liegt ohnehin unter dem geschwungenen Rand von .ref. Kurzschreibweise waere hier falsch — sie wuerde die Klasse ueberschreiben, weil hero-a.css nach base.css geladen wird. */ background-color: var(--navy-900); /* MEHR LUFT NACH UNTEN als frueher, und zwar deutlich. Die Section darunter zieht sich mit ihrem geschwungenen Rand um bis zu 92 px hier herein. Dieser Abstand muss GROESSER sein als diese Kurve, sonst legt sie sich auf den weissen Marmorkasten — und Creme auf Weiss ist keine sichtbare Kante. Genau das war beim ersten Versuch der Fall: nachgemessen blieben nur 15 px, die Kurve war ausschliesslich links und rechts neben dem Kasten zu erkennen. Mit 14vh bleiben ueber der Kurve rund 40 px Navy stehen — sie zeichnet sich damit ueber die ganze Breite ab, so wie in der Vorlage des Kunden. Faustregel beim Nachstellen: dieser Wert minus --ref-bogen-h aus referenzen.css ist der sichtbare Navy-Streifen. */ padding-bottom: clamp(7rem, 14vh, 11rem); } /* --- Bildband ------------------------------------------------------------- */ .heroA__band { position: relative; height: clamp(340px, 48vh, 540px); overflow: hidden; background: var(--navy-800); /* WEISSE KANTE UNTER DEM BAND (Kundenwunsch 24.08.2026, nachgeschaerft: „deutlich dicker … mehr in das Navy Blue hinein"). Bewusst ein Schlagschatten ohne Weichzeichnung und ohne Streuung, nur mit Versatz nach unten: das zeichnet einen sauberen weissen Streifen genau in dieser Hoehe UNTERHALB des Bandes — also im Navy, nicht im Film. Eine Umrandung ginge nicht: `box-sizing: border-box` aus dem Reset wuerde sie nach INNEN legen und damit den Film beschneiden, und `overflow: hidden` schneidet alles ab, was von innen herauswill. Der eigene Schatten eines Elements wird davon nicht erfasst. Der Streifen laeuft ueber die volle Breite, sichtbar ist er aber nur LINKS UND RECHTS des Hero-Kastens — der liegt auf z-index 3 darueber und deckt die Mitte ab. Genau das war gemeint. */ box-shadow: 0 clamp(6px, 0.7vh, 9px) 0 0 #FFFFFF; } /* Standbild und Film liegen deckungsgleich übereinander — gleicher Ausschnitt, gleiche Tonung. Beide sind absolut gesetzt; der Film steht im Quelltext HINTER dem Bild und deckt es deshalb ab, solange er läuft. Bewusst OHNE z-index: der abdunkelnde Verlauf .heroA__band::after muss über beiden liegen, und das tut er nur, solange hier keine Stapelordnung aufgemacht wird. */ .heroA__band img, .heroA__band video { position: absolute; top: 0; left: 0; width: 100%; height: 112%; object-fit: cover; object-position: 50% 46%; transform: translateY(var(--shift, 0)); /* Das Band ist Tonträger — hell und scharf bleibt nur das Objektbild. */ filter: saturate(0.24) contrast(1.12) brightness(0.76); will-change: transform; } /* Der Film ist reine Kulisse: die Bildbeschreibung trägt das Standbild darunter, angefasst werden soll er nicht. */ .heroA__band video { pointer-events: none; } /* Ruhige Darstellung: eine dauernd laufende Kamerafahrt im Hintergrund ist für empfindliche Menschen belastend. Wer im Betriebssystem weniger Bewegung angefordert hat, sieht das Standbild — der Film wird ausgeblendet. Das Skript im Hero hält ihn zusätzlich an; diese Regel greift auch dann, wenn kein JavaScript läuft. */ @media (prefers-reduced-motion: reduce) { .heroA__band video { display: none; } } .heroA__band::after { content: ''; position: absolute; inset: 0; /* EIN durchgehender vertikaler Verlauf — ein zweiter, seitlicher Verlauf erzeugte eine sichtbare Kante bei ~65 % Breite. */ background: linear-gradient(to bottom, rgba(10,25,46,0.66) 0%, rgba(10,25,46,0.40) 44%, rgba(10,25,46,0.52) 100%); pointer-events: none; } /* --- Der eingelegte Kasten ------------------------------------------------ */ .heroA__panel { position: relative; z-index: 3; /* Flacher Überstand: der Kasten sitzt tiefer, damit mehr Band sichtbar bleibt. Er beißt nur noch mit knapp einem Drittel seiner Höhe hinein. */ margin: clamp(-150px, -14vh, -95px) auto 0; max-width: 1460px; width: calc(100% - var(--gutter) * 2); /* DECKENDES WEISS ALS UNTERLAGE. Der Kasten hatte hier bisher gar keine eigene Farbe — er lebte ausschliesslich von der Marmorlage darueber. Seit die auf 70 Prozent zurueckgenommen ist, braucht es diese Unterlage: ohne sie schiene durch die abgeschwaechte Lage das Navy des Grundes hindurch und der Kasten wuerde schmutzig. */ background: #FFFFFF; display: grid; /* Textspalte dominiert — der Satz soll in die Breite laufen, nicht stapeln */ grid-template-columns: minmax(0, 58fr) minmax(0, 42fr); /* WAAGERECHT ja, SENKRECHT nein. Solange das Panel eine einzige Zeile hatte, war `gap` nur der Abstand zwischen Text und Bild. Seit der Kopf eine eigene Zeile bekommen hat, wirkt derselbe Wert auch nach unten und hat Ueberschrift, Subline und Bild um 43 px auseinandergezogen. Genau das war die Luecke, die der Kunde gesehen hat. */ column-gap: clamp(1.5rem, 3vw, 3rem); row-gap: 0; align-items: center; /* Rundum rund: der Kasten laeuft nicht mehr aus, er steht. */ border-radius: var(--radius-img); isolation: isolate; } /* Der Kasten ist in drei Zonen aufgebaut: oben deckendes Weiß (er liegt auf dem dunklen Bildband und muss decken), in der Mitte die Marmorierung, unten löst er sich in das Seitenpapier auf — dadurch gibt es keine sichtbare Kante und keine optisch getrennten Abschnitte. Bewusst ohne mask-image/mask-composite aufgebaut: Mehrschicht-Masken mit Composite-Modus rendern in Safari und älteren Engines abweichend. Hier liegt stattdessen der Marmor als Vollfläche unten und wird von oben mit ganz normalen Verläufen abgedeckt — das funktioniert überall gleich. */ /* Schicht 1: Marmor, volle Fläche */ .heroA__panel::after { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: inherit; /* Calacatta mit feiner, scharf gezeichneter Äderung. Bewusst OHNE Multiply-Verdopplung: die hat die Fläche flächig angeschmutzt statt die Adern zu schärfen — das sah nach Schmutzspur aus, nicht nach Stein. */ background: #FFFFFF url('../img/marble2.jpg') center / cover no-repeat; /* AUF 70 PROZENT ZURUECKGENOMMEN am 24.08.2026. Kundenwortlaut: „Die Marmoroptik muss um 30 % reduziert werden, sonst konkurriert die Marmoroptik zu stark mit dem Text." Die Aederung bleibt sichtbar, tritt aber hinter die Schrift zurueck. Ueber die Deckkraft der ganzen Lage geloest und nicht ueber ein aufgehelltes Bild — so bleibt die Datei unangetastet und der Wert ist an einer Stelle nachstellbar. */ opacity: 0.7; } /* Schicht 2: Verläufe darüber. REIHENFOLGE IST ENTSCHEIDEND: In der background-Kurzschreibweise liegt der zuerst genannte Verlauf oben. Der senkrechte muss deshalb zuerst stehen — sonst überschreibt das deckende Weiß des waagerechten die Auflösung ins Seitenpapier auf der rechten Seite, und der Kasten bekommt unter dem Bild wieder eine sichtbare Kante. */ /* Schicht 2: Verläufe darüber. Wieder der Aufbau von vorher — oben deckendes Weiß, in der Mitte der Marmor, waagerecht zur Bildspalte hin zurückgenommen. EIN UNTERSCHIED zur alten Fassung: die letzten beiden Haltepunkte liefen auf `--paper-warm` aus, damit sich der Kasten unten ins weiße Seitenpapier auflöst. Das Papier ist jetzt navy — derselbe Verlauf würde den Kasten also nicht mehr auflösen, sondern unten einen weißen Balken vor dunklem Grund stehen lassen. Die beiden Stopps enden deshalb im Marmor statt im Papier; der Kasten bleibt bis zur Unterkante Marmor und hört dort sauber an seiner Rundung auf. REIHENFOLGE IST WEITERHIN ENTSCHEIDEND: In der Kurzschreibweise liegt der zuerst genannte Verlauf oben. */ .heroA__panel::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: inherit; background: linear-gradient(to bottom, #FFFFFF 0%, #FFFFFF 11%, rgba(255,255,255,0.42) 28%, rgba(255,255,255,0.42) 56%, rgba(255,255,255,0.34) 76%, rgba(255,255,255,0.30) 91%, rgba(255,255,255,0.30) 100%), linear-gradient(100deg, rgba(255,255,255,0) 34%, rgba(255,255,255,0.78) 62%, #FFFFFF 80%); } /* Umrandung als eigene Lage: oben und an den Seiten sichtbar, nach unten ausblendend. Eine geschlossene Linie würde die Auflösung des Kastens in die Seite zunichtemachen — deshalb die Maske. */ .heroA__rahmen { position: absolute; inset: 0; z-index: 3; pointer-events: none; /* Rundum, ohne Maske: der Kasten laeuft nicht mehr ins Papier aus, sondern steht als Flaeche auf Navy. Eine unten offene Linie waere dort ein Fehler. */ border: 1px solid rgba(16, 41, 73, 0.22); border-radius: inherit; } .heroA__text, .heroA__figure { position: relative; z-index: 2; } /* --------------------------------------------------------------------------- DER KOPF LIEGT UEBER BEIDEN SPALTEN. Kundenwunsch 24.08.2026: „Aus Einkommen wird Eigentum. Aus Eigentum wird Vermögen." gehoert in EINE Zeile — „dann geht quasi die Zeile ueber das Bild hin weiter." In der 58fr-Textspalte war der Satz dafuer zu lang und brach in zwei Zeilen. Der Kopf bekommt deshalb eine eigene Rasterzeile ueber die volle Breite (`grid-column: 1 / -1`). Darunter laeuft die alte Aufteilung weiter: Text links, Bild rechts. Weil der Kopf ueber dem Bild sitzt und nicht auf ihm, steht die Zeile weiter auf weissem Grund — kein Text auf Foto, kein Kontrastproblem. Nachgemessen bei 1440 px: der Satz braucht 931 px, die Panelbreite bietet rund 1300 px. Ab 980 px stapelt das Panel ohnehin einspaltig, dort darf und muss die Zeile brechen. --------------------------------------------------------------------------- */ .heroA__kopf { grid-column: 1 / -1; position: relative; z-index: 2; /* DER KOPF FUEHRT DIESELBEN SPALTEN WIE DER KASTEN. Nur so laesst sich der Eyebrow exakt ueber dem Bild ausrichten: er sitzt in Spalte 2 und bekommt denselben rechten Innenabstand wie .heroA__figure — sein Kasten deckt sich damit auf den Pixel mit dem Bild, und `text-align: center` zentriert ihn wirklich UEBER DEM BILD und nicht ueber der Rasterspalte, die rechts breiter ist als das Bild. Seitlich deshalb ohne Polsterung: die tragen Eyebrow und Ueberschrift jetzt selbst, sonst waeren die Spalten gegen die des Kastens verschoben. */ display: grid; grid-template-columns: minmax(0, 58fr) minmax(0, 42fr); column-gap: clamp(1.5rem, 3vw, 3rem); padding: var(--panel-pad) 0 0; } /* Der Eyebrow traegt seit dem 24.08.2026 den Sandton des Knopfes „Vorteile entdecken" (Kundenwunsch). Es ist die vertiefte Fassung --sand-schrift; der reine Sand misst als Schrift auf Weiss 1.94:1. OFFEN UND BEWUSST SO: gemessen sind 3.39:1. Fuer kleine Schrift verlangt die Regel 4.5:1. Der Ton, den der Eyebrow vorher trug (--gold, #A8874F), lag mit 3.36:1 aber praktisch gleich — es ist also kein Rueckschritt, sondern derselbe Lesewert im passenden Farbton. Wer das sauber aufloesen will, muss entweder den Eyebrow groesser setzen oder auf --gold-text (#86693A, 4.82:1) gehen; dann trifft er die Knopffarbe allerdings sichtbar nicht mehr. */ .heroA__eyebrow { /* NAVY seit dem 24.08.2026 (Kundenwunsch). Damit ist die Zeile zum ersten Mal richtig lesbar: 14.65:1 gegen den weissen Kasten. Vorher trug sie erst Gold (3.36:1) und dann den vertieften Sandton (3.39:1) — beide lagen unter den 4.5:1, die fuer eine Zeile dieser Groesse gelten. Das Fetten auf 600 half dem Auge, am Messwert aber nicht. Der Wechsel auf Navy loest das. */ color: var(--navy-800); } .heroA__text { display: grid; /* OBEN statt MITTIG (Kundenwunsch 24.08.2026: „setze die Subline auch weiter nach oben"). Vorher stand hier `center`: der Textblock wurde gegen das hohe Bild in der Nachbarspalte zentriert, und weil das Bild hoeher ist als Subline plus Knoepfe, entstand darueber eine grosse Luecke. Mit `start` haengt der Text unmittelbar unter der Ueberschrift. Gemessen bei 1440 px: 72 px Luecke vorher, 12 px jetzt. */ align-content: start; /* OBEN statt MITTIG IN DER RASTERZEILE. Der Kasten setzt `align-items: center`; die Zeilenhoehe gibt das Bild vor, und weil der Textblock niedriger ist, wurde er darin zentriert — daher die Luecke ueber der Subline. `align-self: start` haengt ihn oben ein. */ align-self: start; /* Ohne Abstand nach oben. Seit die Wechselzeile entfallen ist, ruecken Subline und Knoepfe auf Kundenwunsch dorthin nach, wo sie stand. LINKS: dieselbe Kante wie die Ueberschrift, naemlich --panel-pad. Kurzzeitig stand hier eine zur Laufzeit gemessene Kante — solange die Ueberschrift mittig stand, liess sich ihr erster Buchstabe nicht in CSS ausdruecken. Seit sie linksbuendig an derselben Kante ansetzt, ergibt sich die Flucht von selbst; die Messung in site.js ist damit entfallen. */ padding: 0 0 var(--panel-pad) var(--panel-pad); } /* --------------------------------------------------------------------------- Die drei Bausteine, die der Wording-Master neu vorgibt: Eyebrow über der Überschrift, Hinweis unter den Knöpfen, Gütezeile am Fuß. Sie sind ergänzt, nicht gestaltet. Der Eyebrow ist die vorhandene .kicker-Klasse; Hinweis und Gütezeile nehmen Schriftgrad und Farbe aus dem Satzbild, das im Panel ohnehin gilt. Kein neuer Ton, keine neue Größe, keine Umrandung — die Hero-Geometrie bleibt, wie sie war. --------------------------------------------------------------------------- */ .heroA__eyebrow { margin-bottom: 14px; /* Mittig ueber die volle Kastenbreite und kraeftiger gesetzt (Kundenwunsch 24.08.2026: „muss mittig in den Kasten … und soll ein bisschen dicker geschrieben werden, damit man es besser lesen kann"). .kicker steht auf 400; 600 ist der Sprung, der bei gesperrten Versalien in Cormorant wirklich traegt. Das hebt die Lesbarkeit spuerbar — den gemessenen Kontrast von 3.39:1 aendert es allerdings nicht, dafuer ist die Zeile mit rund 14 px zu klein. */ /* RECHTS, UEBER DEM BILD (Kundenwunsch 24.08.2026: „Ich will, dass ‚Immobilien als Kapitalanlage' rechts ueber das Bild kommt."). Der Kopf laeuft ueber beide Spalten; rechtsbuendig endet der Eyebrow damit auf derselben Senkrechten wie die rechte Kante des Objektbilds — beide sitzen am Innenabstand des Kastens. */ grid-column: 2; text-align: center; /* Deckt sich mit dem rechten Innenabstand von .heroA__figure — dadurch ist der Kasten des Eyebrows genau der Kasten des Bildes. */ padding-right: var(--panel-pad); font-weight: 600; } /* Der Hinweis „Persönlich. Unverbindlich. Individuell auf deine Situation abgestimmt." stand hier bis zum 24.08.2026 und ist auf Kundenwunsch entfernt. Er steht weiterhin so im Wording-Master, Abschnitt 2 — wer ihn zurueckholt, findet die Regel in der Versionsgeschichte. */ /* Die Gütezeile schließt das Panel ab. Eine goldene Haarlinie davor setzt sie vom Hinweis ab, ohne einen zweiten Absatz aufzumachen — dieselbe Sprache wie die .rule-gold im übrigen Projekt. */ .heroA__guete { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line-gold); font-size: clamp(0.86rem, 0.96vw, 0.96rem); letter-spacing: 0.06em; color: var(--ink-soft); } .heroA__h1 { /* Zwei Saetze, die miteinander umbrechen duerfen — `text-wrap: balance` aus .display verteilt sie. Am 24.08.2026 einen Tick groesser gestellt (Kundenwunsch): von clamp(1.9rem, 2.75vw, 2.75rem) auf clamp(2rem, 2.95vw, 2.95rem), also rund 7 Prozent. Nachgemessen bleibt der Satz damit bei 1024 px und darueber weiterhin EINZEILIG — das ist die Grenze, die nicht fallen darf. */ font-size: var(--h1-groesse); /* ZWEIZEILIG, LINKSBUENDIG, ALS BLOCK MITTIG (Kundenwunsch 24.08.2026). Beide Zeilen beginnen auf derselben Kante — dieselbe Kante, an der auch Subline, Knoepfe und Guetezeile fluchten. Der Block als Ganzes steht mittig im Kasten. `width: max-content` macht den Block genau so breit wie seine laengste Zeile; `margin-inline: auto` zentriert ihn. Mit `text-align: center` waere jede Zeile fuer sich zentriert und die kuerzere zweite wuerde eingerueckt stehen — dann gaebe es keine gemeinsame linke Kante mehr, und die Flucht mit der Subline waere hin. `max-width: 100%` ist die Reissleine: unterhalb von rund 980 px passt die laengste Zeile nicht mehr, dort bricht der Satz normal um. */ text-align: left; grid-column: 1 / -1; /* Dieselbe Kante wie .heroA__text darunter: beide setzen bei --panel-pad ab der linken Kastenkante an. Damit fluchten beide Zeilen der Ueberschrift mit Subline, Knoepfen und Guetezeile — ohne Messung, weil hier nichts mehr zentriert ist. */ padding-inline: var(--panel-pad); line-height: 1.1; /* STAERKER — 01.09.2026, Optimierungsbriefing, Abschnitt 03: „Headline und Subline duerfen optisch nicht wie ein grosser Textblock wirken. Headline staerker, Subline schmaler setzen." Die Ueberschrift stand wie jede .display im Schnitt 300 und war damit kaum kraeftiger als die Unterzeile darunter (400). 500 ist ein echter Schnitt von Cormorant (fonts.css) und der kleinste Sprung, der die beiden Zeilen wirklich trennt; 600 saehe nach Fett aus, und das traegt diese Seite nirgends in Ueberschriften. */ font-weight: 500; max-width: 100%; } .heroA__h1 .accent { display: block; color: var(--accent); } /* DER ABSCHLUSS „Nicht umgekehrt." — 01.09.2026, Optimierungsbriefing, Abschnitt 03: „kann in Gold oder durch einen deutlichen Zeilenumbruch hervorgehoben werden." Hier ist es beides: eigene Zeile UND Gold. Die erste Zeile ist lang, ein goldener Nachsatz in derselben Zeile ginge hinter ihr unter. FARBE: --gold-text #86693A, gemessen 5,13:1 auf dem weissen Kasten. Der Sand des Knopfes (#D9B485) misst dort 1,94:1 und ist als Schrift unbrauchbar; --gold (#A8874F) 3,36:1 traegt nur als Linie. Bei dieser Zeilengroesse (42 px) gaelte zwar die 3:1-Schwelle fuer grosse Schrift, aber unter 620 px faellt die Ueberschrift auf 23 px, und dann muss der Ton 4,5:1 halten — also von Anfang an der tiefe Ton. DIE UEBERSCHRIFT BLEIBT ZWEIZEILIG. Daran haengt die Lage des Bildes rechts (margin-top: -2 x --h1-zeile an .heroA__figure): die erste Zeile passt bei 1024 px und darueber in eine Zeile (gemessen), die zweite ist dieser Block. */ .heroA__h1-schluss { display: block; color: var(--gold-text); } /* DIE AUSZEICHNUNG IM KOPF IST ENTFALLEN — 30.08.2026. Hier stand `.heroA__h1 b { font-weight: 600 }`. Die Auszeichnung lag auf „Eigentum" und „Vermögen" im alten Satz, danach kurz auf der ersten von zwei Zeilen. Der Kunde hat den Kopfbereich am 30.08.2026 endgueltig festgelegt: EINE Zeile, „Deine Kapitalanlage-Immobilie." Bei einer einzigen Zeile gibt es nichts abzusetzen — die Ueberschrift steht im Schnitt 300 aus .display wie jede andere Ueberschrift der Seite. Mit ihr entfallen ist `.heroA__h1zwei`, der Grad der zweiten Zeile. Wer je wieder zwei ungleich grosse Zeilen setzt, muss daran denken, dass das Objektbild rechts mit einem negativen Abstand an der HOEHE der Ueberschrift haengt (siehe .heroA__figure) — zwei ungleiche Zeilen sind nicht `2 x --h1-zeile`. */ /* Die wechselnde Nutzenzeile trägt seit dem 24.08.2026 den Sandton des Knopfes „Vorteile entdecken" statt des Blaus — Kundenwunsch, damit sich die Farbe durch die Seite zieht. Es ist die vertiefte Fassung: der reine Sand misst als Schrift auf Weiß 1.94:1 und wäre selbst in dieser Größe nicht lesbar. Herleitung im Farbblock von base.css. Nur hier gesetzt, nicht an .rotator — die Klasse liegt global. */ .heroA__h1 .rotator { color: var(--sand-schrift); } /* „wirtschaftsstarken Standorten" steht fett — dieselbe Sprache wie „Eigentum" und „Vermögen" in der Überschrift (Kundenwunsch 24.08.2026). Der Fließtext liegt bei 400, die Hervorhebung deshalb bei 600: derselbe Sprung wie oben (300 → 600) wäre hier zu laut, ein kleinerer zu leise. */ .heroA__lead b { font-weight: 600; } .heroA__lead { /* Luft zwischen Ueberschrift und Subline (Kundenwunsch 24.08.2026: „sodass zwischen Subline und Headline mehr Platz ist"). Sie stand zwischenzeitlich auf 0 — damals lag die Ueberschrift in einer eigenen Rasterzeile und der alte Wert wirkte doppelt. Jetzt traegt dieser Abstand die Luecke allein. Er geht nur nach unten und beruehrt das Bild nicht: das haengt in der Nachbarspalte an seinem eigenen negativen Abstand. */ margin-top: clamp(1.5rem, 3.2vh, 2.4rem); max-width: 100%; /* Optischer Ausgleich der kleineren x-Höhe von Jost. Die Herleitung stand in hero-b.css; die Datei ist mit Variante B am 24.08.2026 entfallen. */ /* DEUTLICH KLEINER SEIT 30.08.2026 — Kundenwunsch: „Schreibe das kleiner." Vorher: clamp(1.37rem, 2.08vw, 2.08rem) — gemessen 30 px bei 1440. Jetzt gemessen 22 px bei 1440, also gut ein Viertel weniger. DIE UNTERGRENZE IST NICHT FREI GEWAEHLT. Der Fliesstext der Seite steht in base.css auf 16 px; darunter darf diese Zeile nicht rutschen, sonst ist die Unterzeile des Kopfbereichs kleiner als der Text im Fliess. Der Mindestwert 1.18rem sind 18.9 px — er greift ab rund 1220 px Fensterbreite und haelt bis 390 px hinunter Abstand zum Fliesstext. Die Obergrenze 1.6rem (25.6 px) faengt die ganz breiten Fenster ab; ohne sie stuende die Zeile bei 1920 px wieder bei 30 px. */ font-size: clamp(1.18rem, 1.55vw, 1.6rem); line-height: 1.34; /* SCHMALER — 01.09.2026, Optimierungsbriefing, Abschnitt 03. Zwei Massnahmen, beide gegen den „grossen Textblock": der Schnitt geht von 400 auf 300 (die Ueberschrift darueber ist auf 500 gegangen; der Abstand zwischen beiden ist damit zwei Stufen statt einer), und der Satzspiegel ist auf 30em gedeckelt — bei 22 px sind das 660 px, also die bisherige Spaltenbreite bei 1440; auf breiteren Fenstern lief die Zeile bisher bis 780 px und wurde zur Wand. Der Grad bleibt: die Untergrenze von 18,9 px ist am Fliesstext der Seite geeicht. */ font-weight: 300; max-width: 30em; color: var(--ink-black); text-wrap: pretty; } /* --------------------------------------------------------------------------- DIE DREI MARKEN — 30.08.2026 „Die Bank finanziert · Die Mieter zahlen mit · Steuern können sinken" Der Kunde hat viermal verlangt, dass die Vorteile in den ersten Bildschirm kommen. Massstab ist neocore.capital: deren Kopfbereich traegt vier Vorteile mit fetter Marke. Unserer trug bis heute nur eine Ueberschrift und einen Satz darueber, was WIR tun. NEBENEINANDER, NICHT UNTEREINANDER — und das ist der ganze Punkt. Eine erste Fassung stand als Liste aus vier Punkten mit je einer Erklaerzeile darunter. Der Kunde hat sie verworfen: zu viel Text. Untereinander waere es wieder eine Liste. Als EINE Zeile aus drei kurzen Marken liest es sich als Beschriftung, nicht als Aufzaehlung — man nimmt sie im Vorbeisehen mit, ohne sie zu lesen. ES IST EIN

MIT DREI , KEINE