/* Einblenden beim Scrollen (nur wenn das Skript läuft: .js-rv) */
.js-rv .elementor .rv-t {
	opacity: 0;
	transform: translateY(20px);
	/* Vorrang vor den Übergängen der Klassen (solution-row, card), deren Hover-Übergänge bleiben erhalten */
	transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1), border-color .25s ease, background-color .25s ease;
}
.js-rv .elementor .rv-t.is-in {
	opacity: 1;
	transform: none;
}

/* Solutions-Zeile: nur der Inhalt blendet ein, nicht die Zeile mit ihrer bildschirmbreiten Hover-Fläche (sonst wird der Text unscharf) */
.js-rv .elementor .rv-c > * {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1);
}
.js-rv .elementor .rv-c.is-in > * {
	opacity: 1;
	transform: none;
}

/* Solutions-Zeile: Linie zeichnet sich von links */
.js-rv .solution-row::after {
	content: "";
	position: absolute;
	left: 0; right: 0; top: -1px;
	height: 1px;
	background: linear-gradient(90deg, var(--color-brand-gradient-start), rgba(150, 169, 204, 0) 75%);
	transform-origin: left center;
	transform: scaleX(0);
	transition: transform 1.1s cubic-bezier(.2, .7, .2, 1) .15s;
}
.js-rv .solution-row.is-in::after { transform: scaleX(1); }

/* Bewertung: Sterne füllen sich nacheinander */
.js-rv [data-id="7f30f2b8"] [data-id="2372b814"] .e-svg-base {
	opacity: .15;
	transform: scale(.6);
	transition: opacity .4s ease, transform .4s cubic-bezier(.2, .7, .2, 1);
}
.js-rv [data-id="7f30f2b8"].is-in [data-id="2372b814"] .e-svg-base { opacity: 1; transform: none; }
.js-rv [data-id="7f30f2b8"].is-in [data-id="2372b814"] .e-svg-base:nth-child(2) { transition-delay: .12s; }
.js-rv [data-id="7f30f2b8"].is-in [data-id="2372b814"] .e-svg-base:nth-child(3) { transition-delay: .24s; }
.js-rv [data-id="7f30f2b8"].is-in [data-id="2372b814"] .e-svg-base:nth-child(4) { transition-delay: .36s; }
.js-rv [data-id="7f30f2b8"].is-in [data-id="2372b814"] .e-svg-base:nth-child(5) { transition-delay: .48s; }

/* Hero-Grafik: Licht fließt über die Linien, Quadrat pulsiert, Pills bauen sich auf */
.js-flow-in, .js-flow-out { stroke-dasharray: 14 100; stroke-dashoffset: 14; opacity: 0; }
.js-flow-in { animation: js-flow-in 4s linear .6s infinite; }
.js-flow-out { animation: js-flow-out 4s linear .6s infinite; }
@keyframes js-flow-in { 0% { stroke-dashoffset: 14; opacity: 0; } 1% { opacity: 1; } 28% { stroke-dashoffset: -100; opacity: 1; } 29%, 100% { stroke-dashoffset: -100; opacity: 0; } }
@keyframes js-flow-out { 0%, 33% { stroke-dashoffset: 14; opacity: 0; } 34% { opacity: 1; } 62% { stroke-dashoffset: -100; opacity: 1; } 63%, 100% { stroke-dashoffset: -100; opacity: 0; } }
@keyframes js-core-pulse { 0%, 26% { transform: scale(1); } 31% { transform: scale(1.06); } 38%, 100% { transform: scale(1); } }
@keyframes js-comp-in { from { opacity: 0; transform: translate(-50%, -20%); } to { opacity: 1; transform: translate(-50%, -50%); } }
@keyframes js-stage-in { from { opacity: 0; transform: translate(-50%, -20%); } to { opacity: 1; transform: translate(-50%, -50%); } }
@keyframes js-core-in { from { opacity: 0; transform: scale(.82); } to { opacity: 1; transform: scale(1); } }
@keyframes js-base-draw { to { stroke-dashoffset: 0; } }

