/* =========================================================================== ESTERA — VERTRAUENSLEISTE (#vertrauen) Steht zwischen „Vorteile von Immobilien" (#warum-immobilien) und „Unsere Leistungen" (#leistungen). Beide Nachbarn stehen auf Weiss: #warum-immobilien traegt `fl-creme-nach-weiss` und endet auf reinem Weiss, .wahl setzt var(--paper). Diese Leiste steht seit dem 31.08.2026 selbst auf --paper — an beiden Nahtstellen gibt es damit gar keinen Farbunterschied, es braucht weder Blende noch Haarlinie. INHALT SEIT DEM 31.08.2026: ein LAUFBAND aus sechs kleinen Kaesten mit je einem Satz von Estera, oben und unten von einer goldenen Haarlinie gefasst. Bauart und Rechnung stehen weiter unten unter „DAS LAUFBAND". Bis dahin stand hier ein einzelnes, mittiges Zitat, das sich beim Scrollen Wort fuer Wort mit Schwarz fuellte. --------------------------------------------------------------------- 1 DER GRUND IST WEISS — ueber die ganze Breite --------------------------------------------------------------------- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ BIS ZUM 31.08.2026 STAND HIER DER NAVYBLAUE KEIL: ein waagerechter Verlauf ueber die ersten 22 Prozent der Breite, senkrecht auf schmalen Fenstern ueber die ersten 28 Prozent der Hoehe. Er ist auf Kundenwunsch entfallen. An seine Stelle trat zunaechst eine goldene Haarlinie ueber dem Satz; seit dem Umbau zum Laufband am selben Tag ist es die goldene Haarlinie UNTER dem Band (.vtr__linie), die nach rechts ausblendet. Die Begruendung steht an der Regel selbst und ausfuehrlich im Markup. DAMIT IST DIE GANZE RECHNUNG DAZU HINFAELLIG, und sie steht hier nur noch als Merkposten, falls je wieder Farbe in diese Flaeche soll: der Satz ist mittig gesetzt und seine linke Kante lag je nach Fensterbreite bei t = 0,300 bis 0,361 der Leistenbreite; der Verlauf musste deshalb spaetestens bei t = 0,22 (quer) beziehungsweise t = 0,28 (hoch) bei reinem Weiss angekommen sein. Wer hier wieder toent, muss diese Grenze einhalten und neu nachmessen. ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ --------------------------------------------------------------------- 2 KONTRASTE — BEIDE ZUSTAENDE, GEGEN DEN ECHTEN GRUND --------------------------------------------------------------------- Der Satz steht seit dem 31.08.2026 nicht mehr direkt auf dem Grund des Abschnitts, sondern auf der eigenen, DECKENDEN Flaeche seiner Karte — und die traegt seit dem Farbtausch desselben Tages den FAQ-Ton: Satz #FFFFFF auf der Karte #262C39 13,98:1 ✓ Schwelle fuer Fliesstext 4,5:1 Zum Vergleich die beiden abgeloesten Zustaende: der Satz auf reinem Weiss (5,18:1 ungefuellt, 21,00:1 gefuellt) und der Satz auf der hellen Karte #FBF9F5 (5,04:1). Die goldene Haarlinie unter dem Band und das blasse Anfuehrungszeichen in der Karte sind nichttextlich — Zeichnung, keine Aussage; die Schwelle von 4,5:1 gilt fuer sie nicht. Die Sonderfarbwerte --vtr-blass, --vtr-voll und --vtr-strich sind mit der Wort-fuer-Wort-Fuellung entfallen. =========================================================================== */ .vtr { position: relative; /* z-index 2, NICHT 1 — und das ist der Kern der ganzen Sache. #leistungen darunter traegt `background: var(--paper)` und selbst `z-index: 1`. Bei gleichem Rang gewinnt das spaetere Element im Markup: der weisse Grund der Leistungen deckte das ueberhaengende Stueck des Fotos vollstaendig zu. Mit 2 liegen die Kinder dieser Section darueber. Geaendert wird das ausschliesslich hier. assets/css/auswahl.css bleibt unangetastet — der Abschnitt gehoert dieser Section nicht. */ z-index: 2; /* Ausdruecklich gesetzt, obwohl es der Vorgabewert ist: das Foto ragt absichtlich aus der Leiste heraus. Wer hier je `hidden` oder `clip` einsetzt, schneidet den Ueberhang ab. */ overflow: visible; /* --vtr-blass, --vtr-voll und --vtr-strich standen hier bis zum 31.08.2026 und gehoerten zur Wort-fuer-Wort-Fuellung des einzelnen Zitats. Sie sind mit ihr entfallen und werden nirgends mehr gebraucht. */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ KEINE BLENDEN MEHR AN OBER- UND UNTERKANTE — 30.08.2026, dritter Anlauf Hier standen bis heute zwei zusaetzliche Hintergrundlagen: oben 26 Punkte von #F7F3F0 (dem Creme von #warum-immobilien) ins Durchsichtige, unten 26 Punkte von #FFFFFF. Beide sind ERSATZLOS entfernt. Der Grund ist die Entscheidung vom 30.08.2026, die im Kopf von base.css vollstaendig steht: es gibt keine Blende ZWISCHEN zwei Abschnitten. Jeder Abschnitt traegt seinen Verlauf ueber die eigene volle Hoehe und endet auf der Farbe seiner Nachbarin. Genau das tut jetzt #warum-immobilien: es traegt `fl-creme-nach-weiss` und endet auf reinem WEISS. Diese Leiste steht also ohnehin auf Weiss, oben wie unten — es gibt an beiden Kanten gar keinen Farbunterschied mehr, den eine Blende ueberbruecken muesste. Eine Blende haette hier nur noch einen Cremestreifen auf Weiss gemalt. Die 26 Punkte waren ausserdem von Anfang an zu kurz: gemessen 9,42 Einheiten je Bildpunkt gegen die Regel von 0,03. ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ DER NAVYBLAUE KEIL IST ERSATZLOS ENTFALLEN — 31.08.2026 Hier stand bis heute ein waagerechter Verlauf, der die ersten 22 Prozent der Breite von --navy-800 ins Weisse laufen liess (und auf schmalen Fenstern dasselbe senkrecht ueber die ersten 28 Prozent der Hoehe). Kundenwortlaut vom 31.08.2026: „koennen wir dafuer irgendwas anderes verwenden?" ERSATZ IST EINE GOLDENE HAARLINIE ueber dem Satz (.vtr__strich). Die ausfuehrliche Begruendung — vier Punkte — steht im Markup unmittelbar an diesem Element in variante-a.html. WAS DAMIT AN RECHNUNG WEGFAELLT: die Breite des Keils war an die Lage des Zitats gebunden (Satz beginnt bei t = 0,315 der Breite, Verlauf weiss ab t = 0,22), und die Steilheit des Verlaufs musste gegen die Regel von 0,03 Einheiten je Bildpunkt gehalten werden. Beides ist gegenstandslos: in diesem Abschnitt liegt jetzt ueberhaupt kein Verlauf mehr, der Satz steht auf ganzer Breite auf reinem Weiss. Die Kontrastwerte des Satzes gegen den Grund (5,18:1 ungefuellt, 21,00:1 gefuellt) gelten damit nicht mehr nur an der hellsten, sondern an JEDER Stelle. Beide Nachbarabschnitte sind weiss — #warum-immobilien endet auf Weiss, #leistungen traegt --paper. Es entsteht an keiner der beiden Kanten ein Farbunterschied und damit auch keine Naht. */ background: var(--paper); /* HOEHE. Der laengere Satz darf sie wachsen lassen, aber nicht zurueck auf den alten Stand — Richtwert hoechstens 180 px bei 1920. Der Aussenabstand rechnet in vh, weil die Vorgabe eine Bauhoehe ist und keine Breite; Untergrenze fuer flache Laptops, Deckel gegen hohe Bildschirme. NACHGEMESSEN am gerenderten Abschnitt, Stand 31.08.2026 — also mit dem positiv formulierten Satz und mit der goldenen Haarlinie darueber: 1920 x 1080 176 px drei Zeilen 1440 x 900 150 px drei Zeilen 1280 x 800 139 px drei Zeilen 390 x 844 174 px vier Zeilen Zum Vergleich die drei Stufen davor (1920 / 1280 / 390): kurzer Satz mit goldener Kleinzeile 153 / 121 / 177 px langer Satz, Kleinzeile weg, Keil da 156 / 122 / 190 px positiver Satz, Haarlinie statt Keil 176 / 139 / 174 px Die Haarlinie kostet in der Waagerechten rund 19 px; auf dem Telefon gewinnt der Abschnitt 15 px, weil der grosse obere Aussenabstand mit dem senkrechten Keil weggefallen ist. Der Richtwert von hoechstens 180 px bei 1920 ist gehalten. */ /* ALS TOKEN SEIT 30.08.2026, vorher stand der Wert direkt im padding. Der goldene Strich haengt jetzt daran: er sitzt an der OBERKANTE DES FOTOS, und das Foto beginnt am oberen Rand dieser Section — also genau eine Polsterhoehe ueber dem Inhaltskasten. Wer das Polster aendert, verschiebt sonst den Strich gegen das Foto. */ --vtr-pad-y: clamp(1.5rem, 2.5vh, 1.8rem); /* Die seitliche Polsterung von .vtr__inner, ebenfalls als Token: der Strich liegt absolut und muesste sie sonst als Zahl wiederholen. */ --vtr-pad-x: clamp(1.25rem, 4vw, 4.2rem); padding: var(--vtr-pad-y) 0; /* Bewegung des Einlaufs */ --vtr-ease: cubic-bezier(0.22, 1, 0.36, 1); --vtr-dauer: 500ms; /* 820 -> 500, Optimierungsbriefing 01.09.2026, P0 */ --vtr-weg: 12px; } .vtr__inner { /* Ueber dem Foto. Beide liegen in derselben Section; ohne eigenen Rang entschiede die Reihenfolge im Markup, und das Foto stuende dann zwar hinter dem Zitat, aber nur zufaellig. */ position: relative; z-index: 1; max-width: 1520px; margin: 0 auto; padding: 0 clamp(1.25rem, 4vw, 4.2rem); } /* --------------------------------------------------------------------------- DAS FOTO RECHTS Es beginnt an der Oberkante der Leiste und haengt nach unten in #leistungen hinein. Buendig am rechten Fensterrand, nicht am 1520er Mass der Seite — der Anschnitt ist gewollt und nimmt den Navy-Anschnitt auf der linken Seite auf: links Farbe, rechts Bild, dazwischen der Satz. MASSE UND UEBERHANG Breite und Seitenverhaeltnis bestimmen die Hoehe, nicht umgekehrt. Der Ueberhang ist damit die Differenz zur Bauhoehe der Leiste. NACHGEMESSEN am gerenderten Abschnitt: 1920 x 1080 310 x 413 px Leiste 156 px Ueberhang 257 px = 62 % 1440 x 900 245 x 326 px Leiste 131 px Ueberhang 196 px = 60 % 1280 x 800 218 x 290 px Leiste 122 px Ueberhang 169 px = 58 % 1024 x 768 200 x 267 px Leiste 120 px Ueberhang 147 px = 55 % Der Ueberstand liegt damit im vorgegebenen Fenster von 40 bis 60 Prozent; bei 1920 px sind es zwei Punkte mehr, weil ein kuerzeres Foto bei dieser Breite abgeschnitten aussieht statt ueberhaengend. Die Bauhoehe der Leiste selbst ist durch das Foto UNVERAENDERT — es liegt absolut und traegt nichts zum Fluss bei. Nachgemessen vor und nach dem Einbau: 156 / 131 / 122 / 120 px. WARUM DIE BREITE BEGRENZT IST — DAS IST KEINE KOSMETIK Das Foto liegt wegen `z-index: 2` UEBER dem Inhalt der Leistungen, nicht dahinter. Deshalb darf es die Leistungsgrafik nicht beruehren. Der Deckel von 310 px haelt es im leeren rechten Rand des Abschnitts. NACHGEMESSEN am gerenderten Bild, senkrecht von der Oberkante der Leistungen bis zur Unterkante des Fotos: in diesem Streifen ist der Grund unter dem Foto auf ganzer Flaeche reines Weiss — kein einziger Bildpunkt unter L = 0.98. Es liegt dort also weder Schrift noch Linie, deren Kontrast das Foto mindern koennte. Abstand von der linken Bildkante zur naechsten Zeichnung: 1920 px 470 px 1440 px 326 px 1280 px 289 px 1024 px 202 px WAS PASSIEREN WUERDE, WENN DOCH ETWAS DARUNTER LAEGE Zur Kontrolle ist das Foto versuchsweise ueber die Leistungsgrafik geschoben und dort gemessen worden. Die duennen Navy-Konturen fallen dann von 14.63 / 11.90 / 8.37 / 3.43:1 auf 4.31 / 3.92 / 3.35 / 2.16:1 (1920 / 1440 / 1280 / 1024). Auf schmalen Fenstern reisst das die Schwelle deutlich. Die Messung ist am 23.08.2026 mit dem ausgetauschten Motiv wiederholt worden — ein anderes Bild hat andere dunkle Stellen. Die dunkelste Stelle des eingebauten Fotos misst L = 0.366 (vorher 0.371); die Werte verschieben sich dadurch um hoechstens 0.14 Punkte, das Ergebnis bleibt dasselbe. Genau deshalb ist die Breitenbegrenzung tragend und nicht schmueckend, und genau deshalb faellt das Foto unter 1024 px ganz weg: dort waere kein leerer Rand mehr, auf dem es liegen koennte. Wer den Deckel anhebt oder die Grafik in den Leistungen verbreitert, muss diese Messung wiederholen. AUSBLASSUNG Die Werte sind aus assets/css/prinzip.css uebernommen, `.vt__rand--links img` im Abschnitt „So entsteht Vermoegensaufbau" — genau das Bild, auf das der Kunde verwiesen hat. Unveraendert: grayscale, brightness, contrast, saturate und die Deckkraft. Sie sind auch beim Bildtausch am 22.08.2026 unveraendert geblieben; gewechselt hat nur die Datei. Gespiegelt ist allein die Richtung der waagerechten Maske: dort steht das Bild links und laeuft nach rechts aus (90deg), hier steht es rechts und laeuft nach links aus (270deg). Die senkrechte Maske ist unveraendert 180deg und traegt den Ueberhang: das Foto endet nicht mit einer Kante, sondern loest sich auf. --------------------------------------------------------------------------- */ .vtr__bild { position: absolute; top: 0; right: 0; width: clamp(200px, 17vw, 310px); aspect-ratio: 3 / 4; /* Feste Groesse und festes Verhaeltnis: der Platz steht vor dem Laden des Bildes fest, es gibt keinen Nachsprung. */ z-index: 0; /* Das Foto liegt ueber dem oberen rechten Rand von #leistungen. Ohne diese Zeile finge es dort Klicks ab. */ pointer-events: none; } /* liegt zwischen .vtr__bild und dem und ist ohne eigene Angabe ein Inline-Kasten — das darin bekaeme dann nicht die volle Hoehe. Deshalb wird es mitgestreckt. */ .vtr__bild picture { display: block; width: 100%; height: 100%; } .vtr__bild img { width: 100%; height: 100%; object-fit: cover; /* Der Kasten ist 3:4, die Quelle 2:3 — bei `cover` wird also nach der BREITE skaliert und oben wie unten beschnitten. Waagerecht gibt es nichts zu verschieben; allein der senkrechte Wert zaehlt. 32 Prozent behaelt die Fassade mit den Fensterreihen und schneidet Strasse und Baeume unten weg — die haetten im ausgeblassten Zustand nur unruhige Flecken ergeben. */ object-position: 50% 32%; /* AUSBLASSUNG UND MASKE UNVERAENDERT AUS DER VORHERIGEN FASSUNG. Beim Bildtausch am 22.08.2026 ist ausschliesslich die Datei gewechselt worden. Die Werte stammen weiterhin Zeichen fuer Zeichen aus assets/css/prinzip.css, `.vt__rand--links img` — dem Bild, auf das der Kunde verwiesen hat. Gespiegelt ist nach wie vor nur die Richtung der waagerechten Maske (270deg statt 90deg). */ filter: grayscale(0.42) brightness(1.46) contrast(0.56) saturate(0.28); opacity: 0.46; -webkit-mask-image: linear-gradient(270deg, #000 0%, #000 42%, transparent 100%), linear-gradient(180deg, #000 0%, #000 58%, transparent 100%); -webkit-mask-composite: source-in; mask-image: linear-gradient(270deg, #000 0%, #000 42%, transparent 100%), linear-gradient(180deg, #000 0%, #000 58%, transparent 100%); mask-composite: intersect; } /* =========================================================================== DAS LAUFBAND — 31.08.2026 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ WAS HIER ERSATZLOS ENTFAELLT · `.vtr__zitat` als EIN mittiger Satzblock mit `max-width: 30em` · `.vtr__satz` mit `text-wrap: pretty` · die ganze Wort-fuer-Wort-Fuellung: `.vtr__wort`, `[data-vtr-fuellen] .vtr__wort` und `… [data-voll]`, dazu die Sonderwerte --vtr-blass, --vtr-voll und --vtr-strich · die goldene Haarlinie ueber dem Satz (.vtr__strich) von heute frueh Die Klasse `.vtr__zitat` gibt es weiter, sie meint jetzt aber den SATZ IN EINER KARTE und nicht mehr den Block. Die Fuellung faellt weg, weil sie an EINEM stehenden Satz haftete: sie las die Scrollposition und schlug Wort fuer Wort um. An sechs Saetzen, die waagrecht durchlaufen, gibt es keine Scrollposition, an der man das festmachen koennte. assets/js/vertrauen.js steigt von allein aus — es sucht `[data-vtr-wort]`, findet nichts mehr und laesst nur noch den einmaligen Einlauf laufen. Es bleibt kein toter Code stehen. ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ --------------------------------------------------------------------- DIE HOEHE — die enge Vorgabe --------------------------------------------------------------------- Der Kunde: „Die Hoehe des Zitats ist gut … Die Section soll nicht hoeher werden." Der Abschnitt hat also ein festes Budget, und alles darin ist daraufhin gerechnet. Bei 1920 x 1080 war er 176 px hoch: Aussenabstand oben und unten 2 x 27,0 = 54,0 Strich oben und unten 2 x 1,0 = 2,0 Abstand Strich zu Band 2 x 14,0 = 28,0 bleibt fuer das Band 92,0 Die Karte ist deshalb auf 88 px gedeckelt und ihr Satz auf ZWEI Zeilen ausgelegt (16,3 px Grad, Zeilenabstand 1,42 -> 46,3 px) plus 2 x 13 px Innenabstand plus 2 px Rand = 74,3 px. Die 88 px sind der Anschlag, den auch das laengste der sechs Zitate nicht sprengt. WER EIN ZITAT VERLAENGERT, muss hier nachmessen. Das laengste ist heute „Ausgewählte Immobilien, passende Finanzierung und langfristige Betreuung aus einer Hand." mit 88 Zeichen; es steht bei 400 px Kartenbreite gerade zweizeilig. --------------------------------------------------------------------- DER UMLAUF --------------------------------------------------------------------- Zwei wortgleiche Saetze zu je sechs Karten liegen hintereinander in einer Spur. Die Spur wandert um GENAU EINEN SATZ nach links, also um 50 Prozent ihrer Breite, und springt dann zurueck. Weil an der Sprungstelle dieselbe Karte steht wie vorher, sieht man den Sprung nicht. `margin-right` an der Karte und NICHT `gap` an der Spur: `gap` wirkt auch zwischen dem letzten Element des ersten und dem ersten des zweiten Satzes — dort aber nicht noch einmal am Ende. Die zweite Haelfte waere dadurch um einen Abstand kuerzer als die erste, und der Ruecksprung um 50 Prozent traefe nicht mehr. DIE DAUER ist aus der Strecke gerechnet, nicht geraten: ein Satz misst 6 x (400 + 22) = 2532 px. Bei rund 52 px je Sekunde sind das 48,7 s. Das ist bewusst langsam — der Abschnitt ist eine Haltung, kein Ticker; man soll einen Satz zu Ende lesen koennen, waehrend er durchlaeuft. BEWEGT WIRD NUR `transform`. Reines CSS, also laeuft es auch ohne Javascript. --------------------------------------------------------------------- DIE KANTENMASKE --------------------------------------------------------------------- Wie am Band der Karriereseite: der Behaelter steht still und traegt `overflow: hidden` und eine Maske, die links und rechts ins Durchsichtige laeuft. Die Karten treten damit aus dem Weiss heraus und laufen wieder hinein, statt an einer harten Kante abgeschnitten zu werden. Der Behaelter traegt selbst keine Flaeche; was durch die ausgeblendeten Kanten scheint, ist das --paper des Abschnitts. DIE MASKE LOEST AUCH DAS FOTO. Rechts im Abschnitt haengt das blass ausgeblendete Gruenderzeithaus (.vtr__bild). Der Behaelter reicht bis an dessen linke Kante heran: bei 1920 px steht das Foto von 1610 bis 1920, der Inhaltskasten endet bei 1720. In diesen letzten 110 px liegt die Maske bereits unter 0,4 — was dort noch von einer Karte zu sehen ist, ist ein Hauch. Ein Kontrastproblem entsteht ohnehin nicht: jede Karte hat eine DECKENDE eigene Flaeche, der Satz steht also nie auf dem Foto. BEI reduce IST DIE MASKE ABGESCHALTET — siehe unten. Dort steht das Band still und bricht in eine mittige Gruppe um; eine Kantenmaske wuerde die aeusseren Karten jeder Zeile ausbleichen, obwohl sie gelesen werden sollen. =========================================================================== */ /* --- Der Strich unter dem Band ---------------------------------------------- ER IST DAS ZEICHEN. „Man muss schon irgendwie kennzeichnen, dass es eine Trust-Section ist … machst da drueber einen Strich darunter." ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ES WAREN ZWEI STRICHE, einer ueber und einer unter dem Band. Der obere ist am 31.08.2026 auf Kundenwunsch ersatzlos entfallen. Uebrig bleibt der untere; er schliesst den Abschnitt ab, statt ihn einzurahmen. ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ER LAEUFT NICHT DURCH, SONDERN BLENDET NACH RECHTS AUS. Kundenwortlaut: „Diese Linie darf nicht in das Bild rechts hineinlaufen. Sie muss vorher ausblenden." Gemeint ist das ueberhaengende Fassadenfoto (.vtr__bild), das rechts aus der Leiste in die Leistungen hineinragt. WO DAS FOTO ANFAENGT — nachgerechnet als Anteil der Inhaltsbreite. Der Inhaltskasten misst hoechstens 1520 px und traegt links wie rechts clamp(1.25rem, 4vw, 4.2rem) Innenabstand; das Foto ist clamp(200px, 17vw, 310px) breit und sitzt am rechten FENSTERrand: Fenster Inhalt von .. bis Breite Foto ab Anteil 1920 200,0 .. 1720,0 1520,0 1610,0 92,8 % 1440 57,6 .. 1382,4 1324,8 1195,0 85,9 % 1280 51,2 .. 1228,8 1177,6 1062,4 85,9 % 1024 41,0 .. 983,0 942,0 824,0 83,1 % Der engste Fall ist 83,1 Prozent. DER STRICH IST BEI 78 PROZENT VOLLSTAENDIG WEG und beginnt bei 52 Prozent auszublenden — fuenf Prozentpunkte Reserve zum engsten Fall. Unter 1024 px gibt es kein Foto mehr (.vtr__bild ist dort ausgeblendet); dort darf der Strich weiter laufen, siehe die zweite Regel. ES IST EIN VERLAUF AUF DER LINIE SELBST, kein hartes Ende — genau so verlangt. Der Verlauf laeuft in der Deckkraft, nicht in der Farbe: die Steilheitsregel von 0,03 Farbeinheiten je Bildpunkt ist damit nicht beruehrt. Ueber 26 Prozent von rund 1300 px sind es ausserdem 338 px Blendstrecke, also eine sehr flache Rampe. FARBE: --gold #A8874F, gemessen 3,36:1 auf Weiss. Nichttextlich, also greift die Schwelle von 4,5:1 nicht; als Zeichnung ist die Linie klar sichtbar. Es ist dieselbe Linie wie .abl__hausstrich unter dem Ablauf und .ref__strich im Kopf der Kundenstimmen — der Abschnitt bekommt kein eigenes Vokabular. */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ DER STRICH IST GEWANDERT — 30.08.2026, Kundenwunsch. Er lief bisher UNTER dem Zitatband. Das Band ist am 30.08.2026 auf Kundenwunsch ersatzlos entfallen („Pack einfach nur die Zitate raus."), und damit gab es nichts mehr, worunter er haette laufen koennen. NEUE LAGE: GENAU AUF DER OBERKANTE DES FOTOS. Das Fassadenfoto (.vtr__bild) sitzt `position: absolute; top: 0` in dieser Section — seine Oberkante IST also die Oberkante von .vtr. Der Strich liegt jetzt ebenfalls dort und schliesst damit den Abschnitt darueber ab, statt einen leeren Kasten zu unterstreichen. WARUM ER ABSOLUT LIEGT UND NICHT IM FLUSS. Er steht im Markup weiterhin in .vtr__inner — der Kasten gibt ihm seine Breite, und dessen Polsterung ist zugleich die Kante, an der Text auf dieser Seite ansetzt. .vtr__inner beginnt aber erst eine Polsterhoehe (--vtr-pad-y) unter dem Rand der Section. Genau diese Polsterhoehe wird hier wieder abgezogen; der Strich landet dadurch auf dem Bildpunkt genau auf der Fotokante. Ein Element im Fluss koennte das nicht — es kaeme immer erst nach dem Polster. left/right sind NICHT 0: ein absolut liegendes Kind bezieht sich auf den POLSTERkasten seines Elternteils, nicht auf dessen Inhaltskasten. Ohne diese beiden Werte liefe der Strich um --vtr-pad-x zu weit nach aussen, auf jeder Seite — und rechts damit weiter auf das Foto zu, als die Ausblendung unten vorrechnet. ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ .vtr__linie { display: block; position: absolute; top: calc(-1 * var(--vtr-pad-y)); left: var(--vtr-pad-x); right: var(--vtr-pad-x); height: 1px; background: linear-gradient(90deg, var(--gold) 0%, var(--gold) 52%, rgba(168, 135, 79, 0) 78%); opacity: 0.75; } /* Ohne Foto darf der Strich weiter laufen. Er endet trotzdem weich — ein hart abgeschnittener Strich mitten in der Flaeche saehe aus wie ein Fehler, und die Blende ist hier ohnehin die Handschrift. */ @media (max-width: 1023px) { .vtr__linie { background: linear-gradient(90deg, var(--gold) 0%, var(--gold) 72%, rgba(168, 135, 79, 0) 96%); } } /* --- Der Behaelter ---------------------------------------------------------- */ .vtr__band { --vtr-schleier: 9%; --vtr-maske: linear-gradient(90deg, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0.10) calc(var(--vtr-schleier) * 0.25), rgba(0, 0, 0, 0.50) calc(var(--vtr-schleier) * 0.5), rgba(0, 0, 0, 0.90) calc(var(--vtr-schleier) * 0.75), rgba(0, 0, 0, 1) var(--vtr-schleier), rgba(0, 0, 0, 1) calc(100% - var(--vtr-schleier)), rgba(0, 0, 0, 0.90) calc(100% - var(--vtr-schleier) * 0.75), rgba(0, 0, 0, 0.50) calc(100% - var(--vtr-schleier) * 0.5), rgba(0, 0, 0, 0.10) calc(100% - var(--vtr-schleier) * 0.25), rgba(0, 0, 0, 0) 100%); margin-block: clamp(0.7rem, 1.3vh, 0.875rem); overflow: hidden; -webkit-mask-image: var(--vtr-maske); mask-image: var(--vtr-maske); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; } /* Ab 768 px ist der Kasten breit genug, dass ein kraeftiger Schleier je Seite immer noch mehr als eine ganze Karte unangetastet stehen laesst. Gerechnet gegen die feste Kartenbreite von 400 px, Inhaltskasten hoechstens 1520 px: bei 1440 misst der Schleier 0,24 x 1352 = 324 px je Seite, in der Mitte bleiben 704 px — eineinhalb Karten. */ @media (min-width: 768px) { .vtr__band { --vtr-schleier: 24%; } } @keyframes vtr-band { from { transform: translateX(0); } to { transform: translateX(-50%); } } .vtr__spur { display: flex; width: max-content; margin: 0; padding: 0; list-style: none; animation: vtr-band 48.7s linear infinite; } /* --- Die Karte -------------------------------------------------------------- */ /* KLEIN, wie verlangt: „Die Zitate packst du auch noch in einen kleinen Kasten jeweils." ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ DIE KARTE WAR HELL (#FBF9F5 mit --ink-mute als Schrift). Der Kunde hat sie am 31.08.2026 auf den FAQ-Ton gestellt, mit weisser Schrift — es ist derselbe Ton wie in den zwei Vergleichskaesten von „Warum Immobilien" und in den Ablaufkarten. Der Kunde will diese Wiederholung ausdruecklich; sie bindet die drei Stellen zusammen. ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ES IST EINE FLAECHE UND KEIN VERLAUF, aus demselben Grund wie bei den Vergleichskaesten: der FAQ-Verlauf #1E222D -> #2E3643 misst 22 Einheiten im Blaukanal; ueber die 400 px einer Karte sind das 0,055 Einheiten je Bildpunkt und damit fast das Doppelte der erlaubten 0,03. Gesetzt ist der Mittelwert des Paares als Flaeche: #262C39. DIE FLAECHE IST DECKEND, und das ist hier tragend: die Karte kann am rechten Ende ueber dem ausgeblassten Foto liegen. Der Satz steht damit nie auf dem Bild, sondern immer auf seiner eigenen Flaeche. KONTRAST des Satzes gegen genau diese Flaeche: #FFFFFF auf #262C39 13,98:1 ✓ (Schwelle 4,5) Zum Vergleich der abgeloeste Zustand: --ink-mute auf #FBF9F5, 5,04:1. DIE KANTE ist die Goldhaarlinie des Projekts in derselben Bauart wie an den Rezensionskarten der Startseite (referenzen.css, .rez__karte): 1 px, --gold auf 0,42. Auf dem dunklen Grund tritt sie deutlicher hervor als auf dem hellen — das ist erwuenscht, sie ist die Fassung. `margin-right` statt `gap` — die Begruendung steht oben beim Umlauf. */ .vtr__karte { flex: 0 0 400px; width: 400px; margin-right: 22px; position: relative; isolation: isolate; /* haelt das z-index:-1 des Zeichens im Kasten */ display: flex; flex-direction: column; justify-content: center; min-height: 74px; max-height: 88px; padding: 13px 20px; border: 1px solid rgba(168, 135, 79, 0.42); border-radius: 12px; background: #262C39; /* Mittelwert des FAQ-Paares, siehe oben */ } /* DIE ZWEI ANFUEHRUNGSZEICHEN. „Dann packst du noch zwei Anfuehrungszeichen hin, so wie bei ‚Entdecke, was unsere Mitarbeiter sagen‘." Dort ist es ein doppeltes Anfuehrungszeichen als sehr blasse Zeichnung oben rechts in der Karte, hinter dem Satz. Dieselbe Zeichnung und dieselbe Deckkraft, nur kleiner — die Karte hier ist flacher. `z-index: -1` legt es HINTER den Satz, `isolation: isolate` an der Karte haelt es trotzdem in ihr drin. Es kostet keine Bauhoehe. NICHTTEXTLICH UND OHNE AUSSAGE: es ist `aria-hidden`, und der Satz traegt seine echten Anfuehrungszeichen im Text selbst. */ .vtr__anf { content: ''; position: absolute; z-index: -1; top: 8px; right: 12px; width: 62px; height: 40px; /* 62 x 60/94, das Verhaeltnis der Zeichnung */ /* 0,16 statt 0,10 seit dem 31.08.2026: die Karte ist jetzt dunkel, und Gold auf 10 Prozent ueber #262C39 waere praktisch nicht zu sehen. Bei 0,16 steht es als ruhiger warmer Schatten in der Ecke und bleibt trotzdem weit hinter dem Satz zurueck. */ opacity: 0.16; background-repeat: no-repeat; background-size: 100% 100%; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 94 60' fill='%23A8874F'%3E%3Cpath d='M38 6C20 10 6 22 6 38a17 17 0 1 0 22-16C30 16 34 11 40 8Z'/%3E%3Cpath d='M90 6C72 10 58 22 58 38a17 17 0 1 0 22-16c2-6 6-11 12-14Z'/%3E%3C/svg%3E"); } /* Der Satz. Grad und Zeilenabstand sind aus dem Hoehenbudget gerechnet, siehe oben; zwei Zeilen muessen in 88 px Karte passen. Die Schrift ist die des abgeloesten Einzelzitats — Cormorant, nicht die Grotesk. Es bleibt derselbe Ton, nur in kleineren Portionen. */ .vtr__zitat { margin: 0; font-family: var(--font-display); font-size: 1.02rem; /* 16,3 px */ font-weight: 400; line-height: 1.42; letter-spacing: -0.004em; color: #FFFFFF; /* 13,98:1 auf #262C39 */ text-wrap: pretty; } /* --- Unter 1024 px kein Foto ------------------------------------------------ */ /* Dort ist neben dem Zitat kein Platz, und weiter unten laege das Foto nicht mehr am leeren rechten Rand der Leistungen, sondern mitten auf deren Schaubild. Ein ausgeblasstes Haus ueber der Ablaufgrafik waere auf einem schmalen Fenster nur noch Stoerung. */ @media (max-width: 1023px) { .vtr__bild { display: none; } } /* --- Schmale Fenster ------------------------------------------------------- */ /* Der Verlauf dreht auf die Senkrechte: quer gelegt liegt er auf einer Handbreite so steil, dass er wie ein Darstellungsfehler wirkt. Von oben nach unten getoent ins Weisse bleibt es dasselbe Band. Damit wandert die dunkle Zone aber ueber den Satz. Der obere Aussenabstand ist deshalb so bemessen, dass die erste Zeile erst unterhalb der Toenung beginnt — nachgemessen bei 390 x 844 liegt ihre Oberkante bei t = 0.361, der Verlauf ist ab t = 0.28 weiss. */ @media (max-width: 620px) { .vtr { /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ DER SENKRECHTE KEIL IST AM 31.08.2026 MIT DEM WAAGERECHTEN ENTFALLEN — siehe die ausfuehrliche Begruendung weiter oben. Hier lief der Verlauf von oben nach unten ueber die ersten 28 Prozent der Hoehe ins Weisse. DER GROSSE OBERE AUSSENABSTAND FAELLT DAMIT MIT WEG. Er war kein Gestaltungsmass, sondern eine Notwendigkeit: die erste Zeile musste UNTERHALB der Toenung beginnen (Oberkante bei t = 0,361, Verlauf weiss ab t = 0,28). Ohne Toenung gibt es nichts mehr zu unterlaufen, und die Leiste steht wieder in ihrem eigenen Mass. ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ padding: clamp(1.9rem, 4.5vh, 2.6rem) 0 clamp(1.4rem, 3vh, 1.9rem); } .vtr__inner { padding: 0 1.15rem; } /* Auf dem Telefon ist eine 400 px breite Karte breiter als das Fenster. Sie geht deshalb auf 78 Prozent der Fensterbreite zurueck, hoechstens 300 px — dann steht immer genau eine Karte im Blick und die naechste laeuft sichtbar heran. Der Schriftgrad bleibt bei 16,3 px: die Lesbarkeitsgrenze auf dem Telefon wird nicht fuer die Bauhoehe geopfert. Weil die Karte schmaler ist, brauchen die laengeren Zitate dort drei Zeilen; der Deckel der Kartenhoehe geht deshalb auf 106 px hoch. Der Abschnitt misst damit 174 px — genau so viel wie vor dem Umbau. */ .vtr__karte { flex-basis: min(78vw, 300px); width: min(78vw, 300px); margin-right: 14px; max-height: 106px; padding: 11px 15px; } .vtr__anf { width: 48px; height: 31px; top: 6px; right: 9px; } } /* --- Ohne Bewegung --------------------------------------------------------- */ /* ZWEI DINGE STEHEN HIER STILL, und beide vollstaendig, nicht gebremst: 1 DER EINLAUF steht sofort im Endzustand. 2 DAS BAND LAEUFT NICHT. Und es reicht NICHT, nur die Animation anzuhalten — dann stuenden von sechs Zitaten je nach Fensterbreite ein bis zwei im Bild und die uebrigen waeren ueberhaupt nicht erreichbar, weil es keine Bedienung zum Weiterschieben gibt. Die Spur bricht deshalb um und steht als mittige Gruppe da: alle sechs Zitate sind dann sichtbar und lesbar. Die sechs Kopien, die es nur fuer den nahtlosen Umlauf gibt, fallen weg. DER ABSCHNITT WIRD DABEI HOEHER, und das ist richtig so: die Vorgabe „die Section soll nicht hoeher werden" gilt der laufenden Fassung. Ein abgeschnittenes Zitat waere hier der schlechtere Handel. DIE KANTENMASKE FAELLT MIT WEG. Sie gehoert zur laufenden Fassung, wo sie ausblendet, was gerade in den Rand hineinlaeuft. Bei einer stehenden Gruppe wuerde sie die aeusseren Karten jeder Zeile ausbleichen — und die sollen gelesen werden. ALLE DIESE REGELN STEHEN IM CSS und wirken deshalb AUCH OHNE JAVASCRIPT. */ @media (prefers-reduced-motion: reduce) { [data-vtr-bereit] .vtr__auf, [data-vtr-bereit][data-vtr-sicht] .vtr__auf { opacity: 1; transform: none; transition: none; } .vtr__band { overflow: visible; -webkit-mask-image: none; mask-image: none; } .vtr__spur { animation: none; transform: none; width: auto; flex-wrap: wrap; justify-content: center; gap: 12px; } .vtr__karte { flex: 0 1 400px; margin-right: 0; max-height: none; } .vtr__karte--kopie { display: none; } }