/* =========================================================================== ESTERA — STELLENSEITEN Gilt fuer karriere-immobilienberater.html und karriere-backoffice.html. Beide Seiten teilen sich diese Datei vollstaendig; sie unterscheiden sich nur im Text und in der Stellenbezeichnung. HERKUNFT DER MASSE Aufbau, Groessenverhaeltnisse, Abstaende und Bewegung stammen aus der Bauaufnahme von estateanfrage-karriere.de/immobilienberater (gemessen am 29.08.2026 bei 1920 px, siehe Kladde `estate/bericht.md`). Jede Zahl in dieser Datei, die als Kommentar eine Vorlagenzahl nennt, ist dort gemessen — nicht geschaetzt. WAS NICHT VON DORT KOMMT Schrift (dort Figtree, hier Cormorant Garamond wie im ganzen Projekt) und Farbe (dort #336079 / #EBECED / #000000, hier Navy, Weiss, Creme, Gold und Sand aus dem Farbblock von base.css). Uebernommen sind die GROESSENVERHAELTNISSE der Schriftleiter, nicht der Schnitt. UMRECHNUNG DER SCHRIFTGROESSEN Cormorant hat eine x-Hoehe von 0,386 em gegenueber 0,46 em bei einer Grotesk. Damit die optische Groesse erhalten bleibt, sind alle Werte der Vorlage mit 1,19 multipliziert — derselbe Faktor, mit dem base.css im ganzen Projekt rechnet. Die Vorlage ist nicht fluid (sie springt bei 992 px); hier steht wie ueberall im Projekt clamp(), die Endwerte oben und unten treffen aber die gemessenen Stufen. BEWEGUNG — DIESER PUNKT HAT SICH AM 30.08.2026 GEDREHT. Bis dahin stand hier: „Es gibt keine Animation ausser den zwei Laufbaendern. Die Vorlage bewegt nichts weiter — wer hier Scroll-Animationen einbaut, trifft den Charakter nicht." Das galt, solange die Vorlage der Massstab war. Der Kunde hat am 30.08.2026 ausdruecklich das Gegenteil verlangt („viel, viel, viel mehr Animationen ... wirklich besondere Animationen"), und damit tritt der Charakter der Vorlage an dieser einen Stelle hinter den Auftrag zurueck. Er bleibt aber der Massstab fuer das WIE: kein Zoom beim Ueberfahren, pro Abschnitt genau eine tragende Geste, nichts lauter als noetig. Was jetzt hier steht, warum und mit welchen Zahlen: siehe den Abschnitt „Bewegung" am Ende dieser Datei. =========================================================================== */ .stl { /* --- Flaechenfarben --------------------------------------------------- Die Vorlage traegt drei Flaechen, hart gewechselt, ohne Verlauf, ohne Trennlinie, ohne Schatten: #336079 (Leitfarbe), #FFFFFF, #EBECED. Hier: Navy als Leitfarbe, Weiss, Creme. */ --stl-navy: var(--navy-800); /* #102949 */ --stl-weiss: var(--fl-weiss); /* #FFFFFF */ --stl-creme: var(--fl-creme); /* #F7F3F0 — der warme zweite Hellton aus dem Flaechenblock von base.css. Bis zum 30.08.2026 stand hier --paper-cool (#F3F5F8); die beiden Werte, zwischen denen die hellen Abschnitte laufen, muessen dieselben sein, die base.css fuer die Flaechenverlaeufe nennt. */ /* Schrift auf Navy. Reines Weiss fuer Ueberschriften, leicht zurueckgenommen fuer Fliesstext — beides misst gegen #102949 ueber 11:1 und liegt damit weit ueber der Anforderung von 4,5:1. */ --stl-auf-navy: #FFFFFF; --stl-auf-navy-text: rgba(255, 255, 255, 0.86); --stl-auf-navy-line: rgba(255, 255, 255, 0.20); /* --- Container -------------------------------------------------------- Vorlage, gemessen: >=1400 -> 1250 px, 1200-1399 -> 1150, 992-1199 -> 970, <992 -> 750, jeweils gedeckelt auf 100vw - 48 px. Die Stufen stehen weiter unten in Medienabfragen. */ --stl-breite: 1250px; /* --- Abschnittsluft --------------------------------------------------- Regelwert der Vorlage ist 100 px oben und unten (bei 1920, also 5,21 vw). Die uebrigen Werte sind ebenso gemessen. AUSSEN WEITER, INNEN ENGER — 30.08.2026. Der Kunde nennt die beiden Stellenseiten langweilig. Ein messbarer Anteil daran: aussen und innen stand ueberall dasselbe Mass, damit liest sich die Seite als Aufzaehlung, nicht als Gestaltung. Die Abschnittsluft steigt deshalb um Faktor 1,3 (Regelwert 100 -> 130 px bei 1920), die Innenabstaende sinken im Gegenzug (Haken 40 -> 28, Punkt 20 -> 16). Die Vorlagenzahl steht jeweils daneben. */ --stl-luft-130: clamp(56px, 6.77vw, 130px); /* Vorlage 100 (Regelwert) */ --stl-luft-104: clamp(48px, 5.42vw, 104px); /* Vorlage 80 */ --stl-luft-91: clamp(44px, 4.74vw, 91px); /* Vorlage 70 */ --stl-luft-85: clamp(40px, 4.43vw, 85px); /* Vorlage 65 */ --stl-luft-60: clamp(36px, 3.13vw, 60px); /* Kopfbereich, unveraendert */ /* --- Spaltenabstaende, gemessen --------------------------------------- */ --stl-spalt-100: clamp(40px, 5.21vw, 100px); /* Abschnitt 3 */ --stl-spalt-56: clamp(32px, 2.92vw, 56px); /* Abschnitte 9 und 10 */ --stl-spalt-32: clamp(24px, 1.67vw, 32px); /* Abschnitt 6 */ /* --- Schriftleiter ---------------------------------------------------- Links die gemessene Groesse der Vorlage, rechts der Wert hier. 64 px H1 -> bis 4.50rem (72 px) 48 px „Das macht ..." -> bis 3.55rem (57 px) 32 px Abschnittstitel -> bis 2.38rem (38 px) 22 px Listenpunkt -> bis 1.63rem (26 px) 20 px Kachel-/Punkttitel-> bis 1.49rem (24 px) 20 px Fliesstext gross -> bis 1.49rem (24 px) 16 px Fliesstext -> bis 1.19rem (19 px) 14 px Fliesstext klein -> bis 1.04rem (17 px) GROESSERER SPRUNG UEBERSCHRIFT -> FLIESSTEXT, 30.08.2026. Gemessen war der Abstand zwischen Abschnittsueberschrift und Fliesstext hier 38 : 19 px = Faktor 2,0 — genau der Wert der Vorlage (32 : 16). Der Kunde will mehr Unterschied. Die Ueberschriften steigen deshalb, der Fliesstext bleibt, wo er ist (kleiner setzen hiesse Lesbarkeit gegen Wirkung tauschen): grosse Ueberschrift 57 -> 64 px gegen 19 px Fliesstext = 3,4 Abschnittsueberschr. 38 -> 48 px gegen 19 px Fliesstext = 2,5 3,4 ist der Faktor, mit dem die Vorlage bei ihrer groessten Ueberschrift arbeitet (48 px gegen 14 px Fliesstext). */ --stl-t-h1: clamp(1.75rem, 3.75vw, 4.50rem); --stl-t-gross: clamp(2.30rem, 3.33vw, 4.00rem); --stl-t-h2: clamp(1.95rem, 2.50vw, 3.00rem); --stl-t-punkt: clamp(1.35rem, 1.36vw, 1.63rem); --stl-t-titel: clamp(1.25rem, 1.24vw, 1.49rem); --stl-t-gross2: clamp(1.19rem, 1.24vw, 1.49rem); --stl-t-text: clamp(1.06rem, 0.99vw, 1.19rem); /* UNTERGRENZE 16 px STATT 15,2 px — 01.09.2026, Optimierungsbriefing, Abschnitt 19: „kein Fliesstext unter 16 px, Kartenzeilen ≥ 15 px". Dieser Grad traegt die Kastentexte in „Dein Profil" und „Dein System" und die leise Zeile im Abschluss. Bei 1440 lag er auf 15,2 px (die Untergrenze griff, 0,87vw sind dort 12,5 px). Der Deckel steigt im gleichen Verhaeltnis mit, damit die Leiter ihre Stufen behaelt. Vorher: clamp(0.95rem, 0.87vw, 1.04rem) */ --stl-t-klein: clamp(1.00rem, 0.87vw, 1.06rem); } /* Sprungmarke — sichtbar erst beim Antabben. Die Vorlage hat dieselbe Einrichtung („Zum Inhalt springen"), dort unsichtbar positioniert. */ .stl-skip { position: absolute; left: 1rem; top: -4rem; z-index: 200; padding: 0.7rem 1.1rem; background: var(--stl-navy); color: #fff; border-radius: var(--radius-btn); font-size: var(--stl-t-text); transition: top 0.2s var(--ease); } .stl-skip:focus-visible { top: 1rem; } /* --- Container -------------------------------------------------------- */ .stl-inner { width: min(var(--stl-breite), 100% - 48px); margin-inline: auto; } /* --- Abschnitte ------------------------------------------------------- DER FLAECHENRHYTHMUS DER SEITE — 30.08.2026, gemessen. Am 29.08.2026 hatte der Kunde vier Abschnitte von der Leitfarbe auf Weiss gezogen. Danach gemessen: Weiss 70,3 %, dunkel 29,6 %, und nach Band B liefen 1607 px am Stueck hell bis zum Fuss; die laengste helle Strecke ueberhaupt war 2015 px. Genau das meint der Kunde, wenn er die Seite langweilig nennt — der Hell-Dunkel-Wechsel, der die uebrige Website traegt, war weg. Zurueckgedreht wird nicht. Statt dessen wechselt die Seite jetzt siebenmal zwischen hell und dunkel, und die hellen Abschnitte laufen dabei ueber ihre eigene Hoehe von einem Hellton in den anderen: Kopf Video + Navy-Schleier Leuchtdichte 0,04 Was wir bieten Weiss -> Creme 0,89 Band A Fotos auf Creme 0,20 Das macht dich aus Creme -> Weiss 0,89 Band B Fotos auf Navy 0,14 Das erwartet dich Weiss -> Creme 0,86 Abschluss Navy-900 0,02 Fuss Navy-900 (unveraendert) 0,01 Die beiden Laufbaender sind KEINE hellen Streifen: ihre Fotos sind am Bildpunkt gemessen dunkel (0,20 und 0,14 gegen 0,89 der hellen Flaechen). Sie tragen den Wechsel in der Seitenmitte mit, und deshalb laeuft keine helle Strecke laenger als eine Bildschirmhoehe. Die Kanten zwischen Navy und Hell bleiben hart — Entscheidung des Kunden vom 30.08.2026, Begruendung im Verlaufsblock weiter unten. Die Messwerte stehen im Bericht vom 30.08.2026. NACHTRAG 30.08.2026, SPAETER AM TAG — DIE ANTEILE HABEN SICH VERSCHOBEN, und zwar durch die zwei Umbauten, die der Kunde an diesem Tag bestellt hat: das versetzte Raster in „Das macht dich aus" (869 -> 1317 px) und der Kartenstapel in „Das erwartet dich" (1047 -> 1708 px). KEINE Abschnittsfarbe wurde dabei angefasst; die Folge ist trotzdem, dass sich die Anteile aendern, weil die Abschnitte laenger sind. Gemessen an echten Fensterausschnitten (die einzige Methode, bei der `position: sticky` richtig erscheint — eine fullPage-Aufnahme setzt das Fenster auf die volle Seitenhoehe, und dann liegt der Stapel auf einmal oben): vorher nachher Navy 23,5 % 19,1 % Weiss 26,5 % 16,7 % Creme 23,4 % 23,0 % dunkle Bilder 24,5 % 34,9 % <- hier stecken die Karten ---------------------------------- dunkel gesamt 47,9 % 54,0 % hell gesamt 52,1 % 46,0 % Der Anteil an reinem Navy faellt, weil die Seite laenger ist und die Navy-Flaechen (Kopf, Band B, Abschluss, Fuss) gleich gross geblieben sind. Der DUNKLE Anteil steigt trotzdem: die anthrazitfarbenen Karten stehen jetzt ueber 1700 px in der linken Spalte. */ .stl-abs { position: relative; } /* Jede Flaeche setzt ihre eigenen vier Textwerte. Damit tragen dieselben Bausteine (Ueberschrift, Punkt, Symbol, Haarlinie) auf Navy wie auf Weiss, ohne dass irgendwo eine Farbe doppelt gepflegt werden muss. Das ist absichtlich so gebaut: der Kunde hat am 29.08.2026 vier Abschnitte von der Leitfarbe auf Weiss gezogen, und es kann gut sein, dass er einen davon wieder zurueckdreht. Dann reicht der Tausch der Klasse am
. */ .stl-abs--navy { background: var(--stl-navy); color: var(--stl-auf-navy-text); --stl-tx: #FFFFFF; /* 15,4:1 auf Navy */ --stl-tx-weich: rgba(255, 255, 255, 0.86); /* 11,3:1 */ --stl-tx-leise: rgba(255, 255, 255, 0.74); /* 8,3:1 */ --stl-linie: rgba(255, 255, 255, 0.20); --stl-zeichen: var(--sand); /* 7,55:1 auf Navy */ --stl-ziffer: var(--sand); /* 7,54:1 auf Navy */ } /* EIN Tokensatz fuer alle hellen Abschnitte. Bis zum 30.08.2026 gab es --weiss und --creme getrennt; seit die hellen Abschnitte ueber ihre volle Hoehe von einem Hellton in den anderen laufen, gibt es keinen Abschnitt mehr, der nur das eine oder nur das andere ist. Alle Werte sind deshalb gegen den DUNKLEREN der beiden Toene gerechnet, also gegen Creme #F7F3F0 — auf Weiss stehen sie durchweg besser. background-color, NICHT background: die Kurzform wuerde das Verlaufsbild der .fl-*-Klasse aus base.css loeschen. */ .stl-abs--hell { background-color: var(--stl-weiss); color: var(--ink-soft); --stl-tx: var(--navy-800); /* 13,3:1 auf Creme, 15,5:1 auf Weiss */ --stl-tx-weich: var(--ink-soft); /* 5,93:1 / 6,54:1 */ --stl-tx-leise: var(--ink-mute); /* 4,69:1 / 5,20:1 */ --stl-linie: var(--line); /* rgba(16,41,73,0.16) */ --stl-zeichen: var(--gold); /* 3,05:1 — Grafik, nicht Schrift */ /* Die Ziffer ist SCHRIFT und braucht 4,5:1. Sand misst auf Weiss 1,94:1 und faellt damit aus; --gold-text traegt 4,65:1 auf Creme und 5,13:1 auf Weiss und ist im Farbblock von base.css genau dafuer vorgesehen. */ --stl-ziffer: var(--gold-text); } /* =========================================================================== WEICHE FARBUEBERGAENGE — Kundenwunsch 30.08.2026, dritter Anlauf HIER STEHT KEINE EIGENE RECHNUNG MEHR. Die vier Bausteine liegen in base.css (.fl-navy900, .fl-navy800, .fl-creme-nach-weiss, .fl-weiss-nach-creme), diese Datei setzt sie nur ein. WAS DIE ZWEI VERWORFENEN ANLAEUFE FALSCH GEMACHT HABEN. Beide legten eine BLENDE zwischen zwei Abschnitte — erst 96 px, dann 234 px hoch. Der Kunde hat beide verworfen, und die Nachrechnung gibt ihm recht: zwischen Navy und Weiss liegen rund 245 Einheiten, ueber 96 px sind das 2,55 Einheiten je Bildpunkt, ueber 234 px noch 1,05. Der Massstab, den der Kunde nennt, ist der Kasten der FAQ: 22 Einheiten ueber 1100 px, also 0,020 je Bildpunkt. Die zweite Blende war fuenfzigmal steiler. DER WEG, DER TRAEGT: keine Blende. Jeder helle Abschnitt traegt seinen Verlauf ueber die EIGENE volle Hoehe und endet auf der Farbe seiner Nachbarin. Es gibt dann keine Naht, an der etwas weich werden muesste. Auf dieser Seite: Was wir bieten Weiss -> Creme (.fl-weiss-nach-creme) Band A Creme — der Grund beider Nachbarn Das macht dich aus Creme -> Weiss (.fl-creme-nach-weiss) Band B Navy — bleibt, wie es war Das erwartet dich Weiss -> Creme (.fl-weiss-nach-creme) Zwischen Creme (#F7F3F0) und Weiss liegen 15 Einheiten. Ueber 790 bis 1050 px Abschnittshoehe sind das 0,014 bis 0,019 Einheiten je Bildpunkt — im Bereich des FAQ-Kastens und weit unter der Grenze von 0,03. Gemessen am gerenderten Bild, die Werte stehen im Bericht. NAVY GEGEN HELL BEKOMMT GAR KEINEN UEBERGANG. Entscheidung des Kunden vom 30.08.2026. 245 Einheiten sind auf keiner Strecke unauffaellig unterzubringen; dort steht eine saubere Kante. Das betrifft auf diesen Seiten: die Unterkante des Kopfvideos, die vier Kanten der beiden Laufbaender und die Oberkante des Abschlusses. WICHTIG FUER SPAETERE AENDERUNGEN: die hellen Abschnitte duerfen ihre Flaeche nicht mehr ueber die Kurzform `background` setzen — die loescht das Verlaufsbild aus base.css, weil base.css frueher geladen wird. .stl-abs--hell setzt deshalb nur background-color als Rueckfall. =========================================================================== */ /* =========================================================================== KLEINZEILE MIT ZIFFER — 30.08.2026 „Sand als Akzent zurueckholen — Kleinzeilen, Ziffern, feine Trennlinien." Auf der Startseite ist das die Handschrift des Projekts; auf den Stellenseiten fehlte sie fast ganz. Aufbau: Ziffer — Haarstrich — Wort, alles in Versalien und gesperrt wie der .kicker aus base.css. Die Ziffer und der Strich tragen den Akzent (Sand auf Navy 7,54:1, --gold-text auf Weiss 5,13:1 und auf Creme 4,69:1), das Wort steht leise daneben. Sand als Schrift auf Weiss waere 1,94:1 und ist deshalb dort nicht im Einsatz — dafuer steht --gold-text im Farbblock von base.css. =========================================================================== */ .stl-kleinzeile { display: flex; align-items: center; gap: 0.9em; font-family: var(--font-ui); font-weight: 500; font-size: clamp(0.80rem, 0.86vw, 0.95rem); line-height: 1.4; letter-spacing: var(--track-wide); text-transform: uppercase; color: var(--stl-tx-leise); margin: 0 0 clamp(14px, 1.15vw, 22px); } .stl-kleinzeile--mitte { justify-content: center; } .stl-kleinzeile__num { display: inline-flex; align-items: center; gap: 0.9em; flex: none; color: var(--stl-ziffer); font-variant-numeric: tabular-nums; letter-spacing: 0.14em; } /* Der Haarstrich hinter der Ziffer — dieselbe Farbe, halbe Deckkraft. */ .stl-kleinzeile__num::after { content: ''; width: clamp(20px, 1.7vw, 32px); height: 1px; background: currentColor; opacity: 0.6; } /* --- Ueberschriften --------------------------------------------------- Vorlage: Ueberschriften 600 / Zeilenhoehe 1,3 / Sperrung -0,4 px. Cormorant traegt bei diesen Groessen den leichten Schnitt besser; die Sperrung entfaellt, weil sie bei einer Antiqua die Anschluesse zerreisst. */ .stl-h2 { font-family: var(--font-display); font-weight: 400; font-size: var(--stl-t-h2); line-height: 1.18; letter-spacing: -0.004em; color: var(--stl-tx); margin: 0; } .stl-h2--mitte { text-align: center; } /* Unterstrichen wie in der Vorlage (Abschnitt 10). Die Haarlinie steht in Sand: auf Navy misst Sand 7,55:1 und bleibt als Linie sichtbar, ohne die Schrift zu ueberlagern. */ .stl-h2--unterstrichen { text-decoration: underline; text-decoration-thickness: 1px; /* Sand traegt auf Navy (7,55:1), auf Weiss aber nur 1,94:1 — dort waere der Strich praktisch nicht da. Auf hellen Flaechen steht deshalb Gold (3,36:1). Beide Werte stehen im Farbblock von base.css. */ text-decoration-color: var(--gold); text-underline-offset: 0.24em; } .stl-abs--navy .stl-h2--unterstrichen { text-decoration-color: var(--sand); } /* Genau EINE Ueberschrift der Seite ist gross — in der Vorlage 48 px gegenueber 32 px bei allen uebrigen. Das ist der ganze Rhythmus. */ .stl-h2-gross { font-family: var(--font-display); font-weight: 300; font-size: var(--stl-t-gross); line-height: 1.14; letter-spacing: -0.004em; color: var(--stl-tx); text-align: center; margin: 0; max-width: 1092px; /* Feldbreite der Vorlage, gemessen */ margin-inline: auto; } /* =========================================================================== 1 — KOPFBEREICH Vorlage: 816 px hoch bei 1920 (= 42,5 vw), Innenabstand oben 491 px, der Textblock endet 60 px ueber der Unterkante. Text zentriert, unten ausgerichtet. Hier ueber flex-end geloest statt ueber einen festen Innenabstand oben — das Ergebnis ist dasselbe und traegt auch, wenn der Text laenger umbricht. =========================================================================== */ .stl-hero { position: relative; isolation: isolate; min-height: clamp(520px, 42.5vw, 816px); display: flex; align-items: flex-end; justify-content: center; padding-bottom: var(--stl-luft-60); padding-top: calc(var(--header-h) + 2rem); background: var(--navy-900); /* Grundflaeche, wie die Vorlage sie unter das Bild legt (dort #000000) */ overflow: hidden; } .stl-hero__medien { position: absolute; inset: 0; z-index: -2; } /* Beschnitt wie in der Vorlage: cover, Bildmitte nach unten verschoben, damit der Text im unteren Drittel nicht ins Motiv faellt. Vorlage: object-position 50% 89%. Beim Estera-Video liegt der ruhige Teil des Bildes tiefer, deshalb 50% 62%. */ .stl-hero__still, .stl-hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; } /* Das Video liegt UEBER dem Standbild. Solange es laedt, traegt das Bild. */ .stl-hero__video { z-index: 1; } /* Der Schleier. Die Vorlage legt flache 15 % Schwarz auf ein Foto, das schon dunkel ist. Das Estera-Video ist das Gegenteil: Glasfassade, Tageslicht, helle Buerodecke. 15 % haetten die Schrift auf unter 3:1 gedrueckt. DIE WERTE SIND GERECHNET, NICHT GESCHAETZT. Der Kopflos-Browser dekodiert beim Springen im Video kein neues Bild — alle Aufnahmen zeigten dasselbe Standbild. Statt dessen sind 19 echte Einzelbilder aus kar-hero.mp4 (alle 0,5 s ueber die volle Schleife) mit demselben Beschnitt (cover, 50% 62%, 1920 x 816) und diesem Schleier gerechnet und fuer JEDEN Bildpunkt unter jeder Schriftflaeche der Kontrast bestimmt. Der jeweils schlechteste Bildpunkt ueber alle 19 Bilder: Vorzeile (Sand, 17 px) 5,08:1 H1 (weiss, 72 px) 11,16:1 Unterzeile (weiss, 19 px) 10,47:1 Kopfleiste, Menuepunkte 7,4 bis 9,2:1 Wortmarke „ESTERA" 9,01:1 Wortmarke „IMMOBILIEN" (10 px) 4,80:1 Der Kopfleisten-Verlauf aus base.css (.site-header::before) ist dabei mitgerechnet; er traegt die Werte in der oberen Leiste mit. Wer diesen Schleier zurueckdreht, muss beide Rechnungen neu machen. Der Verlauf ist nach unten schwer, weil der Text dort sitzt, und oben nur so kraeftig, wie die Kopfleiste es braucht — dazwischen bleibt das Motiv sichtbar. */ .stl-hero__schleier { position: absolute; inset: 0; z-index: -1; background: linear-gradient(to bottom, rgba(10, 25, 46, 0.58) 0%, rgba(10, 25, 46, 0.50) 26%, rgba(10, 25, 46, 0.62) 46%, rgba(10, 25, 46, 0.79) 60%, rgba(10, 25, 46, 0.85) 80%, rgba(10, 25, 46, 0.88) 100%), linear-gradient(rgba(10, 25, 46, 0.18), rgba(10, 25, 46, 0.18)); } .stl-hero__inner { position: relative; width: min(1036px, 100% - 48px); /* Textblockbreite der Vorlage */ text-align: center; color: #fff; } /* Vorzeile. Vorlage: 18 px / 700, Versalien, keine Sperrung. Hier im Kicker-Schnitt des Projekts — Versalien mit Sperrung, wie ueberall. */ .stl-hero__vor { font-family: var(--font-ui); font-weight: 500; font-size: clamp(0.80rem, 0.94vw, 1.06rem); letter-spacing: var(--track-wide); text-transform: uppercase; color: var(--sand); /* Sand auf dunklem Grund: 7,55:1 */ margin: 0; } .stl-hero__h1 { font-family: var(--font-display); font-weight: 300; font-size: var(--stl-t-h1); line-height: 1.14; letter-spacing: -0.006em; color: #fff; margin: 0.55rem 0 0; /* Vorlage: Vorzeile -> H1 = 35 px */ text-wrap: balance; } .stl-hero__unter { font-size: var(--stl-t-text); line-height: 1.6; color: rgba(255, 255, 255, 0.92); max-width: 62ch; margin: 1.25rem auto 0; /* Vorlage: H1 -> Unterzeile = 20 px */ } .stl-hero__btn { margin-top: 1.9rem; } /* Vorlage: Unterzeile -> Knopf = 30 px */ /* =========================================================================== 2 — WAS WIR BIETEN Vorlage: zwei Spalten 575/575, Abstand 100 px. Innenabstand 65 oben, 100 unten. =========================================================================== */ .stl-bieten { padding: var(--stl-luft-85) 0 var(--stl-luft-130); } .stl-zwei { display: grid; } .stl-zwei > * { min-width: 0; } .stl-zwei--bieten { grid-template-columns: 1fr 1fr; column-gap: var(--stl-spalt-100); } /* Trennlinie unter der Ueberschrift. Vorlage: volle Spaltenbreite, 2 px stark, Feld 52 px hoch. Dort fast schwarz auf der Leitfarbe; hier in der Haarlinienfarbe der jeweiligen Flaeche. FEINE TRENNLINIE STATT BALKEN — 30.08.2026. Aus dem 2 px starken Balken ueber die volle Spaltenbreite wird eine Haarlinie mit einem kurzen Akzentstueck in der Mitte: derselbe Sand- bzw. Goldstrich, den die Startseite an ihren Abschnittsanfaengen fuehrt. */ .stl-trenn { position: relative; height: 1px; width: min(100%, 520px); background: var(--stl-linie); margin: clamp(16px, 1.3vw, 24px) auto clamp(22px, 1.9vw, 36px); } .stl-trenn::before { content: ''; position: absolute; left: 50%; top: -1px; width: clamp(48px, 4.2vw, 80px); height: 3px; transform: translateX(-50%); background: var(--stl-zeichen); } /* Die sechs Punkte. Vorlage: Abstand zwischen den Punkten 40 px, Symbolfeld 40 x 40, Symbol 28 x 28, Abstand Symbol -> Text 12 px, Text 22 px / 600. ZWEI ABWEICHUNGEN, KUNDENWUNSCH VOM 29.08.2026: 1. Die Punkte stehen MITTIG unter der Ueberschrift, nicht linksbuendig. Zentriert wird die LISTE ALS BLOCK (width: fit-content, margin-inline: auto), nicht jede Zeile fuer sich. NACHGEBESSERT AM 30.08.2026: bis dahin war jede Zeile einzeln zentriert. Die sechs Punkte sind unterschiedlich lang, also stand jedes Haus an einer anderen Stelle — bei 1024 px war die Treppe ueber 52 px breit und las sich wie ein Versehen. Als Block zentriert stehen alle Haeuser auf einer Senkrechten, und der Block sitzt weiter mittig unter der Ueberschrift. Beides zusammen geht nicht. 2. Aus dem gefuellten Kreis mit Haken wird ein HAUS als reine Strichzeichnung — dieselbe Handschrift wie die uebrigen Symbole des Projekts. Ohne Fuellung, weil auf Weiss eine Sandflaeche nur 1,94:1 traegt und der Kreis dort ausfranst; die Strichzeichnung in Gold misst 3,36:1 und ist als Grafik damit ausreichend. */ .stl-haken { display: grid; /* Vorlage 40 px. Enger seit dem 30.08.2026 — die Abschnittsluft aussen ist im Gegenzug gestiegen (siehe Farbblock oben). */ gap: clamp(18px, 1.46vw, 28px); width: fit-content; max-width: 100%; margin-inline: auto; } .stl-haken li { display: flex; justify-content: flex-start; align-items: flex-start; gap: 12px; text-align: left; } .stl-haken__zeichen { flex: none; width: 40px; height: 40px; display: grid; place-items: center; color: var(--stl-zeichen); } .stl-haken__zeichen svg { width: 30px; height: 30px; } .stl-haken__text { font-family: var(--font-display); font-weight: 500; font-size: var(--stl-t-punkt); line-height: 1.3; color: var(--stl-tx); padding-top: 0.24em; } /* Das leere Bildfenster rechts — Kundenwunsch vom 29.08.2026. Bewusst LEER: kein Bild, kein Symbol, keine Flaeche, kein Verlauf. Nur eine Haarlinie und ein Radius, damit man sieht, dass hier etwas fehlt. Verhaeltnis 4:5 hochkant; es entspricht ungefaehr der Hoehe der linken Spalte, damit die beiden Spalten zusammen stehen. VERHAELTNIS 1:1 SEIT DEM 30.08.2026. Es war 4:5 hochkant und entsprach damit ungefaehr der Hoehe der linken Spalte. Seit die Punktliste enger steht, ist die linke Spalte kuerzer — ein 4:5-Fenster wuerde den Abschnitt allein in die Laenge ziehen und die helle Strecke bis ans Ende von Band A ueber die Bildschirmhoehe treiben. Quadratisch sitzt es wieder auf der Hoehe der Liste. */ .stl-platz { aspect-ratio: 1 / 1; width: 100%; border: 1px solid var(--stl-linie); border-radius: var(--radius-img); background: none; } /* Fliesstextspalte. Steht seit dem 29.08.2026 auf keiner der beiden Stellenseiten mehr im Markup (an ihrer Stelle das leere Bildfenster), bleibt aber stehen: der Text ist im HTML als Kommentar erhalten, und wer ihn zurueckholt, hat die Gestaltung sofort wieder. Vorlage: 16 px / 400 / 24 px. */ .stl-prosa-w { display: grid; gap: 1.05rem; align-content: start; } .stl-prosa-w p { font-size: var(--stl-t-text); line-height: 1.6; color: var(--stl-tx-weich); } /* =========================================================================== 3 und 5 — DIE ZWEI LAUFBAENDER Gemessene Werte der Vorlage: Band A Hoehe 355 px, 8 Bilder je Satz, Satzbreite 2486 px, Dauer 41 433,33 ms -> 60,0 px/s, linear, endlos, nach links Formatfolge H·H·H·H·Q·H·Q·H, Hochformat 2:3, Querformat 3:2 keine Kantenmaske, harte Kanten am Fensterrand Band B Hoehe 277 px, 7 Bilder je Satz, Satzbreite 2741 px, Dauer 45 683,33 ms -> 60,0 px/s, linear, endlos, nach links Formatfolge Q·6:5·Q·Q·Q·Q·6:5 Kantenmaske linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent) Beide behalten diese Werte auf JEDER Fensterbreite — bei 390 px ist das Band ebenso 355 bzw. 277 px hoch und zeigt nur einen Ausschnitt. Das ist in der Vorlage nachgemessen und hier absichtlich uebernommen. Abstand zwischen den Bildern: 0 px. Sie stossen ohne Fuge aneinander. Kein Radius, kein Rahmen, kein Schatten. Reines CSS — laeuft also auch ohne Javascript, genau wie in der Vorlage. =========================================================================== */ .stl-band { position: relative; width: 100%; overflow: hidden; line-height: 0; /* sonst setzt der Zeilenkasten eine Fuge */ } /* Grundflaeche von Band A seit dem 30.08.2026 Creme statt Weiss — der Abschnitt darueber ist Creme, damit gibt es dort keine Kante. Sichtbar ist der Grund ohnehin nie: die Spur ist drei Satzbreiten (7455 px) breit und deckt jede Fensterbreite lueckenlos. */ .stl-band--a { --stl-band-h: 355px; --stl-band-dauer: 41.4333s; background: var(--fl-creme); } .stl-band--b { --stl-band-h: 277px; --stl-band-dauer: 45.6833s; background: var(--stl-navy); } /* Kantenmaske nur bei B. Die Vorlage setzt dort mask-image: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent) — die aeusseren 20 % links und rechts blenden ins Blau aus. HIER ALS AUFLIEGENDER VERLAUF STATT ALS MASKE, und das aus zwei Gruenden. Erstens duerfte die Maske nicht auf .stl-band__spur liegen: die ist drei Satzbreiten breit (ueber 8000 px) und wird verschoben, der Verlauf zoege also mit dem Bild mit statt am Fensterrand zu stehen. Zweitens duerfte sie auch nicht auf dem Kasten liegen: der traegt die Navy-Flaeche, und die wuerde an den Kanten mit weggemaskt — dort schiene dann das weisse Papier durch. Ein Verlauf von Navy nach durchsichtig ueber demselben Navy-Grund sieht Bildpunkt fuer Bildpunkt genauso aus und hat keines der beiden Probleme. */ .stl-band--b::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, var(--stl-navy) 0%, rgba(16, 41, 73, 0) 20%, rgba(16, 41, 73, 0) 80%, var(--stl-navy) 100%); } /* Drei Saetze liegen im Markup; die Spur ist damit genau drei Satzbreiten breit. Ein Umlauf um -33,3333 % ist folglich exakt EINE Satzbreite — der Sprung am Ende ist unsichtbar. */ .stl-band__spur { display: flex; width: max-content; will-change: transform; animation: stl-lauf var(--stl-band-dauer) linear infinite; } .stl-band__satz { display: flex; flex: none; } /* DIE PHASE IST AM 30.08.2026 UM EINEN SATZ VERSCHOBEN WORDEN — von 0 → −33,3333 % auf −33,3333 % → −66,6667 %. Weg, Dauer und Tempo sind dabei Zahl für Zahl dieselben (eine Satzbreite in derselben Zeit, also unverändert 60,0 px/s), und weil alle drei Sätze wortgleiche Kopien sind, ist auch das Bild in jedem Augenblick dasselbe. WOZU DANN? Der Anlauf des Bandes (siehe Abschnitt „Bewegung" weiter unten) schiebt die Sätze in den ersten 1,6 s um 48 px gegen die Laufrichtung. In der alten Phase stand die Spur am Anfang bündig am linken Rand des Kastens — die 48 px hätten dort eine sichtbare Lücke aufgerissen. In der neuen Phase liegt vor UND hinter dem Fenster immer mindestens eine volle Satzbreite (2486 bzw. 2741 px) Reserve; 48 px davon aufzubrauchen ist folgenlos. Nachgerechnet für 1920 px Fenster: die schmalste Deckung ist 2486 − 48 = 2438 px und damit größer als jedes geprüfte Fenster. */ @keyframes stl-lauf { from { transform: translate3d(-33.33333%, 0, 0); } to { transform: translate3d(-66.66667%, 0, 0); } } .stl-band__bild { display: block; height: var(--stl-band-h); flex: none; object-fit: cover; border-radius: 0; } /* Bildbreiten aus Hoehe und Verhaeltnis, wie in der Vorlage: A hoch 2:3 -> 355 * 2/3 = 236,67 px (Vorlage: 237) A quer 3:2 -> 355 * 3/2 = 532,50 px (Vorlage: 533) B quer 3:2 -> 277 * 3/2 = 415,50 px (Vorlage: 416) B 6:5 -> 277 * 6/5 = 332,40 px (Vorlage: 331) */ .stl-band__bild--hoch { width: calc(var(--stl-band-h) * 2 / 3); } .stl-band__bild--quer { width: calc(var(--stl-band-h) * 3 / 2); } .stl-band__bild--sechsfuenf { width: calc(var(--stl-band-h) * 6 / 5); } /* =========================================================================== 4 — DAS MACHT DICH AUS Vorlage: zwei Abschnitte. Der erste traegt nur die Ueberschrift (48 px, zentriert, 70 px Luft darueber, 0 darunter), der zweite ein gleichmaessiges Raster (3 Spalten a 395 px, Abstand 32 px, 100 px Luft darunter). Hier zu einem Abschnitt zusammengefasst; die Luft ist die der Vorlage, DAS RASTER NICHT MEHR — es ist seit dem 30.08.2026 versetzt und traegt sechs verschieden grosse Kaesten. Begruendung und Rechnung stehen unten bei .stl-aus. Er faengt auf Creme an — der Farbe, auf der „Was wir bieten" ueber Band A hinweg endet — und laeuft ueber seine volle Hoehe nach Weiss, auf dem Band B und „Das erwartet dich" ansetzen (.fl-creme-nach-weiss). =========================================================================== */ .stl-macht { padding: var(--stl-luft-91) 0 var(--stl-luft-130); } .stl-macht__lead { text-align: center; font-size: var(--stl-t-gross2); line-height: 1.5; color: var(--stl-tx-weich); margin: 0.9rem auto 0; max-width: 60ch; } /* --------------------------------------------------------------------------- DAS VERSETZTE RASTER — 30.08.2026, KUNDENWUNSCH „Ich will, dass die Kaesten immer unterschiedlich gross sind. Also einer ist mal laenglicher, einer ist mal hoeher, einer ist mal breiter." Bis heute standen die sechs Merkmale in einem gleichmaessigen 3 x 2-Raster (Vorlage: drei Spalten a 395 px, Abstand 32 px). Das ist ersatzlos raus, ebenso die Klassen .stl-raster / .stl-kachel und ihre Strichsymbole. An ihre Stelle tritt .stl-aus mit sechs verschieden grossen Kaesten, und je Kasten von oben nach unten: Ueberschrift, Grafik, Text. DIE KOMPOSITION IST GERECHNET, NICHT GEWUERFELT Zwoelf Spalten, neun Zeilen. Die zwoelf Spalten sind in DREI Buendel geteilt — 4 | 5 | 3 —, und jedes Buendel traegt genau zwei Kaesten: Buendel Breite oben unten Spalte 1– 4 4/12 5 Zeilen 4 Zeilen Spalte 5– 9 5/12 4 Zeilen 5 Zeilen Spalte 10–12 3/12 4 Zeilen 5 Zeilen Jedes Buendel ist damit 9 Zeilen hoch — dieselbe Hoehe fuer alle drei. GENAU DARAN haengt, dass keine Luecke entsteht: die Flaeche ist restlos gedeckt, obwohl kein Kasten so gross ist wie ein anderer. Die Trennstelle liegt in jedem Buendel woanders (nach 5, nach 4, nach 4 Zeilen) — daher der Versatz. Sechs verschiedene Groessen, bei 1920 px gerechnet (Container 1250, Spalte 73,8 px, Fuge 24 px, Zeile 66 px): 1 400 x 418 4 Spalten, 5 Zeilen hoch 2 507 x 330 5 Spalten, 4 Zeilen laenglich 3 294 x 330 3 Spalten, 4 Zeilen der kleinste 4 400 x 330 4 Spalten, 4 Zeilen breit 5 507 x 418 5 Spalten, 5 Zeilen der groesste 6 294 x 418 3 Spalten, 5 Zeilen schmal und hoch GERECHNET WIRD IN RASTEREINHEITEN, NICHT IN BILDPUNKTEN: die Spalten sind `1fr`, die Zeilen `minmax(--aus-einheit, auto)`. Braucht ein Text mehr Platz als gedacht, waechst die Zeile — und weil alle drei Buendel dieselben Zeilen benutzen, waechst die Nachbarschaft mit. Es kann also auch dann keine Luecke aufreissen, und die Rechnung traegt bei jeder Breite. WELCHER KASTEN IN WELCHES FELD KOMMT, ist nach der Textmenge vergeben und nachgerechnet (Zeichen je Zeile aus Feldbreite / mittlerer Zeichenbreite): die laengsten Ueberschriften (3 und 6, je ueber 60 Zeichen) stehen in den schmalen Feldern und brauchen dort drei Zeilen — deshalb sind genau diese beiden Felder die hoeheren ihres Buendels. Der laengste Text (4) sitzt im breiten Feld, wo er zwei Zeilen braucht statt vier. --------------------------------------------------------------------------- */ .stl-aus { /* Zeilenhoehe und Fuge. Die Fuge ist enger als die 32 px der Vorlage: bei sechs verschieden grossen Kaesten traegt der Versatz die Gliederung, da braucht es keine breiten Gassen dazu. */ --aus-einheit: clamp(54px, 3.44vw, 66px); --aus-fuge: clamp(16px, 1.25vw, 24px); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: minmax(var(--aus-einheit), auto); gap: var(--aus-fuge); margin: clamp(34px, 3.0vw, 58px) 0 0; padding: 0; list-style: none; } .stl-aus__kasten:nth-child(1) { grid-column: 1 / span 4; grid-row: 1 / span 5; } .stl-aus__kasten:nth-child(2) { grid-column: 5 / span 5; grid-row: 1 / span 4; } .stl-aus__kasten:nth-child(3) { grid-column: 10 / span 3; grid-row: 1 / span 4; } .stl-aus__kasten:nth-child(4) { grid-column: 1 / span 4; grid-row: 6 / span 4; } .stl-aus__kasten:nth-child(5) { grid-column: 5 / span 5; grid-row: 5 / span 5; } .stl-aus__kasten:nth-child(6) { grid-column: 10 / span 3; grid-row: 5 / span 5; } /* Der Kasten selbst. Handschrift des Projekts: feine Linie statt Schatten, grosszuegiger Radius, kein Kasten, der schwebt. DIE FLAECHE ist ein Hauch Sand auf dem, was der Abschnitt gerade zeigt (rgba(217,180,133,0.05)). Sie ist ABSICHTLICH nicht in einer festen Farbe gesetzt: der Abschnitt laeuft ueber seine Hoehe von Creme nach Weiss, ein fester Ton waere oben zu hell und unten zu dunkel. Der Schleier legt sich stattdessen auf beide und waermt sie gleich stark an — ueber Weiss #FDFBF9, ueber Creme #F6F0EB, also 4 bzw. 5 Einheiten. Das liegt weit unter der Verlaufsgrenze von 0,03 Einheiten je Bildpunkt und aendert an den Kontrasten nichts Messbares (nachgerechnet: Fliesstext 5,84:1 statt 5,93:1). */ .stl-aus__kasten { display: flex; flex-direction: column; align-items: center; text-align: center; min-width: 0; padding: clamp(18px, 1.45vw, 26px) clamp(18px, 1.55vw, 28px); border: 1px solid var(--stl-linie); border-radius: 14px; background: rgba(217, 180, 133, 0.05); box-shadow: none; transition: border-color 0.45s var(--ease); } /* Beim Ueberfahren wechselt nur die Linie ins Gold. Keine Flaeche, kein Schatten, kein Zoom — der Massstab dafuer steht im Bewegungsblock. */ .stl-aus__kasten:hover, .stl-aus__kasten:focus-within { border-color: rgba(168, 135, 79, 0.45); } .stl-aus__titel { font-family: var(--font-display); font-weight: 500; font-size: var(--stl-t-titel); line-height: 1.24; color: var(--stl-tx); margin: 0; text-wrap: balance; } /* Der Haarstrich zwischen Ueberschrift und Grafik. Er traegt denselben Akzent wie die Kleinzeilen (Gold auf hell) und ist reine Grafik, keine Schrift — 3,05:1 genuegt dafuer. ZWEI ELEMENTE, UND DAS IST NOETIG: die Huelle traegt den Eintritt, der ::before-Strich das Ueberfahren. Laegen beide auf einem Element, wuerde der Endzustand der Animation (`both`) den Hover-transform dauerhaft ueberschreiben — derselbe Grund wie bei Grafik und Bildfeld. */ .stl-aus__strich { display: block; flex: none; width: clamp(26px, 2.2vw, 38px); height: 1px; margin: clamp(10px, 0.9vw, 15px) 0 clamp(12px, 1.1vw, 18px); } .stl-aus__strich::before { content: ''; display: block; width: 100%; height: 1px; background: var(--stl-zeichen); transform-origin: 50% 50%; transition: transform 0.45s var(--ease); } .stl-aus__kasten:hover .stl-aus__strich::before, .stl-aus__kasten:focus-within .stl-aus__strich::before { transform: scaleX(1.75); } /* DIE GRAFIK NIMMT SICH, WAS UEBRIG BLEIBT. `flex: 1 1 auto` gibt ihr die Resthoehe des Kastens; weil die Kaesten verschieden hoch sind, ist auch die Grafik in jedem Kasten anders gross — von rund 100 px im kleinsten bis rund 220 px im groessten. Das ist kein Nebeneffekt, sondern gewollt: eine ueberall gleich grosse Grafik haette das versetzte Raster wieder eingeebnet. Die Bilder sind quadratisch; `max-height` und `max-width` halten sie in ihrem Feld, ohne sie zu verzerren. */ .stl-aus__bild { /* `flex-basis: 0` UND NICHT `auto` — das ist der Unterschied zwischen einem Raster, das aufgeht, und einem, das sich selbst aufblaeht. Mit `auto` geht die EIGENGROESSE des Bildes in die Mindesthoehe des Kastens ein: das sind 800 Bildpunkte, gedeckelt auf max-width, also rund 270. Jeder Kasten waere damit mindestens 270 px hoch, bevor ueberhaupt Text darin steht, und das versetzte Raster waere ein Vielfaches zu hoch (gemessen: 1105 statt 824 px Rasterhoehe). Mit `0` zaehlt nur die Mindesthoehe unten. Im fertigen Satz ist die Kastenhoehe dann bekannt, `max-height: 100 %` greift, und das Bild wird auf das Feld gerechnet, statt es zu bestimmen. */ flex: 1 1 0; min-height: clamp(96px, 6.4vw, 122px); min-width: 0; width: 100%; margin: 0; /* Traeger fuer das Bild, siehe naechsten Block. */ position: relative; } /* DAS BILD HAENGT ABSOLUT IM FELD, und auch das ist kein Schoenheitsfehler. Auf dem Weg ueber `height: 100 %` blieb das Bild in flachen Kaesten bei seinen vollen 272 px stehen und ragte unten heraus (gemessen: Feld 104, Bild 272) — die Prozentangabe fand keine feste Bezugshoehe, weil sie durch zwei Zwischenkaesten (figure -> picture -> img) hindurch musste. Absolut gesetzt hat durch `inset: 0` immer eine feste Hoehe, `max-height: 100 %` greift damit zuverlaessig, und das Bild bleibt in jedem Kasten in seinem Feld. Nebenbei zaehlt es dann gar nicht mehr in die Mindesthoehe des Kastens hinein. */ .stl-aus__bild picture { position: absolute; inset: 0; display: block; } /* EIN QUADRATISCHES FELD, UND DAS BILD LIEGT DARIN — 30.08.2026. DIE SECHS GRAFIKEN SIND NICHT GLEICH FORMATIG. Geliefert wurden drei Querformate (1536 x 1024, 1536 x 1024, 1374 x 1145), zwei Hochformate (je 1024 x 1536) und ein fast quadratisches (1312 x 1199). Laesst man jedes Bild sein eigenes Feld fuellen, sind die sechs Symbole im Raster verschieden gross — ein Hochformat waere halb so breit wie ein Querformat daneben. Deshalb bekommt jedes Bild ein QUADRATISCHES Feld (aspect-ratio 1, Seite = Hoehe des Bildfeldes, gedeckelt auf 17 rem) und liegt mit `object-fit: contain` darin. Kein `cover` — das wuerde beschneiden, und die Symbole sind freigestellt, da faellt jeder Beschnitt auf. Ergebnis: alle sechs wirken gleich gross, obwohl die Dateien es nicht sind, und keines ist verzerrt oder angeschnitten. ABSOLUT GESETZT, mit `inset: 0` und `margin: auto`, und das ist kein Schoenheitsfehler: auf dem Weg ueber `height: 100 %` im Fluss blieb das Bild in flachen Kaesten bei seiner vollen Groesse stehen und ragte unten heraus (gemessen: Feld 104, Bild 272) — die Prozentangabe fand keine feste Bezugshoehe, weil sie durch zwei Zwischenkaesten hindurch musste. Gegen den festen Kasten von (inset: 0) gibt es diesen Ring nicht. */ .stl-aus__bild img { position: absolute; inset: 0; margin: auto; height: min(100%, 17rem); width: auto; max-width: 100%; aspect-ratio: 1 / 1; object-fit: contain; } /* HIER STAND DIE EINE REGEL, DIE ALLE SECHS GLEICH BEWEGTE — bis zum 31.08.2026: `translateY(-6px) rotate(-1.8deg)` auf dem ganzen Bild beim Ueberfahren, dazu eine `transition` darauf. GENAU DAS HAT DER KUNDE BEANSTANDET: „Heute bewegen sie sich nur als Ganzes. Ich will, dass das Symbol selbst etwas tut." An ihre Stelle treten sechs eigene Gesten — der Sand rieselt, der Hut hebt ab, das Schloss schliesst, die Waage pendelt ein, der Haken zeichnet sich, die zweite Sprechblase kommt nach. Sie stehen im Bewegungsabschnitt weiter unten in dieser Datei, jede mit ihrer Herleitung. Die Regel ist ERSATZLOS raus und nicht etwa zusaetzlich zu den neuen Gesten stehen geblieben: das ganze Bild zu kippen, waehrend sich ein Teil darin bewegt, waeren zwei Bewegungen zugleich. Der Kunde will Eleganz, keinen Jahrmarkt. */ .stl-aus__text { margin: clamp(12px, 1.05vw, 18px) 0 0; font-size: var(--stl-t-klein); line-height: 1.55; color: var(--stl-tx-weich); text-wrap: pretty; } /* =========================================================================== 6 — DAS ERWARTET DICH Vorlage: weisse Flaeche, zwei Spalten 597/597, Abstand 56 px. Links Ueberschrift linksbuendig, darunter eine Liste mit Symbol 39 x 39, Punktueberschrift 20 px / 600 und Punkttext 16 px, zwischen den Punkten duenne Trennlinien. Rechts zwei Bilder 597 x 355, direkt uebereinander OHNE Abstand. DIE LISTE IST SEIT DEM 30.08.2026 EIN KARTENSTAPEL (Kundenwunsch). Die Zweiteilung, die Spaltenbreiten und das Bildfeld rechts bleiben, wie sie waren; an ihre Stelle trat .stl-stapel (30.08.2026), dann die Karten ohne Stapel (31.08.2026 vormittags) und jetzt .stl-folge — eine reine Schrittliste ohne Flaeche. Herleitung unten bei .stl-folge. Vorlage: Abschnitt 8 (79 px leer) + Abschnitt 9 (30 oben) = 109 oben, 80 unten. =========================================================================== */ /* Oben 104, unten 91 — als einziger Abschnitt WENIGER als der Regelwert von 130. Die Vorlage steht hier bei 109 oben / 80 unten; auch mit 104/91 ist der Abschnitt noch weiter als dort. DIE BEGRUENDUNG DAFUER HAT SICH AM 30.08.2026 GEDREHT. Bis dahin stand hier: der Abschnitt sei der laengste helle der Seite und muesse unter einer Bildschirmhoehe bleiben. Mit dem Kartenstapel ist er 1708 px hoch und damit deutlich darueber — aber er ist auch kein heller Abschnitt mehr: ueber die ganze Strecke steht links ein Stapel anthrazitfarbener Karten. Nachgemessen an echten Fensterausschnitten, mit sichtbarem Stapel: vorher nachher dunkel 47,9 % 54,0 % hell 52,1 % 46,0 % Die Seite ist also nicht heller geworden, sondern dunkler. Die enge Luft bleibt trotzdem: der Abschnitt ist ohnehin der laengste der Seite, und 130 px oben und unten wuerden ihn ohne Gewinn weiter strecken. */ .stl-erwartet { padding: var(--stl-luft-104) 0 var(--stl-luft-91); } /* MITTIG STATT OBEN BUENDIG — 31.08.2026. Mit den Karten ist die linke Spalte deutlich kuerzer geworden als das Bild rechts (gemessen bei 1440 px: 575 gegen 718 px). Oben buendig blieben darunter rund 140 px Loch, und das las sich wie ein Fehler. Mittig sitzt die Schrittliste auf der Hoehe des Bildes und der Abschnitt steht ruhig. */ .stl-zwei--erwartet { grid-template-columns: 1fr 1fr; column-gap: var(--stl-spalt-56); align-items: center; } /* --------------------------------------------------------------------------- DIE SCHRITTLISTE — 31.08.2026, KUNDENWUNSCH: DIE KAESTEN SIND WEG „Bei der Section ‚Dein Einstieg, das erwartet dich' musst du die Kaesten wegmachen. Das Bild rechts bleibt, die Kaesten sollen aber weg sein, und dann soll es genauso sein wie bei ‚Unser Ablauf', einfach nur ohne Kaesten." GEBAUT NACH assets/css/ablauf.css IN SEINER FASSUNG VOM 31.08.2026 (.abl__folge / .abl__stufe / .abl__stufe-nr / -titel / -text). Jene Datei ist dafuer nur GELESEN worden, nicht veraendert — an ihr arbeitet ein anderer. Uebernommen sind Aufbau und Massverhaeltnisse, nicht die Klassennamen: die Stellenseiten haben ihren eigenen Namensraum. WAS AN EINEM TAG ZWEIMAL GEFALLEN IST Stand 30.08.2026 Karten, die sich beim Rollen stapelten und die vorige zu 90 % ueberdeckten Vormittag 31.08. der Stapel raus, die Karten blieben und standen schlicht untereinander jetzt auch die Karten raus Ersatzlos entfallen sind damit .stl-stapel, .stl-halt und die ganze Familie .stl-karte* — Kartenverlauf (#1E222D nach #2E3643), Rahmen, 14 px Radius, zwei Schattenlagen, das Symbolfeld mit seiner Strichzeichnung und die feste Mindesthoehe. Es steht keine Flaeche mehr unter den Schritten. WAS STATTDESSEN DA IST: Nummer, Titel, Satz, dazwischen eine Haarlinie. Nach dem letzten Schritt steht keine — eine Linie am Ende der Liste wuerde etwas abtrennen, das nicht mehr kommt. Dieselbe Regel wie im Ablauf. DAS BILD RECHTS BLEIBT, wo es war (.stl-bilder, Verhaeltnis 597 : 710). Es klebt weiterhin; die linke Spalte ist auch als Liste noch die hoehere. Es haengt an [data-stl-js] und steht ohne Javascript und bei ruhiger Darstellung still. DIE GROESSEN SIND KLEINER ALS IM ABLAUF, und das mit Absicht: dort steht die Liste in einer halben Spalte von rund 700 px, hier in einer von rund 600 px, und hier sollen UEBERSCHRIFT UND ALLE SCHRITTE BEI 1440 x 900 ZUSAMMEN INS FENSTER passen. Gemessen bei 1440 px: Ablauf (Startseite) hier Nummer 22,2 px 16,7 px Titel 28,1 px 21,0 px Satz 21,6 px 15,7 px 15,7 px Fliesstext liegt ueber der Untergrenze von 14 px, die fuer diesen Umbau ausdruecklich gesetzt war. Die clamp-Untergrenzen (0,94 rem = 15,04 px) fallen nirgends darunter. DIE FARBEN sind die der Seite, mit EINER Ausnahme: die Ziffer traegt #8A5A20 und nicht --stl-zeichen. --stl-zeichen ist auf hellem Grund das Gold mit 3,05:1 — das genuegt fuer Grafik, aber nicht fuer Schrift. Der Bronzeton ist derselbe, den ablauf.css fuer dieselbe Ziffer benutzt (dort mit 5,41:1 vermerkt); er ist von dort uebernommen, damit die beiden Listen auch farblich als dieselbe Sache gelesen werden. --------------------------------------------------------------------------- */ .stl-erwartet { --stl-erw-nr: clamp(0.95rem, 1.16vw, 1.16rem); --stl-erw-titel: clamp(1.12rem, 1.46vw, 1.46rem); /* UNTERGRENZE 16 px — 01.09.2026, Optimierungsbriefing, Abschnitt 19 („kein Fliesstext unter 16 px"). Bei 1440 stand der Satz auf 15,7 px. Der Deckel bleibt: die Bedingung „alle Stufen bei 1440 x 900 im Fenster" haengt an der Zeilenzahl, nicht an 0,3 px Grad. Vorher: clamp(0.94rem, 1.09vw, 1.09rem) */ --stl-erw-satz: clamp(1.00rem, 1.09vw, 1.09rem); --stl-erw-bronze: #8A5A20; } .stl-folge { display: grid; align-content: start; /* MEHR LUFT ZUR UEBERSCHRIFT — 31.08.2026, Kundenwunsch: „zwischen ‚Das erwartet dich' und Punkt Nummer 1 muss ein bisschen mehr Abstand sein". 28 -> 52 px am oberen Deckel, unten 18 -> 32 px. Der Abstand ist der einzige geaenderte Wert; Schriftgrade, Ziffern und die Abstaende ZWISCHEN den Stufen bleiben unberuehrt. */ margin: clamp(32px, 2.9vw, 52px) 0 0; padding: 0; list-style: none; } .stl-stufe { display: grid; grid-template-columns: clamp(2.0rem, 2.7vw, 2.6rem) minmax(0, 1fr); column-gap: clamp(0.7rem, 1.15vw, 1.15rem); align-items: start; /* HAARLINIEN ENTFERNT 31.08.2026 — Kundenwunsch, wortgleich fuer den Ablauf der Startseite und fuer hier: zwischen den Punkten sollen keine Trennstriche stehen. Ohne sie muss die FUGE trennen, deshalb mehr Polster als in der Linienfassung — 1,95vw statt 1,30vw, dieselbe Zahl wie in ablauf.css (nur gelesen). Die Ziffer uebernimmt links die Gliederung, die vorher die Linie geleistet hat. DER DECKEL IST GERECHNET UND NICHT GEGRIFFEN. Die Bedingung bleibt: Ueberschrift und alle Schritte stehen bei 1440 x 900 gleichzeitig im Fenster. Jeder Punkt Polster zaehlt darin achtfach (vier Fugen, zwei Seiten, fuenf Schritte). Mit 1,4rem misst der Block bei 1440 px 642 px gegen 900 px Fensterhoehe — 258 px Reserve, genug auch dann, wenn eine Zeile einmal umbricht. Die untere Schranke 0,95rem bleibt: darunter liefen die Zeilen ohne Linien zu einem Block zusammen. */ padding-block: clamp(0.95rem, 1.95vw, 1.4rem); } /* Der erste Schritt braucht oben kein Polster — die Ueberschrift darueber bringt ihren eigenen Abstand mit. */ .stl-stufe:first-child { padding-top: 0; } .stl-stufe:last-child { padding-bottom: 0; } /* OHNE ZIFFERNSPALTE — Back-Office-Seite. Deren vier Punkte sind keine Reihenfolge (der vierte ist „Persoenliche Begleitung" und beschreibt keinen Schritt); eine Nummerierung wuerde dort einen Ablauf behaupten, den der Wording-Master nicht hergibt. Die Entscheidung stammt aus einem frueheren Durchgang und bleibt. Ohne Ziffer faellt auch die Spalte weg — eine leere Spalte waere nur eine Einrueckung ohne Grund. */ .stl-folge--ohne-nr .stl-stufe { grid-template-columns: minmax(0, 1fr); } .stl-stufe__nr { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: var(--stl-erw-nr); line-height: 1.28; /* auf die Grundlinie des Titels */ font-variant-numeric: lining-nums tabular-nums; letter-spacing: 0.06em; color: var(--stl-erw-bronze); } .stl-stufe__wort { min-width: 0; } /* HALBFETT STATT MAGER — KUNDENWUNSCH 04.09.2026, woertlich: „Bei ‚Onboarding mit System‘ / ‚Wir überlassen deine Entwicklung nicht dem Zufall‘: Die einzelnen Punkte, also ‚Orientierung‘, ‚Produkt- und Prozesswissen‘, ‚Gesprächssystem‘ und so weiter, musst du dick machen. Die Begriffe sind einfach nur dick, damit sie sich hervorheben, und dann folgt der Text, der sie erklaert." AM MARKUP WAR NICHTS ZU TRENNEN. Schlagwort und Erklaerung stehen auf beiden Stellenseiten schon in getrennten Elementen —

und

— und nicht in einem gemeinsamen Textknoten. Es kam also weder ein noch ein noch eine neue Klasse dazu; geaendert hat sich genau ein Wert. 500 UND NICHT MEHR. Das ist das Gewicht, das dieses Projekt fuer Hervorhebungen in der Antiqua schon fuehrt: in warum.css steht `.wi__band-text b { font-weight: 500 }`, in base.css tragen die Ueberschriften dieselbe 500, und auch in dieser Datei ist 500 der schwerste vorkommende Wert. 600 oder 700 waeren ein neues Gewicht. Cormorant Garamond 500 liegt als eigene Schriftdatei bei (assets/fonts/CormorantGaramond-500-latin.woff2, in fonts.css angemeldet) — der Browser rechnet also nichts kuenstlich fett, sondern nimmt den echten Schnitt. Der erklaerende Satz darunter bleibt unangetastet auf 400 in der Grotesk; der Abstand von zwei Gewichtsstufen ist der Kontrast, den der Kunde meint. Betroffen sind beide Stellenseiten (fuenf Stufen auf karriere-immobilienberater.html, vier auf karriere-backoffice.html) und ausschliesslich der Onboarding-Abschnitt — .stl-stufe kommt auf keiner der beiden Seiten ein zweites Mal vor (nachgezaehlt). Vorher: font-weight: 300. */ .stl-stufe__titel { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: var(--stl-erw-titel); line-height: 1.14; letter-spacing: -0.004em; color: var(--stl-tx); text-wrap: balance; } .stl-stufe__text { margin: clamp(0.3rem, 0.5vw, 0.5rem) 0 0; font-family: var(--font-ui); font-weight: 400; font-size: var(--stl-erw-satz); line-height: 1.5; color: var(--stl-tx-weich); text-wrap: pretty; max-width: 44em; } /* .stl-erwartet__schluss IST AM 31.08.2026 ENTFALLEN — mit der Zeile „Klare Prozesse. Echte Hilfe. Du kannst wachsen.", die der Kunde ersatzlos hat streichen lassen. Der Abschnitt endet jetzt mit dem letzten Schritt. */ /* Die Vorlage stapelt hier zwei Bilder ohne Fuge (masonry-horizontal --zero-vertical, je 597 x 355). Seit dem 29.08.2026 steht auf Kundenwunsch nur EINES da, an der Stelle des oberen, und fuellt die Hoehe beider zusammen: 597 x 710. Das Raster bleibt, damit ein zweites Bild ohne Umbau wieder daruntergesetzt werden koennte. */ .stl-bilder { display: grid; gap: 0; line-height: 0; } /* DAS BILDFELD KLEBT SEIT DEM 31.08.2026 NICHT MEHR. Es klebte seit dem 30.08.2026, und der Grund stand dabei: links stapelten sich fuenf Karten ueber eine vielfache Hoehe, ohne Kleben waere das Bild schon nach der zweiten Karte aus dem Bild gelaufen. Der Stapel ist raus, die Karten sind raus, und die linke Spalte ist jetzt KUERZER als das Bild (gemessen bei 1440 px: 575 gegen 718 px). Damit laeuft nichts mehr weg, und ein `sticky` haette keine Aufgabe mehr — ausser einer Bewegung beim Rollen, die der Kunde an diesem Abschnitt ausdruecklich nicht mehr will („ohne Scrollanimation"). Das Bildfeld steht deshalb einfach da. An diesem Abschnitt haengt jetzt keine einzige Regel mehr am Rollweg. --stl-klebe wird damit nirgends mehr benutzt und ist bei .stl-erwartet ebenfalls entfallen. */ /* height: auto ist Pflicht, nicht Kosmetik. Die Bilder tragen width- und height-Attribute (gegen Layoutsprünge beim Nachladen). Diese Attribute sind Darstellungshinweise und setzen eine echte CSS-Hoehe — solange die steht, bleibt aspect-ratio wirkungslos. Erst height: auto gibt das Verhaeltnis frei. */ .stl-bilder img { width: 100%; height: auto; aspect-ratio: 597 / 710; object-fit: cover; border-radius: 0; /* Vorlage: 4 px Grundwert, praktisch keine Rundung. Hier bewusst hart, damit die beiden Bilder als ein Block stehen. */ } /* =========================================================================== 7 — ABSCHLUSS Lage und Masse des Vorlagenabschnitts 10: Navy, zwei Spalten 597/597, Innenabstand 80 oben / 70 unten. Links Ueberschrift, Fliesstext 20 px / 30 px, Knopf. Rechts ein Medienfeld 597 x 299 (Verhaeltnis 2:1), Radius 4 px. WIEDER AUF NAVY SEIT DEM 30.08.2026 — wie in der Vorlage. Der Kunde hatte die Flaeche am 29.08. auf Weiss gezogen; danach endete die Seite im Nichts, weil die letzten 1607 px bis zum Fuss durchgehend hell waren. Auf Navy hat der Abschluss wieder eine Flaeche unter sich. Die Haarlinie, die hier bis zum 30.08. den fehlenden Farbwechsel ersetzt hat, ist damit ersatzlos entfallen — jetzt traegt wieder der Wechsel selbst — als saubere Kante, siehe Verlaufsblock oben. =========================================================================== */ .stl-schluss { /* NAVY-900 STATT NAVY-800 — und damit dieselbe Flaeche wie der Fuss darunter. Zwischen Abschluss und Fuss gibt es dann gar keine Kante mehr, und die Seite endet auf einer durchgehenden dunklen Flaeche. Weiss darauf misst 16,9:1, Sand 9,08:1 — beides besser als auf Navy-800. Absichtlich OHNE .fl-navy900: dieser Baustein laeuft von #0A192E nach #16283F, der Abschluss endete dann 17 Einheiten heller als der Fuss darunter — genau die Kante, die er vermeiden soll. Erst wenn der Fuss denselben Verlauf traegt, gehoert er hierher. Die Oberkante gegen „Das erwartet dich" ist eine saubere Kante; 245 Einheiten zwischen Navy und Hell sind auf keiner Strecke weich zu bekommen (siehe Verlaufsblock oben). */ background: var(--navy-900); padding: var(--stl-luft-130) 0 var(--stl-luft-91); } .stl-zwei--schluss { grid-template-columns: 1fr 1fr; column-gap: var(--stl-spalt-56); align-items: start; } .stl-schluss__text { margin-top: 1.2rem; font-size: var(--stl-t-gross2); line-height: 1.5; color: var(--stl-tx-weich); max-width: 46ch; } /* Der Knopf auf Navy ist der weisse Knopf des Projekts (.btn--weiss, Navy darauf 15,5:1). Sein Ueberfahr-Zustand aus base.css kehrt sich zu Navy-Flaeche um — auf einer Navy-Flaeche waere der Knopf damit weg. Hier bleibt er sichtbar: durchsichtig mit weisser Haarlinie und weisser Schrift (14,6:1). */ .stl-abs--navy .btn--weiss:hover { --btn-fg: #FFFFFF; background: transparent; border-color: rgba(255, 255, 255, 0.55); } .stl-schluss__aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: 1.4rem 1.8rem; margin-top: 1.9rem; } /* Rueckweg zur Uebersicht. In der Vorlage gibt es ihn nicht — dort ist die Stellenseite die einzige Seite. Hier haengt sie unter karriere.html und braucht den Weg zurueck. */ .stl-zurueck { font-size: var(--stl-t-text); color: var(--stl-tx); border-bottom: 1px solid var(--stl-zeichen); padding-bottom: 0.15em; transition: color 0.4s var(--ease), border-color 0.4s var(--ease); } .stl-zurueck:hover { border-bottom-color: currentColor; } .stl-schluss__hinweis { margin-top: 1.6rem; font-size: var(--stl-t-klein); line-height: 1.55; color: var(--stl-tx-leise); max-width: 56ch; } /* Das Medienfeld. IN DER VORLAGE SITZT HIER EIN VIDEO (Mitarbeiter- Interview, Klick zum Abspielen, 597 x 299, Radius 4 px, Flaeche rgba(255,255,255,.1), Innenabstand 40 px, runder Abspielknopf 72 px). Solche Videos gibt es bei Estera nicht und werden nicht erfunden — an der Stelle steht ein Standbild in derselben Lage und demselben Verhaeltnis. Kommt spaeter ein echtes Video, gehoert es genau hierhin. */ .stl-schluss__medium { margin: 0; border-radius: var(--radius-img); overflow: hidden; line-height: 0; } .stl-schluss__medium img { width: 100%; height: auto; /* siehe .stl-bilder img */ aspect-ratio: 597 / 299; object-fit: cover; } /* =========================================================================== BREITEN Die Containerstufen sind die der Vorlage, gemessen. Der Umbruch der zweispaltigen Abschnitte liegt bei 992 px — dort springt in der Vorlage auch die Schriftleiter. =========================================================================== */ @media (max-width: 1399px) { .stl-inner { width: min(1150px, 100% - 48px); } } @media (max-width: 1199px) { .stl-inner { width: min(970px, 100% - 48px); } } /* --- Das versetzte Raster, zweite Fassung: ZWEI Buendel statt drei -------- Unter 1200 px steht der Container auf 970 bzw. 750 px. Drei Buendel waeren dort 3/12 = rund 200 px schmal — zu wenig fuer Ueberschrift, Grafik und Text. Also zwei Buendel, 7 | 5, und wieder mit versetzter Trennstelle: Spalte 1–7 (7/12) 5 | 4 | 5 Zeilen Spalte 8–12 (5/12) 4 | 5 | 5 Zeilen Beide Buendel sind 14 Zeilen hoch, die Flaeche bleibt also luecken- los. Vier verschiedene Groessen statt sechs; der Versatz bleibt. */ @media (max-width: 1199px) { .stl-aus { --aus-einheit: clamp(52px, 5.2vw, 64px); } .stl-aus__kasten:nth-child(1) { grid-column: 1 / span 7; grid-row: 1 / span 5; } .stl-aus__kasten:nth-child(2) { grid-column: 8 / span 5; grid-row: 1 / span 4; } .stl-aus__kasten:nth-child(3) { grid-column: 8 / span 5; grid-row: 5 / span 5; } .stl-aus__kasten:nth-child(4) { grid-column: 1 / span 7; grid-row: 6 / span 4; } .stl-aus__kasten:nth-child(5) { grid-column: 1 / span 7; grid-row: 10 / span 5; } .stl-aus__kasten:nth-child(6) { grid-column: 8 / span 5; grid-row: 10 / span 5; } } @media (max-width: 991px) { .stl-inner { width: min(750px, 100% - 48px); } .stl-zwei--bieten, .stl-zwei--erwartet, .stl-zwei--schluss { grid-template-columns: 1fr; row-gap: clamp(36px, 6vw, 56px); } /* KEINE ZEILENFUGE IN „DEIN SYSTEM" — 03.09.2026, Mobiloptimierung. Die Fuge oben war fuer Text neben Bild gedacht; seit dem 31.08.2026 steht in diesem Abschnitt kein Bild mehr, sondern der Kopf ueber dem Kastenraster, und die Trennlinie dazwischen bringt ihren eigenen Abstand mit. Gemessen bei 390 px: Trennlinie -> erster Kasten 81 px (22 Linienabstand + 36 Fuge + 6 Rasterabstand + Ueberschriftsrest), mit 0 Fuge 45 px. Das Briefing (Abschnitt 19) nennt genau solche Loecher; Grenze hier 72 px. */ .stl-zwei--bieten { row-gap: 0; } /* HIER LOESTE EINE REGEL DAS KLEBEN DES BILDFELDES FUER DEN EINSPALTIGEN FALL. Seit dem 31.08.2026 klebt es ueberhaupt nicht mehr, siehe .stl-bilder weiter oben. */ /* Das Bild rechts steht unter dem Text und wird flacher, damit es einspaltig nicht den halben Bildschirm fuellt. Dasselbe gilt fuer das leere Bildfenster im Abschnitt „Was wir bieten". */ .stl-bilder img { aspect-ratio: 16 / 9; } .stl-platz { aspect-ratio: 3 / 2; } /* HIER STAND EIN EIGENES --stl-karte-h FUER DEN EINSPALTIGEN FALL. Es ist am 31.08.2026 mit dem Stapel und dann mit den Karten selbst entfallen. Die Schrittliste braucht keine Hoehenangabe: sie waechst mit ihrem Text, und ihre drei Schriftgroessen sind clamps mit vw-Anteil. */ } /* --- Unter 700 px: EINE Spalte ------------------------------------------- Ausdrueckliche Vorgabe. Die Rasterzuweisungen werden vollstaendig aufgehoben; die Kaesten stehen der Reihe nach untereinander. Die Grafik nimmt hier keine Resthoehe mehr (es gibt keine feste Kastenhoehe, aus der etwas uebrig bliebe), sondern ein eigenes Mass. */ @media (max-width: 699px) { .stl-aus { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; gap: clamp(14px, 3.4vw, 20px); margin-top: clamp(26px, 5vw, 34px); } .stl-aus__kasten:nth-child(n) { grid-column: 1 / -1; grid-row: auto; } .stl-aus__kasten { padding: clamp(18px, 4.6vw, 24px) clamp(18px, 4.6vw, 24px); } .stl-aus__bild { flex: none; height: clamp(140px, 38vw, 200px); } } @media (max-width: 620px) { .stl-inner { width: min(100% - 40px, 640px); } .stl-hero__inner { width: min(100% - 40px, 640px); } /* Aufgeraeumt am 30.08.2026: hier standen noch drei Regeln aus dem Zustand vor dem Kundenwunsch — grid-template-columns auf einem Flex-Element (wirkungslos) und zweimal .stl-haken__kreis, den es seit dem Tausch Haken -> Haus nicht mehr gibt. */ .stl-haken__zeichen { width: 34px; height: 34px; } .stl-haken__zeichen svg { width: 26px; height: 26px; } /* HIER STAND DIE GEGENLAEUFIGE KARTENHOEHE (clamp mit negativem vw-Vorfaktor) und die engere Kartenluft. Beides ist mit den Karten entfallen. Die Schrittliste braucht hier nur etwas mehr Luft je Zeile, weil der Satz auf schmalem Fenster zwei- bis dreizeilig umbricht und die Haarlinien sonst zu dicht aufeinander stehen. */ .stl-stufe { padding-block: 0.85rem; } .stl-schluss__aktionen { gap: 1.1rem; } .stl-schluss__aktionen .btn { width: 100%; justify-content: center; } } /* =========================================================================== BEWEGUNG — NEU, 30.08.2026 BIS HEUTE HATTEN DIESE SEITEN GAR KEINE BEWEGUNG außer den zwei Laufbändern. Oben im Kopf dieser Datei stand dazu: „Es gibt keine Animation außer den zwei Laufbändern. Die Vorlage bewegt nichts weiter. Wer hier Scroll-Animationen einbaut, trifft den Charakter nicht." DIESER SATZ IST ÜBERHOLT, und zwar durch eine ausdrückliche Ansage des Kunden: „Ich will, dass du viel, viel, viel mehr Animationen einbaust, also jetzt nicht nur so langweilige Animationen, wo Bilder größer werden, wenn man draufgeht. Ich will wirklich besondere Animationen." Der Charakter der Vorlage tritt damit hinter den Auftrag zurück. Er bleibt trotzdem der Maßstab für das WIE: keine Geste ist lauter als nötig, es gibt keinen Zoom beim Überfahren, und pro Abschnitt trägt genau eine Geste. DIE FÜNF GESTEN 1 ÜBERSCHRIFTEN SCHIEBEN SICH ZEILENWEISE HINTER EINER KANTE HERVOR Dieselbe Leitgeste wie auf karriere.html, mit denselben gemessenen Werten der Vorlage fluid.glass (Kladde `fluid/`): translateY 200 % → 0 über 1,2 s in cubic-bezier(.215,.61,.355,1), 0,1 s Versatz je Zeile. Dass Übersichtsseite und Stellenseiten dieselbe Geste tragen, ist der Grund, warum sie beim Klick von der einen auf die andere wie eine Website wirken und nicht wie zwei. Die Zeilen findet stelle.js, indem es jedes Wort in eine Hülle setzt und die Hüllen nach ihrer gemessenen Höhenlage gruppiert. Hier trägt das mehr als drüben: „Prüfe, ob Estera zu deinem Weg passt" bricht je nach Fensterbreite auf zwei bis vier Zeilen um. 2 DIE HÄUSER UND SYMBOLE ZEICHNEN SICH Die Symbole der Seite sind reine Strichzeichnungen — sechs Häuser in „Was wir bieten", vier bis fünf Zeichen auf den Karten in „Das erwartet dich". Eine Strichzeichnung, die sich zeichnet, ist keine Zutat, sondern das, was das Bild ohnehin behauptet. IN „DAS MACHT DICH AUS" GIBT ES SIE SEIT DEM 30.08.2026 NICHT MEHR: dort stehen jetzt sechs erzeugte Grafiken, und die tragen ihre eigene Geste (siehe 6). Gebaut über stroke-dasharray/stroke-dashoffset mit der ECHTEN Pfadlänge: stelle.js liest sie mit getTotalLength() vom Pfad selbst ab und schreibt sie als --len. Geraten wird nichts — dasselbe Verfahren, das site.js für die Grafiken der Startseite benutzt. Innerhalb eines Symbols laufen die Striche 0,12 s versetzt, damit das Haus wirklich gebaut wird: erst das Dach, dann die Wände, dann die Tür. 3 DIE ZIFFERN DER SCHRITTFOLGE LAUFEN AUS IHRER ZEILE HERAUS „Das erwartet dich" beschreibt eine Reihenfolge, und die Ziffer sagt das. Sie fährt deshalb hinter derselben Kante hervor wie die Überschriften — erst wenn ihr Symbol fertig gezeichnet ist. Die fünf Schritte bauen sich dadurch nacheinander auf, statt gemeinsam da zu stehen. AUF DER BACK-OFFICE-SEITE GIBT ES DIESE ZIFFERN NICHT (deren vier Punkte sind keine Reihenfolge, siehe .stl-folge--ohne-nr weiter oben). Die Regeln unten laufen dort ins Leere; die übrigen Gesten des Abschnitts greifen unverändert. 4 DIE KÄSTEN STEHEN AUS IHRER EIGENEN GRUNDLINIE AUF clip-path inset(100 % 0 0 0) → 0: der Kasten wächst von seiner Unterkante nach oben, während Überschrift, Haarstrich und Satz darin aus 26 px nachrücken. Die Kante steht dabei STILL — sie ist die Grundlinie, auf der der Kasten steht, nicht eine Kante, die mitfährt. Genau dadurch liest es sich als Aufstehen und nicht als Einschieben. Weil die sechs Kästen seit dem 30.08.2026 verschieden groß sind, stehen sie auch verschieden weit auf — die Geste bekommt dadurch von selbst einen Rhythmus, den sie im gleichmäßigen Raster nicht hatte. 5 DIE LAUFBÄNDER LAUFEN AN, STATT ZU RENNEN Bis heute liefen beide Bänder vom ersten Bildpunkt an mit vollen 60 px/s — auch dann, wenn sie noch gar nicht im Bild waren. Jetzt stehen sie still, bis ihr Abschnitt eintritt, und beschleunigen dann aus dem Stand auf ihre 60 px/s. DAS IST GERECHNET, NICHT GEFÜHLT. Die Spur trägt unverändert ihre lineare Endlosbewegung. Die drei Sätze darin bekommen zusätzlich einen einmaligen Anlauf von −48 px auf 0 über 1,6 s in cubic-bezier(0.25, 0.5, 0.5, 1). Diese Kurve hat am Anfang die Steigung 2 und am Ende 0; die Anfangsgeschwindigkeit des Anlaufs ist damit 2 · 48 / 1,6 = 60 px/s und zeigt GEGEN die Laufrichtung: t = 0 : −60 + 60 = 0 px/s → das Band steht t = 1,6 s : −60 + 0 = −60 px/s → volle Reisegeschwindigkeit Dazwischen steigt es stetig an. Das Band fährt also wirklich an, statt anzuspringen. DIE LAUFBANDWERTE SIND UNANGETASTET: 60,0 px/s, Satzbreite 2486 bzw. 2741 px, 41,4333 bzw. 45,6833 s je Umlauf, drei Sätze im DOM, gleiche Geschwindigkeit auf jeder Fensterbreite. Der Anlauf sitzt auf .stl-band__satz, die Endlosbewegung auf .stl-band__spur — zwei verschiedene Elemente, deshalb kommen sich die beiden transform nicht ins Gehege, und der Satz-transform komponiert sauber mit dem der Spur. Warum dafür die PHASE der Endlosbewegung verschoben wurde, steht oben bei @keyframes stl-lauf. 6 DIE GRAFIK IM KASTEN BEWEGT SICH ZWEIMAL — NEU AM 30.08.2026 Ausdrücklicher Kundenwunsch: „Die Grafik bewegt sich, wenn man mit der Maus darüberfährt UND wenn sie zum ersten Mal ins Bild kommt. Ruhig und kurz — sie soll aufmerken, nicht tanzen." beim Eintritt opacity 0 → 1, translateY 18 px → 0, scale 0,94 → 1, über 0,85 s (@keyframes stl-grafik) beim Überfahren translateY 0 → −6 px und rotate 0 → −1,8°, über 0,5 s, und ebenso zurück Das Neigen ist Absicht und der Grund, warum es kein Zoom ist: der Maßstab bleibt, das Bild kippt nur kurz an. Ein Zoom beim Überfahren ist auf diesen Seiten seit jeher ausgeschlossen. DIE ZWEI BEWEGUNGEN LIEGEN AUF ZWEI ELEMENTEN, und das ist keine Geschmacksfrage: der Eintritt läuft mit `both` und hält damit seinen Endwert für `transform` dauerhaft fest. Läge das Überfahren auf demselben Element, käme es nie zum Zug. Also trägt den Eintritt und das Überfahren. Derselbe Grund steht beim Haarstrich (.stl-aus__strich und dessen ::before). DER KARTENSTAPEL in „Das erwartet dich" ist KEINE Animation und steht deshalb nicht in dieser Liste — er ist reines `position: sticky`, der Leser rollt selbst. Die Schrittliste steht oben bei .stl-folge. DIE GRENZEN, DIE NICHT VERHANDELBAR SIND — und wo sie hier stehen: OHNE JAVASCRIPT IST ALLES SOFORT DA. Jede Regel dieses Abschnitts hängt an [data-stl-js], und dieses Merkmal setzt ausschließlich stelle.js. Fällt das Skript aus, gibt es keinen Zustand, in dem etwas unsichtbar hängen bleibt — der Endzustand IST der Grundzustand, die Animation nimmt ihn nur kurz weg. Auch geteilt wird dann nicht, und die Bänder laufen wie bisher vom ersten Bildpunkt an. BEI reduce STEHT ALLES SOFORT IM ENDZUSTAND. Zwei Riegel: stelle.js steigt vor dem Setzen des Merkmals aus, und der Abschnitt „Ruhige Darstellung" unten nimmt jeden Anfangszustand ausdrücklich zurück — für den Fall, dass jemand die Einstellung erst nach dem Laden umstellt. NUR transform, opacity, clip-path — und stroke-dashoffset für die Strichzeichnungen. Keine Bewegung auf width, height, top, left, filter oder box-shadow. Kein requestAnimationFrame am Bildlauf: ausgelöst wird über IntersectionObserver. =========================================================================== */ .stl { /* Die Kurve der Vorlage fluid.glass — sie trägt jede Geste, die aus einer Kante hervorkommt oder aufsteht. */ --stl-e-raus: cubic-bezier(0.215, 0.61, 0.355, 1); /* Weicher Anlauf für Flächen, die aufziehen. */ --stl-e-weich: cubic-bezier(0.33, 0, 0.15, 1); /* Steigung 2 am Anfang, 0 am Ende — die Kurve des Bandanlaufs. Wer sie ändert, muss den Vorfaktor 48 px mitändern, sonst ruckt das Band beim Start. Herleitung siehe Geste 5. */ --stl-e-anlauf: cubic-bezier(0.25, 0.5, 0.5, 1); } /* --- Die Bewegungen ------------------------------------------------------- */ /* =========================================================================== P0 — SCROLL-ANIMATIONEN UND WEISSE FLAECHEN, 01.09.2026 Optimierungsbriefing, Abschnitt 02, woertlich: „Inhalte dürfen nie dauerhaft mit opacity: 0 oder visibility: hidden verbleiben. Animationen maximal ca. 400 bis 600 ms, geringe Bewegung von etwa 12 bis 20 px, kaum Verzögerung zwischen Elementen und vollständige Deaktivierung bei prefers-reduced-motion." WAS SICH DAMIT GEAENDERT HAT — Zahl fuer Zahl, alte Werte in Klammern: Weg 16 px (22, 26, 200 % Zeilenhoehe, 8 % Bildhoehe) Dauer 0,5 s (0,8 / 0,9 / 1,2 s), Bildfelder 0,55 s (1,15 s) Staffelung 0,06 s je Element (0,09 / 0,1 s), Summe je Gruppe ≤ 0,4 s Kopfbereich als Folge 0 / 0,08 / 0,24 / 0,32 s (0,15 / 0,3 / 0,85 / 1 s) Die sechs Symbolgesten (Sand, Hut, Schloss, Waage, Haken, Sprechblasen) behalten ihre Laenge: sie sind Inhalt, kein Einblenden. Nur ihr Auftritt (stl-grafik) ist kuerzer geworden, und damit ruecken sie frueher an. DIE ZEILENGESTE DER UEBERSCHRIFTEN IST GEBLIEBEN, ABER KLEINER. Bis heute fuhr jedes Wort 200 % seiner Zeilenhoehe hinter einer Kante hervor — bei der H1 ueber 80 px Weg in 1,2 s. Jetzt steigt jede Zeile 16 px und blendet dabei ein; die Kante (.stl-zg, clip-path) bleibt stehen und schneidet die ersten Bildpunkte des Wegs unten ab, sodass die Zeile weiterhin AUS ihrer Grundlinie kommt statt zu schweben. Dieselbe Geste, ein Fuenftel des Wegs, weniger als die Halbe Zeit. DAZU IN stelle.js: Beobachter mit threshold 0 und 160 px Vorlauf nach unten, ein Sicherheitsnetz beim Rollen und nach dem Laden — nichts bleibt unsichtbar, auch wenn jemand springt oder rast. =========================================================================== */ @keyframes stl-zeile { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } @keyframes stl-steigt { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } /* Der Strich zieht sich aus dem Nichts. --len ist die ECHTE Pfadlänge und kommt aus stelle.js. */ @keyframes stl-zieht { from { stroke-dashoffset: var(--len, 100); } to { stroke-dashoffset: 0; } } /* Eine Linie wächst aus ihrer Mitte. */ @keyframes stl-linie { from { transform: scaleX(0); } to { transform: scaleX(1); } } /* Dieselbe Linie, aber mit dem Ausgleich, den .stl-trenn::before schon in Ruhe trägt — translateX(-50 %) ist dort Lage, nicht Bewegung. */ @keyframes stl-linie-mitte { from { transform: translateX(-50%) scaleX(0); } to { transform: translateX(-50%) scaleX(1); } } /* Fläche zieht von oben nach unten auf. */ @keyframes stl-blende { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } } /* Das Bild zieht im Rahmen nach. Prozent, damit es auf jeder Fensterbreite denselben Anteil der Bildhöhe zurücklegt. NACHGERECHNET, damit unten keine Lücke aufreißt: die sichtbare Kante steht bei t · H, die Bildunterkante bei H − 0,08 (1 − t) H. Die Bedingung t ≤ 1 − 0,08 (1 − t) ist für jedes t ≤ 1 erfüllt — die Kante holt das Bild also nie ein. Deshalb braucht es hier KEINE Vergrößerung als Sicherheitsreserve; das Bild bleibt in seinem Maßstab. */ @keyframes stl-nach { /* 16 px statt 8 % — P0, 01.09.2026: 8 % waren am 718 px hohen Bildfeld 57 px Weg. Die Luecken-Rechnung oben gilt mit 16 px unveraendert: die Kante steht bei t · H, die Bildunterkante bei H − 16 (1 − t) px, und t · H ≤ H − 16 (1 − t) ist fuer jedes t ≤ 1 erfuellt. */ from { transform: translateY(-16px); } to { transform: translateY(0); } } /* Der Kasten wächst aus seiner Grundlinie. inset(100% 0 0 0) heißt: die sichtbare Fläche ist auf die UNTERKANTE zusammengezogen; sie wächst von dort nach oben, und die Kante steht still. */ @keyframes stl-waechst { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } } @keyframes stl-hebt { from { opacity: 0; transform: translateY(16px); } /* P0: vorher 26 px */ to { opacity: 1; transform: translateY(0); } } /* Die Grafik im Kasten, wenn sie zum ersten Mal ins Bild kommt: sie setzt sich, statt einzublenden. 6 Prozent Groesse und 18 px Weg — genug, dass man es merkt, zu wenig, dass es auffaellt. */ @keyframes stl-grafik { from { opacity: 0; transform: translateY(18px) scale(0.94); } to { opacity: 1; transform: translateY(0) scale(1); } } /* Der Anlauf der Bänder. Herleitung siehe Geste 5. */ @keyframes stl-anlauf { from { transform: translate3d(-48px, 0, 0); } to { transform: translate3d(0, 0, 0); } } /* =========================================================================== DIE SECHS SYMBOLE BEWEGEN SICH SELBST — 31.08.2026, KUNDENWUNSCH „Heute bewegen sie sich nur als Ganzes. Das Symbol selbst soll etwas tun." Drei Beispiele kamen vom Kunden, drei sind dazuerfunden: aus-01 zwei Sprechblasen die zweite kommt nach aus-02 Schloss es schliesst sich, es oeffnet sich (K) aus-03 Waage sie schwingt einmal aus und pendelt ein aus-04 Blattstapel der Haken zeichnet sich aus-05 Buch mit Hut der Hut hebt ab, eine Seite blaettert (K) aus-06 Sanduhr der Sand rieselt durch (K) WAS DAFUER WEGGEFALLEN IST: die eine Regel, die bis heute JEDES der sechs Bilder beim Ueberfahren um 6 px hob und 1,8 Grad neigte. Sie war genau das „nur als Ganzes", das der Kunde beanstandet hat. Zwei Bewegungen gleichzeitig — das ganze Bild kippt UND ein Teil darin bewegt sich — waeren ausserdem eine Bewegung zu viel. -------------------------------------------------------------------------- DAS GRUNDPROBLEM: ES SIND RASTERBILDER, KEINE SVG Ein PNG kann nicht blaettern. Je Symbol ist deshalb einer von zwei Wegen gewaehlt, und welcher, steht bei jeder Geste dabei: ZERSCHNITTEN (c) Das Bild ist in Lagen zerlegt, jede Lage eine eigene Datei in assets/img/stelle/teil/. UEBEREINANDERGELEGT ergeben die Lagen wieder genau das Original — der Ruhezustand ist also Bildpunkt fuer Bildpunkt der alte. Wo eine Lage beim Bewegen etwas freigibt, ist das Freigegebene vorher aufgefuellt worden. DARUEBERGELEGT (b) Das Bild bleibt, wie es ist; die Bewegung ist ein kleines SVG genau darueber. Nur dort gewaehlt, wo nichts freigelegt werden muss. Nicht gewaehlt wurde (a), das Nachzeichnen als Inline-SVG. Die sechs Grafiken sind mattes weiches 3D mit Verlaeufen und weichen Schatten; eine Strichzeichnung daneben saehe wie ein Fremdkoerper aus, und alle sechs im selben Stil nachzuzeichnen ist eine eigene Arbeit. -------------------------------------------------------------------------- DER AUFBAU IM MARKUP — drei Ebenen, drei getrennte Bewegungen

<- Eintrittsgeste <- gemeinsamer Auftritt <- Ueberfahren ... weitere Lagen ...
DREI EBENEN UND NICHT EINE, und das ist keine Umstaendlichkeit: zwei `animation`-Kurzformen auf demselben Element ueberschreiben sich, die zuerst genannte Bewegung fiele ersatzlos aus. Dieselbe Regel gilt im ganzen Projekt (siehe .stl-bilder picture / img weiter oben). span traegt die Geste beim ERSTEN ERSCHEINEN picture traegt den gemeinsamen Auftritt des ganzen Symbols (stl-grafik) img traegt die Geste beim UEBERFAHREN Faellt eine Ebene aus, stehen die anderen zwei trotzdem. WARUM DIE LAGEN DIESELBEN BILDMASSE HABEN wie das Original: .stl-aus__bild img zwingt jedes Bild in ein QUADRATISCHES Feld und legt es mit `object-fit: contain` hinein. Zwei Dateien landen genau dann deckungs- gleich, wenn sie dieselben Bildmasse haben. Die Lagen sind deshalb NICHT auf ihren Inhalt zugeschnitten, sondern volle Leinwand mit durch- sichtigem Rest. Das kostet fast nichts — die webp-Dateien wiegen 14 bis 111 kB, weil durchsichtige Flaechen sich hervorragend packen. DIE DREHPUNKTE SIND GERECHNET, NICHT GERATEN. transform-origin bezieht sich auf den QUADRATISCHEN Kasten, das Bild liegt darin aber mit Rand. Umrechnung fuer ein Querbild (b × h, b > h) in einem Quadrat der Seite S: x_Kasten = x_Bild y_Kasten = (1 − h/b)/2 + y_Bild · h/b und fuer ein Hochbild entsprechend mit vertauschten Achsen. Jeder Wert unten ist so aus gemessenen Bildpunkten hergeleitet. NUR transform, opacity UND clip-path. Kein Rollhorcher, kein requestAnimationFrame, keine Bildfolge, kein Javascript ausser dem IntersectionObserver, den stelle.js ohnehin schon hat. =========================================================================== */ /* Die Lage. Liegt in Dokumentreihenfolge ueber der vorigen — hinten zuerst, vorn zuletzt. SIE BEKOMMT DIE MASSREGELN DES BILDES, NICHT `inset: 0`, und daran haengt die ganze Geometrie dieses Abschnitts.
ist NICHT quadratisch (es nimmt die Restbreite und die Resthoehe des Kastens, gemessen bei 1440 px zum Beispiel 358 x 133), das Bild darin schon: es liegt mittig in einem Quadrat von 133 x 133. Prozentwerte auf der Lage — clip-path-Einzuege, transform-origin, translate — beziehen sich aber auf DIE LAGE. Steht sie auf der Figurbreite, meint jedes gemessene Prozent etwas anderes als gedacht, und zwar in jedem Kasten und auf jeder Fensterbreite etwas anderes, weil die sechs Kaesten verschieden gross sind. EINMAL GEBAUT UND IM BILD GESEHEN: der Haken zeichnete sich dadurch gar nicht. Sein Wischer laeuft von 66 % auf 33 % Beschnitt rechts — auf der 358 px breiten Figur sind das 236 statt 88 Bildpunkte, und der Beschnitt endete vor dem Bild, statt ueber es hinwegzulaufen. Mit denselben vier Zeilen wie am Bild deckt die Lage genau dasselbe Quadrat, und jeder gemessene Prozentwert stimmt. */ .stl-aus__lage { position: absolute; inset: 0; margin: auto; display: block; height: min(100%, 17rem); width: auto; max-width: 100%; aspect-ratio: 1 / 1; } /* Die zwei aufgelegten SVG. SIE BEKOMMEN GENAU DIE MASSREGELN DES BILDES und nicht etwa `inset: 0`. Das ist der Punkt, an dem so etwas sonst schiefgeht:
ist NICHT quadratisch (es nimmt die Restbreite des Kastens und die Resthoehe), das Bild darin schon — es liegt mittig in einem Quadrat mit `aspect-ratio: 1/1` und `object-fit: contain`. Ein SVG mit `inset: 0` laege also im falschen Kasten, und jede gemessene Koordinate waere daneben. Mit denselben vier Zeilen deckt es dasselbe Quadrat. viewBox 0 0 100 100 und `preserveAspectRatio` in der Voreinstellung: eine Benutzereinheit ist damit ein Prozent der Quadratseite, und die gemessenen Bildpunkte lassen sich direkt eintragen. IN RUHE UNSICHTBAR: ohne Javascript und bei ruhiger Darstellung laeuft keine Animation, und dann darf hier auch nichts stehen. Das Symbol sieht dann aus wie vorher — das gelieferte Bild, unveraendert. */ .stl-aus__auf { position: absolute; inset: 0; margin: auto; display: block; height: min(100%, 17rem); width: auto; max-width: 100%; aspect-ratio: 1 / 1; opacity: 0; pointer-events: none; overflow: visible; } /* --- 01 ZWEI SPRECHBLASEN — „Klare Worte" ------------------------------ WEG (c), ZERSCHNITTEN, und hier ohne jedes Auffuellen: die zwei Blasen sind in der Vorlage sauber nach Farbe getrennt (Navy hinten, Creme vorn). Die Maske ist die Navy-Klasse mit geschlossenen Loechern; was uebrig bleibt, ist die vordere Blase. Zusammengelegt ergibt das wieder das Original. GESTE: die zweite Blase kommt nach — beim Eintritt waechst sie hinter der ersten hervor, beim Ueberfahren antwortet sie der ersten mit einem Wimpernschlag Abstand. Zwei Schlaege, wie in einem Gespraech. DREHPUNKT 39 % 35 %: die obere linke Ecke der hinteren Blase, gemessen bei (605, 287) in 1536 × 1024. Genau dort ueberdecken sich die beiden, und genau dort darf sich am wenigsten bewegen — sonst blitzte die Schnittkante auf. Nach aussen hin waechst die Blase, an der Naht steht sie still. */ .stl-aus__lage--hinten img, .stl-aus__lage--hinten { transform-origin: 39% 35%; } @keyframes stl-reden-nach { from { opacity: 0; transform: scale(0.82); } 55% { opacity: 1; } to { opacity: 1; transform: scale(1); } } @keyframes stl-reden-tupf { 0%, 100% { transform: scale(1); } 46% { transform: scale(1.045); } } /* --- 02 SCHLOSS VOR SCHILD — „Sorgsam mit Daten" ----------------------- WEG (c), ZERSCHNITTEN IN DREI LAGEN: Schild, Buegel, Koerper. Drei und nicht zwei, weil der Buegel ZWISCHEN Schild und Koerper haengt — seine Beine verschwinden hinter dem Schlosskoerper. Mit nur zwei Lagen liesse er sich nicht bewegen, ohne dass eines von beidem falsch waere. DIE KOERPERKANTE IST GEMESSEN, NICHT GESCHAETZT: bis Zeile 639 ist der breiteste zusammenhaengende helle Lauf 81 px breit (ein Buegelbein), ab Zeile 645 sind es 357 px (die Koerperoberkante). Der Schnitt liegt bei 642, also 41,8 % der Bildhoehe. DIE BEINE SIND UM 150 px VERLAENGERT. In der Vorlage enden sie exakt an der Koerperkante; hebt man den Buegel, klaffte dort eine Luecke und man saehe zwei abgeschnittene Stummel schweben. Die letzten Buegelzeilen sind deshalb nach unten fortgeschrieben. In Ruhe liegt die Verlaengerung VOLLSTAENDIG hinter dem Koerper und ist unsichtbar; sie traegt genau die 9 %, die der Buegel hoechstens faehrt (0,09 · 1536 = 138 px < 150). HINTER DEM BUEGEL WURDE AUFGEFUELLT. Das Schild ist dort glattes Navy, das Auffuellen laeuft vom Rand des Lochs nach innen und ist bei der Darstellungsgroesse (100 bis 220 px fuer ein Bild von 1024 px Breite) nicht auszumachen. GESTE: beim Eintritt faellt der Buegel ins Schloss — es SCHLIESST sich. Beim Ueberfahren faehrt er heraus und wieder hinein — es OEFFNET sich und faellt zu. Beides hat der Kunde als moeglich genannt; hier ist beides da, jedes an der Stelle, an der es sich von selbst erklaert. */ @keyframes stl-schloss-zu { from { transform: translateY(-9%); } 72% { transform: translateY(0.7%); } to { transform: translateY(0); } } @keyframes stl-schloss-auf { 0% { transform: translateY(0); } 36%, 60% { transform: translateY(-6%); } 100% { transform: translateY(0); } } /* --- 03 WAAGE — „Keine Versprechen zu Steuern und Rendite" ------------- WEG (c), ZERSCHNITTEN IN ZWEI LAGEN, und der Schnitt ist geometrisch und nicht farblich: Balken, Schnuere und Schalen drehen sich, Saeule und Sockel stehen still. DER SCHNITT, AUSGESCHRIEBEN: zur beweglichen Lage gehoert alles ausserhalb des Saeulenbandes 44,5 bis 55,5 % UND oberhalb von Zeile 856. Beide Zahlen sind gemessen. Das Band, weil die Saeule ueber die ganze Hoehe zwischen 46 und 54 % steht. Die Zeile, weil dort die SCHALEN enden — nicht der Sockel: der laeuft mit 38 bis 62 % breiter als das Band und wuerde sonst mitten durchgeschnitten (einmal passiert, im Bild sofort zu sehen gewesen). DIE NAHT AN DER SAEULE FAELLT NICHT AUF, und das laesst sich ausrechnen: ein Punkt am Bandrand liegt 75 Bildpunkte vom Drehpunkt entfernt und legt bei 3,4 Grad 4,5 Bildpunkte zurueck — bei 1374 px Bildbreite sind das 0,33 %, auf 200 px Darstellung also 0,7 Bildpunkte. Eine Schale liegt 480 Bildpunkte entfernt und legt 28 zurueck, also 4 Bildpunkte auf 200. Genau dieses Verhaeltnis ist gewollt: an der Naht unsichtbar, an den Schalen deutlich. Der navyfarbene Knauf in der Balkenmitte deckt den Rest. DREHPUNKT 50 % 26,2 %: die Balkenmitte bei (687, 246) in 1374 × 1145, umgerechnet ueber (1 − 1145/1374)/2 + 246/1145 · 1145/1374. GESTE: einmal ausschwingen und einpendeln — vier abnehmende Ausschlaege, 3,4 / 2,1 / 1,2 / 0,55 Grad. Eine Waage, die zur Ruhe kommt. */ .stl-aus__lage--balken img, .stl-aus__lage--balken { transform-origin: 50% 26.2%; } @keyframes stl-waage-schwingt { 0% { transform: rotate(-3.4deg); } 30% { transform: rotate(2.1deg); } 55% { transform: rotate(-1.2deg); } 78% { transform: rotate(0.55deg); } 100% { transform: rotate(0); } } @keyframes stl-waage-tippt { 0% { transform: rotate(0); } 24% { transform: rotate(2.6deg); } 50% { transform: rotate(-1.5deg); } 74% { transform: rotate(0.7deg); } 100% { transform: rotate(0); } } /* --- 04 BLATTSTAPEL MIT HAKEN — „Sauber dokumentiert" ------------------ WEG (c), ZERSCHNITTEN IN ZWEI LAGEN. Der Kunde hatte hier (b) angeregt, also einen SVG-Haken ueber das Bild zu legen — das geht nicht, solange der gezeichnete Haken darunter noch da ist: er waere von Anfang an zu sehen, und das Zeichnen liefe ins Leere. Der Haken muss also HERAUS, und wenn er ohnehin heraus ist, kann gleich er selbst gezeichnet werden statt einer Nachzeichnung. DIE MASKE WAECHST UM 46 px, und das ist der eigentliche Kniff. Der Haken wirft einen weichen Schatten auf das Blatt, und der ist nicht gruen. Waechst die Maske nur um das Gruen, zieht das Auffuellen den Schatten von aussen nach innen und es bleibt ein Gespenst in Hakenform stehen — einmal gebaut, im Bild gesehen und verworfen. GEZEICHNET WIRD MIT clip-path, NICHT MIT stroke-dashoffset: es ist ein Bild und kein Pfad, es gibt keine Pfadlaenge. Ein Wischer von links nach rechts liest sich hier trotzdem als Zeichnen, und zwar nicht zufaellig: ein Haken besteht aus zwei Strichen, die BEIDE von links nach rechts laufen — der kurze abwaerts, der lange aufwaerts. Der Stift kommt also nie zurueck, und ein Wischer entlang x bildet den Weg des Stiftes ab. Der Haken steht bei 37,0 bis 64,6 % der Bildbreite (gemessen: 486 bis 848 von 1312). Der Wischer laeuft deshalb von 66 % Beschnitt rechts auf 33 % und nicht von 100 auf 0 — sonst waere die halbe Laufzeit Leerlauf, bevor ueberhaupt etwas erscheint. DIE LETZTEN 15 PROZENT DER LAUFZEIT OEFFNEN DEN BESCHNITT GANZ, und das ist keine Zierde. Die Eintrittsgeste laeuft mit `both`, ihr Endwert bleibt also an der Lage stehen — bei 33 % waere die Lage dauerhaft auf die linken zwei Drittel beschnitten. Heute endet der Haken bei 64,6 % und passt mit 2,4 % Luft hinein; wer den Haken einmal groesser zeichnen laesst oder das Bild tauscht, saesse in der Falle. Nach dem Zeichnen ist deshalb gar kein Beschnitt mehr da. Zu sehen ist von diesem letzten Stueck nichts — rechts von 67 % steht in dieser Lage ohnehin nichts. */ @keyframes stl-haken-zieht { 0% { clip-path: inset(0 66% 0 0); } 85% { clip-path: inset(0 33% 0 0); } 100% { clip-path: inset(0 0 0 0); } } /* --- 05 BUCH MIT HUT — „Lust zu lernen" -------------------------------- ZWEI WEGE IN EINEM SYMBOL, weil der Kunde zwei Dinge genannt hat. DER HUT: WEG (c), ZERSCHNITTEN. Er liess sich sauber ausloesen, weil er im Bild ein EIGENES zusammenhaengendes Navy-Gebiet ist (106 156 Bild- punkte, x 50,8 bis 85,3 %, y 10,8 bis 47,3 %) — er beruehrt den Buchdeckel nicht. Dazu die Quaste: Gold oberhalb 58 % und rechts von 62 %, denn die Blattkanten liegen tiefer und der Falz weiter links. KEIN LOECHERSCHLIESSEN auf der zusammengesetzten Maske: es hat beim ersten Versuch die Luecke zwischen Mortarboard-Ecke, Quaste und Buchkante mitgenommen und ein Stueck Buchseite in die Hutlage geschnitten. Es steht dort jetzt nur ein morphologisches Schliessen mit 5 px — kleine Luecken aus der Kantenglaettung gehen zu, grosse Flaechen bleiben draussen. DIE HEBUNG BLEIBT KLEIN (3 % der Quadratseite, das sind 46 Bildpunkte im Original): mehr wuerde die aufgefuellte Flaeche unter dem Hut zeigen. Der Schlagschatten des Huts bleibt im Buch liegen — er gehoert zur Seite, nicht zum Hut, und ein Hut, der sich einen Fingerbreit hebt, nimmt seinen Schatten nicht mit. DREHPUNKT 62 % 48 %: der Fuss der Hutkappe, dort wo sie das Buch beruehrt. Der Hut kippt also um seine Auflage und schwebt nicht. DIE SEITE: WEG (b), DARUEBERGELEGT. Ein Blatt aus dem Bild zu schneiden ginge nicht — darunter liegt keine zweite Seite, es bliebe ein Loch. Das aufgelegte Blatt ist stattdessen ein SVG-Pfad in der Papierfarbe, der dem gemessenen Umriss der rechten Seite folgt (Zeile fuer Zeile abgelesen: Falz bei 45 bis 46 %, rechte Kante von 63 % bei y 22 % bis 87 % bei y 65 %). ER IST IN RUHE UNSICHTBAR (opacity 0) und wird erst beim Aufschlagen sichtbar — deshalb muss er im flachen Zustand auch nicht auf den Bildpunkt passen; man sieht ihn nur, waehrend er steht. Er dreht um den Falz (46 % 49 %) auf 62 Grad und faellt zurueck: eine Seite, die ein Stueck blaettert. DIE ZWEI GESTEN LAUFEN NACHEINANDER, nicht zugleich — erst hebt der Hut, dann blaettert die Seite. Zwei Bewegungen im selben Augenblick waeren der Jahrmarkt, den der Kunde ausdruecklich nicht will. */ .stl-aus__lage--hut img, .stl-aus__lage--hut { transform-origin: 62% 48%; } .stl-aus__auf--seite { transform-origin: 46% 49%; } @keyframes stl-hut-hebt { 0% { transform: translateY(0) rotate(0); } 38%, 58% { transform: translateY(-3%) rotate(-2.2deg); } 100% { transform: translateY(0) rotate(0); } } @keyframes stl-seite-blaettert { 0% { opacity: 0; transform: perspective(520px) rotateY(0deg); } 22% { opacity: 1; } 52% { opacity: 1; transform: perspective(520px) rotateY(-62deg); } 84% { opacity: 0.45; } 100% { opacity: 0; transform: perspective(520px) rotateY(0deg); } } /* --- 06 SANDUHR — „Langfristig denken" --------------------------------- WEG (b) UND (c) ZUSAMMEN, und das war eine Korrektur: der erste Versuch war reines (b), fuenf aufgelegte Koerner ueber dem Glas. Sie liefen — gemessen 0,0 % veraenderte Flaeche zwischen Ruhe und Geste. Ein Korn von 0,62 Einheiten Radius ist auf 200 px Darstellung 2,5 Bildpunkte breit; das ist da, aber es ist nicht zu sehen. Die Geste, die der Kunde beschrieben hat („der Sand rieselt von oben nach unten durch"), braucht mehr als ein paar Punkte: sie braucht die zwei SANDMASSEN. DREI LAGEN, GESCHNITTEN NACH FARBE UND HOEHE: sand-glas das Glas samt Gestell, ohne Sand, Loch aufgefuellt sand-oben der obere Kegel (Gold oberhalb von 48,5 %) sand-unten der untere Kegel (Gold unterhalb von 60 %) 48,5 % ist der Hals — dort ist das Glas mit 6,4 % Breite am engsten (gemessen: Zeile 726 bis 756 von 1536). Dazwischen liegt der gezeichnete Strahl; er bleibt im Glasbild und braucht nicht zu wandern. Uebereinandergelegt ergeben die drei wieder genau das Original. DIE GESTE: der obere Kegel schrumpft zum Hals hin, der untere waechst aus seinem Boden. Beides ist reines scaleY mit dem richtigen Drehpunkt — oben die Unterkante des Kegels (50 % 48,5 %), unten dessen Unterkante (50 % 81,2 %). Das liest sich als Durchrieseln, weil es genau das ist, was beim Durchrieseln passiert. MIT `transition` UND NICHT MIT `animation`, als einziges der sechs Symbole. Der Grund ist der Rueckweg: eine Animation, die am Ende haelt, muesste beim Verlassen zurueckspringen, und ein Sprung ist an einer so grossen Flaeche sofort zu sehen. Mit einer Ueberblendung laeuft der Sand hin, so lange der Zeiger steht, und ebenso ruhig wieder zurueck. DIE KOERNER BLEIBEN als aufgelegtes SVG — jetzt groesser (Radius 1,5 statt 0,62) und zu siebt. Sie fallen weiter, so lange der Zeiger steht; das ist die eine Stelle, an der eine Wiederholung richtig ist. Beim ersten Erscheinen laeuft ein einziger Durchgang, ohne dass sich die Kegel bewegen — ein Sanduhrglas, das beim Vorbeirollen von selbst leerlaeuft, waere eine Behauptung zu viel. */ .stl-aus__lage--sand-oben img { transform-origin: 50% 48.5%; } .stl-aus__lage--sand-unten img { transform-origin: 50% 81.2%; } .stl-aus__lage--sand-oben img, .stl-aus__lage--sand-unten img { transition: transform 1.5s linear; } /* HIER STAND KURZ EIN `will-change: transform`. Gemessen sprang das erste Bild dieser Ueberblendung auf 33,3 ms, und der Vorhalt sollte das beheben — er hat es nicht, der Wert blieb unveraendert. Die Ursache lag woanders: gemessen wurde die Sanduhr als ERSTES Symbol unmittelbar nach dem Eintritt aller sechs Kaesten, und der Sprung gehoerte noch dazu. Misst man sie als letztes, liegt ihr laengster Bildabstand bei 9,3 ms. Der Vorhalt ist deshalb wieder raus: eine Ebene, die nichts bringt, kostet nur Speicher. */ .stl-aus__kasten:hover .stl-aus__lage--sand-oben img, .stl-aus__kasten:focus-within .stl-aus__lage--sand-oben img { transform: scaleY(0.62); } .stl-aus__kasten:hover .stl-aus__lage--sand-unten img, .stl-aus__kasten:focus-within .stl-aus__lage--sand-unten img { transform: scaleY(1.22); } @keyframes stl-korn { 0% { opacity: 0; transform: translateY(0); } 14% { opacity: 0.95; } 78% { opacity: 0.95; } 100% { opacity: 0; transform: translateY(11px); } } /* --- Die Anfangszustände --------------------------------------------------- ALLES hängt an [data-stl-js] (gesetzt von stelle.js auf ). Ohne Javascript existiert keine dieser Regeln. */ /* data-stl-auf setzt stelle.js auf die Bausteine, die einzeln aufkommen. Bewusst per Skript und nicht im Markup: fällt das Skript aus, gibt es das Merkmal gar nicht, und es kann nichts unsichtbar hängen bleiben. */ [data-stl-js] [data-stl-auf] { opacity: 0; } /* Die Zeilenhüllen setzt stelle.js. .stl-zg ist die Kante, .stl-zg__i das Wort dahinter. DIE KANTE IST EIN clip-path, KEIN overflow: hidden. Ein overflow: hidden auf einem inline-block ändert dessen Grundlinie (sie wird dann die untere Randkante), und die ganze Überschrift verrutschte gegenüber dem Zustand ohne Javascript. clip-path ändert an der Anordnung NICHTS. Die negativen Werte sind Auslauf, kein Beschnitt: oben 100 % Luft für Oberlängen, seitlich 0,4 em für Überhänge, unten 0,14 em unter die Grundlinie — tief genug, dass keine Unterlänge angeschnitten wird. */ .stl-zg { display: inline-block; clip-path: inset(-100% -0.4em -0.14em -0.4em); } .stl-zg__i { display: inline-block; } [data-stl-js] .stl-geteilt { opacity: 1; } /* P0, 01.09.2026: 16 px und durchsichtig statt 200 % Zeilenhoehe — siehe den P0-Block bei den Bewegungen. */ [data-stl-js] .stl-geteilt .stl-zg__i { opacity: 0; transform: translateY(16px); } /* DIE ABSCHLUSSUEBERSCHRIFT WIRD ALS EINZIGE NICHT GETEILT — nachzulesen in stelle.js, hier steht der Grund. „Pruefe, ob Estera zu deinem beruflichen Schritt passt" traegt als einzige Ueberschrift der Seite einen Unterstrich (.stl-h2--unterstrichen, Sand auf Navy). text-decoration wird NICHT in atomare Inline-Kaesten hineingegeben, und Worthuellen sind genau das (display: inline-block). Nach einer Teilung zeichnete der Browser die Linie deshalb nur noch unter den LEERZEICHEN zwischen den Woertern — eine Reihe kurzer Striche statt einer durchgehenden Linie. Am Bildpunkt nachgeprueft, nicht vermutet. ZWEI AUSWEGE WURDEN DURCHGESPIELT UND BEIDE VERWORFEN: 1. Die Linie zusaetzlich auf den Worthuellen nachziehen. Ergibt zwar wieder eine durchgehende Linie im Endzustand — waehrend die Woerter aber noch hinter ihrer Kante stehen, schwebt die Strichreihe der Leerzeichen allein im Bild. Aufgenommen und angesehen: deutlich sichtbar, und es liest sich als Fehler. 2. Die Linie der Ueberschrift abschalten und nur die Woerter unterstreichen. Dann klafft an jedem Leerzeichen eine Luecke. Der Unterstrich ist abgenommene Gestaltung, die Zeilengeste ist eine Zutat. Also weicht die Zutat: diese eine Ueberschrift kommt als Ganzes auf (stl-steigt), alle uebrigen vier tragen die Zeilengeste. NEBENBEI REPARIERT AM 30.08.2026: dieser Kommentar war nie geschlossen. Das fehlende Kommentarende hat den naechsten Block mitverschluckt — die CSS lief trotzdem, weil dessen Ende den offenen Block beendete, aber eine Erklaerung war damit unsichtbar. */ /* Die Kartenziffer bekommt dieselbe Kante. .stl-zi ist die Hülle, die stelle.js um den Ziffernsatz legt. */ [data-stl-js] .stl-stufe__nr { clip-path: inset(-100% -0.4em -0.14em -0.4em); } [data-stl-js] .stl-stufe__nr .stl-zi { display: inline-block; opacity: 0; transform: translateY(16px); } /* P0: vorher 200 % */ /* Strichzeichnungen: --len setzt stelle.js aus der echten Pfadlänge. */ [data-stl-js] .stl-zeichnet path { stroke-dasharray: var(--len, 100); stroke-dashoffset: var(--len, 100); } /* Trennlinie und ihr Akzentstück. */ [data-stl-js] .stl-trenn { transform: scaleX(0); } [data-stl-js] .stl-trenn::before { transform: translateX(-50%) scaleX(0); } /* Kaesten, Karten, Hakenzeilen. Die GRAFIK ist ausgenommen und traegt ihren eigenen Anfangszustand auf — sonst laege ihre Bewegung zweimal uebereinander (einmal ueber das
, einmal ueber das Bild selbst) und der Weg waere doppelt so weit wie gedacht. */ [data-stl-js] .stl-aus__kasten { clip-path: inset(100% 0 0 0); } [data-stl-js] .stl-aus__kasten > *:not(.stl-aus__bild) { opacity: 0; transform: translateY(16px); } /* P0: vorher 26 px */ [data-stl-js] .stl-aus__bild picture { opacity: 0; transform: translateY(18px) scale(0.94); } [data-stl-js] .stl-haken__text { opacity: 0; transform: translateY(14px); } /* Zeitangabe, Titel und Satz des Schrittes steigen, die Ziffer faehrt aus ihrer Kante — getrennte Elemente, damit sich keine zwei Bewegungen auf einem Element ueberschreiben. .stl-stufe__zeit ist seit dem 01.09.2026 dabei (Back-Office-Seite, siehe Block am Ende der Datei). */ [data-stl-js] .stl-stufe__zeit, [data-stl-js] .stl-stufe__titel, [data-stl-js] .stl-stufe__text { opacity: 0; transform: translateY(16px); } /* Das leere Bildfenster zieht seinen Rahmen auf. AUSGELOEST WIRD ES VON SEINER SPALTE (.stl-zwei--bieten), NICHT VON SICH SELBST. Laege der clip-path auf dem beobachteten Element, meldete der IntersectionObserver es NIE als eingetreten: Chromium rechnet den eigenen clip-path des Ziels in dessen Schnittflaeche ein, und eine auf null zusammengezogene Flaeche schneidet sich mit nichts — der Rahmen bliebe dauerhaft unsichtbar. Bei den zwei Bildfeldern loest das ein Innenelement; hier gibt es keines (der Rahmen IST das Element), also uebernimmt die Spalte. */ [data-stl-js] .stl-platz { clip-path: inset(0 0 100% 0); } /* Die zwei Bildfelder. DIE KANTE SITZT AUF DEM BEHÄLTER, DAS NACHZIEHEN AUF DEM BILD — und der Behälter wird beobachtet, nicht das Bild. Läge der clip-path auf dem beobachteten Element selbst, meldete der IntersectionObserver es NIE als eingetreten: Chromium rechnet den eigenen clip-path des Ziels in dessen Schnittfläche ein, und eine auf null zusammengezogene Fläche schneidet sich mit nichts. Das Bild bliebe dauerhaft unsichtbar. */ /* Diese drei geben ihre Bewegung an ihre Teile weiter (bzw. tragen sie selbst als transform) und bleiben deshalb sichtbar — sonst blendete die Gruppe ein, waehrend ihre Teile noch einzeln kaemen, und schlimmer: die Regel „animation: none" weiter unten wuerde sie dauerhaft auf opacity 0 festnageln. */ [data-stl-js] .stl-trenn, [data-stl-js] .stl-bilder, [data-stl-js] .stl-schluss__medium { opacity: 1; } /* DIE KANTE SITZT AUF , DAS NACHZIEHEN AUF — beide Felder sind so gebaut. Sie duerfen NICHT auf demselben Element liegen: zwei animation-Kurzformen auf einem Element ueberschreiben sich, und die zuerst genannte Bewegung fiele ersatzlos aus. */ [data-stl-js] .stl-bilder picture, [data-stl-js] .stl-schluss__medium picture { clip-path: inset(0 0 100% 0); } [data-stl-js] .stl-bilder img, [data-stl-js] .stl-schluss__medium img { transform: translateY(-16px); } /* P0: vorher −8 % */ /* Die Bänder stehen still, bis ihr Abschnitt eintritt. animation-play-state hält auch die Verzögerung an, die Rechnung des Anlaufs bleibt also stimmig. */ [data-stl-js] .stl-band__spur { animation-play-state: paused; } /* --- Der Auslöser ---------------------------------------------------------- .ist-da setzt der IntersectionObserver in stelle.js, einmalig. */ [data-stl-js] [data-stl-auf].ist-da { animation: stl-steigt 0.5s var(--stl-e-raus) both; /* P0: vorher 0,8 s */ } /* Die Bausteine, die ihre Bewegung an ihre Teile weitergeben, tragen selbst keine. */ [data-stl-js] .stl-geteilt.ist-da, [data-stl-js] .stl-trenn.ist-da, [data-stl-js] .stl-bilder.ist-da, [data-stl-js] .stl-schluss__medium.ist-da { animation: none; } /* 1 — Überschriften zeilenweise. --z ist die Zeilennummer aus stelle.js. */ [data-stl-js] .stl-geteilt.ist-da .stl-zg__i { animation: stl-zeile 0.5s cubic-bezier(0.215, 0.61, 0.355, 1) both; /* P0: vorher 1,2 s */ animation-delay: calc(var(--z, 0) * 0.06s); /* P0: vorher 0,1 s je Zeile */ } /* Der Kopfbereich läuft als Folge: Vorzeile, Überschrift, Unterzeile, Knopf. Alle vier sind beim Laden im Bild, treten also im selben Augenblick ein — die Reihenfolge steckt deshalb ausschließlich in den Verzögerungen. P0, 01.09.2026: die Folge endet nach 0,32 s statt nach 1 s, das letzte Element steht nach 0,82 s. Vorher 0,15 / 0,3 + 0,1 je Zeile / 0,85 / 1 s. */ [data-stl-js] .stl-hero__vor.ist-da { animation-delay: 0s; } [data-stl-js] .stl-hero__h1.ist-da .stl-zg__i { animation-delay: calc(0.08s + var(--z, 0) * 0.06s); } [data-stl-js] .stl-hero__unter.ist-da { animation-delay: 0.24s; } [data-stl-js] .stl-hero__btn.ist-da { animation-delay: 0.32s; } /* Die Trennlinie wächst aus ihrer Mitte, das Akzentstück darauf danach. P0: 0,5 s und 0,4 s ab 0,15 s (vorher 0,8 s und 0,55 s ab 0,35 s). */ [data-stl-js] .stl-trenn.ist-da { animation: stl-linie 0.5s var(--stl-e-raus) both; } [data-stl-js] .stl-trenn.ist-da::before { animation: stl-linie-mitte 0.4s var(--stl-e-raus) 0.15s both; } /* 2 — die Häuser in „Was wir bieten". Die Liste wird als GRUPPE beobachtet, damit der Versatz gegen den Eintritt der Reihe läuft und nicht gegen den jeder einzelnen Zeile. --i ist die Nummer der Zeile, --dz die des Striches innerhalb des Symbols; beide setzt stelle.js. */ /* SEIT DEM 01.09.2026 STEHT DIE HAKENLISTE AUF KEINER DER BEIDEN SEITEN MEHR IM MARKUP (Optimierungsbriefing 13/14 und 16: sechs Kaesten statt Liste). Die Regeln bleiben fuer den Fall, dass sie zurueckkommt, und tragen die P0-Werte (0,5 s, 0,06 s je Zeile; vorher 0,9 / 0,7 s, 0,1 s). */ [data-stl-js] .stl-haken.ist-da li .stl-zeichnet path { animation: stl-zieht 0.5s var(--stl-e-weich) both; animation-delay: calc(var(--i, 0) * 0.06s + var(--dz, 0) * 0.08s); } [data-stl-js] .stl-haken.ist-da .stl-haken__text { animation: stl-steigt 0.5s var(--stl-e-raus) both; animation-delay: calc(var(--i, 0) * 0.06s + 0.1s); } /* Das leere Bildfenster daneben — seit dem 01.09.2026 nicht mehr im Markup, Regel bleibt (P0: 0,5 s, vorher 0,9 s). */ [data-stl-js] .stl-zwei--bieten.ist-da .stl-platz { animation: stl-blende 0.5s var(--stl-e-weich) both; } /* 4 — die sechs Kaesten in „Das macht dich aus" UND, seit dem 01.09.2026, die sechs Kaesten in „Dein System" / „Dein Arbeitsumfeld" (.stl-aus--system, ohne Grafik). Der Kasten waechst aus seiner Grundlinie, Ueberschrift, Haarstrich und Satz ruecken darin nach, und die GRAFIK kommt zuletzt — sie ist das Einzige, was in diesem Kasten eine eigene Bewegung verdient. P0, 01.09.2026: 0,5 s und 0,06 s je Kasten (vorher 0,9 s und 0,09 s) — der sechste Kasten steht damit nach 0,3 + 0,05 + 0,5 = 0,85 s, vorher nach 1,43 s. */ [data-stl-js] .stl-aus.ist-da .stl-aus__kasten { animation: stl-waechst 0.5s var(--stl-e-raus) both; animation-delay: calc(var(--i, 0) * 0.06s); } [data-stl-js] .stl-aus.ist-da .stl-aus__kasten > *:not(.stl-aus__bild) { animation: stl-hebt 0.5s var(--stl-e-raus) both; animation-delay: calc(var(--i, 0) * 0.06s + 0.05s); } /* DIE GRAFIK, WENN SIE ZUM ERSTEN MAL INS BILD KOMMT. Ruhig und kurz: 0,5 s (P0; vorher 0,85 s), 18 px Weg und 6 Prozent Groesse. Sie sitzt auf , damit das Bild darin frei bleibt fuer das Ueberfahren — zwei Bewegungen auf einem Element wuerden sich gegenseitig ausloeschen. */ [data-stl-js] .stl-aus.ist-da .stl-aus__bild picture { animation: stl-grafik 0.5s var(--stl-e-raus) both; animation-delay: calc(var(--i, 0) * 0.06s + 0.1s); } /* --- 4b DIE SECHS SYMBOLGESTEN ------------------------------------------- Aufbau und Herleitung jeder einzelnen Geste stehen weiter oben bei den Bildfolgen. Hier steht nur, WANN sie laufen. EINE GEMEINSAME UHR FUER ALLE SECHS: --auf ist der Zeitpunkt, zu dem das Symbol seinen Auftritt (stl-grafik, seit P0 0,5 s ab --i · 0,06 s + 0,1 s) hinter sich hat. Erst dann faengt die eigene Geste an — sonst liefen Auftritt und Geste uebereinander und man saehe beides nicht. --i · 0,06 s + 0,1 s + 0,5 s = --i · 0,06 s + 0,6 s Aufgerundet auf 0,65 s (vorher --i · 0,09 s + 1,1 s). Die Gesten selbst behalten ihre Laenge — sie sind Inhalt, kein Einblenden (P0, 01.09.2026). */ [data-stl-js] .stl-aus.ist-da .stl-aus__bild { --auf: calc(var(--i, 0) * 0.06s + 0.65s); } /* 01 die zweite Sprechblase kommt nach */ [data-stl-js] .stl-aus.ist-da .stl-aus__lage--hinten { animation: stl-reden-nach 0.75s var(--stl-e-raus) both; animation-delay: var(--auf); } /* 02 der Buegel faellt ins Schloss */ [data-stl-js] .stl-aus.ist-da .stl-aus__lage--buegel { animation: stl-schloss-zu 0.7s cubic-bezier(0.34, 0, 0.2, 1) both; animation-delay: var(--auf); } /* 03 die Waage schwingt aus und pendelt ein */ [data-stl-js] .stl-aus.ist-da .stl-aus__lage--balken { animation: stl-waage-schwingt 1.5s cubic-bezier(0.33, 0, 0.3, 1) both; animation-delay: var(--auf); } /* 04 der Haken zeichnet sich */ [data-stl-js] .stl-aus.ist-da .stl-aus__lage--haken { animation: stl-haken-zieht 0.85s cubic-bezier(0.42, 0, 0.3, 1) both; animation-delay: var(--auf); } /* 05 der Hut hebt ab, danach blaettert die Seite */ [data-stl-js] .stl-aus.ist-da .stl-aus__lage--hut { animation: stl-hut-hebt 1.05s var(--stl-e-weich) both; animation-delay: var(--auf); } [data-stl-js] .stl-aus.ist-da .stl-aus__auf--seite { animation: stl-seite-blaettert 1.35s var(--stl-e-weich) both; animation-delay: calc(var(--auf) + 0.55s); } /* 06 der Sand rieselt einmal durch. --k ist die Nummer des Korns; sie steht als Stilangabe am Korn selbst im Markup, damit die fuenf versetzt fallen statt im Block. */ [data-stl-js] .stl-aus.ist-da .stl-aus__auf--sand { opacity: 1; } [data-stl-js] .stl-aus.ist-da .stl-aus__korn { animation: stl-korn 1.15s linear both; animation-delay: calc(var(--auf) + var(--k, 0) * 0.19s); } /* --- 4c DIESELBEN SECHS BEIM UEBERFAHREN -------------------------------- Sie sitzen auf dem , waehrend der Eintritt auf der -Lage liegt: zwei `animation`-Kurzformen auf demselben Element loeschen sich gegenseitig aus, getrennt komponieren sie sich. `focus-within` steht ueberall daneben, damit die Geste auch kommt, wenn jemand mit der Tastatur in den Kasten faehrt. ES LAEUFT JE KASTEN GENAU EINE GESTE. Wo zwei Teile beteiligt sind (Sprechblasen, Buch), laufen sie NACHEINANDER. */ /* 01 erst die vordere Blase, einen Wimpernschlag spaeter die hintere */ .stl-aus__kasten:hover .stl-aus__lage--vorn img, .stl-aus__kasten:focus-within .stl-aus__lage--vorn img { animation: stl-reden-tupf 0.62s var(--stl-e-weich); transform-origin: 62% 62%; } .stl-aus__kasten:hover .stl-aus__lage--hinten img, .stl-aus__kasten:focus-within .stl-aus__lage--hinten img { animation: stl-reden-tupf 0.62s var(--stl-e-weich) 0.17s; } /* 02 das Schloss oeffnet sich und faellt wieder zu */ .stl-aus__kasten:hover .stl-aus__lage--buegel img, .stl-aus__kasten:focus-within .stl-aus__lage--buegel img { animation: stl-schloss-auf 1.05s cubic-bezier(0.34, 0, 0.2, 1); } /* 03 die Waage bekommt einen Stoss und pendelt ein */ .stl-aus__kasten:hover .stl-aus__lage--balken img, .stl-aus__kasten:focus-within .stl-aus__lage--balken img { animation: stl-waage-tippt 1.4s cubic-bezier(0.33, 0, 0.3, 1); } /* 04 der Haken zeichnet sich noch einmal */ .stl-aus__kasten:hover .stl-aus__lage--haken img, .stl-aus__kasten:focus-within .stl-aus__lage--haken img { animation: stl-haken-zieht 0.85s cubic-bezier(0.42, 0, 0.3, 1); } /* 05 der Hut hebt ab, danach blaettert die Seite */ .stl-aus__kasten:hover .stl-aus__lage--hut img, .stl-aus__kasten:focus-within .stl-aus__lage--hut img { animation: stl-hut-hebt 1.05s var(--stl-e-weich); } .stl-aus__kasten:hover .stl-aus__auf--seite, .stl-aus__kasten:focus-within .stl-aus__auf--seite { animation: stl-seite-blaettert 1.35s var(--stl-e-weich) 0.5s; } /* 06 der Sand rieselt weiter, so lange der Zeiger steht */ .stl-aus__kasten:hover .stl-aus__auf--sand, .stl-aus__kasten:focus-within .stl-aus__auf--sand { opacity: 1; } .stl-aus__kasten:hover .stl-aus__korn, .stl-aus__kasten:focus-within .stl-aus__korn { animation: stl-korn 1.15s linear infinite; animation-delay: calc(var(--k, 0) * 0.19s); } /* 2 und 3 — die Schrittliste in „Das erwartet dich". Erst faehrt die Ziffer aus ihrer Zeile heraus, dann kommen Titel und Satz. Der Schritt baut sich damit in derselben Reihenfolge auf, in der er gelesen wird. Der Versatz laeuft gegen den Eintritt der GRUPPE (.stl-folge) und nicht gegen den jedes Schrittes: die Liste steht als Ganzes im Bild, und ein Beobachter je Zeile wuerde die unteren Schritte erst nachziehen, wenn man ohnehin schon vorbei ist. DIE ZEICHNENDEN STRICHE SIND HIER RAUS. Sie gehoerten zum Symbolfeld der Karte (.stl-karte__zeichen), und das ist am 31.08.2026 mit den Karten entfallen. `stl-zieht` laeuft weiter — aber nur noch in „Was wir bieten", wo es die Haeuser zeichnet. */ /* P0, 01.09.2026: 0,5 s je Teil, 0,06 s je Stufe, innerhalb der Stufe 0 / 0,05 / 0,1 s (vorher 0,9 / 0,8 s, 0,1 s je Stufe, 0,06 / 0,14 / 0,22). Fuenf Stufen: der letzte Satz steht nach 0,24 + 0,1 + 0,5 = 0,84 s. Die Zeitangabe (.stl-stufe__zeit, Back-Office) laeuft mit der Ziffer. */ [data-stl-js] .stl-folge.ist-da .stl-stufe__nr .stl-zi, [data-stl-js] .stl-folge.ist-da .stl-stufe__zeit { animation: stl-zeile 0.5s var(--stl-e-raus) both; animation-delay: calc(var(--i, 0) * 0.06s); } [data-stl-js] .stl-folge.ist-da .stl-stufe__titel { animation: stl-steigt 0.5s var(--stl-e-raus) both; animation-delay: calc(var(--i, 0) * 0.06s + 0.05s); } [data-stl-js] .stl-folge.ist-da .stl-stufe__text { animation: stl-steigt 0.5s var(--stl-e-raus) both; animation-delay: calc(var(--i, 0) * 0.06s + 0.1s); } /* Die zwei Bildfelder entstehen. P0: 0,55 s (vorher 1,15 s). */ [data-stl-js] .stl-bilder.ist-da picture, [data-stl-js] .stl-schluss__medium.ist-da picture { animation: stl-blende 0.55s var(--stl-e-weich) both; } [data-stl-js] .stl-bilder.ist-da img, [data-stl-js] .stl-schluss__medium.ist-da img { animation: stl-nach 0.55s var(--stl-e-weich) both; } /* 5 — die zwei Laufbänder fahren an. */ [data-stl-js] .stl-band.ist-da .stl-band__spur { animation-play-state: running; } [data-stl-js] .stl-band.ist-da .stl-band__satz { animation: stl-anlauf 1.6s var(--stl-e-anlauf) both; } /* =========================================================================== RUHIGE DARSTELLUNG (prefers-reduced-motion: reduce) BEI reduce STEHT ALLES SOFORT IM ENDZUSTAND. Keine Ausnahme. Der erste und wichtigste Riegel steht in stelle.js: dort wird bei „reduce" ausgestiegen, bevor [data-stl-js] gesetzt wird. Damit greift keine einzige Regel aus dem Bewegungsabschnitt, es wird nichts geteilt, es werden keine Pfadlaengen gesetzt und es wird nichts beobachtet. Der zweite Riegel steht hier und ist fuer den Fall gebaut, dass jemand die Einstellung NACH dem Laden umstellt: dann ist [data-stl-js] laengst gesetzt und die Woerter sind laengst in ihre Huellen geteilt. Jeder Anfangszustand wird unten ausdruecklich zurueckgenommen, und zwar auf denselben Endwert, den die Animation sonst erreicht haette. Wie bisher: die Baender stehen still und zeigen ihren Satz, das Kopfvideo wird ausgeblendet und darunter steht das Standbild — ohne Javascript ist das bereits der vollstaendige Weg; stelle.js haelt es zusaetzlich an. =========================================================================== */ @media (prefers-reduced-motion: reduce) { .stl-band__spur { animation: none; transform: none; } .stl-hero__video { display: none; } .stl-zurueck, .stl-hero__btn { transition: none; } /* HIER STANDEN DREI RUECKNAHMEN FUER „Das erwartet dich": zwei fuer den Kartenstapel und eine fuer das klebende Bildfeld. An diesem Abschnitt haengt seit dem 31.08.2026 nichts mehr am Rollweg — kein Stapel, keine Karten, kein `sticky`. Es bleibt nichts zurueckzunehmen. */ /* --- Jeder Anfangszustand des Bewegungsabschnitts, zurueckgenommen ------ */ [data-stl-js] [data-stl-auf], [data-stl-js] .stl-haken__text, [data-stl-js] .stl-geteilt .stl-zg__i, [data-stl-js] .stl-stufe__nr .stl-zi, [data-stl-js] .stl-stufe__zeit, [data-stl-js] .stl-stufe__titel, [data-stl-js] .stl-stufe__text, [data-stl-js] .stl-aus__bild picture, [data-stl-js] .stl-aus__kasten > * { opacity: 1; } [data-stl-js] .stl-aus__kasten, [data-stl-js] .stl-platz, [data-stl-js] .stl-stufe__nr, [data-stl-js] .stl-bilder picture, [data-stl-js] .stl-schluss__medium picture { clip-path: none; } /* Die Kante der Zeilenhuellen wird ganz aufgehoben; ohne Bewegung hat sie keine Aufgabe mehr und koennte nur noch etwas anschneiden. */ .stl-zg { clip-path: none; } [data-stl-js] .stl-geteilt .stl-zg__i, [data-stl-js] .stl-stufe__nr .stl-zi, [data-stl-js] .stl-haken__text, [data-stl-js] .stl-stufe__zeit, [data-stl-js] .stl-stufe__titel, [data-stl-js] .stl-stufe__text, [data-stl-js] .stl-aus__kasten > *, [data-stl-js] .stl-aus__bild picture, [data-stl-js] .stl-trenn, [data-stl-js] .stl-band__satz, [data-stl-js] .stl-bilder img, [data-stl-js] .stl-schluss__medium img { transform: none; } /* Auch das Ueberfahren steht still: der Haarstrich bewegt sich nicht. */ .stl-aus__strich::before { transition: none; } .stl-aus__kasten:hover .stl-aus__strich::before, .stl-aus__kasten:focus-within .stl-aus__strich::before { transform: none; } /* --- DIE SECHS SYMBOLGESTEN STEHEN STILL — 31.08.2026 ------------------- Alle drei Ebenen auf einmal: die Lage (Eintritt), das Bild darin (Ueberfahren) und die zwei aufgelegten SVG. `animation: none` und nicht nur `animation-play-state: paused` — angehalten hiesse, sie stuenden irgendwo in ihrer Bahn fest, und bei den Lagen waere das ein schwebender Buegel oder eine schiefe Waage. Danach wird jede Lage ausdruecklich auf ihren Ruhewert gesetzt. Das ist Pflicht und nicht Vorsicht: die Eintrittsgesten laufen mit `both`, ihr Endwert bliebe sonst an der Lage haengen, wenn jemand die Einstellung erst NACH dem Laden umstellt. ERGEBNIS: die sechs Symbole sehen aus wie vor dem 31.08.2026 — zusammengesetzt aus ihren Lagen ist das Bildpunkt fuer Bildpunkt das gelieferte Original, und die zwei aufgelegten SVG sind unsichtbar. */ .stl-aus__lage, .stl-aus__lage img, .stl-aus__auf, .stl-aus__korn, [data-stl-js] .stl-aus.ist-da .stl-aus__lage, [data-stl-js] .stl-aus.ist-da .stl-aus__auf, [data-stl-js] .stl-aus.ist-da .stl-aus__korn, .stl-aus__kasten:hover .stl-aus__lage img, .stl-aus__kasten:focus-within .stl-aus__lage img, .stl-aus__kasten:hover .stl-aus__auf, .stl-aus__kasten:focus-within .stl-aus__auf, .stl-aus__kasten:hover .stl-aus__korn, .stl-aus__kasten:focus-within .stl-aus__korn { animation: none; } .stl-aus__lage, .stl-aus__lage img { opacity: 1; transform: none; clip-path: none; } /* Die Sandkegel laufen als einzige ueber `transition` und nicht ueber `animation` (Begruendung oben bei Symbol 06). `animation: none` fasst sie deshalb nicht — die Ueberblendung muss eigens abgeschaltet und der Endwert eigens zurueckgenommen werden. */ .stl-aus__lage--sand-oben img, .stl-aus__lage--sand-unten img { transition: none; } .stl-aus__kasten:hover .stl-aus__lage--sand-oben img, .stl-aus__kasten:focus-within .stl-aus__lage--sand-oben img, .stl-aus__kasten:hover .stl-aus__lage--sand-unten img, .stl-aus__kasten:focus-within .stl-aus__lage--sand-unten img { transform: none; } /* Die zwei aufgelegten SVG bleiben unsichtbar — sie sind Bewegung und sonst nichts. */ .stl-aus__auf, [data-stl-js] .stl-aus.ist-da .stl-aus__auf, .stl-aus__kasten:hover .stl-aus__auf, .stl-aus__kasten:focus-within .stl-aus__auf { opacity: 0; } /* Das Akzentstueck der Trennlinie behaelt seinen Ausgleich — der ist seine Lage, nicht seine Bewegung. */ [data-stl-js] .stl-trenn::before { transform: translateX(-50%); } /* Die Striche stehen fertig gezeichnet da. */ [data-stl-js] .stl-zeichnet path { stroke-dasharray: none; stroke-dashoffset: 0; } [data-stl-js] .stl-band__spur { animation-play-state: running; } /* Und keine einzige Animation laeuft. */ [data-stl-js] [data-stl-auf].ist-da, [data-stl-js] .stl-geteilt.ist-da .stl-zg__i, [data-stl-js] .stl-hero__h1.ist-da .stl-zg__i, [data-stl-js] .stl-trenn.ist-da, [data-stl-js] .stl-trenn.ist-da::before, [data-stl-js] .stl-haken.ist-da li .stl-zeichnet path, [data-stl-js] .stl-haken.ist-da .stl-haken__text, [data-stl-js] .stl-zwei--bieten.ist-da .stl-platz, [data-stl-js] .stl-aus.ist-da .stl-aus__kasten, [data-stl-js] .stl-aus.ist-da .stl-aus__kasten > *, [data-stl-js] .stl-aus.ist-da .stl-aus__bild picture, [data-stl-js] .stl-folge.ist-da .stl-stufe__nr .stl-zi, [data-stl-js] .stl-folge.ist-da .stl-stufe__zeit, [data-stl-js] .stl-folge.ist-da .stl-stufe__titel, [data-stl-js] .stl-folge.ist-da .stl-stufe__text, [data-stl-js] .stl-bilder.ist-da picture, [data-stl-js] .stl-bilder.ist-da img, [data-stl-js] .stl-schluss__medium.ist-da picture, [data-stl-js] .stl-schluss__medium.ist-da img, [data-stl-js] .stl-band.ist-da .stl-band__satz { animation: none; } } /* =========================================================================== „DEIN SYSTEM" / „DEIN ARBEITSUMFELD" — EINSPALTIG UND MITTIG, 31.08.2026 Kundenwunsch woertlich: „Bei dieser Section haben wir kein passendes Bild. Das bedeutet: Entferne das Bildfenster und packe den Text mittig in die Section." Der Abschnitt stand seit dem 29.08. zweispaltig: links der Text, rechts ein LEERES Bildfenster (.stl-platz, quadratisch, nur Kontur). Das war damals Absicht — man sollte sehen, dass ein Bild fehlt. Ein Bild ist seither nicht gekommen, und der leere Rahmen wirkt inzwischen wie ein Fehler statt wie ein Platzhalter. DIE AENDERUNG STEHT BEWUSST IN DER CSS, NICHT IM MARKUP. Das
mit der Beschreibung, wie das Bild einmal einzusetzen ist (Verhaeltnis 4:5, mindestens 1150 x 1438 px, Motiv ohne Gesichter), bleibt samt seinem Vermerk im HTML stehen. Kommt das Bild, faellt hier ein Block weg und der Abschnitt ist wieder zweispaltig — ohne dass jemand die Vorgaben neu zusammensuchen muss. Der Satzspiegel ist auf 68ch begrenzt: ueber die volle Breite von 1180 px waeren es rund 150 Zeichen je Zeile, das liest niemand mehr. =========================================================================== */ .stl-zwei--bieten { grid-template-columns: minmax(0, 1fr); } .stl-zwei--bieten .stl-platz { display: none; } .stl-zwei--bieten > *:not(.stl-platz) { max-width: 68ch; margin-inline: auto; } .stl-zwei--bieten .stl-h2, .stl-zwei--bieten .stl-kleinzeile, .stl-zwei--bieten .stl-prosa-w, .stl-zwei--bieten .stl-macht__lead { text-align: center; } /* =========================================================================== DER EIGENTLICHE GRUND, WARUM DAS ABSCHLUSSBILD UNSICHTBAR WAR — 31.08.2026 `` ist ein INLINE-Kasten. Die Auftrittsbewegung legt ein `clip-path` darauf (siehe `[data-stl-js] .stl-schluss__medium picture`). Bei einem Inline-Element ist der Bezugskasten eines Zuschnitts die Flaeche seiner Zeilenfragmente — das `` darin ist aber ein Blockkasten und liegt in keinem davon. Der Zuschnitt schneidet deshalb ALLES weg, auch im vollstaendig geoeffneten Zustand. Gemessen ueber dem Bildfeld: vorher 0,6 bis 1,7 kB Bildinhalt (also leer), danach 84 bis 277 kB. An JEDER Breite, von 390 bis 1920. Das Schwesterfeld .stl-bilder hatte das Problem nie, weil es weiter oben in dieser Datei `picture { display: block }` mitbekommt. Am Abschlussfeld fehlte genau diese eine Zeile. Sie steht hier und damit auf BEIDEN Stellenseiten — nicht in einer seitenweisen Datei, denn beide Seiten sind gleich gebaut und hatten denselben Fehler. Zusammen mit dem entfernten `loading="lazy"` am selben Bild (Vermerk im HTML) sind das zwei voneinander unabhaengige Ursachen fuer dasselbe Symptom gewesen. Beide muessen behoben bleiben. */ .stl-schluss__medium picture { display: block; } /* =========================================================================== „DEIN SYSTEM" / „DEIN ARBEITSUMFELD" ALS SECHS KAESTEN — 01.09.2026 Optimierungsbriefing, Abschnitt 13/14 (Berater) und 16 (Back-Office), DESIGN, woertlich: „Sechs Vorteile als geschlossenes System: Alle sechs Blöcke in einer konsistenten Anordnung zeigen. Nicht beim Scrollen einzeln über große Höhen verteilen. Idealerweise 3 x 2 Karten auf Desktop und eine Karte pro Zeile auf Mobil." KEIN NEUER STIL. Die Kaesten sind .stl-aus__kasten — Haarlinie, 14 px Radius, Hauch Sand, Titel, Goldstrich, Satz, Gold beim Ueberfahren — genau die Machart, die „Dein Profil" auf beiden Seiten schon traegt. Nur das Symbolbild fehlt (es gibt zu diesen sechs Punkten keine passenden Grafiken, und erfunden wird nichts). Dieser Block aendert deshalb ausschliesslich die ANORDNUNG: ab 992 px 3 x 2, gleich hohe Kaesten (grid-auto-rows: 1fr) 760 bis 991 px 2 x 3 unter 760 px eine Karte je Zeile WARUM NICHT DAS VERSETZTE RASTER DES PROFILS: das Briefing verlangt hier „eine konsistente Anordnung" — sechs gleiche Kaesten, damit die sechs Vorteile als EIN System gelesen werden. Das versetzte Raster lebt vom Ungleichen und bleibt dem Profil vorbehalten; so unterscheiden sich die beiden Abschnitte, obwohl sie dieselbe Kastenmachart tragen. DIE PLATZIERUNGEN DES VERSETZTEN RASTERS (nth-child, grid-column / grid-row, oben bei .stl-aus und in den zwei Medienabfragen) muessen hier ausdruecklich aufgehoben werden — daher `> .stl-aus__kasten:nth-child(n)` mit drei Klassen Gewicht, das sticht jede der nth-child-Regeln, egal wo sie in der Datei steht. DAS RASTER STEHT AUSSERHALB DER 68ch-SPALTE. Der Block „Einspaltig und mittig" oben begrenzt jedes Kind von .stl-zwei--bieten auf 68ch, damit Ueberschrift und Liste lesbar bleiben. Fuer drei Kaesten nebeneinander sind 68ch (rund 650 px) zu wenig; das Raster hebt die Grenze fuer sich auf und nimmt die Containerbreite. ABSTAND ZUR TRENNLINIE: .stl-aus bringt oben clamp(34..58 px) mit, die Trennlinie darueber schon clamp(22..36 px) — zusammen bis 94 px Leere, und genau solche Loecher nennt das Briefing (Abschnitt 19, „vertikaler Rhythmus"). Hier deshalb nur ein kleiner Rest. =========================================================================== */ .stl-zwei--bieten > .stl-aus--system { max-width: none; width: 100%; margin-top: clamp(6px, 0.8vw, 14px); } .stl-aus--system { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 1fr; } .stl-aus--system > .stl-aus__kasten:nth-child(n) { grid-column: auto; grid-row: auto; } /* Ohne Grafik traegt der Kasten nur Titel, Strich und Satz. Damit die sechs auch bei verschieden langen Saetzen als eine Reihe stehen, sitzt der Inhalt oben (der Kasten selbst wird vom Raster gestreckt). */ .stl-aus--system > .stl-aus__kasten { justify-content: flex-start; } @media (max-width: 991px) { .stl-aus--system { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 759px) { .stl-aus--system { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; } } /* =========================================================================== DIE ZEITANGABE DER SCHRITTLISTE — 01.09.2026, Back-Office-Seite Optimierungsbriefing, Abschnitt 17 (DESIGN): „Alle vier Stufen in gleichartig gestalteten Karten oder einer klaren Timeline. Zeitangabe, Überschrift und ein kurzer Text erhalten immer dieselbe Hierarchie." Bis heute steckte die Zeit im Titel („WOCHE 1 – ÜBERBLICK"). Jetzt ist sie ein eigenes Feld ueber dem Titel — als Kleinzeile, in der Schrift und Sperrung der Kleinzeilen dieser Seite (.stl-kleinzeile: Jost, Versalien, --track-wide) und in der Bronze der Ziffernspalte (--stl-erw-bronze, 5,41:1 auf Weiss), die die Berater-Seite an derselben Stelle fuehrt. Beide Seiten lesen sich damit gleich: links der Marker (dort Ziffer, hier Zeit), dann Titel, dann Satz. Die Ziffernspalte selbst kommt dafuer NICHT zurueck: sie ist clamp(2.0rem, 2.7vw, 2.6rem) breit, „Woche 2 bis 4" passt da nicht hinein, und eine Ziffer VOR einer Zeitangabe waere dieselbe Sache zweimal gezaehlt. Kein Fliesstext, deshalb darf der Grad unter 16 px liegen (Etikett wie .stl-kleinzeile, 12,8 bis 15,2 px). =========================================================================== */ .stl-stufe__zeit { margin: 0 0 clamp(4px, 0.4vw, 7px); font-family: var(--font-ui); font-weight: 500; font-size: clamp(0.80rem, 0.86vw, 0.95rem); line-height: 1.4; letter-spacing: var(--track-wide); text-transform: uppercase; color: var(--stl-erw-bronze); } /* =========================================================================== TELEFON — 03.09.2026, Mobiloptimierung vor dem Livegang Optimierungsbriefing, Abschnitt 19 („Mobile"): Karten einspaltig, Knoepfe volle Breite, keine Mini-Schriften, keine abgeschnittenen Ticker; dazu „Vertikaler Rhythmus: Grosse weisse Felder reduzieren". ALLES HIER IST GEMESSEN (Playwright, 360 / 390 / 430 x 800 und quer 844 x 390, deviceScaleFactor 2), die Zahl steht bei jeder Regel. Es wird kein Wortlaut und keine Struktur angefasst, keine neue Farbe, keine neue Schrift. Der Umbruchpunkt 620 px ist der, den diese Datei fuer den schmalen Fall schon fuehrt (Container, Hakenzeichen, Knopfbreite). WAS VOR DIESEM BLOCK SCHON STIMMTE und deshalb hier NICHT steht: Ueberlauf 0 px an allen Breiten; die zwoelf Kaesten stehen einspaltig (Raster unter 700 bzw. 760 px) mit 18 bis 20 px Innenabstand; der Abschlussknopf ist seit dem 30.08. auf voller Breite; Kartentitel 20 px, Kartentext 16 px, Stufensatz 16 px, Fliesstext 17 bis 19 px; die Kleinzeilen (12,8 px, Versalien) messen 5,13 bis 9,98 : 1. ZWEI ABFRAGEN, EIN BLOCK: hochkant (bis 620 px) UND quer (Hoehe bis 500 px). Das Telefon quer ist 844 px breit und fiele sonst in den Tablet-Fall — gemessen dort: Naht Onboarding -> Abschluss 101 px, „Zurueck zur Uebersicht" 31 px hoch, Onboarding 34 % leer. Nur der Hero-Knopf auf voller Breite bleibt dem Hochformat vorbehalten (unten, eigener Block): 796 px Knopf quer waere kein Knopf mehr. =========================================================================== */ @media (max-width: 620px), (max-height: 500px) and (orientation: landscape) { /* ABSCHNITTSLUFT. Gemessen bei 390 px, Inhalt zu Inhalt ueber die Naht: Kopf -> Dein System 36 + 40 = 76 px Onboarding -> Abschluss 44 + 56 = 100 px Abschluss -> Fuss 44 + 62 = 106 px Grenze aus dem Auftrag: 72 px. Die Untergrenzen der fuenf Luftwerte sinken deshalb auf 32 bis 40 px; die Rechnung danach: Kopf -> Dein System 32 + 32 = 64 Dein System -> Band A 40 Band A -> Dein Profil 32 Dein Profil -> Band B 40 Band B -> Onboarding 36 Onboarding -> Abschluss 32 + 40 = 72 Die Deckel (vw-Anteil, Maximum) bleiben, oberhalb von 620 px aendert sich nichts. */ .stl { --stl-luft-130: 40px; --stl-luft-104: 36px; --stl-luft-91: 32px; --stl-luft-85: 32px; --stl-luft-60: 32px; } /* Der Fuss darunter hat dieselbe Flaeche (Navy-900) und bringt selbst 62 px Luft mit (schluss.css, nicht Teil dieses Auftrags). Mit 32 px hier waeren es 94 px durchgehend dunkle Leere zwischen dem Bild und der Wortmarke des Fusses, mit 24 px 86 — der Pruefer hat 86 als zu viel gemeldet (Grenze 72). Also 10 px: 10 + 62 = 72. Der Abschnitt endet mit dem Bild, und das Bild braucht keine eigene Luft unter sich, wenn der Fuss sie bringt. Senkt der Fuss seine 62 px, bleibt hier trotzdem nichts nachzuziehen — unter 40 px wird es erst bei einem Fuss unter 30 px. */ .stl-schluss { padding-bottom: 10px; } /* DIE GROSSE UEBERSCHRIFT („Wir suchen keine fertige Schablone …", .stl-h2-gross). Pruefer, 360 px: „Entwicklungspotenzial." misst bei 36,8 px rund 330 px und stand 10 px vor der rechten Kante (links 20). Bei 32 px (2,0 rem) sind es 287 px — 16 px Luft je Seite bei 360, 31 px bei 390. Silbentrennung war die andere Moeglichkeit; ein getrenntes Wort in der lautesten Zeile der Seite ist die schlechtere. */ .stl { --stl-t-gross: 2.0rem; } /* KLEINZEILEN MIT ZIFFER, die zweizeilig umbrechen („04 — BEREIT FUER DEINE NAECHSTE STUFE?" bei 360 bis 430): die Ziffer stand mittig neben zwei Zeilen. Oben ausgerichtet steht sie auf der ersten Zeile — Ziffer und Wort haben dieselbe Zeilenhoehe (1,4), die Grundlinien treffen sich. */ .stl-kleinzeile { align-items: flex-start; } /* DIE VORZEILE IM KOPF. „Vollzeit · Immobilienabwicklung & Kunden- betreuung" brach bei 360 px in drei Zeilen (Sperrung 0,24 em). Mit 0,16 em sind es zwei — der Grad bleibt 12,8 px, die Versalien bleiben, nur die Sperrung ist enger; der Kicker der Startseite steht bei schmalen Fenstern ebenso enger. */ .stl-hero__vor { letter-spacing: 0.16em; } /* ONBOARDING: der Abschnitt zeigte 27 % Leerflaeche (Grenze 25 %). Ueberschrift -> erster Schritt 32 -> 24 px, Polster je Schritt 13,6 -> 9,6 px (das sind 19 statt 27 px zwischen zwei Schritten), Liste -> Bild 36 -> 28 px. */ .stl-folge { margin-top: 24px; } /* 0,6 rem und nicht 0,7: mit 0,7 stand die Back-Office-Fassung (vier kurze Schritte) bei 390 px noch auf 26 % Leer, mit 0,6 rem (19 px zwischen zwei Schritten) auf 24 %. */ .stl-stufe { padding-block: 0.6rem; } .stl-zwei--erwartet, .stl-zwei--schluss { row-gap: 28px; } /* „ZURUECK ZUR UEBERSICHT" ist ein Verweis, steht aber im Knopfpaar des Abschlusses. Gemessen 143 x 31 px — unter den 44 px Trefferhoehe, die fuer alles im Knopfpaar gelten. Die Hoehe kommt ueber Innenabstand; die Haarlinie unter dem Text wandert dabei NICHT mit dem Innenabstand nach unten, sondern bleibt als Unterstreichung am Wort — deshalb text-decoration statt border-bottom. */ .stl-schluss__aktionen { gap: 0.4rem; } .stl-zurueck { display: inline-flex; align-items: center; min-height: 44px; padding: 0.5rem 0.15em; border-bottom: 0; text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: var(--stl-zeichen); text-underline-offset: 0.18em; } .stl-zurueck:hover { text-decoration-color: currentColor; } } /* HERO-KNOPF AUF VOLLER BREITE — nur hochkant. Gemessen 294 px von 350 (390 px Fenster), also 75 vw; das Briefing verlangt volle Breite. .btn ist in base.css inline-flex, deshalb justify-content und nicht nur width. */ @media (max-width: 620px) { .stl-hero__btn { width: 100%; justify-content: center; } /* „Zurueck zur Uebersicht" mittig unter dem Abschlussknopf: der Knopf hat hier die volle Breite, die Mitte ist damit die Achse. Quer stehen beide nebeneinander und bleiben links, wie der Text darueber. */ .stl-schluss__aktionen { justify-content: center; } /* EINE AUSRICHTUNG FUER ALLE ABSCHNITTSKOEPFE — Pruefer, Runde 1: „01/02 zentriert, 03 linksbuendig, der Rhythmus kippt einmal je Seite." Entscheidung: hochkant beginnt JEDER Abschnitt mittig — Kopfbereich, Dein System und Dein Profil sind es schon; Onboarding und Abschluss ziehen mit Kleinzeile, Ueberschrift, Absatz und Hinweis nach. Die Schrittliste selbst bleibt linksbuendig: eine nummerierte Liste liest sich von der Ziffer aus, mittig gesetzt haette sie keine Kante mehr. Quer (zweispaltig, Text neben Bild) bleibt alles links wie am Bildschirm — dort steht der Text neben etwas, nicht ueber etwas. */ .stl-erwartet .stl-kleinzeile, .stl-schluss .stl-kleinzeile { justify-content: center; text-align: center; } .stl-erwartet .stl-h2, .stl-schluss .stl-h2, .stl-schluss__text, .stl-schluss__hinweis { text-align: center; margin-inline: auto; } /* DAS SYMBOLFELD IN „DEIN PROFIL". Pruefer, 360 px: Feld 140 x 140, das Symbol darin rund 50 px, also 45 px Luft oben und unten, die Karte rund 300 px hoch. Die sechs Grafiken tragen ihren Rand in der Datei (freigestellt auf voller Leinwand, siehe Bewegungsblock) — das Feld muss ihn nicht noch einmal geben. 104 px bei 360, 109 bei 390, 120 bei 430; die Lagen und aufgelegten SVG rechnen sich aus der Feldhoehe mit (height: min(100 %, 17 rem)). */ .stl-aus__bild { height: clamp(104px, 28vw, 140px); } } /* --------------------------------------------------------------------------- TELEFON QUER (844 x 390 gemessen). Eine Hoehenabfrage, weil diese drei Befunde an der Fensterhoehe haengen und mit keinem Breitenpunkt zu treffen sind — bei 844 px Breite greift sonst der Tablet-Fall. Band A 355 px = 91 % der Fensterhoehe, Band B 277 px = 71 % Onboarding-Bild 422 px = 108 %, Abschlussbild Back-Office 892 px = 229 % Kopfbereich 520 px = 133 % — der Text lag unter der ersten Bildschirmkante Grenze aus dem Auftrag: 60 % der Fensterhoehe. --------------------------------------------------------------------------- */ @media (max-height: 500px) and (orientation: landscape) { /* Die Baender auf die halbe Hoehe (178 / 139 px = 46 / 36 % bei 390 px). Die Bildbreiten rechnen sich aus der Hoehe, der Satz wird also ebenso halb so breit; der Umlauf bleibt eine Satzbreite je Dauer und laeuft damit mit 30 statt 60 px/s — ruhiger, nicht schneller. Entfernt wird nichts. */ .stl-band--a { --stl-band-h: 178px; } .stl-band--b { --stl-band-h: 139px; } /* Die zwei Bildfelder: hoechstens 60 % der Fensterhoehe; object-fit: cover steht schon an beiden, der Beschnitt bleibt mittig. */ .stl-bilder img, .stl-schluss__medium img { max-height: 60vh; } /* Der Kopf fuellt genau eine Bildschirmhoehe; der Textblock (Vorzeile, Ueberschrift, vier Zeilen Unterzeile, Knopf) misst bei 844 px rund 350 px und passt unter die Kopfleiste. Waechst der Text, waechst der Kopf mit (min-height, nicht height). */ .stl-hero { min-height: 100vh; min-height: 100svh; } /* ONBOARDING UND ABSCHLUSS ZWEISPALTIG — Pruefer, Runde 1: quer 27 bis 30 % bzw. 26 % Leerflaeche (Grenze 25). Einspaltig stand das Bild unter der Liste und die Luecken der Liste summierten sich ueber die ganze Hoehe. Bei 844 px ist der Container 750 px breit — zwei Spalten zu 359 px sind dieselbe Anordnung wie am Bildschirm ab 992 px (dort 597/597), nur enger. Das Bild steht dann NEBEN der Liste, die Fugen zwischen den Schritten liegen auf Bildhoehe, und kein Abschnitt zeigt mehr Leere als Inhalt. Die Bildhoehe bleibt auf 60 vh gedeckelt. */ .stl-zwei--erwartet, .stl-zwei--schluss { grid-template-columns: 1fr 1fr; column-gap: 32px; align-items: center; } /* Und enger zwischen den Schritten: bei 359 px Spaltenbreite bricht jeder Satz in zwei bis drei Zeilen, die Fuge trennt also weniger als am Bildschirm; 0,5 rem (16 px zwischen zwei Schritten) reicht. */ .stl-stufe { padding-block: 0.5rem; } } /* --------------------------------------------------------------------------- DER SCHLEIER AUF DEM TELEFON — 03.09.2026, GEGEN ECHTE FILMBILDER GERECHNET Die Rechnung oben (bei .stl-hero__schleier) gilt fuer 1920 x 816: dort sitzt der Text im unteren Drittel, wo der Verlauf 0,79 bis 0,88 traegt. Auf dem Telefon ist der Textblock hoeher (Ueberschrift zwei Zeilen, Unterzeile sechs) und beginnt bei 26 % der Kopfhoehe — im Bereich, in dem der Verlauf nur 0,50 traegt. Mit ffmpeg in 16 Einzelbildern (alle 0,5 s) im Telefon-Beschnitt (cover, 50 % 62 %) nachgerechnet, schlechtester Bildpunkt unter der Schrift: 390 x 800 Vorzeile (Sand) 2,33 : 1 H1 5,02 Unterzeile 5,97 360 x 800 Vorzeile 2,70 : 1 H1 6,00 Unterzeile 7,75 844 x 390 Vorzeile 2,36 : 1 H1 5,08 Unterzeile 5,91 Die Vorzeile reisst die 4,5 : 1. Deshalb zieht der Verlauf auf dem Telefon schon ab 20 % Hoehe auf 0,80 (unter der Kopfleiste, 0 bis 12 %, bleibt er wie am Bildschirm). Unter 0,18 + 0,80 Navy wird reines Weiss zu rgb(52, 65, 82); Sand darauf misst 5,8 : 1, Weiss 8,5 : 1. Nachgemessen nach der Aenderung, Werte im Bericht vom 03.09.2026. --------------------------------------------------------------------------- */ @media (max-width: 620px), (max-height: 500px) and (orientation: landscape) { .stl-hero__schleier { background: linear-gradient(to bottom, rgba(10, 25, 46, 0.58) 0%, rgba(10, 25, 46, 0.62) 12%, rgba(10, 25, 46, 0.80) 20%, rgba(10, 25, 46, 0.85) 60%, rgba(10, 25, 46, 0.88) 100%), linear-gradient(rgba(10, 25, 46, 0.18), rgba(10, 25, 46, 0.18)); } } /* =========================================================================== FORTSCHRITTSSCHIENE IM ONBOARDING — 04.09.2026 Kundenwunsch: „Du sollst genau die gleiche Animation mit dem Strich verwenden wie bei ‚So läuft die Zusammenarbeit ab. Sechs klare Schritte zu deiner Kapitalanlage'. Die Zahlen sollen 1:1 genauso übernommen werden." Aufbau, Klassennamen und Skript sind deshalb dieselben wie dort (`.abl__spur`, `.abl__laeufer`, assets/js/ablauf.js). Nur die Farben und der Schriftgrad kommen aus dieser Seite: die Onboarding-Ziffern stehen in Bronze auf hellem Grund, in der dunklen Fassung in Sand auf Navy. Die zwei Masse (Anfang und Laenge der Schiene) und der Fortschritt setzt das Skript; es misst die tatsaechliche Lage der Ziffern und nicht eine geschaetzte Zeilenhoehe. OHNE SKRIPT und bei ruhiger Darstellung fehlt `data-schiene`: keine Schiene, kein Laeufer, die Ziffern stehen gleichwertig da. =========================================================================== */ .abl__spur { position: relative; } .abl__spur[data-schiene='an']::before, .abl__spur[data-schiene='an']::after { content: ''; position: absolute; left: var(--abl-schiene-x, 0); top: var(--abl-schiene-oben, 0); width: 2px; transform: translateX(-50%); border-radius: 2px; pointer-events: none; } .abl__spur[data-schiene='an']::before { height: var(--abl-schiene-hoehe, 0); /* Erst der feste Wert, dann color-mix: Safari vor 16.2 kennt color-mix nicht und liesse die Flaeche sonst ganz leer. rgba(138, 90, 32, 0.18) ist dasselbe Bronze zu 18 % — 11.09.2026. */ background: rgba(138, 90, 32, 0.18); background: color-mix(in srgb, var(--stl-erw-bronze, #8A5A20) 18%, transparent); } .abl__spur[data-schiene='an']::after { height: calc(var(--abl-schiene-hoehe, 0) * var(--abl-fortschritt, 0)); background: var(--stl-erw-bronze, #8A5A20); transition: height 0.18s linear; } /* Die wandernde Ziffer — gleicher Schnitt und Grad wie die festen. */ .abl__laeufer { position: absolute; left: var(--abl-schiene-x, 0); top: var(--abl-schiene-oben, 0); transform: translate(-50%, -50%); z-index: 2; font-family: var(--font-display); font-weight: 500; font-size: var(--stl-erw-nr); line-height: 1; font-variant-numeric: lining-nums tabular-nums; color: var(--stl-erw-bronze, #8A5A20); background: var(--stl-grund, #FFFFFF); padding: 0.18em 0.1em; pointer-events: none; opacity: 0; transition: top 0.18s linear, opacity 0.25s var(--ease, ease); } .abl__spur[data-schiene='an'] .abl__laeufer { opacity: 1; } /* Die festen Ziffern: mittig ueber der Schiene, mit eigenem Grund, damit der Strich nicht durch sie hindurchlaeuft — derselbe Fehler wie auf der Startseite, dort am 04.09.2026 behoben. */ .abl__spur[data-schiene='an'] .stl-stufe__nr { position: relative; z-index: 1; text-align: center; background: var(--stl-grund, #FFFFFF); padding-block: 0.18em; } .abl__spur[data-schiene='an'] .stl-stufe[data-aktiv='true'] .stl-stufe__nr { visibility: hidden; } .abl__laeufer[data-puls='true']::after { content: ''; position: absolute; inset: -0.35em -0.2em; border-radius: 999px; border: 2px solid var(--stl-erw-bronze, #8A5A20); animation: abl-puls 520ms var(--ease-soft, ease-out) both; pointer-events: none; } @keyframes abl-puls { from { transform: scale(0.8); opacity: 0.9; } to { transform: scale(1.7); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .abl__spur[data-schiene='an']::before, .abl__spur[data-schiene='an']::after, .abl__laeufer { display: none; } .abl__spur[data-schiene='an'] .stl-stufe[data-aktiv='true'] .stl-stufe__nr { visibility: visible; } } /* Die Zeile unter dem Bild — 04.09.2026, Kundenwunsch: der Zusatz zum Onboarding steht jetzt unter der Aufnahme rechts. Sie behaelt Grad und Farbe von .stl-schluss__hinweis; hier nur der Abstand zum Bild und der Verzicht auf den Satzspiegel jener Zeile, der fuer eine breitere Spalte gedacht war. */ .stl-bilder__zeile { max-width: none; margin-top: clamp(0.9rem, 1.8vw, 1.4rem); } /* =========================================================================== ZEILENFALL DER UEBERSCHRIFTEN — 04.09.2026, Kundenwunsch „Ein Umfeld, das dich stärker macht – nicht austauschbar." → zwei Zeilen, nicht drei, und „Dein System" muss mitgesetzt werden zur Headline. „Klare Verantwortung, kurze Wege und Arbeit, deren Wirkung du jeden Tag siehst." → auch zwei Zeilen. „Wir suchen keine fertige Schablone. Wir suchen Substanz und Entwicklungspotenzial." → zwei Zeilen, die Subline darunter drei. Die Zeilenzahl haengt an der Satzbreite, nicht am Schriftgrad — deshalb wird hier die Breite gesetzt und der Grad nicht angefasst. Gerechnet: der laengste der beiden Saetze hat 78 Zeichen, zwei Zeilen sind 39 Zeichen; bei 36 px Cormorant sind das rund 700 px. 720 px gibt etwas Reserve, ohne dass die kuerzere Zeile einzeilig umkippt. `text-wrap: balance` verteilt die Zeichen gleichmaessig auf die Zeilen — ohne das haengt bei zwei Zeilen oft ein einzelnes Wort unten. =========================================================================== */ /* Der Deckel sitzt an der Spalte, nicht an der Ueberschrift: seit die Section einspaltig und mittig ist (01.09.2026), begrenzt `.stl-zwei--bieten > *` den Satzspiegel auf 68ch = 519 px. Das ist fuer den Fliesstext richtig und fuer eine 36-px-Ueberschrift zu eng — dort entstehen daraus drei Zeilen. Die Ueberschrift und ihre Kleinzeile bekommen deshalb einen eigenen, weiteren Deckel. */ .stl-zwei--bieten > .stl-bieten__links { max-width: none; } .stl-zwei--bieten .stl-h2--mitte { /* IN ZEICHEN, NICHT IN PIXELN. Der Schriftgrad waechst mit der Fensterbreite (36 px bei 1440, 48 px bei 1920); ein Deckel in Pixeln haelt den Zeilenfall deshalb nur bei einer Breite. In `ch` waechst der Deckel mit — 40 Zeichen je Zeile ergeben bei beiden Ueberschriften zwei Zeilen: „Ein Umfeld …" hat 56 Zeichen, „Klare Verantwortung …" hat 78. */ max-width: 40ch; margin-inline: auto; text-wrap: balance; } .stl-zwei--bieten .stl-kleinzeile--mitte, .stl-zwei--bieten .stl-trenn { margin-inline: auto; } /* Der Fliesstext behaelt seine 68ch — Lesbarkeit vor Breite. */ .stl-zwei--bieten .stl-bieten__links > :not(.stl-h2--mitte):not(.stl-kleinzeile--mitte):not(.stl-trenn) { max-width: 68ch; margin-inline: auto; } /* Die Kleinzeile gehoert optisch zur Ueberschrift und stand mit dem alten Abstand wie ein eigener Block darueber. */ .stl-kleinzeile--mitte { margin-bottom: clamp(0.6rem, 1.1vw, 0.9rem); } /* Die Fuehrungszeile unter „Dein Profil": vier Zeilen -> drei. 4 Zeilen à 19 px auf 545 px sind rund 62 Zeichen je Zeile; fuer drei Zeilen braucht es rund 82, also gut 740 px. */ .stl-macht__lead { max-width: 80ch; /* drei Zeilen: 240 Zeichen / 3 = 80 */ text-wrap: pretty; } @media (max-width: 991px) { /* Auf schmalen Fenstern gilt die Fensterbreite, nicht diese Deckel — sonst stuende die Ueberschrift breiter als ihre Spalte. */ .stl-h2--mitte, .stl-macht__lead { max-width: none; } } /* =========================================================================== ZWEI ZEILEN AUCH BEI DEN GROSSEN UEBERSCHRIFTEN — 04.09.2026 `.stl-h2-gross` („Wir suchen keine fertige Schablone. …", 81 Zeichen) und die Onboarding-Ueberschrift stehen bei 1920 in drei Zeilen, weil ihr Grad mit der Fensterbreite waechst. Kundenwunsch: zwei Zeilen, „du kannst die Headline dann ein bisschen kleiner machen". Beides zusammen: der Deckel in Zeichen haelt den Zeilenfall, und der Grad waechst oberhalb von 1440 nicht weiter. */ .stl-h2-gross { max-width: 42ch; margin-inline: auto; text-wrap: balance; } .stl-erwartet .stl-h2 { max-width: 34ch; text-wrap: balance; } /* Oberhalb von 1440 waechst der Grad weiter mit der Fensterbreite, die Spalte aber nicht: die Onboarding-Spalte ist bei 1920 nur 597 px breit, und 48 px Cormorant ergeben darin drei Zeilen statt zwei. Der Kunde: „Du kannst die Headline dann ein bisschen kleiner machen, sodass die Headline auf zwei Zeilen steht." Also ein Deckel oben — gemessen reichen 40 px fuer zwei Zeilen in 597 px. */ @media (min-width: 1441px) { .stl { --stl-t-gross: 2.6rem; /* 48 -> 41,6 px */ --stl-t-h2: 2.5rem; /* 48 -> 40 px */ } } /* =========================================================================== DIE ZEITANGABE IM ONBOARDING — 04.09.2026, Kundenwunsch: „Wie die 1, die 2, die 4 und die 3 da stehen, gefaellt mir ueberhaupt nicht. Schreib einmal eine ganz normale 2 hinter Woche oder eine ganz normale 1 — einfach die Zahlen ganz normal, ohne dieses kreative Kleine, einfach ‚Woche 1' und die 1 ganz normal geschrieben." Die Zeile stand in gesperrten Versalien: „WOCHE 1" mit 0,14 em Sperrung. Bei Versalien wird die Ziffer auf Versalhoehe gesetzt und wirkt neben dem gesperrten Wort wie ein eigenes kleines Zeichen — genau das hat er gesehen. Jetzt normale Schreibung, keine Sperrung, dafuer etwas groesser und in der Schrift des Fliesstextes, damit „Woche 1" wie eine gewoehnliche Zeitangabe liest. Farbe und Abstand bleiben. =========================================================================== */ .stl-stufe__zeit { font-size: clamp(0.95rem, 1.05vw, 1.06rem); letter-spacing: 0; text-transform: none; font-variant-numeric: lining-nums; } /* =========================================================================== ZWEI FASSUNGEN DER UNTERZEILE IM KOPFBEREICH — 04.09.2026 Dieselbe Regel wie in karriere.css, und sie steht bewusst ein zweites Mal hier: die beiden Stellenseiten laden karriere.css nicht. Wortlaut des Kunden und die Begruendung stehen dort ausfuehrlich; kurz: die lange Unterzeile ist die urspruengliche und gilt weiter auf dem Desktop, die kurze gilt nur auf dem Telefon. WER EINE DER BEIDEN REGELN AENDERT, MUSS DIE ANDERE MITAENDERN. =========================================================================== */ .nur-schmal { display: none; } @media (max-width: 767px) { .nur-breit { display: none; } .nur-schmal { display: inline; } } /* =========================================================================== DER KOPFBEREICH AUF DEM TELEFON — 04.09.2026 Kundenwunsch woertlich: „Bei der Hero-Section bei Immobilienberater und Backoffice-Manager kannst du die Sublines entfernen, und die CTA-Buttons sollen kleiner gemacht werden. Nur auf der mobilen Version. Die Desktop-Version bleibt unangetastet." DIE UNTERZEILE IST NICHT GEKUERZT, SONDERN AUSGEBLENDET. Heute Vormittag hatte ich sie im Markup gekuerzt — damit stand sie auch auf dem Desktop kuerzer, und genau das hat der Kunde zweimal beanstandet. Sie steht jetzt wieder im urspruenglichen Wortlaut da und faellt unter 768 px per `display: none` weg. Was auf display:none steht, faellt auch aus dem Vorlesebaum — auf dem Telefon liest sie also niemand vor, und das ist gewollt: der Kunde will dort weniger Text, nicht versteckten Text. DER KNOPF wird kleiner, nicht kleiner als erlaubt: 44 px Mindesthoehe sind die Trefferflaeche aus Abschnitt 19 des Optimierungsbriefings, und 16 px ist die Untergrenze fuer Bedienschrift. Vorher: 48 px hoch, 1,19rem Schrift, 0 20px Innenabstand. =========================================================================== */ @media (max-width: 767px) { .stl-hero__unter { display: none; } .stl-hero__btn { min-height: 44px; padding: 0 16px; font-size: 1rem; /* Die Unterzeile trug bisher den Abstand zum Knopf mit; ohne sie sitzt er sonst an der Ueberschrift. */ margin-top: 1.4rem; } } /* Die Ueberschrift des Schlussabschnitts einen Grad kleiner — Kundenwunsch: „die Headline kannst du einen Ticken kleiner machen." Sie steht seit dem Wegfall ihrer Unterzeile allein ueber dem Knopf und wirkte dadurch groesser als vorher, obwohl sich an ihr nichts geaendert hatte. 0,92 ist ein Achtel weniger und laesst den Satz weiterhin die groesste Zeile des Abschnitts sein. */ /* NICHT `0.92em` — der erste Versuch stand so da und war falsch: `em` rechnet gegen die Schriftgroesse des ELTERNELEMENTS, nicht gegen die eigene. Die Ueberschrift fiel damit GEMESSEN von 36 auf 14,72 px, weil der Elter die 16 px des Fliesstextes fuehrt. Gerechnet wird gegen denselben Token, den .stl-h2 selbst benutzt. */ .stl-h2--schluss { font-size: calc(var(--stl-t-h2) * 0.92); } /* =========================================================================== DIE BEWERBUNGSKNOEPFE WERDEN SCHMALER — 09.09.2026 Kundenwunsch woertlich: „Der Button ‚Als Immobilienberater bewerben‘ und der Button ‚Als Backoffice Manager bewerben‘ sollen auch kleiner werden, also nicht zu viel von der Breite ausfuellen." ES SIND ZWEI STELLEN JE SEITE, nicht eine — nachgezaehlt: der Knopf im Kopfbereich (.stl-hero__btn) und der Knopf im Schlussabschnitt (.stl-schluss__aktionen .btn). Beide tragen dieselbe Beschriftung, beide standen bei 390 px GEMESSEN auf 350 von 390 px, also 90 % der Fensterbreite. WORAUF DAS AUFBAUT, statt danebenzustehen: der Mobilblock vom 04.09.2026 weiter oben in dieser Datei setzt an .stl-hero__btn schon min-height 44px, padding 0 16px und font-size 1rem. Diese drei Werte bleiben unangetastet und gelten weiter — hier kommt allein die Breite dazu. Zurueckgenommen werden zwei Regeln, beide aus @media (max-width: 620px): .stl-hero__btn { width: 100%; justify-content: center; } .stl-schluss__aktionen .btn { width: 100%; justify-content: center; } Sie stammen aus dem Optimierungsbriefing vom 01.09.2026 („Buttons volle Breite"); der Kunde hat das jetzt ausdruecklich anders entschieden. Beide alten Regeln BLEIBEN STEHEN, sind aber nach dieser Aenderung ohne Wirkung: 620 px liegen vollstaendig innerhalb der 767 px dieser Abfrage, und diese Regel steht spaeter in der Datei und wiegt gleich schwer. Geloescht werden sie trotzdem nicht — an ihnen haengt die Herkunft der vollen Breite, und der naechste Durchgang soll sie lesen koennen. Zwischen 621 und 767 px hatten die Knoepfe ohnehin nie volle Breite; dort werden sie durch diesen Block erstmals auf 44/16 gesetzt, was sie kleiner macht und dem Kundenwunsch entspricht. `justify-content: center` wird NICHT zurueckgenommen: die Beschriftung soll im Knopf mittig stehen, auch wenn der Knopf schmal ist. DER SCHLUSSKNOPF BEKOMMT DIE MASSE DES KOPFKNOPFES. Er stand bei 390 px auf 48 px Hoehe und 19,04 px Schrift, also groesser als der Knopf oben auf derselben Seite — zwei verschiedene Groessen fuer dieselben zwei Woerter. 44 px und 16 px sind hier wie dort die Untergrenzen aus dem Optimierungsbriefing (Trefferflaeche, Bedienschrift); darunter geht es ausdruecklich nicht. GEMESSEN nach der Aenderung bei 390 px (Satzspiegel 350 px): Immobilienberater Kopf „Als Immobilienberater bewerben" 253,7 px (73 % statt 100 %) Schluss „Als Immobilienberater bewerben" 253,7 px Back-Office Kopf „Als Backoffice Manager bewerben" 258,7 px (74 % statt 100 %) Schluss „Jetzt fuers Backoffice bewerben" 235,8 px (67 % statt 100 %) Alle vier stehen mittig, Mittelachse 195,0 px = Behaeltermitte. Die zwei Beschriftungen der Back-Office-Seite sind verschieden — das ist der Bestand und nicht Gegenstand dieser Aenderung; der Kunde nennt den Kopfknopf („Als Backoffice Manager bewerben"), der Schlussknopf heisst seit jeher anders und bleibt so. 20 px Innenabstand je Seite statt 16: ohne volle Breite braucht die Beschriftung wieder ihre eigene Luft an den Kanten. „ZURUECK ZUR UEBERSICHT" steht unter dem Schlussknopf und bleibt, wo es ist: .stl-schluss__aktionen traegt seit dem 04.09. `justify-content: center` unter 620 px, die Achse ist also weiterhin die Mitte. Mit dem schmaleren Knopf stehen beide untereinander und mittig — 249,9 + 28,8 + 181,4 px passen nicht nebeneinander in 350 px, `flex-wrap: wrap` traegt den Umbruch. =========================================================================== */ @media (max-width: 767px) { .stl-hero__btn, .stl-schluss__aktionen .btn { width: auto; min-height: 44px; padding: 0 20px; font-size: 1rem; justify-content: center; } } /* =========================================================================== DAS ONBOARDING STEHT AUF DEM TELEFON MITTIG — 09.09.2026 Kundenwunsch woertlich: „Bei ‚Onboarding mit klarem Plan‘ sollen die einzelnen Wochen auch mittig sein und nicht linksbuendig." „ONBOARDING MIT KLAREM PLAN" IST DIE BACK-OFFICE-SEITE. Nachgesehen, nicht geraten: karriere-backoffice.html traegt die Kleinzeile „Onboarding mit klarem Plan" und darunter vier Punkte mit den Zeitangaben „Woche 1", „Woche 2 bis 4", „Monat 2", „Ab Monat 3" — das sind die „Wochen", die der Kunde meint. Auf karriere-immobilienberater.html heisst derselbe Abschnitt „Onboarding mit System" und hat fuenf nummerierte Punkte ohne Zeitangabe. Beide werden umgestellt: es ist derselbe Baustein (.stl-stufe) und derselbe Abschnitt auf zwei Seiten, und eine Seite mittig und die Schwester daneben linksbuendig waere ein neuer Bruch. DIE ZWEI SEITEN SIND VERSCHIEDEN GEBAUT, deshalb zwei Regeln: 1) BACK-OFFICE —
    . Ohne Ziffernspalte ist .stl-stufe ein einspaltiges Raster ueber die volle Behaelterbreite; GEMESSEN bei 390 px stehen Zeitangabe, Titel und Text alle drei auf x 20 mit 350 px Breite. Ein `text-align: center` genuegt, die Mittelachse ist danach exakt die Behaeltermitte (195 px). 2) IMMOBILIENBERATER —
      in einer
      . Hier haengt die FORTSCHRITTSSCHIENE dran (assets/js/ablauf.js, .abl__spur / .abl__laeufer). .stl-stufe ist dort ein ZWEISPALTIGES Raster: Ziffer links (clamp(2rem, 2.7vw, 2.6rem), bei 390 px auf 32 px gedeckelt), dann die Fuge (clamp(0.7rem, 1.15vw, 1.15rem), bei 390 px 11,2 px), dann der Text. GEMESSEN vorher: Ziffer x 20 bis 52, Text x 63,2 bis 370. DIE SCHIENE DARF NICHT WANDERN. ablauf.js misst ihre waagerechte Lage als Mitte der ERSTEN ZIFFER (`x = (a.left - s.left) + a.width / 2`, Zeile 97) und setzt sie als --abl-schiene-x; die festen Ziffern stehen mit `text-align: center` und eigenem Grund darauf. Wer die Ziffer verschiebt, verschiebt die Schiene und den Laeufer mit. Deshalb bleibt die Ziffernspalte, wie sie ist, und mittig gesetzt werden nur Titel und Text. DAS ALLEIN WAERE ABER FALSCH MITTIG: die Textspalte beginnt erst bei x 63,2, ihre eigene Mitte liegt bei 216,6 px — 21,6 px rechts von der Behaeltermitte (195 px). Der Satz staende zwar mittig in seiner Spalte, aber sichtbar aus der Achse des Abschnitts. Deshalb bekommt .stl-stufe__wort auf der rechten Seite genau so viel Polster, wie links die Ziffernspalte samt Fuge einnimmt — dieselben beiden clamp() noch einmal, damit die Rechnung an jeder Fensterbreite aufgeht: links 32 + 11,2 = 43,2 px rechts 43,2 px Mitte 63,2 + (306,8 - 43,2) / 2 = 195,0 px = Behaeltermitte Der Satz wird dadurch um 43,2 px schmaler (306,8 -> 263,6 px); bei 16 px Schrift sind das rund 8 Zeichen je Zeile weniger. Das ist der Preis dafuer, dass Schiene und Satzachse gleichzeitig stimmen, und er ist bewusst bezahlt. NACHGEMESSEN NACH DEM UMBAU (390 px, karriere-immobilienberater.html), alle Werte in Koordinaten der Spur: --abl-schiene-x 16 px vorher 16 px unveraendert Ziffernmitte 01 .. 05 16 px vorher 16 px alle fuenf unveraendert Mitte des Laeufers 16 px vorher 16 px unveraendert data-schiene „an" vorher „an" unveraendert Der Laeufer sitzt damit weiterhin mittig auf dem Strich, und der Strich steht weiterhin mittig unter den Ziffern. DIE SCHIENE IST AUF DEM TELEFON SICHTBAR — nachgesehen im Bild bei 390 px, nicht nur gerechnet: der bronzefarbene Strich laeuft links neben den fuenf Punkten, die gefuellte Haelfte waechst beim Rollen mit. Auf der Back-Office-Seite gibt es keine Schiene und keinen Laeufer (kein .abl__spur im Markup, nachgesehen) — dort ist nichts nachzumessen. DIE ZEITANGABE bleibt in ihrem Grad und ihrer Sperrung; nur die Ausrichtung aendert sich. `text-wrap: balance` an .stl-stufe__titel und `text-wrap: pretty` an .stl-stufe__text bleiben ebenfalls — bei mittigem Satz arbeiten beide erst richtig. =========================================================================== */ @media (max-width: 767px) { .stl-stufe__zeit, .stl-stufe__titel, .stl-stufe__text { text-align: center; } /* Der Deckel von 44em an .stl-stufe__text greift auf dem Telefon nie (350 px sind rund 22em) — er braucht kein margin-inline. */ /* Nur die nummerierte Fassung: Polster rechts in der Breite der Ziffernspalte samt Fuge, damit die Satzachse auf der Abschnittsmitte liegt. Die Werte sind zeichengleich die aus .stl-stufe. */ .stl-folge:not(.stl-folge--ohne-nr) .stl-stufe__wort { padding-right: calc(clamp(2.0rem, 2.7vw, 2.6rem) + clamp(0.7rem, 1.15vw, 1.15rem)); } }