/* Assecura, Dachmarke. Dunkel, monochrom, typografisch. Klare Hierarchie und grosszuegige Abstaende wie bei CoverRaccoon, aber ruhiger und flaechiger: weniger Kaesten, groessere Leerraeume, eine dominante Bildmarke. Keine Bibliothek, keine externe Schrift, keine 3D-Abhaengigkeit. */ :root { --as-bg: #050506; --as-bg-soft: #0b0b0d; --as-surface: #101012; --as-text: #ffffff; /* Sekundaertext bewusst hell genug: #a5a5aa liegt auf #050506 bei rund 9,3:1 und damit klar ueber der AA-Schwelle. */ --as-text-muted: #a5a5aa; --as-line: #242428; --as-line-strong: #3a3a40; /* DIE KAPITELZIFFER IST TEXT, KEINE LINIE. Sie stand auf `--as-line-strong` und lag damit gemessen bei 1,80:1 - fuer eine Linie in Ordnung, fuer Schrift nicht. Bei 2,6 bis 4rem Fettschrift gilt die Schwelle 3:1 fuer grossen Text; dieser Ton liegt auf allen vier Abschnittsgruenden zwischen 3,34 und 3,46:1. Kleinere Ziffern tragen `--as-ink-3` und erfuellen die volle Schwelle 4,5:1. */ --as-mark: #646469; /* Der leiseste Text der Seite. #7a7a7d liegt auf #050506 bei 4,76:1 und damit ueber der AA-Schwelle - der zuvor benutzte Wert lag bei 3,91:1 und war fuer 11px zu schwach. */ --as-ink-3: #7a7a7d; /* DAS EINE DIGITALE SIGNAL. Ein kuehles Platin mit leichtem Blaustich, gemessen 9,43:1 auf dem Grundschwarz und damit deutlich ueber AA. Es ist die EINZIGE Farbe neben Schwarz und Weiss. ERLAUBT sind ausschliesslich: aktive Linien, der fokussierte Zustand, einzelne Bewegungspunkte, digitale Uebergaenge und kleine Orientierungszeichen. VERBOTEN sind: Flaechen, Fliesstext, Knopfflaechen, das Hiscox-Logo, das Assecura-A und jede Glow-Wirkung. Ein Waechter in `check.mjs` misst Buntheit und Flaeche und faellt, sobald das Signal breiter eingesetzt wird. */ /* Eisblau, gemessen 10,53 bis 10,90:1 auf den vier Abschnittsgruenden. Buntheit 111 - klar als Farbe erkennbar, aber kuehl und ohne jeden Neonanteil. Der frueher hier stehende Platinton (Buntheit 35) war als Zukunftsebene zu leise; diese Fassung traegt sie sichtbar. */ --as-signal: #79c8e8; /* Mittlerer Ton fuer kraeftigere Linien und Knoten: 5,80 bis 6,01:1. */ --as-signal-mid: #4f93b8; /* Nur fuer Haarlinien, nie fuer Text: 3,47:1 genuegt fuer Bedienlinien. */ --as-signal-dim: #3b6d84; /* TIEFE STATT EINER EINZIGEN SCHWARZFLAECHE. Vier sehr eng benachbarte Schwarztoene. Sie trennen die Abschnitte als Flaechen, ohne dass ein Verlauf sichtbar wird - Licht auf einer dunklen Oberflaeche, nicht ein Farbverlauf ueber die Seite. */ --as-bg-1: #08080a; --as-bg-2: #0b0b0d; --as-bg-3: #070708; /* DIE GESTALTUNGSKONSTANTE DER MARKE. Die Aussenkante des Assecura-A steht am Original gemessen bei 62,80 Grad zur Waagrechten. Dieser Winkel traegt die gesamte Seite: die Kapitelmarken, das Raster der Produktbuehne, die Lastachse des Prozesses. Er ist der Grund, warum dieses Layout nicht mit einem anderen Logo funktionieren wuerde. */ --as-angle: 62.8deg; /* Bewegung: langsam, praezise, an einer Kurve. */ --dur-slow: 24s; --dur-mid: 800ms; --dur-fast: 220ms; --ease: cubic-bezier(0.33, 0, 0.2, 1); --space-section: 132px; --space-block: 34px; --space-text: 14px; /* DER ABSTAND ZWISCHEN FIGUREN. Sie standen alle auf `--space-block`, also so weit auseinander wie zwei Absaetze - und klebten dadurch aneinander: eine Figur braucht Luft, um als eigene Aussage gelesen zu werden, nicht als Fortsetzung der vorigen. Zwischen Absatz (34) und Abschnitt (132) fehlte eine Stufe. Sie gilt ZWISCHEN Gruppen. Innerhalb einer bleibt es enger: Feld, Lastpfad und Wiederkehr sind eine Aussage in drei Bildern, und die duerfen nicht auseinanderfallen. */ --space-figur: 112px; --max: 1180px; --pad: 32px; /* Tiefe und Tempo der Extrusion an einer Stelle. */ --depth: 30px; --spin: 24s; /* DIE ROTATIONSHUELLE DER BILDMARKE. Das A misst gemessen 36,08 Prozent der Rotorbox in der Breite und 35,10 Prozent in der Hoehe. Bei `scale3d(2.05)`, `rotateX(-11deg)` und `perspective: 1400px` habe ich ueber eine volle Umdrehung die groesste projizierte Ausdehnung berechnet - je Ecke der Extrusion, Grad fuer Grad, samt perspektivischer Vergroesserung. Ergebnis: die Huelle ist waagrecht das 1,03- bis 1,06-fache und senkrecht das 1,20- bis 1,32-fache der A-Groesse. Der Wert ist ueber alle Groessen nahezu konstant, deshalb steht hier EINE Konstante mit Sicherheitszuschlag - und keine Sammlung von Geraetewerten. Senkrecht ist die Huelle groesser, weil die Neigung um -11 Grad die Extrusion nach oben und unten in die Projektion kippt. */ --huelle-x: 1.08; --huelle-y: 1.36; /* Der Rotor ist die quadratische Buehne, in der das A nur 36,08 Prozent einnimmt. Damit die BUEHNE genauso gross ist wie das gerenderte A, muss der Rotor 1 / (0,3608 x 2,05) = 135,24 Prozent der Buehne messen. So ist der Layoutkasten ehrlich: er umschliesst das Zeichen, nicht einen unsichtbaren Rahmen um es herum. */ --rotor-anteil: 135.24%; --sans: Inter, 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif; } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; /* Bezug fuer die Paragraphentextur, die ueber die ganze Seite liegt. */ position: relative; background: var(--as-bg); color: var(--as-text); font-family: var(--sans); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } .skip { position: absolute; left: -9999px; top: 0; padding: 12px 18px; background: var(--as-text); color: var(--as-bg); z-index: 20; } .skip:focus { left: 0; } /* Der Fokusring steht weiter unten bei den Mikrointeraktionen und traegt dort das Signal. Zwei Regeln fuer dieselbe Sache waren eine zu viel. */ /* --------------------------------------------------- Die Paragraphentextur */ /* ACHT GRUNDSAETZE, DIE DURCH DIE SEITE HINDURCHGEHEN. Sie sind ATMOSPHAERE, kein Informationselement. Wer die Seite oeffnet, soll eine ruhige grafische Struktur sehen; wer stehen bleibt und hinsieht, liest, woran ein Makler gebunden ist. Deshalb: keine Kaesten, keine Linien, keine Aufzaehlungszeichen, kein Rand - nur Schrift im Raum. SIE LIEGT UNTER DEM INHALT, NICHT UEBER IHM. Die Schicht steht am Koerper der Seite und traegt `z-index: 0`; `main` und der Fussbereich stehen mit `z-index: 1` darueber. Die Schrittkarten bleiben deckend und schneiden sie weg - dort steht der laengste Fliesstext, und hinter Woertern hat nichts zu liegen. KEIN LISTENBILD. Lage und Groesse stehen je Zeile im Markup und sind gestreut, nicht gerastert. Gleiche Abstaende ergaeben sofort wieder eine Liste - und eine Liste waere ein Informationselement. GERADE, NICHT GENEIGT. Die Zeilen standen leicht gekippt, weil eine Neigung nach Absicht aussieht. Sie sieht aber auch nach Fehler aus: eine schiefe Zeile hinter einem geraden Satz liest sich als verrutscht, nicht als gestaltet. Die Seite hat genau EINEN Winkel, den der Marke, und der gehoert den Kanten - nicht der Schrift. DIE BEWEGUNG KOMMT VOM LESER. Zuerst lief zusaetzlich eine eigene Fahrt an der Uhr: sie ging weiter, auch wenn niemand etwas tat, und zog damit genau die Aufmerksamkeit auf sich, die dem Inhalt gehoert. Geblieben ist die Tiefe beim Scrollen - sie antwortet auf eine Bewegung, die der Leser ohnehin macht, und steht still, sobald er still steht. */ .normen-textur { /* EINE STELLSCHRAUBE. `--ferne` streckt den Weg der Tiefe. Sie steht hier, damit sich die ganze Schicht an einer Stelle ruhiger oder lebendiger stellen laesst, ohne acht Zeilen anzufassen. */ --ferne: 1; /* EIN SCHLEIER UEBER ALLEM. Die drei Toene unten stehen im Verhaeltnis zueinander - `--schleier` nimmt sie gemeinsam zurueck. Damit laesst sich die ganze Schicht an EINER Zahl leiser stellen, ohne dass das Verhaeltnis zwischen grosser und kleiner Zeile verrutscht. */ --schleier: 0.68; position: absolute; inset: 0; z-index: 0; /* `overflow: clip` UND NICHT `hidden`. `hidden` macht aus der Schicht einen eigenen Scrollcontainer - und die Zeitachse fragt den naechsten. `view()` haette dann gemeldet, jede Zeile stehe immer im Bild, und nichts waere je zerstaeubt. `clip` schneidet genauso ab, ist aber kein Container: gemessen sinkt die gemeldete Seitenbreite damit von 4372 auf die Fensterbreite zurueck, und der Zerfall laeuft trotzdem. */ overflow: clip; /* Nie ein Klickziel und nie ein Textziel. Die Textur ist ein Bild aus Buchstaben; wer im Inhalt Text markiert, darf sie nicht mitnehmen. */ pointer-events: none; user-select: none; -webkit-user-select: none; } .nt { position: absolute; left: var(--x); /* `--ym` schlaegt `--y`, wenn es gesetzt ist. Die Lagen stehen je Zeile im Markup und waeren von hier aus sonst nicht mehr zu erreichen - auf einem Telefon fliesst der Inhalt aber anders, und zwei Zeilen lagen dort gemessen auf einer Ueberschrift. */ top: var(--ym, var(--y)); white-space: nowrap; /* GROSS, ABER NIE IM WETTBEWERB MIT EINER UEBERSCHRIFT. Die Ueberschriften tragen volles Weiss; diese Schrift traegt drei Hundertstel davon. Groesse ohne Helligkeit ist Tiefe, Groesse mit Helligkeit waere eine zweite Stimme. Der Wert ist am Bild abgestimmt und nicht gerechnet: als Fliesstext waere er weit unter jeder Schwelle - fuer eine Flaeche aus 80 bis 180 Pixel hohen Buchstaben ist er richtig. Die lesbare Fassung steht deshalb zusaetzlich im Fussbereich. */ font-size: clamp(1.4rem, var(--gr), 8.5rem); font-weight: 600; line-height: 1; letter-spacing: -0.015em; color: rgb(255 255 255 / calc(var(--ton, 0.034) * var(--schleier))); } /* GLEICHE WIRKUNG, NICHT GLEICHE ZAHL. Eine Zeile aus 180 Pixel hohen Buchstaben traegt bei derselben Deckkraft viel mehr Flaeche als eine aus 70 - gleich eingestellt waere die grosse ein Balken und die kleine ein Hauch. Die Deckkraft laeuft deshalb gegen die Groesse. */ .nt:nth-child(3), .nt:nth-child(5) { --ton: 0.026; } .nt:nth-child(4), .nt:nth-child(7) { --ton: 0.046; } /* DIE TIEFE BEIM SCROLLEN - LAENGS DER ZEILE, NICHT QUER DAZU. Die Zeilen wandern beim Scrollen, unterschiedlich weit; dadurch scheinen sie in verschiedenen Ebenen zu liegen. Der groessere Anteil liegt WAAGRECHT, in der Richtung, in der die Zeile ohnehin gelesen wird - sie schiebt sich an ihrer eigenen Achse entlang. Das liest sich als Tiefe. Ein rein senkrechter Weg liess die Woerter dagegen an der Schrift vorbei steigen, quer zu ihrer Leserichtung, und wirkte wie ein Fahrstuhl. Die Richtungen sind ungleich verteilt und nicht abwechselnd: zwei Ebenen folgen dem Lesefluss nach rechts, eine laeuft ihm entgegen. Liefen alle gleich, waere es eine verschobene Ebene; liefen sie streng abwechselnd, waere es ein Muster. Am Scrollen selbst, nicht an einer Uhr und nicht an einem Ereignis je Bild: `scroll()` rechnet im Browser. Fehlt die Zeitachse, steht die Schicht still - kein Verlust, nur eine Ebene weniger. */ .nt:nth-child(3n) { --quer: 74px; --tief: 16px; --staub: 3px; } .nt:nth-child(3n + 1) { --quer: -128px; --tief: 34px; --staub: 5px; } .nt:nth-child(3n + 2) { --quer: 196px; --tief: 54px; --staub: 8px; } @supports (animation-timeline: scroll()) { .nt { animation: schweben linear both; /* `view()` UND NICHT `scroll()`. An der Seitenachse gemessen haette jede Zeile ihren Zustand aus ihrer LAGE bezogen: die obersten waeren immer scharf, die untersten immer Staub - man haette das Zerstaeuben nie passieren sehen, sondern nur sein Ergebnis. `view()` misst statt dessen den Weg der einzelnen Zeile DURCH DAS BILD. Jede kommt scharf herein, und waehrend sie nach oben hinauswandert, loest sie sich auf. Dass die Schicht dafuer kein `overflow: hidden` tragen darf, steht oben - beide Zeitachsen fragen den naechsten Scrollcontainer, und der waere sonst sie selbst. */ animation-timeline: view(block); } /* UND SIE ZERSTAEUBT NACH UNTEN. Je weiter der Weg durch die Seite, desto weicher die Schrift: der Rand loest sich auf, die Zeile geht minimal auseinander und wird leiser. Oben steht sie scharf, unten ist sie nur noch Staub. Der Grad haengt an der EBENE: was tiefer liegt, zerfaellt frueher - dieselbe Ordnung wie beim Weg. Drei Werte, keine zwei gleich. Der Zwischenschritt bei 60 Prozent ist kein Zierat. Ohne ihn liefe die Aufloesung linear mit und waere schon in der Seitenmitte deutlich; so bleibt sie lange fast aus und passiert erst im letzten Drittel. Der Wert fuer `translate` steht dort genau auf der Geraden, damit der Weg selbst gleichmaessig bleibt. */ @keyframes schweben { 0% { transform: translate3d( calc(var(--quer) * var(--ferne) * -1), calc(var(--tief) * var(--ferne)), 0 ) scale(1); filter: blur(0); opacity: 1; } 60% { transform: translate3d( calc(var(--quer) * var(--ferne) * 0.2), calc(var(--tief) * var(--ferne) * -0.2), 0 ) scale(1.015); filter: blur(calc(var(--staub) * var(--staubfaktor, 1) * 0.22)); opacity: 0.88; } 100% { transform: translate3d( calc(var(--quer) * var(--ferne)), calc(var(--tief) * var(--ferne) * -1), 0 ) scale(1.055); filter: blur(calc(var(--staub) * var(--staubfaktor, 1))); opacity: 0.3; } } } /* DIE LESBARE FASSUNG. Die Textur ist ein Abbild; die Grundsaetze selbst stehen einmal vollstaendig im Fussbereich, mit Gesetz und Fundstelle, und werden vorgelesen. Sie sind nicht zu sehen, weil sie sonst genau das waeren, was sie nicht sein sollen: ein Kasten mit Paragraphen. */ .normen-lesbar { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* ---------------------------------------------------------------- Kopf */ .site { position: sticky; top: 0; z-index: 10; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 28px; max-width: var(--max); margin: 0 auto; padding: 22px var(--pad); /* Beim Scrollen wird der Kopf lesbarer, ohne Glaseffekt. */ background: color-mix(in srgb, var(--as-bg) 88%, transparent); border-bottom: 1px solid transparent; transition: background 0.2s, border-color 0.2s; } @supports (animation-timeline: scroll()) { .site { animation: settle linear both; animation-timeline: scroll(); animation-range: 0 160px; } @keyframes settle { to { background: var(--as-bg); border-bottom-color: var(--as-line); } } } /* DER LESESTAND. Eine Haarlinie auf der Unterkante des Kopfes, die mit dem Weg durch die Seite mitwaechst. Dieselbe Sprache wie die frueheren Fortschrittslinie am Satzrad - nur haengt sie nicht an einer Uhr, sondern am Scrollen. Sie laeuft OHNE SKRIPT. `scroll()` liest den Fortschritt im Browser selbst, nicht im Hauptthread: kein Ereignis pro Bild, keine Messung im Layout, nichts, was auf einem Telefon Rechenzeit kostet. Damit bleibt die Regel aus `motion.js` unangetastet, dass beim Scrollen nichts gerechnet wird. Fehlt die Zeitleiste im Browser, bleibt der Kopf genau der, der er vorher war: eine Haarlinie weniger, sonst nichts. Deshalb steht sie im `@supports` und nicht davor. Sie traegt `--as-signal-dim`, den Ton fuer Bedienlinien, und sie liegt AUF dem Rand statt darueber - eine Orientierung am Rand, keine zweite Linie im Bild. */ @supports (animation-timeline: scroll()) { .site::after { content: ''; position: absolute; left: 0; bottom: -1px; width: 100%; height: 1px; background: var(--as-signal-dim); transform: scaleX(0); transform-origin: left center; animation: lesestand linear both; animation-timeline: scroll(); } @keyframes lesestand { to { transform: scaleX(1); } } } .wordmark { color: var(--as-text); text-decoration: none; font-weight: 600; letter-spacing: 0.26em; text-transform: uppercase; font-size: 0.8rem; } .site nav { display: flex; flex-wrap: wrap; gap: 28px; } .site nav a { color: var(--as-text-muted); text-decoration: none; font-size: 0.86rem; padding: 8px 0; border-bottom: 1px solid transparent; transition: color 0.15s, border-color 0.15s; } .site nav a:hover { color: var(--as-text); border-bottom-color: var(--as-line-strong); } /* DER SPRACHWECHSEL IST EIN WEG, ABER NICHT DERSELBE. Er steht in derselben Zeile wie die drei Abschnitte und traegt dieselbe Schrift - aber er fuehrt aus der Seite heraus statt in sie hinein. Deshalb steht er etwas abgesetzt und in der leiseren Farbe: eine Nebentuer, kein vierter Abschnitt. */ .site nav a.sprache { margin-left: 6px; padding-left: 28px; color: var(--as-ink-3); letter-spacing: 0.18em; font-size: 0.72rem; } .site nav a.sprache:hover, .site nav a.sprache:focus-visible { color: var(--as-text); } /* ---------------------------------------------------------------- Hero */ main { max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); /* Ueber der Paragraphentextur, die am Koerper der Seite liegt. */ position: relative; z-index: 1; /* DER UEBERSTAND WIRD HIER ABGEFANGEN, NICHT ERST AM VIEWPORT. `body { overflow-x: hidden }` verhindert das waagrechte Verschieben - aber nur das. Auf dem Telefon bleibt der Ueberstand trotzdem im Layout, und der Browser zoomt heraus, um ihn unterzubringen: gemessen bei 390 Pixeln Geraetebreite eine Seitenbreite von 489. Alles wird kleiner, die Zeichenflaeche groesser als noetig, und das Scrollen fuehlt sich falsch an. Der Satz `ein Messwert ohne Wirkung` galt fuer den Zeigerbetrieb; fuer das Telefon war er falsch. `clip` STATT `hidden`, und das ist der ganze Trick: `hidden` machte diesen Kasten zum Scrollcontainer und die Schrittkarten darin wuerden sich nicht mehr heften. `clip` schneidet ab, ohne einer zu werden. `overflow-clip-margin` schiebt die Schnittkante um die Seitenluft nach aussen - genau auf den Fensterrand. Die Bildmarke wird also dort beschnitten, wo der Bildschirm ohnehin endet, und nicht an der Textkante. */ overflow-x: clip; overflow-clip-margin: var(--pad); } /* DER HERO ALS RAUM, NICHT ALS ZEILE. Die Bildmarke steht nicht mehr brav in ihrer Spalte: sie ist deutlich groesser als ihr Kasten und laeuft nach links aus dem Bild. Das Zeichen ist damit das Bild des ersten Viewports, nicht eine Illustration daneben. Die schmalere linke Spalte ist Absicht. Die Buehne darin waechst ueber ihre Spalte hinaus, waehrend der Text die breitere Haelfte behaelt und dadurch gross gesetzt werden kann. */ .hero { display: grid; grid-template-columns: minmax(0, 0.78fr) minmax(0, 1fr); align-items: center; gap: 56px; min-height: min(94svh, 880px); padding: clamp(28px, 5vh, 60px) 0 var(--space-section); } .kicker { margin: 0 0 var(--space-text); font-size: 0.72rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--as-text-muted); } h1 { margin: 0; /* Deutlich groesser als zuvor: die Aussage ist das zweite Bild des Heros. Die Obergrenze ist gemessen so gesetzt, dass `beginnen` in der breiteren Spalte steht, ohne mitten im Wort zu brechen. */ font-size: clamp(2.5rem, 5.6vw, 5rem); line-height: 0.98; letter-spacing: -0.045em; font-weight: 700; max-width: 13ch; } /* Der Gegensatz steht als eigene, ruhigere Zeile. Als Teil der Ueberschrift sprengte "Versicherungsprodukt" die Spalte und brach mitten im Wort: `hyphens: auto` hilft ohne deutsche Trennmuster nicht. Der weiche Trennstrich im Markup setzt die Stelle selbst. */ .counter { margin: 18px 0 0; font-size: clamp(1.3rem, 2.6vw, 2.3rem); line-height: 1.2; letter-spacing: -0.02em; font-weight: 600; color: var(--as-text); max-width: 20ch; } .lead { margin: var(--space-block) 0 0; max-width: 42ch; font-size: clamp(1.02rem, 1.4vw, 1.22rem); line-height: 1.6; color: var(--as-text-muted); } /* ------------------------------------------------ Die Bildmarke in 3D */ /* DIE BUEHNE IST DAS A, nicht der Rahmen darum. Vorher war die Buehne ein Layoutkasten, in dem das Zeichen nur 36 Prozent einnahm - der Rest war leerer, aber raumgreifender Rotorkasten. Genau dieser Leerraum erzwang die frueheren Notbehelfe: erst einen negativen Seiteneinzug, dann `overflow: hidden`. Das eine schnitt das A am Fensterrand ab, das andere an der Kastenkante. `--a-breite` ist jetzt die GERENDERTE BREITE DES A. Der Rotor waechst darin auf `--rotor-anteil` und ragt symmetrisch darueber hinaus; dieser Ueberstand ist vollstaendig durchsichtig und wird nirgends beschnitten. Die Groesse haengt an Breite UND Hoehe: ein breites, aber flaches Fenster darf das Zeichen weder abschneiden noch aufblaehen. `svh` statt `vh`, damit die Adressleiste mobiler Browser nichts verschiebt. */ .stage { perspective: 1400px; perspective-origin: 50% 46%; --a-breite: clamp(200px, min(32vw, 44svh), 440px); width: var(--a-breite); aspect-ratio: 1 / 1; max-width: none; margin: 0 auto; display: grid; place-items: center; } .rotor { position: relative; /* Groesser als die Buehne, damit das A darin genau die Buehne ausfuellt. Der Ueberstand ist durchsichtig; `place-items: center` zentriert ihn symmetrisch, sodass das ZEICHEN mittig steht, nicht sein Kasten. */ width: var(--rotor-anteil); height: var(--rotor-anteil); transform-style: preserve-3d; /* Leichte Neigung, damit auch die Fussflaechen Tiefe zeigen. */ transform: rotateX(-11deg) rotateY(0deg) scale3d(2.05, 2.05, 2.05); animation: spin var(--spin) linear infinite; will-change: transform; } @keyframes spin { from { transform: rotateX(-11deg) rotateY(0deg) scale3d(2.05, 2.05, 2.05); } to { transform: rotateX(-11deg) rotateY(360deg) scale3d(2.05, 2.05, 2.05); } } .face, .wall { position: absolute; inset: 0; backface-visibility: visible; } /* Vorder- und Rueckseite. Der Umriss ist die am Original vermessene Geometrie, als Prozentwerte des Quadrats: kein nachgezeichnetes Logo. */ .face { clip-path: polygon( 50% 32.4%, 68.04% 67.5%, 60.99% 67.5%, 50% 46.2%, 39.01% 67.5%, 31.96% 67.5% ); } .front { transform: translateZ(calc(var(--depth) / 2)); /* Rein weiss und flach: das A selbst traegt kein Licht, die Tiefe entsteht ausschliesslich an den Seitenflaechen. */ background: #ffffff; } .back { transform: translateZ(calc(var(--depth) / -2)) rotateY(180deg); /* Die Rueckseite ist dasselbe A und ebenso deckend weiss. */ background: #ffffff; } .wall { inset: auto; height: var(--depth); transform-origin: 50% 50%; } /* Die sechs Seitenwaende der Extrusion, `assecura`. Erzeugt aus der am Original vermessenen Geometrie, nicht geschaetzt: je Kante ein Rechteck in der Ebene aus Kantenrichtung und Tiefenachse. DECKEND, NICHT HALBTRANSPARENT. Mit `rgba` liess jede Wand, die vor einer Flaeche lag, diese durchscheinen, und in der Seitenansicht wirkte der ganze Koerper wie Glas. Die Helligkeiten sind deshalb als feste Grauwerte gerechnet: dieselbe Lichtwirkung, aber nichts scheint hindurch. */ /* Aussenkante rechts */ .wall-0 { left: 59.020%; top: 49.950%; width: 39.465%; transform: translate(-50%, -50%) rotateZ(62.799deg) rotateX(90deg); background: linear-gradient(180deg, #6e6e6e 0%, #9c9c9c 34%, #565656 62%, #333333 100%); } /* Fussflaeche rechts */ .wall-1 { left: 64.515%; top: 67.500%; width: 7.050%; transform: translate(-50%, -50%) rotateZ(180.000deg) rotateX(90deg); background: linear-gradient(180deg, #4c4c4c 0%, #6b6b6b 38%, #3a3a3a 70%, #232323 100%); } /* Kerbe rechts */ .wall-2 { left: 55.495%; top: 56.850%; width: 23.968%; transform: translate(-50%, -50%) rotateZ(-117.292deg) rotateX(90deg); background: linear-gradient(180deg, #6e6e6e 0%, #9c9c9c 34%, #565656 62%, #333333 100%); } /* Kerbe links */ .wall-3 { left: 44.505%; top: 56.850%; width: 23.968%; transform: translate(-50%, -50%) rotateZ(117.292deg) rotateX(90deg); background: linear-gradient(180deg, #a9a9a9 0%, #e2e2e2 32%, #8a8a8a 64%, #545454 100%); } /* Fussflaeche links */ .wall-4 { left: 35.485%; top: 67.500%; width: 7.050%; transform: translate(-50%, -50%) rotateZ(180.000deg) rotateX(90deg); background: linear-gradient(180deg, #4c4c4c 0%, #6b6b6b 38%, #3a3a3a 70%, #232323 100%); } /* Aussenkante links */ .wall-5 { left: 40.980%; top: 49.950%; width: 39.465%; transform: translate(-50%, -50%) rotateZ(-62.799deg) rotateX(90deg); background: linear-gradient(180deg, #a9a9a9 0%, #e2e2e2 32%, #8a8a8a 64%, #545454 100%); } /* ------------------------------------------------------------- Knoepfe */ .actions { display: flex; flex-wrap: wrap; gap: 12px; margin: var(--space-block) 0 0; } .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 14px 28px; border: 1px solid var(--as-line-strong); background: transparent; color: var(--as-text); font: inherit; font-weight: 600; font-size: 0.94rem; text-decoration: none; /* Ruhige Bewegung: Flaeche und Kontur, wenige Pixel. Kein Glow. */ transition: background 0.16s ease, border-color 0.16s ease, transform 0.16s ease; } .btn:hover { background: var(--as-surface); border-color: var(--as-text); transform: translateY(-1px); } .btn-primary { background: var(--as-text); border-color: var(--as-text); color: var(--as-bg); } .btn-primary:hover { background: #e8e8ec; border-color: #e8e8ec; } /* ---------------------------------------------------------- Abschnitte */ /* Das redaktionelle Zweispaltenraster. Vorher stand aller Inhalt in einer linken Spalte, waehrend die rechte Haelfte der Seite leer blieb - bei 1440 Pixeln sah das unfertig aus, nicht grosszuegig. Jetzt traegt die schmale linke Spalte die Abschnittsmarke und die breite rechte den Inhalt. Das ergibt eine durchgehende senkrechte Achse und nutzt die Flaeche mit Absicht. Das Markup bleibt unveraendert: die Zuordnung geschieht ueber die Spalten. */ .band { /* Eigener Stapel: sonst faellt die Normenschicht hinter den Seitengrund. */ isolation: isolate; padding-top: var(--space-block); padding-bottom: var(--space-section); border-top: 1px solid var(--as-line); display: grid; grid-template-columns: minmax(160px, 1fr) minmax(0, 3fr); column-gap: 48px; align-items: start; position: relative; } /* Die Kapitelziffer steht in der Marginalspalte, darunter eine kurze Linie im Markenwinkel. Zusammen bilden sie den redaktionellen Anker jedes Abschnitts - und sie zitieren die Geometrie des A. */ .band[data-kap]::before { content: attr(data-kap); grid-column: 1; grid-row: 1; align-self: start; font-family: var(--sans); font-size: clamp(2.6rem, 4vw, 4rem); font-weight: 700; line-height: 0.9; letter-spacing: -0.05em; color: var(--as-mark); /* Die Szene faengt selbst keine Bedienung ab - der Knopf darunter bleibt frei. Nur die Zeichenflaeche nimmt das Ziehen an. */ pointer-events: none; } /* MIT DER MAUS DREHBAR, WIE EIN MODELL. `touch-action: pan-y` ist hier der entscheidende Wert: senkrechtes Scrollen bleibt beim Browser, waagrechtes Ziehen kommt bei uns an. Ohne das waere die Grafik auf dem Telefon eine Falle - man wischt zum Scrollen und dreht stattdessen das Modell. Die Flaeche bleibt ausserhalb der Bedienreihenfolge: sie ist dekorativ, traegt keinen Inhalt und wird nicht angesteuert. Das Ziehen ist eine Zugabe, keine Notwendigkeit - alles bleibt ohne sie erreichbar. */ .szene canvas { pointer-events: auto; touch-action: pan-y; cursor: grab; -webkit-user-select: none; user-select: none; } .szene canvas.zieht { cursor: grabbing; } .band[data-kap]::after { content: ''; position: absolute; left: 0; top: calc(var(--space-block) + 5.2em); width: 1px; height: 120px; background: var(--as-line-strong); transform-origin: top left; transform: rotate(calc(90deg - var(--as-angle))); /* Die Szene faengt selbst keine Bedienung ab - der Knopf darunter bleibt frei. Nur die Zeichenflaeche nimmt das Ziehen an. */ pointer-events: none; } /* MIT DER MAUS DREHBAR, WIE EIN MODELL. `touch-action: pan-y` ist hier der entscheidende Wert: senkrechtes Scrollen bleibt beim Browser, waagrechtes Ziehen kommt bei uns an. Ohne das waere die Grafik auf dem Telefon eine Falle - man wischt zum Scrollen und dreht stattdessen das Modell. Die Flaeche bleibt ausserhalb der Bedienreihenfolge: sie ist dekorativ, traegt keinen Inhalt und wird nicht angesteuert. Das Ziehen ist eine Zugabe, keine Notwendigkeit - alles bleibt ohne sie erreichbar. */ .szene canvas { pointer-events: auto; touch-action: pan-y; cursor: grab; -webkit-user-select: none; user-select: none; } .szene canvas.zieht { cursor: grabbing; } .band > .kicker { grid-column: 1; grid-row: 1; /* unter der Kapitelziffer */ align-self: start; margin: 5.2em 0 0; } .band > :not(.kicker) { grid-column: 2; } .band h2 { margin: 0 0 var(--space-block); font-size: clamp(1.7rem, 3.2vw, 2.6rem); line-height: 1.1; letter-spacing: -0.03em; font-weight: 700; max-width: 20ch; } .text { margin: 0; max-width: 58ch; color: var(--as-text-muted); } /* DIE DREI SCHRITTE ALS STAPEL. Vorher standen sie als drei gleichrangige Spalten nebeneinander: alles auf einmal, nichts betont. Jetzt heftet sich jeder Schritt kurz unter dem Kopf fest, und der naechste schiebt sich mit einem Versatz darueber - beim Scrollen entsteht ein Stapel, dessen Kanten sichtbar bleiben. DAS IST KEIN SCROLL-JACKING. `position: sticky` liest die Scrollposition, es setzt sie nicht. Das Scrollen bleibt exakt so schnell, wie der Besucher es macht, jederzeit unterbrechbar, und die Tastatur- und Browsernavigation ist unberuehrt. Die Reihenfolge ist die Aussage, deshalb bleibt es eine geordnete Liste und keine Ansammlung von Kaesten: jede Karte traegt eine Oberkante, kein Rahmen ringsum. */ .steps { list-style: none; margin: 0; padding: 0; display: block; } .steps li { position: sticky; /* Gestaffelte Hoehen: die Kante der darunterliegenden Karte bleibt sichtbar, sonst waere der Stapel nicht als Stapel zu erkennen. */ top: 96px; padding: 30px 30px 34px; border-top: 1px solid var(--as-line-strong); background-color: var(--as-bg-1); background-image: linear-gradient( 180deg, rgb(255 255 255 / 0.028) 0%, rgb(255 255 255 / 0.004) 46%, transparent 100% ); /* Ein dunkler Schatten NACH OBEN: nur so liest sich der Versatz als Stapel und nicht als Aneinanderreihung. Kein Leuchten, kein Farbton. */ box-shadow: 0 -20px 44px rgb(0 0 0 / 0.62); min-height: 236px; } .steps li:nth-child(2) { top: 136px; } .steps li:nth-child(3) { top: 176px; } .num { display: block; margin-bottom: 12px; font-size: 0.72rem; letter-spacing: 0.22em; color: var(--as-ink-3); } .steps h3 { margin: 0 0 var(--space-text); /* Deutlich groesser: jede Karte traegt jetzt einen eigenen Auftritt. */ font-size: clamp(1.4rem, 2.6vw, 2.1rem); font-weight: 600; letter-spacing: -0.025em; line-height: 1.1; max-width: 22ch; } .steps p { margin: 0; color: var(--as-text-muted); max-width: 52ch; font-size: 1rem; } /* DAS RISIKOFELD: AUS UNORDNUNG WIRD STRUKTUR. Vierundzwanzig Segmente, sechs Reihen. Der Endzustand ist der AUSGANGSZUSTAND im Stylesheet: ausgerichtet, geordnet, vollstaendig sichtbar. Erst die Unordnung wird zugeschaltet - entweder ueber die Scrollzeitachse oder, wo es die nicht gibt, ueber den Beobachter. Wer weder das eine noch das andere hat, sieht die fertige Struktur. Nach unten hin werden die Reihen fester und nehmen zuletzt das Signal an: die geordnete Struktur ist der Ort, an dem die Zukunftsebene auftaucht, nicht das Risiko. */ .feld-box { margin: var(--space-figur) 0 10px; } /* TYPOGRAFISCHE ACHSE. Zwei grosse Woerter benennen die Verwandlung, die das Feld darunter vollzieht: links das unbestimmte Risiko, leise gesetzt, rechts die Struktur, fest und mit dem Signal. Die Linie dazwischen ist dieselbe Bewegung wie im Feld. */ .feld-marke { display: flex; align-items: center; gap: 22px; margin: 0 0 26px; font-size: clamp(1.5rem, 3.2vw, 2.6rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1; } .fm-a { color: var(--as-ink-3); } .fm-b { color: var(--as-text); } .fm-linie { flex: 1 1 auto; height: 1px; background: linear-gradient( 90deg, var(--as-line) 0%, var(--as-line-strong) 40%, var(--as-signal-mid) 100% ); transform-origin: left center; } /* Scrollchoreografie NUR, wenn Bewegung erwuenscht ist. Die `no-preference`-Abfrage ist der entscheidende Riegel: bei `prefers-reduced-motion: reduce` entstehen diese Animationen gar nicht erst. Sie nachtraeglich abzuschalten haette bedeutet, jede einzelne wieder aufzuzaehlen - und die naechste zu vergessen. */ @media (prefers-reduced-motion: no-preference) { @supports (animation-timeline: view()) { .fm-linie { animation: spannen linear both; animation-timeline: view(); animation-range: entry 26% cover 46%; } } } @keyframes spannen { from { transform: scaleX(0); } to { transform: scaleX(1); } } .feld { display: block; width: 100%; height: auto; overflow: visible; } .seg { stroke-width: 1.5; vector-effect: non-scaling-stroke; /* Gedreht wird um die eigene Mitte, nicht um den Ursprung der Grafik. */ transform-box: fill-box; transform-origin: center; } .seg.r1 { stroke: var(--as-line-strong); opacity: 0.34; } .seg.r2 { stroke: var(--as-line-strong); opacity: 0.5; } .seg.r3 { stroke: var(--as-ink-3); opacity: 0.66; } .seg.r4 { stroke: var(--as-text-muted); opacity: 0.8; } .seg.r5 { stroke: var(--as-signal-mid); opacity: 0.92; } .seg.r6 { stroke: var(--as-signal); opacity: 1; } /* Die Unordnung. Ein einziges Keyframe-Paar fuer alle vierundzwanzig Segmente: die Werte kommen je Segment aus `--r`, `--dx` und `--dy` im Markup. Bewegt werden ausschliesslich `transform` und `opacity`. */ @keyframes ordnen { from { transform: translate(var(--dx), var(--dy)) rotate(var(--r)); opacity: 0.22; } to { transform: translate(0, 0) rotate(0deg); } } /* Scrollchoreografie NUR, wenn Bewegung erwuenscht ist. Die `no-preference`-Abfrage ist der entscheidende Riegel: bei `prefers-reduced-motion: reduce` entstehen diese Animationen gar nicht erst. Sie nachtraeglich abzuschalten haette bedeutet, jede einzelne wieder aufzuzaehlen - und die naechste zu vergessen. */ @media (prefers-reduced-motion: no-preference) { @supports (animation-timeline: view()) { .seg { animation: ordnen linear both; animation-timeline: view(); /* Der Fortschritt haengt am Scrollen, nicht an einer Uhr: das Feld ordnet sich waehrend es durch das Bild laeuft und steht danach. */ animation-range: entry 24% cover 52%; } /* Reihenweise versetzt: die Ordnung entsteht von oben nach unten. */ .seg.r2 { animation-range: entry 28% cover 56%; } .seg.r3 { animation-range: entry 32% cover 60%; } .seg.r4 { animation-range: entry 36% cover 64%; } .seg.r5 { animation-range: entry 40% cover 68%; } .seg.r6 { animation-range: entry 44% cover 72%; } } } /* Ohne Scrollzeitachse uebernimmt der Beobachter: ein Zustand, ein Uebergang. */ @supports not (animation-timeline: view()) { html.js .feld-box .seg { transform: translate(var(--dx), var(--dy)) rotate(var(--r)); transition: transform 1100ms var(--ease), opacity 1100ms var(--ease); } html.js .feld-box.gebaut .seg { transform: translate(0, 0) rotate(0deg); } html.js .feld-box .seg.r2 { transition-delay: 60ms; } html.js .feld-box .seg.r3 { transition-delay: 120ms; } html.js .feld-box .seg.r4 { transition-delay: 180ms; } html.js .feld-box .seg.r5 { transition-delay: 240ms; } html.js .feld-box .seg.r6 { transition-delay: 300ms; } } /* DER LASTPFAD. Vier Knoten an einer durchgehenden Achse. Die Achse beginnt links blass und endet rechts voll weiss: das ist die Leitidee der Seite in einem Element - vom unbestimmten Risiko zur strukturierten Uebertragung. Die Nummerierung kommt aus der Liste selbst, nicht aus Dekoration. ES WAREN SECHS. Erkennen, Bewerten, Reduzieren, Selbst tragen, Uebertragen, Absichern - darin steckten drei Fehler: `Reduzieren` ist nur EINE Form der Steuerung, `Selbst tragen` und `Uebertragen` sind keine Schritte nacheinander, sondern eine Entscheidung mit zwei Ausgaengen, und `Absichern` sagte dasselbe noch einmal. Der letzte Knoten traegt die Alternative deshalb als ein Feld. */ .path { position: relative; list-style: none; margin: 58px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; } .path::before { content: ''; position: absolute; left: 0; right: 0; top: 5px; height: 1px; /* Voll weiss steht am LETZTEN KNOTEN, nicht am rechten Rand. Bei sechs Knoten sass er auf 83 Prozent und der helle Rest war ein schmaler Auslauf; bei vier sitzt er auf 75, und ein Viertel der Achse waere heller gewesen als ihr eigenes Ziel. Der letzte Stopp liegt deshalb auf der Marke des Endknotens - dahinter bleibt die Achse weiss und laeuft aus. */ background: linear-gradient( 90deg, var(--as-line) 0%, var(--as-line-strong) 30%, var(--as-text-muted) 56%, var(--as-text) 75% ); } .path li { position: relative; padding: 22px 12px 0 0; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--as-text-muted); counter-increment: pfad; } .path li::before { /* Der Knoten auf der Achse. Er waechst zum Ende hin mit. */ content: ''; position: absolute; left: 0; top: 2px; width: 7px; height: 7px; background: var(--as-line-strong); transform: rotate(45deg); transform-origin: center; } /* Der Knoten waechst zum Ende hin mit: der vorletzte steht schon heller. */ .path li:nth-child(3)::before { background: var(--as-text-muted); } .path li:last-child::before { background: var(--as-text); } .path li:last-child { color: var(--as-text); } /* ------------------------------------------------------ Die Deckungsluecke */ /* ZWEI UMRISSE, EIN REST. Das Risiko steht als Umriss, die Deckung schiebt sich beim Scrollen darueber - und nie ganz. Was ueber bleibt, traegt eine Schraffur im Markenwinkel und als einziges Stueck des Bildes das Signal. SCHRAFFUR STATT FLAECHE, und das ist der ganze Punkt. Eine gefuellte Flaeche liest sich als Anteil; wer sie sieht, rechnet. Eine Schraffur liest sich als Hinweis. Dargestellt wird, DASS ein Rest bleibt, nicht wie gross er ist - welcher Teil eines Risikos gedeckt ist, steht in einem Vertrag und nicht in einer Zeichnung. Der Rest entsteht nicht aus gerechneter Geometrie, sondern aus einer Maske: die Deckung stanzt sich aus dem Risiko heraus. Damit stimmt der Umriss in jeder Stellung, auch waehrend die Deckung wandert. */ .luecke-box { margin: var(--space-figur) 0 0; } .luecke { display: block; width: 100%; height: auto; overflow: visible; } /* NUR DIE SICHTBAREN UMRISSE, DESHALB DER KINDVERBINDER. `fill: none` fuer jedes `polygon` traf auch die Form IN DER MASKE. CSS schlaegt ein Praesentationsattribut, also verlor dort das `fill="#000"`, die Maske stanzte nichts mehr aus - und die Schraffur lag ueber dem ganzen Risiko statt nur ueber dem Rest. Im Bild sah es aus, als sei nichts gedeckt. */ .luecke > polygon { fill: none; stroke-width: 1.5; vector-effect: non-scaling-stroke; } #lk-schraffur line { stroke: var(--as-signal-dim); stroke-width: 1; } /* Der Vorrang muss zu `.luecke polygon` passen, das jedem Umriss `fill: none` gibt - sonst gewinnt die allgemeine Regel und die Schraffur bleibt unsichtbar. Genau so war es, und im Bild fehlte schlicht der Rest. */ .luecke .lk-offen { fill: url(#lk-schraffur); stroke: none; } .lk-risiko { stroke: var(--as-line-strong); } .lk-deckung { stroke: var(--as-text-muted); } .lk-marken { display: flex; justify-content: space-between; max-width: 62%; margin: 14px 0 0; font-size: 0.66rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--as-ink-3); } /* Die Deckung kommt von aussen herein. Bewegt wird nur `transform`, und zwar an BEIDEN Stellen zugleich: am sichtbaren Umriss und an derselben Form in der Maske. Liefen sie auseinander, laege der Rest woanders als die Kante, die ihn erzeugt. */ @keyframes decken { from { transform: translate(148px, 26px); } to { transform: translate(0, 0); } } @media (prefers-reduced-motion: no-preference) { @supports (animation-timeline: view()) { .lk-schieber { animation: decken linear both; animation-timeline: view(); animation-range: entry 26% cover 58%; } } } /* ---------------------------------------------------------- Die Wiederkehr */ /* DER PFAD ENDET, DER AUFTRAG NICHT. Eine Achse mit gleichen Teilstrichen, eine Marke, die sie entlanglaeuft, und eine Klammer, die vom letzten Strich zum ersten zurueckfuehrt. KEINE ZEITANGABE. Die Striche stehen gleich weit auseinander und heissen nichts - nicht Monate, nicht Jahre. Gezeigt wird, DASS es wiederkehrt. Ein Intervall waere eine Zusage, und Zusagen stehen im Mandat. */ .wieder { margin: 50px 0 0; } .wk { display: block; width: 100%; height: auto; overflow: visible; } .wk-achse { stroke: var(--as-line-strong); stroke-width: 1; vector-effect: non-scaling-stroke; } .wk-striche line { stroke: var(--as-line-strong); stroke-width: 1; vector-effect: non-scaling-stroke; } .wk-klammer, .wk-spitze { fill: none; stroke: var(--as-signal-dim); stroke-width: 1; vector-effect: non-scaling-stroke; opacity: 0; } .wk-marke { fill: var(--as-signal); transform-box: fill-box; transform-origin: center; /* ERST SCHIEBEN, DANN DREHEN. Umgekehrt dreht die Drehung die Verschiebung mit: aus `rotate(45deg) translate(938px, 0)` wurde gemessen eine Bewegung um 300 nach rechts UND 300 nach unten - die Marke lief diagonal aus der Achse heraus statt an ihr entlang. */ transform: translate(0, 0) rotate(45deg); } .wk-marken { margin: 10px 0 0; font-size: 0.66rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--as-ink-3); } /* Die Marke laeuft die Achse entlang. Die Drehung steht in jedem Schritt mit drin: eine zweite Transformation wuerde die erste ueberschreiben. */ @keyframes wandern { from { transform: translate(0, 0) rotate(45deg); } to { transform: translate(938px, 0) rotate(45deg); } } /* Die Klammer taucht auf, wenn die Marke am Ende steht - sie blinkt nicht. */ @keyframes einsetzen { from { opacity: 0; } to { opacity: 1; } } @media (prefers-reduced-motion: no-preference) { @supports (animation-timeline: view()) { .wk-marke { animation: wandern linear both; animation-timeline: view(); animation-range: entry 30% cover 62%; } .wk-klammer, .wk-spitze { animation: einsetzen linear both; animation-timeline: view(); animation-range: cover 52% cover 70%; } } } /* Ohne Scrollzeitachse steht die Figur fertig da: Marke am Ende, Klammer sichtbar. Das ist die Aussage in einem Bild statt in zweien - nichts geht verloren, nur die Bewegung dorthin. */ @supports not (animation-timeline: view()) { .wk-marke { transform: translate(938px, 0) rotate(45deg); } .wk-klammer, .wk-spitze { opacity: 1; } } /* ---------------------------------------------------------- Der Gegenbogen */ /* DER SCHLUSSREIM ZUM RISIKOFELD. Oben wird aus Streuung Struktur, hier aus Struktur ein Satz: wenige Striche laufen in EINE Linie zusammen, die auf die Kontaktfelder zeigt. Dieselben Werte je Strich, dasselbe Keyframe-Paar wie im Feld - nur die Zielform ist eine andere. */ .bogen-box { margin: calc(var(--space-figur) * 0.7) 0 0; max-width: 520px; } .bogen { display: block; width: 100%; height: auto; overflow: visible; } .bogen .seg.bg1 { stroke: var(--as-line-strong); opacity: 0.4; } .bogen .seg.bg2 { stroke: var(--as-ink-3); opacity: 0.62; } .bogen .seg.bg3 { stroke: var(--as-text-muted); opacity: 0.82; } .bogen .seg.bg4 { stroke: var(--as-signal-mid); opacity: 1; } @media (prefers-reduced-motion: no-preference) { @supports (animation-timeline: view()) { .bogen .seg.bg2 { animation-range: entry 30% cover 58%; } .bogen .seg.bg3 { animation-range: entry 34% cover 62%; } .bogen .seg.bg4 { animation-range: entry 38% cover 66%; } } } @supports not (animation-timeline: view()) { html.js .bogen-box .seg { transform: translate(var(--dx), var(--dy)) rotate(var(--r)); transition: transform 1100ms var(--ease), opacity 1100ms var(--ease); } html.js .bogen-box.gebaut .seg { transform: translate(0, 0) rotate(0deg); } } /* Die Abgrenzung zum Risikotraeger. Sachlich und nachgeordnet, aber als Fliesstext: mit linker Linie und Einzug las sie sich wie ein Warnkasten. */ /* Drei Absaetze, EINE Aussage. Zwischen ihnen steht deshalb der Abstand einer Zeile und nicht der eines neuen Blocks - sonst zerfaellt die Abgrenzung in drei einzelne Notizen, und die mittlere, die den Versicherer benennt, steht fuer sich allein da. */ .note + .note { margin-top: 1.1em; } .note { margin: var(--space-block) 0 0; max-width: 62ch; font-size: 0.92rem; line-height: 1.65; color: var(--as-text-muted); } /* Die Risikotraegerleiste. Das Logo wird als MASKE gesetzt: die Form kommt aus dem Alphakanal des Originals, die Farbe ist reines Weiss. Dadurch keine helle Kartenflaeche, keine Filterkette und keine Veraenderung des Originalassets. Ruhig und kleiner als das Assecura-Zeichen; die Dachmarke bleibt die staerkere. */ .carriers { position: relative; margin: var(--space-block) 0 0; padding-top: var(--space-block); border-top: 1px solid var(--as-line); } .carrier-label { margin: 0 0 22px; font-size: 0.7rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--as-text-muted); } .carrier-rail { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 56px; /* Ab zwei Eintraegen waechst die Leiste waagrecht, ohne die Seite zu verbreitern. Bei einem Eintrag passiert nichts davon. */ overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; } .carrier-rail::-webkit-scrollbar { display: none; } .carrier-rail > li { flex: 0 0 auto; scroll-snap-align: start; } .carrier { display: block; /* UEBER DIE HOEHE AUSGERICHTET, NICHT UEBER DIE BREITE. Die Leiste trug lange ein einziges Logo und mit ihm dessen festes Verhaeltnis. Zwei Marken haben aber zwei: Hiscox liegt bei 2,055, Nexus Mutual bei 3,028. Auf gleiche BREITE gestellt waere das breitere Zeichen sofort das kleinere - eine Rangfolge, die niemand beschlossen hat. Gemeinsam ist ihnen die Hoehe; jedes Logo bringt sein Verhaeltnis selbst mit. Nexus Mutual steht etwas niedriger: seine Wortmarke ist zweizeilig, und auf gleicher Gesamthoehe waeren seine Buchstaben deutlich kleiner als die von Hiscox. */ height: var(--hoehe, 72px); width: calc(var(--hoehe, 72px) * var(--verhaeltnis, 2.055)); background-color: var(--as-text); -webkit-mask-image: var(--logo); mask-image: var(--logo); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; } /* Die Pfeile entstehen erst im Skript und nur ab zwei Eintraegen. */ .carrier-nav { display: none; } .carriers.has-controls { padding-right: 96px; } .carriers.has-controls .carrier-nav { display: inline-flex; align-items: center; justify-content: center; position: absolute; top: var(--space-block); width: 40px; height: 40px; background: transparent; border: 1px solid var(--as-line-strong); color: var(--as-text); font: inherit; cursor: pointer; transition: background 0.16s ease, border-color 0.16s ease; } .carriers.has-controls .carrier-nav:hover { background: var(--as-surface); border-color: var(--as-text); } .carriers.has-controls .carrier-nav:nth-of-type(1) { right: 48px; } .carriers.has-controls .carrier-nav:nth-of-type(2) { right: 0; } /* Die Unterzeile direkt unter der Produktueberschrift. */ .claim { margin: 0 0 var(--space-block); max-width: 42ch; font-size: clamp(1.1rem, 1.7vw, 1.35rem); line-height: 1.35; letter-spacing: -0.015em; color: var(--as-text); } .band .text + .text { margin-top: var(--space-text); } /* DIE PRODUKTBUEHNE. CoverRaccoon steht auf einer eigenen, minimal helleren Flaeche mit einem sehr feinen Raster im Markenwinkel. Das Raster ist Textur, kein Ornament: es macht den Abschnitt als eigene Buehne unter dem Assecura-Dach lesbar, ohne eine zweite Bildmarke zu erfinden. */ #coverraccoon { /* Die Textur liegt auf dem HINTERGRUND, nicht auf `::before` - dieses Pseudoelement traegt bereits die Kapitelziffer und wurde sonst ueberschrieben. */ /* DERSELBE TON, ABER DURCHSCHEINEND. Der Grund war `--as-bg-soft`, also #0b0b0d - gegenueber dem Seitengrund #050506 ein Auftrag von sechs von 255 Stufen Weiss. Als DECKENDE Flaeche war er eine Wand: die Paragraphentextur liegt unter dem Inhalt und verschwand auf ganzen dreissig Prozent der Seite. Dieselben sechs Stufen als Weiss mit 0,024 Deckkraft ergeben ueber dem Seitengrund denselben Ton - nachgerechnet #0b0b0c gegen #0b0b0d - und lassen die Textur hindurch. Der Abschnitt sieht aus wie vorher und ist keine Wand mehr. */ background-color: rgb(255 255 255 / 0.024); background-image: repeating-linear-gradient( var(--as-angle), transparent 0 46px, rgb(255 255 255 / 0.024) 46px 47px ); margin-left: calc(var(--pad) * -1); margin-right: calc(var(--pad) * -1); padding-left: var(--pad); padding-right: var(--pad); } /* Der Abschluss. Die Bildmarke kehrt am Seitenende leise zurueck - klein, ruhig, ohne Rotation: die Klammer um die Erzaehlung. */ .closing-mark { /* Als Maske, nicht als Bild: die Datei ist schwarz auf weiss und haette als `` einen weissen Kasten ergeben. So steht dort ein ruhiges weisses Zeichen - der Schlusspunkt der Erzaehlung. */ display: block; width: 72px; aspect-ratio: 1 / 1; margin: 44px 0 0; background-color: var(--as-ink-3); /* Dieselbe vermessene Geometrie wie im Hero. Eine Maske scheiterte hier: die Markendatei ist RGB ohne Alphakanal, eine Alphamaske haette die volle Flaeche gezeigt. */ clip-path: polygon( 50% 32.4%, 68.04% 67.5%, 60.99% 67.5%, 50% 46.2%, 39.01% 67.5%, 31.96% 67.5% ); } .pending-note { margin: 18px 0 0; max-width: 52ch; font-size: 0.86rem; color: var(--as-ink-3); } /* Die Messachse im Hero. Eine feine Skala als Zeichen fuer Analyse: sie beginnt links und laeuft aus - dieselbe Bewegung wie der Lastpfad. */ .axis { position: relative; height: 54px; margin: 10px 0 22px; max-width: 260px; } /* DIE ANGABE ZUR ACHSE. Ohne sie las sich die Figur als unfertige Zeichnung - eine Linie, die irgendwo endet, und eine Teilung ohne Einheit. `62,8°` ist der gemessene Aussenwinkel des Assecura-A und derselbe Wert, der als `--as-angle` jede Schnittkante dieser Seite bestimmt. Die Zahl steht genau einmal da; wer sie liest, erkennt den Winkel danach ueberall wieder. Sie sitzt oben am Ende der Haarlinie, dort wo die Achse aufhoert - eine Angabe gehoert an das Ende einer Messung, nicht an ihren Anfang. */ .axis-wert { position: absolute; left: 56px; top: -2px; font-size: 0.62rem; letter-spacing: 0.14em; color: var(--as-ink-3); font-variant-numeric: tabular-nums; } /* Die Skala: eine feine Teilung, die nach rechts ausläuft. */ .axis::before { content: ''; position: absolute; left: 30px; right: 0; top: 37px; height: 7px; /* Kraeftig genug, um als Skala gelesen zu werden - vorher sah die Teilung wie ein Rest aus, nicht wie eine Absicht. */ background-image: repeating-linear-gradient( 90deg, var(--as-text-muted) 0 1px, transparent 1px 20px ); -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 34%, transparent 100%); mask-image: linear-gradient(90deg, #000 0%, #000 34%, transparent 100%); } /* Die Grundlinie der Skala. Sie traegt die Teilung und laeuft mit ihr aus. */ .axis::after { content: ''; position: absolute; left: 30px; right: 0; top: 45px; height: 1px; background: linear-gradient(90deg, var(--as-signal-dim), transparent); } /* Die Markenachse. Eine Haarlinie im gemessenen Winkel des A, die von der Skala nach links oben laeuft - zurueck auf das Zeichen, das im Hero unmittelbar links danebensteht. Das Auge zieht die Linie weiter. */ .axis i { position: absolute; left: 30px; top: 0; display: block; width: 1px; height: 50px; /* Oben am Signal, unten auslaufend: die Richtung ist die Aussage. */ background: linear-gradient(180deg, var(--as-signal), var(--as-signal-dim)); transform-origin: top left; transform: rotate(calc(90deg - var(--as-angle))); } /* Ein ruhiger Scrollhinweis, rein dekorativ. */ .scrollcue { grid-column: 2; margin: 56px 0 0; font-size: 0.66rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--as-ink-3); } .scrollcue::after { content: ''; display: block; width: 1px; height: 44px; margin-top: 12px; background: linear-gradient(180deg, var(--as-line-strong), transparent); } /* Ausserhalb des Bildes ruht der Hero. Die beiden einzigen dauerhaften Zeitbewegungen der Seite laufen nur, solange die Bildmarke wirklich zu sehen ist. */ :root.hero-ruht .rotor, :root.hero-ruht .stage::before { animation-play-state: paused; } /* Und wenn der Tab nicht sichtbar ist, laeuft nichts im Hintergrund. */ /* Der kleine Hinweis unter dem Knopf. Bewusst klein und nachgeordnet: die Rollen sind weiter oben bereits erklaert, hier genuegt ein Satz. Keine Warnbox, kein Rahmen. */ .fineprint { margin: var(--space-block) 0 0; max-width: 52ch; font-size: 0.82rem; line-height: 1.55; color: var(--as-ink-3); opacity: 0.72; } /* ------------------------------------------------------------------ Fuss */ .site-footer { position: relative; z-index: 1; max-width: var(--max); margin: 0 auto; padding: var(--space-block) var(--pad) 64px; border-top: 1px solid var(--as-line); font-size: 0.9rem; color: var(--as-text-muted); /* Dieselbe Achse wie die Abschnitte: die Wortmarke steht in der linken Spalte, alles Weitere in der rechten. */ display: grid; grid-template-columns: minmax(160px, 1fr) minmax(0, 3fr); column-gap: 48px; align-items: start; } .site-footer > .brand-line { grid-column: 1; grid-row: 1; } .site-footer > :not(.brand-line) { grid-column: 2; } .brand-line { margin: 0 0 var(--space-text); color: var(--as-text); font-weight: 600; letter-spacing: 0.26em; text-transform: uppercase; font-size: 0.8rem; } .site-footer nav { display: flex; flex-wrap: wrap; gap: 24px; margin-bottom: var(--space-text); } /* DIE RECHTSTEXTE SIND DA - UND SEHEN AUS WIE DER REST DER SEITE. Vorher standen sie als ausstehend im Fuss und waren bewusst kein Link. Jetzt sind es Links, und ohne eigene Regel traegt der Fuss das Blau des Browsers - die einzige Stelle der Seite, an der eine fremde Farbe auftauchte. */ .site-footer nav a { color: var(--as-text-muted); text-decoration: none; border-bottom: 1px solid var(--as-line); padding-bottom: 2px; transition: color 0.15s, border-color 0.15s; } .site-footer nav a:hover, .site-footer nav a:focus-visible { color: var(--as-text); border-bottom-color: var(--as-signal); } .copy { margin: 0; } .todo { /* Klar, aber nicht dominant: eine Haarlinie statt eines Kastens. */ margin: 26px 0 0; padding: 16px 0 0; border-top: 1px solid var(--as-line); font-size: 0.84rem; color: var(--as-ink-3); max-width: 58ch; } /* ------------------------------------------------ Tablet und darunter */ @media (max-width: 900px) { /* Das Zweispaltenraster gilt nur dort, wo Platz dafuer ist. Darunter steht die Abschnittsmarke wieder ueber dem Inhalt - sonst quetscht die schmale linke Spalte den Text. Die Kapitelziffer bleibt, wird aber zur Zeile ueber dem Kicker: der redaktionelle Anker geht mobil nicht verloren. */ .band { display: block; } .band[data-kap]::before { display: block; font-size: 1.6rem; line-height: 1; margin-bottom: 6px; color: var(--as-mark); } .band[data-kap]::after { display: none; } .band > .kicker { margin: 0 0 var(--space-text); } /* DER LASTPFAD KIPPT MIT DEM RASTER, NICHT SPAETER. Zwischen 641 und 900 Pixeln standen die sechs Woerter bereits untereinander, waehrend die Achse noch waagrecht ueber ihnen lag: eine Linie, die zu nichts mehr gehoerte. Beides kippt jetzt an derselben Stelle. Dieselbe Aussage, nur gedreht - von oben nach unten wird sie fester. */ .path { grid-template-columns: 1fr; } .path::before { left: 3px; right: auto; top: 4px; bottom: 10px; width: 1px; height: auto; background: linear-gradient( 180deg, var(--as-line) 0%, var(--as-line-strong) 38%, var(--as-text-muted) 72%, var(--as-text) 100% ); transform-origin: center top; } .path li { padding: 0 0 16px 22px; } .path li::before { top: 3px; width: 7px; height: 7px; } .path li:last-child { padding-bottom: 0; } html.js .path[data-build]::before { transform: scaleY(0); } html.js .path[data-build].gebaut::before { transform: scaleY(1); } /* DER FEHLER, DEN DIESE DREI ZEILEN BEHEBEN. `.scrollcue` stand fest in Spalte 2. Unter 900 Pixeln hat der Hero aber nur EINE Spalte, also legte das Raster eine zweite implizite Spalte an - und die nahm sich die Breite des Textes. Fuer die verbliebene `1fr`-Spalte blieben gemessen 0 Pixel: die Bildmarke war auf jedem Telefon 0 mal 0 gross und damit unsichtbar, die Textspalte lief mit 416 Pixeln ueber die 342 des Fensters hinaus. Der Fehler bestand schon vor diesem Band. Gefunden hat ihn nicht der Augenschein, sondern die Messung der Rasterspalten. */ .hero { grid-template-columns: 1fr; gap: 36px; min-height: 0; padding-top: 24px; } .hero > * { grid-column: 1; } .scrollcue { grid-column: 1; } /* KEIN BESCHNITT MEHR. `overflow: hidden` schnitt hier das A an der Kastenkante ab - gemessen bei jedem Rotationswinkel und jeder Breite unter 900 Pixeln, an der Kante lagen bis zu 175 weisse Pixel. Der durchsichtige Ueberstand des Rotors darf jetzt hinausragen; die Seite faengt ihn an der Wurzel ab. Das Zeichen steht ab hier ueber dem Text und teilt sich die Hoehe mit ihm, deshalb ein kleinerer Hoehenanteil als auf dem Desktop. */ .stage { --a-breite: clamp(160px, min(44vw, 36svh), 340px); } /* MOBIL KEIN STAPEL. Auf einem Telefon bleibt von einer festgehefteten Karte kaum Bildflaeche uebrig, und drei uebereinander waeren nur noch Verdeckung. Die Schritte stehen dort schlicht untereinander. */ .steps li { position: static; padding: 24px 20px 26px; min-height: 0; } } /* ------------------------------------------------------- Schmale Geraete */ /* Die mobile Fassung, `assecura`. EINE LINKE ACHSE. Gemessen lagen die Textanfaenge vorher bei 21, 23, 31 und 37 Pixeln, weil `.note`, `.todo` und der Rotator eigene Einzuege trugen. Auf schmalen Geraeten faellt das sofort auf. Ihre Markierung wandert deshalb von links nach oben: eine Haarlinie ueber dem Block statt daneben. */ @media (max-width: 640px) { :root { --space-section: 84px; --space-figur: 74px; --space-block: 26px; /* 20px bei 320, gut 23px bei 430 - ein Wert, keine Sprünge. */ --pad: clamp(20px, 5.5vw, 24px); /* Flachere Extrusion: weniger Flaeche zu zeichnen, ruhigeres Bild. */ --depth: 18px; } body { font-size: 16px; } /* Kopf: groessere Tippflaechen, zweizeilig statt gequetscht. */ .site { padding: 14px var(--pad); } .site nav { gap: 6px 20px; width: 100%; } /* Der Sprachwechsel steht am Zeigergeraet etwas abgesetzt - das war eine Nebentuer neben drei Abschnitten. Sobald die Zeile umbricht, ist der Abstand keine Absetzung mehr, sondern eine Luecke: `EN` stand allein und weit rechts neben `Kontakt`. */ .site nav a.sprache { margin-left: 0; padding-left: 0; } .site nav a { font-size: 0.92rem; padding: 10px 0; } /* Auf einem Telefon ist die Bildmarke der erste Eindruck. Der frueher hier stehende Riegel - `overflow: hidden` an der Buehne und ein auf die Kastengroesse gestutztes Lichtfeld - ist ersatzlos entfallen. Er war die Ursache beider gemeldeten Fehler: das Zeichen wurde an der Kante abgeschnitten, und das Licht endete sichtbar am Quadrat. */ .stage { --a-breite: clamp(150px, min(52vw, 32svh), 300px); } .hero { padding-top: 8px; } .actions { gap: 10px; } .actions .btn { width: 100%; } /* Alles auf dieselbe Achse: Markierung oben statt links. */ .todo { font-size: 0.82rem; } .path { margin-top: 28px; } /* Ein einzelnes Traegerlogo steht mittig. */ .carrier { width: 112px; } .carrier-rail { gap: 36px; justify-content: center; } /* Fuss: untereinander, mit Luft. */ .site-footer { display: block; } .site-footer nav { flex-direction: column; gap: 10px; } } /* Ganz schmale Geraete: der Rotator braucht Platz fuer eine dritte Zeile. */ @media (max-width: 360px) { /* Bei 320 Pixeln ragte die vordere Flaeche der gedrehten Bildmarke gemessen 8 Pixel ueber den Rand (339 statt 320). Die BUEHNE wird kleiner, nicht das Zeichen: Umriss, Tiefe und Drehung bleiben unveraendert, nur der Kasten, in dem sie stehen. */ .stage { --a-breite: clamp(132px, min(56vw, 28svh), 240px); } .kicker, .carrier-label { letter-spacing: 0.16em; } } /* ========================================================================== FUTURE INSURANCE, `assecura`. Die Richtung `Structural Protection` bleibt das Fundament. Was hier dazukommt, ist Licht, Tiefe und kontrollierte Bewegung - nicht Dekoration. VIER BEWEGUNGSARTEN, mehr gibt es nicht: Structural Linien und Achsen bauen sich in Leserichtung auf. Einmal, beim Eintritt in den sichtbaren Bereich, danach Ruhe. Depth Bildmarke und Flaechen bekommen raeumliche Tiefe. Nur im Hero dauerhaft, sonst statisch. Signal Ein kleiner Licht- oder Akzentimpuls markiert einen Uebergang oder einen aktiven Zustand. Editorial Text steigt um wenige Pixel auf, nie aus dem Nichts. HARTE GRENZEN. Der Ausgangszustand JEDES Elements ist der fertige Zustand; die Startzustaende gelten nur unter `html.js`. Ohne JavaScript, bei reduzierter Bewegung und waehrend das Skript laedt steht die Seite vollstaendig da. Keine Bewegung veraendert die Scrollposition, keine haelt einen Abschnitt fest, keine blinkt dauerhaft. ========================================================================== */ /* ------------------------------------------------ Editorial Motion, Basis */ /* Text und Linien steigen um wenige Pixel auf. Der Startzustand traegt Deckkraft 0,55 statt 0 - selbst wenn ein Beobachter nie meldet, bleibt alles lesbar. */ /* NUR UEBERSCHRIFT UND UNTERZEILE, nicht der ganze Abschnitt. Zuerst stiegen auch Fliesstext, Schrittliste und Abgrenzung mit auf. Gemessen liefen dadurch im Abschnitt `Ueber Assecura` beim Eintritt 18 Uebergaenge gleichzeitig, im Produktabschnitt 40. Das ist keine Ruhe mehr, sondern Betrieb - und auf einem Telefon teuer. Jetzt bewegt sich, was die Aufmerksamkeit fuehrt. Der Fliesstext steht einfach da; er braucht keine Bewegung, um gelesen zu werden. */ html.js [data-build] > h2, html.js [data-build] > .claim { opacity: 0.55; transform: translateY(8px); transition: opacity var(--dur-mid) var(--ease), transform var(--dur-mid) var(--ease); } html.js [data-build].gebaut > h2, html.js [data-build].gebaut > .claim { opacity: 1; transform: none; } html.js [data-build].gebaut > .claim { transition-delay: 110ms; } /* --------------------------------------- Structural Motion, der Lastpfad */ /* DER PFAD BAUT SICH AUF, DIE INHALTE NICHT. Bewegt wird ausschliesslich die ACHSE: sie waechst von `Erkennen` nach `Absichern`, also in Leserichtung, und wird dabei zum Ende hin fester - die Leitidee der Seite als Bewegung statt als Verlauf allein. Die sechs Woerter und die sechs Knoten stehen die ganze Zeit da; verschwinden darf hier nichts. Der letzte Knoten, `Absichern`, setzt sich zum Schluss und leicht verzoegert: er ist der Punkt, an dem die Struktur haelt. Zwei Bewegungen, mehr nicht. */ .path::before { transform-origin: left center; transition: transform 1000ms var(--ease); } .path li:last-child::before { transition: transform 420ms var(--ease) 860ms; } html.js .path[data-build]::before { transform: scaleX(0); } html.js .path[data-build].gebaut::before { transform: scaleX(1); } html.js .path[data-build] li:last-child::before { transform: rotate(45deg) scale(0.1); } html.js .path[data-build].gebaut li:last-child::before { transform: rotate(45deg) scale(1); } /* --------------------------------------------- Structural Motion, Kanten */ /* Die Abschnittskante ist die Tiefenaenderung. Sie tritt beim Eintritt sichtbar hervor und bleibt dann stehen - eine Farbe, kein Layout, keine Neuberechnung pro Bild. */ .band { transition: border-color 1.1s var(--ease); } html.js .band[data-build] { border-top-color: var(--as-line); } html.js .band[data-build].gebaut { border-top-color: var(--as-line-strong); } /* Die Kapitelziffer und ihre Lastlinie bauen sich auf. */ /* Je Element genau EINE bewegte Eigenschaft. `scaleY(0)` verbirgt die Lastlinie bereits vollstaendig, eine zusaetzliche Deckkraft waere ein zweiter Uebergang ohne zweite Wirkung. */ .band[data-kap]::before { transition: color var(--dur-mid) var(--ease); } .band[data-kap]::after { transition: transform 900ms var(--ease); } html.js .band[data-build]::before { color: var(--as-line); } html.js .band[data-build].gebaut::before { color: var(--as-mark); } html.js .band[data-build]::after { transform: rotate(calc(90deg - var(--as-angle))) scaleY(0); } html.js .band[data-build].gebaut::after { transform: rotate(calc(90deg - var(--as-angle))) scaleY(1); } /* ------------------------------------------------------- Der Heroraum */ .hero { position: relative; } /* Die Konstruktionslinien. Ein sehr feines Raster im Markenwinkel, statisch und nach unten auslaufend: die Seite steht auf einer gezeichneten Flaeche, nicht auf einem leeren Schwarz. Es bewegt sich nichts. */ .hero::before { content: ''; position: absolute; /* KEIN NEGATIVER SEITENEINZUG. Mit `-50%` links und rechts ragte das Raster ueber die Seite hinaus und erzeugte eine waagrechte Bildlaufleiste: gemessen 1836 statt 1440 Pixel. Es bleibt jetzt im Kasten, und die Maske laesst es lange vor der Kante auslaufen - sichtbar ist derselbe Ausschnitt. */ inset: -12% 0 18% 0; z-index: -2; pointer-events: none; background-image: repeating-linear-gradient( var(--as-angle), transparent 0 74px, rgb(255 255 255 / 0.018) 74px 75px ); -webkit-mask-image: radial-gradient(60% 74% at 28% 42%, #000 0%, transparent 76%); mask-image: radial-gradient(60% 74% at 28% 42%, #000 0%, transparent 76%); } .stage { position: relative; isolation: isolate; } /* DEPTH MOTION. Das Lichtfeld hinter der Bildmarke wandert im Takt der Drehung: waehrend sich das A dreht, aendert sich das Licht im Raum um es herum. Genau eine Eigenschaft bewegt sich, `transform`. Der Start ist um zwei Sekunden verzoegert. So laeuft es nicht gegen den einmaligen Lichtlauf der Ueberschrift an: im sichtbaren Bereich sind nie mehr als zwei Bewegungen gleichzeitig aktiv. */ /* DAS LICHT KANN KEINE KANTE MEHR ZEIGEN - GERECHNET, NICHT GEHOFFT. Der gemeldete Fehler: das Licht sass in einem Quadrat und wurde an dessen Rand sichtbar abgeschnitten. Zwei Ursachen wirkten zusammen - die Flaeche ragte mit `inset: -34%` weit ueber die Buehne hinaus, und die Buehne stutzte sie mit `overflow: hidden` an einer harten Linie. Gemessen ergab das an der Kante einen Helligkeitssprung von bis zu 12 Graustufen. Der Beschnitt ist weg. Damit auch ohne ihn nie eine Kante entstehen kann, ist der Auslauf jetzt nachgerechnet: Ein radialer Verlauf mit Mittelpunkt (cx, cy) und voller Durchsichtig- keit ab dem Radius r beruehrt seinen Kasten genau dann nicht, wenn r < min(cx, 1-cx, cy, 1-cy) gilt. Verlauf 1: r = 0,38 x 0,68 = 0,258, Mitte (44 %, 40 %), Drift +/- 4 % -> kleinster Randabstand 0,36. 0,258 < 0,36. Verlauf 2: r = 0,46 x 0,64 = 0,294, Mitte (52 %, 56 %), Drift +/- 4 % -> kleinster Randabstand 0,40. 0,294 < 0,40. Beide laufen also vollstaendig INNERHALB ihrer eigenen Flaeche aus. Dazu misst die Flaeche mit `inset: -60%` mehr als das Doppelte der Buehne, und nichts beschneidet sie. Drei voneinander unabhaengige Gruende, warum dort keine Kante mehr sein kann. Zwei Verlaeufe statt einem, weil ein einzelner als runder Fleck liest. Kein `filter: blur()`: eine grosse Weichzeichnerflaeche kostet Fuellrate und wuerde an ihrer eigenen Box wieder abgeschnitten. */ .stage::before { content: ''; position: absolute; inset: -60%; z-index: -1; pointer-events: none; background-image: radial-gradient( 38% 38% at 44% 40%, rgb(255 255 255 / 0.085) 0%, rgb(255 255 255 / 0.030) 34%, transparent 68% ), radial-gradient( 46% 46% at 52% 56%, rgb(255 255 255 / 0.030) 0%, rgb(255 255 255 / 0.009) 30%, transparent 64% ); animation: lightdrift var(--dur-slow) ease-in-out 2s infinite; will-change: transform; } @keyframes lightdrift { /* Enger als zuvor (+/- 7 %). Der Weg geht in die Randabstandsrechnung darueber ein: bei +/- 4 % bleibt der Auslauf beider Verlaeufe in jeder Phase innerhalb der Flaeche. */ 0% { transform: translate3d(-4%, -3%, 0); } 50% { transform: translate3d(4%, 3%, 0); } 100% { transform: translate3d(-4%, -3%, 0); } } /* Die Konstruktionsmarken rahmen den ERSTEN BILDAUSSCHNITT, nicht mehr die Buehne. Seit die Bildmarke ueber ihre Spalte hinauswaechst und links aus dem Bild laeuft, sassen sie mitten im Nichts; am Hero markieren sie den Ausschnitt wie der Beschnitt einer technischen Zeichnung. Rein statisch. */ .hero::after { content: ''; position: absolute; inset: 18px 0 90px; z-index: -1; pointer-events: none; background-repeat: no-repeat; background-image: linear-gradient(var(--as-line-strong), var(--as-line-strong)), linear-gradient(var(--as-line-strong), var(--as-line-strong)), linear-gradient(var(--as-line-strong), var(--as-line-strong)), linear-gradient(var(--as-line-strong), var(--as-line-strong)); background-size: 26px 1px, 1px 26px, 26px 1px, 1px 26px; background-position: left top, left top, right bottom, right bottom; } /* SCROLLGETRIEBENE TIEFE, ohne eine Zeile JavaScript. `animation-timeline: view()` bindet die Bewegung an die Scrollposition statt an eine Uhr. Sie laeuft im Browser auf dem Compositor, kostet keinen Hauptthread und braucht keinen Beobachter. Wo es die Technik nicht gibt, passiert schlicht nichts: die Seite bleibt vollstaendig. KEIN SCROLL-JACKING. Es wird nichts festgehalten, nichts verlangsamt und keine Scrollposition gesetzt - nur der Fortschritt gelesen, den der Besucher selbst erzeugt. */ /* Scrollchoreografie NUR, wenn Bewegung erwuenscht ist. Die `no-preference`-Abfrage ist der entscheidende Riegel: bei `prefers-reduced-motion: reduce` entstehen diese Animationen gar nicht erst. Sie nachtraeglich abzuschalten haette bedeutet, jede einzelne wieder aufzuzaehlen - und die naechste zu vergessen. */ @media (prefers-reduced-motion: no-preference) { @supports (animation-timeline: view()) { /* Beim Verlassen des Heros weicht das Zeichen in die Tiefe zurueck und die Aussage loest sich in zwei Ebenen auf: die Hauptzeile steigt, die Gegenzeile steigt weiter. Beides endet, bevor der Hero das Bild verlaesst - es verschwindet nie etwas Lesbares vor der Zeit. */ .stage { animation: raum-tiefe linear both; animation-timeline: view(); animation-range: exit 0% exit 100%; } .hero-text { animation: raum-heben linear both; animation-timeline: view(); animation-range: exit 0% exit 92%; } .counter { animation: raum-spalten linear both; animation-timeline: view(); animation-range: exit 0% exit 92%; } } } @keyframes raum-tiefe { to { transform: translate3d(-9%, -3%, 0) scale(0.82); opacity: 0.42; } } @keyframes raum-heben { to { transform: translate3d(0, -46px, 0); } } @keyframes raum-spalten { to { transform: translate3d(0, -34px, 0); } } /* SIGNAL MOTION, genau einmal. Ein schmales Lichtband laeuft ueber die Aussage und endet auf vollem Weiss. Die Zeile ist waehrend des ganzen Laufs lesbar, und ohne JavaScript laeuft er gar nicht erst an: dann steht die Ueberschrift von Anfang an in reinem Weiss. */ @supports ((-webkit-background-clip: text) or (background-clip: text)) { html.js h1.sweep { background-image: linear-gradient( 100deg, var(--as-text) 0 40%, var(--as-signal) 47%, var(--as-text) 54% 100% ); /* ZWEI RIEGEL GEGEN UNSICHTBARE SCHRIFT. Erstens faerbt `background-color` die Buchstaben schon vor jedem Verlauf voll weiss: der Farbausschnitt greift auch auf die Farbe zu, nicht nur auf das Bild. Zweitens wiederholt sich der Verlauf, statt an seinem Rand aufzuhoeren - beide Enden sind ohnehin weiss, die Kachelung ist also nahtlos. Ohne den zweiten Riegel stand die Ueberschrift am Ende des Laufs ausserhalb des Verlaufs und war unsichtbar. Genau das hat der Bildvergleich gezeigt. */ background-color: var(--as-text); background-size: 320% 100%; background-position: 135% 0; background-repeat: repeat; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; animation: sweep 1500ms var(--ease) 240ms both; } } @keyframes sweep { to { background-position: -35% 0; } } /* Die Orientierungsebene unter den Knoepfen. */ .orient { display: flex; flex-wrap: wrap; gap: 10px 26px; margin: 30px 0 0; font-size: 0.66rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--as-ink-3); } .orient span { position: relative; padding-left: 14px; } .orient span::before { content: ''; position: absolute; left: 0; top: 0.42em; width: 5px; height: 5px; background: var(--as-line-strong); transform: rotate(45deg); } /* Nur der erste Punkt traegt das Signal: er markiert, wo die Seite anfaengt. */ .orient span:first-child::before { background: var(--as-signal); } /* --------------------------------------------- Tiefe der Abschnittsflaechen */ /* Drei sehr eng benachbarte Schwarztoene mit gerichtetem Licht. Kein sichtbarer Standardverlauf: die Lichtflaechen sind gross, elliptisch und sehr schwach, sie lesen sich als Licht auf einer Oberflaeche. */ #ueber { background-image: radial-gradient( 116% 88% at 10% 0%, rgb(255 255 255 / 0.030) 0%, rgb(255 255 255 / 0.008) 40%, transparent 70% ); } #kontakt { /* Wie beim Produktabschnitt: #070708 sind zwei Stufen Weiss ueber dem Seitengrund - durchscheinend derselbe Ton, aber keine Wand. */ background-color: rgb(255 255 255 / 0.008); background-image: radial-gradient( 84% 116% at 50% 104%, rgb(255 255 255 / 0.028) 0%, rgb(255 255 255 / 0.006) 44%, transparent 72% ); margin-left: calc(var(--pad) * -1); margin-right: calc(var(--pad) * -1); padding-left: var(--pad); padding-right: var(--pad); } /* Die Produktbuehne bekommt zusaetzlich ein gerichtetes Licht. */ #coverraccoon { background-image: repeating-linear-gradient( var(--as-angle), transparent 0 46px, rgb(255 255 255 / 0.024) 46px 47px ), radial-gradient( 96% 78% at 76% 6%, rgb(255 255 255 / 0.044) 0%, rgb(255 255 255 / 0.010) 42%, transparent 74% ); } /* ------------------------------------------- Der Uebergang zum Risikotraeger */ /* RISIKO WIRD ANALYSIERT, STRUKTURIERT, EIN TEIL WIRD UEBERTRAGEN. Die Linie laeuft waagrecht heran und knickt im Markenwinkel nach unten in die Traegerflaeche ab. Sie zeigt den VORGANG. Sie zeigt ausdruecklich keine Menge, keine Quote und keinen Anteil: es gibt keine zweite Verzweigung, keine Skala und keine Beschriftung mit einer Zahl. */ .transfer { position: relative; height: 116px; margin: var(--space-figur) 0 0; max-width: 62ch; } .t-label { position: absolute; left: 0; top: 0; font-size: 0.66rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--as-text-muted); } .t-rail { position: absolute; left: 0; right: 36%; top: 30px; height: 1px; background: linear-gradient( 90deg, var(--as-line) 0%, var(--as-line-strong) 46%, var(--as-signal-dim) 100% ); transform-origin: left center; } .t-drop { position: absolute; left: 64%; top: 30px; width: 1px; height: 82px; background: linear-gradient(180deg, var(--as-signal-dim), var(--as-signal)); transform-origin: top center; transform: rotate(calc(var(--as-angle) - 90deg)); } .t-mark { position: absolute; left: calc(64% + 37px); top: 103px; width: 7px; height: 7px; background: var(--as-signal); transform: translate(-50%, -50%) rotate(45deg); } .t-note { position: absolute; right: 0; top: 66px; max-width: 30ch; text-align: right; font-size: 0.72rem; line-height: 1.4; letter-spacing: 0.06em; color: var(--as-ink-3); } /* Aufbau: erst die Zufuhr, dann der Abzweig, dann der Aufsetzpunkt. */ html.js .transfer .t-rail { transform: scaleX(0); transition: transform 720ms var(--ease); } html.js .transfer .t-drop { transform: rotate(calc(var(--as-angle) - 90deg)) scaleY(0); transition: transform 620ms var(--ease) 620ms; } html.js .transfer .t-mark { opacity: 0; transition: opacity 420ms var(--ease) 1180ms; } /* Die Beschriftungen stehen von Anfang an: zwei Uebergaenge weniger, und der Text ist nie kurz weg. */ html.js .transfer.gebaut .t-rail { transform: scaleX(1); } html.js .transfer.gebaut .t-drop { transform: rotate(calc(var(--as-angle) - 90deg)) scaleY(1); } html.js .transfer.gebaut .t-mark { opacity: 1; } /* Die Traegerflaeche. Der Abzweig landet sichtbar AUF ihr, deshalb ist sie eine eigene, minimal hellere Flaeche mit klarer Oberkante. Das Logo bleibt weiss, ruhig und ohne jede Bewegung. */ .carriers { margin-top: 0; padding: var(--space-block) 26px 30px; border-top: 1px solid var(--as-line-strong); background: rgb(255 255 255 / 0.017); } /* AUFBAU MIT GENAU ZWEI BEWEGUNGEN. Zuerst trug jede Linie und jeder Knoten eine eigene Animation. Gemessen waren das 28 gleichzeitig, und `stroke-dashoffset` laeuft nicht auf der Grafikkarte - auf einem Telefon ist das genau die falsche Rechnung. Jetzt deckt EIN Beschnitt die Figur in Leserichtung auf, und der gemeinsame Kapitalpunkt kommt danach als zweite, einzelne Bewegung. Die Aussage ist dieselbe: die Struktur entsteht, dann steht der Punkt, an dem sie zusammenlaeuft. */ /* DER AUFBAU HAENGT AM SCROLLEN, nicht an einer Uhr. Die Figur deckt sich in Leserichtung auf, waehrend sie durch das Bild laeuft; danach steht sie. Anschliessend ziehen sich die drei Stammlinien auf den gemeinsamen Punkt zusammen, und erst dann erscheint der Punkt selbst. Das ist die Aussage in ihrer Reihenfolge: einzelne Risiken, tragende Pools, gemeinsam bereitgestellte Kapazitaet. Ohne Scrollzeitachse uebernimmt der Beobachter denselben Ablauf als einmaligen Uebergang. Ohne beides steht die Figur fertig da. */ /* Scrollchoreografie NUR, wenn Bewegung erwuenscht ist. Die `no-preference`-Abfrage ist der entscheidende Riegel: bei `prefers-reduced-motion: reduce` entstehen diese Animationen gar nicht erst. Sie nachtraeglich abzuschalten haette bedeutet, jede einzelne wieder aufzuzaehlen - und die naechste zu vergessen. */ @media (prefers-reduced-motion: no-preference) { @supports (animation-timeline: view()) { } } @supports not (animation-timeline: view()) { } /* ==================== Die Onchain-Risikoarchitektur, CoverRaccoon ==== */ /* Die Buehne der Szene. Sie traegt zwei Fassungen derselben Geometrie uebereinander: die Zeichenflaeche und, darunter, das statische SVG. Nur eine ist je sichtbar - die Zeichenflaeche loest das SVG erst ab, wenn sie wirklich zeichnen kann. `pointer-events: none`: die Grafik hat keine Bedienfunktion, also darf sie weder Beruehrung noch Scrollen abfangen. Der Knopf darunter bleibt frei. */ .szene { position: relative; /* DIE SZENE SPANNT UEBER BEIDE SPALTEN. Sie stand bisher in der Textspalte und war damit so breit wie ein Absatz - gemessen 801 von 1180 Pixeln. Als Hauptbild des Abschnitts gehoert sie ueber die ganze Breite: sie wird dadurch nicht nur groesser, sondern sitzt auch mittig unter der Ueberschrift statt nach rechts gerueckt. */ width: 100%; /* Hoeher als die frueher flache Figur: eine raeumliche Szene braucht Kopfraum, sonst liegt alles auf einer Linie. NICHT hoeher machen, um dem Schwenk Platz zu geben: die Einpassung ist breitenbegrenzt, ein hoeherer Kasten erzeugt deshalb nur Leerraum oben und unten und laesst die Szene kleiner wirken. Gemessen und verworfen. Ueber die volle Breite darf das Verhaeltnis flacher sein, sonst wird der Kasten sehr hoch. */ /* HOEHER ALS ZUVOR, und das ist gemessen. Die Einpassung deckt die ganze Drehung ab und war dadurch hoehenbegrenzt: die Szene nutzte 78 Prozent der Kastenhoehe, aber nur 53 Prozent der Breite. Zusaetzliche Hoehe wird also unmittelbar zu Groesse, waagrecht war noch Luft. Gemessen bei 1440 Pixeln Fensterbreite: 1000/470 Szene 590 breit 1000/540 Szene 643 1000/560 Szene 660 1000/800 Szene 842 Zusammen mit dem enger gefassten Schwenkbereich waechst sie bei 1000/560 um gut ein Drittel, ohne dass der Abschnitt den Bildschirm sprengt. */ aspect-ratio: 1000 / 560; /* ABER NIE HOEHER ALS DAS FENSTER. Aus dem Verhaeltnis folgt bei 1264 Pixeln Breite ein Kasten von 625 Pixeln Hoehe. Auf einem flachen Fenster - gemessen 1264x595, ein gewoehnlicher Laptop - passt er damit ueberhaupt nicht mehr ins Bild: die Szene ist dort IMMER oben oder unten angeschnitten, und die Beschriftung des Kristalls sitzt genau in dem Streifen, der fehlt. `svh` und nicht `vh`: auf dem Telefon zaehlt die kleine Fassung der Fensterhoehe, sonst schoebe die eingeblendete Adresszeile den Kasten wieder heraus. Auf hohen Fenstern greift der Deckel nicht - dort bleibt die Szene so gross, wie sie ist. */ max-height: 82svh; margin: var(--space-figur) 0 calc(var(--space-block) + 6px); /* Die Szene faengt selbst keine Bedienung ab - der Knopf darunter bleibt frei. Nur die Zeichenflaeche nimmt das Ziehen an. */ pointer-events: none; } /* MIT DER MAUS DREHBAR, WIE EIN MODELL. `touch-action: pan-y` ist hier der entscheidende Wert: senkrechtes Scrollen bleibt beim Browser, waagrechtes Ziehen kommt bei uns an. Ohne das waere die Grafik auf dem Telefon eine Falle - man wischt zum Scrollen und dreht stattdessen das Modell. Die Flaeche bleibt ausserhalb der Bedienreihenfolge: sie ist dekorativ, traegt keinen Inhalt und wird nicht angesteuert. Das Ziehen ist eine Zugabe, keine Notwendigkeit - alles bleibt ohne sie erreichbar. */ .szene canvas { pointer-events: auto; touch-action: pan-y; cursor: grab; -webkit-user-select: none; user-select: none; } .szene canvas.zieht { cursor: grabbing; } /* Der Vorrang muss zu `.band > :not(.kicker)` passen, das jedes Kind in die Textspalte stellt. Mit `.szene` allein verliert die Regel und die Szene blieb 801 statt 1180 Pixel breit. */ .band > .szene { grid-column: 1 / -1; } .szene canvas, .szene .szene-still { position: absolute; inset: 0; display: block; width: 100%; height: 100%; } /* Sobald die Zeichenflaeche uebernimmt, tritt die statische Fassung ab. */ .szene-bereit .szene-still[hidden] { display: none; } /* Der Aufbau der statischen Fassung. Sie kann nicht scrollgetrieben entstehen, also blendet sie einmal ruhig auf - und steht ohne Skript und ohne Beobachter von Anfang an vollstaendig da. */ html.js .szene[data-build] .szene-still { opacity: 0.4; transition: opacity 900ms var(--ease); } html.js .szene[data-build].gebaut .szene-still { opacity: 1; } /* Die Indexziffer traegt jetzt den Nenner mit: 01 von 03. */ /* WAS HINTER DEN BEIDEN STEHT. Zwei Namen allein lesen sich klein - und die Seite soll nicht kleiner wirken als die Sache ist. Deshalb steht unter den Personen, was den Rest traegt: Abwicklung, Deckung, Haftpflicht, Weiterbildung. ES IST KEINE ZWEITE MITARBEITERLISTE, und das entscheidet die Form. Eine Beschreibungsliste sagt `Sache: Traeger` - eine Aufzaehlung von Kacheln haette wie eine Reihe weiterer Personen ausgesehen. Erfunden ist nichts: jede Zeile steht so schon im Impressum oder in der Datenschutzerklaerung. */ /* Oben steht sie statt einer Ueberschrift und braucht deshalb weniger Abstand nach oben, aber mehr nach unten: sie fuehrt in die Personen hinein, statt hinter ihnen nachzuklappen. */ .getragen-oben { margin: 0 0 var(--space-block); } /* Die Sache ueber den beiden Ebenen. Sie traegt dieselbe Mikroschrift wie die Abschnittsmarke - eine Ordnungsangabe, keine Ueberschrift: die grosse Zeile ueber den Personen war ja gerade das, was hier weichen sollte. */ /* MARKE UND EBENEN GEHOEREN IN DIESELBE RASTERZELLE. Getrennt gesetzt lag die Marke in derselben Zeile wie die Abschnittsmarke in der Randspalte - und die traegt oben 5,2 em Abstand. Zwischen Marke und Ebenen klafften dadurch gemessen 126 Pixel, wo 18 gemeint waren. Ein gemeinsamer Block nimmt beide aus dem Raster heraus. */ .getragen-block { margin: 0 0 var(--space-block); } .getragen-block .getragen-oben { margin: 0; } .getragen-marke { margin: 0 0 18px; font-size: 0.7rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--as-text-muted); } .getragen { margin: var(--space-block) 0 0; max-width: 660px; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 22px 64px; } .getragen div { border-top: 1px solid var(--as-line); padding-top: 12px; } .getragen dt { font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--as-mark); } .getragen dd { margin: 6px 0 0; font-size: 0.84rem; line-height: 1.5; color: var(--as-text-muted); } /* -------------------------------------------------------- Die Rechtstexte */ /* IMPRESSUM UND DATENSCHUTZ SIND EIGENE SEITEN, KEINE AUSKLAPPER. Sie werden verlinkt, zitiert und ausgedruckt - dafuer braucht es eine Adresse. Sie tragen dasselbe Raster wie die Abschnitte der Startseite, nur ohne Figuren: hier zaehlt Lesbarkeit, nicht Bild. */ .rechtstext { padding-bottom: var(--space-section); } .rechtstext .band { border-top: none; } .rechtstext h3 { margin: var(--space-block) 0 0; font-size: 0.82rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--as-text-muted); } .rechtstext .text { max-width: 68ch; } /* Angaben, die man abliest statt liest: eng gesetzt und ohne Absatzabstand. */ .rt-zeile { margin: 3px 0 0; font-size: 0.9rem; line-height: 1.6; color: var(--as-text-muted); max-width: 68ch; } .rechtstext a { color: var(--as-text); text-decoration: none; border-bottom: 1px solid var(--as-line-strong); transition: border-color 0.15s; } .rechtstext a:hover, .rechtstext a:focus-visible { border-bottom-color: var(--as-signal); } .rechtstext strong { color: var(--as-text); font-weight: 600; } /* ----------------------------------------------------------------- Das Team */ /* UMRISSE STATT BILDER. Ein Foto verspricht Naehe und wird zur Bildaufgabe: Licht, Hintergrund, Kleidung - und in zwei Jahren ist es alt. Ein Umriss benennt eine Person, ohne etwas ueber sie zu behaupten, und er ist aus denselben geraden Kanten gebaut wie alles andere hier. Er ist FAST schwarz, nicht ganz: auf dem Seitengrund waere reines Schwarz unsichtbar. Die Kante traegt den Linienton, die Flaeche liegt eine Spur darueber - so steht die Gestalt da, ohne ein Gesicht anzudeuten, das niemand gezeigt hat. */ .leute { list-style: none; margin: var(--space-figur) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 48px 64px; max-width: 660px; } /* JEDER EINTRAG IST EIN KAPITEL IM KLEINEN. Oben eine Haarlinie und die Funktion in der Ecke - dieselbe Ordnung, mit der die Seite ihre Abschnitte auszeichnet, nur eine Stufe leiser. Darunter die Gestalt auf ihrer Flaeche, dann der Name. */ .leute li { position: relative; padding-top: 22px; border-top: 1px solid var(--as-line); } .person-marke { position: absolute; top: 22px; right: 0; font-size: 0.68rem; letter-spacing: 0.22em; color: var(--as-mark); } /* DIE GESTALT STEHT AUF EINER FLAECHE UND WAECHST DARUEBER HINAUS. Ein Umriss, sauber in einen Rahmen gesetzt, ist ein Passfoto ohne Foto. Steht er dagegen AUF der Flaeche und ragt oben heraus, ist die Flaeche ein Sockel und kein Kasten - und die Gestalt gehoert dem Raum, nicht dem Rahmen. */ .person-bild { position: relative; display: block; width: 100%; max-width: 176px; height: 128px; margin-top: 34px; border: 1px solid var(--as-line); background: linear-gradient(180deg, rgb(255 255 255 / 0.026), transparent 64%); } /* Die Markenkante in der Ecke, wie an jedem Kapitel. */ .person-bild::after { content: ''; position: absolute; right: -1px; bottom: -1px; width: 1px; height: 52px; background: var(--as-line-strong); transform-origin: bottom right; transform: rotate(calc(90deg - var(--as-angle))); } /* DAS PORTRAIT: SCHWARZWEISS, UND IN FARBE ERST AUF BERUEHRUNG. Die Seite kennt Schwarz, Weiss und ein Blau. Ein Farbfoto waere eine zweite Stimme - dauerhaft laut, mitten in einer Flaeche, die sonst nichts Buntes zeigt. Entsaettigt gehoert es dazu; die Farbe ist eine Ausnahme, die der Leser selbst ausloest. Und sie wird auch dort ausgeloest, wo es kein Zeigegeraet gibt: auf einem Telefon gibt es kein Darueberfahren, und ein Zustand, den man dort nie erreicht, ist kein Zustand, sondern eine Behauptung. Dort steht das Bild von vornherein in Farbe. Etwas dunkler als das Original: ein helles Foto auf beinahe schwarzem Grund leuchtet sonst wie eine Lampe. */ /* SCHWARZWEISS UEBERALL - UND DIE FARBE HAT ZWEI WEGE DORTHIN. Erst hing die Entsaettigung am Zeigegeraet: mit Maus schwarzweiss, auf dem Telefon gleich farbig, weil es dort kein Darueberfahren gibt. Das war konsequent gedacht und im Ergebnis falsch - dieselbe Seite sah auf zwei Geraeten verschieden aus, und die ruhige Fassung bekam nur die Haelfte der Leute zu sehen. Jetzt ist Schwarzweiss ueberall der Ruhezustand. Die Farbe kommt entweder vom Zeiger oder von einem Fingertipp - der Schalter im Etikett macht aus dem Bild ein Kaestchen, ohne dass es danach aussieht. */ .person-foto { position: absolute; left: 6px; bottom: 0; display: block; width: 168px; height: auto; filter: grayscale(1) brightness(0.82) contrast(1.06); transition: filter 420ms var(--ease); } /* Das Kaestchen selbst ist nicht zu sehen, aber vorhanden: es traegt einen Namen, laesst sich mit der Tabulatortaste erreichen und wird vorgelesen. Verstecken mit `display: none` haette es aus der Bedienung genommen. */ .foto-schalter { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } .foto-schalter:checked ~ .person-foto { filter: grayscale(0) brightness(0.94) contrast(1); } /* Der Rahmen zeigt, was gerade den Fokus hat - hier das Bild, nicht das unsichtbare Kaestchen. */ .foto-schalter:focus-visible ~ .person-foto { outline: 2px solid var(--as-signal); outline-offset: 3px; } .person-bild { cursor: pointer; } @media (hover: hover) { .person-bild:hover .person-foto { filter: grayscale(0) brightness(0.94) contrast(1); } } /* DIE BEZEICHNUNG STEHT VOR DEM NAMEN UND TRITT ZURUECK. `akad. Vkfm.` fuehrt der Verband der akademischen Versicherungskaufleute so - vorangestellt und klein geschrieben. Sie gehoert zum Namen, ist aber nicht der Name: gleiche Zeile, gleiche Schrift, eine Stufe leiser. */ .person-titel { font-weight: 400; font-size: 0.82em; color: var(--as-text-muted); } .person-name { margin: 20px 0 0; font-size: 1.18rem; font-weight: 600; letter-spacing: -0.01em; color: var(--as-text); } .person-rolle { margin: 6px 0 0; font-size: 0.8rem; line-height: 1.5; color: var(--as-text-muted); } /* Die englische Glosse erklaert die Bezeichnung, statt sie zu uebersetzen - und sie tritt dabei zurueck: erklaert wird, was dasteht, nicht ersetzt. */ .rolle-glosse { display: block; font-size: 0.72rem; color: var(--as-ink-3); } .person-mehr { margin: 4px 0 0; font-size: 0.76rem; color: var(--as-ink-3); } /* ------------------------------------------------------ Der Kontaktschluss */ /* Vorbereitete Flaeche. Keine Knoepfe: es gibt noch kein Ziel. */ .slots { list-style: none; margin: 26px 0 0; padding: 0; /* Breiter als frueher, weil jedes Feld jetzt zwei Zeilen traegt: die Bezeichnung und den Satz, der die beiden Wege unterscheidet. Bei 190 Pixeln brach `Eins zu eins ueber dein Risiko` in drei Zeilen. */ max-width: 620px; display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 1px; background: var(--as-line); border: 1px solid var(--as-line); } .slots li { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 7px 16px; padding: 17px 20px; background: var(--as-bg-3); } /* Der Satz, der die beiden Wege unterscheidet, steht in einer EIGENEN ZEILE ueber die volle Breite. Teilte er sie sich mit dem Weg rechts, bliebe ihm nur der Rest - `Community: mitlesen, was wir tun` brach dort mitten im Satz um, waehrend daneben Platz frei stand. */ .slot-t { grid-column: 1 / -1; grid-row: 2; font-size: 0.74rem; line-height: 1.4; color: var(--as-ink-3); } /* DAS ZEICHEN DES WEGES. Einfarbig in der Farbe der Bezeichnung daneben, nicht in der Hausfarbe des Anbieters: Gruen und Hellblau waeren die einzigen bunten Flaechen einer Seite, die sonst mit Schwarz, Weiss und einem Blau auskommt - und zwei fremde Marken haetten dabei mehr Farbe getragen als die eigene. Es liegt im Markup und nicht in einer Datei: ein Zeichen von 17 Pixeln waere sonst eine eigene Anfrage, und die Seite stellt sonst keine an fremde Server. */ .weg-zeichen { width: 15px; height: 15px; margin-right: 9px; vertical-align: -2px; fill: currentColor; opacity: 0.85; } .slot-k { font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--as-text-muted); } .slot-v { /* Der Weg steht oben rechts, in der ersten Zeile neben der Bezeichnung - die Lage ist ausdruecklich gesetzt, sonst rutscht er hinter den Satz in eine dritte Zeile. Und `justify-self`, sonst zoege die Linie darunter ueber die ganze Spalte statt nur unter das Wort. */ grid-column: 2; grid-row: 1; justify-self: end; font-size: 0.8rem; color: var(--as-ink-3); } /* EIN OFFENER WEG SIEHT ANDERS AUS ALS EIN AUSSTEHENDER. Die Felder waren alle gleich: Bezeichnung links, `folgt` rechts. Sobald eines davon wirklich irgendwohin fuehrt, muss man das SEHEN - sonst ist der einzige Unterschied zwischen offen und ausstehend, dass sich der Zeiger aendert. Der offene Weg traegt deshalb den vollen Textton und die Linie darunter, die die Seite auch sonst fuer Links benutzt. */ .slot-offen { color: var(--as-text); text-decoration: none; /* Der Weg bricht nicht um. `Chat oeffnen` fiel neben der zweizeiligen Bezeichnung auf zwei Zeilen, und die Linie darunter brach mit - das sah nach Fehler aus, nicht nach Link. Umbrechen darf die Bezeichnung, nicht der Weg. */ white-space: nowrap; border-bottom: 1px solid var(--as-line-strong); padding-bottom: 2px; transition: border-color 0.15s; } .slot-offen:hover, .slot-offen:focus-visible { border-bottom-color: var(--as-signal); } /* Der Schluss. Zwei Haarlinien im Markenwinkel treffen sich ueber der Bildmarke - die Struktur schliesst sich zu genau der Form, mit der die Seite oben begonnen hat. Sie fahren einmal zusammen und stehen dann. */ .close-figure { position: relative; height: 168px; margin: 46px 0 0; max-width: 560px; } .close-figure .cf-l, .close-figure .cf-r { position: absolute; left: 50%; /* Die Spitze der Bildmarke liegt bei 32,4 Prozent ihrer Hoehe. Bei 96 Pixeln Breite und 4 Pixeln Abstand sind das 35 Pixel - genau dort treffen sich die beiden Achsen, sodass die kleine Marke die Spitze der grossen gezeichneten Form ist. */ top: 35px; display: block; width: 1px; height: 132px; background: linear-gradient(180deg, var(--as-text-muted) 0%, var(--as-line-strong) 46%, transparent 100%); transform-origin: top center; } .close-figure .cf-l { transform: rotate(calc(90deg - var(--as-angle))); } .close-figure .cf-r { transform: rotate(calc(var(--as-angle) - 90deg)); } .close-figure .closing-mark { position: absolute; left: 50%; top: 4px; margin: 0; width: 96px; transform: translateX(-50%); background-color: var(--as-text-muted); } /* DER SCHLUSS SCHLIESST SICH MIT DEM SCROLLEN. Die beiden Achsen kommen von aussen herein und treffen sich ueber der Bildmarke - die Geometrie, mit der die Seite oben begonnen hat, findet am Ende wieder zusammen. Der Fortschritt haengt am Scrollen, damit der Abschluss zum Ankommen gehoert und nicht zu einer Uhr. Ruhig, kurz, ohne zweiten Markenauftritt: der Abschnitt ist der leise Gegenpol zum Produktabschnitt darueber. */ /* Scrollchoreografie NUR, wenn Bewegung erwuenscht ist. Die `no-preference`-Abfrage ist der entscheidende Riegel: bei `prefers-reduced-motion: reduce` entstehen diese Animationen gar nicht erst. Sie nachtraeglich abzuschalten haette bedeutet, jede einzelne wieder aufzuzaehlen - und die naechste zu vergessen. */ @media (prefers-reduced-motion: no-preference) { @supports (animation-timeline: view()) { .close-figure .cf-l { animation: schliessen-l linear both; animation-timeline: view(); animation-range: entry 14% cover 42%; } .close-figure .cf-r { animation: schliessen-r linear both; animation-timeline: view(); animation-range: entry 14% cover 42%; } } } @keyframes schliessen-l { from { transform: translateX(-78px) rotate(calc(90deg - var(--as-angle))); opacity: 0.25; } to { transform: translateX(0) rotate(calc(90deg - var(--as-angle))); opacity: 1; } } @keyframes schliessen-r { from { transform: translateX(78px) rotate(calc(var(--as-angle) - 90deg)); opacity: 0.25; } to { transform: translateX(0) rotate(calc(var(--as-angle) - 90deg)); opacity: 1; } } @supports not (animation-timeline: view()) { html.js .close-figure .cf-l { transform: translateX(-62px) rotate(calc(90deg - var(--as-angle))); transition: transform 1000ms var(--ease); } html.js .close-figure .cf-r { transform: translateX(62px) rotate(calc(var(--as-angle) - 90deg)); transition: transform 1000ms var(--ease); } html.js .close-figure .closing-mark { opacity: 0; transition: opacity 700ms var(--ease) 760ms; } html.js .close-figure.gebaut .cf-l { transform: translateX(0) rotate(calc(90deg - var(--as-angle))); } html.js .close-figure.gebaut .cf-r { transform: translateX(0) rotate(calc(var(--as-angle) - 90deg)); } html.js .close-figure.gebaut .closing-mark { opacity: 1; } } /* ------------------------------------------------ Interaktive Details */ /* Wenige, praezise Mikrointeraktionen. Jede funktioniert per Tastatur, weil sie an `:focus-visible` genauso haengt wie an `:hover`. Kein magnetischer Cursor, keine Mausverfolgung, kein Ton. */ :focus-visible { outline: 2px solid var(--as-signal); outline-offset: 3px; } .btn { position: relative; overflow: hidden; } /* Eine Linie faehrt praezise an der Unterkante durch. */ .btn::after { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: var(--as-signal); transform: scaleX(0); transform-origin: left center; transition: transform var(--dur-fast) var(--ease); } .btn:hover::after, .btn:focus-visible::after { transform: scaleX(1); } .btn-primary::after { background: var(--as-bg); } /* Der Richtungsimpuls am Hauptknopf: ein Strich, kein Pfeilzeichen. */ .btn-primary::before { content: ''; order: 1; width: 15px; height: 1px; margin-left: 13px; background: currentColor; transition: transform var(--dur-fast) var(--ease); } .btn-primary:hover::before, .btn-primary:focus-visible::before { transform: translateX(5px); } /* Die Navigation zeigt den Bereich, in dem man gerade ist. */ .site nav a { position: relative; padding-bottom: 4px; } .site nav a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--as-line-strong); transform: scaleX(0); transform-origin: left center; transition: transform var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); } .site nav a:hover::after, .site nav a:focus-visible::after { transform: scaleX(1); background: var(--as-text); } .site nav a[aria-current] { color: var(--as-text); } .site nav a[aria-current]::after { transform: scaleX(1); background: var(--as-signal); } /* Der Scrollhinweis bekommt das Signal an der Spitze. */ .scrollcue::after { background: linear-gradient(180deg, var(--as-signal-dim), transparent); } /* --------------------------------------------- Mobile Future Experience */ @media (max-width: 900px) { /* Weniger Ebenen: das Konstruktionsraster entfaellt, das Licht bleibt. */ .hero::before { display: none; } /* DIE TEXTUR WIRD DUENNER, NICHT KLEINER. Auf einem Telefon liegt dieselbe Schrift auf einem Drittel der Flaeche: acht Zeilen waeren dort keine Textur mehr, sondern ein Muster. Es bleibt jede zweite - vier Zeilen, gut verteilt ueber die Seite. Die Tiefe wird flacher, und die Farbe tritt noch einen Schritt zurueck: auf kleiner Flaeche liegt jede Zeile naeher am Text. */ .normen-textur { --ferne: 0.42; --schleier: 0.52; /* AUF DEM TELEFON GAR KEINE WEICHE KANTE. `filter: blur()` ist der einzige Teil dieser Seite, den der Compositor nicht einfach verschieben kann: er muss die Flaeche bei JEDEM Bild neu rastern, und zwar auf der Flaeche der Schrift - genau dort, wo ein Telefon am wenigsten uebrig hat. Beim Scrollen faellt das zusammen mit allem anderen an. Der Zerfall bleibt trotzdem sichtbar: Deckkraft und Massstab tragen ihn, und die laufen im Compositor. Was verloren geht, ist die weiche Kante - auf 390 Pixeln war sie ohnehin kaum zu sehen. */ --staubfaktor: 0; } .nt:nth-child(even) { display: none; } /* Gemessen: hier lagen sie auf "CoverRaccoon" und auf der Kontaktzeile. */ .nt:nth-child(5) { --ym: 63.5%; } .nt:nth-child(7) { --ym: 75.5%; } .nt { font-size: clamp(1.3rem, calc(var(--gr) * 1.5), 3.6rem); } /* KEIN SCROLLHINWEIS AUF DEM TELEFON. Scrollen ist dort die Grundbewegung. Das Wort samt Strich erklaert eine Selbstverstaendlichkeit und kostet dabei Platz genau an der Stelle, an der der erste Bildschirm ohnehin knapp ist. Am Zeigergeraet bleibt er stehen: dort fuellt der Hero oft den ganzen Schirm, und der Strich sagt, dass darunter noch etwas kommt. Die Spaltenkorrektur weiter oben bleibt trotzdem bestehen. Sie behebt einen gemessenen Rasterfehler - ohne sie war die Bildmarke auf jedem Telefon null mal null gross - und muss auch dann gelten, wenn der Hinweis hier wieder eingeschaltet wird. */ .scrollcue { display: none; } .transfer { height: 104px; } .close-figure { height: 146px; max-width: none; } } @media (max-width: 640px) { /* Strengere Grenzen: ausser der optimierten Bildmarke laeuft auf schmalen Geraeten keine dauerhafte Bewegung im Hero. Das Lichtfeld steht still, die Tiefe bleibt sichtbar. */ /* Mobil steht das Lichtfeld still - eine Ebene weniger in Bewegung. Die FLAECHE bleibt unveraendert gross: sie zu stutzen war genau der Fehler, der die quadratische Kante erzeugt hat. */ .stage::before { animation: none; } .hero::after { display: none; } .orient { gap: 8px 18px; margin-top: 24px; font-size: 0.62rem; } /* Der Uebergang wird kompakter, der Winkel bleibt derselbe. */ .transfer { height: 96px; max-width: none; } .t-rail { right: 44%; } .t-drop { left: 56%; height: 62px; } .t-mark { left: calc(56% + 28px); top: 85px; } /* Mobil steht die Beschriftung links unten statt rechts an der Kante: rechts stiess sie gemessen mit dem Abzweig zusammen und lief bis an den Seitenrand. */ .t-note { left: 0; right: auto; top: auto; bottom: 2px; max-width: 48%; text-align: left; font-size: 0.68rem; } .carriers { padding: var(--space-block) 16px 26px; } /* Mobil ist die Szene flacher und bekommt weniger Raum: weniger Flaeche zu fuellen, und der Text darunter rueckt naeher heran. Die Detailstufe senkt das Skript selbst. */ /* MOBIL WIRKT MEHR HOEHE ANDERS. Gemessen ist die Szene auf schmalen Geraeten breitenbegrenzt: von 1000/660 bis 1000/1060 bleibt sie bei 95 Prozent der Kastenbreite stehen, nur die Hoehe waechst ins Leere. Der Hebel ist deshalb die BREITE. Die Szene bricht aus der seitlichen Polsterung des Abschnitts aus und laeuft ueber die volle Fensterbreite - gemessen 89 auf 100 Prozent. Etwas mehr Hoehe bekommt sie trotzdem, weil sie damit ihre Drehung besser ausnutzt. */ .szene { aspect-ratio: 1000 / 820; /* `width: 100%` muss weg, sonst laufen die negativen Raender ins Leere: die Breite bliebe an der Spalte haengen. */ width: auto; margin: calc(var(--space-block) + 6px) calc(var(--pad) * -1) var(--space-block); } .close-figure { height: 128px; margin-top: 34px; } .close-figure .cf-l, .close-figure .cf-r { /* 4px + 32,4 Prozent von 76px = 29px. */ top: 29px; height: 98px; } .close-figure .closing-mark { width: 76px; } .slots { max-width: none; } } /* ------------------------------------------- Flaches Fenster am Desktop */ /* AUCH AM DESKTOP ZAEHLT DIE HOEHE. Der Hero zentriert die Bildmarke senkrecht in ihrer Rasterzeile. Ist die Textspalte hoeher als das Fenster - bei 901 mal 600 Pixeln gemessen der Fall -, wandert das Zeichen mit nach unten: seine Mitte lag bei y = 420, die Rotationshuelle reichte bis y = 616 und damit unter die Faltung. Bei flachen Fenstern wird deshalb oben ausgerichtet statt mittig. Das haengt an der HOEHE, nicht an einem Geraet, und gilt fuer ein niedriges Desktopfenster genauso wie fuer ein liegendes Tablet. */ @media (min-width: 901px) and (max-height: 760px) { .hero { align-items: start; padding-top: clamp(20px, 3vh, 40px); min-height: 0; } .stage { margin-top: clamp(0px, 2vh, 24px); } } /* ------------------------------------------- Querformat mit wenig Hoehe */ /* QUERFORMAT IST KEIN SCHMALES HOCHFORMAT. Auf einem liegenden Telefon ist das Fenster breit, aber sehr flach. Der gestapelte Aufbau haette die Bildmarke ueber den Text geschoben und beide aus dem Bild gedrueckt. Hier steht das Zeichen deshalb wieder NEBEN dem Text - wie auf dem Desktop, nur kleiner - und der Scrollhinweis entfaellt, weil er ohnehin unter der Faltung laege. Gebunden an die Hoehe, nicht an ein Geraet: es gilt fuer jedes flache Fenster, auch fuer ein niedriges Desktopfenster. */ @media (max-width: 900px) and (orientation: landscape) and (max-height: 560px) { .hero { grid-template-columns: minmax(0, 0.72fr) minmax(0, 1fr); gap: 28px; /* Oben ausgerichtet, nicht mittig. Bei 740 mal 360 Pixeln ist die Textspalte hoeher als das Fenster; mittige Ausrichtung schob die Bildmarke gemessen auf y = 310 und damit fast vollstaendig unter die Faltung. Oben buendig steht sie sofort im Bild. */ align-items: start; padding-top: 12px; } .stage { grid-column: 1; grid-row: 1; --a-breite: clamp(104px, min(26vw, 52svh), 240px); } .hero-text { grid-column: 2; grid-row: 1; } .scrollcue { display: none; } } /* --------------------------------------------------- Reduzierte Bewegung */ /* Verbindlich: keine Dauerrotation. Stattdessen eine feste, hochwertige Perspektive, in der die Tiefe genauso sichtbar ist. Es geht dabei keine Information verloren, weil die Bewegung keine traegt. */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } /* Die Paragraphentextur bleibt stehen - sie bleibt aber da. Sie traegt keine Aussage in ihrer Bewegung, nur in ihrem Dasein; sie zu entfernen naehme dem Hintergrund seine Struktur, ohne irgendjemandem zu helfen. */ .nt { animation: none; } .rotor { animation: none; transform: rotateX(-11deg) rotateY(-26deg) scale3d(2.05, 2.05, 2.05); } *, *::before, *::after { transition-duration: 0.001ms !important; } .site { animation: none; background: var(--as-bg); border-bottom-color: var(--as-line); } /* Das Lichtfeld steht still. Die Tiefe bleibt vollstaendig sichtbar - sie liegt im Verlauf, nicht in der Bewegung. */ .stage::before { animation: none; transform: translate3d(0, 0, 0); } /* Ohne Rotation gibt es keinen Fortschritt zu zeigen: die Linie entfaellt, statt als toter Balken stehen zu bleiben. */ /* Der Aufbau der Netzfigur und aller Achsen entfaellt. Weil die Startzustaende ausschliesslich unter `html.js` gelten und das Skript bei reduzierter Bewegung gar nicht erst anschaltet, stehen Linien, Knoten, Uebergangsfigur und Schlussform bereits fertig da. Diese Regeln sind der zweite Riegel davor, nicht der erste. */ /* KEIN PINNING bei reduzierter Bewegung. Eine festgeheftete Karte ist eine scrollabhaengige Verschiebung, auch wenn sie keine Animation heisst. Die drei Schritte stehen dann einfach untereinander. */ .steps li { position: static; min-height: 0; } /* Das Risikofeld steht geordnet und vollstaendig. Es geht dabei nichts verloren: die Unordnung war der Weg, nicht die Aussage. */ .seg { animation: none; transform: none; } .path::before { transform: none; } .path li:last-child::before { transform: rotate(45deg); } /* Die Szene steht als fertige Komposition. Die Zeichenflaeche zeichnet dafuer genau EIN Bild im Endzustand - kein eingefrorenes erstes Bild und keine leere Flaeche. */ .szene .szene-still { opacity: 1; } .transfer .t-rail, .transfer .t-drop, .transfer .t-mark, .close-figure .cf-l, .close-figure .cf-r, .close-figure .closing-mark { opacity: 1; } .close-figure .cf-l { animation: none; transform: rotate(calc(90deg - var(--as-angle))); } .close-figure .cf-r { animation: none; transform: rotate(calc(var(--as-angle) - 90deg)); } h1.sweep { animation: none; background-image: none; -webkit-text-fill-color: var(--as-text); color: var(--as-text); } }