/* =========================================================================== SECTION — UNSERE LEISTUNGEN ===== UMBAU 21.08.2026 — DIE NETZGRAFIK NACH DER NEUEN KUNDENVORLAGE ===== Der Kunde hat einen Screenshot einer fremden Grafik geschickt und sie 1:1 nachgebaut haben wollen — „Struktur, Linienfuehrung, Linienform, Kastenform", nur auf weissem Grund und in den Estera-Farben. Damit ist der bisherige senkrechte Ablaufplan (drei Ebenen uebereinander, Linien aus gemessenen Kartenmitten) vollstaendig ersetzt. Sein Aufbau und seine Begruendungen stehen in der Versionsgeschichte (Stand 820e7b7); hier steht nur noch, was jetzt gilt. DIE VORLAGE, in Worten: ein grosses Quadrat mit abgeschraegten Ecken in der Mitte, darin ein Logo. Vier Trabanten weit aussen — oben links, oben rechts, unten links, unten rechts. Von jedem Trabanten laeuft eine 1-px-Haarlinie waagerecht ein Stueck Richtung Mitte, knickt mit grossem weichem Radius senkrecht ab, laeuft auf die Mittelhoehe und knickt dort mit demselben Radius wieder waagerecht zur Mitte: eine liegende S-Form aus zwei gerundeten 90-Grad-Knicken. Keine Diagonalen, keine Bezierschwuenge quer durchs Bild, an diesen vier Linien keine Pfeilspitzen. WAS DER KUNDE DAZUGESETZT HAT: ueber der Mitte ein Kasten „Off-Market", unter der Mitte einer „Kapitalanlage", beide exakt in der Form der uebrigen („Die Form der Kaesten ist 1:1 dann so wie die Form des Kastens in der Mitte."), verbunden durch senkrechte Pfeile MIT Spitze. ===== DIE DREI NACHBESSERUNGSRUNDEN DESSELBEN TAGES ====================== RUNDE 2. „Es ist nicht schlecht, aber es ist noch nicht eins zu eins so, wie ich es haben wollte." — Die Kaesten waren Rechtecke (264 zu 96). „Die Kaesten … sind mehr rechteckig, aber die muessen mehr viereckig sein." — Unter jeden Kasten gehoerten die Stichpunkte der frueheren Leistungskarten. — Estera in der Mitte: weisser Kasten, goldene Schrift. — „Ich will, dass du die Linien eigentlich genauso laesst." RUNDE 3, und sie hebt Teile von Runde 2 wieder auf: — DER KASTEN UM ESTERA KOMMT WEG. „Der Kasten mit Estera in der Mitte soll raus und es soll einfach nur in schwarz stehen: ‚Estera Immobilien‘ in der 1:1-gleichen Schriftart wie im Header." Dazu ausdruecklich „auch Immobilien unter Estera", also zweizeilig wie im Seitenkopf. Der Goldwunsch aus Runde 2 ist damit ueberholt. — DIE DURCHGEHENDE WAAGERECHTE KOMMT WEG. „Der Strich, der von links nach rechts geht und auch durch die zwei Gabeln durchgeht … soll weg." Ersatzlos. Die S-Boegen und die senkrechten Pfeile bleiben. — DIE STICHPUNKTE WANDERN IN DIE KAESTEN HINEIN. Dafuer sind die Kaesten von 192 zu 176 auf 280 zu 280 gewachsen — quadratisch, wie aus Runde 2 verlangt, nur gross genug fuer Titel und vier Zeilen. — SCHWARZ IST NUR DIE WORTMARKE, alles Uebrige blau. „…soll in schwarz da stehen und der Rest ist alles blau." Gold kommt in der Grafik nicht mehr vor. ===== WARUM EIN EINZIGES INLINE-SVG UND KEIN HTML-RASTER MEHR ============ Bis zum 20.08. standen die Kaesten als HTML-Karten in einem Raster und assets/js/leistungen.js rechnete die Linien auf die tatsaechlich gemessenen Kartenmitten. Das war noetig, solange die Kaesten in Fugen sassen, deren Breite erst der Umbruch entschied. Bei DIESER Vorlage sitzen alle Knoten auf festen Rasterpunkten — dann gehoeren Kaesten UND Linien in dieselbe Koordinatenwelt, und es kann konstruktionsbedingt nichts mehr verrutschen. Das Skript misst deshalb keine Geometrie mehr; es schaltet nur noch die Einlaufanimation frei. ===== FARBE UND KONTRAST ================================================= Grund reines Weiss. Alle Werte gegen Weiss gemessen (WCAG 2.1, Relative Luminanz); Text braucht 4.5:1, Konturen und Linien 3:1. Nachgemessen im Browser an den tatsaechlich gerechneten Stilen, nicht aus der Palette abgeschrieben. TEXT (Schwelle 4.5:1) Wortmarke „ESTERA" --ink-black #2B2E33 13.62:1 Kontur des Zielkastens --ziel-gruen #1B7F3B 5.07:1 Titel in den Kaesten --navy-800 #102949 14.63:1 Stichpunkte in den Kaesten --ink-soft #4A5F7A 6.54:1 Erklaerzeilen --ink-mute #5F6E85 5.18:1 LINIEN UND KONTUREN (Schwelle 3:1) Kastenkontur, S-Zuege --navy-400 #4C6A93 5.54:1 Die beiden senkrechten Pfeile --navy-600 #1E4270 10.15:1 Haken der Stichpunkte --gold #A8874F 3.36:1 Die sechs Symbole --gold #A8874F 3.36:1 DAS GOLD IST AM 31.08.2026 ZURUECKGEKOMMEN — auf ausdrueckliche Ansage des Kunden und nur an zwei Stellen: an den vierzig Haken und an den sechs Symbolen. „Unsere Akzentfarbe ist die Farbe, die die CTA-Buttons haben, diese goldene Farbe. … und die Icons in den Kästen auch." Alles Uebrige bleibt blau, wie in Runde 3 verlangt: Konturen, S-Zuege, die zwei Pfeile, die Wortmarke und jede Schrift. ES BLEIBT DABEI, DASS --gold KEINE SCHRIFT TRAEGT. 3.36:1 reicht fuer eine Zeichnung (Schwelle 3:1), nicht fuer Text (4.5:1); goldene Schrift braucht --gold-text #86693A (5.13:1). Die Wahl zwischen beiden Toenen ist bei --wn-akzent begruendet. ZWEI BLAUTOENE UND NICHT EINER: --navy-400 traegt die Flaeche der Grafik (sechs Kastenkonturen, vier lange S-Zuege). Wuerde das alles in --navy-600 stehen, waere die Zeichnung ein Gitter statt einer Andeutung. Die zwei Pfeile tragen den dunkleren Ton, weil sie einzeln stehen und Bedeutung haben: sie zeigen den Weg. Die vierzig Haken und die sechs Symbole standen bis zum 31.08.2026 ebenfalls in diesen beiden Blautoenen (--navy-400 und --navy-600); sie tragen seither das Akzentgold. Die Begruendung und die Messwerte stehen bei --wn-akzent. ===== DER HINTERGRUND ==================================================== Das vollflaechige Gebaeudefoto und der weisse Schleier darueber sind am 21.08. auf Kundenwunsch raus („das Hintergrundbild soll erstmal weg sein, sondern komplett weiss sein"). Beide Regelbloecke stehen weiter unten auskommentiert — „erstmal" deutet auf eine moegliche Rueckkehr. Mit dem Bild ist auch der weisse Saum um die Linien entfallen; er existierte nur, um die Haarlinien gegen wechselnden Untergrund abzusetzen. ===== ABWEICHUNGEN VON DER VORLAGE, BEWUSST ============================== 1. HELL STATT DUNKEL. Die Vorlage ist hell auf Tiefschwarz. Der innere Schein und die aufgehellte Ober- und Linkskante, die dort die „leicht angehobene Platte" machen, funktionieren auf Weiss nicht — sie waeren unsichtbar. An ihre Stelle treten die zwei Schattenlagen, die im Projekt ohnehin jede Karte traegt: ein enger Kontaktschatten macht die Kante, ein weiter, sehr schwacher Umgebungsschatten die Hoehe. 2. SCHRIFT. Die des Projekts, nicht die der Vorlage. 3. DIE MITTE IST KEIN KASTEN. Die Vorlage hat dort ihr groesstes Element; hier steht die Wortmarke frei auf Weiss. Das ist ausdruecklicher Kundenwunsch aus Runde 3 und der einzige Punkt, an dem die Struktur der Vorlage verlassen wird. Die vier S-Zuege enden deshalb 46 Einheiten vor der Schrift, statt in eine Kante zu laufen — nachgemessen an der tatsaechlichen Breite der Wortmarke, nicht geschaetzt. 4. SYMBOLE. Die Vorlage setzt in alle vier Trabanten DASSELBE Personensymbol. Hier traegt jeder Kasten sein eigenes — woertlich die der frueheren Leistungskarten. Viermal dasselbe Symbol unterscheidet nichts; vier verschiedene tun es. 5. STICHPUNKTE. Die Vorlage hat keine. Sie stehen hier auf ausdrueckliche Anweisung des Kunden — und weil eine Grafik aus sechs Ueberschriften ohne einen Satz Inhalt fuer jemanden ohne Vorkenntnis nichts erklaert. =========================================================================== */ .wahl { position: relative; z-index: 1; background: var(--paper); /* Der Abschnitt ist Sprungziel der Kopfleiste („Warum Estera" zeigt auf #leistungen). Ohne diesen Rand landete der Kopf HINTER der festen Leiste. Wie .wi und .faq. Das bleibt auch nach dem Rueckbau vom 01.09.2026 richtig — es ist eine Sprungmarke und keine Verdichtung. */ scroll-margin-top: var(--header-h); /* Der Aussenabstand rechnet in vh, weil die Vorgabe eine Fensterhoehe ist und keine Fensterbreite. ZURUECK AUF DEN STAND VOM 31.08.2026 — 01.09.2026, Kundenansage: „Ich will, dass es von der Struktur her so ist, wie die Section davor war." Am selben Tag stand hier clamp(1rem, 2vh, 1.8rem) aus dem Optimierungsbriefing (P1, „Weniger Aussenabstand"). Der Kunde hat den Umbau zurueckgewiesen, also gilt wieder der weite Abstand. */ padding: clamp(1.15rem, 2.7vh, 2.3rem) 0 clamp(1.3rem, 3vh, 2.6rem); } .wahl__inner { position: relative; max-width: 1520px; margin: 0 auto; padding: 0 clamp(1.25rem, 4vw, 4.2rem); } /* =========================================================================== ERSTMAL WEG, 21.08. AUF KUNDENWUNSCH — DAS HINTERGRUNDBILD UND SEIN SCHLEIER. „Das Hintergrundbild soll erstmal weg sein, sondern komplett weiss sein." Nicht geloescht, weil „erstmal" auf eine moegliche Rueckkehr hindeutet. Kommen sie zurueck, muessen die Markup-Elemente .wahl__ecke und .wahl__schleier in variante-a.html wieder eingesetzt werden (dort stehen sie ebenfalls auskommentiert), .wahl__inner braucht dann wieder z-index: 1, und die Kontrastrechnung unten ist auf die neue Grafik neu zu machen: sie stammt aus der Zeit der goldenen Linien und gilt fuer die jetzigen Navy-Haarlinien nicht mehr. .wahl__ecke { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; } .wahl__ecke img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 74% 34%; filter: grayscale(0.34) brightness(1.24) contrast(0.68) saturate(0.3); opacity: 0.34; -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 6%, #000 94%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0%, #000 6%, #000 94%, transparent 100%); } @media (max-width: 900px) { .wahl__ecke { display: none; } } .wahl__schleier { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(120% 80% at 50% 52%, rgba(255,255,255,0.34) 0%, rgba(255,255,255,0.26) 52%, rgba(255,255,255,0.10) 74%, rgba(255,255,255,0) 94%); } @media (max-width: 900px) { .wahl__schleier { display: none; } } ALTE KONTRASTRECHNUNG ZUM BILD, zur Wiedervorlage aufbewahrt: Bei 0.34 Deckung mass der dunkelste Bildpunkt #B5B5B5. Der goldene Kartentitel #86693A kam darauf auf 2.50:1 und die Goldlinie #9A7A3E auf 1.96:1 — beides zu wenig. Das Bild war deshalb nicht blasser gemacht, sondern aus der Text- und Linienzone herausgehalten (Lesespalte per z-index darueber, Karten deckend weiss). Die Grenze war nicht die Deckung, sondern die Ueberdeckung. =========================================================================== */ /* --- Kopf ---------------------------------------------------------------- DER KOPF HAT SEIT DEM 31.08.2026 DREI ZEILEN Bis dahin stand hier allein die Ueberschrift. Das Wording-Dokument gibt in Abschnitt 05 („Warum Estera?") einen Eyebrow und eine Unterzeile dazu, und der Kunde hat den Wortlaut eins zu eins verlangt. KEIN NEUER STIL. Beide Zeilen uebernehmen die Werte des Bausteins, der dieselbe Rolle im Ablauf spielt — genauso, wie es der Abschluss-CTA am selben Tag gemacht hat: .wahl__eyebrow <- .abl__eyebrow (Kleinzeile ueber einer Ueberschrift) .wahl__sub <- .abl__sub (Unterzeile) Die Werte stehen hier AUSGESCHRIEBEN und nicht als Verweis: ein @extend gibt es in CSS nicht, und --abl-fs-eyebrow, --abl-bronze und --abl-text sind auf .abl gesetzt und ausserhalb davon nicht zu haben. DIE ZWEI FARBEN SIND GEGEN DIESEN GRUND NACHGERECHNET, nicht aus dem Ablauf abgeschrieben — dort liegen sie auf Creme, hier auf reinem Weiss (WCAG 2.1, Relative Luminanz, Schwelle 4.5:1 fuer Text): Eyebrow #8A5A20 5.61:1 auf #FFFFFF Unterzeile #5A6879 5.61:1 auf #FFFFFF ZUR GROESSE DES EYEBROWS, und das ist eine bewusste Abweichung von der 15-px-Untergrenze, die in dieser Section sonst ueberall gilt: bei 1024 px Fenster steht er auf 14.4 px, bei 390 px auf 13.3 px. Das ist der Wert des Ablauf-Eyebrows, Zeichen fuer Zeichen. Eine Kleinzeile ist auf dieser Seite ueberall so gross — sie hier einzeln anzuheben hiesse, zwei Eyebrows derselben Seite verschieden gross zu setzen. Die Untergrenze gilt der Zeichnung, deren Schrift mit ihr skaliert; der Eyebrow skaliert mit dem Fenster und steht in Versalien mit 0.30em Sperrung, was ihn optisch groesser traegt als seinen Kegel. -------------------------------------------------------------------------- */ .wahl__head { display: grid; justify-items: center; text-align: center; } .wahl__eyebrow { margin: 0; font-family: var(--font-ui); font-weight: 500; font-size: clamp(0.90rem, 1.26vw, 1.16rem); line-height: 1; /* Die letzte Sperrung haengt rechts als Leerraum an; sie wird ausgeglichen, damit die Zeile wirklich mittig steht und nicht um ein halbes Zeichen nach links versetzt wirkt. */ letter-spacing: 0.30em; text-indent: 0.30em; text-transform: uppercase; color: #8A5A20; } .wahl__h2 { /* ZURUECK AUF 1,8vw — siehe .wahl__sub, Rueckbau 01.09.2026. */ margin: clamp(1.05rem, 1.8vw, 1.75rem) 0 0; font-size: clamp(1.85rem, 2.9vw, 3.15rem); line-height: 1.06; color: var(--navy-800); text-wrap: balance; } .wahl__sub { /* ZURUECK AUF 44rem UND DEN WEITEN ABSTAND — 01.09.2026, Kundenansage zum Rueckbau (Zitat am .wahl-Rahmen und an der Grafik im Markup). Am selben Tag standen hier 54rem und clamp(0.7rem, 1.25vw, 1.15rem), damit der Kopf 20 px an die verdichtete Grafik abgibt; die Verdichtung ist zurueckgenommen, der Kopf braucht nichts abzugeben. Die Hervorhebung der vier Begriffe darunter bleibt — sie kostete keine Hoehe und war nicht beanstandet. */ max-width: 44rem; margin: clamp(1.1rem, 2.3vw, 2.2rem) 0 0; font-family: var(--font-ui); font-weight: 400; font-size: clamp(1.06rem, 1.60vw, 1.46rem); line-height: 1.45; color: #5A6879; text-wrap: balance; } /* Die vier Begriffe der Grafik — 01.09.2026, Optimierungsbriefing, Abschnitt 07 (DESIGN Subline): „farblich oder Semibold hervorheben; Rest ruhig." Semibold UND Navy: #102949 misst 14,63:1 auf Weiss, der Rest bleibt im Grau #5A6879 (5,61:1). Kein Gold — --gold-text neben dem Grau saehe nach zwei Sorten Leise aus; Navy ist der Ton der Kastentitel darunter, auf die die Begriffe zeigen. */ .wahl__sub strong { font-weight: 600; color: var(--navy-800); } /* Dieselbe Stufe wie im Ablauf (dort @media max-width 760). Ohne sie stuende die Unterzeile auf dem Telefon in Schreibtischgroesse und braeuchte vier Zeilen. */ @media (max-width: 760px) { .wahl__eyebrow { font-size: clamp(0.82rem, 3.4vw, 0.96rem); } .wahl__sub { font-size: clamp(1.0rem, 4.1vw, 1.2rem); } } /* =========================================================================== DIE NETZGRAFIK Ein Rahmen, darin ein unsichtbares Sprite-SVG mit Kastenform, Haken und Symbolen und zwei Zeichnungen: die breite nach der Vorlage, die schmale als senkrechte Kette. Immer genau eine ist eingeblendet. =========================================================================== */ .wnetz { /* ===== Farben, alle aus der Palette in assets/css/base.css ============== „Der Rest ist alles blau" — schwarz ist nur die Wortmarke. Die gemessenen Kontraste stehen im Kopf dieser Datei. */ --wn-kontur: var(--navy-400); /* Kastenkontur und S-Zuege */ --wn-weg: var(--navy-600); /* die zwei Pfeile */ /* ===== DIE AKZENTFARBE — 31.08.2026, Kundenwunsch ===================== Woertlich: „Die Häkchen vor den Punkten sollen immer in unserer Akzentfarbe gemacht werden. Unsere Akzentfarbe ist die Farbe, die die CTA-Buttons haben, diese goldene Farbe. Diese Farbe soll jedes einzelne Häkchen bekommen — und die Icons in den Kästen auch." WELCHER DER DREI GOLDTOENE. Der Sand-Knopf der Seite hat die Flaeche --sand #D9B485 und die Kante --gold #A8874F; fuer Schrift gibt es --gold-text #86693A. Gemessen gegen den Kastengrund (reines Weiss, WCAG 2.1, Relative Luminanz): --sand #D9B485 1.94:1 fuer eine Haarlinie viel zu schwach --gold #A8874F 3.36:1 ueber der Schwelle 3:1 --gold-text #86693A 5.13:1 auch als Schrift zulaessig Haken und Symbole sind ZEICHNUNG und keine Schrift; fuer sie gilt die Schwelle 3:1 (WCAG 1.4.11), nicht 4.5:1. Genommen ist deshalb --gold — es ist buchstaeblich die Farbe der Knopfkante, die der Kunde meint, und die Seite fuehrt diesen Ton ohnehin als ihre Linienfarbe. WAS DAS FUER DIE STRICHSTAERKEN HEISST: 3.36:1 laesst nur 0.36 Reserve ueber der Schwelle. Wer die Haken oder die Symbole duenner macht oder verkleinert, faellt darunter — die Werte 2.2 im 20er-Raster des Hakens und 1.1 im 24er-Raster der Symbole sind deshalb nicht mehr frei. Und --gold darf in dieser Grafik NIE Schrift tragen; dafuer stuende --gold-text bereit. */ --wn-akzent: var(--gold); /* Haken und Symbole */ --wn-flaeche: var(--paper); /* Fuellung der sechs Kaesten */ --wn-titel: var(--navy-800); /* Titel in den Kaesten */ --wn-punkt: var(--ink-soft); /* Stichpunkte in den Kaesten */ --wn-marke: var(--ink-black); /* die Wortmarke in der Mitte */ /* ===== Strichstaerke =================================================== Angegeben in SVG-Einheiten, nicht in Bildschirmpixeln — sie skaliert also mit der Zeichnung. Die breite Zeichnung ist 1304 Einheiten breit und wird zwischen 1151 und 1240 px dargestellt; 1.25 Einheiten landen damit zwischen 1.10 und 1.19 px, also praktisch immer auf der 1-px-Haarlinie der Vorlage. WARUM NICHT vector-effect: non-scaling-stroke, das exakt 1 px liefern wuerde: dieselbe Eigenschaft verschiebt auch die Rechnung fuer stroke-dasharray in den Bildschirmraum, und genau darauf sitzt die Einlaufanimation auf. Ein exakt gleichbleibendes Pixel waere den Umstand nicht wert, die Animation von einer Eigenschaft abhaengig zu machen, die Browser unterschiedlich auslegen. */ --wn-strich: 1.25; /* ===== Takt der Einlaufanimation ====================================== */ /* Versatz INNERHALB einer Stufe. 0.17 s ist kein runder Wert, sondern gerechnet: die vier seitlichen Kaesten kommen seit dem 21.08. PAARWEISE (obere Reihe, dann untere), und zwischen den beiden Paaren sollen 300 bis 400 ms liegen. Die Paare stehen auf Takt 1 und Takt 3, ihr Abstand ist also zwei Takte — 2 x 0.17 s = 340 ms, mitten im Fenster. Wer den Takt aendert, verschiebt damit auch den Paarabstand. */ /* 0,17 -> 0,06 s — Optimierungsbriefing 01.09.2026, P0 („kaum Verzoegerung zwischen Elementen", je Element hoechstens 80 ms). Die Paare (Takt 1 und 3) liegen damit 120 statt 340 ms auseinander; man liest sie weiter als Folge, wartet aber nicht mehr darauf. */ --wn-takt: 0.06s; --wn-kasten-dauer: 0.44s; /* Kasten blendet ein und laeuft hoch */ --wn-zug-dauer: 0.5s; /* Ersatzwert, falls das Skript nicht misst */ /* ===== VON 1100 AUF 1320 px — 31.08.2026 ============================== Nicht breiter als die viewBox der breiten Zeichnung. Das ist keine Geschmacksfrage, sondern die Kehrseite des groesseren Rasters: die Schrift steht in SVG-Einheiten und skaliert mit der Zeichnung, also bestimmt das Verhaeltnis von Darstellungsbreite zu viewBox-Breite die Schriftgroesse in Bildpunkten. Die viewBox ist am 31.08.2026 von 1200 auf 1304 Einheiten gewachsen, weil die Stichpunkte des Wording-Dokuments laenger sind (die Rechnung steht im Markup, bei der Netzgrafik). Bliebe die Obergrenze bei 1100 px, kaemen die 17 Einheiten der Stichpunkte nur noch als 14.3 px an — unter der Untergrenze von 15 px. WARUM 1240 UND NICHT 1304. Bei 1304 px stuende die Zeichnung im Massstab 1 und die Kaesten auf vollen 336 Bildpunkten. Der Kunde hat am 31.08.2026 genau das beanstandet: „Ausserdem sind die Kästen jetzt zu groß geworden." Bei 1240 px ist der Massstab 0.951, die Kaesten stehen auf 319 Bildpunkten und die Stichpunkte auf 16.2 px — deutlich ueber der Untergrenze. Weiter herunter geht es nicht sinnvoll: bei 1150 px waere die Untergrenze erreicht und jede Reserve weg. 1240 px PASSEN: .wahl__inner ist hoechstens 1520 px breit und haelt bei grossen Fenstern 4.2rem (67.2 px) Seitenabstand, es bleiben also 1385.6 px. Wer .wahl__inner enger stellt, muss hier mitziehen. */ max-width: min(1240px, 100%); /* ===== RUECKBAU DER VERDICHTUNG — 01.09.2026 ========================== Kundenansage, woertlich: „Was mir ueberhaupt nicht gefaellt: dass du bei der Section ‚Warum Estera – Viele Einzelthemen, ein klarer Weg' so komprimiert hast, dass du die Texte eventuell aendern musst. Das verstehe ich aber. Ich will, dass es von der Struktur her so ist, wie die Section davor war, mit der Positionierung der Kaesten so, wie es davor war." WAS DAMIT ZURUECKGENOMMEN IST. Am selben Tag war die Zeichnung auf Verlangen des Optimierungsbriefings (Abschnitt 07, P1: „Grafik, fuenf Bereiche und Ergebnis so verkleinern beziehungsweise verdichten, dass alles auf einem ueblichen Desktop-Viewport gleichzeitig sichtbar ist") auf 1304 x 612 gedrueckt: Kaesten 336 x 264 statt quadratisch, die vier Trabanten in eine Zeile mit Off-Market und Zielkasten, Pfeile 50 und 62 statt 150 und 225 Einheiten, Zielkasten 500 x 140. Das ist alles rueckgaengig. Es gilt wieder die Geometrie vom 31.08.2026: 1304 x 1080, QUADRATISCHE Kaesten 336 x 336 (Kundenvorgabe vom 21.08., „die muessen mehr viereckig sein"), zwei Reihen Trabanten um die Wortmarke, Zielkasten 500 x 250. DER ABSCHNITT IST DAMIT WIEDER HOEHER ALS EIN BILDSCHIRM. Bei 1240 px Breite ist die Zeichnung rund 1027 px hoch, bei 1440 x 900 passt sie also nicht mit dem Kopf zusammen ins Fenster. DAS IST SO ENTSCHIEDEN UND GEHT DEM BRIEFING-PUNKT P1 VOR. Wer den Abschnitt spaeter wieder „auf eine Fensterhoehe optimiert", macht genau das rueckgaengig, was der Kunde am 01.09.2026 ausdruecklich verlangt hat. Nicht ohne neue Ansage von ihm anfassen. ===== DIE NEUE ANSAGE IST DA — 06.09.2026 ============================= Woertlich: „Bei der Desktop-Ansicht will ich bei der Section ‚Warum Estera? Viele Einzelthemen, ein klarer Weg' das ein bisschen kompakter haben. Ich will eigentlich nicht, dass die Kaesten naeher zusammen sind, sondern der Abstand ist schon ganz gut. Ich will irgendwie, dass die Kaesten kleiner sind, sodass alles auf einen Blick sichtbar ist." UMGESETZT: die Kaesten sind kleiner (Rechnung am Markup), die Abstaende stehen unveraendert. Die Zeichnung misst 1304 x 957 statt 1304 x 1080, bei 1240 px Breite also 910 statt 1027 px. Der Abschnitt ist damit 1162 statt 1279 px hoch. ER PASST TROTZDEM NICHT IN 1440 x 900, und das ist keine Nachlaessigkeit, sondern Arithmetik — der Kunde soll sie kennen, bevor er das naechste Mal fragt. Die HOEHE DER ZEICHNUNG IST DIE MITTELSPALTE: Off-Market- Kasten, Pfeil, Wortmarke, Pfeil, Zielkasten. Die vier seitlichen Kaesten haengen daneben und tragen zur Hoehe gar nichts bei — sie kleiner zu machen bringt fuer die Fensterhoehe exakt null. In der Mittelspalte stehen (in viewBox-Einheiten): Rand oben 20 Off-Market-Kasten 283 Inhalt 239 + 2 x 22 Innenrand Pfeil auf die Wortmarke 150 ABSTAND, bleibt Wortmarke 65 Pfeil auf den Zielkasten 225 ABSTAND, bleibt Luft vor dem Zielkasten 10 Zielkasten 184 Rand unten 20 --- 957 375 der 957 Einheiten, also 39 Prozent, sind die beiden Pfeile. Selbst wenn jeder Kasten auf seinen blanken Text zusammenfiele, blieben rund 640 Einheiten = 609 px Zeichnung; mit dem Kopf (188 px) und den Abstaenden des Abschnitts waeren das noch immer ueber 860 px, und ins Fenster von 900 px passt der Abschnitt erst bei rund 810 px. ES GIBT GENAU EINEN HEBEL, DER REICHT: die beiden Pfeile kuerzen. Das ist wortwoertlich das „Kaesten naeher zusammen", das der Kunde nicht will. Deshalb bleiben sie, und der Abschnitt bleibt hoeher als ein Fenster. Wer das aendern will, braucht eine Ansage vom Kunden, die genau diesen Punkt aufhebt. NUR DER WORTLAUT IST der vom 01.09.2026 geblieben; er war nicht beanstandet. Was er an der Zeichnung aendert, steht am Markup. */ margin: clamp(0.4rem, 1.4vh, 1.2rem) auto 0; /* Bezug fuer die drei unsichtbaren Marken, siehe .wnetz__marke. */ position: relative; } /* --- Die drei Marken der Stufenanimation ---------------------------------- Unsichtbare Ankerpunkte, je einer fuer einen IntersectionObserver. Sie haben keine Hoehe im Fluss (absolut gesetzt) und koennen deshalb nichts verschieben. IHRE HOEHE STEHT IN PROZENT der Zeichnung, nicht in Pixeln: die Zeichnung skaliert, die Marke soll aber immer auf der Hoehe IHRER Gruppe sitzen. Prozent einer absolut gesetzten Box beziehen sich auf die Hoehe von .wnetz, und die ist die Hoehe der gerade eingeblendeten Zeichnung. Die Werte, hergeleitet aus den viewBox-Koordinaten. Am 31.08.2026 sind beide Zeichnungen gewachsen; die Marken sind mitgewandert. Sie stehen weiterhin an derselben STELLE DER ZEICHNUNG wie vorher, nur ist die Zeichnung hoeher geworden, und deshalb aendern sich die Prozentwerte: breit (1304 x 1080) Stufe 1 Mitte des Off-Market-Kastens 192/1080 Stufe 2 Mittelhoehe der Trabanten 544/1080 Stufe 3 gut ein Zeilenmass unter der Oberkante des Zielkastens 884/1080 schmal (380 x 2578) Stufe 1 Mitte des Off-Market-Kastens 188/2578 Stufe 2 Hoehe der Wortmarke 509/2578 Stufe 3 Mitte des Zielkastens 2465/2578 -------------------------------------------------------------------------- */ .wnetz__marke { position: absolute; left: 0; width: 1px; height: 1px; pointer-events: none; } /* NACHGERECHNET 06.09.2026, weil die breite Zeichnung von 1080 auf 957 Einheiten geschrumpft ist (kleinere Kaesten, gleiche Abstaende): breit Stufe 1 Mitte des Off-Market-Kastens 161.5/957 = 16.9 % Stufe 2 Mitte der Wortmarke 487/957 = 50.9 % Stufe 3 kurz nach der Oberkante des Zielkastens (753 + 0.30 x 184) 808/957 = 84.5 % Vorher: 17.8 / 50.4 / 82 Prozent von 1080. */ .wnetz__marke--1 { top: 16.9%; } .wnetz__marke--2 { top: 50.9%; } .wnetz__marke--3 { top: 84.5%; } /* Das Sprite traegt die Kastenform, den Haken der Stichpunkte und die sechs Symbole. Einmal abgelegt, per geholt: die Kastenform zwoelfmal, die Symbole je zweimal, der Haken vierzigmal. */ .wnetz__sprite { position: absolute; width: 0; height: 0; overflow: hidden; } .wnetz__bild { display: block; width: 100%; height: auto; /* Die Pfeilspitze fuellt mit currentColor. Sie haengt als in den und erbt ihre Farbe deshalb NICHT vom Pfad, an dem sie sitzt, sondern von ihrem eigenen Elternbaum — also von hier. */ color: var(--wn-weg); } /* Die schmale Zeichnung ist die senkrechte Kette; sie erscheint erst, wenn die breite nicht mehr genug Platz hat — siehe den Block „SCHMALE FENSTER" weiter unten. */ .wnetz__bild--schmal { display: none; } /* DIE KOMPAKTE ANORDNUNG — neu am 03.09.2026, und sie gilt NUR unter 768 px. Kundenansage, woertlich: „Du musst auf der mobilen Version endlich mal die Kaesten bei ‚Warum Estera' viel kleiner darstellen. Es soll so sein, dass die Kaesten so klein sind, dass du teilweise sogar Kaesten nebeneinander bekommst. Mache endlich die Kaesten kleiner. Das sage ich dir jetzt zum zehnten Mal." VORHER GALT UNTER 768 px DIESELBE SENKRECHTE KETTE wie zwischen 768 und 1259 px: sechs Kaesten untereinander, die fuenf oberen 336 Einheiten im Quadrat, auf dem Telefon 309.5 x 309.5 Bildpunkte, die Zeichnung 2374 px hoch. Jetzt sind es 155er-Quadrate (146 Bildpunkte), paarweise nebeneinander, und die Zeichnung ist 906 px hoch. AB 768 px AENDERT SICH NICHTS. Die Kette steht dort unveraendert; die breite Zeichnung ab 1260 px ebenso. Der Kunde hat am selben Tag zweimal beanstandet, dass am Schreibtisch etwas anders aussah, was er nicht bestellt hatte — deshalb ist der Umschaltpunkt 767 und nicht hoeher. Das Markup der neuen Zeichnung steht in variante-a.html, dort auch das Raster und die Herleitung jeder Koordinate. */ /* --- Die Kaesten ---------------------------------------------------------- EINE Form fuer alle sechs. Die fuenf quadratischen sind gleich gross und ein echtes Quadrat, mit einem 45-Grad-Schnitt von 12 Prozent der Kantenlaenge an jeder Ecke — so wie in der Vorlage. ===== VON 280 UEBER 344 AUF 336 EINHEITEN — 31.08.2026 =================== Gerechnet und nicht gewaehlt, und QUADRATISCH: „die muessen mehr viereckig sein" ist Kundenvorgabe aus Runde 2 und steht ueber jeder Platznot. Alle fuenf sind gleich gross. AUSLOESER IST DER WORTLAUT. Das Wording-Dokument (Abschnitt 05) bringt deutlich laengere Stichpunkte und in einem Kasten fuenf statt vier. Nachgemessen im Browser mit getComputedTextLength() bei 17 Einheiten: laengster ALTER Punkt "Du hast einen festen Kontakt" 193 Einh. laengster NEUER Punkt "Ausgewählte Objekte statt unübersichtlicher Suche" 340 Einh. Im 280er-Kasten lagen zwischen Textanfang und Innenrand 228 Einheiten. Neun der zwanzig neuen Punkte haetten dort nicht gestanden. DIE BREITE FOLGT DEM LAENGSTEN EINZEILIGEN PUNKT UND SONST NICHTS. Das ist die Antwort auf die Kundenbeanstandung vom 31.08.2026 („Ausserdem sind die Kästen jetzt zu groß geworden"): der erste Anlauf stand auf 344, weil dort noch eine feste Innenkante gerechnet wurde. Jetzt gilt Kastenseite = laengste einzeilige Zeile + Haken samt Vorlauf + 2 x Rand = 271.2 + 20 + 2 x 22.4 = 336 Groesser ist nicht noetig, kleiner ginge nur um den Preis von fuenf weiteren umgebrochenen Punkten: unter 271 Einheiten liegt eine Traube von fuenf Zeilen zwischen 262.8 und 271.2, und darunter kommt lange nichts. 24 Einheiten Ersparnis waeren fuenf zusaetzliche Umbrueche wert gewesen — sie sind es nicht. VIER DER ZWANZIG PUNKTE STEHEN AUF ZWEI ZEILEN (303 bis 340 Einheiten). Gekuerzt oder umformuliert ist keiner. IN DER HOEHE ZAEHLT SEIT DEM 06.09.2026 dieses Raster, und es gilt in BEIDEN Zeichnungen Zeichen fuer Zeichen gleich: Symbolkante 40 (unveraendert) Symbolunterkante -> erste Titelgrundlinie 26 (war 30) je weiterer Titelzeile 27 (unveraendert) letzte Titelgrundlinie -> erster Stichpunkt 44 (war 54) Stichpunkt -> Stichpunkt 26 (war 28) Umbruch innerhalb eines Stichpunktes 22 (unveraendert) Reserve unter der letzten Grundlinie 6 Innenrand oben und unten 22 (war 40 bzw. 28) Daraus fallen die Kastenhoehen von selbst heraus: Off-Market Inhalt 239 -> 336 x 283 Kennenlernen Inhalt 194 -> 336 x 238 Objekt und Zahlen Inhalt 216 -> 336 x 260 Finanzierung Inhalt 238 -> 336 x 282 Langfristig begleiten Inhalt 194 -> 336 x 238 DIE KAESTEN SIND DAMIT KEINE QUADRATE MEHR. Das ist die Kundenansage vom 06.09.2026 — Desktop: „Ich will irgendwie, dass die Kaesten kleiner sind, sodass alles auf einen Blick sichtbar ist"; Telefon: „Bei der mobilen Ansicht sollen die Kaesten jetzt nur viel kleiner dargestellt werden." Sie sticht die Vorgabe vom 21.08. („die muessen mehr viereckig sein"), die bis dahin galt. Die BREITE bleibt bei 336 Einheiten, weil an ihr die Zeilenumbrueche der Stichpunkte haengen — die Kaesten sind flacher geworden, nicht schmaler, und kein Punkt bricht anders um als vorher. WAS BEWUSST NICHT KLEINER WIRD: die Symbolkante (40) und der Titelzeilenabstand (27). An der ersten haengt die Strichstaerke der goldenen Symbole (1.1 im 24er-Raster, also 1.83 Einheiten bei 40) und damit ihr gemessener Kontrast von 3.36:1 — mit 0.36 Reserve ueber der Schwelle 3:1 ist da nichts zu holen. Der Umbruch innerhalb eines Punktes (22 bei 17.4 Einheiten Schrift) ist schon der engste lesbare Zeilenabstand. WER DIE ZEILEN VERLAENGERT ODER DIE SCHRIFT VERGROESSERT, muss den Kasten mitwachsen lassen UND die Obergrenze von .wnetz sowie den Umschaltpunkt nachrechnen: beide haengen daran, dass die kleinste Schrift nirgends unter 15 px faellt. ===== DREI REGELN FUER DAS INNERE, alle drei am 31.08.2026 auf ausdrueckliche Kundenbeanstandung ======================================= Kundenwortlaut: „der Abstand muss bei jedem gleich sein. Die Auflistung mittig unter der Ueberschrift, und immer der gleiche Abstand zwischen der jeweiligen Headline und den darunter aufgelisteten Punkten." 1. DER ABSTAND TITEL -> ERSTER PUNKT WIRD AB DER LETZTEN TITELZEILE GEMESSEN und ist in allen fuenf Kaesten derselbe: 44 Einheiten seit dem 06.09.2026, vorher 54 — die Regel ist dieselbe geblieben, nur enger. Vorher begannen die Stichpunkte auf einer FESTEN Hoehe im Kasten; unter einem einzeiligen Titel klaffte dadurch eine Zeilenhoehe mehr Luft als unter einem zweizeiligen. Genau das hat der Kunde gesehen. Ein zweizeiliger Titel schiebt seine Liste jetzt um genau eine Zeilenhoehe nach unten, die Luecke bleibt gleich. 2. DER STICHPUNKTBLOCK STEHT MITTIG IM KASTEN. Seine Breite gibt die laengste Zeile DIESES Kastens vor (Haken plus Vorlauf plus Zeile), und dieser Block wird zentriert. Die Zeilen darin bleiben linksbuendig mit ihrem Haken davor — eine Aufzaehlung, deren Zeilen einzeln zentriert sind, ist keine Aufzaehlung mehr. Am staerksten wirkt das bei „Objekt und Zahlen", dessen fuenf sehr kurze Woerter vorher weit links an einer fremden Kante klebten. 3. SYMBOL, TITEL UND LISTE SIND EINE GRUPPE. Bis zum 06.09.2026 stand diese Gruppe SENKRECHT MITTIG im Quadrat, damit unten keine leere Flaeche stehenblieb. Das ist hinfaellig: der Kasten ist jetzt genau so hoch wie seine Gruppe plus 22 Einheiten Innenrand, es bleibt gar nichts mehr uebrig, was man ausgleichen muesste. Das Symbol sitzt deshalb in allen fuenf Kaesten auf derselben Hoehe unter der Oberkante — die Beanstandung des Kunden ist damit staerker erfuellt als vorher, nicht schwaecher. Getippt ist keine einzige Koordinate; beide Zeichnungen kommen aus EINEM Rechenskript (scratchpad/wi/bau/netz.py, Stand 06.09.2026). --------------------------------------------------------------------------- */ .wnetz__kasten { fill: var(--wn-flaeche); stroke: var(--wn-kontur); stroke-width: var(--wn-strich); } /* DER AUSGLEICH DER STRICHSTAERKE IST ERSATZLOS ENTFALLEN — 06.09.2026. Hier standen zwei Regeln, die einen Massstab zurueckstellten: .wnetz__kasten:not(.wnetz__kasten--quer) { stroke-width: --wn-strich/1.2 } — weil das in 280 zu 280 rechnete und per auf 336 aufgetragen wurde, also alles darin um 1.2 dehnte. .wnetz__bild--schmal .wnetz__kasten--quer { stroke-width: /0.712 } — weil der quere Zielkasten aus dem 500er-Symbol auf 356 kam. Seit dem 06.09.2026 traegt JEDER Kasten in BEIDEN Zeichnungen seine Kontur als eigenen in den Koordinaten der jeweiligen viewBox. Der Massstab ist damit ueberall 1, es gibt nichts mehr zurueckzustellen, und alle sechs Kaesten stehen auf denselben 1.25 Einheiten. DAS WAR ZULETZT SOGAR FALSCH: die fuenf Kaesten der Kette sind schon seit dem Vormittag des 06.09.2026 Pfade, wurden von der ersten Regel aber weiter getroffen und standen deshalb auf 1.042 statt 1.25 Einheiten — eine um ein Sechstel zu duenne Kontur gegenueber ihrem eigenen Zielkasten. Mit dem Wegfall ist auch das behoben. DIE KLASSE .wnetz__kasten--quer IST DAMIT AUS DEM MARKUP VERSCHWUNDEN: sie hat ausser diesen beiden Regeln nichts getragen. */ /* Zwei Schattenlagen, wie bei jeder Karte im Projekt: eng fuer die Kante, weit und schwach fuer die Hoehe. Sie ersetzen den inneren Schein der Vorlage, der auf Weiss nicht zu sehen waere. Jede Zeichnung haelt ihren EIGENEN Filter in den eigenen . Ein gemeinsamer im Sprite-SVG taete es zwar auch, aber ein `filter: url(...)`, das ins Leere zeigt, laesst das Element in manchen Browsern gar nicht erst erscheinen — dann waeren alle Kaesten weg. Zwei kurze Filter sind der Preis dafuer, dass dieser Fall nicht eintreten kann. */ /* NICHT AUF DEN ZIELKASTEN. Er dreht sich, und `filter` ist eine Gruppierungseigenschaft: mit Filter wird das Element flach gerastert und die Perspektive seiner Drehung faellt in sich zusammen. Seinen Schatten traegt deshalb eine unbewegte Kopie darunter, siehe .wnetz__kasten--zielschatten. */ .wnetz__bild--breit .wnetz__kasten:not(.wnetz__kasten--ziel) { filter: url(#wn-hebung-b); } .wnetz__bild--schmal .wnetz__kasten:not(.wnetz__kasten--ziel) { filter: url(#wn-hebung-s); } /* DER QUERE KASTEN — der Zielkasten ganz unten. Kundenwunsch vom 21.08.: „Er soll nicht zu lang rechteckig werden." Das Verhaeltnis muss zwischen 1.8 und 2.2 liegen; alles Weitere ist gerechnet und nicht gewaehlt. SEIT DEM 06.09.2026 IST ER KLEINER — Kundenansage „die Kaesten kleiner": breite Anordnung 500 x 250 -> 402 x 184 Verhaeltnis 2.19 schmale Anordnung 356 x 178 -> 356 x 172 Verhaeltnis 2.07 Die Breite in der breiten Anordnung folgt der Ueberschrift: gemessene 357.11 Einheiten bei 23 plus 22.4 Innenrand je Seite = 402. Die Hoehe folgt dem Inhalt (128 Einheiten) — und wo das Verhaeltnis sonst ueber 2.2 kaeme, waechst der Innenrand statt der Kasten: 28 statt 22 Einheiten. In der schmalen Anordnung begrenzt die viewBox (380 Einheiten) die Breite; deshalb steht die Ueberschrift dort auf 20 statt 23 Einheiten (siehe .wnetz__wort--ziel). Zwischen ihm und den beiden unteren Kaesten der breiten Anordnung bleiben 95 Einheiten Luft auf jeder Seite (vorher 46) — der Kasten ist schmaler geworden, die Kaesten daneben stehen unveraendert. Seine Kontur ist wie die aller anderen ein eigener in den Koordinaten der viewBox; der frueher noetige Ausgleich der Strichstaerke ist damit entfallen, siehe den Vermerk weiter oben. */ /* --- Die Linien ----------------------------------------------------------- Alle Zuege liegen UNTER den Kaesten. Die vier S-Zuege tragen keine Spitze (so wie in der Vorlage), die beiden senkrechten schon. ENTFALLEN in Runde 3: die durchgehende Waagerechte auf Mittelhoehe samt ihren zwei Verlaeufen (.wnetz__zug--aus-links / --aus-rechts). Sie lief von links nach rechts durch das ganze Bild und durch beide Gabelungen und ist auf Kundenwunsch ersatzlos entfernt. --------------------------------------------------------------------------- */ .wnetz__zug { fill: none; stroke: var(--wn-kontur); stroke-width: var(--wn-strich); stroke-linecap: round; stroke-linejoin: round; } .wnetz__zug--weg { stroke: var(--wn-weg); } /* DIE BEKANNTE FALLE, hier gar nicht erst aufgestellt: eine Regel `.wnetz__bild path { fill: none }` traefe auch den Pfad INNERHALB des und liesse die Spitze hohl. Sie steht deshalb nirgends; `fill` sitzt an .wnetz__zug. Die Regel hier ist die zweite Sicherung — sie ist spezifischer und gewinnt, falls doch jemand eine allgemeine path-Regel nachtraegt. */ .wnetz__bild marker path { fill: currentColor; stroke: none; } /* --- Die Symbole ---------------------------------------------------------- Woertlich die sechs Symbole der frueheren Leistungskarten; sie waren abgenommen, es gab keinen Grund, sie neu zu zeichnen. Ihre Strichstaerke steht im 24er-Koordinatensystem des und wird durch die Darstellung auf 40 Einheiten mitgedehnt: 1.1 dort ergibt 1.83 Einheiten hier, bei Massstab 0.9 also rund 1.6 px. Sie sind damit bewusst eine Spur staerker als die Haarlinien — ein Symbol muss auf 36 px lesbar bleiben. --------------------------------------------------------------------------- */ .wnetz__symbol { color: var(--wn-akzent); } /* --- Die Wortmarke in der Mitte ------------------------------------------- Kundenwunsch aus Runde 3: „…es soll einfach nur in schwarz stehen: ‚Estera Immobilien‘ in der 1:1-gleichen Schriftart wie im Header." Kein Kasten, keine Kontur, kein Schatten — nur Schrift auf Weiss. DIE WERTE SIND AM SEITENKOPF NACHGEMESSEN, nicht nachempfunden. Aus .wordmark__name und .wordmark__sub in assets/css/base.css, im Browser ausgelesen: Name --font-display, 500, 24 px, Sperrung 0.36em, Zeilenhoehe 1 Sub --font-wordmark-sub (Jost), 400, 10 px, Sperrung 0.38em, Versalien, 5.5 px Abstand ueber dem Zeilenkasten Verhaeltnis der Groessen 2.4 zu 1, Grundlinienabstand 0.79 der Namensgroesse. Hier steht der Name auf 41 Einheiten, der Zusatz folglich auf 17.1 und die zweite Grundlinie 32 Einheiten unter der ersten. Die GROESSE ist an die Grafik angepasst, das VERHAELTNIS ist das des Kopfes. DIE MITTE DES WORTES LIEGT AUF DER ACHSE DER PFEILE, und zwar die Luecke zwischen T und E. Kundenwunsch: „Estera muss genau mittig zu den beiden Pfeilen stehen … Die beiden Pfeile muessen zwischen T und E sein." ZWEI DINGE STANDEN DEM IM WEG, beide nachgemessen: 1. Hinter dem letzten Buchstaben einer gesperrten Zeile haengt noch ein voller Sperrabstand, und text-anchor rechnet ihn mit. Das Wort steht dadurch eine halbe Sperrweite zu weit links — bei 0.36em also 0.18em. 2. Selbst mit diesem Ausgleich sitzt die LUECKE nicht auf der Achse: E, S, T sind zusammen 5.15 Einheiten schmaler als E, R, A. Wer die Schriftflaeche zentriert, zentriert nicht die Wortmitte. DIE LOESUNG STEHT IM MARKUP und nicht hier: „EST" ist rechtsbuendig, „ERA" linksbuendig, beide auf derselben Achse und beide um 0.18em versetzt. Damit endet die eine Haelfte eine halbe Sperrweite links der Achse und die andere beginnt eine halbe Sperrweite rechts davon — die Luecke liegt mittig, unabhaengig von jeder Glyphenbreite. Nachgemessen ueber getEndPositionOfChar / getStartPositionOfChar: Abweichung 0.000 px bei 1920, 1512, 1280, 1024 und 390 px. NICHT MIT getBBox NACHPRUEFEN: das meldet bei SVG-Text die Vorschubbreite samt nachlaufender Sperrung und nicht die Schriftflaeche. Eine fruehere Messung damit sah zentriert aus und war es optisch nicht. --------------------------------------------------------------------------- */ .wnetz__wort--marke { font-family: var(--font-display); font-weight: 500; font-size: 41px; letter-spacing: var(--track-logo); fill: var(--wn-marke); } /* ENTFALLEN am 21.08.: die zweite Zeile „Immobilien". Kundenwunsch — in der Mitte steht nur noch die Wortmarke ESTERA, einzeilig. Der Zusatz und seine Regel .wnetz__wort--marke-sub sind ersatzlos raus; die Machart steht in der Versionsgeschichte, falls er zurueckkommt. */ /* --- Titel und Stichpunkte in den Kaesten --------------------------------- Schrift im SVG skaliert mit der Zeichnung. Die kleinste Groesse sind die Stichpunkte und die Erklaerzeilen mit 17 Einheiten. DIE UNTERGRENZE IST AM 31.08.2026 VON 12 AUF 15 px ANGEHOBEN, und daran haengt seither die halbe Geometrie dieses Abschnitts. Gemessen, nicht gerechnet, STAND 06.09.2026 (Stichpunkte auf 17.4 Einheiten): 1920 px Zeichnung 1240 px, Massstab 0.951 -> 16.55 px 1440 px Zeichnung 1240 px, Massstab 0.951 -> 16.55 px 1280 px Zeichnung 1178 px, Massstab 0.903 -> 15.71 px (schmalstes breites) 1024 px schmale Kette, 400 px auf 380 Einh. -> 18.32 px 390 px schmale Kette, 308 px auf 380 Einh. -> 14.10 px DIE LETZTE ZEILE IST DIE AUSNAHME und sie ist erklaerungsbeduerftig: sie liegt unter 15 px und unter den 16 px des Optimierungsbriefings. Sie steht dort auf ausdrueckliche, dreimal wiederholte Kundenansage vom 06.09.2026; die Herleitung samt harter Untergrenze von 14 px steht im Block „TELEFON" weiter unten und bei .wnetz__punkt. Die Schriftgroessen selbst sind UNVERAENDERT geblieben — 17 fuer die Stichpunkte, 23 fuer die Titel, 41 fuer die Wortmarke. Angepasst sind nur die Masse der Zeichnung um sie herum. Kundenwunsch aus Runde 3: „die einzelnen Unterpunkte … in den Kasten rein." Sie standen vorher darunter. Der Wortlaut kommt seit dem 31.08.2026 Zeichen fuer Zeichen aus dem Wording-Dokument des Kunden. --------------------------------------------------------------------------- */ .wnetz__wort { font-family: var(--font-display); font-weight: 400; font-size: 23px; fill: var(--wn-titel); } /* Die Zeile unter „Kapitalanlage", im Zielkasten. DIE ZWEITE STELLE, AN DER DIESE KLASSE STAND, IST AM 31.08.2026 ENTFALLEN: die zweizeilige Erklaerzeile im obersten Kasten. Das Wording-Dokument gibt diesem Kasten drei Stichpunkte und keine Erklaerzeile. Die Klasse bleibt, weil der Zielkasten sie weiter braucht; der Vermerk zum entfallenen Wortlaut steht im Markup. */ .wnetz__wort--erklaerung { font-family: var(--font-ui); font-size: 17px; fill: var(--ink-mute); } .wnetz__punkt { font-family: var(--font-ui); /* 17,4 STATT 17 EINHEITEN — 06.09.2026, frueher Stand des Tages. Die Kette rechnet in 380 Einheiten und stand bei 390 px Fensterbreite auf 350 px, also mit dem Faktor 0,921. 17 Einheiten kamen damit GEMESSEN mit 15,66 px an und lagen unter den 16 px, die das Optimierungsbriefing fuer Fliesstext setzt. 17,4 ergaben 16,03 px. NACHTRAG VOM SELBEN TAG, UND ER AENDERT DAS ERGEBNIS: die Kette steht unter 768 px jetzt auf 308 statt 350 px. Dieselben 17,4 Einheiten kommen dort GEMESSEN als 14,10 px an und liegen damit unter den 16 px des Briefings. Der Grund ist eine Kundenansage, die er dreimal wiederholt hat („viel kleiner dargestellt … du musst es viel kleiner darstellen … das ist sehr wichtig"); die vollstaendige Herleitung samt harter Untergrenze von 14 px steht im Block „TELEFON" weiter unten. AN DEM WERT HIER NICHTS DREHEN, ohne dort nachzulesen: der laengste Stichpunkt („Organisation der Immobilienverwaltung") sitzt bei 17,4 Einheiten passgenau im 336er-Kasten, jede Erhoehung bricht ihn um. Am Schreibtisch bleibt es unveraendert: 16,55 px in der breiten Zeichnung, 18,32 px in der Kette zwischen 768 und 1259 px. */ font-size: 17.4px; fill: var(--wn-punkt); } /* --- Der Zielkasten ganz unten ------------------------------------------- Sein Wortlaut ist vom Kunden woertlich vorgegeben: „Ihre Immobilie als Kapitalanlage langfristig gedacht statt schnell entschieden, fuer die Zukunft geruestet." Kein Wort davon ist weggelassen oder dazuerfunden; die Aufteilung auf zwei Ebenen ist rein typografisch, weil der Satz als eine Zeile eine unlesbare Bandwurmzeile waere. SEIN WORTLAUT IST AM 31.08.2026 ALS EINZIGER IM ABSCHNITT STEHEN GEBLIEBEN. Das Wording-Dokument gibt in Abschnitt 05 als ERGEBNIS-HEADLINE „DEINE IMMOBILIE ALS KAPITALANLAGE" und als ERGEBNIS-TEXT „Du denkst in Jahrzehnten. Du baust heute vor." vor — beides stand hier bereits Zeichen fuer Zeichen so. In der schmalen Anordnung ist die UEBERSCHRIFT eine Stufe kleiner. Grund: der quere Kasten steht dort auf 356 statt 500 Einheiten, die Ueberschrift braucht aber eine Zeile — mit 23 Einheiten waere sie 308 breit und liesse ihr nur 24 Einheiten Rand auf jeder Seite. Bei 20 Einheiten sind es 268 und der Rand betraegt 44. Die UNTERZEILE steht seit dem 31.08.2026 auch dort auf 17 Einheiten; die Begruendung steht im Block „SCHMALE FENSTER". -------------------------------------------------------------------------- */ .wnetz__wort--ziel { font-size: 23px; } .wnetz__wort--zielsub { font-size: 17px; } /* Haken und Symbole tragen denselben Ton — den Akzent der Seite. Bis zum 31.08.2026 stand hier eine andere Ueberlegung: der Haken im helleren Blau der Konturen, damit vierzig dunkle Haken nicht schwerer wiegen als die sechs Symbole. Die Abstufung ist mit der einen Akzentfarbe hinfaellig; der Kunde will beides in Gold, und Gold ist ohnehin leichter als beide Blautoene. */ .wnetz__haken { color: var(--wn-akzent); } /* Der Kommentarblock zu den Schriftgraden der gefalteten Anordnung stand hier und ist am 06.09.2026 mit ihr entfallen. */ /* =========================================================================== SCHMALE FENSTER Bis 1259 px gilt die Anordnung der Vorlage, darunter die senkrechte Kette: die Off-Market-Objekte, die Wortmarke, die vier Leistungen untereinander, die Kapitalanlage. ===== DER UMSCHALTPUNKT IST AM 31.08.2026 VON 980 AUF 1259 px GEWANDERT == Das ist die unangenehmste Folge des laengeren Wortlauts, und sie ist gerechnet: Die breite Zeichnung wird beim Verkleinern nicht umgebrochen, sondern skaliert — mit ihr die Schrift. Die kleinste Schrift sind die Stichpunkte mit 17 Einheiten; sie duerfen nirgends unter 15 px fallen. Daraus folgt ein Mindestmassstab von 15/17 = 0.8824 und damit eine Mindestbreite der Zeichnung von 0.8824 x 1304 = 1150.6 px. Verfuegbar sind (Fensterbreite minus zweimal 4vw Seitenabstand), also 0.92 x Fensterbreite. 1150.6 / 0.92 = 1251 px Fenster. Der Umschaltpunkt liegt mit 1259 px eine Handbreit darueber, damit an der Kante keine Rundung entscheidet. Der naechste uebliche Bildschirm darueber ist 1280 px; dort steht die Zeichnung auf 1177.6 px, also im Massstab 0.903, und die Stichpunkte auf 15.4 px. DAS WAR VORHER NICHT ANDERS — es fiel nur nicht auf. Mit dem alten Umschaltpunkt von 980 px standen die Stichpunkte bei 1024 px Fenster auf 12.8 px. Die damalige Untergrenze war 12 px; sie ist auf 15 px angehoben worden, und damit war der alte Punkt in jedem Fall zu tief. WAS DAS KOSTET: Fenster zwischen 1024 und 1259 px sehen jetzt die senkrechte Kette statt der Vorlage. Das ist der Preis dafuer, dass der volle Wortlaut lesbar bleibt; die Alternative waere Schrift unter 15 px oder ein gekuerzter Wortlaut, und beides ist ausgeschlossen. Umgeklappt wird die ANORDNUNG, nicht der Massstab: die schmale Zeichnung hat ihre eigene viewBox (380 Einheiten breit statt 1304) und damit auf dem Telefon dieselbe Schriftgroesse in Pixeln wie am Schreibtisch. Genau das war die Vorgabe — die Grafik darf auf dem Telefon nicht bloss verkleinert werden, und sie darf keine waagerechte Rollflaeche erzeugen. DIE VIEWBOX DER SCHMALEN ZEICHNUNG IST DABEI GESCHRUMPFT, von 400 auf 380. Auf dem Telefon steht sie auf festen 350 px (390 px Fenster minus zweimal 20 px Seitenabstand); ihr Massstab ist also 350 geteilt durch die viewBox-Breite. Bei 400 waren das 0.875 und die Stichpunkte 14.9 px — schon bisher unter 15. Bei 380 sind es 0.921 und 15.7 px. DIE 400 px SIND EINE OBERGRENZE, keine Breite. Auf dem Telefon greift die 100 % daneben. Auf einem Tablett im Hochformat wuerde die Kette sonst mitwachsen und ihre Schrift ueber 20 px treiben — eine senkrechte Kette wird nicht besser, wenn man sie aufblaest. VON 430 AUF 400 px, 31.08.2026: an dieser Obergrenze haengt auch die Groesse der Kaesten. Bei 430 px stuenden sie in der Kette auf 380 Bildpunkten und waeren damit GROESSER als in der breiten Anordnung (319 px) — genau das, was der Kunde beanstandet hat. Bei 400 px sind es 354 px, und die Stichpunkte stehen dort auf 17.9 px. =========================================================================== */ @media (max-width: 1259px) { .wnetz__bild--breit { display: none; } .wnetz__bild--schmal { display: block; } .wnetz { max-width: min(400px, 100%); } /* Siehe die Begruendung bei .wnetz__wort--ziel. */ .wnetz__wort--ziel { font-size: 20px; } /* DIE UNTERZEILE DES ZIELKASTENS STAND HIER BIS ZUM 31.08.2026 AUF 15 EINHEITEN. Bei 380 Einheiten viewBox und 350 px Darstellung waeren das 13.8 px gewesen, also unter der Untergrenze. VON 17 AUF 17.4 EINHEITEN — 06.09.2026. Sie steht damit auf demselben Grad wie die Stichpunkte, und das muss sie: unter 768 px steht die Kette jetzt auf 308 statt 350 px (Massstab 0.8105), 17 Einheiten kaemen dort als 13.78 px an und die Zeile faellt unter die harte Grenze von 14 px. 17.4 ergeben 14.10 px — genau so viel wie die Stichpunkte. Platz ist dafuer da: die laengere der beiden Zeilen misst bei 17.4 Einheiten rund 292, der Kasten haelt 356 und laesst ihr 32 auf jeder Seite. */ .wnetz__wort--zielsub { font-size: 17.4px; } /* Die Kette ist viel hoeher als das Feld; die Marken sitzen entsprechend anders. Siehe die Herleitung bei .wnetz__marke. */ /* NACHGERECHNET 06.09.2026, zweite Runde: die Kette ist von 2170 auf 1848 Einheiten geschrumpft (engeres Innenraster, kuerzere Verbinder). Stufe 1 Mitte des Off-Market-Kastens 161.5/1848 = 8.7 % Stufe 2 Grundlinie der Wortmarke 400/1848 = 21.6 % Stufe 3 Mitte des Zielkastens 1742/1848 = 94.3 % Vorher: 8.7 / 22.1 / 94.8 Prozent von 2170. */ .wnetz__marke--1 { top: 8.7%; } .wnetz__marke--2 { top: 21.6%; } .wnetz__marke--3 { top: 94.3%; } } /* =========================================================================== TELEFON — DIE KOMPAKTE ANORDNUNG, unter 768 px =========================================================================== Kundenansage vom 03.09.2026, woertlich und nach seiner Zaehlung zum zehnten Mal: „Du musst auf der mobilen Version endlich mal die Kaesten bei ‚Warum Estera' viel kleiner darstellen. Es soll so sein, dass die Kaesten so klein sind, dass du teilweise sogar Kaesten nebeneinander bekommst." Und: „So sind die Kaesten viel zu gross und man muss viel zu weit nach unten scrollen." WAS HIER BIS ZUM 03.09.2026 STAND: nichts. Unter 768 px galt einfach der Block darueber weiter, also die senkrechte Kette mit ihren sechs Kaesten untereinander. WARUM DER UMSCHALTPUNKT AUF 767 px LIEGT UND NICHT HOEHER. Er koennte technisch hoeher liegen — die kompakte Anordnung saehe auch auf einem Tablett gut aus. Er tut es nicht, weil der Kunde am selben Tag zweimal beanstandet hat, dass sich am Schreibtisch etwas geaendert hat, was er nicht bestellt hatte. Bestellt war die MOBILE Ansicht. 768 px ist die Grenze, ab der diese Seite ueberall sonst „nicht mehr Telefon" rechnet. Wer den Punkt hebt, aendert damit Fenster, ueber die nie gesprochen wurde. DIE MARKEN DER STUFENANIMATION. Sie stehen in Prozent der Zeichnungshoehe, und die ist jetzt 984 statt 2578 Einheiten: Stufe 1 Mitte des Off-Market-Kastens (8 + 125) / 984 = 13.5 % Stufe 2 optische Mitte der Wortmarke 515 / 984 = 52.3 % Stufe 3 Mitte des Zielkastens (800 + 87.5) / 984 = 90.2 % =========================================================================== */ /* =========================================================================== ZURUECK AUF DIE KETTE — 06.09.2026 Kundenwunsch woertlich: „Ich will, dass du die Kaesten doch wieder so machst wie davor, in der gleichen Anordnung. Auch immer mit den Stichpunkten darunter, unter den Headlines, genauso wie davor, nur kleiner als davor. Davor war es zu gross. Also genau die gleiche Anordnung wie davor: die Kaesten alle untereinander, aber nur kleiner. Ich rede jetzt nur von der mobilen Ansicht." Hier stand die Umschaltung auf die gefaltete Fassung (.wnetz__bild-- kompakt, zwei Kaesten nebeneinander) samt eigener Markenhoehen. Sie ist mitsamt ihrem Markup entfernt; unter 768 px gilt wieder dieselbe Kette wie zwischen 768 und 1259 px, und deshalb braucht es hier gar keinen Block mehr. KLEINER GEWORDEN IST DIE KETTE SELBST, und zwar an der Stelle, an der Platz verschenkt war: die fuenf Kaesten waren QUADRATISCH (336 x 336 Einheiten), obwohl ihr Inhalt die Hoehe nicht braucht. Gemessen stand zwischen dem letzten Stichpunkt und der Kastenunterkante bis zu 66 Einheiten Leere. Sie sind jetzt Rechtecke von 336 x 272 bis 336 x 314 — die Breite bleibt, weil an ihr die Zeilenumbrueche der Stichpunkte haengen. Dazu sind die Verbindungslinien von 90 bis 117 auf 55 bis 85 Einheiten gekuerzt. Die Zeichnung misst dadurch 2170 statt 2578 Einheiten. DIE KAESTEN SIND JETZT PFADE STATT . Das quadratische haette in einem rechteckigen Rahmen entweder eingepasst (der Kasten waere schmaler geworden statt flacher) oder mit preserveAspectRatio="none" den 45-Grad-Schnitt an den Ecken verzerrt. Der Schnitt wird jetzt je Kasten gerechnet: 12 Prozent der KUERZEREN Kante, also der Hoehe. =========================================================================== */ /* =========================================================================== TELEFON — NOCH EINMAL KLEINER, unter 768 px NEU AM 06.09.2026 =========================================================================== Kundenansage, woertlich: „Bei der mobilen Ansicht sollen die Kaesten jetzt nur viel kleiner dargestellt werden. Es soll immer noch die Headline mit allen einzelnen Haekchen darunter mit den Punkten darunter sein, aber du musst es viel kleiner darstellen. Das ist sehr wichtig, sodass man die Section nicht auf dem Handy 10 Minuten scrollen muss, sondern dass du es WEITER WEG VON DEN RAENDERN einfach kleiner darstellst." ZUERST DIE GEOMETRIE, DANN DIE BREITE — in dieser Reihenfolge, weil jede Einheit, die aus dem Innenraster kommt, die Schrift NICHT verkleinert. Aus dem Innenraster (Rechnung am Markup und bei den Kaesten weiter oben) kommen 2170 -> 1848 Einheiten, also 15 Prozent, ohne einen einzigen Schriftgrad anzufassen. Erst was dann noch fehlte, kommt aus der Breite. DIE BREITE: 308 px STATT 350 px, und die Zahl ist eine Untergrenze und kein Geschmack. Die Kette rechnet in 380 Einheiten; ihr Massstab ist Darstellungsbreite geteilt durch 380. Die Stichpunkte stehen auf 17.4 Einheiten. Bei 350 px Massstab 0.9211 -> 16.03 px Bei 308 px Massstab 0.8105 -> 14.10 px Bei 306 px Massstab 0.8053 -> 14.01 px <- die Grenze 308 px ist also der kleinste Wert mit noch etwas Luft ueber 14 px. ===== ZUR SCHRIFTGROESSE, UND DAS IST EINE BEWUSSTE ABWEICHUNG ========= DIE STICHPUNKTE STEHEN AUF DEM TELEFON JETZT AUF 14.10 px UND DAMIT UNTER DEN 16 px, die das Optimierungsbriefing vom 01.09.2026 fuer Fliesstext setzt. Bis heute waren es gemessene 16.03 px — genau auf der Grenze. Das ist keine Unachtsamkeit, sondern die Folge einer Kundenansage, die er im selben Gespraech DREIMAL wiederholt hat („viel kleiner dargestellt", „du musst es viel kleiner darstellen", „das ist sehr wichtig") und die er ausdruecklich mit dem Scrollweg begruendet. Zwei Dinge liessen sich nicht gleichzeitig halten; die juengere und ausdrueckliche Ansage sticht. HARTE UNTERGRENZE IST 14 px, und die steht. Wer die Kette weiter verschmaelert, faellt darunter — dann muss stattdessen die Schriftgroesse in Einheiten steigen, und mit ihr brechen die Stichpunkte neu um. Betroffen sind die Stichpunkte und die Unterzeile des Zielkastens (beide 17.4 Einheiten). Ueberschriften (23), die Ergebnis-Ueberschrift (20) und die Wortmarke (41) liegen mit 18.6, 16.2 und 33.2 px weiter deutlich darueber. „WEITER WEG VON DEN RAENDERN" IST DAMIT WOERTLICH ERFUELLT: bei 390 px Fenster stehen links und rechts je 41 px frei statt 20, bei 360 px je 26. AB 768 px AENDERT SICH NICHTS. Dort gilt weiter min(400px, 100%) — der Kunde hat wiederholt beanstandet, wenn sich am Schreibtisch etwas aenderte, was er nicht bestellt hatte. Bestellt war die MOBILE Ansicht. =========================================================================== */ @media (max-width: 767px) { .wnetz { max-width: min(308px, 100%); } } /* =========================================================================== DIE EINLAUFANIMATION IN DREI STUFEN Kundenwunsch vom 21.08.: „Wenn man runter scrollt, zuerst kommt Off-Market. Dann wenn man Off-Market sieht, scrollt man weiter. Dann kommen die vier Punkte … und Estera in der Mitte. Erst wenn alle diese vier sichtbar sind und man dann noch mal weiter scrollt, ploppt es so richtig in gruen." Stufe 1 der Kasten Off-Market und sein Pfeil nach unten Stufe 2 die vier seitlichen Kaesten, die Wortmarke und die S-Boegen Stufe 3 der lange Pfeil und der Zielkasten mit dem gruenen Puls Welches Element zu welcher Stufe gehoert, steht als `data-st` am Element; `--auf` staffelt innerhalb der Stufe. Die Schalter setzt assets/js/leistungen.js: data-bereit schaltet die Startzustaende ueberhaupt erst frei. Ohne Javascript wird er nie gesetzt und die Grafik steht vollstaendig da, gruene Kontur inklusive — nie ein leerer oder halber Zustand. data-s1 / s2 / s3 je eine Stufe im Endzustand. ES GIBT KEINEN LAYOUT-SHIFT: alle Elemente liegen von Anfang an an ihrem Platz, es aendern sich nur `opacity`, `transform` und `stroke-dashoffset` — nichts davon loest ein Neuberechnen des Layouts aus. Die Linien zeichnen sich ueber stroke-dashoffset. Damit das ohne jede Messung stimmt, tragen alle Zuege im Markup pathLength="1": ihre Laenge ist damit auf 1 normiert, und `stroke-dasharray: 1` deckt sie unabhaengig von Massstab und viewBox exakt ab. Das Skript misst mit getTotalLength() nur noch die DAUER dazu, damit alle Zuege gleich schnell laufen und nicht gleich lange. =========================================================================== */ /* --- Startzustand: unsichtbar und 18 Einheiten tiefer --------------------- Die Stichpunkte laufen als GRUPPE, nicht Zeile fuer Zeile: sechzehn einzeln gestaffelte Zeilen waeren Zappeln, und sie gehoeren ohnehin zu ihrem Kasten. ---------------------------------------------------------- */ .wnetz[data-bereit] .wnetz__kasten, .wnetz[data-bereit] .wnetz__symbol, .wnetz[data-bereit] .wnetz__schrift text, .wnetz[data-bereit] .wnetz__punkte > g { opacity: 0; transform: translateY(14px); /* 18 -> 14, Optimierungsbriefing 01.09.2026, P0 */ } .wnetz[data-bereit] .wnetz__zug { stroke-dasharray: 1; stroke-dashoffset: 1; } /* --- Endzustand, je Stufe ------------------------------------------------- Eine Regel je Stufe und nicht eine gemeinsame: so steht im Stylesheet schwarz auf weiss, welcher Schalter welche Gruppe freigibt. `stroke-dashoffset` steht in derselben Regel wie `opacity` — bei allem, was kein Pfad ist, laeuft die Eigenschaft ins Leere und stoert nicht. --- */ /* ZUR SPEZIFITAET, und das ist kein Zierrat: `.wnetz__bild` steht in jedem dieser drei Selektoren mit drin, obwohl es zur Auswahl nichts beitraegt. Ohne das Klassenglied kaeme die Regel auf (0,3,0) und verloere gegen die Startzustaende oben — `.wnetz[data-bereit] .wnetz__schrift text` und `.wnetz[data-bereit] .wnetz__punkte > g` haben durch ihr Elementglied (0,3,1) und waeren staerker. Beim ersten Versuch war genau das der Fehler: Kaesten und Symbole liefen ein, jede Schrift und jeder Stichpunkt blieb unsichtbar. */ .wnetz[data-s1] .wnetz__bild [data-st='1'], .wnetz[data-s2] .wnetz__bild [data-st='2'], .wnetz[data-s3] .wnetz__bild [data-st='3'] { opacity: 1; transform: none; stroke-dashoffset: 0; transition: opacity var(--wn-kasten-dauer) var(--ease-soft), transform var(--wn-kasten-dauer) var(--ease-soft), stroke-dashoffset var(--dauer, var(--wn-zug-dauer)) var(--ease-soft); transition-delay: calc(var(--auf, 0) * var(--wn-takt)); } /* =========================================================================== DIE GRUENE KONTUR AM ZIELKASTEN „Erst wenn alle diese vier sichtbar sind und man dann noch mal weiter scrollt, ploppt es so richtig in gruen, dass die Immobilie als Kapitalanlage wirklich gruen ist. Es soll aber nur die Umrandung des Kastens gruen sein." NUR DIE UMRANDUNG. Fuellung, Schrift, Symbol und alles Uebrige in der Grafik bleiben unveraendert navy. Gruen ist im Estera-System keine Farbe; --ziel-gruen ist die eine, bewusst gesetzte Ausnahme fuer den Zielzustand und steht deshalb HIER und nicht in der Palette — es soll nirgendwo sonst auf der Seite auftauchen. DAS PULSIEREN IST AM 21.08. ENTFALLEN. Es lief zuvor dreimal als zweiter, nach aussen aufgehender Umriss. Kundenwunsch: „Das Pulsieren gefaellt mir nicht bei ‚Ihre Immobilie als Kapitalanlage‘. Mache das Pulsieren weg." Geblieben sind die ruhige gruene Kontur — sie war nicht beanstandet und ist weiterhin die Hervorhebung des Zielzustands — und der kurze Einsprung beim Erscheinen. Der Einsprung ist keine Dauerbewegung, sondern das „Ploppen", das der Kunde ausdruecklich wollte. =========================================================================== */ .wnetz { /* #1B7F3B misst auf Weiss 5.07:1 und liegt damit weit ueber der Schwelle von 3:1 fuer nichttextliche Elemente. Kraeftig und eindeutig gruen, kein gedecktes Salbei — der Kunde verlangt ausdruecklich „ein stark sichtbares Gruen". */ --ziel-gruen: #1B7F3B; /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ VON 0,9 s AUF 1,8 s — 31.08.2026. Kundenwortlaut: das Element dreht sich beim Hereinkommen mehrfach, es soll sich „genau einmal, langsam" drehen und dann stehen. ES WAR SCHON IMMER GENAU EINE UMDREHUNG (360 Grad, `1` Durchlauf). Gesehen hat der Kunde trotzdem mehr als eine, und der Grund ist die Form: der Kasten ist flach (500 zu 250). Bei einer Drehung um seine Laengsachse steht er zweimal je Umdrehung hochkant zur Blickrichtung — bei 90 und bei 270 Grad — und verschwindet dort auf eine Strichlinie. Er scheint also zweimal wegzugehen und wiederzukommen. Bei 0,9 s lagen diese beiden Augenblicke 450 ms auseinander; das Auge liest daraus zwei kurze Kipper statt einer Umdrehung. Bei 1,8 s liegen sie 900 ms auseinander. Die Bewegung ist damit langsam genug, dass man den Kasten ueber die ganze Drehung mit dem Blick begleitet und die beiden Durchgaenge als das lesen, was sie sind: Teile EINER Umdrehung. Der zweite Teil der Antwort steht in assets/js/leistungen.js: die Folge lief bisher jedes Mal neu an, wenn die Grafik das Fenster ganz verlassen hatte. Wer zweimal daran vorbeirollte, sah die Drehung zweimal. Das ist dort abgestellt. ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ VON 1,8 s AUF 0,6 s — 01.09.2026, Optimierungsbriefing P0: „Animationen maximal ca. 400 bis 600 ms." Das Briefing ist die juengere Ansage und nennt die Grenze als technische Mindestvorgabe fuer alle Bewegungen der Seite; die 1,8 s vom 31.08. fallen darunter. DIE DREHUNG SELBST BLEIBT — sie ist ausdruecklich bestellt („Es soll sich drehen … einmal um die Laengsachse") und das Briefing verlangt ihre Abschaffung nicht. Der Kasten ist waehrend der Drehung sichtbar (Deckkraft nach 0,22 s voll), es entsteht also keine leere Flaeche. WAS DAMIT ZURUECKKOMMT: bei 0,6 s liegen die beiden Augenblicke, in denen der flache Kasten hochkant zur Blickrichtung steht, 300 ms auseinander — genau der Eindruck, den der Kunde am 31.08. als „dreht sich mehrfach" beschrieben hat. DEM KUNDEN GEGENUEBER FESTGEHALTEN: liest er das wieder so, ist der Ersatz ein kurzer Einsprung (Massstab 0,94 -> 1, 500 ms) statt der Drehung; die Keyframes darunter bleiben dafuer unangetastet. ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ --wn-dreh-dauer: 0.6s; } .wnetz__kasten--ziel { stroke: var(--ziel-gruen); } /* Die Gruppe, die sich dreht: Kontur, Symbol und beide Zeilen zusammen. Sie traegt den Drehpunkt, nicht die Kontur — sonst kippte ein leerer Rahmen um eine stehende Schrift. */ .wnetz__ziel { transform-box: fill-box; transform-origin: center center; } /* Die Kinder der Gruppe sind von den allgemeinen Startzustaenden ausgenommen: sie haben keinen eigenen Einlauf mehr, die Gruppe bringt sie mit. Ohne diese Regel blieben Kontur und Symbol unsichtbar, weil `.wnetz[data-bereit] .wnetz__kasten` und `… .wnetz__symbol` sie weiterhin treffen. Die beiden Zeilen stehen ausserhalb von .wnetz__schrift und werden ohnehin nicht getroffen. */ .wnetz[data-bereit] .wnetz__ziel .wnetz__kasten, .wnetz[data-bereit] .wnetz__ziel .wnetz__symbol { opacity: 1; transform: none; transition: none; } /* --- DIE DREHUNG DES ZIELKASTENS ----------------------------------------- Kundenwunsch vom 21.08.: „Es soll sich drehen, also um die eigene Achse drehen, und dann zeigt es es an. Es soll sich aber einmal um die Laengsachse drehen." Der Kasten liegt (500 zu 250), seine Laengsachse ist also die WAAGERECHTE. Gedreht wird um sie, wie eine Karte, die nach hinten kippt und wieder nach vorn kommt: rotateX, genau 360 Grad, danach steht sie wieder gerade. DIE PERSPEKTIVE IST NICHT SCHMUCK, SONDERN NOTWENDIG. Ohne sie ist eine rotateX-Drehung mathematisch nichts als ein Stauchen in der Hoehe — man saehe den Kasten flach zusammenfallen und wieder aufgehen, aber keine Kippung. Die Perspektive steht als FUNKTION im transform selbst und nicht als `perspective`-Eigenschaft am Elternelement: bei SVG-Kindern ist der Elternteil eine im SVG, und `perspective` und `transform-style` gelten dort nicht. In der Funktionsliste wirkt sie dagegen am Element selbst, ganz ohne 3D-Kontext im Elternbaum. DER FILTER MUSSTE DAFUER WEG. `filter` ist eine Gruppierungseigenschaft: ein Element mit Filter wird in eine eigene, flache Ebene gerastert, und die Perspektive faellt in sich zusammen. Das ist genau die bekannte Falle. Der Zielkasten traegt seinen Schatten deshalb nicht mehr selbst, sondern ueber eine zweite, unbewegte Kopie darunter (.wnetz__kasten--zielschatten) — sichtbar ist davon nur der Schatten, die Kopie selbst ist randlos. GEDREHT WIRD DIE GRUPPE, NICHT DER UMRISS. In der ersten Fassung sass die Drehung am der Kontur, waehrend Symbol und Schrift wie ueberall sonst in .wnetz__symbole und .wnetz__schrift lagen. Zu sehen war dann ein leerer Rahmen, der um eine stehende Schrift kippt — der Kunde hat es als „der Rand fliegt nach innen ein" beschrieben. Kontur, Symbol und beide Zeilen stehen deshalb jetzt in .wnetz__ziel, und nur diese Gruppe dreht sich. -------------------------------------------------------------------------- */ /* ZUM ABLAUF DER DREHUNG, und das ist nachgemessen und nicht Geschmack. Zuerst lag die ganze Bewegung auf cubic-bezier(0.22, 1, 0.36, 1). Diese Kurve legt rund 95 Prozent des Weges in das erste Fuenftel der Zeit: die ersten 180 Grad waren nach 110 ms herum, also nach knapp sieben Bildern bei 60 Hertz. Zu sehen war davon nichts als ein Zucken, danach kroch der Kasten 750 ms lang die letzten Grade zurecht. Genau das hat der Kunde beschrieben („fliegt jetzt einfach … ein"). Die Drehung laeuft deshalb in zwei Abschnitten: 0 bis 85 Prozent der Zeit 0 bis 330 Grad, GLEICHFOERMIG. Eine Umdrehung liest man nur, wenn sie mit gleichbleibender Geschwindigkeit laeuft. 85 bis 100 Prozent die letzten 30 Grad mit der vorgegebenen Kurve cubic-bezier(0.22, 1, 0.36, 1). Sie gibt der Bewegung ihr weiches Einrasten, dort wo man es auch sieht. Die Zeitkurven stehen an den Keyframes selbst; am Element steht deshalb `linear`, sonst ueberschriebe es sie. DIE TEILUNG STAND BIS ZUM 31.08.2026 BEI 72 PROZENT. Mit der auf 1,8 s verdoppelten Dauer waeren daraus 0,50 s fuer die letzten 30 Grad geworden — eine halbe Sekunde, in der sich fast nichts mehr bewegt; die Drehung haette am Ende gehangen. Bei 85 Prozent liegt der gleichfoermige Teil bei 1,53 s (330 Grad, also 216 Grad je Sekunde, gut lesbar) und das Einrasten bei 0,27 s — genau so lang wie vorher. DIE FRUEHERE SKALIERUNG 0.94 -> 1 IST ENTFALLEN. Neben einer lesbaren Umdrehung war sie ein zweites Ereignis im selben Augenblick — der Kunde wollte eines. */ @keyframes wn-drehung { 0% { animation-timing-function: linear; transform: perspective(1200px) rotateX(0deg); } 85% { animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); transform: perspective(1200px) rotateX(330deg); } 100% { transform: perspective(1200px) rotateX(360deg); } } .wnetz[data-bereit] .wnetz__ziel { opacity: 0; transform: perspective(1200px) rotateX(0deg); } .wnetz[data-s3] .wnetz__bild .wnetz__ziel { opacity: 1; transform: none; /* Die Karte ist schon da, bevor sie sich dreht — sonst dreht sich etwas, das man noch gar nicht sieht. 0.22 s waren ein Viertel der alten Drehdauer; seit dem 31.08.2026 dreht sie 1,8 s, das Aufblenden ist damit ein Achtel davon und faellt noch weiter in den Anfang der Bewegung. Das ist richtig so — die Karte soll stehen, bevor sie kippt, nicht waehrenddessen erscheinen. */ transition: opacity 0.22s linear; transition-delay: calc(var(--auf, 0) * var(--wn-takt)); animation: wn-drehung var(--wn-dreh-dauer) linear calc(var(--auf, 0) * var(--wn-takt)) 1 both; } /* Die unbewegte Kopie, die den Schatten traegt. Sie liegt im Markup direkt vor dem Zielkasten, ist randlos und weiss gefuellt; zu sehen ist von ihr nur der Schatten. Waehrend der Drehung steht der Schatten still — das ist richtig so: eine Karte, die sich um ihre Laengsachse dreht, wirft weiter denselben Schatten auf den Grund. */ .wnetz__kasten--zielschatten { stroke: none; } /* Sie blendet nur ein und bewegt sich nicht — weder das translateY der uebrigen Kaesten noch die Drehung. Wuerde sie mitlaufen, waere es kein Schatten mehr, sondern ein zweites Objekt. */ .wnetz[data-bereit] .wnetz__bild .wnetz__kasten--zielschatten { opacity: 0; transform: none; } .wnetz[data-s3] .wnetz__bild .wnetz__kasten--zielschatten { opacity: 1; transform: none; transition: opacity 0.34s linear; transition-delay: calc(var(--auf, 0) * var(--wn-takt)); } /* --- Die Pfeilspitzen ---------------------------------------------------- Ein wird unabhaengig vom Strichmuster gezeichnet: die Spitze staende also fertig am Ende einer Linie, die noch gar nicht dort angekommen ist. Sie wird deshalb eingeblendet, sobald ihr Pfad steht. --wn-spitze-ab ist die Zeit bis dahin; sie steht am selbst, weil sie von Pfeil zu Pfeil verschieden ist. JE STUFE EIN EIGENER MARKER, obwohl beide gleich aussehen: der eine gehoert zu Stufe 1, der andere zu Stufe 3. Ein gemeinsamer muesste sich fuer eine der beiden Zeiten entscheiden — die Spitze kaeme dann entweder zu frueh oder viel zu spaet. -------------------------------------------------------------------------- */ .wnetz[data-bereit] .wnetz__bild marker path { opacity: 0; } /* Die Spitzen der kompakten Anordnung (k1, k3) sind am 03.09.2026 dazugekommen. Ohne sie in dieser Liste blieben die beiden Pfeile auf dem Telefon ohne Spitze stehen — die Regel darueber setzt jede Markerspitze erst einmal auf 0. */ .wnetz[data-s1] #wn-spitze-b1 path, .wnetz[data-s1] #wn-spitze-s1 path, .wnetz[data-s1] #wn-spitze-k1 path, .wnetz[data-s3] #wn-spitze-b3 path, .wnetz[data-s3] #wn-spitze-s3 path, .wnetz[data-s3] #wn-spitze-k3 path { opacity: 1; transition: opacity 0.2s linear var(--wn-spitze-ab); } /* NICHT WUNDERN: getComputedStyle auf diesem Pfad meldet dauerhaft opacity 0. Was in steht, wird nicht selbst gezeichnet, und Chrome loest den Stil dort nicht nach. GEZEICHNET wird trotzdem richtig — nachgemessen am Bildpunkt an der Pfeilspitze: kurz nach dem Start noch weiss, nach Ablauf der Verzoegerung in voller Farbe. Wer hier eine Fehlfunktion vermutet, misst am Bildpunkt und nicht am Stil. */ /* Ueberschrift laeuft ueber das siteweite [data-reveal]. Hier nur kuerzer gefasst, damit sie im selben Takt liegt wie die Grafik. */ .wahl [data-reveal] { transition-duration: 0.4s; } /* Ohne Javascript setzt niemand data-seen — dann muss der Text trotzdem stehen. */ @media (scripting: none) { .wahl [data-reveal] { opacity: 1; transform: none; } } /* --- Ruhebeduerfnis achten ------------------------------------------------ leistungen.js setzt data-bereit dann gar nicht erst und schaltet alle drei Stufen sofort scharf; die Regeln hier sind die zweite Sicherung, falls die Schalter doch gesetzt sind. Kein Einsprung, kein Puls, kein Zeichnen — die Grafik steht fertig da, die gruene Kontur ruhig und ohne Bewegung. ------- */ @media (prefers-reduced-motion: reduce) { .wnetz[data-s1] *, .wnetz[data-s2] *, .wnetz[data-s3] * { transition: none; } .wnetz[data-bereit] .wnetz__bild .wnetz__kasten, .wnetz[data-bereit] .wnetz__bild .wnetz__symbol, .wnetz[data-bereit] .wnetz__schrift text, .wnetz[data-bereit] .wnetz__punkte > g { opacity: 1; transform: none; transition: none; } /* KEINE DREHUNG. Eine volle Umdrehung ist genau die Art Bewegung, die bei Bewegungsempfindlichkeit Beschwerden ausloest. Der Zielkasten blendet stattdessen nur weich ein; die gruene Kontur steht danach ruhig da. Die Regel muss BEIDE Schalter abdecken: `animation: none` allein an data-bereit genuegt nicht, weil die Drehung an data-s3 haengt. */ .wnetz[data-bereit] .wnetz__bild .wnetz__ziel, .wnetz[data-s3] .wnetz__bild .wnetz__ziel { animation: none; opacity: 1; transform: none; transition: none; } .wnetz[data-bereit] .wnetz__zug { stroke-dasharray: none; stroke-dashoffset: 0; transition: none; } .wnetz[data-bereit] .wnetz__bild marker path { opacity: 1; transition: none; } .wahl [data-reveal] { opacity: 1; transform: none; transition: none; } }