/* ==========================================================================
leXpro — Leistungsseiten
==========================================================================
Nur die Bausteine, die es AUSSCHLIESSLICH auf Leistungsseiten gibt. Alles andere
kommt unverändert aus design.css: `.v2` als Wurzel, `.v2-h2`, `.v2-lines`, `.v2-lead`,
`.v2-lit*`, `.v2-figures`, `.v2-quotes`, `.v2-logos`/`.v2-band`, `.v2-paper`, `.v2-faq`,
`.v2-contact*` samt der 215 Zeilen Elementor-Formular-Formatierung, `.v2-map`, `.v2-pause`.
Warum eine eigene Datei und nicht ans Ende von design.css:
1. design.css ist 2000 Zeilen und render-blockierend auf der Startseite. Diese Regeln
dort kosten den Hero Bandbreite fuer nichts.
2. design.css traegt ein Dutzend mit „gemessen, nicht geraten" kommentierter Reparaturen.
Eine eigene Datei macht ein Experiment hier strukturell unfaehig, die Startseite zu
beschaedigen.
Der Startseite fehlt ein zweispaltiges Geruest ueber mehrere Sektionen — das ist der
Grund, warum die Achse hier als Signatur taugt und nicht als Wiederholung wirkt.
========================================================================== */
/* ==========================================================================
0 · Das Seitenmass
==========================================================================
GEMESSEN auf 2560 px Fensterbreite: die Sektionen liefen über die vollen 2545 px,
`max-width` stand aufgelöst auf `100%`. Die Begrenzung auf `--v2-max` (1560 px) kam
nirgends an — Elementors `.e-con { max-width: var(--width) }` gewinnt gegen eine
einfache Klasse. Die Folge sah aus wie ein Ausrichtungsfehler („alles zu weit
links"), war aber ein fehlendes Satzmass: Inhalt spreizte sich über die ganze
Breite statt mittig zu stehen.
`.e-con` davor hebt die Spezifität auf 0-2-0 und entscheidet.
========================================================================== */
.e-con.lxs-hero,
.e-con.lxs-axis {
max-width: var(--v2-max);
margin-inline: auto;
}
/* Beleg-Band und Abgang laufen ueber die volle Breite und begrenzen ihren INHALT
selbst. Ohne diesen Bruch standen sieben von neun Sektionen auf exakt 1560 px —
eine Seite ohne jeden Rhythmus. Die Startseite lebt davon, dass sie ihn bricht. */
.e-con.lxs-evidence,
.e-con.lxs-weitere {
max-width: none;
margin-inline: 0;
}
/* ==========================================================================
0b · Das Logo-Band auf Leistungsseiten läuft gerade
==========================================================================
Auf der Startseite laufen DREI Bänder gegenläufig; die Neigung von -2,5° lässt sie
sich kreuzen und macht aus drei Zeilen eine Figur. Hier läuft nur EINES — geneigt
wirkt es dann nicht gestaltet, sondern schief. Also gerade, und ohne die
Überskalierung, die nur die Neigungsecken kaschiert hat.
========================================================================== */
.lx-typ-leistung .v2-logos__bands {
rotate: 0deg;
scale: 1;
}
/* Etwas grösser als auf der Startseite — dort stehen DREI Bänder übereinander und
jedes zusätzliche Pixel Höhe zählt dreifach; hier läuft nur eines.
72 px ist keine gegriffene Zahl, sondern die Obergrenze der Bilder: ausgeliefert
werden 144 px Kantenlänge, auf einem Retina-Display trägt das genau 72. Darüber
würden die Logos weich, und ein unscharfes Kundenlogo ist schlimmer als ein
kleines. */
.lx-typ-leistung .v2-band__item img {
height: clamp(52px, 5.4vw, 72px);
}
/* ==========================================================================
1 · Hero der Leistungsseite
==========================================================================
Bewusst NICHT `.v2-hero`: der ist an die dreiteilige H1 der Startseite gebunden
(Vorzeile / Mega / Nachzeile) und traegt Lichtquelle, Geisterwort und Film. Eine
Leistungsseite braucht eine H1, die das Keyword traegt, und sonst Ruhe. */
.lxs-hero {
position: relative;
display: grid;
gap: clamp(1.5rem, 3vw, 2.5rem);
padding: calc(var(--lx-header-h, 105px) + clamp(3rem, 8vh, 7rem)) var(--v2-pad) clamp(3rem, 8vh, 6rem);
max-width: var(--v2-max);
margin-inline: auto;
}
/* Das Motiv der Leistung als leise Lichtquelle rechts oben.
Es ist dasselbe Bild, das auf der Startseite in der SEO-Kachel steht — wer dort
klickt, landet auf demselben Bild. Das ist der Grund fuer diese Wahl, nicht Deko.
`::before`, nicht `::after`: `.lx-grain` belegt `::after` bereits, und `.lx-grain`
setzt `isolation: isolate` — dadurch bleibt `z-index: -1` INNERHALB des Heros und
faellt nicht hinter den Seitenhintergrund.
Zwei Masken mit `intersect` statt einer: eine blendet nach links aus (damit die
Textspalte freies Feld hat), die andere nach unten (damit das Bild nicht an der
Sektionskante abgeschnitten dasteht). Eine einzelne diagonale Maske traf immer nur
eine der beiden Kanten. */
.lxs-hero--seo { --hero-motiv: url("../img/leistung-seo.webp"); }
.lxs-hero--webdesign { --hero-motiv: url("../img/leistung-webdesign.webp"); }
.lxs-hero--recruiting { --hero-motiv: url("../img/leistung-recruiting.webp"); }
.lxs-hero--social { --hero-motiv: url("../img/leistung-social.webp"); }
/* `background-image`, NICHT das Shorthand `background`: eine ungueltige `var()`-Ersetzung
im Shorthand verwirft die ganze Deklaration und setzt alle Longhands zurueck. Fehlt
die Variable, soll hier nur das Bild fehlen — nicht Groesse und Position mit ihm. */
.lxs-hero::before {
content: "";
position: absolute;
z-index: -1;
inset: 0 0 auto auto;
inline-size: min(62%, 52rem);
block-size: 100%;
background-image: var(--hero-motiv, none);
background-repeat: no-repeat;
background-position: right top;
background-size: cover;
/* GESEHEN im Review (SEO- und SMM-Hero): mit 0.26 und der frueheren Maske war vom
Motiv praktisch nichts uebrig — die rechte Haelfte des ersten Bildschirms las sich
als Leere. 0.42 und spaeter einsetzende Ausblendung lassen das Bild da sein, ohne
der Schrift ins Feld zu laufen. */
mask-image:
linear-gradient(270deg, #000 0%, transparent 88%),
linear-gradient(180deg, #000 55%, transparent 100%);
mask-composite: intersect;
-webkit-mask-composite: source-in;
opacity: 0.42;
pointer-events: none;
}
/* Im Kontrastmodus verwirft der Browser Masken — dann staende das Bild hart beschnitten
hinter der Schrift. Lieber ganz weg. */
@media (forced-colors: active) {
.lxs-hero::before { display: none; }
}
/* Die Kopfzeile: Kennung links, danach eine Haarlinie bis zum rechten Rand. Kostet nichts
und macht aus einer schwebenden Kleinschrift eine gesetzte Zeile. */
.lxs-hero__zeile {
display: flex;
align-items: center;
gap: clamp(0.9rem, 2vw, 1.5rem);
}
.lxs-hero__zeile::after {
content: "";
flex: 1;
block-size: 1px;
background: linear-gradient(90deg, rgb(212 175 55 / 0.45), rgb(212 175 55 / 0));
}
/* Auf das zielen, nicht auf die Widget-Huelle: `reset.css` des Themes setzt
`h1 { font-size: 2.5rem }` und der Kit `line-height: 0.9em` DIREKT auf dem Element.
Vererbung von der Huelle verliert dagegen ersatzlos — GEMESSEN stand die H1 dieser
Seite dadurch auf 40 px statt der vorgesehenen 88 px. Genau derselbe Fehler, den
`components.css:505` fuer `.lx-row__title h3` schon einmal dokumentiert hat.
Zwei Klassen davor, damit die Regel den Kit-Selektor `.elementor-kit-6 h1` (0-1-1)
sicher schlaegt — bei Gleichstand entschiede die Ladereihenfolge, und die gehoert
Elementor. */
/* GESEHEN auf 390 px: „Mitarbeitergewinnung" ist bei 40 px Schrift breiter als die
Spalte und wurde stumpf abgeschnitten — kein Umbruch, kein Trennstrich. Deutsche
Komposita brauchen auf schmalen Displays die Silbentrennung; `lang="de-DE"` setzt
WordPress bereits. Nur mobil: auf dem Desktop trennt nichts, und dort soll auch
nichts trennen. */
@media (max-width: 560px) {
.lxs-hero .lxs-hero__h1 h1 {
hyphens: auto;
overflow-wrap: break-word;
}
}
.lxs-hero .lxs-hero__h1 h1 {
font-family: var(--font-display);
font-weight: var(--fw-ultra, 900);
/* Kein `min()` mit `svh` wie im Startseiten-Hero: hier steht kein Vollbild-Auftritt
an, die Zeile darf umbrechen. */
font-size: clamp(2.5rem, 6.4vw, 5.5rem);
line-height: 0.94;
letter-spacing: -0.015em;
text-wrap: balance;
margin: 0;
}
/* Das Ortswort in Gold — genau EIN Goldakzent im Hero, mehr laesst die Seite billig
wirken. `.v2-gold` bringt die Rampe samt forced-colors-Ruecknahme mit. */
.lxs-hero__h1 .v2-gold { display: inline; }
/* GEMESSEN auf 2560 px Fensterbreite: der Vorspann lief über 2385 px und damit
206 Zeichen pro Zeile. Lesbar sind 60–70. `.v2-lead` bringt zwar `max-width: 54ch`
mit, aber die Klasse sitzt auf der Elementor-Widget-Hülle, und deren `max-width:
100%` gewinnt. Die Begrenzung muss deshalb hier stehen, mit Kontext davor. */
.lxs-hero .v2-lead,
.lxs-hero .v2-lead p {
max-width: 66ch;
}
.lxs-hero__cta {
display: flex;
flex-wrap: wrap;
gap: 0.75rem 1rem;
align-items: center;
}
/* Ab hier steht der Hero nicht mehr als Stapel, sondern im Raster: Vorspann links,
Handlung rechts, auf gemeinsamer Grundlinie. Das ist der eigentliche Unterschied
zwischen „untereinander gesetzt" und „gestaltet" — und er kostet null Markup, weil
die Reihenfolge im DOM unveraendert bleibt.
1100 px, nicht 1000: darunter blieben dem Vorspann GEMESSEN unter 45 Zeichen je
Zeile neben dem 324 px breiten Knopf. */
@media (min-width: 1100px) {
.lxs-hero {
grid-template-columns: minmax(0, 1fr) auto;
grid-template-areas:
"zeile zeile"
"titel titel"
"lead tat"
"band band";
column-gap: clamp(2rem, 4vw, 4rem);
}
.lxs-hero__zeile { grid-area: zeile; }
.lxs-hero__h1 { grid-area: titel; }
.lxs-hero__lead { grid-area: lead; }
.lxs-hero__band { grid-area: band; }
/* Unten ausgerichtet, nicht oben: so sitzt der Knopf auf der letzten Zeile des
Vorspanns statt irgendwo daneben zu schweben. */
.lxs-hero__cta {
grid-area: tat;
align-self: end;
justify-self: end;
}
/* Im Raster begrenzt die Spalte die Zeilenlaenge bereits — 66ch wuerde sie nur
wieder aufziehen, wenn das Fenster breit genug ist. */
.lxs-hero .v2-lead,
.lxs-hero .v2-lead p { max-width: 58ch; }
}
/* Die Schlusszeile des Heros: links der staerkste Beleg der Seite, rechts die Siegel.
Kein Hero eroeffnete bislang mit einem Beleg — dabei sind die Belege das Beste, was
diese Seiten haben. Die Zeile gibt jedem Hero ausserdem ein eigenes Gesicht; vorher
waren die ersten zwei Bildschirme aller vier Seiten fast identisch. */
.lxs-hero__leiste {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 1.25rem 2.5rem;
border-top: var(--hairline-gold, 1px solid rgb(212 175 55 / 0.28));
padding-top: 1.25rem;
}
.lxs-hero__fakt {
margin: 0;
max-width: 46ch;
color: var(--text-secondary);
font-size: clamp(0.9375rem, 1vw, 1.0625rem);
line-height: var(--lh-snug, 1.35);
}
.lxs-hero__fakt strong {
display: inline-block;
margin-right: 0.4rem;
font-family: var(--font-display);
font-weight: var(--fw-ultra, 900);
font-size: 2em;
line-height: 0.9;
letter-spacing: -0.02em;
vertical-align: -0.16em;
background: var(--grad-gold, linear-gradient(90deg, #d4af37, #f0dfa0));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
@media (forced-colors: active) {
.lxs-hero__fakt strong { background: none; -webkit-text-fill-color: revert; color: CanvasText; }
}
/* Die Siegel als Haarlinienreihe, nicht als Logo-Salat: gleiche optische Masse durch
feste Hoehe, getrennt durch je eine Linie. */
.lxs-hero__siegel {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0;
margin: 0;
padding: 0;
list-style: none;
border-top: var(--hairline-gold, 1px solid rgb(212 175 55 / 0.28));
padding-top: 1.25rem;
}
/* Innerhalb der Leiste traegt die LEISTE die Linie, nicht die Siegelreihe. */
.lxs-hero__leiste .lxs-hero__siegel { border-top: 0; padding-top: 0; }
.lxs-hero__siegel li {
display: flex;
align-items: center;
padding-inline: clamp(0.9rem, 2vw, 1.6rem);
}
.lxs-hero__siegel li:first-child { padding-inline-start: 0; }
.lxs-hero__siegel li + li { border-left: var(--hairline-ink, 1px solid rgb(255 255 255 / 0.09)); }
.lxs-hero__siegel img {
display: block;
height: clamp(2.6rem, 4.4vw, 3.6rem);
width: auto;
opacity: 0.78;
transition: opacity var(--dur-2, 240ms) var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1));
}
.lxs-hero__siegel li:hover img { opacity: 1; }
/* Zwei der vier Siegel sind Rasterbilder mit WEISSEM Kasten (die HIPE-Awards), die
anderen beiden sind freigestellte Lorbeeren. Unbehandelt stehen die ersten als
helle Rechtecke auf dem Near-Black — dasselbe Problem wie bei den 21 Kunden-Logos
im Band, und dieselbe Lösung: invertieren, entsättigen, per `screen` verrechnen.
Der Elternteil braucht dafür einen Hintergrund und `isolation`, sonst mischt der
Blend-Modus gegen die Sektion darunter statt gegen die Zeile. */
.lxs-hero__siegel { background: transparent; isolation: isolate; }
.lxs-hero__siegel li.ist-kasten img {
filter: invert(1) grayscale(1) contrast(1.08);
mix-blend-mode: screen;
opacity: 0.7;
}
.lxs-hero__siegel li.ist-kasten:hover img { opacity: 0.95; }
/* Im Kontrastmodus verwirft der Browser Filter und Blend-Modi. Dann wäre die
Invertierung weg, der weiße Kasten aber da — also lieber unbehandelt. */
@media (forced-colors: active) {
.lxs-hero__siegel li.ist-kasten img {
filter: none;
mix-blend-mode: normal;
opacity: 1;
}
}
/* ==========================================================================
2 · Der Argumentationsteil — drei Stationen
==========================================================================
Hier stand bis Juli 2026 eine klebende Schiene mit dem Leistungswort in Dunbar 900
und einer wachsenden Goldlinie. Sie ist entfallen: sie nahm rund ein Viertel der
Breite und wiederholte nur, was H1, Titel und Menue ohnehin sagen — Aufwand und
Flaeche fuer eine Information, die dreimal daneben stand.
Die Stationen tragen jetzt selbst. Sie bekommen dadurch rund 450 px mehr Breite und
eine durchgehende Nummerierung (01–09 ueber die ganze Seite), die die Orientierung
uebernimmt, die vorher die Schiene geben sollte. */
.lxs-axis {
display: grid;
max-width: var(--v2-max);
margin-inline: auto;
padding: var(--v2-y) var(--v2-pad);
}
.lxs-axis__stations { display: grid; gap: clamp(4rem, 9vw, 8rem); min-width: 0; }
/* Die Haarlinie ueber jeder Station ersetzt die senkrechte Bahn: sie trennt die drei
Abschnitte sichtbar, ohne dass ein Element dafuer stehenbleiben muss. */
.lxs-station {
border-top: var(--hairline-gold, 1px solid rgb(212 175 55 / 0.28));
padding-top: clamp(1.75rem, 3.5vw, 3rem);
min-width: 0;
}
.lxs-station > .lx-label { margin-bottom: 0.75rem; }
/* Elementor macht Widget-Hüllen in Flex- und Grid-Containern 100 % breit. Der Button
darin zentriert sich dann über die volle Breite statt links zu stehen — GEMESSEN:
der Knopf begann bei 1111 px in einem 2385 px breiten Feld. Nur die Button-Hüllen
zurücknehmen, nicht alle: Textblöcke sollen ihre volle Breite behalten. */
.lxs-hero__cta > .elementor-widget-button,
.lxs-station > .elementor-widget-button {
width: auto;
justify-self: start;
align-self: start;
}
/* --------------------------------------------------------------------------
Die Leistungszeilen in der Achse
`.lx-rows` stammt aus dem Marken-CSS und ist für die volle Seitenbreite gerechnet.
In der rechten Spalte der Achse (GEMESSEN 1851 px) verteilte es 732 px auf den
Titel — für „Fehlendes Verständnis" grotesk viel — und ließ dem Fließtext 895 px
bei 16 px Schrift. Hier bekommt das Verhältnis andere Gewichte.
-------------------------------------------------------------------------- */
@media (min-width: 1000px) {
.lxs-station .lx-row {
grid-template-columns: 3.5rem minmax(0, 0.62fr) minmax(0, 1fr) 2.5rem;
align-items: start;
}
}
/* Auf das
zielen, nicht auf die Hülle: `components.css:519` setzt Größe, Zeilenhöhe
und Farbe direkt auf dem Absatz, Vererbung von der Hülle verliert dagegen ersatzlos.
GEMESSEN 14 px / 18,9 px / --text-muted gegen 16 px / 25,6 px / --text-secondary im
Rest der Seite — genau der sichtbare Größenunterschied.
Die gedämpfte Farbe ist im Marken-CSS Absicht: dort ist `.lx-rows` eine Liste von
Anreißern, die beim Hover aufhellt. Hier trägt sie den eigentlichen Argumentationstext
und muss im Ruhezustand lesbar sein. Die Hover-Regel wird dadurch wirkungslos — das ist
in Ordnung und billiger, als am Marken-CSS zu drehen, das die Startseite mitbenutzt. */
.lxs-station .lx-row__desc p {
font-size: clamp(1rem, 1.05vw, 1.0625rem);
line-height: var(--lh-body, 1.6);
color: var(--text-secondary);
/* Das Marken-CSS deckelt den Absatz auf 46ch — GEMESSEN 415 px in einer 1019 px
breiten Zelle, also 600 px Leere daneben. Für eine schmale Kartenspalte gerechnet,
nicht für diese. 62ch bleibt gut lesbar und füllt die Zelle. */
max-width: 62ch;
}
/* Zwei Absätze ohne Abstand lesen sich als einer — auf der Live-Seite trennt sie ein
Aufklapp-Schritt, den es hier nicht gibt. Der Abstand muss die Trennung übernehmen. */
.lxs-station .lx-row__desc p + p { margin-top: 0.85em; }
/* Die zweispaltige Aufteilung (Schiene | Stationen) und ihr Fortschrittswert `--lxs-p`
sind mit der Schiene entfallen. Der Ablauf bringt seinen eigenen mit (`--lxs-a`). */
/* ==========================================================================
2b · Der Ablauf — eine Linie, die sich zeichnet
==========================================================================
Vier Schritte, streng der Reihe nach. Eine Goldlinie waechst beim Scrollen nach
unten durch sie hindurch, und jede Ziffer geht an, wenn die Linie sie erreicht.
Bewusst KEINE horizontale Bahn: die sagt „such dir was aus" und ist richtig fuer
vier Leistungen, zwischen denen man waehlt. Ein Ablauf ist sequenziell — die Form
muss das behaupten, nicht das Gegenteil. Ausserdem sitzt der Ablauf INNERHALB der
Achse, deren Schiene klebt; eine zweite klebende Stufe darin wuerde mit ihr um den
Bildschirm streiten.
========================================================================== */
@property --lxs-a { syntax: ""; inherits: true; initial-value: 1; }
@property --an { syntax: ""; inherits: false; initial-value: 1; }
.lxs-ablauf {
position: relative;
display: grid;
gap: clamp(2rem, 4vw, 3.25rem);
margin: clamp(1.5rem, 3vw, 2.5rem) 0 0;
padding: 0 0 0 clamp(3rem, 5vw, 4.5rem);
list-style: none;
}
/* Die ruhende Bahn, immer sichtbar. */
.lxs-ablauf::before {
content: "";
position: absolute;
left: clamp(1.15rem, 1.9vw, 1.7rem);
/* Beginnt und endet auf Höhe des ERSTEN und LETZTEN Knotens, nicht an der Kante
der Liste — sonst ragt die Bahn oben und unten ins Leere. */
top: 0.62rem;
bottom: 0.62rem;
/* 2px statt 1px: eine Haarlinie über 1500 px Höhe verschwindet auf einem grossen
Bildschirm optisch. Gold bleibt damit weit unter den 3 % Tinte der Richtung —
2 px auf 2545 px Breite sind ein Promille der Fläche. */
width: 2px;
background: rgb(255 255 255 / 0.12);
}
/* Die wachsende Goldlinie darueber. `transform-origin` muss gesetzt sein, sonst
skaliert sie aus der Mitte und waechst in beide Richtungen. */
.lxs-ablauf::after {
content: "";
position: absolute;
left: clamp(1.15rem, 1.9vw, 1.7rem);
top: 0.62rem;
bottom: 0.62rem;
width: 2px;
/* Kräftiger und nach unten hin weniger abfallend als vorher (0,95 → 0,45):
der untere Teil der Bahn war fast weg, obwohl dort noch zwei Schritte hängen. */
background: linear-gradient(180deg, rgb(212 175 55 / 1), rgb(212 175 55 / 0.72));
transform-origin: 0 0;
scale: 1 var(--lxs-a, 1);
}
/* `z-index: 1` ist hier keine Kosmetik: die Goldlinie ist `.lxs-ablauf::after` und
steht in der Malreihenfolge NACH allen Schritten — sie malte deshalb quer durch die
Ziffern hindurch. Ein positionierter Nachfahre mit positivem z-index kommt darüber.
Ohne diese Zeile hilft auch kein deckender Hintergrund. */
.lxs-schritt {
position: relative;
z-index: 1;
display: grid;
gap: 0.35rem 0;
}
/* Der Abzweig: eine Haarlinie von der senkrechten Bahn zum Inhalt. Sie wächst mit,
wenn der Schritt an die Reihe kommt — wie eine Messleitung, die Kontakt bekommt. */
.lxs-schritt::before {
content: "";
position: absolute;
left: calc(clamp(1.15rem, 1.9vw, 1.7rem) - clamp(3rem, 5vw, 4.5rem));
top: calc(0.78em - 0.5px);
/* Die Länge muss von der Bahn bis KURZ VOR die Ziffer reichen, nicht bis zum
Inhaltsrand. Vorher stand hier ein fester Abzug von 1,15rem statt des
tatsächlichen Bahn-Abstands — GEMESSEN lief die Linie dadurch 9 px zu weit und
genau auf Mittelhöhe der Ziffer: sie war durchgestrichen. */
inline-size: calc(clamp(3rem, 5vw, 4.5rem) - clamp(1.15rem, 1.9vw, 1.7rem) - 0.7rem);
block-size: 2px;
/* Auch im Ruhezustand deutlich sichtbar (0,32 statt 0,14): der Abzweig ist die
Verbindung zwischen Bahn und Inhalt und darf nicht erst beim Aktivwerden
auftauchen — sonst wirkt die Struktur unfertig, bis man daran vorbeiscrollt. */
background: rgb(212 175 55 / calc(0.32 + var(--an) * 0.68));
transform-origin: left;
scale: calc(0.42 + var(--an) * 0.58) 1;
}
/* Der Knoten ist eine RAUTE, kein Kreis. Kreise sind die Vorgabe jedes Zeitstrahls;
die Geometrie dieser Seite ist scharf — 4px Radius, Haarlinien, rechte Winkel. */
.lxs-schritt::after {
content: "";
position: absolute;
/* Mitte des Knotens auf die Mitte der 2px-Bahn: Bahnkante + 1px - halbe Rautenbreite. */
left: calc(clamp(1.15rem, 1.9vw, 1.7rem) - clamp(3rem, 5vw, 4.5rem) - 4px);
top: calc(0.78em - 4px);
inline-size: 10px;
block-size: 10px;
/* Der Knoten FÜLLT sich, wenn der Schritt an die Reihe kommt — vorher blieb er
immer hohl und war damit nur ein weiterer dünner Umriss unter vielen. */
background: color-mix(in oklab, var(--gold, #d4af37) calc(var(--an) * 100%), var(--ink-1000, #0b0a09));
border: 2px solid rgb(212 175 55 / calc(0.45 + var(--an) * 0.55));
rotate: 45deg;
box-shadow: 0 0 0 calc(var(--an) * 6px) rgb(212 175 55 / calc(var(--an) * 0.1));
}
/* Die Ziffer steht jetzt ÜBER dem Titel als Mono-Marke, nicht mehr auf der Linie.
Damit kann keine Linie mehr durch sie laufen, und sie liest sich als Schrittzähler
statt als Aufzählungspunkt. */
.lxs-schritt__num {
font-family: var(--font-mono);
font-size: 0.6875rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: rgb(212 175 55 / calc(0.42 + var(--an) * 0.58));
margin-bottom: 0.15rem;
}
.lxs-schritt__titel {
font-family: var(--font-display);
font-weight: var(--fw-ultra, 900);
font-size: clamp(1.25rem, 2.2vw, 1.75rem);
line-height: 1.05;
margin: 0;
color: rgb(242 239 233 / calc(0.62 + var(--an) * 0.38));
}
/* Ab 1000 px zweispaltig: Ziffer und Titel links, Beschriftung und Text rechts.
GESEHEN auf 1440 px: der Text endete bei 810 px in einer 1281 px breiten Sektion —
470 px leere Flaeche neben jedem Schritt. Die Startseite bricht ihren Rhythmus mit
voller Breite und Ueberlappungen; die Leistungsseiten hatten das nie und lasen sich
dadurch als schmale Spalte in einem breiten Rahmen.
Die erste Spalte ist FEST (26rem), nicht inhaltsabhaengig: jedes ist ein eigenes
Raster, eine inhaltsabhaengige Spalte richtet sich also je Schritt nach dessen eigenem
Titel — genau der Fehler, der hier schon einmal sechs verschiedene Textanfaenge
erzeugt hat.
Zeile UND Spalte werden ausdruecklich vergeben. Automatische Platzierung rueckt nur
vorwaerts und findet freie Zellen weiter oben nicht mehr; in einem Mehrzeilen-Raster
muss beides stehen. Fehlt die Beschriftung (SEO-Seite), bleibt Zelle 2/1 leer und der
Text sitzt auf Titelhoehe. */
@media (min-width: 1000px) {
.lxs-schritt {
grid-template-columns: minmax(0, 26rem) minmax(0, 1fr);
column-gap: clamp(2rem, 4vw, 4rem);
}
.lxs-schritt__num { grid-column: 1; grid-row: 1; }
.lxs-schritt__titel { grid-column: 1; grid-row: 2; }
.lxs-schritt__label { grid-column: 2; grid-row: 1; }
.lxs-schritt__text { grid-column: 2; grid-row: 2; }
.lxs-schritt__bild { grid-column: 2; grid-row: 3; margin-block-start: 1rem; }
/* Der Text darf jetzt die Spalte fuellen — 62ch war fuer die einspaltige Fassung. */
.lxs-schritt__text { max-inline-size: 68ch; }
}
.lxs-schritt__text {
margin: 0;
max-width: 62ch;
color: var(--text-secondary);
font-size: clamp(1rem, 1.05vw, 1.0625rem);
}
@supports (animation-timeline: view()) {
.lxs-ablauf {
animation: lxs-ziehen linear both;
animation-timeline: view();
animation-range: entry 55% exit 25%;
}
.lxs-schritt {
animation: lxs-an linear both;
animation-timeline: view();
/* Der Schritt geht an, kurz bevor er die Bildmitte erreicht, und bleibt an. */
animation-range: entry 85% cover 35%;
}
}
@keyframes lxs-ziehen { from { --lxs-a: 0; } to { --lxs-a: 1; } }
@keyframes lxs-an { from { --an: 0; } to { --an: 1; } }
/* ==========================================================================
2c · Die zwei SEO-Arten als Tafeln
==========================================================================
Vorher zwei nackte Textspalten ohne jede Fassung — die flachste Stelle der Seite,
und dazu ungleich breit (GEMESSEN 763 zu 1032 px), obwohl es Alternativen sind und
keine Rangfolge.
BEWUSST KEIN Glaseffekt: `backdrop-filter` braucht etwas dahinter, das es unscharf
zeichnen kann. Auf near-black über near-black liegt dort nichts — es kostete
GPU-Zeit und zeigte nahezu nichts. Die Richtung heisst ausserdem „Tiefe aus
Haarlinien statt Schatten", Radius 4 px, scharfe Geometrie. Weiche runde Glaskarten
wären ein Bruch mit allem anderen auf dieser Seite.
========================================================================== */
.lxs-station .lx-split-2 {
display: grid;
gap: clamp(1rem, 2vw, 1.75rem);
margin-top: clamp(1.5rem, 3vw, 2.5rem);
/* `components.css:1591` setzt `align-items: start`. Dort ist `.lx-split-2` Text neben
Bild, und ein Bild soll nicht auf Textlänge gezogen werden. Hier sind es zwei
gerahmte Karten — GEMESSEN 401 zu 350 px, also zwei ungleich hohe Kästen
nebeneinander. Bei Alternativen ohne Rangfolge muss die Unterkante eine Linie sein. */
align-items: stretch;
}
@media (min-width: 900px) {
/* Gleich breit: zwei Wege, zwischen denen man wählt. */
.lxs-station .lx-split-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.lxs-station .lx-split-2 > section {
position: relative;
padding: clamp(1.5rem, 3vw, 2.25rem);
border: var(--hairline-ink, 1px solid rgb(255 255 255 / 0.09));
border-radius: var(--radius-card, 4px);
background: linear-gradient(160deg, rgb(27 24 21 / 0.55), rgb(14 13 11 / 0.55));
transition:
border-color var(--dur-2, 240ms) var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1)),
background-color var(--dur-2, 240ms) var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1)),
translate var(--dur-2, 240ms) var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1));
}
/* Reaktion beim Ueberfahren: der Rahmen wird golden, die Karte hebt sich vier Pixel.
KEIN Schatten und kein Leuchten — die Richtung heisst „Tiefe aus Haarlinien", und ein
weicher Schein unter einer scharfkantigen Karte waere genau der Bruch, den der
Glaseffekt hier schon einmal bedeutet haette.
`translate` statt `transform`: die Karten tragen im selben Zug eine Einlaufanimation,
die `translate` als eigene Eigenschaft animiert. Ueber `transform` gesetzt wuerden
sich beide gegenseitig ueberschreiben.
Kein `:focus-within`: in diesen Karten steht reiner Fliesstext, es gibt nichts
Fokussierbares darin. Die Regel waere tot. */
.lxs-station .lx-split-2 > section:hover {
border-color: rgb(212 175 55 / 0.34);
background-color: rgb(212 175 55 / 0.035);
translate: 0 -4px;
}
/* Die goldene Oberkante sitzt AUF dem Rahmen, nicht daneben — deshalb negativ
positioniert statt als zweiter Rand. Ein zweiter Rand ergäbe eine Doppellinie. */
.lxs-station .lx-split-2 > section::before {
content: "";
position: absolute;
inset: -1px -1px auto -1px;
height: 2px;
background: var(--grad-gold, linear-gradient(90deg, #d4af37, #f0dfa0));
border-radius: var(--radius-card, 4px) var(--radius-card, 4px) 0 0;
opacity: 0.72;
transition: opacity var(--dur-2, 240ms) var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1));
}
.lxs-station .lx-split-2 > section:hover::before { opacity: 1; }
.lxs-station .lx-split-2 h3 {
font-family: var(--font-display);
font-weight: var(--fw-ultra, 900);
font-size: clamp(1.25rem, 2.2vw, 1.75rem);
line-height: 1.05;
margin: 0 0 0.9rem;
}
.lxs-station .lx-split-2 p {
margin: 0;
color: var(--text-secondary);
font-size: clamp(1rem, 1.05vw, 1.0625rem);
max-width: 54ch;
}
.lxs-station .lx-split-2 p + p { margin-top: 0.85em; }
/* ==========================================================================
3 · Beleg-Band
==========================================================================
Die lauteste Stelle der Seite, und sie sitzt dort, wo eine Leistungsseite laut sein
darf: beim Nachweis. Pro Beleg ein haarlinien-gerahmter Screenshot und EINE Zahl.
Die Zahl steht statisch im HTML — kein Crawler und keine KI bekommt hier eine
literale 0 zu sehen. Hochgezaehlt wird nur voruebergehend, wie bei `.v2-fig__num`. */
.lxs-evidence {
display: grid;
gap: clamp(2rem, 5vw, 4rem);
padding: var(--v2-y) 0;
}
/* Ueberschrift und Vorspann bleiben im Satzmass, die Belege selbst laufen breiter —
das ist der Punkt: der Nachweis darf lauter sein als der Text darueber. */
.lxs-evidence > .elementor-element { max-width: var(--v2-max); margin-inline: auto; width: 100%; padding-inline: var(--v2-pad); }
.lxs-proofs {
display: grid;
gap: clamp(2.5rem, 5vw, 5rem);
margin: 0;
padding: 0 var(--v2-pad);
list-style: none;
max-width: 1920px;
margin-inline: auto;
}
.lxs-proof {
display: grid;
gap: clamp(1rem, 2.5vw, 2rem);
align-items: center;
border-top: var(--hairline-gold, 1px solid rgb(212 175 55 / 0.28));
padding-top: clamp(1.25rem, 2.5vw, 2rem);
}
.lxs-proof__zahl {
font-family: var(--font-display);
font-weight: var(--fw-ultra, 900);
/* Tabellenziffern: ohne sie zittert das Layout, waehrend die Zahl hochlaeuft. */
font-variant-numeric: tabular-nums;
/* Die lauteste Zahl der Seite darf auch die groesste sein. Vorher 112 px bei
84 px Ueberschrift — der Nachweis war damit kleiner als seine Ankuendigung. */
font-size: clamp(3.5rem, 12vw, 11rem);
line-height: 0.82;
letter-spacing: -0.035em;
margin: 0;
background: var(--grad-gold, linear-gradient(100deg, #b8912c, #f0dfa0 55%, #d4af37));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
}
/* Im Windows-Kontrastmodus verwirft der Browser Verlaeufe, `text-fill-color:
transparent` bleibt aber stehen — die Zahl waere unsichtbar. Das ist der
teuerste denkbare Ausfall bei einem Beleg. */
@media (forced-colors: active) {
.lxs-proof__zahl {
background: none;
color: CanvasText;
-webkit-text-fill-color: CanvasText;
}
}
.lxs-proof__zahl em { font-style: normal; font-size: 0.42em; margin-left: 0.1em; }
.lxs-proof__note {
color: var(--text-muted, #909090);
max-width: 46ch;
margin: 0.75rem 0 0;
}
.lxs-proof__shot {
margin: 0;
border: var(--hairline-ink, 1px solid rgb(255 255 255 / 0.09));
border-radius: var(--radius-card, 4px);
overflow: hidden;
background: rgb(255 255 255 / 0.02);
}
.lxs-proof__shot img { display: block; width: 100%; height: auto; }
@media (min-width: 900px) {
.lxs-proof { grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); }
/* Jeder zweite Beleg spiegelt — sonst entsteht die Leiter, an der man eine
Baukasten-Seite sofort erkennt.
ACHTUNG: `order` tauscht nur die REIHENFOLGE der Kinder, nicht die Breiten der
Spalten. Ohne die zweite Zeile landete das Bild beim gespiegelten Beleg in der
schmalen Spalte — GEMESSEN 605 px statt 1123, und bei einem 3,84:1 breiten
Diagramm blieben davon 159 px Höhe. Es sah nach „etwas zu klein" aus, war aber
ein vertauschtes Raster. Das Bild gehört immer in die breite Spalte. */
.lxs-proof:nth-child(even) { grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr); }
.lxs-proof:nth-child(even) > .lxs-proof__shot { order: -1; }
}
/* Das Bild traegt den Nachweis und darf die Kante suchen. Die Zahl bleibt drin. */
@media (min-width: 1400px) {
.lxs-proof__shot { margin-inline-end: calc(var(--v2-pad) * -1); }
.lxs-proof:nth-child(even) > .lxs-proof__shot {
margin-inline-end: 0;
margin-inline-start: calc(var(--v2-pad) * -1);
}
}
/* ==========================================================================
3b · Kennzahlen und Kampagnentabelle (Recruiting)
==========================================================================
Diese Zahlen lagen live in 30 Screenshots eines Karussells — fuer Google Pixel, fuer
Menschen UI-Schrift in Kachelgroesse. Als Text sind sie beides nicht mehr.
Die Tabelle ist eine echte ``, kein Raster aus Divs: der Inhalt IST tabellarisch,
und ein Screenreader muss die Spaltenzugehoerigkeit ansagen koennen.
========================================================================== */
.lxs-kennzahlen {
display: grid;
gap: clamp(1.5rem, 3vw, 2.5rem);
margin: clamp(2.5rem, 5vw, 4rem) 0 clamp(2rem, 4vw, 3rem);
padding: 0;
list-style: none;
border-top: var(--hairline-gold, 1px solid rgb(212 175 55 / 0.28));
padding-top: clamp(1.5rem, 3vw, 2.5rem);
}
@media (min-width: 760px) {
.lxs-kennzahlen { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.lxs-kennzahl__wert {
margin: 0 0 0.4rem;
font-family: var(--font-display);
font-weight: var(--fw-ultra, 900);
/* An die SPALTE gebunden, nicht ans Fenster: `vw` kennt die Spaltenbreite nicht und
liess „1.107 Tsd." bei drei Spalten ueberlaufen. */
font-size: clamp(2.25rem, 16cqw, 4.5rem);
line-height: 0.9;
letter-spacing: -0.02em;
background: var(--grad-gold, linear-gradient(90deg, #d4af37, #f0dfa0));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
@supports (container-type: inline-size) {
.lxs-kennzahlen > li { container-type: inline-size; }
}
/* Im Kontrastmodus verwirft der Browser `background-clip: text` — dann stuende die
groesste Zahl der Seite unsichtbar da. */
@media (forced-colors: active) {
.lxs-kennzahl__wert {
background: none;
-webkit-text-fill-color: revert;
color: CanvasText;
}
}
.lxs-kennzahl__wert em {
font-style: normal;
font-size: 0.42em;
margin-left: 0.1em;
}
.lxs-kennzahl__note {
margin: 0;
max-width: 34ch;
color: var(--text-secondary);
font-size: clamp(1rem, 1.05vw, 1.0625rem);
line-height: var(--lh-body, 1.6);
}
/* 30 Zeilen mal vier Spalten passen unter 640 px nicht mehr ohne Silbensalat. Der
Rahmen scrollt dann seitwaerts — und zwar ER, nicht das Dokument. */
/* GESEHEN auf 390 px: die Tabelle stand abgeschnitten da, ohne jeden Hinweis darauf,
dass sie seitwaerts scrollt. Zwei Dinge fehlten.
1. Ein sichtbarer Rand. Der Verlauf rechts endet erst, wenn nichts mehr kommt —
`mask-image` mit `linear-gradient` waere eleganter, wuerde aber den Rahmen
mitmaskieren; deshalb ein Overlay am Rahmen, das mit dem Scrollen verschwindet.
2. Tastaturzugang. Ein Scrollcontainer, den man nicht fokussieren kann, ist fuer
Tastaturnutzer eine Sackgasse (WCAG 2.1.1). `tabindex="0"` plus `role="region"`
und Beschriftung setzt der Bauplan. */
.lxs-tabelle__rahmen {
position: relative;
overflow-x: auto;
border: var(--hairline-ink, 1px solid rgb(255 255 255 / 0.09));
border-radius: var(--radius-card, 4px);
background:
linear-gradient(160deg, rgb(27 24 21 / 0.55), rgb(14 13 11 / 0.55)),
/* Der zweite Verlauf haengt am SCROLLCONTAINER, nicht am Inhalt: `local`
scrollt mit, `scroll` bleibt stehen. Nur so verschwindet die Kante,
sobald man am Ende angekommen ist. */
linear-gradient(270deg, rgb(11 10 9 / 0.9), rgb(11 10 9 / 0)) right / 3rem 100% no-repeat local;
background-attachment: scroll, local;
}
.lxs-tabelle__rahmen:focus-visible {
outline: 2px solid var(--gold, #d4af37);
outline-offset: 2px;
}
.lxs-tabelle {
inline-size: 100%;
border-collapse: collapse;
font-size: clamp(0.9375rem, 1vw, 1rem);
min-inline-size: 34rem;
}
.lxs-tabelle caption {
caption-side: top;
padding: clamp(1rem, 2vw, 1.5rem) clamp(1rem, 2.5vw, 2rem) 0;
text-align: left;
color: var(--text-muted);
font-size: 0.875rem;
line-height: var(--lh-snug, 1.35);
}
.lxs-tabelle th,
.lxs-tabelle td {
padding: 0.85rem clamp(0.75rem, 1.6vw, 1.25rem);
text-align: left;
border-bottom: var(--hairline-ink, 1px solid rgb(255 255 255 / 0.09));
}
.lxs-tabelle thead th {
position: sticky;
top: 0;
/* Der Kopf klebt beim Scrollen im Rahmen; ohne deckenden Hintergrund scheinen die
Zeilen durch ihn hindurch. */
background: #14130b;
color: var(--text-muted);
font-family: var(--font-body);
font-weight: var(--fw-semibold, 600);
font-size: 0.75rem;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.lxs-tabelle tbody th {
font-weight: var(--fw-semibold, 600);
color: var(--text-primary);
}
.lxs-tabelle tbody td { color: var(--text-secondary); }
/* Zahlen rechtsbuendig und mit gleich breiten Ziffern: sonst tanzen die Kommastellen
und die Spalte laesst sich nicht mehr ueberfliegen. */
.lxs-tabelle__zahl {
text-align: right;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.lxs-tabelle tbody tr:last-child th,
.lxs-tabelle tbody tr:last-child td { border-bottom: 0; }
.lxs-tabelle tbody tr:hover th,
.lxs-tabelle tbody tr:hover td { background: rgb(212 175 55 / 0.045); }
.lxs-quelle {
margin: 1rem 0 0;
max-width: 72ch;
color: var(--text-muted);
font-size: 0.875rem;
line-height: var(--lh-snug, 1.35);
}
/* Belegbild innerhalb eines Ablaufschritts. Zwei Saetze auf der Recruiting-Seite enden
auf einen Doppelpunkt und verweisen darauf — ohne das Bild waere der Satz sinnlos. */
.lxs-schritt__bild {
margin: 1.25rem 0 0;
max-inline-size: 26rem;
border: var(--hairline-ink, 1px solid rgb(255 255 255 / 0.09));
border-radius: var(--radius-card, 4px);
overflow: hidden;
background: rgb(255 255 255 / 0.02);
}
.lxs-schritt__bild img { display: block; inline-size: 100%; block-size: auto; }
/* „Schritt 1" auf der Webdesign-Seite. Die Live-Seite nummeriert ihre Schritte nur und
benennt sie nicht — die Nummer bleibt als Beschriftung, die Ueberschrift kommt dazu. */
/* KEIN `grid-column: 2` hier. `.lxs-schritt` ist ein Raster OHNE `grid-template-columns`,
also einspaltig. Eine Spaltenangabe erzeugt die zweite Spalte erst — und die
Auto-Platzierung schob danach den Titel in Zeile 2 Spalte 1 und den Text in Zeile 2
Spalte 2. Weil jedes ein EIGENES Raster ist, richtete sich die Spaltenbreite je
Schritt nach dessen eigenem Inhalt: „Gestaltung auf allen Geräten" ist breiter als
„Ziel und Struktur", und damit begann der Text in jedem Schritt woanders. Sah nach
gewollter Staffelung aus, war ein zerlegtes Raster. */
.lxs-schritt__label {
margin: 0 0 0.25rem;
color: var(--gold, #d4af37);
font-size: 0.6875rem;
font-weight: var(--fw-semibold, 600);
letter-spacing: 0.14em;
text-transform: uppercase;
}
/* ==========================================================================
3c · Einwaende und Plattformen (Social Media)
==========================================================================
Die sechs Einwaende sind Saetze, die Kunden im Gespraech sagen. Live stehen sie als
gleichfoermige Kacheln — als Zitate gesetzt behaupten sie, was sie sind.
========================================================================== */
.lxs-einwaende {
display: grid;
gap: clamp(0.9rem, 2vw, 1.5rem);
margin: clamp(1.5rem, 3vw, 2.5rem) 0 0;
padding: 0;
list-style: none;
}
@media (min-width: 720px) { .lxs-einwaende { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1120px) { .lxs-einwaende { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.lxs-einwand {
position: relative;
padding: clamp(1.4rem, 2.6vw, 2rem);
border: var(--hairline-ink, 1px solid rgb(255 255 255 / 0.09));
border-radius: var(--radius-card, 4px);
background: linear-gradient(160deg, rgb(27 24 21 / 0.55), rgb(14 13 11 / 0.55));
transition: border-color var(--dur-2, 240ms) var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1)),
background-color var(--dur-2, 240ms) var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1));
}
/* Hier stand ein grosses „ als Ornament. Es lag GEMESSEN mitten auf Zeile zwei:
`„` ist ein Grundlinien-Zeichen, sein Tintenbild sitzt am UNTEREN Rand des
Zeilenkastens. Bei 72 px Schriftgroesse rutscht es dadurch rund 70 px unter die
Position, an der das Kaestchen beginnt — oben positioniert heisst also nicht oben
sichtbar. Wer ein solches Zeichen als Ornament setzt, muss es an seiner Tinte
ausrichten, nicht an seinem Kasten.
Statt das nachzurechnen: die goldene Oberkante, die auf diesen Seiten ohnehin die
Karte markiert. Gleiche Formsprache wie `.lx-split-2 > section`, keine Rechnung,
die beim naechsten Schriftwechsel wieder kippt. */
.lxs-einwand::before {
content: "";
position: absolute;
inset: -1px -1px auto -1px;
height: 2px;
background: var(--grad-gold, linear-gradient(90deg, #d4af37, #f0dfa0));
border-radius: var(--radius-card, 4px) var(--radius-card, 4px) 0 0;
opacity: 0.5;
transition: opacity var(--dur-2, 240ms) var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1));
}
.lxs-einwand:hover {
border-color: rgb(212 175 55 / 0.34);
background-color: rgb(212 175 55 / 0.035);
}
.lxs-einwand:hover::before { opacity: 1; }
.lxs-einwand blockquote { margin: 0; }
.lxs-einwand p {
margin: 0;
color: var(--text-secondary);
font-size: clamp(1rem, 1.05vw, 1.0625rem);
line-height: var(--lh-body, 1.6);
}
.lxs-hashtags {
margin: clamp(1.25rem, 2.5vw, 2rem) 0 0;
color: var(--text-muted);
font-size: 0.875rem;
letter-spacing: 0.02em;
}
/* Die vier Plattformen. KEINE Marken-Logos — der Name in Dunbar 900 traegt die Karte,
und bunte Fremdmarken waeren auf Gold-auf-Nearblack ein Bruch. Die Zahlen sind hier
ohnehin der Inhalt: live liefert der Count-up einem Crawler zwoelfmal eine Null. */
.lxs-plattformen {
display: grid;
gap: clamp(1rem, 2vw, 1.75rem);
margin: clamp(2rem, 4vw, 3rem) 0 0;
padding: 0;
list-style: none;
}
@media (min-width: 800px) { .lxs-plattformen { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.lxs-plattform {
display: flex;
flex-direction: column;
padding: clamp(1.5rem, 3vw, 2.25rem);
border: var(--hairline-ink, 1px solid rgb(255 255 255 / 0.09));
border-radius: var(--radius-card, 4px);
background: linear-gradient(160deg, rgb(27 24 21 / 0.55), rgb(14 13 11 / 0.55));
}
.lxs-plattform__name {
margin: 0 0 0.75rem;
font-family: var(--font-display);
font-weight: var(--fw-ultra, 900);
font-size: clamp(1.5rem, 2.6vw, 2.25rem);
line-height: 1;
letter-spacing: -0.02em;
color: var(--text-primary);
}
.lxs-plattform__text {
margin: 0 0 clamp(1.25rem, 2.5vw, 1.75rem);
/* `auto` schiebt die Zahlenzeile an den unteren Rand — sonst sitzt sie bei den
kuerzeren Texten mitten in der Karte und die vier Karten haben keine Linie. */
margin-block-end: auto;
padding-block-end: clamp(1.25rem, 2.5vw, 1.75rem);
color: var(--text-secondary);
font-size: clamp(1rem, 1.05vw, 1.0625rem);
line-height: var(--lh-body, 1.6);
}
.lxs-plattform__zahlen {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(0.75rem, 1.6vw, 1.25rem);
margin: 0;
padding-top: clamp(1rem, 2vw, 1.5rem);
border-top: var(--hairline-gold, 1px solid rgb(212 175 55 / 0.28));
}
.lxs-plattform__zahlen > div { min-inline-size: 0; }
@supports (container-type: inline-size) {
.lxs-plattform__zahlen > div { container-type: inline-size; }
}
.lxs-plattform__zahlen dt {
margin: 0 0 0.3rem;
color: var(--text-muted);
font-size: 0.6875rem;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.lxs-plattform__zahlen dd {
margin: 0;
font-family: var(--font-display);
font-weight: var(--fw-ultra, 900);
/* An die Zelle gebunden, nicht ans Fenster — „3.005 Mio." ist dreimal so breit wie
„30 Mio." und wuerde die Spalte sonst sprengen. */
font-size: clamp(1.125rem, 24cqw, 1.875rem);
line-height: 1;
letter-spacing: -0.02em;
color: var(--gold, #d4af37);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.lxs-plattform__zahlen dd span {
font-size: 0.5em;
font-weight: var(--fw-semibold, 600);
color: var(--text-muted);
}
/* ==========================================================================
3d · Die Anatomie — eine echte Kundenseite laeuft durch einen Rahmen
==========================================================================
Nur auf der Webdesign-Seite. Der Gedanke: eine Leistungsseite fuer Webdesign ist die
einzige, auf der das Medium der Beweis ist. Also faehrt hier eine echte gebaute Seite
durch einen Rahmen, und daneben leuchtet auf, was gerade zu sehen ist.
Die zehn Beschriftungen stammen von leXpro selbst — sie lagen als flaches Bild in der
Mediathek. Inhalt ihrer, Ausfuehrung unsere.
Dieselbe Mechanik wie beim horizontalen Scrollytelling, nur senkrecht: die Bahn ist
hoeher als das Fenster, die Buehne klebt darin, und `contain 0% → 100%` ist exakt die
Strecke, auf der die Bahn das Fenster fuellt — also exakt die Klebedauer. Kein einziger
gerechneter Prozentwert, kein Javascript.
========================================================================== */
.lxa {
display: grid;
gap: clamp(1.5rem, 3vw, 2.5rem);
/* Die Hoehe steuert nur das TEMPO, nicht den Weg: der Weg steckt im Keyframe und
endet immer mit der Bildunterkante an der Rahmenunterkante. */
min-block-size: 240svh;
/* Das Satzmass muss HIER stehen: `v3-raw` loest die Widget-Huelle auf, und damit
greift die Begrenzung von `.lxs-evidence > .elementor-element` nicht mehr.
GEMESSEN lief die Sektion sonst ueber 2545 px. */
max-inline-size: var(--v2-max);
margin-inline: auto;
padding-inline: var(--v2-pad);
}
.lxa__stage { position: sticky; align-self: start; }
.lxa__frame {
margin: 0;
/* Die Vorlage ist 958 px breit. Ohne Deckel zog der Rahmen sie auf 1372 px und damit
auf 143 % — ein weichgezeichneter Screenshot auf einer Webdesign-Seite ist genau
das Gegenteil des Arguments. */
max-inline-size: 44rem;
position: relative;
block-size: var(--lxa-rahmen, min(72svh, 40rem));
overflow: clip;
border: var(--hairline-ink, 1px solid rgb(255 255 255 / 0.09));
border-radius: var(--radius-card, 4px);
background: rgb(255 255 255 / 0.02);
}
.lxa__shot { display: block; inline-size: 100%; block-size: auto; }
.lxa__labels {
display: grid;
gap: clamp(0.75rem, 1.6vw, 1.25rem);
margin: 0;
padding: 0;
list-style: none;
}
.lxa__label {
padding-inline-start: 1rem;
border-inline-start: 2px solid rgb(255 255 255 / 0.09);
}
.lxa__label h3 {
margin: 0 0 0.15rem;
font-family: var(--font-display);
font-weight: var(--fw-extrabold, 800);
font-size: clamp(1rem, 1.3vw, 1.1875rem);
line-height: 1.1;
color: var(--text-primary);
}
.lxa__label p {
margin: 0;
color: var(--text-muted);
font-size: 0.9375rem;
line-height: var(--lh-snug, 1.35);
}
@media (min-width: 1000px) {
.lxa {
grid-template-columns: minmax(0, 1fr) minmax(17rem, 0.68fr);
column-gap: clamp(2rem, 5vw, 5rem);
align-items: start;
}
.lxa__stage,
.lxa__labels {
position: sticky;
top: calc(var(--lx-header-h, 105px) + clamp(1.5rem, 4vh, 3rem));
align-self: start;
}
}
@supports (animation-timeline: view()) {
html:not([data-motion="reduced"]) .lxa { view-timeline-name: --lxa; }
html:not([data-motion="reduced"]) .lxa__shot {
animation: lxa-lauf linear both;
animation-timeline: --lxa;
animation-range: contain 0% contain 100%;
}
/* Die Prozentwerte sind an der Bildvorlage GEMESSEN, nicht gleichmaessig verteilt:
die Abschnitte der Seite sind unterschiedlich hoch, eine gleichmaessige Verteilung
liefe sichtbar aus dem Takt. */
html:not([data-motion="reduced"]) .lxa__label {
animation: lxa-an linear both;
animation-timeline: --lxa;
border-inline-start-color: rgb(255 255 255 / 0.09);
}
.lxa__label:nth-child(1) { animation-range: contain 0% contain 8%; }
.lxa__label:nth-child(2) { animation-range: contain 8% contain 20%; }
.lxa__label:nth-child(3) { animation-range: contain 20% contain 32%; }
.lxa__label:nth-child(4) { animation-range: contain 32% contain 44%; }
.lxa__label:nth-child(5) { animation-range: contain 44% contain 56%; }
.lxa__label:nth-child(6) { animation-range: contain 56% contain 68%; }
.lxa__label:nth-child(7) { animation-range: contain 68% contain 79%; }
.lxa__label:nth-child(8) { animation-range: contain 79% contain 90%; }
.lxa__label:nth-child(9) { animation-range: contain 90% contain 100%; }
}
@keyframes lxa-lauf {
to { translate: 0 calc(-100% + var(--lxa-rahmen, min(72svh, 40rem))); }
}
/* Der Ausfallmodus ist SICHTBAR: ohne Scroll-Timelines steht das Bild oben und alle zehn
Beschriftungen sind lesbar. Die Animation hebt nur hervor, sie enthuellt nichts. */
@keyframes lxa-an {
0%, 100% { opacity: 0.4; border-inline-start-color: rgb(255 255 255 / 0.09); }
35%, 65% { opacity: 1; border-inline-start-color: var(--gold, #d4af37); }
}
/* Im Editor laesst sich ein klebendes Element nicht zuverlaessig anfassen. */
body.elementor-editor-active .lxa__stage,
body.elementor-editor-active .lxa__labels { position: static; }
body.elementor-editor-active .lxa { min-block-size: 0; }
/* ==========================================================================
3e · Die Projektwand — jede Branche zeigt ihr Projekt
==========================================================================
Die acht Zeilen bleiben Wortlaut und Link. Neu ist die Aufnahme, die beim Ueberfahren
hereinfaehrt. Sie ist DEKORATION im Wortsinn: der Link nennt das Ziel bereits, ein
zweites Mal vorgelesen zu werden waere Laerm. Deshalb `alt=""` und `aria-hidden`.
========================================================================== */
.lxp-row { position: relative; overflow: clip; }
/* Das Wort muss ueber der Aufnahme liegen — ohne Stapelkontext schoebe sich das Bild
darueber, sobald es einen z-index bekommt. */
.lxp-row > a { position: relative; z-index: 1; }
.lxp-row__shot {
position: absolute;
z-index: 0;
inset-block: clamp(0.75rem, 1.6vw, 1.25rem);
inset-inline-end: clamp(1rem, 4vw, 4rem);
inline-size: auto;
aspect-ratio: 16 / 10;
object-fit: cover;
object-position: top center;
border: var(--hairline-ink, 1px solid rgb(255 255 255 / 0.09));
border-radius: var(--radius-card, 4px);
opacity: 0;
translate: 2.5rem 0;
pointer-events: none;
transition: opacity var(--dur-slow, 420ms) var(--ease-emphasis, cubic-bezier(.22,1,.36,1)),
translate var(--dur-slow, 420ms) var(--ease-emphasis, cubic-bezier(.22,1,.36,1));
}
.lxp-row:hover .lxp-row__shot,
.lxp-row:focus-within .lxp-row__shot { opacity: 0.85; translate: 0 0; }
/* Unter 900 px gibt es kein Ueberfahren. Statt die Aufnahmen zu verstecken, stehen sie
dort dauerhaft unter dem Wort — eine Projektliste ohne Projekte waere der schlechtere
Tausch. */
@media (max-width: 899px) {
.lxp-row__shot {
position: static;
inline-size: 100%;
block-size: auto;
margin-block-start: 0.75rem;
opacity: 0.9;
translate: none;
}
.lxp-row { overflow: visible; }
}
@media (prefers-reduced-motion: reduce) {
html:not([data-motion="full"]) .lxp-row__shot { transition: none; }
}
html[data-motion="reduced"] .lxp-row__shot { transition: none; }
/* ==========================================================================
4 · Weitere Leistungen
==========================================================================
Auf der Live-Seite stehen die vier Leistungsnamen unten als blosser Text, ohne einen
einzigen Link. Hier sind sie verlinkt — additiv, und die einzige interne Verlinkung,
die die Seite ueberhaupt hat. */
/* Der Abgang der Seite laeuft ueber die volle Breite. Sieben von neun Sektionen
standen auf exakt 1560 px — die Seite hatte damit gar keinen Rhythmus mehr, und
genau davon lebt die Startseite. Hier bricht sie einmal bewusst aus. */
.lxs-weitere {
padding: 0 0 var(--v2-y);
}
.lxs-weitere__kopf {
max-width: var(--v2-max);
margin-inline: auto;
padding: 0 var(--v2-pad) clamp(1.5rem, 3vw, 2.5rem);
}
.lxs-weitere__list {
display: block;
margin: 0;
padding: 0;
list-style: none;
border-top: var(--hairline-ink, 1px solid rgb(255 255 255 / 0.09));
}
.lxs-weitere__row {
position: relative;
border-bottom: var(--hairline-ink, 1px solid rgb(255 255 255 / 0.09));
/* `clip` statt `hidden`: `hidden` erzeugt einen Scroll-Container und haengt sich
damit in die Scroll-Zeitleisten der Seite. */
overflow: clip;
isolation: isolate;
}
/* Das Motiv laeuft beim Hover von rechts hinter die Zeile. Es ist dasselbe Bild wie
in der Bahn der Startseite — hier schon bezahlt, kein zusaetzlicher Download. */
.lxs-weitere__row::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background-image: var(--motiv, none);
background-size: cover;
background-position: center 62%;
opacity: 0;
translate: 4% 0;
transition: opacity var(--dur-slow, 420ms) var(--ease-out, cubic-bezier(.22,1,.36,1)),
translate var(--dur-slow, 420ms) var(--ease-emphasis, cubic-bezier(.22,1,.36,1));
}
.lxs-weitere--webdesign { --motiv: url("../img/leistung-webdesign.webp"); }
.lxs-weitere--social { --motiv: url("../img/leistung-social.webp"); }
.lxs-weitere--recruiting { --motiv: url("../img/leistung-recruiting.webp"); }
.lxs-weitere__row:hover::before,
.lxs-weitere__row:focus-within::before { opacity: 0.5; translate: 0 0; }
.lxs-weitere__row a {
display: flex;
align-items: center;
/* Der Pfeil steht DIREKT am Wort. Vorher schob `space-between` ihn 668 px nach
rechts — die Bewegung fand dort statt, wo niemand hinsieht. Auf einer Zeile
ueber die volle Breite waere das noch schlimmer geworden. */
justify-content: flex-start;
gap: clamp(0.75rem, 1.5vw, 1.5rem);
max-width: var(--v2-max);
margin-inline: auto;
padding: clamp(1.1rem, 2.4vw, 2rem) var(--v2-pad);
text-decoration: none;
color: inherit;
}
/* Die kompakte Fassung traegt auf der Webdesign-Seite ACHT Branchen statt vier
Leistungen. In der grossen Groesse waeren das ueber 1200 px Sektionshoehe fuer eine
Linkliste — die Form bleibt, das Mass nicht. */
.lxs-weitere--kompakt .lxs-weitere__wort { font-size: clamp(1.5rem, 3.2vw, 2.75rem); }
.lxs-weitere--kompakt .lxs-weitere__row a { padding-block: clamp(1rem, 2vw, 1.75rem); }
/* Der Abgang als EINE Zeile: vier Namen nebeneinander, zentriert. Kam als
Seiten-CSS der Webdesign-v2 (dort: nach acht Projektkacheln waeren vier volle
Zeilen der dritte Listenblock in Folge gewesen) und ist am 05.08.2026 auf
Nutzer-Entscheid zur Standardform ALLER Leistungsseiten befoerdert worden —
von hier aus, nicht mehr aus `_elementor_page_settings`. Ausdruecklich OHNE
die kompakte Liste, die das Projektraster traegt. Unter 900 px bleibt die
gestapelte Fassung: vier Namen nebeneinander waeren dort unlesbar schmal. */
@media (min-width: 900px) {
.lxs-weitere__list:not(.lxs-weitere--kompakt) {
display: grid;
grid-template-columns: repeat(4, 1fr);
max-width: var(--v2-max);
margin-inline: auto;
padding-inline: var(--v2-pad);
}
.lxs-weitere__list:not(.lxs-weitere--kompakt) .lxs-weitere__row a {
justify-content: center;
text-align: center;
max-width: none;
padding-inline: 0.5rem;
}
/* Auf ein Viertel der Breite braucht das Wort ein kleineres Mass — und
`nowrap` statt `balance`: GEMESSEN brach "Social Media" trotz kleinerer
Stufe zweizeilig um (132px statt 98px), der Pfeil sass neben Zeile zwei
statt auf der gemeinsamen Linie der vier Leistungen. Einzeilig stehen
Wort und Pfeil zentriert auf einer Hoehe. */
.lxs-weitere__list:not(.lxs-weitere--kompakt) .lxs-weitere__wort {
font-size: clamp(1.5rem, 2.4vw, 2.25rem);
white-space: nowrap;
}
}
.lxs-weitere__wort {
font-family: var(--font-display);
font-weight: var(--fw-ultra, 900);
/* Deutlich groesser als vorher (32 px): das ist der Abgang, nicht eine Fussnote. */
font-size: clamp(2rem, 5.2vw, 4.5rem);
line-height: 0.95;
letter-spacing: -0.02em;
translate: 0 0;
transition: translate var(--dur-slow, 420ms) var(--ease-emphasis, cubic-bezier(.22,1,.36,1)),
color var(--dur-2, 240ms) var(--ease-out, cubic-bezier(.22,1,.36,1));
}
/* Der Pfeil ist gezeichnet, kein Zeichen aus der Schrift: als Glyphe haengt seine
Groesse an der Laufweite und sitzt auf keiner Grundlinie sauber. */
.lxs-weitere__pfeil {
flex: 0 0 auto;
inline-size: clamp(1.5rem, 3vw, 2.75rem);
block-size: 1px;
background: var(--gold, #d4af37);
position: relative;
scale: 0.4 1;
transform-origin: left;
opacity: 0.5;
transition: scale var(--dur-slow, 420ms) var(--ease-emphasis, cubic-bezier(.22,1,.36,1)),
opacity var(--dur-2, 240ms) var(--ease-out, cubic-bezier(.22,1,.36,1));
}
.lxs-weitere__pfeil::after {
content: "";
position: absolute;
right: 0;
top: 50%;
inline-size: 0.55rem;
block-size: 0.55rem;
border-top: 1px solid var(--gold, #d4af37);
border-right: 1px solid var(--gold, #d4af37);
translate: 0 -50%;
rotate: 45deg;
}
.lxs-weitere__row:hover .lxs-weitere__wort,
.lxs-weitere__row:focus-within .lxs-weitere__wort {
translate: clamp(0.5rem, 1vw, 1rem) 0;
color: var(--gold-400, #d4af37);
}
.lxs-weitere__row:hover .lxs-weitere__pfeil,
.lxs-weitere__row:focus-within .lxs-weitere__pfeil { scale: 1 1; opacity: 1; }
/* ==========================================================================
4b · Zitate versetzt einlaufen
==========================================================================
Im Bento-Raster stehen die drei Stimmen nebeneinander und betreten den Bildschirm
damit gleichzeitig — eine eigene Zeitleiste je Kachel staffelt sie nicht. Der
Versatz muss deshalb ueber den BEREICH kommen, nicht ueber eine Verzoegerung:
Zeitverzoegerungen laufen auf einer Scroll-Zeitleiste gar nicht.
========================================================================== */
@supports (animation-timeline: view()) {
.lx-typ-leistung .v2-quote {
animation: lxs-quote linear both;
animation-timeline: view();
}
.lx-typ-leistung .v2-quote:nth-child(1) { animation-range: entry 20% entry 85%; }
.lx-typ-leistung .v2-quote:nth-child(2) { animation-range: entry 12% entry 78%; }
.lx-typ-leistung .v2-quote:nth-child(3) { animation-range: entry 4% entry 70%; }
}
/* Kein `opacity: 0` als Ruhezustand ausserhalb von @supports — ohne
Scroll-Zeitleisten stuenden die Zitate sonst dauerhaft unsichtbar da. */
@keyframes lxs-quote {
from { opacity: 0; translate: 0 1.75rem; }
to { opacity: 1; translate: 0 0; }
}
/* GEMESSEN am 05.08.2026: die Zitat-Sektion endete auf den Pixel buendig mit der
Folgesektion (6575 == 6575, null Luft). Der Reveal schiebt die Karten waehrend
des Eintritts aber bis 1.75rem nach UNTEN — auf Recruiting und Social Media
hingen sie dadurch sichtbar in der hellen Papier-Sektion (dunkle Karten auf
Weiss; vor dunklen Folgesektionen faellt derselbe Ueberhang nicht auf).
Die Luft muss GROESSER sein als die Translate-Strecke, damit die Bewegung
vollstaendig auf dunklem Grund stattfindet. */
.lx-typ-leistung .v2-quotes {
padding-bottom: clamp(3rem, 5vw, 5rem);
}
@media (min-width: 800px) {
.lxs-weitere__list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(2rem, 5vw, 4rem); }
}
/* ==========================================================================
4c · Eingangsanimationen
==========================================================================
EIN Keyframe fuer alles, was bisher still stand. Kein zweiter Mechanismus neben
`v2-rise` (Ueberschriften), `lxs-ziehen` (Ablauf) und `lxs-quote` (Stimmen) —
dieselbe Bewegung, nur an anderen Stellen.
Gestaffelt wird ueber den BEREICH, nicht ueber eine Verzoegerung: auf einer
Scroll-Zeitleiste laeuft `animation-delay` gar nicht. Nebeneinanderstehende
Elemente betreten den Bildschirm sonst gleichzeitig und es gaebe keine Staffelung.
ACHTUNG: der Keyframe beginnt bei `opacity: 0` mit Fill-Mode `both`. Jede dieser
Regeln MUSS unten eine Ruecknahme haben — sonst ist der halbe Seiteninhalt bei
zurueckgenommener Bewegung unsichtbar, ohne dass irgendwo ein Fehler erscheint.
========================================================================== */
@keyframes lxs-auf {
from { opacity: 0; translate: 0 1.5rem; }
to { opacity: 1; translate: 0 0; }
}
@supports (animation-timeline: view()) {
.lx-typ-leistung .lxs-hero__siegel,
.lx-typ-leistung .lxs-station .lx-row,
.lx-typ-leistung .lxs-station .lx-split-2 > section,
.lx-typ-leistung .lxs-einwand,
.lx-typ-leistung .lxs-plattform,
.lx-typ-leistung .lxs-kennzahlen > li,
.lx-typ-leistung .lxs-tabelle__rahmen,
.lx-typ-leistung .lxs-proof,
.lx-typ-leistung .v2-faq__list .e-n-accordion-item,
.lx-typ-leistung .v2-contact__grid,
.lx-typ-leistung .lxs-weitere__row {
animation: lxs-auf linear both;
animation-timeline: view();
animation-range: entry 12% entry 76%;
}
/* Untereinander stehende Zeilen brauchen keine Staffelung — sie betreten den
Bildschirm ohnehin nacheinander. Nur was NEBENEINANDER steht, wird versetzt. */
.lx-typ-leistung .lxs-station .lx-split-2 > section:nth-child(2) { animation-range: entry 4% entry 68%; }
.lx-typ-leistung .v2-faq__list .e-n-accordion-item:nth-child(2) { animation-range: entry 9% entry 73%; }
.lx-typ-leistung .v2-faq__list .e-n-accordion-item:nth-child(3) { animation-range: entry 6% entry 70%; }
.lx-typ-leistung .v2-faq__list .e-n-accordion-item:nth-child(4) { animation-range: entry 3% entry 67%; }
}
/* ==========================================================================
3f · Autorenzeile der Kundenstimmen
==========================================================================
GESEHEN im Review: die Kundenlogos fuellten die komplette Zitatkarte — die Klasse
stand im Markup dreier Seiten, hatte aber nie eine Regel bekommen. Ein Bild ohne
Massregel nimmt seine natuerliche Groesse, und 1080-px-Logos SIND ihre natuerliche
Groesse. Die Startseite war nicht betroffen; ihre Zitate tragen ohne Bild. */
.v2-quote__wer {
display: flex;
align-items: center;
gap: 0.9rem;
margin-top: 1.25rem;
}
.v2-quote__wer img {
inline-size: 44px;
block-size: 44px;
object-fit: contain;
border-radius: var(--radius-card, 4px);
/* Dieselbe Behandlung wie die Logo-Baender: entsaettigt, damit vierzehn Markenfarben
nicht gegen das Gold anschreien. */
filter: grayscale(1) brightness(1.15);
opacity: 0.85;
}
.v2-quote__wer span {
display: flex;
flex-direction: column;
gap: 0.1rem;
font-size: 0.875rem;
color: var(--text-muted);
}
.v2-quote__wer strong {
color: var(--text-secondary);
font-weight: var(--fw-semibold, 600);
}
/* ==========================================================================
4b · Papier — der helle Bruch auf Leistungsseiten
==========================================================================
GESEHEN im Review: Webdesign und Recruiting waren ~4000 px ununterbrochenes
Near-Black — SEO und SMM haben ihren `v2-paper`-Bruch, die beiden nicht. Ein Akzent
wirkt nur gegen etwas.
Als Zusatzklasse gebaut, nicht als eigene Sektion: `lxs-papier` legt sich auf eine
vorhandene Sektion (Shops auf Webdesign, Ablauf auf Recruiting) und dreht nur die
Farben. Die Layout-Regeln der Sektion bleiben unberuehrt.
Steht bewusst NACH den `.e-con.lxs-*`-Regeln aus Abschnitt 0: gleiche Spezifitaet,
spaeter gewinnt — so setzt sich `max-width: none` fuer den vollen Grund durch. */
.e-con.lxs-papier {
max-width: none;
margin-inline: 0;
padding: clamp(4rem, 9vw, 8rem) var(--v2-pad);
background: var(--paper, #f2efe9);
color: var(--ink-1000, #0b0a09);
}
.lxs-papier > .elementor-element,
.lxs-papier > .lxs-axis__stations {
max-width: var(--v2-max);
margin-inline: auto;
width: 100%;
}
.lxs-papier .lx-label { color: var(--gold-700, #8a6d1d); }
.lxs-papier .v2-h2 { color: var(--ink-1000, #0b0a09); }
/* Der Geist-Button ist fuer dunklen Grund gebaut: helle Schrift, dunkle Kontur.
Auf Papier stand er GEMESSEN mit rgb(242 239 233) auf rgb(246 245 241) —
Kontrast ~1:1, nur die Kontur war sichtbar. Auf hellem Grund dreht er um. */
.lxs-papier .lx-btn-ghost .elementor-button,
.lxs-papier .lx-btn--ghost {
color: var(--ink-1000, #0b0a09);
border-color: var(--ink-1000, #0b0a09);
}
.lxs-papier .lx-btn-ghost .elementor-button:hover,
.lxs-papier .lx-btn-ghost .elementor-button:focus-visible,
.lxs-papier .lx-btn--ghost:hover {
color: var(--ink-1000, #0b0a09);
border-color: var(--gold-700, #8a6d1d);
}
.lxs-papier .v2-lead,
.lxs-papier .v2-lead p { color: var(--ink-700, #4a463f); }
/* Ablauf auf Papier: technische Zeichnung statt Nachtaufnahme. Die Goldlinie traegt
auf Papier von selbst; nur die Textfarben und die Rautenfuellung muessen umziehen. */
.lxs-papier .lxs-schritt__titel { color: var(--ink-1000, #0b0a09); }
.lxs-papier .lxs-schritt__text { color: var(--ink-700, #4a463f); }
.lxs-papier .lxs-schritt__label,
.lxs-papier .lxs-schritt__num { color: var(--gold-700, #8a6d1d); }
.lxs-papier .lxs-schritt::after {
background: color-mix(in oklab, var(--gold, #d4af37) calc(var(--an) * 100%), var(--paper, #f2efe9));
border-color: rgb(138 109 29 / calc(0.55 + var(--an) * 0.45));
}
.lxs-papier .lxs-schritt__bild {
border-color: rgb(11 10 9 / 0.14);
background: #fff;
}
/* Beleg auf Papier (Shops-Sektion): Screenshotrahmen und Fliesstext in Tinte. */
.lxs-papier .lxs-proof__note { color: var(--ink-700, #4a463f); }
.lxs-papier .lxs-proof__shot {
border-color: rgb(11 10 9 / 0.14);
background: #fff;
}
/* ==========================================================================
4c · Kampagnentabelle: Podium, Balken, Karten
==========================================================================
GESEHEN im Review: 30 gleichfoermige Zeilen ohne Einstieg, mobil nur Querscroll.
Drei Antworten: die besten drei als Podium davor, ein Balken je Zeile macht die
Spannweite der Kosten sichtbar, und unter 700 px wird jede Zeile eine Karte —
der Querscroll entfaellt dort komplett. */
.lxs-top3 {
display: grid;
gap: clamp(1rem, 2vw, 1.75rem);
margin: 0 0 clamp(1.5rem, 3vw, 2.5rem);
padding: 0;
list-style: none;
counter-reset: podium;
}
@media (min-width: 760px) { .lxs-top3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.lxs-top3 > li {
position: relative;
counter-increment: podium;
padding: clamp(1.4rem, 2.6vw, 2rem);
border: var(--hairline-ink, 1px solid rgb(255 255 255 / 0.09));
border-radius: var(--radius-card, 4px);
background: linear-gradient(160deg, rgb(27 24 21 / 0.55), rgb(14 13 11 / 0.55));
}
.lxs-top3 > li::before {
content: "";
position: absolute;
inset: -1px -1px auto -1px;
height: 2px;
background: var(--grad-gold, linear-gradient(90deg, #d4af37, #f0dfa0));
border-radius: var(--radius-card, 4px) var(--radius-card, 4px) 0 0;
}
.lxs-top3__rang {
position: absolute;
inset-block-start: clamp(1.1rem, 2vw, 1.6rem);
inset-inline-end: clamp(1.2rem, 2.2vw, 1.8rem);
font-family: var(--font-mono);
font-size: 0.6875rem;
letter-spacing: 0.16em;
color: var(--text-muted);
}
.lxs-top3__stelle {
margin: 0 0 0.75rem;
padding-inline-end: 3.5rem;
font-family: var(--font-display);
font-weight: var(--fw-extrabold, 800);
font-size: clamp(1.125rem, 1.6vw, 1.5rem);
line-height: 1.05;
color: var(--text-primary);
}
.lxs-top3__wert {
margin: 0 0 0.2rem;
font-family: var(--font-display);
font-weight: var(--fw-ultra, 900);
font-size: clamp(1.75rem, 2.8vw, 2.5rem);
line-height: 0.95;
letter-spacing: -0.02em;
background: var(--grad-gold, linear-gradient(90deg, #d4af37, #f0dfa0));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
@media (forced-colors: active) {
.lxs-top3__wert { background: none; -webkit-text-fill-color: revert; color: CanvasText; }
}
.lxs-top3__wert span { font-size: 0.4em; font-weight: var(--fw-semibold, 600); color: var(--text-muted); }
.lxs-top3__leads { margin: 0; color: var(--text-secondary); font-size: 0.9375rem; }
/* Der Balken hinter den Kosten: Laenge = Anteil am teuersten Wert, per --b aus dem
Bauskript. Als Hintergrund der Zelle, nicht als Extra-Element — die Zahl bleibt
rechtsbuendig darueber lesbar. */
.lxs-tabelle__cpl {
background-image: linear-gradient(90deg, rgb(212 175 55 / 0.16), rgb(212 175 55 / 0.16));
background-size: var(--b, 0%) 58%;
background-repeat: no-repeat;
background-position: left center;
}
/* Unter 700 px wird jede Zeile eine Karte. `clip-path: inset(50%)` versteckt den Kopf
visuell, laesst ihn aber fuer Screenreader stehen — `display: none` naehme ihnen die
Spaltenzuordnung. Die Beschriftung je Wert kommt aus `data-l` im Markup. */
@media (max-width: 699px) {
.lxs-tabelle__rahmen { overflow-x: visible; background: linear-gradient(160deg, rgb(27 24 21 / 0.55), rgb(14 13 11 / 0.55)); }
.lxs-tabelle { min-inline-size: 0; }
.lxs-tabelle thead { position: absolute; clip-path: inset(50%); width: 1px; height: 1px; overflow: hidden; }
.lxs-tabelle tbody, .lxs-tabelle tr, .lxs-tabelle tbody th, .lxs-tabelle td { display: block; }
.lxs-tabelle tr { padding: 0.9rem clamp(1rem, 4vw, 1.25rem); border-bottom: var(--hairline-ink, 1px solid rgb(255 255 255 / 0.09)); }
.lxs-tabelle tbody th { padding: 0 0 0.45rem; border-bottom: 0; }
.lxs-tabelle td {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 1rem;
padding: 0.15rem 0;
border-bottom: 0;
}
.lxs-tabelle td::before {
content: attr(data-l);
color: var(--text-muted);
font-size: 0.6875rem;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.lxs-tabelle__cpl { background-size: 0% 0%; }
.lxs-tabelle tbody tr:hover th, .lxs-tabelle tbody tr:hover td { background: none; }
}
/* ==========================================================================
5 · Bewegung zuruecknehmen
==========================================================================
Dreistufig wie in design.css. Die Regel dahinter: das Dokument muss ohne jede
Animation vollstaendig und lesbar sein. Bleibt eine Flaeche leer, ist das ein
Barrierefreiheits-Fehler, kein Design. */
/* Die Zitate sind der heikelste Fall: ihr Keyframe beginnt bei `opacity: 0`, und mit
Fill-Mode `both` waeren sie vor ihrem Bereich unsichtbar. Wird die Animation
abgeschaltet, MUSS die Deckkraft ausdruecklich zurueck auf 1 — sonst verschwinden
drei Kundenstimmen spurlos, ohne dass irgendwo ein Fehler erscheint. */
@media (prefers-reduced-motion: reduce) {
html:not([data-motion="full"]) .lxs-ablauf { animation: none !important; --lxs-a: 1; }
html:not([data-motion="full"]) .lxs-schritt { animation: none !important; --an: 1; }
html:not([data-motion="full"]) .lxs-weitere__row::before,
html:not([data-motion="full"]) .lxs-weitere__wort,
html:not([data-motion="full"]) .lxs-weitere__pfeil { transition: none; }
html:not([data-motion="full"]) .lx-typ-leistung .v2-quote,
html:not([data-motion="full"]) .lx-typ-leistung .lxs-hero__siegel,
html:not([data-motion="full"]) .lx-typ-leistung .lxs-station .lx-row,
html:not([data-motion="full"]) .lx-typ-leistung .lxs-station .lx-split-2 > section,
html:not([data-motion="full"]) .lx-typ-leistung .lxs-einwand,
html:not([data-motion="full"]) .lx-typ-leistung .lxs-plattform,
html:not([data-motion="full"]) .lx-typ-leistung .lxs-kennzahlen > li,
html:not([data-motion="full"]) .lx-typ-leistung .lxs-tabelle__rahmen,
html:not([data-motion="full"]) .lx-typ-leistung .lxs-proof,
html:not([data-motion="full"]) .lx-typ-leistung .v2-faq__list .e-n-accordion-item,
html:not([data-motion="full"]) .lx-typ-leistung .v2-contact__grid,
html:not([data-motion="full"]) .lx-typ-leistung .lxs-weitere__row {
animation: none !important;
opacity: 1 !important;
translate: none !important;
}
}
html[data-motion="reduced"] .lxs-ablauf { animation: none !important; --lxs-a: 1; }
html[data-motion="reduced"] .lxs-schritt { animation: none !important; --an: 1; }
html[data-motion="reduced"] .lxs-weitere__row::before,
html[data-motion="reduced"] .lxs-weitere__wort,
html[data-motion="reduced"] .lxs-weitere__pfeil { transition: none; }
html[data-motion="reduced"] .lx-typ-leistung .v2-quote,
html[data-motion="reduced"] .lx-typ-leistung .lxs-hero__siegel,
html[data-motion="reduced"] .lx-typ-leistung .lxs-station .lx-row,
html[data-motion="reduced"] .lx-typ-leistung .lxs-station .lx-split-2 > section,
html[data-motion="reduced"] .lx-typ-leistung .lxs-einwand,
html[data-motion="reduced"] .lx-typ-leistung .lxs-plattform,
html[data-motion="reduced"] .lx-typ-leistung .lxs-kennzahlen > li,
html[data-motion="reduced"] .lx-typ-leistung .lxs-tabelle__rahmen,
html[data-motion="reduced"] .lx-typ-leistung .lxs-proof,
html[data-motion="reduced"] .lx-typ-leistung .v2-faq__list .e-n-accordion-item,
html[data-motion="reduced"] .lx-typ-leistung .v2-contact__grid,
html[data-motion="reduced"] .lx-typ-leistung .lxs-weitere__row {
animation: none !important;
opacity: 1 !important;
translate: none !important;
}
/* ==========================================================================
6 · Editor
==========================================================================
Hier stand die Ruecknahme fuer die klebende Schiene: im Elementor-Editor laesst sich
ein sticky Element nicht zuverlaessig anfassen und verdeckt beim Bearbeiten die
Nachbarn. Die Schiene ist entfallen, auf Leistungsseiten klebt derzeit nichts mehr.
Die Regel gehoert wieder her, sobald es das tut. */