.elementor-kit-5024{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;}.elementor-kit-5024 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){margin-block-end:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}
/* Start custom CSS *//* ---- Linkfarbe, abhaengig vom Untergrund -------------------------------
Blue Light #5C8BFF liegt auf Deep Navy bei 6,03:1, auf Weiss aber nur bei
3,19:1. Electric Blue #1458FF ist genau umgekehrt: auf Weiss 5,43:1, auf
Deep Navy nur 3,54:1. Beide tauschen die Rollen, je nach Untergrund. */
.elementor a:not(.elementor-button):not(.elementor-icon) { color: #1458FF; }
body.home .elementor a:not(.elementor-button):not(.elementor-icon),
.elementor-location-header a:not(.elementor-button),
.elementor-location-footer a:not(.elementor-button) { color: #5C8BFF; }
body.home .elementor a:not(.elementor-button):not(.elementor-icon):hover,
.elementor-location-footer a:not(.elementor-button):hover { color: #FFFFFF; }
/* ---- Zeilenlaenge -----------------------------------------------------
Nicht in ch: die Einheit misst die Breite der Ziffer 0, und die ist breiter
als der Durchschnittsbuchstabe. 72ch ergaben real rund 110 Zeichen. */
.elementor-widget-text-editor p, .elementor-widget-text-editor ol,
.elementor-widget-text-editor ul { max-width: 640px; }
.elementor-50 .elementor-widget-container p, .elementor-50 .elementor-widget-container li,
.elementor-48 .elementor-widget-container p, .elementor-48 .elementor-widget-container li,
.elementor-4591 .elementor-widget-container p, .elementor-4591 .elementor-widget-container li,
.elementor-50 details p, .elementor-50 summary, .elementor-50 h4, .elementor-50 h5,
#cmplz-document p, #cmplz-document li { max-width: 540px; }
/* ---- Rechtstexte lesbar -----------------------------------------------
Der Blocksatz steht als inline-Style in den Absaetzen, deshalb important.
Die Vorlage setzt in ihren Aufklapp-Bloecken ausserdem Zeilenhoehe 1,2. */
.elementor-50 p, .elementor-50 li, .elementor-48 p, .elementor-48 li,
.elementor-4591 p, .elementor-4591 li { text-align: left !important; }
.elementor-50 .elementor-widget-container p, .elementor-50 .elementor-widget-container li,
.elementor-4591 .elementor-widget-container p, .elementor-4591 .elementor-widget-container li,
.elementor-50 details, .elementor-50 summary,
#cmplz-document p, #cmplz-document li { font-size: 16px; line-height: 1.6; }
#cmplz-document td, #cmplz-document th, #cmplz-document .cmplz-service-description,
#cmplz-document .cmplz-service-description p { font-size: 16px; line-height: 1.5; }
/* Lange URLs sprengen sonst den Handy-Bildschirm, breite Tabellen ebenso. */
.elementor-50, .elementor-48, .elementor-4591, #cmplz-document { overflow-wrap: anywhere; }
#cmplz-document { overflow-x: auto; }
/* ---- Klickflaechen: WCAG 2.2 AA verlangt 24px, der Tivaos-Kanon 44. ---- */
.elementor a[href^="mailto:"], .elementor a[href^="tel:"],
.elementor-location-footer .elementor-widget-text-editor a {
display: inline-block; padding-block: 12px; }
#cmplz-document a, #cmplz-document summary, .elementor-50 details a, .elementor-50 summary a {
display: inline-block; padding-block: 6px; min-height: 24px; }/* End custom CSS */
/* ---- Einwilligung im Formular -----------------------------------------
Elementor setzt ueber die Checkbox nochmal das Feldlabel "Datenschutz".
Das doppelt den Text darunter und wird ausgeblendet. Das Kaestchen selbst
bleibt das native Element, bekommt aber Markenfarbe und Fingergroesse:
accent-color faerbt den Haken ohne Nachbau, und ein Nachbau waere hier
nur ein Weg, Tastaturbedienung kaputtzumachen. */
.elementor-field-type-acceptance > .elementor-field-label { display: none; }
.elementor-field-type-acceptance .elementor-field-option {
display: flex; align-items: flex-start; gap: 12px; }
.elementor-field-type-acceptance input[type="checkbox"] {
/* 24px: WCAG 2.2 AA Mindestgroesse, der Seitencheck mass 22. */
width: 24px; height: 24px; margin: 1px 0 0; flex: 0 0 24px;
accent-color: #1458FF; cursor: pointer; }
.elementor-field-type-acceptance label {
cursor: pointer; max-width: 52ch; padding-block: 2px; }
.elementor-field-type-acceptance a {
text-decoration: underline;
/* Inline-Link als 24px-Beruehrflaeche (WCAG 2.2 AA). */
display: inline-block; padding-block: 2px; }
/* Abstand vor der Einwilligung und vor dem Absenden, damit der Block nicht
an der Nachricht klebt. */
.elementor-field-type-acceptance { margin-block-start: 6px; }
/* ================= KANON-NACHTRAG =================
Gemessen am 31.08.2026 auf der gerenderten Seite.
Zum Tastaturfokus steht hier bewusst NICHTS: Elementors reset.css setzt
bereits einen weissen 4px-Schatten mit schwarzer 2px-Outline, und der ist
auf dunklem Grund besser sichtbar als ein Ring in Markenfarbe. Ein frueherer
Versuch mit :where() war wirkungslos (Spezifitaet 0) und hat den FAQ-Koepfen
den vorhandenen Ring sogar genommen. */
/* Beruehrflaechen im Kopf. Gemessen: Navigationslinks 31px, CTA 39px,
gefordert sind 44px. Die FAQ-Koepfe (69px) und Fusszeilenlinks (45 bis
47px) erfuellen die Vorgabe bereits und bleiben unangetastet. */
.elementor-location-header .elementor-button {
min-height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
}
/* Einwilligung. Gemessen: 16px Schrift bei 16px Zeilenhoehe, die Zeilen
klebten aneinander. Der Kanon verlangt mindestens 1.4. */
.elementor-field-type-acceptance label {
font-size: 15px;
line-height: 1.6;
}
/* ================= REDESIGN V2: OPERATIONS-KONSOLE =================
Gehoert zu den sx-Klassen aus build/sektionen.mjs. Jede Regel hier hat
einen Grund im Manifest (build/manifest-v2.md). */
/* Blaupausen-Raster als Hintergrundtextur, nur Hero und Prozesskette.
0.04 Deckkraft: sichtbar als Tiefe, unsichtbar als Muster. */
.sx-blueprint {
background-image:
repeating-linear-gradient(0deg, rgba(230,232,238,.04) 0 1px, transparent 1px 110px),
repeating-linear-gradient(90deg, rgba(230,232,238,.04) 0 1px, transparent 1px 110px);
}
/* Haarlinien-Raster (Vercel/Linear-Muster): der Container ist die Fuge,
die Zellen decken sie ab. Grid statt Flex, weil Flex Spaltenzahlen mit
1px-Fugen nicht verlaesslich rechnet. */
.sx-raster { display: grid !important; gap: 1px; }
/* min-width:0: eine 1fr-Spur darf nie von einem langen Token (URL,
Weglot-Uebersetzung) aufgesprengt werden. */
.sx-raster > .e-con { width: auto !important; max-width: none !important; min-width: 0; }
.sx-raster .elementor-widget-container { overflow-wrap: anywhere; }
.sx-raster-2 { grid-template-columns: repeat(2, 1fr); }
.sx-raster-3 { grid-template-columns: repeat(3, 1fr); }
.sx-raster-4 { grid-template-columns: repeat(4, 1fr); }
/* Gestaffelte Spaltenzahl statt harter Klippe: bei 1025px fielen
4er-Zellen sonst auf 182px Textbreite (Pruefbefund). */
@media (max-width: 1200px) {
.sx-raster-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 1100px) {
.sx-raster-3 { grid-template-columns: repeat(2, 1fr); }
/* Drei Zellen in zwei Spalten liessen sonst rechts unten eine leere
Fugenflaeche stehen: die letzte Zelle spannt ueber beide Spuren. */
.sx-raster-3 > .e-con:last-child { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
.sx-raster-2, .sx-raster-3, .sx-raster-4 { grid-template-columns: 1fr; }
.sx-raster-3 > .e-con:last-child { grid-column: auto; }
/* Das Zahlenband bleibt mobil EINE kompakte Reihe statt drei
gestapelter KPI-Bloecke (Gestaltungs- und Conversion-Befund). */
.sx-zahlen { grid-template-columns: repeat(3, 1fr) !important; }
.sx-zahlen > .e-con { padding: 15px !important; }
.sx-zahlen > .e-con:last-child { grid-column: auto; }
}
/* Hero-Linksspalte: auf Desktop row+wrap, damit die zwei Knoepfe nebeneinander
stehen, ohne eine vierte Container-Ebene zu brauchen. Volle-Breite-Kinder
verhalten sich wie eine Spalte, nur die Knoepfe teilen sich eine Zeile. */
@media (min-width: 768px) {
.sx-heroL { flex-direction: row !important; flex-wrap: wrap; align-content: flex-start; align-items: center; }
.sx-heroL > .elementor-element { width: 100%; }
.sx-heroL > .elementor-widget-button { width: auto; }
}
/* Sekundaer-CTA als Textlink mit Unterstrich-Wipe (waechst von links,
200ms, unter der 300ms-Grenze des Kanons). */
.sx-textlink .elementor-button { background: transparent; }
.sx-textlink .elementor-button-text {
/* Grundzustand traegt eine gedimmte Linie: ein Link ohne jede
Unterstreichung waere als Link nicht erkennbar. Der Hover schiebt
die Blue-Light-Linie von links darueber. */
background-image:
linear-gradient(#5C8BFF, #5C8BFF),
linear-gradient(rgba(230,232,238,.35), rgba(230,232,238,.35));
background-size: 0% 1px, 100% 1px;
background-position: 0 100%, 0 100%;
background-repeat: no-repeat;
padding-bottom: 3px;
transition: background-size .2s ease-out;
}
.sx-textlink .elementor-button:hover .elementor-button-text,
.sx-textlink .elementor-button:focus-visible .elementor-button-text { background-size: 100% 1px, 100% 1px; }
@media (prefers-reduced-motion: reduce) {
.sx-textlink .elementor-button-text { transition: none; }
}
/* Haftende Linksspalte in Split-Sektionen, nur Desktop. */
@media (min-width: 1025px) {
.sx-haft { position: sticky; top: 110px; align-self: flex-start; }
}
/* Gedimmter Satzteil im Statement (Vercel-Muster: Hierarchie im Satz).
rgba(230,232,238,.55) komponiert auf Tech Navy zu etwa #838C99,
gemessen 5,07:1 und damit ueber AA (Rechnung der Technikpruefung). */
.sx-dim { color: rgba(230,232,238,.55); }
/* FAQ: Mono-Nummerierung der Fragen per CSS-Zaehler. */
.sx-faq .elementor-toggle { counter-reset: sxfaq; }
.sx-faq .elementor-tab-title { counter-increment: sxfaq; position: relative; padding-left: 64px !important; }
.sx-faq .elementor-tab-title::before {
content: counter(sxfaq, decimal-leading-zero);
position: absolute; left: 20px; top: 50%; transform: translateY(-50%);
font-family: 'Space Mono', monospace;
font-size: 12px; letter-spacing: .08em; color: #5C8BFF;
}
.sx-faq .elementor-tab-content { padding-left: 64px !important; padding-right: 20px !important; }
@media (max-width: 767px) {
.sx-faq .elementor-tab-title { padding-left: 52px !important; }
.sx-faq .elementor-tab-title::before { left: 15px; }
.sx-faq .elementor-tab-content { padding-left: 52px !important; }
}
/* FAQ-Titel bleiben weiss. Die kontextabhaengige Linkfarbe aus Fassung 1
(body.home .elementor a:not(...):not(...)) wiegt (0,4,2) und schlug
sowohl das Widget-CSS als auch die erste Fassung dieser Regel. Gleiche
Spezifitaet (vier Klassen, zwei Elemente) plus spaetere Position im
selben Stylesheet gewinnt. */
body .sx-faq .elementor-toggle .elementor-tab-title a.elementor-toggle-title { color: #FFFFFF; }
body .sx-faq .elementor-toggle .elementor-tab-title.elementor-active a.elementor-toggle-title { color: #5C8BFF; }
/* FAQ-Icons: klein und gedaempft statt schwerer weisser Kloetze. */
.sx-faq .elementor-toggle-icon { font-size: 14px; }
.sx-faq .elementor-tab-title:not(.elementor-active) .elementor-toggle-icon { color: #A4AAB6; }
/* Growth-Icon (einziges PNG): Platz reservieren, sonst springt das Layout
beim Laden (Pruefbefund: Attachment ohne Massangaben). */
.sx-icon44 img { width: 44px; height: 44px; aspect-ratio: 1 / 1; object-fit: contain; }
/* Wortmarke im Kopf: bei sehr schmalen Geraeten (unter 380px) waere die
Zeile aus Logo und Knopf sonst rechnerisch ueberbelegt (Pruefbefund). */
@media (max-width: 380px) {
.elementor-location-header .elementor-widget-html svg { width: 148px; height: auto; }
}
/* Hero-Paneel mobil: nur die Fusszeile weicht, Kopf ("Vom Angebot zum
Kunden: 14 Stationen") und das Bild selbst tragen die Aussage jetzt auch
dort (Schlussgutachten). !important, weil der Styleblock des html-Widgets
im DOM nach dem Kit-CSS steht. */
@media (max-width: 767px) {
.sx-spec .f { display: none !important; }
}
/* Beginn mobil als senkrechte Achse statt vier gestapelter Zellen
(Pruefbefund: der Template-Stapel kehrte mobil zurueck). Die Fuge
verschwindet, jede Station haengt an einer gemeinsamen Linie mit
Electric-Blue-Marker. Die Linie ist dekorativ, die Nummern tragen. */
@media (max-width: 767px) {
.sx-beginn { background: transparent !important; border: 0 !important; gap: 0 !important; }
.sx-beginn > .e-con {
background: transparent !important;
border-left: 2px solid #2A384C;
padding: 20px 0 20px 25px !important;
position: relative;
}
.sx-beginn > .e-con::before {
content: '';
position: absolute; left: -5px; top: 26px;
width: 8px; height: 8px; background: #1458FF;
}
}
/* Kopfzeile auf schmalen Geraeten: der CTA sass praktisch am Logo
(Schlussgutachten, Mobil-Befund 1). Logo schmaler, Knopf kompakter. */
@media (max-width: 480px) {
.elementor-location-header .elementor-widget-html svg { width: 132px !important; height: auto !important; }
/* Schmaleres Logo heisst niedrigerer Link: mit 132px SVG blieben 40px
Gesamthoehe, das Polster gleicht auf 44 aus. */
.elementor-location-header .elementor-widget-html a { padding: 16px 0 !important; }
/* Ohne :not(.elementor-button-link): JEDER Elementor-Knopf traegt diese
Klasse, der Selektor traf also nie (Sweep-Befund: CTA brach weiter in
zwei Zeilen). Die Nav-Links sind mobil ohnehin ausgeblendet, die Regel
darf hier alle Knoepfe treffen. */
.elementor-location-header .elementor-button {
padding: 10px 14px !important;
font-size: 13px !important;
white-space: nowrap;
}
}
/* Inline-SVGs stehen als inline-Elemente auf der Textgrundlinie und
schleppen ~6px Geisterluft unter sich her (gemessen: 50px Box bei 44px
Icon, das PNG daneben 44px). display:block nimmt die Grundlinie raus. */
.elementor-widget-html .elementor-widget-container > svg { display: block; }
/* ================= FASSUNG 3: ERLEBNIS =================
Alberts Wunsch vom 01.09.2026: Scroll-Dramaturgie, Elemente, die sich
beim Scrollen veraendern, das X als wiederkehrendes Element. Alles reines
CSS. Browser ohne animation-timeline sehen die Seite statisch und damit
vollstaendig; prefers-reduced-motion schaltet jede Bewegung ab. */
/* --- Das X der Marke --------------------------------------------------- */
/* Aufzaehlungspunkt der sieben Problemsaetze. */
.sx-punkt p { position: relative; padding-left: 36px; margin: 0; }
.sx-punkt p::before {
content: ''; position: absolute; left: 0; top: .75em; width: 18px; height: 3px;
background: #1458FF;
}
/* Der Moment des Wiedererkennens, als Zitat gesetzt. */
.sx-wende .elementor-heading-title { padding-left: 28px; border-left: 3px solid #1458FF; }
/* Wasserzeichen im Statement, dreht sich leicht beim Scrollen. */
.sx-statement { position: relative; overflow: clip; }
.sx-statement::after {
content: ''; position: absolute; right: -60px; top: 50%; width: 420px; height: 298px;
margin-top: -149px; opacity: .09; pointer-events: none;
background: url("data:image/svg+xml;utf8,") no-repeat center / contain;
}
@media (max-width: 767px) { .sx-statement::after { display: none; } }
/* Das X im Hero-Paneel an den Phasenwechseln, dieselbe Bedeutung wie im
Prozessband: X markiert einen Uebergang. */
.sx-spec .s-seg + .s-seg .s-strich::before {
content: ''; position: absolute; left: -13px; top: 50%; width: 18px; height: 13px;
transform: translateY(-50%); background: url("data:image/svg+xml;utf8,") no-repeat center / contain;
}
/* --- Das Prozessband (Ablauf) ------------------------------------------ */
.sx-strecke { width: 100%; }
.sx-strecke-lane { display: flex; align-items: flex-start; gap: 0; }
.sx-strecke .ph { position: relative; min-width: 0; padding-right: 28px; }
.sx-strecke .ph:last-child { padding-right: 0; }
.sx-strecke .ph-kopf { display: flex; flex-direction: column; gap: 4px; margin-bottom: 20px; min-height: 58px; }
.sx-strecke .ph-name {
font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 22px;
letter-spacing: .06em; text-transform: uppercase; color: #FFFFFF; line-height: 1.2;
}
.sx-strecke .ph-gloss {
font-family: 'Space Mono', monospace; font-size: 12px; letter-spacing: .06em;
text-transform: uppercase; color: #5C8BFF; line-height: 1.5;
}
.sx-strecke .ph-st {
list-style: none; margin: 0; padding: 26px 0 0; position: relative;
display: flex; justify-content: space-between; gap: 12px;
}
/* Die Linie. Zeichnet sich beim Hereinscrollen, siehe unten. */
.sx-strecke .ph-st::before {
content: ''; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--f);
transform-origin: 0 50%;
}
.sx-strecke .st {
position: relative; flex: 1 1 0; min-width: 0; padding: 0;
font-family: 'Space Grotesk', sans-serif; font-size: 16px; line-height: 1.4; color: #E6E8EE;
}
/* Knoten auf der Linie. */
.sx-strecke .st i {
position: absolute; left: 0; top: -32px; width: 14px; height: 14px;
background: #080F1A; border: 3px solid var(--f); border-radius: 2px;
}
/* Das X am Uebergang zwischen zwei Phasen, mittig auf der Linie. */
.sx-strecke .ph-joint .ph-st::after {
content: ''; position: absolute; left: -26px; top: -8px; width: 28px; height: 20px;
background: url("data:image/svg+xml;utf8,") no-repeat center / contain;
}
@media (max-width: 1024px) {
.sx-strecke .ph-name { font-size: 19px; }
.sx-strecke .st { font-size: 15px; }
}
@media (max-width: 767px) {
/* stretch: mit dem geerbten flex-start schrumpften die Phasen mobil auf
Inhaltsbreite (gemessen 181/310/213px statt volle Breite). */
.sx-strecke-lane { flex-direction: column; align-items: stretch; gap: 30px; }
.sx-strecke .ph { padding: 0 0 0 24px; border-left: 4px solid var(--f); }
.sx-strecke .ph-kopf { min-height: 0; margin-bottom: 14px; }
.sx-strecke .ph-st { flex-direction: column; gap: 10px; padding-top: 0; }
.sx-strecke .ph-st::before { display: none; }
.sx-strecke .st { padding-left: 4px; }
.sx-strecke .st i { top: .3em; left: -35px; width: 12px; height: 12px; border-width: 3px; }
.sx-strecke .ph-joint .ph-st::after { display: none; }
.sx-strecke .ph-joint::before {
content: ''; position: absolute; left: -17px; top: -26px; width: 30px; height: 21px;
background: url("data:image/svg+xml;utf8,") no-repeat center / contain;
}
}
/* --- Partnernetzwerk: Alberts Leistungsliste als Chips ------------------ */
p.sx-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
p.sx-chips span {
display: inline-block; font-family: 'Space Mono', monospace; font-size: 12px;
letter-spacing: .06em; text-transform: uppercase; color: #A4AAB6;
border: 1px dashed #636D7D; border-radius: 2px; padding: 9px 12px; line-height: 1.2;
}
/* --- Bewegung ----------------------------------------------------------- */
/* Hero: die Elemente kommen gestaffelt herein, 280ms je Element, die
Staffelung macht die Dramaturgie, nicht die Dauer. */
@keyframes sxRein { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.sx-heroL > .elementor-element { animation: sxRein .28s ease-out both; }
.sx-heroL > .elementor-element:nth-child(2) { animation-delay: .08s; }
.sx-heroL > .elementor-element:nth-child(3) { animation-delay: .16s; }
.sx-heroL > .elementor-element:nth-child(4) { animation-delay: .24s; }
.sx-heroL > .elementor-element:nth-child(5) { animation-delay: .3s; }
.sx-spec { animation: sxRein .28s ease-out .22s both; }
/* Fortschrittslinie am oberen Rand: die Seite zeigt, wo man auf der Strecke
ist. Scroll-getrieben, ohne Skript. */
@supports (animation-timeline: scroll()) {
body::before {
content: ''; position: fixed; top: 0; left: 0; z-index: 9998; height: 3px; width: 100%;
background: linear-gradient(90deg, #1458FF, #6A4CFF);
transform-origin: 0 50%; transform: scaleX(0); pointer-events: none;
animation: sxFortschritt linear both; animation-timeline: scroll(root);
}
@keyframes sxFortschritt { to { transform: scaleX(1); } }
}
/* Sicherung: Elementor 4.2.3 setzt bei Entrance-Animationen
elementor-invisible, loest sie aber nicht aus. Sollte je ein Element so
konfiguriert werden, bleibt es sichtbar. */
.elementor-invisible { visibility: visible !important; }
/* Auftauchen beim Hereinscrollen, reines CSS. Bewusst nur fuer kleine
Dramaturgie-Zeilen (Problemsaetze, Zitat, Streckenphasen), nie fuer ganze
Inhaltsbloecke: Ganzseitenaufnahmen per Viewport-Vergroesserung sehen
Elemente unterhalb des Sichtfensters sonst als leer. Das Screenshot-Skript
emuliert deshalb reduced-motion. Bereich "entry 0% bis 35%": waehrend das
Element den unteren Rand betritt. Was beim Laden im Bild ist, steht sofort. */
@supports (animation-timeline: view()) {
.sx-punkt, .sx-wende, .sx-strecke .ph {
animation: sxAuftauchen ease-out both;
animation-timeline: view(); animation-range: entry 0% entry 35%;
}
@keyframes sxAuftauchen { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
/* Die Strecke zeichnet sich fortschreitend von Market ueber Sales zu
Growth. Eine Timeline am Elternelement (Paneel bzw. Band) statt je einer
am 4px-Strich: die war so kurz, dass alle drei Segmente wie ein Schalter
gleichzeitig kippten (Codex-Urteil). */
.sx-spec { view-timeline-name: --sxspec; }
.sx-strecke { view-timeline-name: --sxband; }
.sx-spec .s-strich, .sx-strecke .ph-st::before { animation: sxZeichnen linear both; }
.sx-spec .p-s0 .s-strich { animation-timeline: --sxspec; animation-range: entry 0% cover 22%; }
.sx-spec .p-s1 .s-strich { animation-timeline: --sxspec; animation-range: cover 16% cover 34%; }
.sx-spec .p-s2 .s-strich { animation-timeline: --sxspec; animation-range: cover 28% cover 46%; }
.sx-strecke .ph:nth-child(1) .ph-st::before { animation-timeline: --sxband; animation-range: entry 0% cover 22%; }
.sx-strecke .ph:nth-child(2) .ph-st::before { animation-timeline: --sxband; animation-range: cover 16% cover 34%; }
.sx-strecke .ph:nth-child(3) .ph-st::before { animation-timeline: --sxband; animation-range: cover 28% cover 46%; }
@keyframes sxZeichnen { from { transform: scaleX(0); } to { transform: scaleX(1); } }
/* Das Wasserzeichen dreht mit dem Scrollen, ein Element, das sich
veraendert, ohne zu stoeren. */
/* Timeline am Abschnitt selbst, nicht am Pseudo-Element: view() auf dem
::after blieb inaktiv (currentTime null, gemessen). */
.sx-statement { view-timeline-name: --sxst; }
.sx-statement::after {
animation: sxDrehen linear both;
animation-timeline: --sxst; animation-range: entry 0% exit 100%;
}
@keyframes sxDrehen { from { transform: rotate(-10deg); } to { transform: rotate(10deg); } }
}
/* Wer Bewegung abgeschaltet hat, bekommt keine. Steht bewusst zuletzt. */
@media (prefers-reduced-motion: reduce) {
body::before, .sx-heroL > .elementor-element, .sx-spec, .sx-spec .s-strich,
.sx-strecke .ph-st::before, .sx-statement::after,
.sx-punkt, .sx-wende, .sx-strecke .ph { animation: none !important; }
}/* End custom CSS */