/* =========================================================================== WARUM IMMOBILIEN? (#warum-immobilien) Neu geschrieben am 25.08.2026. Gehoert zu
und assets/js/warum.js. Vorgabe ist die Bildvorlage Bilder/referenz-warum-immobilien.jpeg (1536 x 1024). Sie wird als 1536 Bildpunkte breite Ansicht gelesen. Jedes Mass unten steht mit dem an der Vorlage gemessenen Wert daneben, damit spaetere Aenderungen nachvollziehbar bleiben. AUFBAU DER DATEI 1 Grundmasse und Farben 2 Kopf (Kleinzeile, Ueberschrift, Unterzeile) 3 Vergleichsband 4 Zwischenkopf 5 Das Feld: Adern, Haus, Sprechblase, Schild 6 Die vier Karten 7 Fuss: Reiter und Knopf 8 Schmale Fenster 9 Bewegung aus FARBEN — am Bildpunkt gemessen, nicht geschaetzt Grund der Section #F7F3F0 (Vorlage) Navy Schrift #102949 auf #F7F3F0 ......... 13.3:1 Grau #5F6E85 auf #F7F3F0 .................. 4.9:1 Grau #5F6E85 auf Karte #FBFAF8 ............ 5.0:1 Weiss auf Navy #0B2C57 (Schild, Knopf) ..... 13.0:1 Gold #86693A auf #F7F3F0 .................. 4.7:1 ABWEICHUNG VON DER VORLAGE — bewusst, mit Grund Die Kleinzeile „WARUM IMMOBILIEN?" und die Ordnungszahlen 01 bis 04 stehen in der Vorlage im hellen Gold #A8874F. Gemessen sind das 3.2:1; verlangt sind 4.5:1. Beide stehen deshalb im dunkleren #86693A. Farbton und Saettigung sind unveraendert, nur die Helligkeit ist gesenkt. SCHAERFE Alle Grafiken sind Inline-SVG im Markup. Hier in der CSS kommt kein Rasterbild vor, und es gibt keinen `filter` — der wuerde die SVG beim Zeichnen rastern. Weiche Schatten liegen als `box-shadow` an den HTML-Kaesten, nicht in den Grafiken. =========================================================================== */ /* --------------------------------------------------------------------------- 1 GRUNDMASSE UND FARBEN --------------------------------------------------------------------------- */ .wi { --wi-grund: #F7F3F0; /* Grund der Section, Vorlage gemessen */ --wi-karte: #FBFAF8; /* Kartenflaeche, Vorlage gemessen */ --wi-navy: #102949; /* Ueberschriften und Kartentitel */ --wi-navy-tief:#08294D; /* Schild und Knopf — Wert des Kunden, 14.6:1 */ --wi-grau: #5F6E85; /* Fliesstext */ --wi-gold: #86693A; /* Kleinzeile und Ordnungszahlen (4.7:1) */ --wi-punkt: #C0985C; /* Anschlusspunkte der Adern — Wert des Kunden */ --wi-linie: #0F2E52; /* die Adern */ --wi-haar: #DCD5CC; /* Haarlinien: Trenner, Reiterlinie */ /* Bedienschrift der Vorlage ist eine geometrische Grotesk. Im Projekt liegt Jost lokal vor — dieselbe Bauart, gleiche Anmutung. */ --wi-sans: 'Jost', 'Avenir Next', 'Helvetica Neue', Arial, sans-serif; /* NUR background-color, KEINE Kurzschreibweise. Der Abschnitt traegt seit dem 30.08.2026 die Klasse `fl-creme-nach-weiss` aus base.css: er beginnt auf dem Creme seiner Nachbarin darueber (#F7F3F0, .ref) und endet auf dem Weiss seiner Nachbarin darunter (.vtr). Die Klasse setzt `background-image`; eine Kurzschreibweise hier wuerde sie ueberschreiben, weil warum.css nach base.css geladen wird. Der Farbwert bleibt als Rueckfall stehen und ist identisch mit dem Anfang des Verlaufs, --fl-creme. */ background-color: var(--wi-grund); scroll-margin-top: calc(var(--header-h) + 1.5rem); padding: clamp(3rem, 6.5vh, 5rem) 0 clamp(3rem, 6.5vh, 5rem); overflow: clip; /* nichts darf die Seite verbreitern */ } /* Inhaltsbreite. Vorlage: das Vergleichsband liegt bei 1536 Breite von x=104 bis x=1432, also 1328 breit. */ .wi__inner { width: min(1328px, 100% - 2 * clamp(20px, 4vw, 64px)); margin-inline: auto; } /* Das Zeichenblatt: es traegt die fuenf und wird nie gezeigt. */ .wi__sprite { position: absolute; width: 0; height: 0; overflow: hidden; } .wi__nur-vorlesen { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* =========================================================================== 2 DER GRAUE KASTEN — UMBAU 31.08.2026 Der Kunde hat den Aufbau selbst gezeichnet: OBEN ein laenglicher, GRAUER Kasten mit dem Satz „Der Unterschied ist, wie viel Kapital vom ersten Tag an fuer dich arbeitet." DARUNTER zwei WEISSE Kaesten nebeneinander, „Klassisch investieren" und „Mit Immobilie", jeder mit einer Grafik. ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ WAS DAMIT WEGFAELLT (Stand 30.08.2026) — Die beiden weissen Flaechen lagen IM dunklen Kasten. Sie liegen jetzt darunter und ausserhalb; .wi__band ist kein Kind von .wi__kopf mehr. — Der Kasten war Anthrazit #1E222D -> #2E3643, Zeichen fuer Zeichen die Werte des FAQ-Kastens. Der Kunde nennt den Kasten in seiner Zeichnung jetzt ausdruecklich GRAU. Der Bezug auf faq.css ist damit aufgehoben — wer den FAQ-Kasten umfaerbt, muss hier NICHT mehr nachziehen. — Der Aussenabstand des Bandes zur Unterzeile (3,8rem) war ein Abstand INNERHALB des Kastens. Er ist jetzt der Abstand ZWISCHEN zwei Kaesten und entsprechend neu gesetzt. ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ --------------------------------------------------------------------- WELCHES GRAU — und warum nicht Navy und nicht Schwarz --------------------------------------------------------------------- Die Seite kennt kein Schwarz; die Leitfarbe ist Navy. Der Kunde hat hier aber weder Navy noch Schwarz verlangt, sondern GRAU, und er stellt es in seiner Zeichnung ausdruecklich gegen die beiden WEISSEN Kaesten darunter. Gewaehlt ist deshalb ein NEUTRALES GRAPHITGRAU ohne Blaustich: --wi-kasten-links #333941 --wi-kasten-rechts #3F4650 Es ist heller und deutlich weniger blau als das abgeloeste Anthrazit, liest sich also als Grau und nicht als „fast schwarz"; zugleich bleibt es dunkel genug, dass der Kasten das Wichtigste des Abschnitts bleibt („das ist das Wichtigste und muss hervorgehoben werden", 30.08.) und die beiden weissen Kaesten darunter als weiss lesbar sind. VERLAUFSREGEL: hoechstens 0,03 Einheiten je Bildpunkt. Der groesste Kanalunterschied ist Blau, 0x41 -> 0x50 = 15 Einheiten, ueber die volle Kastenbreite von 1328 px. Das sind 0,0113 Einheiten je Bildpunkt — knapp ein Drittel der Grenze. An Navy-Kanten liegt der Verlauf nicht. --------------------------------------------------------------------- DIE SCHRIFT IM GRAUEN KASTEN — gegen die HELLSTE Stelle gerechnet --------------------------------------------------------------------- Der Kasten wird nach rechts heller. Massgeblich ist deshalb immer die rechte Kante #3F4650, nicht der Mittelwert. #333941 #3F4650 Ueberschrift #FFFFFF 11,65 9,54 Unterzeile #C7CEDA 7,36 6,03 Kleinzeile --sand #D9B485 6,00 4,91 VERWORFEN: --gold-soft #C9B08A 6,53 / 4,57 — traegt zwar, aber nur mit 0,07 Reserve an der hellen Kante. Das ist zu knapp; derselbe Grund hat am 30.08. schon --wi-punkt verworfen. --gold #A8874F 4,04 / 2,82 — reisst. Gewaehlt ist --sand #D9B485 mit 4,91:1 an der hellsten Stelle. Es haelt die warme Familie der Seite und hat 0,41 Reserve. Die Trennlinie zwischen den weissen Kaesten ist nichttextlich; sie steht in --wi-haar #DCD5CC — Zeichnung, keine Aussage. =========================================================================== */ .wi__kopf { /* ===== WEISS — FARBTAUSCH VOM 31.08.2026 =========================== Der Kasten trug bis heute Nachmittag den FAQ-Ton (#1E222D nach #2E3643). Der Kunde hat die Farben getauscht: der Kopfkasten wird WEISS, die beiden Vergleichskaesten darunter bekommen den FAQ-Ton. Die drei Zeilen darin stehen damit wieder auf Weiss, und die auf Weiss gemessenen Farben kehren zurueck: Kleinzeile --wi-gold #86693A auf #FFFFFF 5,12:1 Ueberschrift --wi-navy #102949 auf #FFFFFF 14,31:1 Unterzeile --wi-grau #5F6E85 auf #FFFFFF 5,26:1 ES LIEGT KEIN VERLAUF MEHR DARIN — eine einfarbige Flaeche kann die Steilheitsregel von 0,03 Einheiten je Bildpunkt nicht verletzen. ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ DAS HAUSSYMBOL RECHTS IM KASTEN IST ERSATZLOS ENTFALLEN. Kundenwortlaut: „Vergiss das Haus darin." Hier standen dafuer ein zweispaltiges Raster und die Regeln .wi__kopf-haus (Breite zuletzt clamp(96px, 12vw, 168px), senkrechte Ausrichtung, Bilddarstellung) samt eigenem Wert fuer schmale Fenster. Alles weg. Der Kasten ist damit EINSPALTIG und traegt nur noch drei schmale Zeilen — genau das, was der Kunde mit „viel niedriger, nicht ganz so hoch und nicht ganz so gross" gemeint hat. Der Innenabstand ist entsprechend zurueckgenommen (war bis 2,9rem oben und unten). Die Dateien assets/img/warum/kapital-haus.{webp,png} liegen weiter im Ordner, werden von dieser Seite aber nirgends mehr geholt. ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ DIE KANTE ist die doppelte Haarlinie, die seit dem 31.08.2026 alle drei Kaesten dieses Abschnitts fuehren — aussen Navy auf 0,13, innen Gold auf 0,20. Ein weisser Kasten auf dem cremefarbenen Grund der Section braucht sie: ohne Kante saehe man ihn nicht. Der weiche Schlagschatten von heute frueh ist entfallen; die Handschrift des Projekts ist die feine Linie, nicht der Schatten. */ background: #FFFFFF; border: 1px solid rgba(16, 41, 73, 0.13); border-radius: 20px; box-shadow: inset 0 0 0 1px rgba(168, 135, 79, 0.20); padding: clamp(1.3rem, 2.2vw, 2rem) clamp(1.2rem, 2.6vw, 2.8rem); text-align: center; } /* Vorlage: mittig, Grundlinie y=40, Versalien, weite Sperrung. */ .wi__eyebrow { font-family: var(--font-ui); font-weight: 500; font-size: clamp(0.74rem, 0.98vw, 0.94rem); /* 15px bei 1536 */ letter-spacing: 0.22em; text-transform: uppercase; /* Wieder mittig: der Kasten ist seit dem Farbtausch einspaltig, es steht nichts mehr rechts daneben, worauf sich eine linke Kante beziehen koennte. */ text-align: center; color: var(--wi-gold); /* #86693A — 5,12:1 auf Weiss */ margin: 0 0 clamp(0.5rem, 1vh, 0.9rem); } /* DIE UEBERSCHRIFT TRAEGT SEIT DEM FARBTAUSCH VOM 31.08.2026 WIEDER DEN SATZ MIT DEM VERMOEGEN — siehe den Vermerk im Markup. Er ist kuerzer als der Unterschied-Satz und steht bei 1440 px zweizeilig. */ .wi__h2 { font-family: var(--font-display); font-weight: 300; /* Eine Spur kleiner als der alte Wert (3.52vw / 3.4rem): der neue Satz hat 12 statt 10 Woerter und stuende sonst dreizeilig im Kasten. */ font-size: clamp(1.68rem, 3.15vw, 3.05rem); line-height: 1.14; letter-spacing: -0.012em; text-align: center; color: var(--wi-navy); /* #102949 — 14,31:1 auf Weiss */ text-wrap: balance; /* ===== EINE ZEILE — 31.08.2026 ===================================== Kundenwunsch: „Warum Immobilien soll in einer Zeile stehen. Dann kann der Kasten auch ein bisschen kleiner werden." DER GRAD WAR NIE DAS PROBLEM. Hier stand `max-width: 22em`, und genau das hat den Satz umbrechen lassen — nicht die Kastenbreite. Nachgemessen: der Satz braucht bei jedem Grad exakt 22,545 mal die Schriftgroesse an Breite. 22em waren also 0,545em zu wenig, und der Satz brach ab, obwohl im Kasten reichlich Platz war: Fenster Grad noetig im Kasten frei alte Grenze 22em 1920 48,8 px 1100 px 1238 px 1074 px 1440 45,4 px 1023 px 1250 px 998 px 1280 40,3 px 909 px 1111 px 887 px 1024 32,3 px 727 px 889 px 710 px In jeder Zeile ist „noetig" kleiner als „frei" und groesser als die alte Grenze. Der Grad bleibt deshalb unveraendert; nur die Grenze steigt auf 23,5em — knapp einen Buchstaben Reserve ueber dem gemessenen Bedarf, damit sie ihre Aufgabe behaelt: den Satz nicht bis an die Kastenkanten laufen zu lassen. BIS WOHIN EINZEILIG. Solange der Grad an 3,15vw haengt, wachsen Bedarf (0,710 x Fensterbreite) und freier Platz (0,868 x Fensterbreite) im selben Verhaeltnis — der Satz bleibt einzeilig. Erst wenn der Grad auf seinen unteren Anschlag von 1,68rem faellt, hoert das auf: unterhalb von rund 695 px Fensterbreite bricht der Satz um. Die Vorgabe „einzeilig ab etwa 1024 px" ist damit mit grossem Abstand eingehalten. WAS DER KASTEN GEWINNT: eine Zeile statt zwei, bei 1440 px also 51,7 px weniger Bauhoehe. */ max-width: 23.5em; margin: 0 auto; } .wi__sub { font-family: var(--wi-sans); font-weight: 400; font-size: clamp(0.98rem, 1.24vw, 1.19rem); /* 19px bei 1536 */ line-height: 1.6; text-align: center; color: var(--wi-grau); /* #5F6E85 — 5,26:1 auf Weiss */ margin: clamp(0.5rem, 1.1vh, 0.9rem) auto 0; max-width: 42em; } /* --------------------------------------------------------------------------- 3 DIE ZWEI WEISSEN KAESTEN Sie stehen als eigenstaendige Kaesten UNTER dem grauen, nicht mehr darin. Die Zweispaltigkeit mit dem senkrechten Strich in der Mitte (1fr / auto / 1fr) ist unveraendert aus der vorigen Fassung uebernommen. `align-items: stretch` statt `start`: die beiden Kaesten sollen gleich hoch sein, auch wenn die eine Haelfte eine Zeile mehr braucht — sonst stuenden zwei verschieden hohe weisse Flaechen nebeneinander und die Grafiken saessen auf verschiedenen Hoehen. --------------------------------------------------------------------------- */ .wi__band { position: relative; display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch; /* Der Abstand zum grauen Kasten. War bis zum 31.08. der Abstand INNERHALB des dunklen Kastens (3,8rem); als Abstand zwischen zwei Kaesten darf er etwas knapper stehen, sonst zerfaellt die Gruppe. */ margin-top: clamp(1.4rem, 2.6vh, 2.2rem); padding: 0; } /* =========================================================================== DIE ZWEI KAESTEN TRAGEN DEN FAQ-TON — 31.08.2026 (Farbtausch) ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ SIE WAREN WEISS. Der Kunde hat die Farben getauscht: der Kopfkasten wird weiss, diese beiden bekommen die Farbe, die der Kopfkasten hatte — den FAQ-Ton. Die Schrift darin wird weiss beziehungsweise hell. ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ES IST EINE FLAECHE UND KEIN VERLAUF, und das ist gerechnet, nicht gespart. Der FAQ-Kasten laeuft von #1E222D nach #2E3643, ein Abstand von 22 Einheiten im Blaukanal. Die Regel des Projekts erlaubt hoechstens 0,03 Einheiten je Bildpunkt: Kopfkasten frueher, ueber die volle Breite 1328 px 0,017 haelt eine Haelfte bei 1920 px Fenster, 740 px 0,030 Grenze eine Haelfte bei 1440 px Fenster, 650 px 0,034 reisst eine Haelfte bei 760 px Fenster, 314 px 0,070 reisst Derselbe Verlauf, der ueber die volle Kastenbreite sauber war, ist auf der halben Breite zu steil. Er wuerde ausserdem zweimal nebeneinander von dunkel nach hell laufen und in der Mitte eine harte Kante ergeben. GESETZT IST DESHALB DER MITTELWERT DES FAQ-PAARES ALS FLAECHE: #262C39. Er steht schon in der Kontrasttabelle des abgeloesten Kopfkastens als mittlere Messstelle. Eine einfarbige Flaeche kann die Steilheitsregel nicht verletzen, und der Ton ist derselbe wie im FAQ-Kasten — nur ohne das Atmen darin. DIE SCHRIFT, gemessen gegen #262C39: Marke --sand #D9B485 7,20:1 ✓ Hervorhebung #FFFFFF 13,98:1 ✓ Fliesstext #C7CEDA 8,84:1 ✓ Alle drei liegen deutlich ueber 4,5:1. Weil die Flaeche einfarbig ist, gelten die Werte an JEDER Stelle des Kastens und nicht nur an der hellsten — anders als beim frueheren Verlauf. VERWORFEN fuer die Marke: --wi-gold #86693A auf #262C39 nur 1,7:1 — auf dunklem Grund unbrauchbar. Es ist der Ton, der auf WEISS trug; mit dem Farbtausch dreht sich das um. --gold-soft #C9B08A 6,70:1 — traegt auch, ist aber blasser als Sand. Gewaehlt ist --sand, weil der Kunde „in Richtung Gold" verlangt hat und Sand von den tragenden Toenen der waermste und kraeftigste ist. DIE KANTE bleibt die doppelte Haarlinie aller drei Kaesten dieses Abschnitts: aussen Navy auf 0,13, innen Gold auf 0,20. Auf dem dunklen Grund tritt die goldene Innenlinie hervor und die navyfarbene fast nicht — das ist richtig so, die Fassung soll golden sein. =========================================================================== */ .wi__band-halb { /* ===== TEXT LINKS, SYMBOL RECHTS — 31.08.2026 ======================== Kundenwortlaut: „Schreibe einfach den Text auf der linken Seite, die Grafiken packst du jeweils auf die rechte Seite, dann sind die Kaesten nicht so hoch. Die Grafiken muessen viel, viel kleiner sein." Bis dahin standen Marke, zwei Textzeilen und die Grafik UNTEREINANDER und mittig; die Grafik war bis zu 440 px breit und machte den Kasten hoch. Jetzt: Marke und Text bilden eine Spalte links, das Symbol steht in einer eigenen, schmalen Spalte rechts. Der Kasten ist dadurch flach und breit. NACHGEMESSEN bei 1440 px Fensterbreite, Hoehe eines der beiden Kaesten: vorher 470 px, nachher 175 px. `align-items: center` stellt das kleine Symbol auf die Mitte des Textblocks. Die Textspalte ist linksbuendig — mittiger Satz neben einem Bild haette zwei linke Kanten. */ display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: clamp(1rem, 2.2vw, 2.1rem); text-align: left; /* Der Mittelwert des FAQ-Paares als Flaeche — die Rechnung steht oben. */ background: #262C39; /* ===== FEINE LINIE STATT SCHATTEN — 31.08.2026 ====================== Kundenwunsch: „Du musst die Kaesten generell noch ein bisschen schoener darstellen." Die Vorgabe fuer das Wie ist die Handschrift des Projekts, und die heisst: feine Linien statt Schatten. WEGGEFALLEN ist der weiche Schlagschatten 0 1px 2px rgba(16,41,73,0.05), 0 16px 38px -20px rgba(16,41,73,0.22) Er hob den Kasten von der Flaeche ab; das ist die Sprache von Bedienelementen, nicht die dieser Seite. AN SEINE STELLE tritt eine doppelte Kante, wie sie das Projekt an seinen ruhigen Flaechen fuehrt: aussen eine Navy-Haarlinie in rgba(16,41,73,0.13), innen — ueber `box-shadow: inset` und damit ohne ein zweites Element — eine zweite Haarlinie in Gold auf 0,20. Die goldene Linie liegt einen Punkt innerhalb der navyfarbenen und gibt dem Kasten eine Fassung statt einer Kontur. Beide sind nichttextlich; die Schwelle von 4,5:1 gilt fuer sie nicht. Der Radius steigt von 18 auf 20 px — derselbe Wert wie am grauen Kasten darueber, damit die drei Kaesten eine Familie sind. */ border: 1px solid rgba(16, 41, 73, 0.13); border-radius: 20px; box-shadow: inset 0 0 0 1px rgba(168, 135, 79, 0.20); padding: clamp(1.3rem, 2.1vw, 2rem) clamp(1.3rem, 2.1vw, 2rem); } /* Marke und die beiden Textzeilen bilden zusammen die linke Spalte. */ .wi__band-satz { min-width: 0; } /* =========================================================================== DIE ZWEI MARKEN — IN GOLD, 31.08.2026 (zweite Fassung) ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ERSTE FASSUNG DESSELBEN TAGES: das Sandetikett im Format des Hero-Knopfes ist entfallen (Flaeche --sand, Kante --gold, Radius --radius-btn, Schrift --navy-800) — der Kunde wollte keine gefuellte Flaeche mehr, die Schrift selbst soll die Farbe tragen. Gesetzt war danach: „Klassisch investieren" in --wi-grau, „Mit Immobilie" in --wi-gold, also die Rangfolge der Aussage in der Farbe. ZWEITE FASSUNG: „Klassisch investieren und Mit Immobilie muessen kraeftiger hervortreten, in Richtung Gold." Der Kunde nennt das ausdruecklich wichtig. BEIDE stehen deshalb jetzt in Gold; die Unterscheidung traegt der Text selbst und das Symbol daneben, nicht mehr die Farbe. ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ WELCHES GOLD — gemessen auf dem tatsaechlichen Grund, und das ist der WEISSE Kasten, nicht das Papier der Seite: --gold-text / --wi-gold #86693A 5,12:1 ← GESETZT --sand-schrift #B0834A 3,39:1 reisst --gold #A8874F 3,36:1 reisst --sand #D9B485 1,94:1 reisst deutlich #86693A ist der dunkelste Ton der goldenen Familie des Projekts und der einzige, der als SCHRIFT auf Weiss traegt. base.css haelt genau das fest: „Gold als Schrift: 4.82:1 auf warmem Papier" — auf reinem Weiss sind es die 5,12:1 von oben. KRAEFTIGER WIRD DIE ZEILE ZUSAETZLICH DURCH ZWEI DINGE, die nichts mit der Farbe zu tun haben und deshalb keinen Kontrast kosten: · der Grad steigt um rund ein Zehntel (von 1,25 auf 1,38rem am oberen Anschlag) und das Gewicht von 500 auf 600; · unter der Zeile steht eine kurze goldene Haarlinie (::after). Die Haarlinie ist dieselbe Zeichnung wie .ref__strich im Kopf der Kundenstimmen und .abl__hausstrich unter dem Ablauf — es kommt kein neues Zeichen dazu. =========================================================================== */ .wi__band-marke { position: relative; font-family: var(--font-ui); /* FETT — Kundenwunsch vom 31.08.2026: „Klassisch investieren und Mit Immobilie werden fett gesetzt." 700 statt 600. */ font-weight: 700; font-size: clamp(0.9rem, 1.42vw, 1.38rem); letter-spacing: 0.2em; text-transform: uppercase; color: var(--sand); /* #D9B485 — 7,20:1 auf #262C39 */ /* Der Abstand nach unten traegt jetzt die Haarlinie mit. */ margin: 0 0 clamp(0.95rem, 1.7vw, 1.4rem); } /* Die goldene Haarlinie unter der Marke. Nichttextlich, deshalb ohne Kontrastschwelle; --gold misst auf Weiss 3,36:1 und ist als Zeichnung klar sichtbar. 34 px ist das Mass von .ref__strich. */ .wi__band-marke::after { content: ''; position: absolute; left: 0; bottom: clamp(-0.66rem, -1.15vw, -0.48rem); width: 34px; height: 1px; background: var(--gold); opacity: 0.8; } /* Vorlage: mittig, Grotesk 19px, Zeilenabstand 31px, grau; die hervorgehobenen Stellen in Navy und halbfett. */ .wi__band-text { font-family: var(--wi-sans); font-weight: 400; font-size: clamp(0.94rem, 1.24vw, 1.19rem); /* 19px bei 1536 */ line-height: 1.6; color: #C7CEDA; /* 8,84:1 auf #262C39 */ margin: 0; } /* Die eigenen Zeilenmasse der beiden Haelften (22,4em links, 26em rechts) sind am 31.08.2026 entfallen. Sie stammten aus der mittigen Fassung und sollten dort die Umbrueche der Vorlage nachstellen. Seit Text und Symbol nebeneinander stehen, bestimmt die Spaltenbreite den Umbruch; ein zusaetzliches Mass haette den Satz nur von seiner eigenen Spalte abgekoppelt. */ .wi__band-text + .wi__band-text { margin-top: 0.42em; } .wi__band-text b { font-weight: 500; color: #FFFFFF; /* 13,98:1 auf #262C39 */ } /* =========================================================================== DIE ZWEI SYMBOLE — 31.08.2026, zweite Fassung ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ERSTE FASSUNG VOM SELBEN TAG: die Grafik stand UNTER dem Text, ueber die volle Kastenbreite, bis zu 440 px, mit `margin-top: auto` an die Unterkante gedrueckt. Der Kunde hat genau das beanstandet — der Kasten wurde dadurch hoch. Ersetzt durch: rechts neben dem Text, klein. ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ vgl-klassisch 1380 x 1140 vier Balken fallend, roter Pfeil abwaerts vgl-immobilie 1222 x 1287 vier Balken wachsend, gruener Pfeil aufwaerts Beide sind im Stil der vier Symbole im Feld darunter erzeugt und freigestellt. Sie stehen auf einer cremefarbenen Tafel — seit dem Farbtausch vom 31.08.2026 ist der Kasten um sie herum dunkel, und ohne die Tafel saessen zwei helle Zeichnungen ohne Halt auf der dunklen Flaeche. Die Tafel gibt ihnen denselben Platz, den die vier Symbole im Feld darunter in ihren Karten haben. DER DECKEL VON 132 px ist der Wert, den der Kunde mit „viel, viel kleiner" gemeint hat, und er ist an den vier Symbolen darunter geeicht: die stehen bei 1240 px Feldbreite mit rund 96 px Kantenlaenge im Bild. 132 px sind damit derselbe Groessenbereich, eine Spur groesser, weil hier nur zwei statt vier Symbole stehen. Untergrenze 78 px fuer schmale Fenster — darunter ist ein Balkenpaar nicht mehr als solches zu erkennen. MASSE: bei 1380 beziehungsweise 1222 px Dateibreite gegen 132 px Anzeige stehen die Faktoren bei 10,5 und 9,3. Weit ueber dem Doppelten. `height: auto` mit den `width`/`height`-Angaben am reserviert den Platz vor dem Laden — es gibt keinen Nachsprung. Die beiden Dateien haben verschiedene Seitenverhaeltnisse (1,21 quer und 0,95 hoch); die Breite ist bei beiden dieselbe, die Hoehe darf sich unterscheiden. Weil das Symbol senkrecht mittig zum Text steht, faellt das nicht auf. =========================================================================== */ /* DAS SYMBOL BEKOMMT EINEN PLATZ — 31.08.2026, Teil des „schoener". Die beiden Symbole sind freigestellt und standen bis heute frei im Kasten; sie sahen dadurch aus, als lagen sie lose darin. Sie stehen jetzt auf einer cremefarbenen Tafel in --wi-grund #F7F3F0, dem Grund dieser Section, mit demselben Radius wie der Kasten selbst, eine Stufe kleiner (14 px). Seit dem Farbtausch traegt die Tafel doppelt: sie gibt den Symbolen einen Platz UND den hellen Teilen der Zeichnung einen Grund, auf dem sie stehen koennen. Das ist dieselbe Bauart wie bei den vier Karten im Feld darunter, wo die Symbole ebenfalls in einem eigenen Feld sitzen. Die Tafel ist Flaeche, kein Knopf: kein Rand, kein Schatten, kein Radius aus der Knopffamilie. */ /* =========================================================================== GROESSER, WEIL BESCHRIFTET — 01.09.2026, Optimierungsbriefing, Abschnitt 04 („Bilder als Mechanismus"). Die Abbildungen tragen jetzt Beschriftung (drei Zufluesse rechts, die Sparrate links) und zwei Haeuser, deren Groessenunterschied die Aussage ist. Auf 132 px waere eine Beschriftung nicht zu lesen; der Deckel geht auf 250 px, die Untergrenze auf 170. Beide Zeichnungen haben dieselbe Leinwand (300 x 210) — die Tafeln sind damit gleich hoch, und die beiden Kaesten bleiben gleich hoch (`align-items: stretch` am Band). Die Tafel bleibt: Sand und Navy brauchen einen hellen Grund, und die Zeichnung soll einen Platz haben, nicht lose im dunklen Kasten liegen. Gemessen bei 1440: Kasten 638 px breit, Tafel 250 + Polster, dem Text bleiben 340 px — die drei Stichpunkte stehen weiterhin einzeilig bis zweizeilig, der Kasten waechst nicht ueber 360 px. =========================================================================== */ .wi__vgl { margin: 0; width: clamp(170px, 19vw, 250px); padding: clamp(0.4rem, 0.8vw, 0.7rem); background: var(--wi-grund); border-radius: 14px; } .wi__vgl svg { display: block; width: 100%; height: auto; overflow: visible; } /* Die Beschriftung IM SVG. Jost wie die uebrige Bedienschrift des Abschnitts; Grade in SVG-Einheiten, sie skalieren mit der Zeichnung. Farben gegen die Tafel #F7F3F0 gemessen: Navy #102949 13,3:1, Grau #5F6E85 4,9:1; die Pillenschrift Weiss auf #08294D 14,6:1; der Anteil Navy auf Sand #D9B485 rund 7,5:1. */ .wi__vgl text { font-family: var(--wi-sans); font-weight: 500; fill: var(--wi-navy); } .wi__vgl .vgl-t--quelle { font-size: 13px; } .wi__vgl .vgl-t--weg { font-size: 12px; font-weight: 400; fill: var(--wi-grau); } .wi__vgl .vgl-t--wert { font-size: 13px; } .wi__vgl .vgl-t--pille { font-size: 13px; fill: #FFFFFF; } .wi__vgl .vgl-t--anteil { font-size: 12px; fill: var(--wi-navy); } /* Trenner: nur noch die senkrechte Haarlinie. Der Kreis mit „VS", der auf der Vorlage darauf sass (Mittelpunkt y=281, r=36), ist am 30.08.2026 entfallen. Der Strich selbst bleibt auf ausdruecklichen Kundenwunsch — er steht jetzt zwischen den beiden weissen Kaesten auf hellem Grund und traegt deshalb --wi-haar statt des hellen Werts von vorher. */ .wi__band-trenn { position: relative; align-self: stretch; width: clamp(20px, 3.4vw, 52px); display: grid; place-items: center; } .wi__band-linie { position: absolute; top: 12%; bottom: 12%; left: 50%; transform: translateX(-50%); width: 2px; height: 76%; } /* =========================================================================== 3b DIE ZAESUR ZWISCHEN DEN KAESTEN UND DEM ZWISCHENKOPF — 31.08.2026 Kundenwunsch in drei Schritten am selben Tag; hier steht der Endstand, die beiden Zwischenstaende stehen darunter, damit niemand sie versehentlich wiederherstellt. --------------------------------------------------------------------------- 1 DER ABSTAND — GLEICH GROSS OBEN UND UNTEN. Kundenwortlaut: „Es darf sogar noch einen Ticken mehr Platz sein zwischen ‚Deine Vorteile zum Vermoegen' und ‚Klassisch investieren' / ‚Mit Immobilie'." Dazu die Vorgabe, dass die Linie MITTIG in der Luecke sitzt — „sonst wirkt sie einer der beiden Seiten zugeschlagen". Beide Seiten tragen deshalb DENSELBEN Wert: clamp(4.5rem, 10.1vh, 7.7rem) oben an .wi__zaesur, unten an .wi__h3. Er ist der Wert von heute frueh plus ein Drittel (7,6vh -> 10,13vh, gerundet auf 10,1). Gemessen bei 1440 x 893, am gerenderten Abschnitt: Ausgangslage erste Fassung jetzt ueber der Linie — 67,9 90,2 px unter der Linie 57,6 57,1 90,2 px Luecke insgesamt 57,6 125,0 180,4 px Die Ausgangslage kannte die Linie noch nicht; dort standen die 57,6 px als einziger Abstand zwischen Kaesten und Ueberschrift. --------------------------------------------------------------------------- 2 DIE LINIE LAEUFT DURCH UND ENDET BEIDSEITIG BUENDIG. Kundenwortlaut: „Der goldene Strich darf ruhig durchgezogen sein. Auf der linken Seite passt er, da schliesst er ab und endet auf der gleichen Hoehe wie die Kaesten. Rechts verlaeuft er und wird zu weiss — aber er muss rechts genauso weitergehen wie auf der linken Seite." Also: volle Breite der Kaestenreihe, beidseitig buendig, KEINE Ausblendung, gleichmaessige Staerke ueber die ganze Laenge. DAS GEHT HIER OHNE JEDE RECHNUNG. Die Linie steht als Blockelement im Fluss in .wi__inner, und .wi__band — die Reihe der beiden Kaesten — steht ebenfalls dort. Beide bekommen damit dieselbe Inhaltskante, links wie rechts, bei jeder Fensterbreite. Kein `position`, kein `width`, kein `margin-inline`: waere eines davon noetig, waere die Buendigkeit geschaetzt statt gegeben. Nachgemessen sind trotzdem alle vier Kanten, die Werte stehen im Bericht vom 31.08.2026. ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ VERWORFEN, ERSTE FASSUNG VOM SELBEN TAG: die Linie war Zeichen fuer Zeichen von `.vtr__linie` uebernommen, samt deren Ausblendung nach rechts (deckend bis 52 %, ab 78 % weg; unter 1024 px 72 % / 96 %). Der Kunde hat genau diese Ausblendung beanstandet. Sie gehoert dort hin und nur dort: .vtr__linie blendet aus, WEIL sie sonst in das ueberhaengende Fassadenfoto liefe („Diese Linie darf nicht in das Bild rechts hineinlaufen"). Hier steht rechts kein Bild, also gibt es auch keinen Grund auszublenden. DIE BEIDEN LINIEN SIND DAMIT NICHT MEHR DIESELBE ZEICHNUNG: .vtr__linie blendet weiter aus, diese hier laeuft durch. Wer die eine anfasst, darf die andere NICHT mitziehen. ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ GEBLIEBEN sind Farbe, Staerke und Deckkraft der Vorlage — das linke Ende hat dem Kunden ausdruecklich gefallen („Auf der linken Seite passt er"), und genau dieses Aussehen traegt die Linie jetzt ueber ihre ganze Laenge: Farbe var(--gold) #A8874F Staerke height: 1px Deckkraft opacity: 0.75 FARBE: --gold #A8874F misst 3,36:1 auf Weiss. Nichttextlich, also greift die Schwelle von 4,5:1 nicht — als Zeichnung ist die Linie klar sichtbar. Es ist eine Flaeche in EINER Farbe, kein Verlauf; die Steilheitsregel von 0,03 Farbeinheiten je Bildpunkt aus base.css ist damit gar nicht beruehrt. KEINE BEWEGUNG. Die Linie steht sofort und vollstaendig — ohne Javascript wie mit, bei `prefers-reduced-motion: reduce` wie ohne. Sie traegt kein `data-reveal` und keine Animation. =========================================================================== */ .wi__zaesur { display: block; height: 1px; margin: clamp(4.5rem, 10.1vh, 7.7rem) 0 0; background: var(--gold); opacity: 0.75; } /* --------------------------------------------------------------------------- 4 ZWISCHENKOPF Vorlage: „Vier Kräfte…" Grundlinie y=482, Versalhoehe 30px → 45px Grad. --------------------------------------------------------------------------- */ .wi__h3 { font-family: var(--font-display); font-weight: 300; font-size: clamp(1.5rem, 2.93vw, 2.82rem); /* 45px bei 1536 */ line-height: 1.15; text-align: center; color: var(--wi-navy); text-wrap: balance; /* Der Abstand UNTER der goldenen Zaesur. Er ist seit dem 31.08.2026 wortgleich mit dem Abstand darueber (.wi__zaesur) — der Kunde will die Linie mittig in der Luecke stehen haben. Die Rechnung steht dort. Der alte Wert clamp(2.6rem, 6.4vh, 4.6rem) stammte aus der Vorlage (380 → 452) und kannte die Linie noch nicht. */ margin: clamp(4.5rem, 10.1vh, 7.7rem) 0 0; } .wi__h3sub { font-family: var(--wi-sans); font-weight: 400; font-size: clamp(0.94rem, 1.24vw, 1.19rem); line-height: 1.6; text-align: center; color: var(--wi-grau); margin: 0.4rem 0 0; } /* --------------------------------------------------------------------------- 5 DAS FELD Ruhende Vorlage: das Feld liegt bei x 145..1382, y 500..852. Auf der aktiven Vorlage tragen die Karten zusaetzlich die Zeile „Mehr erfahren"; dadurch waechst ihre Hoehe von 132 auf 154. Das Feld traegt deshalb das Seitenverhaeltnis 1240:385. Die Karten liegen in Prozent darin, die Adern in einem SVG mit genau diesem viewBox — dadurch treffen Aderende und Kartenrand bei jeder Breite auf den Bildpunkt genau aufeinander. --------------------------------------------------------------------------- */ .wi__feld { position: relative; width: 100%; max-width: 1240px; margin: clamp(0.4rem, 1vh, 0.9rem) auto 0; /* Seitenverhaeltnis aus der Vorlage: das Rechteck, das die vier Karten dort gerade umschliesst, misst 1172 x 305 Bildpunkte. Umgerechnet auf die Feldbreite 1240 sind das 323 Einheiten Hoehe. */ aspect-ratio: 1240 / 323; container-type: inline-size; } .wi__adern { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; } /* Das Haus. Die Vorlage misst die Grundstuecksplatte 356 von 1237 Feldbreite; der Ring darum ist 1,31 mal so breit. Damit dieses Verhaeltnis stimmt, ist die Zeichenflaeche 451 Feldeinheiten breit — die Platte fuellt davon 79 Prozent. Senkrecht so gesetzt, dass die vordere Ecke der Platte auf der Mittelhoehe des Rings liegt, wie in der Vorlage. */ .wi__haus { position: absolute; /* Die erzeugte Abbildung ist QUADRATISCH (1024 x 1024) und zeigt ein hoeheres Haus auf einer kleineren Platte als die Zeichnung davor. Damit die Platte weiterhin mittig im Ring sitzt und das Dach nicht in die Zeile darueber ragt, ist nur die BILDFLAECHE neu vermessen — Karten, Adern, Ring und Schild sind unberuehrt geblieben: sichtbarer Inhalt der Datei x 31..1005, y 77..959 von 1024 Anzeigebreite 339 Feldeinheiten, Inhalt damit 322 breit, 292 hoch waagrecht auf die Feldmitte 620 zentriert senkrecht so, dass die Platte auf der Ringmitte endet */ /* NEU VERMESSEN am 25.08.2026 fuer die freigestellte Abbildung. Die vorige war gar nicht freigestellt — sie steckte in einem deckenden Rechteck, deshalb stand das Haus nie im Ring. Datei 1254 x 1254 sichtbarer Inhalt x 40..1221, y 89..1182 = 1181 x 1093 Anzeigebreite 30,48 % von 1240 = 378 Feldeinheiten Gebaeude damit 356 breit, 329 hoch Ring (Ellipse) Mitte 620 / 289, rx 234, ry 69, also 468 breit Waagrecht auf die Ringmitte 620 zentriert — dabei zaehlt die Mitte des SICHTBAREN Inhalts (50,3 % der Dateibreite), nicht die Dateimitte. Senkrecht so, dass die Unterkante der Sockelplatte auf der Mittellinie der Ellipse aufsetzt: 289 - 0,9426 x 378 = -67,4 Feldeinheiten. */ /* VERKLEINERT statt nach oben geschoben. Solange das Haus mit der Sockelunterkante auf der Ringmitte aufsetzt, schiebt jede zusaetzliche Breite es zwangslaeufig weiter nach oben — bei 378 Feldeinheiten ragte es in die Unterzeile. Also andersherum: kleiner, dafuer sitzt es tiefer und liegt ganz im Ring. Datei 1254 x 1254 sichtbarer Inhalt x 40..1221, y 89..1182 = 1181 x 1093 Anzeigebreite 26 % von 1240 = 322 Feldeinheiten Gebaeude damit 303 breit, 281 hoch Ring nach der Vergroesserung 580 breit — das Haus fuellt ihn zu gut der Haelfte, wie in der Vorlage Waagrecht auf die Ringmitte 620, gerechnet mit der Mitte des SICHTBAREN Inhalts bei 50,3 % der Dateibreite. Senkrecht: 289 - 0,9426 x 322. */ /* HAUS, aus der Vorlage gerechnet. Vorlage: sichtbares Motiv x 586..900, y 446..698 Bildpunkte, also 314 breit und 252 hoch; Sockelunterkante bei y 698. Umgerechnet auf dieses Feld: 332 breit, 267 hoch, Unterkante bei 269. Unsere Abbildung ist proportional schmaler und hoeher als die der Vorlage (Inhalt 1181 x 1093 = 1,08 gegen 314 x 252 = 1,25). Beides zugleich geht daher nicht. Massgebend ist die HOEHE — so bleibt das Haus vollstaendig im Feld und sitzt mit der Sockelunterkante genau auf 269, wie in der Vorlage. Es faellt dadurch etwas schmaler aus: 288 statt 332, also 0,65 der Ellipsenbreite statt 0,75. Datei 1254 x 1254, sichtbarer Inhalt x 40..1221, y 89..1182. Anzeigebreite 305,9 -> Inhalt 288 breit, 288 hoch. Waagrecht auf die Ellipsenmitte 603 zentriert, gerechnet mit der Mitte des SICHTBAREN Inhalts bei 50,3 Prozent der Dateibreite. */ /* -- 30.08.2026: DAS ALTE HAUS ------------------------------------------- Getauscht auf das Haus, das frueher an dieser Stelle stand. Die Datei hat ein anderes Seitenverhaeltnis als die vorige, deshalb sind die drei Werte NEU GERECHNET — mit dem Ziel, dass die sichtbare Flaeche im Feld GENAU dort liegt wie vorher. Nur so bleiben Punkte, Adern und Ring unangetastet. ZWEITE FASSUNG am selben Tag: die erste zeigte ein Stadtpalais. Der Kunde: „nicht realistisch, das Haus sieht aus wie eine Villa, wie ein Schloss. Es muss ja aussehen wie ein Wohngebaeude." Jetzt steht dort ein Mehrfamilienhaus mit fuenf Geschossen, durchlaufenden Fensterfluchten und Balkonen. Die Werte unten sind auf diese Datei nachgerechnet. Gemessen wurde der Alphakanal-Rahmen beider Dateien (getbbox der undurchsichtigen Bildpunkte), nicht die Dateikante: haus.png 1254 x 1254 Rahmen x 40..1221 y 89..1182 Anteile x 0,03190..0,97368 y 0,07097..0,94258 haus-alt-1254 1254 x 1254 Rahmen x 58..1211 y 287..1159 Anteile x 0,04625..0,96571 y 0,22887..0,92424 Daraus die Lage der sichtbaren Flaeche in Feldeinheiten (Feld 1240 x 323): vorher nachher linke Kante 459,01 459,01 unveraendert rechte Kante 747,11 747,11 unveraendert Breite 288,10 288,10 unveraendert Mitte waagrecht 603,06 603,06 = Ellipsenmitte 603 Sockelunterkante 268,64 268,64 unveraendert Oberkante 2,01 50,75 Hoehe 266,63 217,89 Breite und Standlinie stimmen also auf den Hundertstelpunkt. Die HOEHE faellt kleiner aus, weil das Mehrfamilienhaus mit 1,32 : 1 breiter gebaut ist als das vorige mit 1,08 : 1. Beides zugleich geht nicht; massgebend ist die Breite, denn an ihr haengen die beiden Punkte und die Adern. Waere die Hoehe angeglichen worden, waere das Haus 349 statt 288 breit geworden und haette die Adern ueberlaufen. */ left: 35.848%; /* 444,52 / 1240 (vorher 36,23 %) */ width: 25.269%; /* 313,34 / 1240 (vorher 24,67 %) */ top: -6.489%; /* -20,96 / 323 (vorher -6,1 %) */ z-index: 2; } /* Das Haus ist seit dem 25.08.2026 eine erzeugte Abbildung statt einer Zeichnung — der Kunde wollte die Motive der Vorlage, nicht nachgezeichnete. Die Datei ist 1024 px breit und steht damit bis 512 CSS-Pixel scharf; sie ist freigestellt und liegt direkt auf dem Navy. `object-fit: contain` haelt sie im Rahmen, ohne dass die Lage des Rahmens angetastet werden muesste. */ .wi__haus picture { display: block; width: 100%; } /* Die Strichlage liegt deckungsgleich UEBER dem Foto. Beide Dateien haben dieselbe Leinwand (1254 x 1254) und denselben Massstab; `inset: 0` reicht deshalb aus, es ist nichts auszurichten. */ .wi__haus-strich { position: absolute; inset: 0; display: block; pointer-events: none; /* GRUNDZUSTAND: unsichtbar. Ohne Javascript sieht man nur das Foto. */ opacity: 0; } .wi__haus-strich img { width: 100%; height: auto; display: block; } .wi__haus img { width: 100%; height: auto; } .wi__haus img { width: 100%; height: auto; object-fit: contain; } /* Sprechblase. Ruhende Vorlage: rechts am Haus, Zipfel nach unten links. Sie gehoert zum Ruhezustand; sobald ein Punkt angetippt ist, ist sie auf der aktiven Vorlage nicht mehr da. */ /* SCHLAEFT seit dem 25.08.2026 — die Sprechblase ist auf Kundenwunsch aus dem Markup entfernt. Die Regeln bleiben als Rueckweg stehen. */ .wi__blase { position: absolute; left: 60.40%; /* 749 / 1240 */ width: 9.27%; /* 115 / 1240 */ top: 39.74%; /* 153 / 385 */ z-index: 3; border-radius: 8px; background: #EFECE7; padding: 0.75cqw 0.8cqw 0.85cqw; } .wi__blase p { margin: 0; font-family: var(--wi-sans); line-height: 1.34; } .wi__blase-t { font-weight: 500; font-size: 1.21cqw; color: #23282F; } .wi__blase-s { font-weight: 400; font-size: 1.21cqw; color: #4A5260; } .wi__blase-zipfel { position: absolute; left: 5%; top: 100%; width: 1.45cqw; height: auto; margin-top: -1px; } /* Das Schild. Feldeinheiten: 305 x 43, mittig, y 324..367. */ /* =========================================================================== DIE PILLE — LAGE BERICHTIGT UND NACHGEFUEHRT, 31.08.2026 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ERST DER FEHLER, DER HIER LAG. Die Pille stand mit left: 48.634%; transform: translateX(-50%); und der Vermerk daneben rechnete vor, dass sie damit auf der Ellipsenmitte 603,1 zentriert sei. Das war sie NIE. Der Einlauf des Feldes endet in `@keyframes wi-nachlauf` auf `transform: none`, und weil die Animation mit `both` gefuellt ist, steht dieses `none` auch NACH dem Einlauf am Element. Es hat `translateX(-50%)` ueberschrieben. Die Folge war eine Pille an ZWEI verschiedenen Stellen, je nach Betriebsart — nachgemessen bei 1240 Feldeinheiten: mit Javascript 603,0 bis 905,6 (Mitte 754,3) ohne Javascript 451,8 bis 754,4 (Mitte 603,1) Der Kunde hat also die verschobene Fassung gesehen, und sein „sitzt noch nicht" trifft genau diese. BERICHTIGT, indem `translateX(-50%)` ERSATZLOS ENTFAELLT und `left` die TATSAECHLICHE LINKE KANTE angibt. Damit steht die Pille in jeder Betriebsart an derselben Stelle — mit Javascript, ohne, und bei `reduce`, wo `transform: none` ohnehin gesetzt wird. ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ DANN DIE VERSCHIEBUNG. Der Kunde hat sie in ZWEI Runden desselben Tages verlangt: erst „etwas weiter nach links und etwas tiefer", aber „weiterhin auf der Linie"; danach „muss noch weiter nach links". In Feldeinheiten (Feld 1240 x 323): Ausgang 1. Runde 2. Runde Weg gesamt linke Kante 603,0 558,0 471,2 131,8 nach links Oberkante 277,0 285,0 285,0 8,0 nach unten Breite 302,6 302,6 302,6 unveraendert Hoehe 45,5 45,5 45,5 unveraendert DIE PILLE STEHT DAMIT FAST MITTIG UNTER DEM HAUS, und das ist kein Zufall: die Ellipsenmitte liegt bei 603,1, die Pillenmitte jetzt bei 622,5 — 19,4 Einheiten daneben. Das ist die Lage, die der urspruengliche Vermerk immer schon beschrieben hat und die der `transform`-Fehler verhindert hat. BERUEHRT SIE DIE LINIE NOCH? Ja, an ZWEI Stellen, und das ist gerechnet. Der Ring ist die Ellipse mit Mitte (603 | 241), rx 222, ry 66. a) OBERKANTE. Der rechte Bogen liegt bei der Hoehe y bei x = 603 + 222 * Wurzel(1 - ((y - 241) / 66)^2) Auf y = 285: x = 603 + 222 * Wurzel(1 - (44/66)^2) = 603 + 222 * 0,7454 = 768,5 Die Pille laeuft von 471,2 bis 773,8. Der Wert 768,5 liegt darin — knapp, mit 5,3 Einheiten Reserve, aber er liegt darin. Der Bogen verlaesst die Pille also ueber ihre Oberkante. b) LINKE KANTE. Bei x = 471,2 steht die Ellipse bei y = 241 +- 66 * Wurzel(1 - ((471,2 - 603) / 222)^2) = 241 +- 66 * 0,8047 = 187,9 bis 294,1 Die linke Kante der Pille laeuft von 285,0 bis 330,5. Die beiden ueberschneiden sich auf 9,1 Einheiten — der Bogen tritt also ueber die linke Kante in die Pille ein. Zum Vergleich die beiden abgeloesten Lagen: der Bogen kreuzte die Oberkante bei 61,5 Prozent der Pillenbreite (Ausgang) beziehungsweise bei 69,5 Prozent (1. Runde); jetzt bei 98,2 Prozent, dafuer kommt der Eintritt ueber die linke Kante dazu. WEITER NACH LINKS GEHT NICHT MEHR VIEL: ab einer linken Kante von 465,9 liegt der Austrittspunkt 768,5 rechts ausserhalb der Pille, und der Kontakt haengt dann allein an der linken Kante. PLATZ NACH UNTEN: die Unterkante liegt bei 330,5 statt 322,5, also 7,5 Einheiten unter dem Feld. Zwischen Feld und .wi__texte stehen seit dem 31.08.2026 gemessene 30 CSS-Punkte (vorher 17); bei 1240 px Feldbreite ist eine Einheit ein Punkt, es bleiben also 22,5 Punkte Luft. =========================================================================== */ .wi__schild { position: absolute; /* Pille aus der Vorlage: 302,6 x 45,5 Feldeinheiten. */ top: 88.24%; /* 285,0 / 323 — 8 Einheiten tiefer */ left: 38%; /* 471,2 / 1240 — siehe die zweite Runde */ width: 24.4%; /* 302,6 / 1240 */ height: 14.09%; /* 45,5 / 323 */ z-index: 4; display: grid; place-items: center; border-radius: 8px; background: var(--wi-navy-tief); color: #FFFFFF; font-family: var(--wi-sans); font-weight: 500; font-size: 1.29cqw; /* 16px bei 1240 */ letter-spacing: 0.07em; text-transform: uppercase; white-space: nowrap; margin: 0; } /* --------------------------------------------------------------------------- 6 DIE VIER KARTEN Feldeinheiten: je 300 x 154, Radius 18. Links x 0..300, rechts x 940..1240. Oben y 6..160, unten y 212..366. Das Sinnbild sitzt 24 vom linken Rand, ist 90 x 90 gross und steht senkrecht mittig. --------------------------------------------------------------------------- */ .wi__karte { position: absolute; z-index: 3; /* Am 25.08.2026 von 24,19 auf 27,5 Prozent verbreitert — bei „Wertentwicklung" lief der Text weiterhin aus der Karte. Die Ansatzpunkte der Verbindungslinien im Adern-SVG wandern mit (x 308 -> 349 und 932 -> 891), sonst treffen sie die Karte nicht. */ /* Kartenmass aus der Vorlage: 275 x 140 Bildpunkte, mal 1,058 sind 291 x 148 Feldeinheiten. */ /* -- 30.08.2026: VERBREITERUNG NACH AUSSEN -------------------------------- Der Kunde hat fotografiert, dass „WERTENTWICKLUNG" aus der Karte 04 herauslief. Gemessen (Range-Messung der tatsaechlichen Zeilenbreite gegen die Innenbreite der Wortspalte): Fensterbreite Kartenbreite Wortspalte laengste Zeile Luft 1920 / 1440 291,02 135,17 160,78 -23,88 1280 276,38 129,91 152,64 -22,73 1024 221,09 117,30 133,38 -16,08 Der Fehlbetrag ist bei jeder Breite dieselbe QUOTE der Feldbreite (23,88 / 1240 = 1,93 %). Die Verbreiterung steht deshalb ebenfalls in Prozent der Feldbreite (cqw) — dann traegt sie bei jeder Breite gleich. WICHTIG: die Karte waechst NUR NACH AUSSEN, zum Fensterrand hin. Karte 01/03 bekommt dafuer einen negativen `left`, ihre RECHTE Kante bleibt bei 23,47 % stehen. Karte 02/04 behaelt ihren `left`, ihre LINKE Kante bleibt bei 76,53 / 76,37 % stehen. Genau an diesen beiden Kanten setzen die Verbindungslinien an — Punkt, Ansatz, Laenge und Verlauf im Adern-SVG bleiben dadurch unberuehrt. Die Hoehe bleibt bei 45,8 %. Der `min()`-Ausdruck deckelt die Verbreiterung am verfuegbaren Seitenrand: (100vw - Feldbreite) / 2 ist der Rand links wie rechts, davon bleiben --wi-aus-rand Punkte Luft zum Fensterrand stehen. Unterhalb von 1240 Fensterpunkten ist dieser Rand die 4vw-Polsterung der Seite; darueber greift der Deckel nicht mehr. `100cqw` ist die Breite von .wi__feld — die Karte liegt darin, also rechnet cqw hier gegen das Feld. */ --wi-aus-rand: 14px; --wi-aus: min(3.6cqw, max(0px, (100vw - 100cqw) / 2 - var(--wi-aus-rand))); width: calc(23.47% + var(--wi-aus)); /* 291 / 1240 plus Verbreiterung */ /* Am 25.08.2026 von 40 auf 46 Prozent erhoeht: bei „Wertentwicklung“ lief der Text aus der Karte. 46 Prozent von 385 sind 177 statt 154 Feldeinheiten. Die BREITE bleibt unangetastet — sie haengt an den Ansatzpunkten der Verbindungslinien im Adern-SVG (x 308 und 932), die sonst mitwandern muessten. */ /* HOEHE UNVERAENDERT bei 40 Prozent. Am 25.08.2026 war sie kurzzeitig auf 52 Prozent — dadurch stiessen die Karten aneinander und der Abstand zwischen ihnen war weg. Zu breit war der Text, nicht zu hoch: gebraucht wurde nur Platz fuer das lange Wort „Wertentwicklung". */ height: 45.8%; /* 148 / 323 */ display: flex; align-items: center; gap: 2.1cqw; /* 26px bei 1240 */ padding: 0 0.97cqw 0 1.94cqw; /* 24px links, 12px rechts */ border-radius: 18px; background: var(--wi-karte); border: 1px solid rgba(16, 41, 73, 0.05); box-shadow: 0 1px 2px rgba(16, 41, 73, 0.035), 0 10px 24px rgba(16, 41, 73, 0.045); transition: border-color 0.16s var(--ease); } /* Oberkanten nachgezogen, damit die Kartenmitte weiterhin dort liegt, wo die Verbindungslinie ansetzt (y 83 oben, y 289 unten). Sonst liefe die Linie durch die groessere Karte hindurch statt an ihre Kante. */ /* Lagen aus der Vorlage, bezogen auf deren Kartenrechteck (x 180, y 444): oben links 0/0, oben rechts 897/3, unten links 1/166, unten rechts 895/166 Bildpunkte — mal 1,058 und in Prozent des Feldes. */ /* Links waechst die Karte nach LINKS heraus (negativer left, rechte Kante bleibt bei 23,47 %), rechts nach RECHTS (left bleibt, die Breite waechst). So bleiben genau die beiden Kanten stehen, an denen die Adern ansetzen. */ .wi__karte--01 { left: calc(0px - var(--wi-aus)); top: 0; } .wi__karte--02 { left: 76.53%; top: 0.99%; } .wi__karte--03 { left: calc(0px - var(--wi-aus)); top: 54.36%; } .wi__karte--04 { left: 76.37%; top: 54.36%; } /* Der Navyrahmen markiert den angetippten Punkt — so wie auf der aktiven Vorlage. Er ersetzt die Haarlinie, deshalb ein negativer Ausgleich am Innenrand, damit der Inhalt nicht springt. */ .wi__karte[aria-expanded='true'], .wi__karte:hover, .wi__karte:focus-visible { border: 2px solid #10305C; padding: 0 calc(0.97cqw - 1px) 0 calc(1.94cqw - 1px); box-shadow: none; background: #FCFBF9; } .wi__karte:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; } .wi__ikon { flex: 0 0 auto; width: 7.26cqw; /* 90 / 1240 */ } /* Die vier Kartensymbole ebenso — erzeugte Abbildungen statt Zeichnungen. `aspect-ratio: 1` haelt das Feld quadratisch, obwohl die Dateien unterschiedliche Seitenverhaeltnisse haben (Schluessel und Dokument stehen hoch, das Diagramm quer). Damit bleibt die Kartengeometrie unveraendert — angepasst wird die Bildflaeche, nicht das Layout. */ .wi__ikon picture { display: block; width: 100%; aspect-ratio: 1; } .wi__ikon img { width: 100%; height: 100%; object-fit: contain; } /* Die Zeichnungen im -Vorrat oben im Markup bleiben liegen: sie kosten nichts und sind der Rueckweg, falls die Abbildungen doch nicht gefallen. */ .wi__ikon svg { width: 100%; height: auto; } .wi__karte-wort { display: block; min-width: 0; } /* Versalien, Grotesk halbfett, Navy. */ .wi__karte-t { display: block; font-family: var(--wi-sans); font-weight: 500; font-size: 1.21cqw; /* 15px bei 1240 */ letter-spacing: 0.055em; text-transform: uppercase; color: var(--wi-navy); line-height: 1.2; } .wi__karte-s { display: block; font-family: var(--wi-sans); font-weight: 400; font-size: 1.37cqw; /* 17px bei 1240 */ line-height: 1.32; color: var(--wi-grau); margin-top: 0.45cqw; } /* Der lange Kurztext der Steuerkachel — 01.09.2026, Optimierungsbriefing, Abschnitt 05. „Abschreibungen reduzieren dein zu versteuerndes Einkommen." hat 58 Zeichen, die drei anderen Kacheln 30 bis 35. Eine Stufe kleiner (15,6 statt 17 px bei 1240 — ueber der 15-px-Marke fuer Kartenzeilen) und enger im Zeilenabstand: drei Zeilen statt vier, und die Kachel bleibt bei ihren 148 px. Der Wortlaut ist unangetastet. */ .wi__karte-s--lang { font-size: 1.26cqw; /* 15,6px bei 1240 */ line-height: 1.26; } /* Nur auf der aktiven Vorlage zu sehen; hier steht sie in beiden Zustaenden, weil man der Karte sonst nicht ansieht, dass sie sich antippen laesst. */ /* HOCHWERTIGER — 01.09.2026, Optimierungsbriefing, Abschnitt 05: „Der Text erhaelt einen kleinen Pfeil nach unten beziehungsweise einen animierten Chevron. Beim Hover bewegt sich der Pfeil dezent um wenige Pixel. Keine dauerhaft hektische Animation." Beschriftung „MEHR ERFAHREN ↓": Versalien, Sperrung, Schnitt 500 — dieselbe Sprache wie der Kartentitel darueber, eine Stufe kleiner. Der Winkel bewegt sich NUR beim Ueberfahren (3 px nach unten) und beim Oeffnen (Drehung), sonst steht er. Die ganze Karte ist der Link; diese Zeile ist nur ihr Hinweis. */ .wi__karte-mehr { display: flex; align-items: center; gap: 0.75cqw; margin-top: 1.05cqw; font-family: var(--wi-sans); font-weight: 500; font-size: 1.05cqw; /* 13px bei 1240 — Versalien tragen groesser */ letter-spacing: 0.1em; text-transform: uppercase; line-height: 1.2; color: var(--wi-navy); white-space: nowrap; } .wi__karte-mehr svg { width: 1.15cqw; height: auto; flex: 0 0 auto; transition: transform 0.3s var(--ease); } @media (hover: hover) { .wi__karte:hover .wi__karte-mehr svg { transform: translateY(3px); } } /* Die geoeffnete Karte: der Winkel zeigt nach oben — „Der Pfeil dreht sich beim Oeffnen oder zeigt anschliessend nach oben." Auch beim Ueberfahren der offenen Karte bleibt er oben; sonst wippte er hin und her. */ .wi__karte[aria-expanded='true'] .wi__karte-mehr svg, .wi__karte[aria-expanded='true']:hover .wi__karte-mehr svg { transform: rotate(180deg); } /* --------------------------------------------------------------------------- 7 DIE VIER ERKLAERTEXTE Aktive Vorlage: ein Kasten unter dem Feld, so breit wie das Feld. Links das Sinnbild, in der Mitte Kleinzeile, Ueberschrift und Text, rechts der salbeigruene Merksatz. Gemessen (auf 1240 Feldeinheiten umgerechnet): Kasten 1240 x 164, Sinnbild 114 breit ab x 52, Textspalte ab x 221, gruener Kasten 371 breit, 39 vom rechten Rand. --------------------------------------------------------------------------- */ /* EINEN KLEINEN TICK TIEFER — 31.08.2026. Kundenwunsch: die Tafel, die zwischen Bankkapital, Miete, Steuern und Wertentwicklung wechselt, klebt zu nah an der Pille „DEIN EIGENTUM WAECHST". Er betont ausdruecklich: wirklich nur einen kleinen Tick. NACHGEMESSEN bei 1440 px, Abstand Unterkante Feld zu Oberkante Tafel: vorher 17 px — davon nahm die Pille 7,5 px weg, es blieben 9,5 nachher 30 px — die Pille nimmt unveraendert 7,5 px, es bleiben 22,5 Der Abstand zwischen Pille und Tafel waechst damit von 9,5 auf 22,5 Punkte. Das ist der Tick: sichtbar, aber kein neuer Absatz. Die drei Werte des clamp sind gleichmaessig um denselben Faktor angehoben (0,9 -> 1,7rem; 1,9 -> 3,3vh; 1,5 -> 2,6rem), damit sich das Verhaeltnis ueber alle Fensterhoehen nicht verschiebt. */ /* ENGER — 01.09.2026, Optimierungsbriefing, Abschnitt 06: „Zwischen Grafik, Detailtext und CTA deutlich weniger vertikalen Abstand einsetzen." Der „Tick tiefer" vom 31.08. (30 px bei 1440) geht auf 16 px zurueck; die Pille am Feldrand nimmt davon weiterhin 7,5 px, es bleiben 8,5 px Luft zwischen Pille und Tafel — sie beruehren sich nicht. Gemessen vorher / nachher steht im Bericht vom 01.09.2026. */ .wi__texte { width: 100%; max-width: 1240px; margin: clamp(0.9rem, 1.8vh, 1.2rem) auto 0; container-type: inline-size; } .wi__texte li + li { margin-top: clamp(0.7rem, 1.4vh, 1.1rem); } .wi__panel { display: grid; /* KEINE MINDESTHOEHE MEHR — 01.09.2026, Optimierungsbriefing, Abschnitt 06: „Der aktive Detailbereich darf den Nutzer nicht in eine lange leere Flaeche fuehren." Die 180 px stammten aus der Vorlage (164 Einheiten) und hielten die Tafel auch dann hoch, wenn der Text zwei Zeilen hatte; der Rest war Flaeche. Jetzt gibt der Inhalt die Hoehe vor. */ grid-template-columns: 13.7cqw minmax(0, 1fr) 29.9cqw; align-items: center; column-gap: 1.4cqw; padding: 1.4cqw 3.15cqw 1.4cqw 4.2cqw; border-radius: 16px; background: #FCF9F6; border: 1px solid rgba(16, 41, 73, 0.05); box-shadow: 0 1px 2px rgba(16, 41, 73, 0.03), 0 10px 24px rgba(16, 41, 73, 0.04); } .wi__panel-ikon { display: block; width: 9.19cqw; } /* 114 / 1240 */ .wi__panel-ikon picture { display: block; width: 100%; aspect-ratio: 1; } .wi__panel-ikon img { width: 100%; height: 100%; object-fit: contain; } .wi__panel-ikon svg { width: 100%; height: auto; } .wi__panel-nr { font-family: var(--wi-sans); font-weight: 500; font-size: 1.25cqw; /* 15.5px bei 1240 */ letter-spacing: 0.14em; text-transform: uppercase; color: var(--wi-gold); margin: 0; } .wi__panel-h { font-family: var(--font-display); font-weight: 400; font-size: 2.18cqw; /* 27px bei 1240 */ line-height: 1.16; color: var(--wi-navy); margin: 0.3cqw 0 0; } .wi__panel-text { font-family: var(--wi-sans); font-weight: 400; font-size: 1.37cqw; /* 17px bei 1240 */ line-height: 1.56; color: var(--wi-grau); margin: 0.35cqw 0 0; max-width: 46em; } /* Der Merksatz. Salbeigruen, mittig, gemessener Grund #E9E9DF; Navy darauf misst 12.5:1. */ .wi__panel-kern { display: grid; place-items: center; min-height: 8.06cqw; /* 100 / 1240 */ padding: 1.3cqw 1.8cqw; border-radius: 10px; background: #E9E9DF; font-family: var(--wi-sans); font-weight: 400; font-size: 1.45cqw; /* 18px bei 1240 */ line-height: 1.5; text-align: center; color: #1B2B3C; margin: 0; /* Der Umbruch steht so auf der aktiven Vorlage: „Du startest direkt mit / einer vollständigen Immobilie." Dafuer braucht der Satz ein Zeilenmass. */ text-wrap: balance; } .wi__panel-kern > span { display: block; max-width: 20.2cqw; } /* Die Tafel ohne Merksatz — 01.09.2026. Bei „Mieteinnahmen" ist der Callout in den Detailtext eingegangen (Optimierungsbriefing, Abschnitt 05); die dritte Spalte waere dort eine leere Flaeche von 30 cqw. Sie klappt zu, der Text bekommt die Breite. */ .wi__panel--ohne-kern { grid-template-columns: 13.7cqw minmax(0, 1fr); } .wi__panel--ohne-kern .wi__panel-text { max-width: 52em; } /* Mit Javascript steht im Ruhezustand keiner der vier Texte offen — so wie auf der ruhenden Vorlage. */ .wi[data-js='an'] .wi__panel[hidden] { display: none; } /* --------------------------------------------------------------------------- 8 FUSS: REITER UND KNOPF Vorlage: Haarlinie ueber der Reiterzeile; Reiter links, Knopf rechts (350 x 62, Radius 10). --------------------------------------------------------------------------- */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ DIE REITERZEILE IST ENTFALLEN — 30.08.2026, Kundenwunsch. Weg ist