/* Hero-Grafik (Startseite): Pills deckend statt Glas, damit die Linien beim Zeichnen nicht durchscheinen */
/* [data-id] doppelt, damit es .elementor .glass schlägt */
.elementor :is([data-id="461ddc71"], [data-id="f98d589"])[data-id] { background-color: #121722; -webkit-backdrop-filter: none; backdrop-filter: none; }
.elementor .elementor-element:is([data-id="130b3ae0"], [data-id="745bca53"], [data-id="2a2cd410"]) { background-color: #161C29; -webkit-backdrop-filter: none; backdrop-filter: none; }

/* Hero-Grafik (Startseite): Bausteine oben, Linien zeichnen sich, Quadrat erscheint, Linien nach unten, Stufen, danach Lichtfluss und Puls */
@media (prefers-reduced-motion: no-preference) {
	.elementor [data-id="461ddc71"] { animation: js-comp-in .9s cubic-bezier(.22, 1, .36, 1) .1s both; }
	.elementor [data-id="f98d589"] { animation: js-comp-in .9s cubic-bezier(.22, 1, .36, 1) .22s both; }
	.elementor [data-id="d44b0c3"] .js-base { stroke-dasharray: 100; stroke-dashoffset: 100; animation: js-base-draw .8s cubic-bezier(.22, 1, .36, 1) .45s both; }
	.elementor [data-id="d44b0c3"] .js-base-bot { animation-delay: 1.05s; }
	.elementor [data-id="31bd9bad"] { animation: js-core-in 1s cubic-bezier(.22, 1, .36, 1) .7s both, js-core-pulse 4s ease-in-out 2.4s infinite; }
	.elementor [data-id="130b3ae0"] { animation: js-stage-in .9s cubic-bezier(.22, 1, .36, 1) 1.45s both; }
	.elementor [data-id="745bca53"] { animation: js-stage-in .9s cubic-bezier(.22, 1, .36, 1) 1.55s both; }
	.elementor [data-id="2a2cd410"] { animation: js-stage-in .9s cubic-bezier(.22, 1, .36, 1) 1.65s both; }
	.elementor [data-id="d44b0c3"] :is(.js-flow-in, .js-flow-out) { animation-delay: 2.4s; }
}


/* Marketing: Nachfrage-Grafik im Hero. Gruppen und Ziel-Box gleiten ein, Licht fließt über die Linien (dm-lines.svg) */
@keyframes js-layer-in { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
@keyframes js-dm-flow { 0% { stroke-dashoffset: 14; opacity: 1; } 55% { stroke-dashoffset: -100; opacity: 1; } 56%, 100% { stroke-dashoffset: -100; opacity: 0; } }
@media (prefers-reduced-motion: no-preference) {
	.elementor [data-id="456e27ba"] { animation: js-layer-in .6s cubic-bezier(.2, .7, .2, 1) both; }
	.elementor [data-id="3b4a712f"] { animation: js-layer-in .6s cubic-bezier(.2, .7, .2, 1) .15s both; }
	.elementor [data-id="54caa522"] { animation: js-layer-in .6s cubic-bezier(.2, .7, .2, 1) .35s both, js-dm-arrive 3.2s ease-out .8s infinite; }
	/* vector-effect aus: sonst rechnet der Browser den Strich in Bildschirmpixeln, und das Licht verschwindet vor der Ziel-Box */
	.js-dm-flow { vector-effect: none; stroke-width: 1.6; stroke-dasharray: 14 240; stroke-dashoffset: 14; stroke-linecap: butt; animation: js-dm-flow 3.2s linear .8s infinite; }
}
@media (prefers-reduced-motion: reduce) {
	.js-flow-in, .js-flow-out, .js-dm-flow { display: none; }
}

/* Webdesign: Ebenen-Grafik im Hero, die sechs Ebenen gleiten nacheinander ein */
@media (prefers-reduced-motion: no-preference) {
	.elementor [data-id="6fb502a2"] { animation: js-layer-in .6s cubic-bezier(.2, .7, .2, 1) both; }
	.elementor [data-id="7049731b"] { animation: js-layer-in .6s cubic-bezier(.2, .7, .2, 1) .15s both; }
	.elementor [data-id="32c64f1a"] { animation: js-layer-in .6s cubic-bezier(.2, .7, .2, 1) .3s both; }
	.elementor [data-id="2e64bb8b"] { animation: js-layer-in .6s cubic-bezier(.2, .7, .2, 1) .45s both; }
	.elementor [data-id="38b6a4a5"] { animation: js-layer-in .6s cubic-bezier(.2, .7, .2, 1) .6s both; }
	.elementor [data-id="5e985aea"] { animation: js-layer-in .6s cubic-bezier(.2, .7, .2, 1) .75s both; }
}

/* Marketing: Chips je Gruppe in einer Zeile, Ziel-Box leuchtet bei Ankunft des Lichts kurz auf */
@keyframes js-dm-arrive { 0%, 48% { box-shadow: 0 0 0 0 rgba(150, 169, 204, 0); } 56% { box-shadow: 0 0 0 1px rgba(150, 169, 204, .55), 0 0 24px rgba(126, 149, 192, .34); } 84%, 100% { box-shadow: 0 0 0 0 rgba(150, 169, 204, 0); } }
.elementor :is([data-id="456e27ba"], [data-id="3b4a712f"]) { container-type: inline-size; }
.elementor :is([data-id="61b77fc4"], [data-id="372890ed"]) { gap: .5em; font-size: min(12px, 3.75cqi); }
.elementor :is([data-id="61b77fc4"], [data-id="372890ed"]) > .chip { font-size: 1em; letter-spacing: .04em; padding: .5em .7em; white-space: nowrap; }

/* Webdesign: Linie der Ebenen-Grafik wie auf Solutions und Über: Mitte bei 9px wie die Quadrate (1–17px), Lücken an den Quadraten setzt script.js */
.elementor .elementor-element[data-id="4296eee7"] { top: 32px; bottom: 32px; height: auto; left: 8px; -webkit-mask-image: var(--wl-mask, none); mask-image: var(--wl-mask, none); }
/* Linie zeichnet sich von oben nach unten, erst wenn die Ebenen (Webdesign, bis 1,35s) bzw. Karten (Solutions, bis 0,9s) an ihrem Platz sind */
@keyframes js-line-draw { from { opacity: 0; transform: scaleY(0); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
	.elementor .elementor-element[data-id="4296eee7"] { transform-origin: 50% 0; animation: js-line-draw .9s cubic-bezier(.2, .7, .2, 1) 1.35s both; }
	#stage-jumps::before { transform-origin: 50% 0; animation: js-line-draw .9s cubic-bezier(.2, .7, .2, 1) .9s both; }
}

/* Solutions: Sprungmarken im Hero wie die Ebenen-Grafik auf Webdesign. Ruhige Linie, Quadrate in den Karten, Karten gleiten nacheinander ein.
   Endpunkte der Linie setzt script.js; Karten bewegen sich beim Hover nicht, sonst laufen die Quadrate von der Linie weg */
#stage-jumps { position: relative; padding-left: 28px; --sf-top: calc((100% - 24px) / 6); --sf-bottom: var(--sf-top); }
#stage-jumps > a { position: relative; }
.elementor #stage-jumps > a:hover { transform: none; }
#stage-jumps::before {
	content: ""; position: absolute; left: 7px; width: 2px; pointer-events: none; /* Mitte bei 8px wie die Quadrate (0–16px), wie der Zeitstrahl auf Über */
	top: var(--sf-top); bottom: var(--sf-bottom); height: auto; /* Elementor gibt ::before eines Containers eine feste Höhe */
	background: linear-gradient(180deg, rgba(150, 169, 204, .15), #96A9CC);
	-webkit-mask-image: var(--sf-mask, none); mask-image: var(--sf-mask, none); /* Lücken an den Quadraten, setzt script.js */
}
#stage-jumps > a::before {
	content: ""; position: absolute; left: -29px; top: 50%; width: 16px; height: 16px; margin-top: -8px; z-index: 1; /* -28px Einzug, -1px Kartenrahmen */
	border-radius: 1.8px; background: linear-gradient(90deg, #96A9CC, #6E84B3); /* alle gefüllt wie auf Über; Radius wie im Logo: 11,4 % der Kante */
}
@media (prefers-reduced-motion: no-preference) {
	#stage-jumps > a { animation: js-layer-in .6s cubic-bezier(.2, .7, .2, 1) both; }
	#stage-jumps > a:nth-child(2) { animation-delay: .15s; }
	#stage-jumps > a:nth-child(3) { animation-delay: .3s; }
}

/* Solutions: Uhrwerk, die Zahnräder setzt script.js ein; sie drehen nur, solange sie im Bild sind */
@keyframes js-gear-cw { to { transform: rotate(360deg); } }
@keyframes js-gear-ccw { to { transform: rotate(-360deg); } }
#gears svg { display: block; height: 100%; width: auto; max-width: 100%; overflow: visible; }
@media (prefers-reduced-motion: no-preference) {
	#gears .gear { animation-name: js-gear-cw; animation-timing-function: linear; animation-iteration-count: infinite; animation-play-state: paused; }
	#gears .gear.g-ccw { animation-name: js-gear-ccw; }
	#gears.is-spinning .gear { animation-play-state: running; }
}

/* Über: Hero-Porträt (Canvas v3, ruhig). Erst erscheint das Foto, dann schiebt sich das Logo-Quadrat hinter dem Foto hervor in seine versetzte Position */
@keyframes js-ph-calm { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes js-sq-calm { 0% { opacity: 0; transform: translate(32px, -32px); } 1% { opacity: 1; transform: translate(32px, -32px); } 100% { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
	.elementor [data-id="932844f"] { animation: js-ph-calm 1.1s cubic-bezier(.2, .7, .2, 1) .2s both; }
	.elementor [data-id="2f7c6bb7"] { animation: js-sq-calm 1.1s cubic-bezier(.2, .7, .2, 1) 1.3s both; }
}

/* Header: aktuelle Seite im Desktop-Menü wie Hover (helle Schrift, Linie in Markenfarbe), is-current setzt script.js */
.elementor [data-id="5c39160"] .is-current { color: var(--color-text-heading); border-bottom-color: var(--color-brand-primary); }

/* Impressum und Datenschutz: Bausteine fügen sich zum Logo-Quadrat (3 x 3, leise Variante aus dem Canvas), die Kacheln setzt script.js */
#legal-kb .kb-grid { position: relative; width: 204px; height: 204px; transform: scale(.74); transform-origin: 100% 50%; margin: -26px 0; }
#legal-kb .kc { position: absolute; width: 60px; height: 60px; border-radius: 6.9px; background: #121722; border: 1px solid rgba(150, 169, 204, .28); box-sizing: border-box; opacity: 0; }
#legal-kb .kb-logo { position: absolute; left: 12px; top: 12px; width: 180px; height: 180px; border-radius: 20.6px; background: linear-gradient(90deg, #96A9CC, #6E84B3); box-shadow: 0 24px 70px rgba(110, 132, 179, .25); }
@keyframes js-kc-in { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: scale(1); } }
@keyframes js-kc-fill { to { border-color: transparent; background: linear-gradient(90deg, #96A9CC, #6E84B3) var(--bp) / 180px 180px no-repeat; } }
@keyframes js-kc-join { from { transform: none; border-radius: 6.9px; } to { transform: translate(var(--dx), var(--dy)); border-radius: var(--r); } }
@keyframes js-kc-out { to { opacity: 0; } }
@keyframes js-kb-logo { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: no-preference) {
	#legal-kb .kc { opacity: 1; animation-name: js-kc-in, js-kc-fill, js-kc-join, js-kc-out; animation-duration: .45s, .5s, .7s, .35s; animation-timing-function: cubic-bezier(.2, .7, .2, 1), ease, cubic-bezier(.65, 0, .35, 1), ease; animation-fill-mode: both, forwards, forwards, forwards; }
	#legal-kb .kb-logo { opacity: 0; animation: js-kb-logo .4s ease 1.7s forwards; }
}
/* Mobil unter der H1, links bündig und etwas kleiner */
@media (max-width: 1024px) { #legal-kb .kb-grid { transform: scale(.6); transform-origin: 0 50%; margin: -41px 0; } }

/* Impressum und Datenschutz: Rechtstext aus eRecht24 im Seitendesign (Canvas-Klasse „prose“) */
#rechtstext { font-family: var(--font-body); font-size: 1.0625rem; line-height: 1.75; color: var(--color-text-default); }
#rechtstext :where(h2, h3, h4, h5, h6, p, ul, ol, figure, table) { margin: 20px 0 0; }
#rechtstext :where(div, section) > :first-child { margin-top: 0; }
#rechtstext :where(h2, h3) { font-family: var(--font-heading); text-transform: uppercase; color: var(--color-text-heading); scroll-margin-top: 104px; }
#rechtstext h2 { margin-top: 56px; font-weight: 700; font-size: 2.125rem; line-height: 1.08; }
#rechtstext h3 { margin-top: 36px; font-weight: 600; font-size: 1.5rem; line-height: 1.15; }
#rechtstext :where(h4, h5, h6) { margin-top: 28px; font-size: 1.0625rem; line-height: 1.4; font-weight: 600; color: var(--color-text-heading); }
#rechtstext :where(h2, h3, h4, h5, h6) + * { margin-top: 14px; }
#rechtstext strong { color: var(--color-text-heading); font-weight: 600; }
#rechtstext a { color: #96A9CC; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; word-break: break-word; }
#rechtstext :where(ul, ol) { padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
#rechtstext li { position: relative; padding-left: 18px; }
#rechtstext li::before { content: ""; position: absolute; left: 0; top: .72em; width: 6px; height: 6px; border-radius: .7px; background: var(--color-brand-primary); }
#rechtstext img { max-width: 100%; height: auto; }
@media (max-width: 1024px) {
	#rechtstext { font-size: 1rem; }
	#rechtstext h2 { font-size: 1.75rem; margin-top: 44px; }
	#rechtstext h3 { font-size: 1.3125rem; }
}