. */
/* Zusammengesetzte Woerter sprengen auf 350px jede Ueberschrift:
"Wahrnehmen-Denken-Handeln-Zyklus" braucht 5xx px. Trennen ist die
Antwort, nicht kleiner setzen; break-word faengt den Rest ab, wenn die
Trennmuster nicht greifen. */
.rl-h1, .rl-h2, .rl-uc-h1, .rl-uc-h2,
.rl-prosa h1, .rl-prosa h2, .rl-prosa h3,
.rl-beitrag__kopf h1, .rl-lex h1, .rl-lex h2 {
hyphens: auto; overflow-wrap: break-word; }
/* Tabellen im Fliesstext laufen ueber: 45 und 75px breiter als der
Bildschirm. Sie duerfen seitwaerts rollen, aber nur sie, nicht die Seite.
-webkit-overflow-scrolling gibt iOS den gewohnten Schwung. */
.rl-prosa table {
display: block; width: 100%; max-width: 100%;
overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* Codebloecke aus dem Markdown, dasselbe in Grau. Ein Beispiel im Glossar
(Few-Shot-Prompting) ist 535px breit und schob die ganze Seite 195px zur
Seite: der Text daneben war nur noch durch Scrollen erreichbar. Umbrechen
kommt bei Code nicht in Frage, eine Zeile ist eine Zeile; also rollt der
Block, und nur er.
Der Wrapper sitzt auf dem , nicht auf dem : das ist
inline und traegt kein overflow. */
.rl-prosa pre {
max-width: 100%;
overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* Beschriftungen im Rahmen unter 14px. Im Menue und im Fuss ist das keine
Zierde, sondern Navigation: 11,5px im aufgeklappten Menue liest auf einem
Telefon niemand mehr. Der Inhalt der Seiten ist ueber die
--rl-fs-Variablen schon versorgt; das hier sind Klassen aus dieser
Datei. */
.rl-hpanel__name { font-size: 14px; }
.rl-hpanel__klein { font-size: 14px; }
.rl-fuss, .rl-fuss__recht, .rl-fuss__liste { font-size: 14px; }
.rl-entwurf, .rl-entwurf__tag { font-size: 14px; }
/* Dekorative Spalten verschwinden auf dem Telefon (Entscheidung vom
05.09.2026). Getroffen wird genau das: ein direktes Kind eines Rasters,
das aria-hidden traegt, also nichts sagt und nur schmueckt. In den
Hero-Bereichen ist das die Animationsspalte; sie zwingt den Text sonst
in eine 136px-Spalte neben sich.
Der Attributselektor auf das style-Attribut ist der einzige Weg, ein
Raster zu treffen, das nur inline existiert. !important ist es auch:
ein Inline-Style schlaegt jede Media Query, sonst waere der Codemod
ueberhaupt noetig. Hintergrundflaechen und Schraegschnitte bleiben, sie
haengen am Abschnitt, nicht am Raster. */
[style*="display: grid"] > [aria-hidden="true"] { display: none !important; }
/* Zweispalter, die nicht als Rasterliteral im style-Attribut stehen,
sondern als blosses "display: flex" mit zwei Kindern. Welche Elemente
die Klasse tragen, entscheidet nicht ein Selektor, sondern eine Messung:
werkzeuge/mobil-stapel.mjs rendert auf 390px und markiert nur, was dort
wirklich Text in eine zu schmale Spalte draengt. Auf der Pilotseite
waren das 4 von 517 Elementen mit style-Attribut. Eine CSS-Regel auf
[style*="justify-content: space-between"] haette 380 Stellen getroffen,
um diese 4 zu heilen.
!important, weil die Gegenspieler Inline-Styles sind. */
/* (Die generische Stapelregel steht jetzt in der 900er-Stufe und gilt
von dort an abwaerts.) */
/* Die Referenzbuehne ist absolut positioniert und liegt in einer Buehne
fester Hoehe: untereinander gestapelt liefe sie senkrecht ueber. Deshalb
hier anders herum: der Beleg bekommt die volle Breite, das Foto
entfaellt. Es traegt Stimmung, keine Aussage, und der Text stand in
70px. */
/* Die Referenzbuehne auf dem Handy.
Der erste Versuch blendete die zweite Spalte aus. Das nahm nicht nur das
Foto mit, sondern auch den Verweis "Mehr erfahren" und das Kundenlogo,
und die Zuschreibung unter dem Zitat verschwand ohnehin unter der
Kante der 420px hohen Buehne. Uebrig blieb ein Zitat ohne Absender und
ohne Weg zum Fall.
Deshalb hier anders herum: die Folien liegen nicht mehr uebereinander,
sondern stehen im Fluss, die Buehne waechst mit, und das Foto ruecht
unter den Text statt daneben. Verweis, Logo und Zuschreibung bleiben.
Uebereinanderliegen heisst position: absolute, und das braucht eine
feste Hoehe. Im Fluss stehen heisst, dass nur EINE Folie sichtbar sein
darf: das leistet display statt opacity, mit denselben Selektoren, die
weiter oben schon die Deckkraft schalten. */
/* Die Buehne UND ihr Rahmen geben die feste Hoehe auf. .rl-refbahn traegt
sie inline (824px); der Inhalt braucht auf 390px 838px und wurde unten
abgeschnitten. */
.rl-refbahn, .rl-refbuehne { height: auto !important; min-height: 0 !important; }
.rl-refslide { position: static !important; animation: none !important;
opacity: 1 !important; pointer-events: auto !important;
display: none !important; }
.rl-refslide:first-of-type { display: grid !important; }
.rl-refradio:nth-of-type(1):checked ~ .rl-refbuehne .rl-refslide:nth-of-type(1),
.rl-refradio:nth-of-type(2):checked ~ .rl-refbuehne .rl-refslide:nth-of-type(2),
.rl-refradio:nth-of-type(3):checked ~ .rl-refbuehne .rl-refslide:nth-of-type(3) {
display: grid !important; }
.rl-refradio:nth-of-type(1):checked ~ .rl-refbuehne .rl-refslide:not(:nth-of-type(1)),
.rl-refradio:nth-of-type(2):checked ~ .rl-refbuehne .rl-refslide:not(:nth-of-type(2)),
.rl-refradio:nth-of-type(3):checked ~ .rl-refbuehne .rl-refslide:not(:nth-of-type(3)) {
display: none !important; }
.rl-refslide { grid-template-columns: minmax(0, 1fr) !important; }
/* Das Foto steht jetzt unter dem Text, nicht daneben, und niedriger: 400px
Bildhoehe neben 350px Textbreite waere die Haelfte des Bildschirms fuer
ein Stimmungsbild. Der Verweis und das Logo liegen darauf und bleiben. */
.rl-refslide > *:nth-child(2) {
min-height: 190px !important; }
/* Die Kopfzeile braucht 358px Inhalt und hat 350px (390px-Geraet) bzw.
320px (360px-Geraet). Drei Griffe, in dieser Reihenfolge:
1. Die Wortmarke schrumpft nicht mehr mit. Sie ist ein Flex-Element und
hatte die Voreinstellung flex-shrink: 1; zusammen mit max-width: 100%
aus der Bildgrundregel gab sie bei Platzmangel nach, ohne ihre Hoehe
anzupassen. Das Ergebnis war ein in der Breite gestauchtes Logo.
Reicht der Platz nicht, laeuft die Zeile jetzt sichtbar ueber, statt
die Marke zu entstellen: ein Ueberlauf faellt in der Pruefung auf,
eine verzerrte Wortmarke nicht.
2. Der Abstand der beiden Kopfhaelften faellt von 24px auf 12px.
3. Der Knopf traegt die Kurzform, die die 154 Unterseiten laengst
benutzen. Damit passt die Zeile auch auf 360px. */
.rl-kopf__links { flex: none; }
.rl-marke img { max-width: none; }
.rl-kopf__reihe { gap: 12px; }
.rl-btn__lang { display: none; }
.rl-btn__kurz { display: inline; }
.rl-h1 { font-size: 32px; }
.rl-h2 { font-size: 27px; }
.rl-h2--md { font-size: 26px; }
.rl-h2--sm { font-size: 24px; }
.rl-h3 { font-size: 23px; }
.rl-lede { font-size: 17px; }
.rl-fuss__oben { grid-template-columns: 1fr; }
.rl-reftabs { gap: 18px; }
.rl-refreiter { font-size: 15px; }
}
/* ---- LinkedIn-Verweis auf den Leadership-Karten ----------------------------
Quadrat auf Hoehe der Namenszeile, gemessen 37px fuer Name plus Funktion.
Feste Groesse mit Absicht: align-self: stretch zusammen mit aspect-ratio
war zirkulaer, weil die Hoehe der Unterschrift erst aus dem Quadrat
entstehen sollte und das Quadrat aus der Hoehe. Ergebnis war ein Klotz
von 300px, der den Namen umbrechen liess.
Ruhezustand blass, beim Ueberfahren dunkelblau. currentColor traegt die
Farbe in den Rahmen des Zeichens, die Buchstaben bleiben weiss. */
.rl-li { width: 38px; height: 38px; flex: none; display: flex;
align-items: center; justify-content: center; color: var(--rl-b300);
transition: color .18s var(--rl-ease); }
.rl-li:hover, .rl-li:focus-visible { color: var(--rl-b900); }
.rl-li svg { width: 100%; height: 100%; display: block; }
/* ---- Kennzahlen als Zaehlwerk ---------------------------------------------
Die Zahlen finden sich beim Einscrollen von oben nach unten ein. Jede Ziffer
sitzt in einem Fenster von einer Zeilenhoehe; darunter haengt ein Band aus
zwei vollen Ziffernlaeufen.
Das Band steht in einem ::after mit content, also nicht im HTML: im Markup
bleibt genau die echte Ziffer stehen, damit Suchmaschinen und Sprachmodelle
"13,4" lesen und keine Ziffernkette.
Ausgeloest wird der Lauf ueber die Klasse is-lauf, die relaunch-motion.js
einmalig setzt, sobald die Zahl ins Bild kommt. Danach bleibt sie stehen.
Ohne Skript, bei Ladefehler oder bei prefers-reduced-motion faellt keine
Bewegung an und das Fenster zeigt von sich aus die echte Ziffer. Derselbe
Vertrag wie bei motion.js der Live-Website: Inhalt ist immer sichtbar.
------------------------------------------------------------------------- */
.rl-zahl { display: inline-flex; align-items: flex-start; }
.rl-walze { display: block; height: 0.92em; overflow: hidden; }
.rl-zahl__sep { display: block; line-height: 0.92; }
.rl-walze__band { display: block; line-height: 0.92; }
/* Zwanzig Ziffern unter der echten: zwei volle Umlaeufe. */
.rl-walze__band::after {
content: "9\A 8\A 7\A 6\A 5\A 4\A 3\A 2\A 1\A 0\A 9\A 8\A 7\A 6\A 5\A 4\A 3\A 2\A 1\A 0";
display: block; white-space: pre; }
/* Die Stellen laufen gestaffelt aus, die letzte kommt zuletzt zur Ruhe. */
.rl-zahl.is-lauf .rl-walze__band {
animation: rlWalze 1.15s cubic-bezier(0.16, 0.86, 0.22, 1) both;
animation-delay: calc(var(--v, 0) * 0.11s);
}
@keyframes rlWalze {
from { transform: translateY(-18.4em); } /* 20 Zeilen zu 0,92em */
to { transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
.rl-zahl.is-lauf .rl-walze__band { animation: none; transform: none; }
}
/* ---- Referenzbahn: drei Belege, die sich ueberblenden ----------------------
Ohne Skript. Solange niemand einen Reiter gewaehlt hat, laeuft die Schleife
im Takt der Vorlage (7,5 s je Beleg). Sobald ein Reiter angeklickt wird,
uebernimmt die Auswahl. Faehrt ein Browser :has() nicht, entfaellt nur die
Schleife und der erste Beleg bleibt stehen; sichtbar ist immer etwas.
Farben und Masse 1:1 aus refLStil der Vorlage. */
.rl-refradio { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; }
.rl-refslide { position: absolute; inset: 0; display: grid;
grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
opacity: 0; pointer-events: none; transition: opacity .7s ease; }
.rl-refslide:first-of-type { opacity: 1; pointer-events: auto; }
/* Schleife, solange keine Auswahl getroffen wurde */
.rl-refbahn:not(:has(.rl-refradio:checked)) .rl-refslide {
animation: rlRef3 calc(var(--reftakt) * 3) linear infinite;
animation-delay: calc(var(--reftakt) * var(--v, 0) * -1); }
.rl-refbahn:not(:has(.rl-refradio:checked)) .rl-refreiter {
animation: rlRefReiter calc(var(--reftakt) * 3) linear infinite;
animation-delay: calc(var(--reftakt) * var(--v, 0) * -1); }
/* Nach der Auswahl gilt sie. Die Reihenfolge der Regeln stellt sicher, dass
die Auswahl die Schleife ueberstimmt. */
/* Ueber die Position der Radios statt ueber ihre Kennung: so gelten dieselben
Regeln fuer jede Bahn auf jeder Seite, die Kennungen muessen nur innerhalb
der Seite eindeutig sein. */
.rl-refradio:nth-of-type(1):checked ~ .rl-refbuehne .rl-refslide:nth-of-type(1),
.rl-refradio:nth-of-type(2):checked ~ .rl-refbuehne .rl-refslide:nth-of-type(2),
.rl-refradio:nth-of-type(3):checked ~ .rl-refbuehne .rl-refslide:nth-of-type(3) {
opacity: 1; pointer-events: auto; animation: none; }
.rl-refradio:nth-of-type(1):checked ~ .rl-refbuehne .rl-refslide:not(:nth-of-type(1)),
.rl-refradio:nth-of-type(2):checked ~ .rl-refbuehne .rl-refslide:not(:nth-of-type(2)),
.rl-refradio:nth-of-type(3):checked ~ .rl-refbuehne .rl-refslide:not(:nth-of-type(3)) {
opacity: 0; pointer-events: none; animation: none; }
.rl-reftabs { display: flex; align-items: center; justify-content: center;
gap: 56px; padding: 32px 0 0; }
.rl-refreiter { font-size: 17px; font-weight: 600; letter-spacing: -0.014em;
color: #B6C2D4; cursor: pointer; transition: color .35s ease; }
.rl-refreiter:hover { color: var(--rl-ink); }
.rl-refradio:nth-of-type(1):checked ~ .rl-reftabs .rl-refreiter:nth-of-type(1),
.rl-refradio:nth-of-type(2):checked ~ .rl-reftabs .rl-refreiter:nth-of-type(2),
.rl-refradio:nth-of-type(3):checked ~ .rl-reftabs .rl-refreiter:nth-of-type(3) {
color: var(--rl-ink); animation: none; }
/* Die Punktreihe steht in jedem Beleg. Der Punkt, der zum Beleg gehoert, ist
hell: das braucht keinen Zustand, weil immer nur ein Beleg sichtbar ist. */
.rl-refpunkt { width: 22px; height: 3px; border-radius: 2px;
background: rgba(255, 255, 255, 0.35); }
.rl-refslide:nth-of-type(1) .rl-refpunkt:nth-of-type(1),
.rl-refslide:nth-of-type(2) .rl-refpunkt:nth-of-type(2),
.rl-refslide:nth-of-type(3) .rl-refpunkt:nth-of-type(3) { background: #ffffff; }
@keyframes rlRef3 { 0% { opacity: 0; } 3%, 30% { opacity: 1; } 33%, 100% { opacity: 0; } }
@keyframes rlRefReiter {
0% { color: #B6C2D4; } 3%, 30% { color: #1D2C4E; } 33%, 100% { color: #B6C2D4; }
}
@media (prefers-reduced-motion: reduce) {
.rl-refslide, .rl-refreiter { animation: none !important; }
}
/* ============================================================================
Use-Case-Unterseiten (erzeugt durch relaunch-usecases.mjs)
----------------------------------------------------------------------------
Die drei erzeugten Seitenfamilien unter relaunch/ arbeiten klassenbasiert,
die 19 handgepflegten Seiten mit Inline-Styles (CLAUDE.md). Hier stehen
deshalb die Klassen; farbneutral, weil die Fachbereichsfarbe als Custom
Property auf .rl-uc sitzt: --uc-von, --uc-bis (Bannerverlauf), --uc-text
(Textfarbe auf Weiss), --uc-hell (helle Flaeche). Gesetzt wird sie im
Renderer aus FACHBEREICHE in use-cases.mjs, damit eine neue Farbe an einer
Stelle steht und nicht in sechs Seiten. Vorbild ist --v auf .rl-refslide.
GEDAEMPFTER TEXT STEHT HIER AUF #5F7092, nicht auf --rl-muted (#5A6B85).
Gerechnet: --rl-muted haelt auf Weiss 2,82:1, auf den beiden hellen
Flaechen dieser Seiten (#F9FAFE, #F4F7FC) 2,71 und 2,63:1. Fuer Text ist
das zu wenig. #5F7092 kommt auf 4,98 / 4,77 / 4,64:1 und bleibt dabei
deutlich leichter als der Fliesstext (--rl-body, 10,4:1). Betroffen sind
die Attribution des Abschlusszitats, die Bildzeile, die Schluessel der
Kennzahlenkarte, die Firmenzahlen und die Notiz.
Knoepfe und Links bleiben Blue 700, auch auf einer roten Seite; das ist
die Regel aus Handoff 6.2 und nicht mit --uc-text zu verwechseln.
Die halbtransparenten und aufgehellten Abstufungen (--uc-von-88 usw.)
rechnet der Renderer aus, nicht das CSS. color-mix() waere kuerzer, kommt
aber im ganzen Bestand nicht vor: fiele es aus, malte der Verlauf nicht,
und die Werte muessten ohnehin fuer die Kontrastrechnung bekannt sein.
========================================================================= */
.rl-uc { --uc-rail: 1320px; }
.rl-uc .rl-uc-label {
margin: 0; font-size: 12px; font-weight: 500; letter-spacing: 0.07em;
text-transform: uppercase; color: var(--uc-text);
}
.rl-uc .rl-uc-label--hell { color: rgba(255, 255, 255, 0.82); }
.rl-uc .rl-uc-h2--satt { margin-top: 0; }
.rl-uc .rl-uc-h2 {
margin: 18px 0 0; max-width: 22em; font-size: 38px; font-weight: 300;
line-height: 1.18; letter-spacing: -0.026em; color: var(--rl-ink);
text-wrap: pretty;
}
.rl-uc .rl-uc-gitter {
position: absolute; inset: 0; width: 100%; height: 100%;
pointer-events: none;
}
/* ---- Prosa: die Fallstexte aus case-study.mjs ------------------------------
Die O-Toene stehen als em-Auszeichnung mitten im Text. Sie werden nicht
herausgeloest (das zerreisst die Saetze), sondern hier groesser und in
Ink gesetzt: so lesen sie sich als das, was sie sind, ohne dass ein Wort
verloren geht oder doppelt steht. */
/* 32em sind rund 62 Zeichen je Zeile. 34em liefen auf 68 und damit an die
obere Kante des Lesbaren; schmaler traegt ausserdem die Vorgabe, dass der
Fallstext laenger steht als die Karten daneben. */
.rl-uc .rl-uc-prosa p {
margin: 18px 0 0; max-width: 32em; font-size: 17px; font-weight: 300;
line-height: 1.62; letter-spacing: -0.011em; color: var(--rl-body);
text-wrap: pretty;
}
.rl-uc .rl-uc-prosa em {
font-style: normal; font-size: 18.5px; font-weight: 400;
color: var(--rl-ink);
}
/* ---- Banner ---------------------------------------------------------------- */
.rl-uc-banner {
position: relative; overflow: hidden; isolation: isolate;
background: var(--uc-bis);
}
.rl-uc-banner__bild {
position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%;
object-fit: cover;
}
.rl-uc-banner__verlauf {
position: absolute; inset: 0; z-index: 1;
/* Richtung nach Handoff 6.2: von -> bis, bei Investment also #B10303
nach #500000. Die Textspalte liegt am nahen, fast deckenden Ende;
am fernen kommt das Bild durch. Deckkraefte gerechnet, schlechtester
Wert aller 30 Kombinationen 4,82:1 (gastromatic, Krume auf 0,82). */
background: linear-gradient(122deg, var(--uc-von-94) 0%, var(--uc-von-86) 46%, var(--uc-bis-78) 100%);
}
.rl-uc-banner__schraege {
position: absolute; z-index: 2; left: -6px; right: -6px; bottom: -3px;
height: 220px; background: var(--rl-white);
clip-path: polygon(-2% 92%, 102% 0%, 102% 110%, -2% 110%);
pointer-events: none;
}
.rl-uc-banner__inhalt {
position: relative; z-index: 3; display: grid;
grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr);
gap: 56px; align-items: center; min-height: 660px;
max-width: var(--uc-rail); margin: 0 auto;
padding: 92px var(--pad-x) 150px; box-sizing: border-box;
}
/* Deckkraft gerechnet, nicht geschaetzt: 0,72 fuer die Trennzeichen kam auf
vier der sechs Bilder nur auf 4,20 bis 4,35:1. Mit 0,82 sind es 5,03:1 im
schlechtesten Fall, die Links bei 0,90 darueber. */
.rl-uc-krume {
display: flex; align-items: center; gap: 9px; font-size: 13px;
color: rgba(255, 255, 255, 0.82);
}
.rl-uc-krume a { color: rgba(255, 255, 255, 0.9); text-decoration: none; }
.rl-uc-krume a:hover { color: #ffffff; }
.rl-uc-krume__hier { color: #ffffff; }
.rl-uc-banner__h1 {
margin: 24px 0 0; max-width: 17em; font-size: 46px; font-weight: 300;
line-height: 1.1; letter-spacing: -0.03em; color: #ffffff;
text-wrap: pretty;
}
.rl-uc-banner__lead {
margin: 26px 0 0; max-width: 32em; font-size: 18px; font-weight: 300;
line-height: 1.58; letter-spacing: -0.011em;
color: rgba(255, 255, 255, 0.94); text-wrap: pretty;
}
.rl-uc-banner__marken {
display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
margin-top: 30px;
}
.rl-uc-banner__bereich, .rl-uc-banner__segment {
display: inline-flex; padding: 6px 13px; border-radius: 200px;
font-size: 11.5px; letter-spacing: 0.05em; text-transform: uppercase;
color: #ffffff;
}
.rl-uc-banner__bereich {
border: 1px solid rgba(255, 255, 255, 0.46);
background: rgba(255, 255, 255, 0.16);
}
.rl-uc-banner__segment {
border: 1px solid rgba(255, 255, 255, 0.3);
}
/* ---- Kennzahlenkarte, Auf einen Blick ------------------------------------- */
.rl-uc-kz {
padding: 34px 38px 30px; border-radius: 10px; background: var(--rl-white);
box-shadow: 0 24px 60px rgba(16, 26, 48, 0.3); box-sizing: border-box;
}
.rl-uc-kz__kopf {
display: flex; align-items: center; justify-content: space-between;
gap: 16px; padding-bottom: 20px; border-bottom: 1px solid var(--rl-tint-3);
}
.rl-uc-kz__logo { display: block; height: 28px; width: auto; max-width: 190px; object-fit: contain; }
.rl-uc-kz__name { font-size: 17px; font-weight: 500; color: var(--rl-ink); }
.rl-uc-kz__marke {
font-size: 11.5px; letter-spacing: 0.07em; text-transform: uppercase;
color: #5F7092;
}
.rl-uc-kz__raster {
display: grid; grid-template-columns: 1fr 1fr; gap: 0 26px; margin-top: 6px;
}
.rl-uc-kz__zahl {
display: flex; flex-direction: column; gap: 7px; padding: 20px 0 20px 18px;
border-left: 1px solid rgba(29, 44, 78, 0.14);
}
/* 44px, am Entwurf nachgemessen: dort nimmt "1 Woche" 27 Prozent der
Kartenbreite ein, mit 38px waren es 23,2. Die Versalhoehe der Ziffer
bestaetigt es (32px Web -> 44px Schriftgrad). */
.rl-uc-kz__wert {
font-size: 44px; font-weight: 300; line-height: 1;
letter-spacing: -0.03em; color: var(--rl-ink);
}
.rl-uc-kz__text {
font-size: 14px; font-weight: 300; line-height: 1.52; color: var(--rl-body);
text-wrap: pretty;
}
.rl-uc-kz__rahmen {
display: grid; grid-template-columns: auto 1fr; gap: 11px 14px;
margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--rl-tint-3);
font-size: 13px; line-height: 1.5;
}
.rl-uc-kz__schluessel { color: #5F7092; }
.rl-uc-kz__wertzeile { color: var(--rl-ink); }
/* ---- Abschnitte, Seitenspalte --------------------------------------------- */
.rl-uc-abschnitt {
position: relative; background: var(--rl-white);
}
.rl-uc-abschnitt > *, .rl-uc-loesung__inhalt, .rl-uc-weitere__inhalt {
max-width: var(--uc-rail); margin: 0 auto;
padding: 96px var(--pad-x); box-sizing: border-box;
}
/* 482 zu 648 Pixel bei 1440er Fenster, am Entwurf gemessen (Karte 179..477,
Text ab 523, bei 200 dpi). Links bleibt trotzdem kuerzer als rechts, das ist
die zweite Vorgabe: sie haengt an der Textlaenge, nicht an der Breite. */
.rl-uc-zweispalt {
display: grid; grid-template-columns: minmax(0, 0.744fr) minmax(0, 1fr);
gap: 72px; align-items: start;
}
.rl-uc-seite { display: flex; flex-direction: column; gap: 18px; }
/* Grund #F9FAFE, am Entwurf gemessen. Weiss auf Weiss braeuchte den Rahmen
allein zur Abgrenzung; der zarte Ton traegt sie mit. */
.rl-uc-person, .rl-uc-firma {
padding: 22px 24px; border: 1px solid var(--rl-tint-3);
border-radius: var(--rl-r-card); background: #F9FAFE;
}
.rl-uc-person { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; }
.rl-uc-person__foto {
display: block; width: 68px; height: 68px; border-radius: 50%;
object-fit: cover;
}
.rl-uc-person__name { display: block; font-size: 15.5px; font-weight: 500; color: var(--rl-ink); }
.rl-uc-person__rolle { display: block; margin-top: 3px; font-size: 13px; color: var(--rl-body); }
.rl-uc-person__bio {
grid-column: 1 / -1; margin: 4px 0 0; font-size: 13.5px; font-weight: 300;
line-height: 1.55; color: var(--rl-body); text-wrap: pretty;
}
.rl-uc-firma__logo { display: block; height: 32px; width: auto; max-width: 200px; object-fit: contain; }
.rl-uc-firma__name { font-size: 16px; font-weight: 500; color: var(--rl-ink); }
.rl-uc-firma__info, .rl-uc-firma__weitere {
margin: 14px 0 0; font-size: 13.5px; font-weight: 300; line-height: 1.55;
color: var(--rl-body); text-wrap: pretty;
}
.rl-uc-firma__weitere { color: #5F7092; }
.rl-uc-firma__zahlen {
display: flex; gap: 26px; margin-top: 18px; padding-top: 16px;
border-top: 1px solid var(--rl-tint-3);
}
.rl-uc-firma__zahl { display: flex; flex-direction: column; gap: 2px; }
.rl-uc-firma__zahl span:first-child {
font-size: 22px; font-weight: 300; letter-spacing: -0.02em; color: var(--rl-ink);
}
.rl-uc-firma__zahl span:last-child { font-size: 12px; color: #5F7092; }
.rl-uc-notiz { margin: 0; font-size: 12.5px; color: #5F7092; }
/* ---- Loesung: Bild links, Text rechts, drei Karten darunter ----------------
Die Flaeche ist #F4F7FC und laeuft mit GERADER Kante durch, beides am
Entwurf gemessen. Sie traegt bewusst NICHT --uc-hell: bei Investment waere
sie rosa, und der Entwurf zeigt auf allen Seiten denselben neutralen Ton.
Die Fachbereichsfarbe bleibt dem Banner, den Eyebrows und dem CTA. */
.rl-uc-loesung { position: relative; background: #F4F7FC; }
/* Halbe/halbe: der Entwurf gibt dem Bild 568 und dem Text 561 Pixel. */
.rl-uc-loesung__oben {
display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 72px; align-items: start;
}
.rl-uc-lbild { margin: 0; }
.rl-uc-lbild img {
display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
border-radius: 8px;
}
/* Echtes Projektfoto: natuerliches Format statt Beschnitt. Das Gruppenfoto
aus dem Leaders Lab ist Querformat und verliert im 4:5-Ausschnitt die
Haelfte der Runde. */
.rl-uc-lbild--foto img { aspect-ratio: auto; }
.rl-uc-lbild figcaption {
margin-top: 12px; font-size: 12.5px; font-weight: 300; line-height: 1.5;
color: #5F7092; text-wrap: pretty;
}
.rl-uc-schritte {
display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px;
margin-top: 56px;
}
.rl-uc-schritt {
padding: 30px 28px 28px; border-radius: 10px; background: var(--rl-white);
border: 1px solid var(--rl-tint-3);
}
.rl-uc-schritt__label {
margin: 0; font-size: 11px; font-weight: 500; letter-spacing: 0.09em;
text-transform: uppercase; color: var(--uc-text);
}
.rl-uc-schritt__titel {
margin: 13px 0 0; font-size: 19px; font-weight: 400; line-height: 1.3;
letter-spacing: -0.018em; color: var(--rl-ink); text-wrap: pretty;
}
.rl-uc-schritt__text {
margin: 13px 0 0; font-size: 14.5px; font-weight: 300; line-height: 1.6;
color: var(--rl-body); text-wrap: pretty;
}
/* ---- Statement-Karte, "Der Aha-Moment" ------------------------------------
Grosszitat rechts, Eyebrow oben links, Portraet unten links. Der Wortlaut
kommt geprueft aus USE_CASES (Feld moment); wo im Fall kein O-Ton steht,
traegt die Karte eine Aussage ohne Anfuehrungszeichen und ohne Portraet.
36px Polster oben, gut ein Zentimeter: ohne es klebte die Karte an der
grauen Flaeche darueber. */
.rl-uc-moment {
position: relative; background: var(--rl-white);
/* 114px, am Entwurf gemessen (graue Flaeche endet 71 px vor der Karte bei
200 dpi). Vorher klebte die Karte mit 36px fast an der Flaeche. */
padding: 114px var(--pad-x) 0;
}
/* Unter der Karte etwas mehr Luft als vorher (72px), aber weniger als die
volle Abschnittshoehe: 96px. */
.rl-uc-moment + .rl-uc-abschnitt > * { padding-top: 96px; }
.rl-uc-moment__karte {
position: relative; overflow: hidden; isolation: isolate;
max-width: var(--uc-rail); margin: 0 auto; border-radius: 12px;
background: var(--uc-bis);
}
.rl-uc-moment__bild {
position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%;
object-fit: cover;
}
.rl-uc-moment__verlauf {
position: absolute; inset: 0; z-index: 1;
background: linear-gradient(100deg, var(--uc-bis) 0%, var(--uc-bis-92) 46%, var(--uc-von-82) 100%);
}
.rl-uc-moment__inhalt {
position: relative; z-index: 2; display: grid;
/* 0,62fr: im Entwurf beginnt das Zitat 543 px von der Kartenkante, bei
0,34fr waren es 396. Damit passen Name und Funktion in eine Zeile, statt
zu brechen. */
grid-template-columns: minmax(0, 0.62fr) minmax(0, 1fr);
gap: 48px; min-height: 460px; padding: 56px 60px;
}
/* Eyebrow oben, Portraet unten: space-between statt zweier Abstandswerte,
damit die Karte bei laengeren Zitaten mitwaechst und das Portraet unten
bleibt. */
.rl-uc-moment__seite {
display: flex; flex-direction: column; justify-content: space-between;
gap: 32px;
}
.rl-uc-moment__person { display: flex; align-items: center; gap: 14px; }
.rl-uc-moment__person img {
display: block; width: 68px; height: 68px; border-radius: 50%;
object-fit: cover; border: 2px solid rgba(255, 255, 255, 0.5);
}
.rl-uc-moment__person strong {
display: block; font-size: 17.5px; font-weight: 500; color: #ffffff;
}
.rl-uc-moment__person span {
display: block; margin-top: 4px; font-size: 14px;
color: rgba(255, 255, 255, 0.82);
}
.rl-uc-moment__haupt {
display: flex; flex-direction: column; justify-content: center;
}
.rl-uc-moment__zitat {
margin: 0; max-width: 27em; font-size: 25px; font-weight: 300;
line-height: 1.34; letter-spacing: -0.018em; color: #ffffff;
text-wrap: pretty;
}
/* 0,86, an gerenderten Pixeln gemessen und nicht geschaetzt: mit 0,80 kamen
die beiden Sales-Faelle (Persian Green, der hellste der fuenf Verlaeufe) auf
4,38 und 4,33:1. Ab 0,83 halten sie 4,5:1, 0,86 ist die Reserve. Gemessen
wurde in der echten Textzone bei ausgeblendeter Schrift, das hellste
Perzentil der Flaeche; die Werte der anderen vier liegen bei 6,2 bis 6,9:1. */
.rl-uc-moment__text {
margin: 24px 0 0; max-width: 36em; font-size: 14px; font-weight: 300;
line-height: 1.62; color: rgba(255, 255, 255, 0.86); text-wrap: pretty;
}
/* ---- Ergebnis -------------------------------------------------------------- */
.rl-uc-ergebnis {
display: grid; grid-template-columns: minmax(0, 1.24fr) minmax(0, 0.76fr);
gap: 56px; align-items: start;
}
/* Hier laeuft der Text breiter als in der Ausgangslage, weil keine Karten
daneben stehen: 668 Pixel im Entwurf, das sind rund 39em. */
.rl-uc-ergebnis .rl-uc-prosa p { max-width: 39em; }
/* Der graue Kasten traegt den O-Ton aus dem Abschnitt "Empfehlung", geprueft
gegen den Interviewtext. Grund #F9FAFE wie die Personenkarte, neutral: ein
Zitat soll nicht nach Fachbereich gefaerbt sein. */
.rl-uc-abschluss {
margin: 36px 0 0; padding: 26px 28px; border-radius: 10px;
border: 1px solid var(--rl-tint-3); background: #F9FAFE;
}
.rl-uc-abschluss__zitat {
margin: 0; max-width: 38em; font-size: 16.5px; font-weight: 300;
line-height: 1.64; color: var(--rl-body); text-wrap: pretty;
}
.rl-uc-abschluss__wer {
margin-top: 13px; font-size: 12px; color: #5F7092;
}
.rl-uc-zahlen { display: flex; flex-direction: column; }
.rl-uc-zahlen__eintrag {
display: flex; flex-direction: column; gap: 5px; padding: 22px 0 22px 20px;
border-left: 1px solid rgba(29, 44, 78, 0.14);
}
/* Ink, nicht Blau: am Entwurf gemessen (#1E2B4E). */
.rl-uc-zahlen__wert {
font-size: 39px; font-weight: 300; line-height: 1; letter-spacing: -0.03em;
color: var(--rl-ink);
}
.rl-uc-zahlen__text {
font-size: 13px; font-weight: 300; line-height: 1.5; color: var(--rl-body);
text-wrap: pretty;
}
/* ---- Weitere Use Cases ----------------------------------------------------
Dieselben Karten wie in der Uebersicht (.rl-uc-karte*), deshalb steht hier
nur der Rahmen: Flaeche, Kopfzeile mit dem Weiterweg, Raster. */
.rl-uc-weitere { position: relative; background: #F4F7FC; }
.rl-uc-weitere__kopf {
display: flex; align-items: baseline; justify-content: space-between;
gap: 24px;
}
.rl-uc-weitere__alle {
flex: 0 0 auto; font-size: 13.5px; letter-spacing: -0.01em; color: #3063C5;
text-decoration: none;
}
.rl-uc-weitere__alle:hover { text-decoration: underline; }
.rl-uc-weitere__raster {
display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px;
margin-top: 40px;
}
/* ---- CTA ------------------------------------------------------------------- */
/* Oben und unten je gut ein Zentimeter: vorher klebte die Karte an der
grauen Flaeche darueber (0px) und hatte 104px zum Fuss. */
.rl-uc-cta-rahmen { background: var(--rl-white); padding: 36px var(--pad-x) 36px; }
.rl-uc-cta {
position: relative; overflow: hidden; isolation: isolate;
max-width: var(--uc-rail); margin: 0 auto; border-radius: 12px;
background: linear-gradient(122deg, var(--uc-bis) 0%, var(--uc-von) 74%, var(--uc-von-hell) 100%);
}
.rl-uc-cta__inhalt {
position: relative; z-index: 2; padding: 64px 56px;
}
.rl-uc-cta__claim {
margin: 18px 0 0; max-width: 26em; font-size: 32px; font-weight: 300;
line-height: 1.2; letter-spacing: -0.024em; color: #ffffff;
text-wrap: pretty;
}
/* Ein Knopf, die Notiz daneben (Entwurf 2g.4). Der Rueckweg zur Uebersicht
steht in der Kopfzeile von "Weitere Use Cases", nicht zweimal. */
.rl-uc-cta__knoepfe {
display: flex; flex-wrap: wrap; align-items: center; gap: 20px;
margin-top: 32px;
}
/* gap statt Leerzeichen im Markup: inline-flex laesst das fuehrende
Leerzeichen des Pfeil-span kollabieren, dann klebt › am Wort. */
.rl-uc-knopf {
display: inline-flex; align-items: center; gap: 7px; padding: 14px 24px 15px;
border-radius: 4px; background: var(--rl-white); font-size: 14px;
letter-spacing: -0.01em; color: var(--rl-ink); text-decoration: none;
}
.rl-uc-knopf:hover { background: #EDF2F8; }
.rl-uc-cta__notiz {
margin: 0; font-size: 12.5px; color: rgba(255, 255, 255, 0.78);
}
/* ---- Der Weg: fuenf Stufen, eine nach der anderen ------------------------
Vorgabe vom 04.09.2026: erst wird der Punkt blau, kurz darauf die Karte
darunter invertiert. Dann geht die Stufe zurueck und die naechste kommt.
Nach der fuenften zieht sich die Linie zurueck, und es beginnt von neuem.
EIN TAKT, FUENF VERSATZE. Alle Stufen tragen dieselben Keyframes mit einer
Periode von 20 Sekunden und einem Versatz von 3 Sekunden je Stufe
(animation-delay ueber --i). Damit ist immer genau eine Stufe aktiv, und
die letzten 5 Sekunden bleiben frei: dort zieht die Linie zurueck.
Reines CSS, kein Skript. Der Vertrag von relaunch-motion.js ist "bewegt
nur, baut nichts auf", und eine Animation ohne JavaScript ist die
robustere.
Die Textfarben laufen ueber Custom Properties, weil Keyframes keine
Kindelemente ansprechen koennen. Ohne @property springen sie hart, mit
@property werden sie weich uebergeblendet; beides sieht richtig aus.
Eigener Keyframe fuer die Linie: "fuellen" gibt es schon und wird von
relaunch/intelligence/market-intelligence/ und .../okr-management/
benutzt. Derselbe Name haette dort die Darstellung veraendert. */
/* inherits: true ist hier Pflicht, nicht Geschmack: Titel und Text sind
Kinder der Karte, und nur ein erbender Wert erreicht sie. Mit
inherits: false sahen sie den initial-value, also dunklen Text auf blauem
Grund. */
@property --wt {
syntax: ""; inherits: true; initial-value: #1D2C4E;
}
@property --wx {
syntax: ""; inherits: true; initial-value: #56698A;
}
/* Der Kopf traegt Ueberschrift und Hinweis nebeneinander. Der Hinweis
schrumpft nicht, deshalb bricht die Zeile auf schmalen Schirmen um; vorher
verdeckte ein overflow: hidden auf der Section den Ueberlauf (gemessen 205
Pixel bei 390 Pixeln Breite). */
.rl-weg__kopf {
display: flex; align-items: flex-end; justify-content: space-between; gap: 56px;
}
.rl-weg__kopf > span { flex: 0 0 auto; }
.rl-weg { position: relative; margin-top: 56px; --takt: 20s; --schritt: 3s; }
/* Grundbahn und Fuellstand liegen auf Hoehe der Punktmitte (44px / 2 = 22). */
.rl-weg__bahn {
position: absolute; z-index: 0; left: 22px; right: 22px; top: 21px;
height: 2px; background: #DCE7F3;
}
.rl-weg__linie {
position: absolute; z-index: 0; left: 22px; right: 22px; top: 21px;
height: 2px; transform-origin: left; transform: scaleX(0.08);
background: linear-gradient(90deg, #3063C5, #4A90E2, #2E9E96);
animation: wegLinie var(--takt) cubic-bezier(0.22, 1, 0.36, 1) infinite;
}
.rl-weg__raster {
position: relative; display: grid; grid-template-columns: repeat(5, 1fr);
gap: 20px;
}
.rl-weg__stufe { position: relative; display: flex; flex-direction: column; }
.rl-weg__punkt {
position: relative; z-index: 2;
display: inline-flex; align-items: center; justify-content: center;
width: 44px; height: 44px; border-radius: 50%; box-sizing: border-box;
border: 1px solid #C6E0F7; background: #ffffff;
font-family: ui-monospace, "SF Mono", Menlo, monospace;
font-size: 13px; letter-spacing: 0.04em; color: #56698A;
animation: wegPunkt var(--takt) ease-in-out infinite;
animation-delay: calc(var(--i) * var(--schritt));
}
.rl-weg__stiel {
position: absolute; z-index: 1; left: 21px; top: 44px;
width: 1px; height: 34px; background: #C6E0F7;
}
.rl-weg__karte {
display: flex; flex-direction: column; gap: 10px; flex: 1;
margin-top: 34px; padding: 26px 24px 28px; box-sizing: border-box;
border: 1px solid #E4EBF3; border-radius: 8px; background: #ffffff;
box-shadow: 0 1px 2px rgba(29, 44, 78, 0.04), 0 16px 36px -22px rgba(41, 70, 127, 0.24);
--wt: #1D2C4E; --wx: #56698A;
animation: wegKarte var(--takt) ease-in-out infinite;
animation-delay: calc(var(--i) * var(--schritt));
}
.rl-weg__titel {
font-size: 17.5px; font-weight: 500; letter-spacing: -0.015em; color: var(--wt);
}
.rl-weg__text {
font-size: 13.5px; line-height: 1.55; letter-spacing: -0.01em;
color: var(--wx); text-wrap: pretty;
}
/* 20 Sekunden Takt: 1 % ist 0,2 s. Die Uebergaenge dauern bewusst eine
Sekunde (Vorgabe vom 04.09.2026): weiss und blau sollen ineinander laufen,
nicht umschalten. Der Punkt blendet von 0,2 bis 1,2 s auf, haelt bis 2,6 s
und blendet bis 3,6 s ab; die Karte zieht 0,8 s spaeter nach. Weil die
Nachbarstufe bei 3 s beginnt, ueberlappen Ab- und Aufblenden leicht, und
genau das laesst es fliessen.
ease-in-out gilt je Keyframe-Abschnitt, deshalb bremsen die Uebergaenge an
beiden Enden ab. Die Textfarben laufen ueber die mit @property
registrierten Custom Properties und werden dadurch mitinterpoliert. */
@keyframes wegPunkt {
0%, 1% { border-color: #C6E0F7; background: #ffffff; color: #56698A; box-shadow: 0 0 0 0 rgba(48, 99, 197, 0); }
6%, 13% {
border-color: #3063C5; background: #3063C5; color: #ffffff;
box-shadow: 0 0 0 6px rgba(48, 99, 197, 0.14);
}
18%, 100% { border-color: #C6E0F7; background: #ffffff; color: #56698A; box-shadow: 0 0 0 0 rgba(48, 99, 197, 0); }
}
@keyframes wegKarte {
0%, 4% {
border-color: #E4EBF3; background: #ffffff; --wt: #1D2C4E; --wx: #56698A;
}
9%, 14% {
border-color: #2D51A0; background: #2D51A0;
--wt: #ffffff; --wx: rgba(255, 255, 255, 0.86);
}
19%, 100% {
border-color: #E4EBF3; background: #ffffff; --wt: #1D2C4E; --wx: #56698A;
}
}
/* Die Linie fuellt bis zur fuenften Stufe (72 % sind 14,4 s) und zieht sich
danach zurueck, bevor der Takt neu beginnt. */
@keyframes wegLinie {
0% { transform: scaleX(0.08); }
72%, 80% { transform: scaleX(1); }
96%, 100% { transform: scaleX(0.08); }
}
@media (prefers-reduced-motion: reduce) {
/* Ohne Bewegung steht die erste Stufe und die Linie ist gefuellt: derselbe
Informationsgehalt, nur ohne Lauf. */
.rl-weg__punkt, .rl-weg__karte, .rl-weg__linie { animation: none; }
.rl-weg__linie { transform: scaleX(1); }
.rl-weg__stufe[style*="--i: 0"] .rl-weg__punkt {
border-color: #3063C5; background: #3063C5; color: #ffffff;
}
.rl-weg__stufe[style*="--i: 0"] .rl-weg__karte {
border-color: #2D51A0; background: #2D51A0;
--wt: #ffffff; --wx: rgba(255, 255, 255, 0.86);
}
}
@media (max-width: 1000px) {
.rl-weg__kopf { flex-direction: column; align-items: flex-start; gap: 20px; }
.rl-weg__kopf > span { margin-bottom: 0; }
.rl-weg__raster { grid-template-columns: repeat(2, 1fr); gap: 28px 20px; }
.rl-weg__bahn, .rl-weg__linie { display: none; }
.rl-weg__stiel { display: none; }
.rl-weg__karte { margin-top: 18px; }
}
@media (max-width: 640px) {
.rl-weg__raster { grid-template-columns: minmax(0, 1fr); }
}
/* ---- Uebersicht: Filterleiste und zwoelf Karten ---------------------------
Der Block wird erzeugt (relaunch-usecases.mjs) und in die Handseite
eingesetzt; die Klassen stehen deshalb hier, nicht inline.
Gleich grosse Karten, kein Bento-Raster: sobald der Filter ausblendet,
reisst ein Raster mit unterschiedlichen Kachelgroessen Loecher.
Fotoraster nach der Vorgabe vom 04.09.2026: jede Karte zeigt ein Foto,
fuenf davon zusaetzlich eine weisse Logo-Kachel mittig. Die
Fachbereichsflaeche mit weissem Logo, die Pillen auf dem Bild und der
Schleier sind entfallen; Status und Projektkennzeichnung stehen jetzt im
Text (Anriss-Schlusswort und Eyebrow). */
/* Die Leiste sitzt als Gruppe auf einer hellen Flaeche, die Chips darin sind
weiss mit Rand, der aktive tiefblau (Vorgabe vom 04.09.2026). Vorher waren
es freistehende Pillen mit Zaehlung. */
.rl-uc-filter {
display: flex; flex-wrap: wrap; justify-content: center; gap: 6px;
width: fit-content; max-width: 100%; margin: 34px auto 0;
padding: 7px; border-radius: 12px; background: #F4F7FB;
}
.rl-uc-chip {
display: inline-flex; align-items: center; padding: 9px 16px;
border: 1px solid #E4EBF3; border-radius: 8px;
background: var(--rl-white); font: inherit; font-size: 13.5px;
letter-spacing: -0.01em; color: var(--rl-body); cursor: pointer;
transition: border-color 0.2s ease, color 0.2s ease;
}
.rl-uc-chip:hover { border-color: #B6C7DD; color: var(--rl-ink); }
.rl-uc-chip[aria-pressed="true"] {
border-color: var(--rl-ink); background: var(--rl-ink); color: #ffffff;
}
.rl-uc-chip:focus-visible { outline: 2px solid #3063C5; outline-offset: 2px; }
.rl-uc-raster {
display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 56px 30px; margin-top: 44px;
}
/* Karte ohne Rahmen und ohne Flaeche: Bild und Text stehen frei auf Weiss,
wie in der Vorgabe. Der Text liegt unter dem Bild, deshalb braucht das Foto
keinen Kontrastschutz. */
.rl-uc-karte {
display: flex; flex-direction: column; gap: 8px; text-decoration: none;
}
.rl-uc-karte__medium {
position: relative; display: block; aspect-ratio: 3 / 2; overflow: hidden;
border-radius: 6px; margin-bottom: 6px;
}
.rl-uc-karte__foto {
position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
transition: transform 480ms cubic-bezier(0.22, 1, 0.36, 1);
}
/* Hover-Zoom (Entwurf 2g.4). Nur auf den verlinkten Karten: die sechs ohne
Unterseite sind div und duerfen nicht so tun, als fuehrten sie irgendwohin. */
a.rl-uc-karte:hover .rl-uc-karte__foto { transform: scale(1.045); }
@media (prefers-reduced-motion: reduce) {
.rl-uc-karte__foto { transition: none; }
a.rl-uc-karte:hover .rl-uc-karte__foto { transform: none; }
}
/* Die Kachel traegt das farbige Logo. Sie ist zu 10 Prozent durchscheinend
(Vorgabe vom 04.09.2026, bewusst abweichend von der Design-Vorlage): das
Foto schimmert durch, die Kachel wirkt dadurch leichter. Fuer den Kontrast
ist das unkritisch, ein Logo ist kein Text im Sinne der Richtlinie, und
0,9 Weiss traegt die Marken weiter deutlich. */
.rl-uc-karte__kachel {
position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
display: flex; align-items: center; justify-content: center;
width: 44%; min-height: 62px; padding: 14px 18px; box-sizing: border-box;
border-radius: 10px; background: rgba(255, 255, 255, 0.9);
box-shadow: 0 6px 22px rgba(16, 26, 48, 0.14);
}
.rl-uc-karte__kachellogo {
display: block; width: 100%; height: auto; max-height: 34px;
object-fit: contain;
}
.rl-uc-karte__branche {
/* Alle drei Textrollen der Karte sind an der Vorgabe nachgemessen
(600 dpi, Rail 2236 px gegen 1200 px im Web, Faktor 0,53667). Die
Rubrik trifft in der Groesse schon (Wortstrecken Faktor 0,994), nur
die Farbe war zu hell: gemessen steht dort #3066C8, also das
Marken-Blau #3063C5 (5,65:1 statt 5,25:1). */
font-size: 11px; font-weight: 500; letter-spacing: 0.07em;
text-transform: uppercase; color: #3063C5;
}
.rl-uc-karte__titel {
/* Wortstrecken „Morgen", „Quelle", „Datum": Faktor 1,192 auf 18px, also
21,5px. Zeilenabstand der Vorgabe 52 px = 27,9 px im Web, das ist
line-height 1,3. Die Farbe ist der dunkelste gemessene Wert #1C2A4D,
praktisch --rl-ink: der Titel ist in der Vorgabe schwarz, nicht blau
(13,8:1 statt 5,65:1). Dass die Karte ein Link ist, tragen jetzt die
Zeile „Case Study lesen" und die Unterstreichung beim Ueberfahren. */
font-size: 21.5px; font-weight: 400; line-height: 1.3;
letter-spacing: -0.016em; color: var(--rl-ink); text-wrap: pretty;
}
.rl-uc-karte__anriss {
/* Faktor 1,111 aus drei Wortstrecken, in zwei Runden nachgezogen, bestaetigt vom Zeilenabstand
(43,7 px = 23,45 px im Web, bei 1,56 sind es 23,4). Das frueh
angegebene font-weight 300 war wirkungslos, Inter Tight liegt nur in
400/500/600 vor; jetzt steht da, was gerendert wird. Die Farbe bleibt
--rl-body: die Vorgabe ist hier mit 5,63:1 heller als unsere 8,95:1,
und heller wollen wir nicht werden. */
font-size: 15px; font-weight: 400; line-height: 1.56;
letter-spacing: -0.009em; color: var(--rl-body); text-wrap: pretty;
}
.rl-uc-karte__mehr {
display: inline-flex; align-items: center; gap: 6px; margin-top: 3px;
font-size: 15px; letter-spacing: -0.01em; color: #3063C5;
}
a.rl-uc-karte:hover .rl-uc-karte__titel {
text-decoration: underline; text-decoration-thickness: 1px;
text-underline-offset: 3px;
}
a.rl-uc-karte:hover .rl-uc-karte__mehr { text-decoration: underline; }
a.rl-uc-karte:focus-visible { outline: 2px solid #3063C5; outline-offset: 3px; }
@media (max-width: 1000px) {
.rl-uc-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 24px; }
}
@media (max-width: 640px) {
.rl-uc-raster { grid-template-columns: minmax(0, 1fr); gap: 36px; }
.rl-uc-karte__kachel { width: 52%; }
}
/* ---- Schmale Schirme ------------------------------------------------------- */
@media (max-width: 1000px) {
.rl-uc-banner__inhalt, .rl-uc-zweispalt, .rl-uc-ergebnis,
.rl-uc-loesung__oben, .rl-uc-moment__inhalt {
grid-template-columns: minmax(0, 1fr); gap: 36px;
}
.rl-uc-moment { padding-top: 64px; }
.rl-uc-moment + .rl-uc-abschnitt > * { padding-top: 64px; }
.rl-uc-banner__inhalt { min-height: 0; padding-bottom: 120px; }
.rl-uc-schritte, .rl-uc-weitere__raster {
grid-template-columns: minmax(0, 1fr);
}
/* Hochformat quer: schmal steht das Bild ueber dem Text, 4:5 wuerde die
halbe Seite fuellen. */
.rl-uc-lbild img { aspect-ratio: 16 / 10; }
.rl-uc-banner__h1 { font-size: 36px; }
.rl-uc .rl-uc-h2 { font-size: 30px; }
.rl-uc-moment__inhalt { min-height: 0; padding: 40px 30px; }
.rl-uc-moment__zitat { font-size: 21px; }
.rl-uc-cta__inhalt { padding: 40px 30px; }
.rl-uc-abschnitt > *, .rl-uc-loesung__inhalt, .rl-uc-weitere__inhalt { padding: 64px var(--pad-x); }
}
/* ---- Laufbaender in den Fachbereichs-Panels -------------------------------
Vertikale Endlosbaender mit je fuenf Aussagen, dreifach hintereinander; der
Keyframe schiebt um genau ein Drittel, deshalb laeuft es ohne Sprung. Dauer
und Phasenversatz stehen inline je Band, damit die vier nicht im Gleichschritt
laufen.
Die Deckkraefte von Satz und Rolle sind unten gemessen und stehen nicht auf
den Entwurfswerten (0,88 und 0,55): das Band liegt auf dem Panelbild, und
dort tragen sie nicht.
Bei prefers-reduced-motion steht das Band. */
.rl-lauf {
position: relative; align-self: center; width: 100%; height: 620px;
overflow: hidden;
-webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
mask-image: linear-gradient(180deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
}
.rl-lauf__band {
display: flex; flex-direction: column; width: 380px; margin: 0 auto;
animation-name: rlLauf; animation-timing-function: linear;
animation-iteration-count: infinite;
}
.rl-lauf__karte {
margin-bottom: 16px; padding: 18px 22px; border-radius: 10px;
border: 1px solid rgba(255, 255, 255, 0.25);
/* Glasoptik des Entwurfs. Die dunkle Fassung (0,72) aus dem letzten Paket
war eine Kontrast-Absicherung gegen die damals sehr schwachen
Panelschleier: das Foto schien durch, weisser Text kam auf 2,76:1. Seit
die Panels den kraeftigen Fachbereichsverlauf des Entwurfs tragen (0,93
bis 0,70), ist der Grund dunkel und gleichmaessig, und die Glaskarte
traegt. Nachgemessen am gerenderten Bild, nicht geschaetzt. */
background: rgba(255, 255, 255, 0.1);
-webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
box-sizing: border-box;
}
.rl-lauf__satz {
margin: 0; font-size: 13px; font-weight: 300; line-height: 1.55;
letter-spacing: -0.01em; color: rgba(255, 255, 255, 0.88); text-wrap: pretty;
}
.rl-lauf__rolle {
margin: 10px 0 0; font-size: 11px; letter-spacing: 0.03em;
color: rgba(255, 255, 255, 0.55);
}
@keyframes rlLauf {
from { transform: translateY(-33.3333%); }
to { transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
.rl-lauf__band { animation: none !important; }
}
@media (max-width: 1000px) {
/* Ein Band neben dem Inhalt braucht Breite. Darunter faellt es weg: es
traegt keine Information, die nicht auch im Panel-Text steht. */
.rl-lauf { display: none; }
}
/* ---- Video und Kartenstapel auf der Landingpage ---------------------------
Fuenf Karten, die sich beim Scrollen uebereinander schieben, waehrend der
Videobereich nach oben aus dem Bild wandert. Vorbild sind die beiden
Mitschnitte aus dem Handoff, Einzelbild fuer Einzelbild ausgemessen.
DAS VIDEO LAEUFT MIT, NUR DIE KARTEN KLEBEN. Gemessen wurde die
Verschiebung des Videobildes von Bild zu Bild: in der ersten Fassung stand
es still (+4 px Rauschen ueber 25 Bilder), waehrend sich die Karten
stapelten, und setzte sich erst danach in Bewegung. Im Vorbild wandert es
die ganze Zeit (-8 bis -156 px je Bild). Ursache war eine Buehne mit
position: sticky und height: 100vh, ueber die sich der Inhalt mit
margin-top: -100vh legte. Beides ist weg: Video, Schleier und Gitter
fuellen jetzt den ganzen Abschnitt (inset: 0) und wandern mit ihm.
ROLLIERENDES DECK, KEIN TREPPENSTAPEL. Alle Karten kleben auf DEMSELBEN
top. Die nachfolgende deckt die vorige damit vollstaendig zu, statt sie
treppenartig sichtbar zu lassen. Voraussetzung ist die gemeinsame
Kartenhoehe --kh: unter einer flacheren Nachfolgerkarte schaute sonst ein
Streifen der vorigen hervor.
STATISCH IST DER GRUNDZUSTAND. Die Karten stehen untereinander, der Puffer
ist 0, das Video ist ein normaler Hintergrund. Der Stapel liegt in EINER
Media-Query; damit sind schmale Schirme, flache Fenster (auch Browser-Zoom)
und prefers-reduced-motion mit einem Mechanismus abgedeckt.
Der Puffer liegt INNERHALB der Kartenliste und gibt der letzten Karte ihre
Standzeit. Ohne ihn klebt sie gar nicht: ein Sticky-Element darf nicht
unter die Unterkante der CONTENT-Box seines Elternteils ragen, und Padding
zaehlt dort nicht mit, deshalb ist es ein Element.
Kein z-index im Inneren: sticky erzeugt ohnehin einen Stacking-Context, und
positionierte Geschwister malen in DOM-Reihenfolge. Damit liegt Karte 5
ueber Karte 4, ohne dass ein Wert das steuert. */
.rl-stapel {
position: relative; isolation: isolate; background: #14213C;
--kh: 308px; /* gemeinsame Kartenhoehe, an der hoechsten Karte gemessen */
--pin: calc(var(--rl-nav-h) + 32px);
}
.rl-stapel__video {
position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.rl-stapel__schleier {
position: absolute; inset: 0;
/* Werte des Entwurfs. Das Video bleibt damit klar sichtbar, wie im Vorbild;
die weisse H2 traegt ueber ihren Schatten, nachgemessen am Bild. */
background: linear-gradient(112deg, rgba(20, 33, 60, 0.42) 0%, rgba(29, 44, 78, 0.28) 50%, rgba(45, 81, 160, 0.16) 100%);
}
.rl-stapel__gitter {
position: absolute; inset: 0; width: 100%; height: 100%;
opacity: 0.55; pointer-events: none;
}
.rl-stapel__inhalt { position: relative; }
.rl-stapel__h2 {
margin: 0 auto; max-width: 20em;
padding: calc(var(--rl-nav-h) + 40px) var(--pad-x) 44px;
text-align: center; font-size: 40px; font-weight: 300; line-height: 1.16;
letter-spacing: -0.025em; color: #ffffff; text-wrap: pretty;
text-shadow: 0 2px 24px rgba(16, 26, 48, 0.35);
}
.rl-stapel__karten {
position: relative; max-width: 720px; margin: 0 auto;
padding: 0 var(--pad-x) 64px; box-sizing: border-box;
}
.rl-stapel__karte {
display: flex; flex-direction: column; min-height: var(--kh);
padding: 28px 36px 26px; border-radius: 12px; background: #ffffff;
box-shadow: 0 18px 50px rgba(16, 26, 48, 0.22); box-sizing: border-box;
}
.rl-stapel__karte + .rl-stapel__karte { margin-top: 32px; }
.rl-stapel__puffer { display: block; height: 0; }
.rl-stapel__logo {
/* align-self, sonst streckt die Flex-Spalte den Kasten auf die volle Breite
(align-items: stretch ist der Standard), max-width: 300px begrenzt ihn,
und object-fit: contain zentriert das Logo darin. Gemessen waren das rund
70 Pixel Einzug gegenueber der Textkante. */
align-self: flex-start;
display: block; width: auto; max-width: 300px; object-fit: contain;
margin-bottom: 26px;
}
.rl-stapel__satz {
margin: 0; font-size: 17px; font-weight: 300; line-height: 1.5;
letter-spacing: -0.014em; color: var(--rl-ink); text-wrap: pretty;
}
.rl-stapel__name {
margin: 34px 0 0; font-size: 14px; font-weight: 500; color: var(--rl-ink);
}
.rl-stapel__rolle {
margin: 9px 0 0; font-size: 13px; font-weight: 300; color: var(--rl-body);
}
@media (min-width: 760px) and (min-height: 660px) and (prefers-reduced-motion: no-preference) {
.rl-stapel__karte { position: sticky; top: var(--pin); }
/* Wie viel Videoflaeche unter der letzten Karte stehen bleibt, ist genau
padding-bottom plus Puffer. Mit 47vh waren es 437 Pixel, die man erst
durchscrollen musste; im Vorbild sind es rund 114. Deshalb 24px Polster
und 10vh Puffer: die Summe trifft den Wert, und die 10vh geben dem
fertigen Stapel noch einen kurzen Moment, bevor der Abschnitt weiterzieht.
Ergaenzung 13.2.1 (Standzeit 40vh) ist damit ueberholt, Entscheidung vom
04.09.2026. */
.rl-stapel__karten { padding-bottom: 24px; }
.rl-stapel__puffer { height: 10vh; }
}
@media (prefers-reduced-motion: reduce) {
/* Autoplay laesst sich per CSS nicht anhalten, deshalb wird das Video
versteckt und das Poster steht. preload="metadata" heisst, dass dann
nur Kopfdaten geladen sind. */
.rl-stapel__video { display: none; }
.rl-stapel {
background-image: url("assets/relaunch/video/hafen-terminal-poster.webp");
background-size: cover; background-position: 50% 50%;
}
}
@media (max-width: 1000px) {
.rl-stapel__h2 { font-size: 30px; padding-bottom: 40px; }
.rl-stapel__karte { padding: 26px 28px 24px; min-height: 0; }
.rl-stapel__satz { font-size: 16.5px; }
}
/* ---- Abschluss-CTA --------------------------------------------------------
Helle, zentrierte Flaeche nach dem Entwurf (Z. 1222 bis 1235). Ersetzt das
tiefblaue Band aus dem letzten Paket; damit stimmt die Seite wieder mit
produktcluster.md zusammen, das das vollflaechige Band als "wird nicht
uebernommen" fuehrt. */
.rl-cta {
position: relative; z-index: 2; max-width: var(--rail); margin: 0 auto;
padding: 140px var(--pad-x) 150px; box-sizing: border-box;
display: flex; flex-direction: column; align-items: center; text-align: center;
background: #ffffff;
}
.rl-cta__satz {
margin: 0; max-width: 20em; font-size: 34px; font-weight: 300;
line-height: 1.18; letter-spacing: -0.024em; color: var(--rl-ink);
text-wrap: pretty;
}
.rl-cta__satz span { color: #3063C5; }
.rl-cta__text {
margin: 20px 0 0; max-width: 32em; font-size: 16px; font-weight: 300;
line-height: 1.62; letter-spacing: -0.01em; color: var(--rl-body);
text-wrap: pretty;
}
.rl-cta__knoepfe { display: flex; align-items: center; gap: 18px; margin-top: 34px; }
.rl-cta__voll, .rl-cta__umriss {
display: inline-flex; align-items: center; gap: 8px; padding: 14px 26px;
border-radius: 6px; font-size: 15px; letter-spacing: -0.012em;
white-space: nowrap; text-decoration: none;
}
.rl-cta__voll { background: #3063C5; color: #ffffff; border: 1px solid #3063C5; }
.rl-cta__umriss { border: 1px solid #B9CCE8; background: #ffffff; color: var(--rl-ink); }
.rl-cta__logos { display: flex; align-items: center; gap: 44px; margin-top: 54px; }
.rl-cta__logos img { display: block; width: auto; object-fit: contain; }
@media (max-width: 1000px) {
.rl-cta { padding: 96px var(--pad-x) 104px; }
.rl-cta__satz { font-size: 28px; }
.rl-cta__logos { gap: 28px; flex-wrap: wrap; justify-content: center; }
}
@media (max-width: 640px) {
.rl-cta__knoepfe { flex-direction: column; align-items: stretch; width: 100%; }
.rl-cta__voll, .rl-cta__umriss { justify-content: center; }
}
/* ---- Partnerbahn ----------------------------------------------------------
Neun Karten in einer Bahn statt im 3x3-Raster (Entwurf Z. 975 bis 1105).
Die Bahn laeuft rechts bewusst aus der Rail: die angeschnittene Karte zeigt,
dass es weitergeht.
Ohne Skript steht die Bahn und laesst sich schieben (overflow-x: auto). Die
Pfeilknoepfe blendet relaunch-motion.js ein, sobald es sie bedienen kann;
ein Knopf, der nichts tut, waere schlechter als keiner. */
.rl-pslider { position: relative; margin-top: 48px; }
.rl-pslider__knoepfe {
display: none; justify-content: flex-end; gap: 10px; margin-bottom: 20px;
}
.rl-pslider[data-pslider-bereit] .rl-pslider__knoepfe { display: flex; }
.rl-pslider__knoepfe button {
display: inline-flex; align-items: center; justify-content: center;
width: 42px; height: 42px; border-radius: 50%; border: 1px solid #D5DEEA;
background: #ffffff; color: var(--rl-ink); font-size: 18px; cursor: pointer;
transition: background 0.2s ease, border-color 0.2s ease;
}
.rl-pslider__knoepfe button:hover { background: #F1F7FD; border-color: #9ECCF2; }
.rl-pslider__knoepfe button[disabled] { opacity: 0.38; cursor: default; }
.rl-pslider__knoepfe button[disabled]:hover { background: #ffffff; border-color: #D5DEEA; }
.rl-pslider__fenster {
/* Die Bahn laeuft bis zum rechten Bildschirmrand, nicht nur bis zur Rail.
Den Abstand dorthin misst relaunch-motion.js und setzt ihn als
--rl-pslider-rand; vw waere falsch, weil es die Bildlaufleiste
mitrechnet und die Seite seitlich auslaufen liesse. Ohne Skript bleibt
der Wert 0 und die Bahn endet an der Rail: ein sauberer Rueckfall. */
margin-right: calc(-1 * var(--rl-pslider-rand, 0px));
overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
}
.rl-pslider__fenster::-webkit-scrollbar { display: none; }
.rl-pslider[data-pslider-bereit] .rl-pslider__fenster { overflow-x: hidden; }
.rl-pslider__bahn {
display: flex; gap: 24px; width: max-content;
will-change: transform;
transition: transform 0.75s cubic-bezier(0.33, 1, 0.68, 1);
}
@media (prefers-reduced-motion: reduce) {
.rl-pslider__bahn { transition: none; }
}
/* ---- MCP-Statement --------------------------------------------------------
Kompakter Block auf hellgrauer Flaeche: links Pille und zweifarbiger Text,
rechts die Anwendungen und ein Knopf. Ersetzt das grosse Diagramm des
Bestands (Entscheidung 04.09.2026, Entwurf Z. 921 bis 934). */
.rl-mcp {
position: relative; z-index: 2; margin-top: var(--rl-py-128); background: #F3F6FB;
border-top: 1px solid #E4EBF3; border-bottom: 1px solid #E4EBF3;
}
.rl-mcp__raster {
display: flex; align-items: center; justify-content: space-between; gap: 56px;
max-width: var(--rail); margin: 0 auto; padding: 110px var(--pad-x);
box-sizing: border-box;
}
.rl-mcp__raster > div:first-child { max-width: 34em; }
.rl-mcp__pille {
/* Block, nicht inline: die Ueberschrift steht darunter, nicht dahinter.
inline-flex liesse sie in dieselbe Zeile fliessen, weil .rl-mcp__satz
bewusst inline ist. */
display: flex; width: fit-content; align-items: center; gap: 9px;
padding: 6px 13px 6px 8px; margin-bottom: 18px;
border: 1px solid #DFEDFA; border-radius: 200px; background: #ffffff;
}
.rl-mcp__pille i {
display: inline-flex; align-items: center; justify-content: center;
width: 17px; height: 17px; border-radius: 50%; background: #3063C5;
}
.rl-mcp__pille i img { display: block; width: 9px; height: 9px; object-fit: contain; }
.rl-mcp__pille > span {
font-size: 10.5px; letter-spacing: 0.11em; text-transform: uppercase; color: #3063C5;
}
/* Ueberschrift und Fortsetzung stehen fliessend hintereinander wie im
Entwurf, bleiben aber zwei Elemente: die Gliederungsebene der Seite haengt
an der h2. */
.rl-mcp__satz {
display: inline; margin: 0; font-size: 22px; font-weight: 300;
line-height: 1.36; letter-spacing: -0.016em; color: var(--rl-ink);
text-wrap: pretty;
}
.rl-mcp__weiter {
display: inline; margin: 0; font-size: 22px; font-weight: 300;
line-height: 1.36; letter-spacing: -0.016em; color: #6791D4; text-wrap: pretty;
}
.rl-mcp__seite {
display: flex; flex-direction: column; align-items: flex-end; gap: 16px;
flex: 0 0 auto;
}
.rl-mcp__apps {
display: flex; align-items: center; gap: 26px; padding: 20px 28px;
border: 1px solid #EDF2F8; border-radius: 10px; background: #ffffff;
}
.rl-mcp__apps img { display: block; width: 38px; height: 38px; object-fit: contain; }
.rl-mcp__knopf {
display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px;
border-radius: 6px; border: 1px solid #B9CCE8; background: #ffffff;
font-size: 14px; letter-spacing: -0.012em; color: var(--rl-ink);
white-space: nowrap; text-decoration: none;
}
@media (max-width: 1000px) {
.rl-mcp__raster {
flex-direction: column; align-items: flex-start; gap: 36px;
padding: 72px var(--pad-x);
}
.rl-mcp__seite { align-items: flex-start; }
.rl-mcp__apps { gap: 18px; padding: 16px 20px; }
.rl-mcp__apps img { width: 30px; height: 30px; }
.rl-mcp__satz, .rl-mcp__weiter { font-size: 19px; }
}
@media (max-width: 640px) {
.rl-mcp__apps { flex-wrap: wrap; gap: 16px; }
}
/* ---- Kennzahlen "Die Arbeit wird nicht weniger" ---------------------------
Raster des Entwurfs: Ueberschrift links, drei Zahlenzeilen rechts. Die
Werte stehen hier und nicht inline, weil die feste Zahlenspalte
Breakpoints braucht: mit 240px lief die Seite bei 390px 241 Pixel
seitlich aus (gemessen). */
.rl-kz {
display: grid; grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr);
gap: 72px; align-items: start;
}
.rl-kz__zeile {
display: grid; grid-template-columns: 240px minmax(0, 1fr);
align-items: center; gap: 48px; padding: 15px 0;
border-bottom: 1px solid #EDF2F8;
}
.rl-kz__zeile:last-child { border-bottom: 0; }
.rl-kz__zahl { margin: 0; display: flex; align-items: baseline; gap: 8px; }
.rl-kz__zahl strong {
font-size: 76px; font-weight: 300; letter-spacing: -0.032em;
line-height: 0.92; color: var(--rl-ink);
}
.rl-kz__einheit {
font-size: 21px; font-weight: 300; letter-spacing: -0.02em; color: #3063C5;
}
.rl-kz__text {
margin: 0; max-width: 26em; font-size: 17px; font-weight: 300;
line-height: 1.55; letter-spacing: -0.012em; color: var(--rl-body);
text-wrap: pretty;
}
@media (max-width: 1000px) {
.rl-kz { grid-template-columns: minmax(0, 1fr); gap: 40px; }
.rl-kz__zeile { grid-template-columns: 170px minmax(0, 1fr); gap: 28px; }
.rl-kz__zahl strong { font-size: 60px; }
}
@media (max-width: 640px) {
/* Zahl ueber den Text stellen: nebeneinander bleibt keine Zeile lesbar. */
.rl-kz__zeile { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 18px 0; }
.rl-kz__zahl strong { font-size: 52px; }
.rl-kz__text { font-size: 16px; }
}
/* ---- Glaseffekt der Segmentkarten, lesbar gemacht -------------------------
Die Hover-Regeln der Relaunch-Seiten kommen aus den Mockups und stehen
weiter unten im Portier-Bereich. Zwei Dinge stimmten dort nicht:
1. Sie wirkten gar nicht. Die Mockup-Elemente tragen Flaeche, Rand und
Farben inline, und inline schlaegt jede Klassenregel. Behoben in
port.py (schreibt jetzt !important) und im Portier-Block.
2. Die Flaeche des Entwurfs (0,13 weiss) hellt auf. Ueber den beiden hellen
Fachbereichsverlaeufen kam weisser Kleintext damit auf 3,59:1 (Sales)
und 3,30:1 (Strategy), gefordert sind 4,5:1. Gemessen an gerenderten
Pixeln in allen vier Panels.
Deshalb toent diese Regel das Glas leicht, statt es aufzuhellen: derselbe
Effekt (Karte wird durchscheinend, Text weiss), aber der Grund unter dem
Text wird dunkler statt heller. Nachgemessen ueber allen vier Verlaeufen:
5,59:1 im schlechtesten Fall (Strategy), 10,07:1 im besten (Market).
Der Selektor traegt bewusst das Element (a.rl-hv4 statt .rl-hv4): so
gewinnt er gegen die Portier-Regel, ohne dass die geaendert werden muss,
und ueberlebt den naechsten Portierlauf. */
a.rl-hv4:hover { background: rgba(10, 26, 40, 0.24) !important; }
/* ---- Umschalter "Ein AI-Mitarbeiter arbeitet wie eine zusaetzliche Kraft" ---
Drei Ebenen (autonome Arbeit, Dashboard, Chat) auf einer tiefblauen Flaeche.
Aus dem Design-Entwurf uebernommen (04.09.2026), Mechanik unveraendert:
die Folien rotieren per Keyframe im 36-Sekunden-Takt, ein Klick auf eine
Beschriftung friert die zugehoerige Folie ein. Kein Skript.
Warum reines CSS: der Vertrag von relaunch-motion.js ist "bewegt nur, baut
nichts auf". Die Radios stehen vor dem Folien-Container, deshalb greifen die
:checked-Regeln ueber den Geschwisterselektor.
Die Radar-Keyframes heissen aiRingPuls und aiRadarDreh, nicht sonarRing und
sonarDreh: die gibt es schon, mit anderen Werten, und sie werden von
relaunch/intelligence/competitive-intelligence/ und .../risk-intelligence/
benutzt. Gleiche Namen haetten die dortige Darstellung veraendert. */
@keyframes aiSl1 { 0%, 2% { opacity: 0; } 5%, 30% { opacity: 1; } 33%, 100% { opacity: 0; } }
@keyframes aiSl2 { 0%, 35% { opacity: 0; } 38%, 63% { opacity: 1; } 66%, 100% { opacity: 0; } }
@keyframes aiSl3 { 0%, 68% { opacity: 0; } 71%, 96% { opacity: 1; } 99%, 100% { opacity: 0; } }
@keyframes aiLb1 { 0%, 2% { color: #5A6B85; } 5%, 30% { color: #1D2C4E; } 33%, 100% { color: #5A6B85; } }
@keyframes aiLb2 { 0%, 35% { color: #5A6B85; } 38%, 63% { color: #1D2C4E; } 66%, 100% { color: #5A6B85; } }
@keyframes aiLb3 { 0%, 68% { color: #5A6B85; } 71%, 96% { color: #1D2C4E; } 99%, 100% { color: #5A6B85; } }
@keyframes aiTabLauf {
0%, 2% { transform: scaleX(0); }
5%, 33% { transform: scaleX(0.40); }
38%, 66% { transform: scaleX(0.71); }
71%, 96% { transform: scaleX(1); }
99%, 100% { transform: scaleX(0); } }
@keyframes aiRingPuls { 0% { transform: scale(0.9); opacity: 0.9; } 100% { transform: scale(1.8); opacity: 0; } }
@keyframes aiRadarDreh { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes aiBlip1 { 0%, 6% { opacity: 0; } 8.5%, 14% { opacity: 1; } 16.5%, 100% { opacity: 0; } }
@keyframes aiBlip2 { 0%, 10% { opacity: 0; } 12.5%, 18% { opacity: 1; } 20.5%, 100% { opacity: 0; } }
@keyframes aiBlip3 { 0%, 14% { opacity: 0; } 16.5%, 22% { opacity: 1; } 24.5%, 100% { opacity: 0; } }
@keyframes aiBlip4 { 0%, 18% { opacity: 0; } 20.5%, 26% { opacity: 1; } 28.5%, 100% { opacity: 0; } }
@keyframes aiBlip5 { 0%, 22% { opacity: 0; } 24.5%, 30.5% { opacity: 1; } 33%, 100% { opacity: 0; } }
@keyframes aiBalken { 0%, 37% { transform: scaleY(0); } 46%, 63% { transform: scaleY(1); } 66%, 100% { transform: scaleY(0); } }
@keyframes aiGraph { 0%, 38% { stroke-dashoffset: 480; } 52%, 63% { stroke-dashoffset: 0; } 66%, 100% { stroke-dashoffset: 480; } }
@keyframes aiChat1 { 0%, 71% { opacity: 0; transform: translateY(8px); } 73%, 96% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; } }
@keyframes aiChat2 { 0%, 77% { opacity: 0; transform: translateY(8px); } 79%, 96% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; } }
@keyframes aiChat3 { 0%, 81% { opacity: 0; transform: translateY(8px); } 83%, 96% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; } }
@keyframes aiChat4 { 0%, 88% { opacity: 0; transform: translateY(8px); } 90%, 96% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; } }
@keyframes aiTipp1 { 0%, 73% { opacity: 0; } 74%, 77% { opacity: 1; } 78%, 100% { opacity: 0; } }
@keyframes aiTipp2 { 0%, 84% { opacity: 0; } 85%, 88% { opacity: 1; } 89%, 100% { opacity: 0; } }
@keyframes aiTippDot { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
#x22ai input { display: none; }
#x22ai .ailb { cursor: pointer; }
#x22ai .ailb:hover { color: #1D2C4E; }
#x22ai .aireiter:hover { color: #ffffff; }
/* Ohne Skript haelt ein Klick die Rotation an und zeigt genau eine Folie.
Mit Skript (relaunch-motion.js, Ebenen-Block) wird das Radio sofort wieder
geloest und der 36-Sekunden-Takt springt an den Anfang der gewaehlten
Folie; die Bewegung laeuft dann weiter, diese Regeln greifen nicht. */
#aiR1e:checked ~ div .aisl, #aiR2e:checked ~ div .aisl, #aiR3e:checked ~ div .aisl {
animation: none !important; opacity: 0 !important; }
#aiR1e:checked ~ div .aisl1, #aiR2e:checked ~ div .aisl2, #aiR3e:checked ~ div .aisl3 {
opacity: 1 !important; }
#aiR1e:checked ~ div .aitab, #aiR2e:checked ~ div .aitab, #aiR3e:checked ~ div .aitab {
animation: none !important; }
#aiR1e:checked ~ div .aitab { transform: scaleX(0.40) !important; }
#aiR2e:checked ~ div .aitab { transform: scaleX(0.71) !important; }
#aiR3e:checked ~ div .aitab { transform: scaleX(1) !important; }
#aiR1e:checked ~ div .ailb, #aiR2e:checked ~ div .ailb, #aiR3e:checked ~ div .ailb {
animation: none !important; color: #5A6B85 !important; }
#aiR1e:checked ~ div .ailb1, #aiR2e:checked ~ div .ailb2, #aiR3e:checked ~ div .ailb3 {
color: #1D2C4E !important; }
/* Die Binnenbewegung der eingefrorenen Folie steht ebenfalls: sonst laeuft der
Radar unter einer Folie weiter, die gar nicht zu sehen ist. */
#x22ai input:checked ~ div .aiblip, #x22ai input:checked ~ div .aichat { opacity: 1 !important; }
#x22ai input:checked ~ div .aitipp { opacity: 0 !important; }
#x22ai input:checked ~ div [style*="animation"] { animation: none !important; }
#x22ai input:checked ~ div .aigraph { stroke-dashoffset: 0 !important; }
#x22ai input:checked ~ div .airing { opacity: 0 !important; }
@media (prefers-reduced-motion: reduce) {
/* Ohne Bewegung steht die erste Ebene. Die Beschriftungen bleiben klickbar,
der Klick wechselt dann die Folie ohne Animation. */
#x22ai [style*="animation"], #x22ai .aisl, #x22ai .aitab,
#x22ai .ailb { animation: none !important; }
#x22ai .aisl { opacity: 0 !important; }
#x22ai .aisl1 { opacity: 1 !important; }
#x22ai .aiblip, #x22ai .aichat { opacity: 1 !important; }
#x22ai .aitipp, #x22ai .airing { opacity: 0 !important; }
#x22ai .aigraph { stroke-dashoffset: 0 !important; }
#x22ai .aitab { transform: scaleX(0.40) !important; }
#x22ai .ailb1 { color: #1D2C4E !important; }
}
.rl-ai-flaeche {
position: relative; margin-top: 56px; padding: 64px 60px 56px; border-radius: 8px;
background: linear-gradient(126deg, #16233F 0%, #1D2C4E 34%, #2D51A0 72%, #3063C5 100%);
overflow: hidden; isolation: isolate;
}
.rl-ai-raster {
display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
gap: 64px; align-items: center;
}
.rl-ai-marken { display: flex; justify-content: center; gap: 44px; margin-top: 26px; }
@media (max-width: 1000px) {
.rl-ai-flaeche { padding: 40px 28px 36px; }
.rl-ai-raster { grid-template-columns: minmax(0, 1fr); gap: 36px; }
.rl-ai-marken { gap: 26px; flex-wrap: wrap; }
}
@media (max-width: 640px) {
/* Die Szenen tragen Beschriftungen in Grafiktext; unter 640px waeren die
nicht mehr lesbar, deshalb bleibt nur der Text. */
.rl-ai-szenen { display: none !important; }
}
/* Abbildungen der Produktseiten (Übergabe Animationen 14.09.2026): die
Zeilen tragen am Desktop nowrap plus Ellipse und eine Einordnung mit
flex: 0 0 auto. Sobald die Abbildung neben dem Text schmal wird (Tablet)
oder auf 390px steht, fraesse die Einordnung den Titel bis auf einen
Buchstaben; ab 900px bricht deshalb alles um und teilt sich die Breite. */
@media (max-width: 900px) {
.rl-pb-abb [style*="white-space: nowrap"] { white-space: normal !important; }
.rl-pb-abb [style*="flex: 0 0 auto"] { flex: 0 1 auto !important; }
.rl-pb-abb [style*="min-width: 190px"] { min-width: 0 !important; }
.rl-pb-abb [style*="justify-content: space-between"] { flex-wrap: wrap !important; }
/* Vorher/Jetzt/Delta: die Bezeichnung bekommt eine eigene Zeile, der Pfeil
zwischen den Werten entfaellt, das Raster hat dann drei Spalten
(--rl-c-1-76-24-76-64). Die mittlere bleibt 140px breit, weil in ihr
alter und neuer Wert uebereinanderliegen. */
.rl-pb-abb [style*="var(--rl-c-1-76-24-76-64)"] > :first-child { grid-column: 1 / -1; }
.rl-pb-abb [style*="var(--rl-c-1-76-24-76-64)"] > :nth-child(3) { display: none; }
}
/* Zwischen 641 und 900px bleiben die --rl-fs-Variablen bei ihren
Desktopwerten; die Mobilpruefung verlangt auf dem Tablet hochkant aber
mindestens 12px fuer Fliesstext.
Angehoben wird fuer , nicht fuer eine Liste von Grafikklassen. Der
erste Anlauf zaehlte sechs Klassen auf und liess sieben Stellen stehen: die
Beschriftungen der Produktgrafiken haengen an Elementen ohne jede Klasse
(Inline-Stile aus dem Design-Handoff), und eine Aufzaehlung erreicht sie
nicht. Wer eine Grafik ergaenzt, muesste die Liste sonst mitpflegen und
wuerde es vergessen.
Kopf und Fuss bleiben draussen: sie stehen ausserhalb von und haben
ihre eigene Anhebung unter 640px. */
@media (min-width: 641px) and (max-width: 900px) {
main {
--rl-fs-10: 12px; --rl-fs-10-5: 12px; --rl-fs-11: 12px; --rl-fs-11-5: 12px; }
}
/* ---- Prüfen Sie uns (Produktseiten, Übergabe Animationen 14.09.2026) ------
Drei Karten in einem spaltenweise gefüllten Raster, damit Grafik, Text und
Knopf über die Karten hinweg auf gleicher Höhe stehen. Die Spalten sind
display: contents; unter 900px werden sie zu Stapeln untereinander. */
.rl-pruef { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); grid-template-rows: 236px auto auto; gap: 22px 32px; align-items: start; }
.rl-pruef__spalte { display: contents; }
@media (max-width: 900px) {
.rl-pruef { grid-auto-flow: row; grid-auto-columns: auto; grid-template-rows: none; grid-template-columns: minmax(0, 1fr); gap: var(--rl-gap-xs); }
.rl-pruef__spalte { display: flex; flex-direction: column; gap: 16px; }
}
/* ---- Erzeugt beim Portieren ------------------------------------------------
Ab hier steht nichts von Hand Geschriebenes mehr. Der Block wird beim Bau
der Seiten neu erzeugt; Aenderungen daran gehen verloren.
Hover-Zustaende aus style-hover der Mockups. Drei Praefixe, weil sie aus
drei Quellen stammen und dieselbe Nummer sonst zwei Regeln traege:
rl-hv Landingpage, rl-nh Mega-Menues, rl-sh Unterseiten.
------------------------------------------------------------------------- */
.rl-hv1:hover { background: #3977D7 !important; }
.rl-hv2:hover { background: #F1F7FD !important; }
.rl-hv3:hover { border-color: rgba(74, 144, 226, 0.38) !important; box-shadow: 0 0 0 1px rgba(74, 144, 226, 0.26), 0 0 0 4px rgba(237, 137, 107, 0.09), 0 12px 28px -16px rgba(41, 70, 127, 0.2) !important; transform: translateY(-1px) !important; }
.rl-hv4:hover { --kt: #ffffff !important; --ks: rgba(255, 255, 255, 0.86) !important; --ka: #ffffff !important; --kb: rgba(255, 255, 255, 0.22) !important; --sp: 1.6px !important; background: rgba(255, 255, 255, 0.13) !important; border-color: rgba(255, 255, 255, 0.7) !important; box-shadow: 0 1px 2px rgba(11, 20, 40, 0.1), 0 22px 46px -22px rgba(11, 20, 40, 0.42) !important; transform: translateY(-2px) !important; }
.rl-hv5:hover { background: #3977D7 !important; border-color: #3977D7 !important; }
.rl-hv6:hover { background: rgba(255,255,255,0.24) !important; }
.rl-hv7:hover { border-color: #9ECCF2 !important; background: #F1F7FD !important; }
/* Landingpage 1e.25: "Case Study lesen" fuellt sich, Glasknopf auf dem Foto hellt auf. */
.rl-hv8:hover { background: #1D2C4E !important; color: #ffffff !important; }
.rl-hv9:hover { background: rgba(255,255,255,0.12) !important; }
.rl-hv10:hover { filter: brightness(1.1) !important; }
.rl-hv11:hover { border-color: #1D2C4E !important; }
.rl-hv12:hover { background: #ffffff !important; color: var(--rl-pruef-akzent, #1D2C4E) !important; }
.rl-nh1:hover { opacity: 0.62 !important; }
.rl-nh2:hover { opacity: 0.7 !important; }
.rl-nh3:hover { color: #3063C5 !important; }
.rl-sh1:hover { background: #3977D7 !important; }
.rl-sh2:hover { color: rgba(255,255,255,0.8) !important; }
.rl-sh3:hover { background: rgba(255,255,255,0.24) !important; }
.rl-sh4:hover { background: #F1F7FD !important; }
.rl-sh5:hover { color: #3977D7 !important; }
.rl-sh6:hover { background: #2E9E96 !important; }
.rl-sh7:hover { border-color: #3063C5 !important; color: #3063C5 !important; }
.rl-sh8:hover { color: #1D2C4E !important; }
.rl-sh9:hover { background: #EDF2F8 !important; }
.rl-sh10:hover { background: #29467F !important; }
.rl-sh11:hover { color: #3063C5 !important; }
.rl-sh12:hover { background: #3977D7 !important; border-color: #3977D7 !important; }
/* Fachbereichskarten der Intelligence-Seite: Rand in der Bereichsfarbe (06.09.2026). */
.rl-sh13:hover { border-color: #3063C5 !important; background: #F8FAFD !important; }
.rl-sh14:hover { border-color: #1F6663 !important; background: #F8FAFD !important; }
.rl-sh15:hover { border-color: #B00000 !important; background: #F8FAFD !important; }
.rl-sh16:hover { border-color: #CB4813 !important; background: #F8FAFD !important; }
/* Partnerseite: Karte mit hellem Grund beim Ueberfahren, und die drei
Logokacheln im Hero, die von 0.8 auf volle Deckkraft gehen. */
.rl-sh17:hover { background: #F3F6FB !important; }
.rl-sh18:hover { opacity: 1 !important; }
/* ---- Rollenkarten auf "Ueber uns" ------------------------------------------
Die Karte traegt die Clusterfarbe des Fachbereichs, zu dem der Katalogbereich
der Rolle gehoert. Vorher trug sie eine gewachsene Zufallsfarbe, die zu den
Produktseiten genau invertiert war: Competitive & Market fuhr dort die
Blau-Skala, auf "Ueber uns" stand es in Gruen.
Alle Stopps sind kanonische Stufen aus produktcluster.md und farben.md, kein
Ton dazwischen erfunden. Die Richtung ist Pflicht: dunkel oben links, hell
unten rechts. Die Segmentzeile sitzt oben links auf dem dunkelsten Stopp,
weil sie mit 80 Prozent Deckkraft gesetzt ist und am hellen Ende nur 3,7:1
erreichen wuerde.
Bewusst NICHT verwendet, weil weisser Text darauf die 4,5:1 aus WCAG AA
reisst: Persian Green 500 #2E9E96 (3,26:1), Red 600 #FF0000 (4,00:1),
Periwinkle #6475F0 (3,93:1) und beide Apricot-Stufen (2,50:1 und 3,09:1).
Innerhalb einer Gruppe tragen alle Karten denselben Verlauf. Die frueher
von Karte zu Karte abgestufte Faerbung faellt absichtlich weg: sie war der
Grund, warum das Raster nicht als System lesbar war. Die Textur kommt aus
dem Liniennetz, nicht aus einer Farbabweichung. */
.rl-rolle { color: #FFFFFF; }
.rl-rolle__segment { color: rgba(255, 255, 255, 0.80); }
.rl-rolle--cm { background: linear-gradient(135deg, #29467F 0%, #2D51A0 50%, #3063C5 100%); }
.rl-rolle--sales { background: linear-gradient(135deg, #1D5251 0%, #1F6663 50%, #227F7A 100%); }
.rl-rolle--inv { background: linear-gradient(135deg, #920A0A 0%, #B10303 50%, #D70000 100%); }
.rl-rolle--org { background: linear-gradient(135deg, #29467F 0%, #2D51A0 50%, #4C5BD8 100%); }
.rl-rolle--content { background: linear-gradient(135deg, #1D2C4E 0%, #56698A 100%); }
/* ---- Animationen aus den Mockups -------------------------------------------
Die Vorlagen halten ihre @keyframes im Kopfbereich, das Markup verweist nur
darauf. Ohne sie steht jede Illustration still. 1:1 uebernommen.
------------------------------------------------------------------------- */
.ra-z1::after { content: counter(rz1); }
.ra-z2 { animation: raZ2 10s ease-out infinite; counter-reset: rz2 var(--ra2); }
.ra-z2::after { content: counter(rz2); }
.ra-z3 { animation: raZ3 11s ease-out infinite; counter-reset: rz3 var(--ra3); }
.ra-z3::after { content: counter(rz3); }
.ra-z4 { animation: raZ4 12s ease-out infinite; counter-reset: rz4 var(--ra4); }
.ra-z4::after { content: counter(rz4); }
@keyframes aufkommen {
0%, 4% { opacity: 0; transform: translate3d(0, 30px, 0); }
13%, 86% { opacity: 1; transform: none; }
95%, 100% { opacity: 0; transform: translate3d(0, -14px, 0); }
}
@keyframes caBl1 { 0%, 3% { opacity: 0; } 6%, 20% { opacity: 1; } 23%, 100% { opacity: 0; } }
@keyframes caBl2 { 0%, 28% { opacity: 0; } 31%, 45% { opacity: 1; } 48%, 100% { opacity: 0; } }
@keyframes caBl3 { 0%, 53% { opacity: 0; } 56%, 70% { opacity: 1; } 73%, 100% { opacity: 0; } }
@keyframes caBl4 { 0%, 78% { opacity: 0; } 81%, 95% { opacity: 1; } 98%, 100% { opacity: 0; } }
@keyframes caS1a { 0%, 3% { opacity: 0; transform: translateY(16px); } 6% { opacity: 1; transform: none; } 20% { opacity: 1; } 23%, 100% { opacity: 0; } }
@keyframes caS1b { 0%, 5% { opacity: 0; transform: translateY(16px); } 8% { opacity: 1; transform: none; } 20% { opacity: 1; } 23%, 100% { opacity: 0; } }
@keyframes caS2a { 0%, 28% { opacity: 0; transform: translateY(16px); } 31% { opacity: 1; transform: none; } 45% { opacity: 1; } 48%, 100% { opacity: 0; } }
@keyframes caS2b { 0%, 30% { opacity: 0; transform: translateY(16px); } 33% { opacity: 1; transform: none; } 45% { opacity: 1; } 48%, 100% { opacity: 0; } }
@keyframes caS3a { 0%, 53% { opacity: 0; transform: translateY(16px); } 56% { opacity: 1; transform: none; } 70% { opacity: 1; } 73%, 100% { opacity: 0; } }
@keyframes caS3b { 0%, 55% { opacity: 0; transform: translateY(16px); } 58% { opacity: 1; transform: none; } 70% { opacity: 1; } 73%, 100% { opacity: 0; } }
@keyframes caS4a { 0%, 78% { opacity: 0; transform: translateY(16px); } 81% { opacity: 1; transform: none; } 95% { opacity: 1; } 98%, 100% { opacity: 0; } }
@keyframes caS4b { 0%, 80% { opacity: 0; transform: translateY(16px); } 83% { opacity: 1; transform: none; } 95% { opacity: 1; } 98%, 100% { opacity: 0; } }
@keyframes ciChip { 0%, 3%, 24%, 100% { opacity: 0; } 7%, 19% { opacity: 1; } }
@keyframes ciDrift { from { transform: translate(0, 0); } to { transform: translate(-32px, 20px); } }
@keyframes ciDrift2 { from { transform: translate(0, 0); } to { transform: translate(12px, -9px); } }
@keyframes ciFeed1 { 0% { opacity: 0; transform: translateY(10px); } 4% { opacity: 1; transform: none; } 93% { opacity: 1; } 100% { opacity: 0; } }
@keyframes ciFeed2 { 0%, 11% { opacity: 0; transform: translateY(10px); } 15% { opacity: 1; transform: none; } 93% { opacity: 1; } 100% { opacity: 0; } }
@keyframes ciFeed3 { 0%, 22% { opacity: 0; transform: translateY(10px); } 26% { opacity: 1; transform: none; } 93% { opacity: 1; } 100% { opacity: 0; } }
@keyframes ciFeed4 { 0%, 33% { opacity: 0; transform: translateY(10px); } 37% { opacity: 1; transform: none; } 93% { opacity: 1; } 100% { opacity: 0; } }
@keyframes ciFeed5 { 0%, 44% { opacity: 0; transform: translateY(10px); } 48% { opacity: 1; transform: none; } 93% { opacity: 1; } 100% { opacity: 0; } }
@keyframes ciScan { 0%, 26%, 100% { background-color: #ffffff; } 6%, 18% { background-color: #F0F6FE; } }
@keyframes e11Bar {
0%, 4% { transform: scaleX(0.04); }
13%, 88% { transform: scaleX(1); }
96%, 100% { transform: scaleX(0.04); }
}
@keyframes e11Draw {
0%, 6% { stroke-dashoffset: 320; }
38%, 88% { stroke-dashoffset: 0; }
97%, 100% { stroke-dashoffset: 320; }
}
@keyframes e11Haken {
0%, 5% { opacity: 0; transform: scale(0.6); }
12%, 88% { opacity: 1; transform: none; }
96%, 100% { opacity: 0; transform: scale(0.6); }
}
@keyframes e11Pop {
0%, 4% { opacity: 0; transform: translate3d(0, 7px, 0) scale(0.96); }
11%, 88% { opacity: 1; transform: none; }
96%, 100% { opacity: 0; transform: translate3d(0, -4px, 0); }
}
@keyframes e11Puls {
0%, 100% { box-shadow: 0 0 0 0 rgba(48, 99, 197, 0.3); }
50% { box-shadow: 0 0 0 9px rgba(48, 99, 197, 0); }
}
@keyframes e11SwayA {
0%, 100% { transform: translate3d(0, 0, 0) scaleY(1) rotate(-0.5deg); }
50% { transform: translate3d(-38px, 34px, 0) scaleY(1.07) rotate(0.7deg); }
}
@keyframes e11SwayB {
0%, 100% { transform: translate3d(0, 0, 0) scaleY(1) rotate(0.4deg); }
50% { transform: translate3d(42px, -30px, 0) scaleY(0.94) rotate(-0.6deg); }
}
@keyframes e11SwayC {
0%, 100% { transform: translate3d(0, 0, 0) scaleX(1); opacity: 0.38; }
50% { transform: translate3d(-26px, -24px, 0) scaleX(1.03); opacity: 0.68; }
}
@keyframes e11Tick {
0%, 3% { opacity: 0; }
5%, 9% { opacity: 1; }
11%, 100% { opacity: 0; }
}
@keyframes e11Val {
0%, 12% { opacity: 0; }
16%, 90% { opacity: 1; }
97%, 100% { opacity: 0; }
}
@keyframes e11Wander {
0% { transform: translateX(0); opacity: 0; }
14%, 80% { opacity: 1; }
100% { transform: translateX(583px); opacity: 0; }
}
@keyframes e11WanderLinks {
0% { transform: translateX(0); opacity: 0; }
14%, 80% { opacity: 1; }
100% { transform: translateX(-583px); opacity: 0; }
}
@keyframes e11WanderRunter {
0% { transform: translateY(0); opacity: 0; }
14%, 80% { opacity: 1; }
100% { transform: translateY(102px); opacity: 0; }
}
/* Dieselbe Mechanik wie fWechsel4, nur fuer Kacheln mit drei Karten:
sichtbares Fenster 100/3 Prozent des Zyklus, Ausblenden ueber 3,5
Prozent, Einblenden ueber die letzten 2,5. Die Hero-Collage auf
"Ueber uns" braucht beide Zaehlungen, weil 16 Rollenkarten und sechs
Fotoauftritte sich nicht in sechs gleich lange Kacheln teilen.
Beide Zaehlungen blenden ueber dieselbe Spanne von 1,2 Prozent ein und
aus, also 0,53 Sekunden. Zwei Werte, beide gemessen:
Die Spannen muessen sich deckungsgleich ueberlappen. Die nachfolgende
Ebene liegt genau 100/N Prozent zurueck, also beginnt ihr Einblenden bei
98,8 Prozent in demselben Moment, in dem die vorige zu verschwinden
anfaengt. Weil beide Segmente dieselbe Beschleunigung fahren, ist die
Summe der Deckkraefte waehrend der Blende 1: die Kachel hellt nicht auf.
Mit der vorherigen Aufteilung (Ausblenden ueber 3,5, Einblenden ueber
2,5 Prozent) fiel sie auf 0,67, und der helle Seitengrund schlug durch.
Und die Blende muss kurz sein. Beide Karten tragen ihr Namensschild an
derselben Stelle; solange beide sichtbar sind, stehen zwei Namen
uebereinander und sind unlesbar. Bei 3,5 Prozent dauerte das 1,54
Sekunden und sah nach Fehler aus, bei 1,2 Prozent ist es eine
Aufloesung. Kuerzer geht auch, wird dann aber zum harten Schnitt. */
@keyframes fWechsel3 {
0%, 32.1% { opacity: 1; }
33.3%, 98.8% { opacity: 0; }
100% { opacity: 1; }
}
@keyframes fWechsel4 {
0%, 23.8% { opacity: 1; }
25%, 98.8% { opacity: 0; }
100% { opacity: 1; }
}
@keyframes fuellen {
0% { transform: scaleX(0.08); }
55%, 100% { transform: scaleX(1); }
}
@keyframes leStat1 { 0% { opacity: 0; } 6%, 28% { opacity: 1; } 34%, 100% { opacity: 0; } }
@keyframes leStat2 { 0%, 33% { opacity: 0; } 39%, 61% { opacity: 1; } 67%, 100% { opacity: 0; } }
@keyframes leStat3 { 0%, 66% { opacity: 0; } 72%, 94% { opacity: 1; } 100% { opacity: 0; } }
@keyframes logoLauf {
from { transform: translate3d(0, 0, 0); }
to { transform: translate3d(-50%, 0, 0); }
}
@keyframes lpHxSwayA { 0% { transform: translate(0, 0); } 50% { transform: translate(-16px, 12px); } 100% { transform: translate(0, 0); } }
@keyframes lpHxSwayB { 0% { transform: translate(0, 0); } 50% { transform: translate(14px, -14px); } 100% { transform: translate(0, 0); } }
@keyframes lpHxSwayC { 0% { transform: translate(0, 0) rotate(0deg); } 50% { transform: translate(-9px, 7px) rotate(0.7deg); } 100% { transform: translate(0, 0) rotate(0deg); } }
@keyframes lpHxTurn { 0% { transform: rotate(-1.6deg) scale(1); } 50% { transform: rotate(1.6deg) scale(1.035); } 100% { transform: rotate(-1.6deg) scale(1); } }
@keyframes lpLogoLauf { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes mcDot {
0%, 100% { opacity: 0.25; transform: translateY(0); }
30% { opacity: 1; transform: translateY(-2px); }
}
@keyframes mdB1 { 0%, 7% { opacity: 0; transform: translate3d(0, 16px, 0) scale(0.96); } 10%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
@keyframes mdB2 { 0%, 31% { opacity: 0; transform: translate3d(0, 16px, 0) scale(0.96); } 34%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
@keyframes mdDoc { 0%, 47% { opacity: 0; transform: translate3d(0, 20px, 0) scale(0.96); } 51%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
@keyframes mdFade { 0%, 58% { opacity: 1; filter: none; } 65%, 90% { opacity: 0.28; filter: grayscale(0.55); } 96%, 100% { opacity: 1; filter: none; } }
@keyframes mdL1 { 0%, 19% { opacity: 0; transform: translate3d(0, 16px, 0) scale(0.96); } 22%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
@keyframes mdL2 { 0%, 42% { opacity: 0; transform: translate3d(0, 16px, 0) scale(0.96); } 45%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
@keyframes mdLbl { 0%, 11% { opacity: 0; transform: translate3d(0, 8px, 0); } 13%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
@keyframes mdLbl0 { 0% { opacity: 0; } 1%, 92% { opacity: 1; } 97%, 100% { opacity: 0; } }
@keyframes mdPanel { 0%, 58% { opacity: 0; transform: translate(-50%, -50%) translate3d(0, 60px, 0) scale(0.97); } 63%, 90% { opacity: 1; transform: translate(-50%, -50%); } 96%, 100% { opacity: 0; transform: translate(-50%, -50%) translate3d(0, 24px, 0); } }
@keyframes mdT1 { 0% { opacity: 0; transform: translate3d(0, 12px, 0) scale(0.95); } 2%, 6% { opacity: 1; transform: none; } 8%, 100% { opacity: 0; transform: translate3d(0, -4px, 0); } }
@keyframes mdT2 { 0%, 12% { opacity: 0; transform: translate3d(0, 12px, 0) scale(0.95); } 14%, 18% { opacity: 1; transform: none; } 20%, 100% { opacity: 0; transform: translate3d(0, -4px, 0); } }
@keyframes mdT3 { 0%, 24% { opacity: 0; transform: translate3d(0, 12px, 0) scale(0.95); } 26%, 30% { opacity: 1; transform: none; } 32%, 100% { opacity: 0; transform: translate3d(0, -4px, 0); } }
@keyframes mdT4 { 0%, 35% { opacity: 0; transform: translate3d(0, 12px, 0) scale(0.95); } 37%, 41% { opacity: 1; transform: none; } 43%, 100% { opacity: 0; transform: translate3d(0, -4px, 0); } }
@keyframes okrBar1 { 0% { transform: scaleX(0); } 22%, 92% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
@keyframes okrBar2 { 0%, 8% { transform: scaleX(0); } 30%, 92% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
@keyframes okrBar3 { 0%, 16% { transform: scaleX(0); } 38%, 92% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
@keyframes pbKartA { 0% { opacity: 0; transform: translateY(10px); } 3% { opacity: 1; transform: none; } 45% { opacity: 1; } 49%, 97% { opacity: 0; } 100% { opacity: 0; transform: translateY(10px); } }
@keyframes pbKartB { 0%, 50% { opacity: 0; transform: translateY(10px); } 53% { opacity: 1; transform: none; } 95% { opacity: 1; } 99%, 100% { opacity: 0; } }
@keyframes pbMsg1 { 0%, 32% { opacity: 0; transform: translateY(6px); } 34% { opacity: 1; transform: none; } 100% { opacity: 1; } }
@keyframes pbMsg2 { 0%, 35% { opacity: 0; transform: translateY(6px); } 37% { opacity: 1; transform: none; } 100% { opacity: 1; } }
@keyframes pbMsg3 { 0%, 38% { opacity: 0; transform: translateY(6px); } 40% { opacity: 1; transform: none; } 100% { opacity: 1; } }
@keyframes pbP1 { 0%, 11% { opacity: 0; transform: translateY(16px); } 14% { opacity: 1; transform: none; } 24% { opacity: 1; } 27%, 100% { opacity: 0; } }
@keyframes pbP2 { 0%, 29% { opacity: 0; transform: translateY(16px); } 32% { opacity: 1; transform: none; } 42% { opacity: 1; } 45%, 100% { opacity: 0; } }
@keyframes pbP3 { 0%, 60% { opacity: 0; transform: translateY(16px); } 63% { opacity: 1; transform: none; } 73% { opacity: 1; } 76%, 100% { opacity: 0; } }
@keyframes pbP4 { 0%, 78% { opacity: 0; transform: translateY(16px); } 81% { opacity: 1; transform: none; } 92% { opacity: 1; } 95%, 100% { opacity: 0; } }
@keyframes pbRa1 { 0%, 3% { opacity: 0; transform: translateY(6px); } 6% { opacity: 1; transform: none; } 100% { opacity: 1; } }
@keyframes pbRa2 { 0%, 5% { opacity: 0; transform: translateY(6px); } 8% { opacity: 1; transform: none; } 100% { opacity: 1; } }
@keyframes pbRa3 { 0%, 7% { opacity: 0; transform: translateY(6px); } 10% { opacity: 1; transform: none; } 100% { opacity: 1; } }
@keyframes pbRa4 { 0%, 9% { opacity: 0; transform: translateY(6px); } 12% { opacity: 1; transform: none; } 100% { opacity: 1; } }
@keyframes pbRa5 { 0%, 11% { opacity: 0; transform: translateY(6px); } 14% { opacity: 1; transform: none; } 100% { opacity: 1; } }
@keyframes pbRb1 { 0%, 53% { opacity: 0; transform: translateY(6px); } 56% { opacity: 1; transform: none; } 100% { opacity: 1; } }
@keyframes pbRb2 { 0%, 55% { opacity: 0; transform: translateY(6px); } 58% { opacity: 1; transform: none; } 100% { opacity: 1; } }
@keyframes pbRb3 { 0%, 57% { opacity: 0; transform: translateY(6px); } 60% { opacity: 1; transform: none; } 100% { opacity: 1; } }
@keyframes pbRb4 { 0%, 59% { opacity: 0; transform: translateY(6px); } 62% { opacity: 1; transform: none; } 100% { opacity: 1; } }
@keyframes pbRb5 { 0%, 61% { opacity: 0; transform: translateY(6px); } 64% { opacity: 1; transform: none; } 100% { opacity: 1; } }
@keyframes pbSpin { to { transform: rotate(360deg); } }
@keyframes pfFluss { 0% { transform: translateX(0); opacity: 0; } 5% { opacity: 1; } 58% { transform: translateX(480px); opacity: 1; } 64%, 100% { transform: translateX(480px); opacity: 0; } }
@keyframes piAl1 { 0%, 66% { opacity: 0; transform: scale(0.4); } 68% { opacity: 1; transform: scale(1); } 91% { opacity: 1; } 94%, 100% { opacity: 0; } }
@keyframes piAl2 { 0%, 69% { opacity: 0; transform: scale(0.4); } 71% { opacity: 1; transform: scale(1); } 91% { opacity: 1; } 94%, 100% { opacity: 0; } }
@keyframes piAl3 { 0%, 72% { opacity: 0; transform: scale(0.4); } 74% { opacity: 1; transform: scale(1); } 91% { opacity: 1; } 94%, 100% { opacity: 0; } }
@keyframes piAl4 { 0%, 75% { opacity: 0; transform: scale(0.4); } 77% { opacity: 1; transform: scale(1); } 91% { opacity: 1; } 94%, 100% { opacity: 0; } }
@keyframes piAl5 { 0%, 78% { opacity: 0; transform: scale(0.4); } 80% { opacity: 1; transform: scale(1); } 91% { opacity: 1; } 94%, 100% { opacity: 0; } }
@keyframes piGhostA { 0%, 48% { opacity: 1; } 51%, 97% { opacity: 0; } 100% { opacity: 1; } }
@keyframes piGhostB { 0%, 48% { opacity: 0; } 51%, 97% { opacity: 1; } 100% { opacity: 0; } }
@keyframes piP1a { 0%, 7% { opacity: 0; transform: translateY(16px); } 10% { opacity: 1; transform: none; } 43% { opacity: 1; } 46%, 100% { opacity: 0; } }
@keyframes piP1b { 0%, 12% { opacity: 0; transform: translateY(16px); } 15% { opacity: 1; transform: none; } 43% { opacity: 1; } 46%, 100% { opacity: 0; } }
@keyframes piP2a { 0%, 54% { opacity: 0; transform: translateY(16px); } 57% { opacity: 1; transform: none; } 91% { opacity: 1; } 94%, 100% { opacity: 0; } }
@keyframes piP2b { 0%, 59% { opacity: 0; transform: translateY(16px); } 62% { opacity: 1; transform: none; } 91% { opacity: 1; } 94%, 100% { opacity: 0; } }
@keyframes piRadar { from { transform: translate(0, 0); } to { transform: translate(-18px, 26px); } }
@keyframes piZeich { 0% { transform: scaleX(0); } 4% { transform: scaleX(1); } 94% { transform: scaleX(1); } 97%, 100% { transform: scaleX(0); } }
@keyframes piZyklus { from { transform: translateX(0); } to { transform: translateX(26px); } }
@keyframes raArcDraw { 0% { stroke-dashoffset: 700; opacity: 0; } 4% { opacity: 1; } 28% { stroke-dashoffset: 0; } 78% { stroke-dashoffset: 0; opacity: 1; } 92%, 100% { stroke-dashoffset: 700; opacity: 0; } }
@keyframes raBalken { 0% { width: 24%; } 34% { width: 46%; } 48%, 78% { width: 72%; } 90%, 100% { width: 24%; } }
@keyframes raFlagStart { 0%, 3% { opacity: 0; transform: scale(0.5); } 7% { opacity: 1; transform: scale(1); } 84% { opacity: 1; } 90%, 100% { opacity: 0; } }
@keyframes raFlagZiel { 0%, 26% { opacity: 0; transform: scale(0.5); } 30% { opacity: 1; transform: scale(1); } 84% { opacity: 1; } 90%, 100% { opacity: 0; } }
@keyframes raIconRide { 0%, 34% { opacity: 0; offset-distance: 0%; } 38% { opacity: 1; } 62% { opacity: 1; offset-distance: 100%; } 66%, 100% { opacity: 0; offset-distance: 100%; } }
@keyframes raPillWin { 0%, 34% { opacity: 0; } 38%, 62% { opacity: 1; } 66%, 100% { opacity: 0; } }
@keyframes raPingStart { 0%, 4% { opacity: 0; transform: scale(0.3); } 6% { opacity: 0.8; } 14% { opacity: 0; transform: scale(2.4); } 100% { opacity: 0; transform: scale(2.4); } }
@keyframes raPingZiel { 0%, 27% { opacity: 0; transform: scale(0.3); } 30% { opacity: 0.8; } 38% { opacity: 0; transform: scale(2.4); } 100% { opacity: 0; transform: scale(2.4); } }
@keyframes raW5A { 0%, 42% { opacity: 1; } 48%, 92% { opacity: 0; } 100% { opacity: 1; } }
@keyframes raW5B { 0%, 42% { opacity: 0; } 48%, 92% { opacity: 1; } 100% { opacity: 0; } }
@keyframes riDrift { from { transform: translate(0, 0); } to { transform: translate(64px, -46px); } }
@keyframes riPfad { 0% { stroke-dashoffset: 620; } 35%, 82% { stroke-dashoffset: 0; } 94%, 100% { stroke-dashoffset: 620; } }
@keyframes s2Karte {
0%, 3% { opacity: 0; transform: translate3d(0, 16px, 0); }
10%, 90% { opacity: 1; transform: none; }
97%, 100% { opacity: 0; transform: translate3d(0, -8px, 0); }
}
@keyframes scanPunkt { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
@keyframes schwebPille {
0%, 100% { transform: translate3d(0, 0, 0); }
50% { transform: translate3d(0, -7px, 0); }
}
@keyframes siPuls { 0% { transform: translateX(0); opacity: 0; } 6% { opacity: 1; } 58% { transform: translateX(404px); opacity: 1; } 64%, 100% { transform: translateX(404px); opacity: 0; } }
@keyframes siStatus { 0%, 54% { opacity: 0; } 62%, 90% { opacity: 1; } 97%, 100% { opacity: 0; } }
@keyframes sonarBlip { 0%, 6% { opacity: 0; } 12%, 78% { opacity: 1; } 92%, 100% { opacity: 0; } }
@keyframes sonarDreh { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes sonarRing { 0% { transform: scale(0.35); opacity: 0.9; } 70% { opacity: 0; } 100% { transform: scale(2.6); opacity: 0; } }
@keyframes szLabel { 0%, 26% { opacity: 0; } 34%, 86% { opacity: 1; } 94%, 100% { opacity: 0; } }
@keyframes szLinie { 0% { stroke-dashoffset: 900; } 30%, 88% { stroke-dashoffset: 0; } 96%, 100% { stroke-dashoffset: 900; } }
@keyframes tickZeile {
0%, 6% { background: #ffffff; }
12%, 40% { background: #F1F7FD; }
52%, 100% { background: #ffffff; }
}
@keyframes wertBlink {
0%, 46% { opacity: 0; transform: translate3d(0, 6px, 0); }
54%, 92% { opacity: 1; transform: none; }
100% { opacity: 0; transform: translate3d(0, -6px, 0); }
}
/* Produktseiten, Übergabe Animationen 14.09.2026 */
@keyframes fcClipW { 0% { width: 0; } 20%, 88% { width: 160px; } 100% { width: 160px; opacity: 0; } }
@keyframes fcLinie { 0%, 4% { stroke-dashoffset: 420; } 52%, 92% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes fcPunkt { 0%, 3% { opacity: 0; transform: translateY(4px); } 7%, 92% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; } }
@keyframes fcTag { 0% { opacity: 0; transform: translateY(4px); } 8%, 88% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; } }
@keyframes mbEinordnung { 0%, 6% { opacity: 0; transform: translateX(6px); } 11%, 84% { opacity: 1; transform: translateX(0); } 92%, 100% { opacity: 0; } }
@keyframes mbHaken { 0%, 9% { opacity: 0; transform: scale(0.6); } 14%, 84% { opacity: 1; transform: scale(1); } 92%, 100% { opacity: 0; } }
@keyframes mbLive { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }
@keyframes mbPing { 0% { transform: scale(0.6); opacity: 0.9; } 10% { transform: scale(1.8); opacity: 0; } 100% { transform: scale(1.8); opacity: 0; } }
@keyframes mbZeile { 0% { opacity: 0; transform: translateY(14px); } 4%, 84% { opacity: 1; transform: translateY(0); } 92%, 100% { opacity: 0; transform: translateY(-8px); } }
@keyframes mgAb { 0%, 88% { transform: scaleX(1); } 95%, 100% { transform: scaleX(0); } }
@keyframes mgSegAuf { 0% { transform: scaleX(0); } 14%, 100% { transform: scaleX(1); } }
@keyframes mgWert { 0%, 2% { opacity: 0; transform: translateY(3px); } 7%, 88% { opacity: 1; transform: translateY(0); } 96%, 100% { opacity: 0; } }
@keyframes epBar { 0% { transform: scaleX(0); } 12%, 92% { transform: scaleX(1); } 98%, 100% { transform: scaleX(0); } }
@keyframes epTag { 0%, 6% { opacity: 0; } 12%, 92% { opacity: 1; } 98%, 100% { opacity: 0; } }
@keyframes gpPruef { 0%, 6% { opacity: 1; } 9%, 100% { opacity: 0; } }
@keyframes gpStatus { 0% { opacity: 0; transform: translateY(4px); } 4%, 84% { opacity: 1; transform: translateY(0); } 90%, 100% { opacity: 0; } }
@keyframes gpZeile { 0% { opacity: 0; transform: translateY(8px); } 4%, 88% { opacity: 1; transform: translateY(0); } 95%, 100% { opacity: 0; } }
@keyframes spinDreh { to { transform: rotate(360deg); } }
@keyframes wbAlt { 0%, 4% { opacity: 1; transform: translateY(0); } 9%, 88% { opacity: 0; transform: translateY(-8px); } 94%, 100% { opacity: 1; transform: translateY(0); } }
@keyframes wbDelta { 0%, 4% { opacity: 0; transform: translateX(6px); } 9%, 88% { opacity: 1; transform: translateX(0); } 94%, 100% { opacity: 0; } }
@keyframes wbNeu { 0%, 4% { opacity: 0; transform: translateY(8px); } 9%, 88% { opacity: 1; transform: translateY(0); } 94%, 100% { opacity: 0; } }
@keyframes wpGhost { 0%, 3% { opacity: 1; } 8%, 88% { opacity: 0; } 94%, 100% { opacity: 1; } }
@keyframes wpText { 0%, 3% { opacity: 0; transform: translateY(4px); } 8%, 88% { opacity: 1; transform: translateY(0); } 94%, 100% { opacity: 0; } }
@keyframes zyBand { 0% { transform: scaleX(0); } 22%, 96% { transform: scaleX(1); } 100% { transform: scaleX(1); opacity: 0; } }
@keyframes zyHaken { 0%, 2% { opacity: 0; transform: scale(0.6); } 6%, 94% { opacity: 1; transform: scale(1); } 98%, 100% { opacity: 0; } }
@keyframes zyKarte { 0%, 2% { border-color: #EDF2F8; transform: translateY(0); } 6%, 24% { border-color: #CB4813; transform: translateY(-3px); } 28%, 100% { border-color: #EDF2F8; transform: translateY(0); } }
@property --ra1 { syntax: ''; inherits: false; initial-value: 0; }
@property --ra2 { syntax: ''; inherits: false; initial-value: 0; }
@property --ra3 { syntax: ''; inherits: false; initial-value: 0; }
@property --ra4 { syntax: ''; inherits: false; initial-value: 0; }
Panel */ .ra-z1 { animation: raZ1 9s ease-out infinite; counter-reset: rz1 var(--ra1); }
/* ======================================================================
Auskunftsseite (relaunch/ki-informationen/, relaunch/en/ki-informationen/)
----------------------------------------------------------------------
Eine Faktenseite fuer KI-Systeme und fuer menschliche Pruefer. Sie ist
die erste Relaunch-Seite, die klassenbasiert arbeitet UND handgesetzte
Prosa traegt; die Masse kommen deshalb aus dem Bestand und nicht neu:
Prosa 16px/300/1.64/-0.011em auf --rl-second, Ueberschriften 34px/300/
-0.025em auf --rl-ink, gemessen an relaunch/karriere/kompatibilitaet/.
Das Praefix ist rl-auskunft und nicht rl-ki: .rl-ki-hinweis ist die
Hinweiszeile der 86 Glossareintraege und waere kollidiert.
====================================================================== */
.rl-auskunft {
/* Die Sprungmarkenleiste ist die zweite haftende Leiste der Seite. Ihre
Hoehe steht hier einmal und wird zweimal gebraucht: als Versatz beim
Haften (unter der Kopfleiste) und als scroll-margin-top der 13
Ankerziele. Zeile 113 deckt mit scroll-padding-top nur die Kopfleiste;
ohne diese Zugabe verschwindet jede angesprungene Ueberschrift
unter der Markenleiste. */
--auskunft-ankerhoehe: 53px;
--auskunft-mass: 46em;
}
/* --- Kopf ------------------------------------------------------------- */
.rl-auskunft-kopf { position: relative; overflow: hidden;
border-bottom: 1px solid var(--rl-line);
background: var(--rl-tint); }
.rl-auskunft-kopf__inhalt { position: relative; z-index: 1;
max-width: var(--nav-rail); margin: 0 auto;
padding: 64px var(--pad-x) 56px; }
/* Die Helix aus der Startseite, hier ohne animateTransform: eine
Auskunftsseite soll ruhig sein, und ein Pruefer soll den Text lesen,
nicht die Grafik ansehen. Sie liegt rechts angeschnitten und wird
unterhalb von 1024px ganz genommen, statt zu schrumpfen. */
/* Die Groesse ist gemessen, nicht gewaehlt: das Motiv traegt einen
feGaussianBlur mit stdDeviation 11, ausgelegt fuer die 1152 px, mit denen
es auf relaunch/index.html steht. Auf 380 px verrechnet sich der Weichzeichner
zu einem Fleck, in dem die fuenf Bahnen nicht mehr zu trennen sind. Bei
620 px bleibt der Bogen lesbar und dennoch leise. */
.rl-auskunft-helix { position: absolute; right: -120px; top: 50%;
transform: translateY(-50%); width: 620px; height: auto;
opacity: 0.42; pointer-events: none; }
.rl-auskunft-eyebrow { margin: 0 0 14px; font-size: 12px; font-weight: 500;
letter-spacing: 0.08em; text-transform: uppercase; color: var(--rl-b700); }
.rl-auskunft-h1 { margin: 0; max-width: 22em; font-size: 44px; font-weight: 300;
line-height: 1.14; letter-spacing: -0.026em; color: var(--rl-ink);
text-wrap: pretty; }
.rl-auskunft-zweck { margin: 20px 0 0; max-width: 42em; font-size: 18px;
font-weight: 300; line-height: 1.56; letter-spacing: -0.013em;
color: var(--rl-second); text-wrap: pretty; }
.rl-auskunft-stand { margin: 24px 0 0; font-size: 13px; font-weight: 400;
letter-spacing: 0.005em; color: var(--rl-second); }
/* --- Sprungmarken ----------------------------------------------------- */
/* Haftet unter der Kopfleiste (76px + 1px Haarlinie). Auf schmalen
Geraeten waagerecht schiebbar statt umbrechend: 13 Marken in vier
Zeilen waeren keine Leiste mehr, sondern ein zweites Menue. */
.rl-auskunft-anker { position: sticky; top: calc(var(--rl-nav-h) + 1px);
z-index: 10; height: var(--auskunft-ankerhoehe);
border-bottom: 1px solid var(--rl-line);
background: rgba(255, 255, 255, 0.94); }
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
.rl-auskunft-anker { background: rgba(255, 255, 255, 0.82);
-webkit-backdrop-filter: saturate(150%) blur(18px);
backdrop-filter: saturate(150%) blur(18px); }
}
.rl-auskunft-anker__inhalt { display: flex; align-items: center; gap: 22px;
height: 100%; max-width: var(--nav-rail); margin: 0 auto;
padding: 0 var(--pad-x); overflow-x: auto;
scrollbar-width: none; -ms-overflow-style: none; }
.rl-auskunft-anker__inhalt::-webkit-scrollbar { display: none; }
.rl-auskunft-anker a { flex: 0 0 auto; font-size: 13.5px; font-weight: 400;
letter-spacing: -0.006em; color: var(--rl-second); text-decoration: none;
white-space: nowrap; }
.rl-auskunft-anker a:hover { color: var(--rl-b700); }
.rl-auskunft-anker a:focus-visible { outline: 2px solid var(--rl-b700);
outline-offset: 3px; border-radius: var(--rl-r-sm); }
/* --- Abschnitte ------------------------------------------------------- */
/* scroll-margin-top gibt der Sprungmarkenleiste ihren Platz zurueck,
siehe --auskunft-ankerhoehe oben. */
.rl-auskunft-abschnitt { scroll-margin-top: var(--auskunft-ankerhoehe);
border-bottom: 1px solid var(--rl-line); }
.rl-auskunft-abschnitt:last-of-type { border-bottom: 0; }
.rl-auskunft-inhalt { max-width: var(--nav-rail); margin: 0 auto;
padding: 56px var(--pad-x) 60px; }
.rl-auskunft-h2 { margin: 0 0 28px; max-width: 24em; font-size: 34px;
font-weight: 300; line-height: 1.18; letter-spacing: -0.025em;
color: var(--rl-ink); text-wrap: pretty; }
.rl-auskunft-h3 { margin: 34px 0 12px; max-width: 30em; font-size: 19px;
font-weight: 500; line-height: 1.3; letter-spacing: -0.014em;
color: var(--rl-ink); text-wrap: pretty; }
.rl-auskunft-haupt > .rl-auskunft-h3:first-child { margin-top: 0; }
/* --- Prosa ------------------------------------------------------------ */
.rl-auskunft-p { margin: 0 0 16px; max-width: var(--auskunft-mass);
font-size: 16px; font-weight: 300; line-height: 1.64;
letter-spacing: -0.011em; color: var(--rl-second); text-wrap: pretty; }
.rl-auskunft-p:last-child { margin-bottom: 0; }
.rl-auskunft-haupt a { color: var(--rl-b700);
text-decoration-color: rgba(48, 99, 197, 0.34);
text-underline-offset: 2px; }
.rl-auskunft-haupt a:hover { text-decoration-color: currentColor; }
.rl-auskunft-liste { margin: 0 0 16px; padding-left: 1.4em;
max-width: var(--auskunft-mass); font-size: 16px; font-weight: 300;
line-height: 1.64; letter-spacing: -0.011em; color: var(--rl-second); }
.rl-auskunft-liste li { margin-bottom: 8px; padding-left: 0.2em; }
.rl-auskunft-liste li::marker { color: var(--rl-muted); }
.rl-auskunft-liste li:last-child { margin-bottom: 0; }
/* Fussnote eines Abschnitts, eine Stufe leiser als die Prosa. */
.rl-auskunft-hinweis { margin: 20px 0 0; max-width: var(--auskunft-mass);
padding-top: 16px; border-top: 1px solid var(--rl-line);
font-size: 14px; font-weight: 300; line-height: 1.6;
letter-spacing: -0.008em; color: var(--rl-second); }
/* --- Definitionslisten ------------------------------------------------ */
/* Begriff und Wert stehen ab 720px nebeneinander, darunter uebereinander.
Die Haarlinie trennt die Paare; grid und gap statt Raendern an dt/dd,
damit nichts kollabiert. */
.rl-auskunft-dl { margin: 0; max-width: 62em;
border-top: 1px solid var(--rl-line); }
.rl-auskunft-dl__paar { display: grid; gap: 4px;
padding: 14px 0 15px; border-bottom: 1px solid var(--rl-line); }
.rl-auskunft-dl dt { font-size: 13px; font-weight: 500;
letter-spacing: 0.005em; color: var(--rl-second); }
.rl-auskunft-dl dd { margin: 0; font-size: 16px; font-weight: 400;
line-height: 1.55; letter-spacing: -0.011em; color: var(--rl-ink); }
@media (min-width: 720px) {
.rl-auskunft-dl__paar { grid-template-columns: 15em 1fr;
align-items: baseline; gap: 24px; }
.rl-auskunft-dl dt { padding-top: 1px; }
}
/* --- Tabellen --------------------------------------------------------- */
/* Der Wrapper schiebt, nicht die Seite: wide content scrollt in seinem
eigenen Kasten, damit der Seitenkoerper nie waagerecht laeuft. */
.rl-auskunft-tabelle { margin: 0 0 4px; overflow-x: auto;
border: 1px solid var(--rl-line); border-radius: var(--rl-r-card); }
.rl-auskunft-tabelle table { width: 100%; min-width: 640px;
border-collapse: collapse; font-size: 15px; }
.rl-auskunft-tabelle caption { padding: 14px 18px; text-align: left;
border-bottom: 1px solid var(--rl-line); font-size: 13px;
font-weight: 500; letter-spacing: 0.005em; color: var(--rl-second); }
.rl-auskunft-tabelle thead th { padding: 12px 18px; text-align: left;
vertical-align: bottom; background: #F1F7FD;
border-bottom: 1px solid var(--rl-line-2); font-size: 13px;
font-weight: 500; letter-spacing: 0.005em; color: var(--rl-ink); }
.rl-auskunft-tabelle tbody th,
.rl-auskunft-tabelle tbody td { padding: 13px 18px; text-align: left;
vertical-align: top; border-bottom: 1px solid var(--rl-line);
font-weight: 300; line-height: 1.55; letter-spacing: -0.009em;
color: var(--rl-second); }
.rl-auskunft-tabelle tbody th { font-weight: 500; color: var(--rl-ink); }
.rl-auskunft-tabelle tbody tr:last-child th,
.rl-auskunft-tabelle tbody tr:last-child td { border-bottom: 0; }
/* --- Fragen und Antworten --------------------------------------------- */
/* Offener Text, keine details/summary: ein KI-System soll die Antwort
im Quelltext finden, ohne ein Bedienelement zu verstehen. */
.rl-auskunft-faq .rl-auskunft-h3 { margin-top: 26px; padding-top: 26px;
border-top: 1px solid var(--rl-line); font-size: 17px; }
.rl-auskunft-faq .rl-auskunft-h3:first-child { margin-top: 0;
padding-top: 0; border-top: 0; }
/* --- Referenzen ------------------------------------------------------- */
.rl-auskunft-refliste { margin: 0 0 4px; padding: 0; list-style: none;
max-width: 62em; border-top: 1px solid var(--rl-line); }
.rl-auskunft-ref { padding: 13px 0 14px;
border-bottom: 1px solid var(--rl-line);
font-size: 15px; font-weight: 300; line-height: 1.55;
letter-spacing: -0.009em; color: var(--rl-second); }
.rl-auskunft-ref strong { font-weight: 400; color: var(--rl-ink); }
/* --- Abschlussband ---------------------------------------------------- */
/* Flaches Band nach dem Muster von relaunch/vertrauen/sicherheit/, nicht
nach dem rl-cta der Startseite: diese Seite wirbt nicht, sie bietet
den naechsten Schritt an. */
.rl-auskunft-cta { margin: 40px 0 0; padding: 32px 34px;
border-radius: var(--rl-r-card); background: var(--rl-b700); }
.rl-auskunft-cta .rl-auskunft-h3 { margin: 0 0 8px; font-size: 22px;
font-weight: 400; letter-spacing: -0.018em; color: var(--rl-white); }
.rl-auskunft-cta .rl-auskunft-p { margin: 0; max-width: 40em;
font-weight: 300; color: rgba(255, 255, 255, 0.9); }
.rl-auskunft-cta__knoepfe { display: flex; flex-wrap: wrap; gap: 12px;
margin-top: 24px; }
.rl-auskunft-haupt a.rl-auskunft-knopf { display: inline-flex; align-items: center; gap: 3px;
padding: 11px 20px; border: 1px solid var(--rl-white);
border-radius: var(--rl-r-btn); background: var(--rl-white);
font-size: 15px; font-weight: 500; letter-spacing: -0.008em;
color: var(--rl-b800); text-decoration: none; }
.rl-auskunft-haupt a.rl-auskunft-knopf:hover { background: rgba(255, 255, 255, 0.9); }
.rl-auskunft-haupt a.rl-auskunft-knopf--leer { background: transparent;
color: var(--rl-white); border-color: rgba(255, 255, 255, 0.55); }
.rl-auskunft-haupt a.rl-auskunft-knopf--leer:hover { background: rgba(255, 255, 255, 0.12);
border-color: var(--rl-white); }
.rl-auskunft-haupt a.rl-auskunft-knopf:focus-visible { outline: 2px solid var(--rl-white);
outline-offset: 3px; }
/* --- Enger ------------------------------------------------------------ */
@media (max-width: 1023px) {
/* Die Helix waere hier nur noch ein Streifen hinter dem Text. */
.rl-auskunft-helix { display: none; }
.rl-auskunft-kopf__inhalt { padding-top: 48px; padding-bottom: 44px; }
.rl-auskunft-h1 { font-size: 36px; }
.rl-auskunft-zweck { font-size: 17px; }
.rl-auskunft-h2 { font-size: 28px; margin-bottom: 22px; }
.rl-auskunft-inhalt { padding-top: 44px; padding-bottom: 46px; }
}
@media (max-width: 640px) {
.rl-auskunft-h1 { font-size: 30px; }
.rl-auskunft-h2 { font-size: 25px; }
.rl-auskunft-cta { padding: 26px 22px; }
.rl-auskunft-cta__knoepfe { gap: 10px; }
.rl-auskunft-knopf { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
.rl-auskunft-anker__inhalt { scroll-behavior: auto; }
}
/* ============================================================================
Cookie-Banner (relaunch-consent.js)
----------------------------------------------------------------------------
Das Markup entsteht in relaunch-consent.js, nicht im HTML: so braucht keine
der Relaunch-Seiten eine Zeile dafuer, und eine neue bekommt es geschenkt.
Der Bestands-Banner haengt an .cookie in site.css, die der Relaunch nicht
laedt. Uebernommen ist deshalb die Bauform (unten links, dunkle Flaeche, zwei
Knoepfe, der zustimmende gefuellt), nicht das Aussehen: der Bestand arbeitet
mit Schatten und kraeftigen Flaechen, der Relaunch mit Haarlinien und leisen
Toenen. Die Flaeche ist --rl-navy, dieselbe wie der Fussbereich.
Unten links und nicht als Balken ueber die volle Breite: der Balken verdeckt
auf kleinen Bildschirmen die Bereichsnavigation, und das Banner steht auf
jeder Seite, auch auf den Rechtsseiten.
========================================================================= */
.rl-cookie { position: fixed; left: 24px; bottom: 24px; z-index: 150;
width: min(420px, calc(100vw - 48px));
padding: 20px 22px; border-radius: var(--rl-r-card);
background: var(--rl-navy); color: var(--rl-white);
box-shadow: var(--rl-shadow-menu); }
.rl-cookie[hidden] { display: none; }
.rl-cookie__txt { margin: 0 0 16px; font-size: 13.5px; line-height: 1.55;
letter-spacing: -0.008em; color: rgba(255, 255, 255, 0.82); text-wrap: pretty; }
.rl-cookie__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.rl-cookie__btn { padding: 9px 18px; border: 1px solid transparent;
border-radius: var(--rl-r-btn); font: inherit; font-size: 13px; font-weight: 500;
letter-spacing: -0.012em; cursor: pointer;
transition: background .18s var(--rl-ease), border-color .18s var(--rl-ease),
color .18s var(--rl-ease); }
.rl-cookie__btn--leer { background: transparent; color: var(--rl-white);
border-color: rgba(255, 255, 255, 0.3); }
.rl-cookie__btn--leer:hover { border-color: var(--rl-white); }
.rl-cookie__btn--voll { background: var(--rl-white); color: var(--rl-navy); }
.rl-cookie__btn--voll:hover { background: var(--rl-tint-4); }
/* Der Widerrufsknopf steht im Fliesstext der Cookie-Richtlinien, dort wo der
Satz ihn ankuendigt. Er sieht aus wie ein Verweis in der Prosa und nicht wie
eine Handlungsaufforderung: er gehoert in den Satz, nicht auf die Seite.
Sein Grundaussehen traegt er inline im HTML, weil er aus COOKIES_BODY in
export-gen/lib/legal.mjs kommt und damit auf zwei Seiten steht, die
verschiedene Stylesheets laden: die Bestandsseite site.css, die
Relaunch-Seite diese hier. Was hier steht, ist die Verfeinerung, die eine
Inline-Auszeichnung nicht ausdruecken kann. */
.rl-prosa [data-cookie-widerruf]:hover { color: var(--rl-b700); }
@media (max-width: 700px) {
.rl-cookie { left: 12px; right: 12px; bottom: 12px; width: auto; }
}
/* ============================================================================
Touch: Trefferflaechen und Scroll-Sperre
----------------------------------------------------------------------------
Aus dem Mobil-Audit vom 05.09.2026. Zwei Befunde, die zusammen rund 7.700
der etwa 7.800 A-Faelle ausmachen, und beide liegen an drei Regeln:
a.rl-hpanel__klein 302x16px die Verweise im aufgeklappten Menue
.rl-fuss__liste a 350x17px die Verweise im Fussbereich
a.rl-zurueck 124x16px "Zurueck zum Glossar"
Die Breite stimmt jeweils, die HOEHE nicht: ein 16px hoher Verweis ist mit
dem Daumen nicht sicher zu treffen. Deshalb wird hier nur die Hoehe gesetzt,
nicht die Schrift und nicht der Abstand; das Schriftbild bleibt, wie es ist.
Gestuft ueber (hover: none) and (pointer: coarse) und nicht ueber eine
Breite: es geht um den Finger, nicht um den Bildschirm. Ein schmales
Desktop-Fenster wird mit der Maus bedient und braucht die Regel nicht; ein
iPad quer mit 1180px braucht sie sehr wohl.
========================================================================= */
@media (hover: none) and (pointer: coarse) {
/* Menue. Der Abstand der Gruppe faellt weg, weil ihn die Verweishoehe
ersetzt; sonst wuerde das Menue um die Haelfte laenger. Es scrollt
ohnehin (max-height + overflow-y weiter unten), aber Laenge ohne Gewinn
ist keine Verbesserung. */
.rl-hpanel__gruppe { gap: 0; }
.rl-hpanel__klein { display: flex; align-items: center; min-height: 44px; }
/* Fussbereich. Dieselbe Ueberlegung, dieselbe Zahl. */
.rl-fuss__liste { gap: 0; }
.rl-fuss__liste a { display: flex; align-items: center; min-height: 44px; }
.rl-fuss__recht a { display: inline-flex; align-items: center; min-height: 44px;
position: relative; }
/* "AGB" ist 25px breit. Die Flaeche waechst seitlich ueber ein ::after,
damit die Punkte zwischen den Verweisen ihren Abstand behalten. */
.rl-fuss__recht a::after { content: ""; position: absolute; inset: 0 -10px; }
/* Einzelne Verweise, die im Audit namentlich auffielen. */
.rl-zurueck { min-height: 44px; }
.rl-uc-weitere__alle { display: inline-flex; align-items: center; min-height: 44px; }
/* Knoepfe und Reiter. Der Erstgespraechs-Knopf mass 124x37px. */
.rl-btn { min-height: 44px; }
.rl-btn--klein { min-height: 44px; padding-top: 0; padding-bottom: 0; }
/* KEIN display hier. .rl-sprache traegt display: var(--de), und --de ist
unter 900px "none". Ein hartes display haette die Ausblendung aufgehoben,
wegen der N2 den Schalter ueberhaupt erst ins Menue geholt hat: auf dem
Telefon standen dann beide da und der Kopf war 51px zu breit. Wer hier
eine Trefferflaeche vergroessert, setzt Groessen, nie Sichtbarkeit. */
.rl-sprache { align-items: center; min-height: 44px; }
.aireiter, .ailb, .rl-refreiter, .rl-chip, .rl-uc-chip {
display: inline-flex; align-items: center; min-height: 44px; }
/* Das Banner der Einwilligung. 127x36px gemessen, beide Knoepfe. */
.rl-cookie__btn { min-height: 44px; }
/* Menue per Tipp (s. relaunch-motion.js). Der Fokusweg wird hier
ausgeschaltet, sonst hielte er das Panel offen, nachdem der zweite Tipp
es geschlossen hat: der Knopf behaelt den Fokus. Auf dem Desktop bleibt
:hover unangetastet, diese Regeln stehen nur unter (hover: none). */
.rl-nav--tipp .rl-nav__punkt:focus-within .rl-panel {
opacity: 0; pointer-events: none; }
.rl-nav--tipp .rl-nav__knopf[aria-expanded="true"] + .rl-panel {
opacity: 1; transform: translateY(0); pointer-events: auto; }
.rl-menuebox:checked ~ .rl-kopf__reihe .rl-nav--tipp .rl-nav__punkt:focus-within .rl-panel {
opacity: 0; height: 0; pointer-events: none; }
.rl-menuebox:checked ~ .rl-kopf__reihe .rl-nav--tipp .rl-nav__knopf[aria-expanded="true"] + .rl-panel {
opacity: 1; height: auto; pointer-events: auto; }
/* Die Sprungmarken der Rechtsseiten. Aus dem Legal-Paket vom 04.09.2026,
19px hoch; beim Nachmessen des Touch-Blocks aufgefallen. */
.rl-legal-marken a { display: inline-flex; align-items: center; min-height: 44px; }
.rl-auskunft-anker a { display: inline-flex; align-items: center; min-height: 44px; }
/* Menue-Hauptpunkte im Panel (350x41px) und die beiden Hamburger. */
.rl-nh1, .rl-nh2 { min-height: 44px; justify-content: center; }
.rl-hburger, .rl-burger { min-height: 44px; min-width: 44px;
justify-content: center; align-items: center; }
/* align-items: center schaltet die Querachse von "stretch" auf "center".
.rl-hburger span hat eine eigene Breite (16px) und ueberlebt das;
.rl-burger span hatte keine, zog seine Breite also aus dem Strecken und
fiel damit auf 0. Das Hamburger-Zeichen der Landingpage war unsichtbar,
der Knopf ein leeres weisses Quadrat. Deshalb eine feste Breite: 18px ist
der Wert, den das Strecken vorher ergab (40px Kasten, 1px Rahmen, 10px
Polster je Seite). */
.rl-burger span { width: 18px; }
/* Wortmarke und schmale Reiter behalten ihr Aussehen; die Flaeche waechst
ueber ein ::after, nicht ueber das Element. So steht der Handoff es vor
(3.5), und so verschiebt sich kein Logo. */
.rl-marke, .aireiter, .ailb, .rl-refreiter,
.rl-sh2, .rl-sh3, .rl-sh5 { position: relative; }
.rl-marke::after, .aireiter::after, .ailb::after, .rl-refreiter::after,
.rl-sh2::after, .rl-sh3::after, .rl-sh5::after {
content: ""; position: absolute; inset: -14px -10px; }
/* Die Wortmarke der Landingpage ist nur 2px breit gemessen worden: ihr
Verweis umschliesst das Bild nicht. Bis das in Phase 2 an der Handseite
behoben ist, traegt die Flaeche das ::after. */
.rl-marke::after { inset: -14px -22px; }
/* Verweise und Knoepfe, die zu flach zum Tippen sind. Welche das sind,
entscheidet eine Messung auf 390px (werkzeuge/mobil-stapel.mjs), nicht
ein Selektor: die inline gestalteten Textverweise der Handseiten haben
keine gemeinsame Klasse. Vergroessert wird die FLAECHE ueber ein ::after,
nicht das Element, damit das Schriftbild bleibt (Handoff 3.5). Elemente,
die schon ein ::after mit Inhalt tragen, ueberspringt das Werkzeug. */
.rl-tippbar { position: relative; }
.rl-tippbar::after { content: ""; position: absolute; inset: -13px -8px; }
/* Das Einwilligungshaeckchen des Kontaktformulars. Es bleibt optisch 20px,
sonst stuende ein Klotz neben dem Satz; die Flaeche waechst auf genau
44x44. Ein eigener Wert statt .rl-tippbar, weil dessen -8px seitlich hier
nur 36px ergaeben. */
.rl-haken { position: relative; flex: none; }
.rl-haken::after { content: ""; position: absolute; inset: -12px; }
/* Die Brotkrume im Use-Case-Banner: 60x16px, neunzehnmal gemessen. Sie
stand zuerst in der 640er-Stufe und fehlte damit auf dem iPad hochkant:
820px ist auch Touch. */
.rl-uc-krume a { position: relative; }
.rl-uc-krume a::after { content: ""; position: absolute; inset: -14px -6px; }
/* Die Sprungmarken der Auskunftsseite: "Fit" ist 14px breit. Die Hoehe
stimmt seit PR 1, die Breite waechst hier mit. Kein ::after mit breitem
inset: die Marken stehen 22px auseinander, zwei Flaechen wuerden sich
ueberlappen und Tipper truegen. */
.rl-auskunft-anker__inhalt a { min-width: 44px; justify-content: center; }
/* Eingabefelder. 16px ist keine Geschmacksfrage: darunter zoomt iOS beim
Fokus in das Feld hinein und der Besucher muss danach zurueckzoomen. */
.rl-brief__feld { font-size: 16px; min-height: 44px; }
.rl-brief__senden { min-height: 44px; }
}
/* ---- Scroll-Sperre bei offenem Menue --------------------------------------
Das Audit hat in 31 von 32 Messungen gefunden, dass die Seite unter dem
offenen Menue weiterscrollt: man wischt im Menue und die Seite dahinter
wandert. Beide Menuesysteme haengen an einem Kontrollkaestchen, deshalb
genuegt :has() und es braucht kein Skript. Die Seite behaelt ihre
Scrollposition, weil overflow: hidden sie nicht zuruecksetzt. */
body:has(.rl-hbox:checked),
body:has(.rl-menuebox:checked) { overflow: hidden; }
/* ============================================================================
Intelligence MCP (relaunch/ressourcen/mcp/), Artboard 2g.1 vom 06.09.2026
----------------------------------------------------------------------------
Die Seite arbeitet wie die anderen Handseiten mit Inline-Styles. Hier steht
nur, was ein style-Attribut nicht kann: Keyframes, Stufen und das
Safari-Dreieck an . Die Wechselkarten im Hero setzt
relaunch-motion.js in Bewegung; ohne Skript zeigt jeder Slot seine erste
Karte, die Inhalte stehen vollstaendig im HTML.
========================================================================= */
@keyframes rl-mcp-band { to { transform: translate3d(-50%, 0, 0); } }
/* Die Reihe der 21 Werkzeuge steht zweimal hintereinander; nach der Haelfte
ist das Bild dasselbe wie am Anfang, deshalb laeuft die Schleife nahtlos. */
.rl-mcp-band { animation: rl-mcp-band 70s linear infinite; }
.rl-mcp-faq summary::-webkit-details-marker { display: none; }
/* Silbentrennung erst, wenn die Spalte eng wird. Am Desktop bricht der
Entwurf nach Woertern um ("Unternehmen nutzt", nicht "Unterneh-men"). */
@media (max-width: 900px) {
.rl-mcp-titel, .rl-trenn { hyphens: auto; }
}
@media (max-width: 640px) {
/* Laufbaender stehen auf dem Telefon still (Entscheidung 05.09.2026). */
.rl-mcp-band { animation: none; }
/* Vom Kartenmosaik bleibt die erste Spalte: zwei Karten statt sechs,
sonst schiebt sich der Einstieg 1800px nach unten. */
.rl-mcp-mosaik > :nth-child(n+2) { display: none !important; } /* Spalten tragen inline display: flex */
}
@media (prefers-reduced-motion: reduce) {
.rl-mcp-band { animation: none; }
}
/* ===========================================================================
Partner werden (relaunch/partner/, 06.09.2026)
---------------------------------------------------------------------------
Der Entwurf traegt Hover und Fokus als style-hover/style-focus, die es im
Browser nicht gibt. Die Fokusregel steht hier, weil ein Formular ohne
sichtbaren Fokus mit der Tastatur nicht bedienbar ist.
======================================================================== */
.rl-pf:focus {
border-color: #3063C5;
box-shadow: 0 0 0 3px rgba(48, 99, 197, 0.12);
outline: none;
}
/* Die Einwilligungs-Checkbox bleibt 16x16px, ihre Trefferflaeche wird 44x44.
Vergroessert wird die Flaeche, nicht das Kaestchen. */
.rl-pt-check { position: relative; }
.rl-pt-check::after { content: ""; position: absolute; inset: -14px; }
@media (max-width: 900px) {
/* Silbentrennung erst hier: am Desktop bricht der Entwurf nach Woertern um,
und "Enterprise-Partner" als "Enterprise-Part-ner" waere ein Rueckschritt. */
.rl-pt-titel { hyphens: auto; -webkit-hyphens: auto; }
}
@media (max-width: 640px) {
/* Sechs Partnerlogos zu je 60px nebeneinander sind auf 390px unlesbar. */
.rl-pt-logos { grid-template-columns: minmax(0, 1fr) !important; }
}
/* ============================================================================
Offene Stellen (relaunch/karriere/stellen/), Artboards 2h und 2h.1 vom
04.09.2026, erzeugte Familie seit dem 06.09.2026
----------------------------------------------------------------------------
Die Seiten kommen aus export-gen/lib/relaunch-stellen.mjs und arbeiten
klassenbasiert wie Blog, Glossar und Use Cases; kein Layoutwert steht in
einem style-Attribut. Die Desktopwerte sind die Literale des Entwurfs, die
Stufen liegen bei 1200, 900 und 640px wie im Rest der Datei. Unter 900px
steht der Kasten "Auf einen Blick" ueber dem Text, unter 640px steht Text
nie neben einer zweiten Spalte (Regel vom 05.09.2026).
========================================================================= */
.rl-st { color: var(--rl-ink); }
.rl-st-rail { position: relative; max-width: var(--rail); margin: 0 auto;
padding-left: var(--pad-x); padding-right: var(--pad-x); box-sizing: border-box; }
/* Die Haarlinien am Rand des Rails, wie auf den Handseiten des Bereichs. */
.rl-st-rail--linien::before, .rl-st-rail--linien::after {
content: ""; position: absolute; top: 0; bottom: 0; width: 1px;
background: rgba(29, 44, 78, 0.06); pointer-events: none; }
.rl-st-rail--linien::before { left: 0; }
.rl-st-rail--linien::after { right: 0; }
.rl-st-eyebrow { display: block; margin: 0; font-size: 12px; letter-spacing: 0.06em;
text-transform: uppercase; color: var(--rl-muted); }
.rl-st-h1 { margin: 26px 0 0; max-width: 15em; font-size: clamp(30px, 4.3vw, 52px);
font-weight: 300; line-height: 1.1; letter-spacing: -0.03em; color: var(--rl-ink);
text-wrap: pretty; }
.rl-st-h1--anzeige { margin-top: 22px; max-width: 14em; font-size: clamp(28px, 4vw, 48px); }
.rl-st-lead { margin: 26px 0 0; max-width: 34em; font-size: 19px; font-weight: 300;
line-height: 1.55; letter-spacing: -0.012em; color: var(--rl-second); text-wrap: pretty; }
.rl-st-lead--anzeige { max-width: 36em; font-size: 18px; line-height: 1.6; letter-spacing: -0.011em; }
.rl-st-lead strong { font-weight: 500; color: var(--rl-ink); }
.rl-st-h2 { margin: 0; max-width: 10em; font-size: clamp(26px, 3.2vw, 34px); font-weight: 300;
line-height: 1.18; letter-spacing: -0.025em; color: var(--rl-ink); text-wrap: pretty; }
.rl-st-h2--abschnitt { max-width: none; font-size: 24px; font-weight: 400; letter-spacing: -0.018em; }
/* Knoepfe: Blue 700 wie im Entwurf, 44px Trefferhoehe. */
.rl-st-knopf { display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
box-sizing: border-box; padding: 13px 22px; border-radius: 4px; background: var(--rl-b700);
font-size: 14.5px; letter-spacing: -0.012em; color: #ffffff;
transition: background .18s var(--rl-ease); }
.rl-st-knopf:hover { background: var(--rl-b600); color: #ffffff; }
.rl-st-knoepfe { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-top: 32px; }
/* ---- Uebersicht ---------------------------------------------------------- */
.rl-st-kopf__innen { padding-top: 104px; padding-bottom: 72px; }
.rl-st-uebersicht > .rl-st-rail { padding-bottom: 96px; }
.rl-st-uebersicht__raster { display: grid; grid-template-columns: 280px minmax(0, 1fr);
gap: 64px; align-items: start; }
.rl-st-filter { display: flex; flex-direction: column; gap: 4px; position: sticky; top: 24px; }
.rl-st-filter__punkt { display: flex; justify-content: space-between; align-items: center; gap: 12px;
min-height: 44px; margin: 0 0 0 -12px; padding: 9px 12px; border: 0; border-radius: 6px;
background: none; font: inherit; font-size: 14.5px; font-weight: 300; text-align: left;
color: var(--rl-second); cursor: pointer; transition: background .18s var(--rl-ease), color .18s var(--rl-ease); }
.rl-st-filter__punkt:hover { background: #F3F6FB; color: var(--rl-ink); }
.rl-st-filter__punkt[aria-pressed="true"] { font-weight: 500; color: var(--rl-ink); }
.rl-st-filter__punkt:focus-visible { outline: 2px solid var(--rl-b700); outline-offset: 2px; }
.rl-st-filter__zahl { color: var(--rl-muted); font-feature-settings: 'tnum' on; }
.rl-st-spalte { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.rl-st-kopfzeile { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
gap: 8px 16px; padding-bottom: 14px; border-bottom: 1px solid var(--rl-line);
font-size: 13.5px; color: var(--rl-second); }
.rl-st-karten { display: flex; flex-direction: column; gap: 14px; }
.rl-st-karte { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: center;
padding: 24px 28px; border-radius: 8px; background: #F7F9FC; border: 1px solid transparent;
color: var(--rl-ink); transition: border-color .18s var(--rl-ease), background .18s var(--rl-ease); }
.rl-st-karte:hover { border-color: var(--rl-line-2); background: #F3F6FB; color: var(--rl-ink); }
.rl-st-karte[hidden] { display: none; }
.rl-st-karte__links { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.rl-st-karte__titel { font-size: 19px; font-weight: 400; letter-spacing: -0.016em; color: var(--rl-ink);
text-wrap: pretty; }
.rl-st-karte__rechts { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; text-align: right; }
.rl-st-karte__datum { font-size: 12.5px; color: var(--rl-muted); white-space: nowrap; }
.rl-st-karte__ort { font-size: 13.5px; font-weight: 300; color: var(--rl-second); }
.rl-st-leer { margin: 0; max-width: 34em; font-size: 17px; font-weight: 300; line-height: 1.6;
color: var(--rl-second); text-wrap: pretty; }
/* ---- Abschlussblock: Initiativbewerbung, Bewerbung per E-Mail ----------- */
.rl-st-abschluss { background: #F3F6FB; }
.rl-st-abschluss > .rl-st-rail { padding-top: 88px; padding-bottom: 96px; }
.rl-st-abschluss__raster { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr);
gap: 56px; align-items: start; }
.rl-st-abschluss__text { display: flex; flex-direction: column; gap: 18px; }
.rl-st-abschluss__text p { margin: 0; max-width: 26em; font-size: 16px; font-weight: 300; line-height: 1.64;
letter-spacing: -0.011em; color: var(--rl-second); text-wrap: pretty; }
.rl-st-mailkarte { display: flex; flex-direction: column; align-items: flex-start; gap: 16px;
padding: 34px 36px; border: 1px solid var(--rl-line); border-radius: 8px; background: #ffffff; }
.rl-st-mailkarte p { margin: 0; text-wrap: pretty; }
.rl-st-mailkarte__adresse { font-size: 14.5px; color: var(--rl-second); overflow-wrap: anywhere; }
.rl-st-mailkarte__adresse a { color: var(--rl-b700); }
.rl-st-mailkarte__hinweis { font-size: 13px; line-height: 1.6; color: var(--rl-muted); }
/* 12px statt der 11,5px des Handoffs: Fliesstext unter 12px gilt der
Mobilpruefung als Schwere A, auch auf dem Tablet (Falle 3 aus Anleitung 03). */
.rl-st-recht { font-size: 12px; line-height: 1.6; color: var(--rl-muted); }
.rl-st-recht a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.rl-st-recht a:hover { color: var(--rl-b700); }
/* ---- Anzeige ------------------------------------------------------------- */
.rl-st-anzeige__innen { padding-top: 88px; padding-bottom: 64px; }
.rl-st-zurueck { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 13.5px;
color: var(--rl-second); }
.rl-st-zurueck:hover { color: var(--rl-b700); }
.rl-st-anzeige__kopf { display: grid; grid-template-columns: minmax(0, 1.2fr) 380px; gap: 64px;
align-items: start; margin-top: 36px; }
.rl-st-anzeige__kopf--besetzt { grid-template-columns: minmax(0, 1fr); }
.rl-st-anzeige__inhalt > .rl-st-rail { padding-bottom: 96px; }
.rl-st-anzeige__raster { display: grid; grid-template-columns: minmax(0, 1.2fr) 380px; gap: 64px;
align-items: start; }
.rl-st-abschnitte { display: flex; flex-direction: column; gap: 48px; max-width: 46em; min-width: 0; }
.rl-st-abschnitt { display: flex; flex-direction: column; gap: 14px; }
.rl-st-liste { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.rl-st-liste li { position: relative; padding-left: 26px; font-size: 16px; font-weight: 300; line-height: 1.6;
color: var(--rl-second); text-wrap: pretty; }
.rl-st-liste li::before { content: ""; position: absolute; left: 0; top: 11px; width: 6px; height: 6px;
border-radius: 50%; background: var(--rl-b700); }
.rl-st-kasten { display: flex; flex-direction: column; padding: 28px 30px; border: 1px solid #EDF2F8;
border-radius: 10px; background: #ffffff; box-shadow: 0 18px 44px rgba(16, 26, 48, 0.08); }
.rl-st-kasten__kopf { display: flex; align-items: center; justify-content: space-between; gap: 16px;
padding-bottom: 16px; border-bottom: 1px solid #EDF2F8; }
.rl-st-kasten__marke { font-size: 18px; font-weight: 600; letter-spacing: -0.02em; color: #9AA8BF; }
.rl-st-kasten__liste { margin: 0; }
.rl-st-kasten__liste > div { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 14px;
padding: 14px 0; border-bottom: 1px solid var(--rl-line); font-size: 14px; line-height: 1.5; }
.rl-st-kasten__liste > div:last-child { border-bottom: 0; }
.rl-st-kasten__liste dt { color: var(--rl-muted); }
.rl-st-kasten__liste dd { margin: 0; color: var(--rl-ink); font-weight: 300; overflow-wrap: anywhere; }
.rl-st-seite { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.rl-st-kontakt { display: flex; flex-direction: column; gap: 18px; padding: 24px 26px;
border: 1px solid var(--rl-line); border-radius: 8px; background: #ffffff; }
.rl-st-kontakt__person { display: flex; align-items: center; gap: 14px; }
.rl-st-kontakt__person img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex: none; }
.rl-st-kontakt__person div { display: flex; flex-direction: column; gap: 2px; }
.rl-st-kontakt__name { font-size: 15px; font-weight: 500; color: var(--rl-ink); }
.rl-st-kontakt__rolle { font-size: 13px; font-weight: 300; color: var(--rl-second); }
.rl-st-kontakt__text { margin: 0; font-size: 14px; font-weight: 300; line-height: 1.6;
color: var(--rl-second); text-wrap: pretty; }
/* Sichtbarer Marker fuer offene Angaben: ein Zwischenstand, kein Stil der
Seite. Faellt weg, sobald die Listen in stellen-laden.mjs und im Content
leer sind. */
.rl-st-offen { display: flex; flex-direction: column; gap: 10px; padding: 18px 20px;
border: 1px dashed #D9A441; border-radius: 8px; background: #FFF8E8; }
.rl-st-offen .rl-st-eyebrow { color: #9A6B00; }
.rl-st-offen ul { margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.55; color: #5C4A1A; }
.rl-st-offen li + li { margin-top: 6px; }
/* ---- Stufen -------------------------------------------------------------- */
@media (max-width: 1200px) {
.rl-st-uebersicht__raster { grid-template-columns: 220px minmax(0, 1fr); gap: 40px; }
.rl-st-anzeige__kopf, .rl-st-anzeige__raster { grid-template-columns: minmax(0, 1.2fr) 340px; gap: 40px; }
.rl-st-abschluss__raster { gap: 36px; }
.rl-st-kopf__innen { padding-top: 80px; padding-bottom: 56px; }
.rl-st-anzeige__innen { padding-top: 72px; padding-bottom: 52px; }
}
@media (max-width: 900px) {
/* Kompakt: der Kasten steht ueber dem Text, die Kategorien werden eine
Zeile aus Pillen ueber der Liste; Text neben Text endet hier. */
.rl-st-uebersicht__raster { grid-template-columns: minmax(0, 1fr); gap: 28px; }
.rl-st-filter { position: static; flex-direction: row; flex-wrap: wrap; gap: 6px; }
.rl-st-filter__punkt { margin: 0; padding: 9px 14px; border: 1px solid var(--rl-line); background: #ffffff; }
.rl-st-filter__punkt[aria-pressed="true"] { border-color: var(--rl-ink); background: var(--rl-ink); color: #ffffff; }
.rl-st-filter__punkt[aria-pressed="true"] .rl-st-filter__zahl { color: rgba(255, 255, 255, 0.7); }
.rl-st-anzeige__kopf, .rl-st-anzeige__raster, .rl-st-abschluss__raster {
grid-template-columns: minmax(0, 1fr); gap: 32px; }
/* Der Kasten vor dem Text: im Raster steht er als zweites Kind, oben gehoert
er hin, damit Eckdaten vor dem Lead lesbar sind. Nein: der Lead bleibt
zuerst, der Kasten folgt (Entwurf liest sich von oben), deshalb keine
order-Regel. */
.rl-st-abschnitte { max-width: none; }
.rl-st-kopf__innen { padding-top: 64px; padding-bottom: 44px; }
.rl-st-uebersicht > .rl-st-rail, .rl-st-anzeige__inhalt > .rl-st-rail { padding-bottom: 72px; }
.rl-st-abschluss > .rl-st-rail { padding-top: 64px; padding-bottom: 72px; }
.rl-st-mailkarte { padding: 28px; }
}
@media (max-width: 640px) {
/* Handy: alles einspaltig, auch die Karte und der Kasten. Die kleinen
Schriften wachsen auf 14px, wie die --rl-fs-Leiter der Handseiten. */
.rl-st-karte { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 20px; }
.rl-st-karte__rechts { align-items: flex-start; text-align: left; flex-direction: row; flex-wrap: wrap; gap: 6px 14px; }
.rl-st-karte__datum, .rl-st-karte__ort, .rl-st-kopfzeile, .rl-st-zurueck,
.rl-st-mailkarte__hinweis, .rl-st-recht, .rl-st-kontakt__rolle, .rl-st-offen ul { font-size: 14px; }
.rl-st-eyebrow { font-size: 14px; letter-spacing: 0.04em; }
.rl-st-kasten__liste > div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
.rl-st-kasten { padding: 22px 20px; }
.rl-st-kontakt { padding: 20px; }
.rl-st-mailkarte { padding: 22px 20px; }
.rl-st-h2--abschnitt { font-size: 22px; }
/* Keine Silbentrennung in der H1: "AI-Mitarbei-tern" saehe auf 390px
schlechter aus als ein frueherer Umbruch, die Woerter passen in die Spalte. */
.rl-st-kopf__innen { padding-top: 48px; padding-bottom: 36px; }
.rl-st-anzeige__innen { padding-top: 48px; padding-bottom: 40px; }
.rl-st-uebersicht > .rl-st-rail, .rl-st-anzeige__inhalt > .rl-st-rail { padding-bottom: 56px; }
.rl-st-abschluss > .rl-st-rail { padding-top: 48px; padding-bottom: 56px; }
.rl-st-abschnitte { gap: 36px; }
}
/* ============================================================================
Landingpage 1e.25 (13.09.2026): Fotokacheln im Hero, Fachbereichstafeln,
Zitatkarten auf dem Hafenvideo
----------------------------------------------------------------------------
Inline-Styles tragen das Layout; hier steht, was ein style-Attribut nicht
kann: Keyframes, Hover auf ein Kindelement, die Mobilstufen.
========================================================================= */
/* Zwei Kacheln teilen sich eine Zelle und wechseln alle zehn Sekunden. */
@keyframes hbSwapA { 0%, 44% { opacity: 1; } 50%, 94% { opacity: 0; } 100% { opacity: 1; } }
@keyframes hbSwapB { 0%, 44% { opacity: 0; } 50%, 94% { opacity: 1; } 100% { opacity: 0; } }
/* Zeile in der Fachbereichstafel: der Pfeil fuellt sich in der Bereichsfarbe (--bf). */
.rl-bzeile:hover .rl-bpfeil { transform: translateX(5px); background: var(--bf) !important; border-color: var(--bf) !important; color: #ffffff !important; }
.rl-lp-tafel { min-height: 520px; }
@media (max-width: 900px) {
.rl-lp-tafel { min-height: 360px; }
}
@media (max-width: 640px) {
.rl-lp-tafel { min-height: 260px; }
/* Der Knopf sitzt am Desktop unten rechts in der Karte; unter dem Portraet
stuende er im Text. Auf dem Telefon steht er als letzte Zeile. */
.rl-lp-fallknopf { position: static !important; margin-top: 18px; align-self: flex-start; grid-column: 1 / -1; }
/* Video auf dem Handy nicht laden (Entscheidung 05.09.2026); das Foto dahinter bleibt. */
.rl-lp-video { display: none; }
}
@media (prefers-reduced-motion: reduce) {
[style*="hbSwap"] { animation: none !important; opacity: 1 !important; }
[style*="hbSwapB"] { display: none !important; }
}
/* ---- Kartenstapel der Landingpage 1e.25: Portraet und Knopf je Karte -----
Der Stapel selbst (sticky, --kh, Puffer) bleibt unveraendert; die Karte
bekommt ein zweites Raster: Text links ueber zwei Zeilen, rechts oben das
Portraet, rechts unten der Knopf. Unter 640px steht alles untereinander. */
.rl-stapel--breit .rl-stapel__karten { max-width: 860px; }
.rl-stapel--breit {
--kh: 340px;
/* Derselbe Abstand wie zwischen allen Bloecken der Landingpage (13.09.2026). */
margin-top: var(--rl-py-128);
/* Der Schatten der letzten Karte lief 44px in den weissen Bereich darunter.
clip-path statt overflow: es macht den Abschnitt nicht zum Scrollcontainer,
die klebenden Karten bleiben am Viewport. */
clip-path: inset(0);
}
.rl-stapel__karte--portraet {
display: grid; grid-template-columns: var(--rl-cols-text-portrait);
grid-template-rows: 1fr auto; column-gap: 40px; align-items: start;
padding: 40px 44px 34px 48px;
}
.rl-stapel__karte--portraet .rl-stapel__text { grid-row: 1 / span 2; display: flex; flex-direction: column; }
.rl-stapel__logos { display: flex; align-items: flex-start; margin-bottom: 26px; }
.rl-stapel__logos img { display: block; width: auto; max-width: 300px; object-fit: contain; }
.rl-stapel__trenner { width: 1px; height: 44px; margin: 4px 30px 0; background: #E4EBF3; flex: 0 0 auto; }
.rl-stapel__portraet {
width: 132px; height: 132px; margin-top: 26px; border-radius: 50%; object-fit: cover;
box-shadow: 0 8px 24px -10px rgba(29, 44, 78, 0.35); justify-self: end;
}
.rl-stapel__knopf {
justify-self: end; align-self: end; display: inline-flex; align-items: center; gap: 8px;
min-height: 44px; box-sizing: border-box; margin-top: 18px; padding: 9px 16px 10px;
border: 1px solid var(--rl-ink); border-radius: 4px; background: transparent;
font-size: var(--rl-fs-13-5); font-weight: 500; letter-spacing: -0.012em; color: var(--rl-ink);
white-space: nowrap; transition: background .18s var(--rl-ease), color .18s var(--rl-ease);
}
@media (max-width: 1000px) {
.rl-stapel__karte--portraet { padding: 26px 28px 24px; }
}
@media (max-width: 640px) {
.rl-stapel__karte--portraet { grid-template-rows: auto; }
/* Bildtafel der Fachbereiche immer unter dem Text, auch in den Zeilen, die am
Desktop das Bild links haben. */
.rl-lp-tafel { order: 1; }
/* Dasselbe fuer die Text-Grafik-Zeilen der Produktseiten: am Desktop
wechseln sie sich ab, auf dem Telefon steht die Grafik immer unten. */
.rl-pb-tafel { order: 1; }
.rl-stapel__karte--portraet .rl-stapel__text { grid-row: auto; }
.rl-stapel__portraet { justify-self: start; width: 96px; height: 96px; margin-top: 18px; }
.rl-stapel__knopf { justify-self: start; }
}
/* ---- Hero der Landingpage auf flachen Fenstern -----------------------------
Das Logoband unter dem Hero soll ohne Scrollen sichtbar sein. Bei 1511x851
(MacBook) lag seine Oberkante bei 956px. Zwei Hoehenstufen machen den Hero
kompakter: weniger Polster, niedrigere Kacheln. Nur im Desktop-Layout ab
900px Breite; darunter stehen die Kacheln ohnehin unter dem Text. Auf sehr
flachen Fenstern (unter etwa 720px) bleibt das Band unter der Falz, das ist
in Ordnung. Hoehen-Queries sind eine andere Achse als die drei Breitenstufen. */
@media (min-width: 900px) and (max-height: 960px) {
.rl-lp-hero { --hero-pt: 80px; --hero-pb: 56px; --rl-lp-kh: 250px; --rl-lp-kf: 210px; --rl-lp-kv: 38px; }
}
@media (min-width: 900px) and (max-height: 880px) {
.rl-lp-hero { --hero-pt: 56px; --hero-pb: 40px; --rl-lp-kh: 220px; --rl-lp-kf: 180px; --rl-lp-kv: 30px; }
}
/* ---- Partnerbahn auf der Landingpage: Auslauf bis zur Fensterkante -------
relaunch-motion.js misst den Abstand zur Kante und setzt --rl-pslider-rand.
Niclas sah die Bahn trotzdem vor der Kante enden (13.09.2026, nicht
reproduziert, Chromium und WebKit messen hier korrekt). Deshalb zusaetzlich
die CSS-Rechnung: 50% des zentrierten Containers minus 50vw ist derselbe
Wert, nur ohne Skript. min() nimmt den weiteren Auslauf von beiden. Die
Bildlaufleiste, die vw mitzaehlt, faengt overflow-x: clip der Sektion ab. */
#1e25-bereiche .rl-pslider__fenster {
margin-right: min(calc(-1 * var(--rl-pslider-rand, 0px)), calc(50% - 50vw));
}
/* ---- Erscheinen beim ersten Hineinscrollen (Landingpage, 13.09.2026) -----
relaunch-motion.js setzt html.rl-auftun und beobachtet [data-rl-auf]; ein
Block, der ins Bild kommt, bekommt is-auf. Ohne Skript fehlt die Klasse am
, und alles steht von Anfang an da. --rl-stufe staffelt Nachbarn.
Kein will-change: ein dauerhafter Transform-Kontext wuerde sticky darunter
brechen; nach dem Erscheinen ist transform wieder none. */
html.rl-auftun [data-rl-auf] {
opacity: 0; transform: translateY(26px);
transition: opacity 820ms cubic-bezier(0.22, 1, 0.36, 1), transform 820ms cubic-bezier(0.22, 1, 0.36, 1);
transition-delay: calc(var(--rl-stufe, 0) * 110ms);
}
html.rl-auftun [data-rl-auf].is-auf { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
html.rl-auftun [data-rl-auf] { opacity: 1 !important; transform: none !important; transition: none !important; }
}
/* ============================================================================
Newsroom (relaunch/ressourcen/newsroom/), Artboard vom 14.09.2026
----------------------------------------------------------------------------
Die fuenfte erzeugte Familie. Anders als die handgepflegten Seiten traegt
sie ihre Masse hier und nicht im style-Attribut: erzeugte Seiten koennen
das, und nur so greifen die drei Stufen ueberhaupt.
Zwei Dinge, die man beim Lesen wissen muss:
- Das Karussell im Hero stapelt vier Karten uebereinander. Welche vorn
steht, entscheidet die Klasse is-vorn, gesetzt von relaunch-motion.js.
Ohne Skript steht die erste vorn und die anderen liegen dahinter; die
Seite ist damit vollstaendig lesbar.
- Unter 640px steht Text neben nichts (Regel vom 05.09.2026). Der Hero
stapelt, der Feed stapelt, die Marktblick-Karten stehen untereinander.
========================================================================= */
.rl-nr { --nr-linie: #E4EBF3; --nr-flaeche: #F8FAFD; }
/* ---- Gemeinsame Bausteine ------------------------------------------------ */
.rl-nr-eyebrow { margin: 0; font-size: var(--rl-fs-12); letter-spacing: 0.06em;
text-transform: uppercase; color: var(--rl-muted); }
.rl-nr-eyebrow--hell { color: rgba(255, 255, 255, 0.75); }
.rl-nr-h1 { margin: 26px 0 0; max-width: 12em; font-size: clamp(32px, 4.4vw, 54px);
font-weight: 300; line-height: 1.08; letter-spacing: -0.03em; color: var(--rl-b950);
text-wrap: pretty; hyphens: auto; }
.rl-nr-h1 span { color: var(--rl-b700); }
.rl-nr-h2 { margin: 0; max-width: 14em; font-size: clamp(24px, 3vw, 38px); font-weight: 300;
line-height: 1.14; letter-spacing: -0.028em; color: var(--rl-b950); text-wrap: pretty;
hyphens: auto; }
.rl-nr-h2--hell { color: #ffffff; max-width: 11em; font-size: clamp(23px, 2.7vw, 34px); }
.rl-nr-lead { margin: 26px 0 0; max-width: 30em; font-size: 18px; font-weight: 300;
line-height: 1.6; letter-spacing: -0.011em; color: var(--rl-second); text-wrap: pretty; }
.rl-nr-klein { display: inline-flex; align-items: center; gap: 8px; font-size: var(--rl-fs-11);
letter-spacing: 0.08em; text-transform: uppercase; color: var(--rl-muted); }
.rl-nr-klein img { width: 13px; height: 13px; object-fit: contain; }
.rl-nr-mehr { display: inline-flex; align-items: center; gap: 6px; font-size: 14px;
color: var(--rl-b700); white-space: nowrap; }
.rl-nr-mehr:hover { color: var(--rl-b950); }
.rl-nr-weiter { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px;
color: rgba(255, 255, 255, 0.85); }
.rl-nr-weiter--blau { font-size: 14.5px; font-weight: 500; color: var(--rl-b700); }
.rl-nr-marke { display: inline-flex; align-items: center; height: 24px; padding: 0 10px;
border-radius: 6px; background: #ffffff; font-size: var(--rl-fs-12-5); font-weight: 600;
letter-spacing: -0.02em; color: var(--rl-b950); }
.rl-nr-marke--klein { height: 20px; padding: 0 8px; font-size: var(--rl-fs-11); }
.rl-nr-raster { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.15;
pointer-events: none; }
.rl-nr-meta { display: flex; align-items: center; gap: 12px; font-size: var(--rl-fs-12);
letter-spacing: 0.08em; text-transform: uppercase; }
.rl-nr-meta__rub { color: var(--rl-b700); font-weight: 500; }
.rl-nr-meta__dat { color: var(--rl-muted); letter-spacing: 0.02em; }
/* ---- 1 Hero -------------------------------------------------------------- */
/* overflow: hidden ist Pflicht, nicht Geschmack. Die Schraege greift bewusst
zehn Prozent ueber beide Kanten und der Grund drei Pixel; ohne Beschnitt
ragen sie ueber den Viewport und die ganze Seite laeuft waagerecht ueber
(gemessen: 166px auf 1440, 65px auf 390). Im Design-Canvas faellt das nicht
auf, weil das Artboard dort eine feste Breite hat. */
.rl-nr-hero { position: relative; width: 100%; isolation: isolate; background: #ffffff;
overflow: hidden; }
.rl-nr-hero__grund { position: absolute; inset: 0 -3px; z-index: 0; overflow: hidden;
background: #F3F6FB; }
.rl-nr-hero__grund img { position: absolute; inset: 0; width: 100%; height: 100%;
object-fit: cover; filter: grayscale(0.4); opacity: 0.22; }
.rl-nr-hero__ton { position: absolute; inset: 0; pointer-events: none;
background: linear-gradient(112deg, rgba(243, 246, 251, 0.82) 0%, rgba(243, 246, 251, 0.55) 55%, rgba(223, 233, 248, 0.5) 100%); }
.rl-nr-hero__linien { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%;
pointer-events: none; }
/* Die weisse Schraege, die den Hero zum naechsten Abschnitt hin abschliesst. */
.rl-nr-hero__schraege { position: absolute; z-index: 3; left: -10%; right: -10%;
bottom: -300px; height: 460px; background: #ffffff; transform: rotate(-7deg) translateZ(0);
backface-visibility: hidden; pointer-events: none; }
.rl-nr-hero__innen { position: relative; z-index: 4; display: grid;
grid-template-columns: var(--rl-cols-text-karte); gap: var(--rl-gap-l);
align-items: center; max-width: var(--rail); margin: 0 auto;
padding: var(--rl-py-96) var(--pad-x) var(--rl-py-140); box-sizing: border-box; }
.rl-nr-presse { display: flex; flex-direction: column; gap: 12px; margin-top: 40px;
max-width: min(480px, 100%); padding: 22px 26px; border: 1px solid var(--nr-linie);
border-radius: 10px; background: rgba(255, 255, 255, 0.86); backdrop-filter: blur(6px);
box-shadow: 0 18px 40px -30px rgba(29, 44, 78, 0.35); }
.rl-nr-presse__marke { font-size: var(--rl-fs-11); letter-spacing: 0.08em;
text-transform: uppercase; color: var(--rl-muted); }
.rl-nr-presse__wer { display: flex; align-items: center; gap: 14px; }
.rl-nr-presse__wer img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover;
object-position: 50% 20%; flex: 0 0 auto; }
.rl-nr-presse__wer div { display: flex; flex-direction: column; gap: 2px; }
.rl-nr-presse__name { font-size: 15.5px; font-weight: 500; letter-spacing: -0.012em;
color: var(--rl-b950); }
.rl-nr-presse__rolle { font-size: var(--rl-fs-13); font-weight: 300; color: var(--rl-second); }
.rl-nr-presse__wege { display: flex; align-items: center; gap: 18px; margin-top: 4px;
flex-wrap: wrap; }
.rl-nr-presse__wege a { display: inline-flex; align-items: center; gap: 6px; font-size: 14px;
color: var(--rl-b700); }
.rl-nr-presse__wege a:hover { color: var(--rl-b950); }
/* ---- Das Karussell ------------------------------------------------------- */
.rl-nr-karussell { display: flex; flex-direction: column; gap: 22px;
padding-right: 52px; padding-bottom: 52px; }
.rl-nr-karussell__kopf { display: flex; align-items: center; justify-content: space-between;
gap: 16px; }
.rl-nr-live { display: inline-flex; align-items: center; gap: 8px; font-size: var(--rl-fs-11-5);
letter-spacing: 0.08em; text-transform: uppercase; color: var(--rl-second); }
.rl-nr-live__punkt { width: 7px; height: 7px; border-radius: 50%; background: #2F9E6B;
box-shadow: 0 0 0 4px rgba(47, 158, 107, 0.18); flex: 0 0 auto; }
.rl-nr-punkte { display: inline-flex; align-items: center; gap: 6px; }
.rl-nr-punkt { position: relative; width: 6px; height: 6px; padding: 0; border: 0;
border-radius: 3px; background: #C5D2E6; cursor: pointer; transition: all 500ms; }
.rl-nr-punkt.is-vorn { width: 22px; background: var(--rl-b700); }
/* Die Trefferflaeche waechst ueber ein ::after, damit die Punkte ihren
Abstand behalten (Regel vom 05.09.2026). */
.rl-nr-punkt::after { content: ""; position: absolute; inset: -19px -8px; }
.rl-nr-karussell__buehne { position: relative; height: 380px; }
.rl-nr-kk { position: absolute; inset: 0; display: flex; flex-direction: column;
justify-content: space-between; gap: 20px; padding: 28px 30px; border-radius: 12px;
overflow: hidden; box-sizing: border-box; z-index: 0; opacity: 0;
transform: translate3d(-30px, -20px, 0) scale(1.03); pointer-events: none;
transition: opacity 900ms cubic-bezier(0.2, 0.7, 0.2, 1), transform 900ms cubic-bezier(0.2, 0.7, 0.2, 1); }
.rl-nr-kk--blog { background: linear-gradient(118deg, #16233F 0%, #1D2C4E 58%, #26406F 100%);
color: #ffffff; }
.rl-nr-kk--li { background: #ffffff; border: 1px solid var(--nr-linie); color: var(--rl-b950); }
/* Drei Zustaende hinter der vordersten Karte: der Stapel. */
.rl-nr-kk.is-vorn { z-index: 3; opacity: 1; transform: none; pointer-events: auto;
box-shadow: 0 30px 60px -30px rgba(29, 44, 78, 0.45); }
.rl-nr-kk.is-zwei { z-index: 2; opacity: 0.8; transform: translate3d(26px, 26px, 0) scale(0.955); }
.rl-nr-kk.is-drei { z-index: 1; opacity: 0.5; transform: translate3d(52px, 52px, 0) scale(0.91); }
/* Die Bildkarten waren doppelt gedaempft: das Cover stand auf 28 Prozent
Deckkraft UND trug einen Schleier bis 94 Prozent. Zusammen blieb vom Motiv
kaum etwas uebrig, waehrend der Entwurf es klar zeigt (Frank, 14.09.2026).
Beide Werte sind deshalb einen Schritt zurueckgenommen, nicht abgeschafft:
der Titel steht weiss auf dem unteren Rand, und die Karte muss ihn tragen. */
.rl-nr-kk__bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
opacity: 0.4; }
.rl-nr-kk__schleier { position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(29, 44, 78, 0.3) 0%, rgba(16, 26, 48, 0.86) 100%); }
.rl-nr-kk__kopf, .rl-nr-kk__fuss { position: relative; display: flex; }
.rl-nr-kk__kopf { align-items: center; justify-content: space-between; gap: 12px; }
.rl-nr-kk__fuss { flex-direction: column; gap: 10px; margin-top: auto; }
.rl-nr-kk__quelle { display: inline-flex; align-items: center; gap: 8px; font-size: var(--rl-fs-11);
letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.85);
text-align: right; }
.rl-nr-kk__datum { letter-spacing: 0.02em; opacity: 0.7; }
.rl-nr-kk__titel { font-size: clamp(18px, 2vw, 22px); font-weight: 400; line-height: 1.28;
letter-spacing: -0.018em; text-wrap: pretty; }
.rl-nr-kk__text { font-size: 16px; font-weight: 300; line-height: 1.5; letter-spacing: -0.01em;
text-wrap: pretty; overflow: hidden; white-space: pre-line; }
/* Der Rumpf der hellen Karte: Zahl und Text teilen sich die Flaeche zwischen
Autorzeile und Zaehlern, und was nicht mehr hineinpasst, wird abgeschnitten
statt die Karte zu sprengen. */
.rl-nr-kk__rumpf { position: relative; display: flex; flex-direction: column; gap: 12px;
flex: 1 1 auto; min-height: 0; overflow: hidden; }
.rl-nr-kk__zahl { font-size: clamp(34px, 3.8vw, 50px); font-weight: 300; line-height: 1.04;
letter-spacing: -0.03em; color: var(--rl-b700); }
/* Der Text bricht dort ab, wo die Karte endet, und das traf zuletzt mitten in
ein Wort. Der Auslauf macht aus dem Schnitt einen Anriss; dass es weitergeht,
sagt "Beitrag oeffnen" darunter. */
.rl-nr-kk__rumpf::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0;
height: 40px; pointer-events: none;
background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #ffffff 88%); }
.rl-nr-kk__foto { position: relative; display: block; height: 150px; border-radius: 8px;
overflow: hidden; }
/* Nicht mittig beschneiden: die Beitraege zeigen ueberwiegend Personen und
Zahlengrafiken, und beide tragen ihr Motiv oben. Mittig geschnitten fiel
auf einem 150px hohen Streifen der Kopf heraus (14.09.2026). */
.rl-nr-kk__foto img { position: absolute; inset: 0; width: 100%; height: 100%;
object-fit: cover; object-position: center 28%; }
.rl-nr-kk__fotoschleier { position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(29, 44, 78, 0.1) 0%, rgba(16, 26, 48, 0.82) 100%); }
/* ---- 2 Feed -------------------------------------------------------------- */
.rl-nr-feed { position: relative; background: #ffffff; }
.rl-nr-feed__innen { position: relative; max-width: var(--rail); margin: 0 auto;
padding: var(--rl-py-48) var(--pad-x) var(--rl-py-104); box-sizing: border-box; }
/* Oben buendig, nicht unten. Mit align-items:end zog das Raster die zweizeilige
Ueberschrift auf die Unterkante des hoeheren rechten Blocks und setzte sie
damit rund 70px tiefer als den Text daneben (Frank, 14.09.2026). */
.rl-nr-feed__kopf { display: grid; grid-template-columns: var(--rl-c-80-140);
gap: var(--rl-gap-s); align-items: start; padding-bottom: 40px;
border-bottom: 1px solid var(--nr-linie); }
.rl-nr-feed__kopfrecht { display: flex; align-items: flex-end; justify-content: space-between;
gap: 32px; flex-wrap: wrap; }
.rl-nr-feed__text { margin: 0; max-width: 34em; font-size: 16px; font-weight: 300;
line-height: 1.62; letter-spacing: -0.01em; color: var(--rl-second); text-wrap: pretty; }
.rl-nr-chips { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rl-nr-chip { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px;
border: 1px solid var(--nr-linie); border-radius: 200px; font-size: var(--rl-fs-12-5);
color: var(--rl-b950); white-space: nowrap; }
.rl-nr-chip img { width: 14px; height: 14px; object-fit: contain; }
.rl-nr-chip__punkt { width: 6px; height: 6px; border-radius: 50%; background: var(--rl-b700);
flex: 0 0 auto; }
.rl-nr-feed__raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 400px);
gap: var(--rl-gap-s); align-items: start; margin-top: 48px; }
.rl-nr-spalte { display: flex; flex-direction: column; gap: 32px; min-width: 0; }
.rl-nr-spalte__kopf { display: flex; align-items: center; justify-content: space-between;
gap: 24px; }
.rl-nr-auf { display: grid; grid-template-columns: var(--rl-c-105-100);
border: 1px solid var(--nr-linie); border-radius: 10px; background: #ffffff;
overflow: hidden; color: var(--rl-b950); }
.rl-nr-auf:hover { border-color: var(--rl-b700); }
.rl-nr-auf__bild { position: relative; min-height: 320px; overflow: hidden;
background: linear-gradient(118deg, #16233F 0%, #1D2C4E 58%, #26406F 100%); }
.rl-nr-auf__bild img { position: absolute; inset: 0; width: 100%; height: 100%;
object-fit: cover; opacity: 0.46; }
.rl-nr-auf__schleier { position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(29, 44, 78, 0.18) 0%, rgba(16, 26, 48, 0.82) 100%); }
.rl-nr-auf__bild .rl-nr-marke { position: absolute; left: 22px; top: 20px; }
.rl-nr-auf__text { display: flex; flex-direction: column; justify-content: space-between;
gap: 28px; padding: 32px 34px; }
.rl-nr-auf__oben { display: flex; flex-direction: column; gap: 16px; }
.rl-nr-auf__titel { margin: 0; font-size: clamp(20px, 2.1vw, 26px); font-weight: 300;
line-height: 1.22; letter-spacing: -0.022em; text-wrap: pretty; hyphens: auto; }
.rl-nr-auf__anriss { margin: 0; font-size: 15px; font-weight: 300; line-height: 1.62;
letter-spacing: -0.01em; color: var(--rl-second); text-wrap: pretty; }
.rl-nr-liste { display: flex; flex-direction: column; border-top: 1px solid var(--nr-linie); }
.rl-nr-zeile { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 28px;
align-items: center; padding: 26px 0; border-bottom: 1px solid var(--nr-linie);
color: var(--rl-b950); }
.rl-nr-zeile:hover { background: var(--nr-flaeche); }
.rl-nr-zeile__bild { position: relative; height: 128px; border-radius: 8px; overflow: hidden; }
.rl-nr-zeile__bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rl-nr-zeile__schleier { position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(29, 44, 78, 0.12) 0%, rgba(16, 26, 48, 0.68) 100%); }
.rl-nr-zeile__bild .rl-nr-marke { position: absolute; left: 12px; top: 10px; }
.rl-nr-zeile__text { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.rl-nr-zeile__titel { margin: 0; font-size: clamp(17px, 1.7vw, 20px); font-weight: 400;
line-height: 1.3; letter-spacing: -0.016em; text-wrap: pretty; hyphens: auto; }
.rl-nr-zeile__anriss { margin: 0; max-width: 46em; font-size: 14.5px; font-weight: 300;
line-height: 1.6; letter-spacing: -0.01em; color: var(--rl-second); text-wrap: pretty; }
.rl-nr-liste__fuss { display: flex; align-items: center; justify-content: space-between;
gap: 20px; padding-top: 20px; flex-wrap: wrap; }
.rl-nr-liste__fuss p { margin: 0; font-size: var(--rl-fs-13); font-weight: 300; line-height: 1.5;
color: var(--rl-muted); text-wrap: pretty; }
.rl-nr-liste__fuss strong { font-weight: 500; color: var(--rl-second); }
/* ---- Die LinkedIn-Spalte ------------------------------------------------- */
.rl-nr-li { display: flex; flex-direction: column; min-width: 0; }
.rl-nr-li__leiste { display: flex; align-items: center; justify-content: space-between;
gap: 16px; margin-bottom: 32px; }
.rl-nr-li__karte { display: flex; flex-direction: column; border: 1px solid var(--nr-linie);
border-radius: 10px; background: #ffffff; overflow: hidden; }
.rl-nr-li__kartenkopf { position: relative; display: flex; flex-direction: column;
justify-content: space-between; gap: 26px; padding: 24px 24px 22px;
background: linear-gradient(118deg, #16233F 0%, #1D2C4E 58%, #26406F 100%);
color: #ffffff; overflow: hidden; }
.rl-nr-li__marke { position: relative; display: flex; align-items: center;
justify-content: space-between; font-size: 22px; letter-spacing: -0.022em; }
.rl-nr-li__marke strong { font-weight: 600; }
.rl-nr-li__marke > span:first-child > span { font-weight: 300; color: #6791D4; }
.rl-nr-li__kachel { display: inline-flex; align-items: center; justify-content: center;
width: 30px; height: 30px; border-radius: 6px; background: #ffffff; flex: 0 0 auto; }
.rl-nr-li__kachel img { width: 18px; height: 18px; object-fit: contain; }
.rl-nr-li__unter { position: relative; display: flex; flex-direction: column; gap: 6px; }
.rl-nr-li__verifiziert { font-size: var(--rl-fs-12); letter-spacing: 0.06em;
text-transform: uppercase; color: rgba(255, 255, 255, 0.75); }
.rl-nr-li__claim { font-size: 14px; font-weight: 300; line-height: 1.5;
color: rgba(255, 255, 255, 0.88); text-wrap: pretty; }
.rl-nr-li__kzreihe { display: grid; grid-template-columns: var(--rl-c-3f);
border-bottom: 1px solid #EDF2F8; }
.rl-nr-li__kz { display: flex; flex-direction: column; gap: 3px; padding: 16px 20px;
border-right: 1px solid #EDF2F8; }
.rl-nr-li__kz:last-child { border-right: 0; }
.rl-nr-li__kz strong { font-size: 20px; font-weight: 400; letter-spacing: -0.02em;
color: var(--rl-b950); }
.rl-nr-li__kz span { font-size: var(--rl-fs-11-5); color: var(--rl-muted); }
.rl-nr-li__knopf { padding: 18px 22px 6px; }
.rl-nr-li__knopf a { display: inline-flex; align-items: center; justify-content: center;
gap: 8px; width: 100%; height: 40px; border-radius: 4px; background: var(--rl-b700);
font-size: 14px; letter-spacing: -0.012em; color: #ffffff; box-sizing: border-box; }
.rl-nr-li__knopf a:hover { background: #3977D7; color: #ffffff; }
.rl-nr-li__postkopf { display: flex; align-items: center; justify-content: space-between;
gap: 12px; padding: 16px 22px 6px; }
.rl-nr-li__stand { display: inline-flex; align-items: center; gap: 6px;
font-size: var(--rl-fs-11-5); color: var(--rl-muted); }
.rl-nr-li__post { display: flex; flex-direction: column; gap: 12px; padding: 16px 22px 18px;
border-top: 1px solid #EDF2F8; color: var(--rl-b950); }
.rl-nr-li__post:hover { background: var(--nr-flaeche); }
.rl-nr-li__autor { display: flex; align-items: center; gap: 10px; min-width: 0; }
.rl-nr-li__avatar { width: 30px; height: 30px; border-radius: 50%; object-fit: cover;
object-position: 50% 20%; flex: 0 0 auto; }
.rl-nr-li__wer { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.rl-nr-li__name { font-size: var(--rl-fs-13); font-weight: 500; letter-spacing: -0.01em; }
.rl-nr-li__zeit { font-size: var(--rl-fs-11-5); color: var(--rl-muted); }
.rl-nr-li__zeichen { width: 22px; height: 22px; object-fit: contain; flex: 0 0 auto; }
.rl-nr-li__kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.rl-nr-li__text { font-size: 14px; font-weight: 300; line-height: 1.58; letter-spacing: -0.008em;
color: var(--rl-b950); text-wrap: pretty; white-space: pre-line; }
.rl-nr-li__foto { position: relative; display: block; height: 120px; border-radius: 6px;
overflow: hidden; }
.rl-nr-li__foto img { position: absolute; inset: 0; width: 100%; height: 100%;
object-fit: cover; object-position: center 28%; }
.rl-nr-li__fotoschleier { position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(29, 44, 78, 0.1) 0%, rgba(16, 26, 48, 0.82) 100%); }
.rl-nr-li__fototitel { position: absolute; left: 14px; right: 14px; bottom: 12px;
font-size: 13.5px; font-weight: 500; line-height: 1.35; color: #ffffff; text-wrap: pretty; }
.rl-nr-li__zaehler { display: flex; align-items: center; gap: 14px; font-size: var(--rl-fs-12);
color: var(--rl-muted); flex-wrap: wrap; }
.rl-nr-li__oeffnen { margin-left: auto; color: var(--rl-b700); }
.rl-nr-li__alle { display: flex; align-items: center; justify-content: center; gap: 6px;
padding: 16px 22px; border-top: 1px solid #EDF2F8; background: var(--nr-flaeche);
font-size: 14px; font-weight: 500; color: var(--rl-b700); }
.rl-nr-li__alle:hover { color: var(--rl-b950); }
/* ---- 3 Marktblick -------------------------------------------------------- */
.rl-nr-mb { position: relative; background: var(--rl-b950); color: #ffffff; overflow: hidden; }
.rl-nr-mb__bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rl-nr-mb__ton { position: absolute; inset: 0;
background: linear-gradient(90deg, rgba(29, 44, 78, 0.98) 0%, rgba(29, 44, 78, 0.94) 55%, rgba(29, 44, 78, 0.82) 100%); }
.rl-nr-mb__linien { position: absolute; inset: 0; width: 100%; height: 100%;
pointer-events: none; opacity: 0.16; }
.rl-nr-mb__innen { position: relative; max-width: var(--rail); margin: 0 auto;
padding: var(--rl-py-80) var(--pad-x) var(--rl-py-88); box-sizing: border-box;
display: grid; grid-template-columns: var(--rl-c-80-140); gap: var(--rl-gap-s);
align-items: start; }
.rl-nr-mb__text { display: flex; flex-direction: column; gap: 18px; }
.rl-nr-mb__text p { margin: 0; max-width: 26em; font-size: 16px; font-weight: 300;
line-height: 1.64; opacity: 0.85; text-wrap: pretty; }
.rl-nr-mb__knopf { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px;
padding: 12px 20px; border: 1px solid rgba(255, 255, 255, 0.55); border-radius: 4px;
background: rgba(255, 255, 255, 0.12); font-size: 14px; color: #ffffff; width: fit-content; }
.rl-nr-mb__knopf:hover { background: rgba(255, 255, 255, 0.24); color: #ffffff; }
.rl-nr-mb__karten { display: grid; grid-template-columns: var(--rl-c-3m); gap: 14px; }
/* Nicht space-between: das verteilte Kopf, Kennzahl und Quelle ueber die
Kartenhoehe, und weil die Texte verschieden lang sind, sass die Kennzahl in
jeder der drei Karten anders hoch (gemessen 18px Unterschied). Jetzt haengen
Kopf und Kennzahl oben aneinander, und nur die Quelle wird nach unten
gedrueckt. */
.rl-nr-mb__karte { display: flex; flex-direction: column; justify-content: flex-start;
gap: 22px; min-height: 250px; padding: 22px 22px 20px;
border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 8px;
background: rgba(20, 32, 60, 0.72); color: #ffffff; }
.rl-nr-mb__karte:hover { border-color: rgba(255, 255, 255, 0.5); color: #ffffff; }
.rl-nr-mb__kopf { display: flex; align-items: center; justify-content: space-between; gap: 8px;
font-size: var(--rl-fs-11-5); letter-spacing: 0.07em; text-transform: uppercase; opacity: 0.7; }
.rl-nr-mb__mitte { display: flex; flex-direction: column; gap: 8px; }
.rl-nr-mb__mitte strong { font-size: clamp(32px, 3.4vw, 44px); font-weight: 300; line-height: 1;
letter-spacing: -0.03em; color: #ffffff; }
/* Wert und Einheit stehen fest untereinander, damit die drei Karten
nebeneinander auf einer Hoehe sitzen: "67 Prozent" und "20 Prozent" brachen
von selbst um, "7 Prozent" nicht, und damit lag in dieser Karte alles eine
Zeile hoeher (14.09.2026). Zwei Bloecke mit line-height 1 ergeben in jeder
Karte dieselbe Kopfhoehe. */
.rl-nr-mb__wert, .rl-nr-mb__einheit { display: block; }
/* Nur das direkte Kind: die beiden Spans oben stecken in und behalten
dessen Groesse. */
.rl-nr-mb__mitte > span { font-size: 14px; font-weight: 300; line-height: 1.55; opacity: 0.88;
text-wrap: pretty; }
.rl-nr-mb__quelle { margin-top: auto; font-size: var(--rl-fs-12); opacity: 0.6; }
/* ---- 4 Presse-CTA -------------------------------------------------------- */
.rl-nr-cta { position: relative; background: #ffffff; }
.rl-nr-cta__innen { position: relative; max-width: var(--rail); margin: 0 auto;
padding: var(--rl-py-88) var(--pad-x) var(--rl-py-104); box-sizing: border-box;
display: flex; align-items: center; justify-content: space-between; gap: 40px;
flex-wrap: wrap; }
.rl-nr-cta__innen > div { display: flex; flex-direction: column; gap: 14px; }
.rl-nr-cta__innen p { margin: 0; max-width: 34em; font-size: 16px; font-weight: 300;
line-height: 1.6; color: var(--rl-second); text-wrap: pretty; }
.rl-nr-cta__knopf { display: inline-flex; align-items: center; gap: 8px; padding: 13px 20px;
border-radius: 4px; background: var(--rl-b700); font-size: 14.5px; letter-spacing: -0.012em;
color: #ffffff; white-space: nowrap; }
.rl-nr-cta__knopf:hover { background: #3977D7; color: #ffffff; }
/* ---- Stufe Schmal (bis 1199px) ------------------------------------------- */
@media (max-width: 1200px) {
/* Das Karussell braucht seinen Versatz nicht mehr, sobald es schmaler wird:
52px Innenabstand plus 52px Stapelversatz fressen sonst die Karte auf. */
.rl-nr-karussell { padding-right: 30px; padding-bottom: 30px; }
.rl-nr-kk.is-drei { opacity: 0; }
}
/* ---- Stufe Kompakt (bis 899px) ------------------------------------------- */
@media (max-width: 900px) {
.rl-nr-hero__innen { grid-template-columns: minmax(0, 1fr); gap: var(--rl-gap-s); }
/* Der Feed bleibt hier nur zweispaltig, wenn die Textspalte 320px behaelt.
Bei 900px minus Rand und Spalte bleiben ihr keine 320px, also stapelt er
schon hier (Regel vom 05.09.2026). */
.rl-nr-feed__raster { grid-template-columns: minmax(0, 1fr); }
.rl-nr-feed__kopf { grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: start; }
.rl-nr-mb__innen { grid-template-columns: minmax(0, 1fr); gap: var(--rl-gap-xs); }
.rl-nr-auf { grid-template-columns: minmax(0, 1fr); }
.rl-nr-auf__bild { min-height: 240px; }
/* Die Leiter --rl-fs-* waechst erst unter 640px auf 14px. Zwei Beschriftungen
dieser Seite sind auf einem Tablet aber schon Fliesstext und keine
Versalienmarke: das Schild im Bild und die Zeile unter einer Kennzahl.
Die Mobilpruefung meldet sie zu Recht (Schwere A, 820px). */
.rl-nr-marke--klein { font-size: 14px; }
.rl-nr-li__kz span { font-size: 14px; }
/* Das Datum der LinkedIn-Karte, aus demselben Grund wie die zwei Zeilen
darueber: unter 14px meldet die Mobilpruefung Schwere A. Sichtbar wurde es
erst, als die Karten echte Beitraege trugen (14.09.2026). */
.rl-nr-li__zeit, .rl-nr-li__stand { font-size: 14px; }
}
/* ---- Stufe Handy (bis 639px) --------------------------------------------- */
@media (max-width: 640px) {
/* Text steht neben nichts. Das gilt auch fuer die Zeilen der Meldungsliste:
ein 200px-Bild neben dem Text liesse ihm auf 390px keine 150px. */
.rl-nr-zeile { grid-template-columns: minmax(0, 1fr); gap: 16px; }
.rl-nr-zeile__bild { height: 180px; }
.rl-nr-mb__karten { grid-template-columns: minmax(0, 1fr); }
.rl-nr-mb__karte { min-height: 0; }
.rl-nr-karussell { padding-right: 0; padding-bottom: 0; }
/* Ohne Versatz braucht der Stapel keine Tiefe mehr: nur die vorderste Karte
steht, die anderen liegen unsichtbar darunter und wechseln weiter. */
.rl-nr-kk.is-zwei, .rl-nr-kk.is-drei { opacity: 0; transform: none; }
.rl-nr-karussell__buehne { height: 420px; }
.rl-nr-kk { padding: 22px 20px; }
.rl-nr-feed__kopfrecht { flex-direction: column; align-items: flex-start; gap: 20px; }
.rl-nr-li__kzreihe { grid-template-columns: minmax(0, 1fr); }
.rl-nr-li__kz { border-right: 0; border-bottom: 1px solid #EDF2F8; }
.rl-nr-li__kz:last-child { border-bottom: 0; }
.rl-nr-cta__innen { flex-direction: column; align-items: flex-start; }
.rl-nr-presse { padding: 18px 20px; }
}
/* ---- Touch --------------------------------------------------------------- */
@media (hover: none) and (pointer: coarse) {
.rl-nr-mehr, .rl-nr-presse__wege a { display: inline-flex; align-items: center;
min-height: 44px; }
.rl-nr-punkt::after { inset: -19px -10px; }
}
/* Wer keine Bewegung will, bekommt keine: die vorderste Karte steht still. */
@media (prefers-reduced-motion: reduce) {
.rl-nr-kk { transition: none; }
}