/**
 * Statische HTTrack/Framer-Seiten ohne Framer-Runtime.
 *
 * WICHTIG: Kein globales display:block auf .ssr-variant setzen — Framer blendet
 * alternative Breakpoint-Varianten per .hidden-* aus. Mit #main .ssr-variant
 * { display:block !important } würden ALLE Varianten gleichzeitig sichtbar (massiver
 * Leerraum, doppelte Header/Footer).
 *
 * Keine Höhe/Breite an .framer-w4r5u2 o. Ä. überschreiben (Flex-Hacks mit height:1px).
 */
#main [data-layout-template="true"] {
	display: block !important;
}

#main [style*="opacity:0.001"],
#main [style*="opacity: 0.001"] {
	opacity: 1 !important;
}

/*
 * Framer-SSR: reines opacity:0 (nicht 0.001) — ohne Runtime bleiben viele Texte/Wrapper unsichtbar.
 * Nicht „opacity:0;“ per Attribut-Substring auf alles anwenden (kollidiert z. B. mit rgba).
 */
#main [data-framer-component-type="RichTextContainer"][style*="opacity:0;"] {
	opacity: 1 !important;
}

/*
 * Häufige Appear-Wrapper (will-change:transform + opacity:0), z. B. framer-*-container neben RichText.
 * Blog-Karten-Link .framer-5IvsI hat eine eigene Regel weiter unten.
 */
#main [style*="will-change:transform"][style*="opacity:0;"]:not(a.framer-5IvsI) {
	opacity: 1 !important;
}

/*
 * Branchen: Hero-/Teaser-Karten — CTA (Metrik + Unterzeile + Button) per SSR oft
 * opacity:0 + mask 0% + translateX(-50%) → ohne Framer-Runtime unsichtbar/abgeschnitten.
 *
 * — bereiche.html: a.framer-GvIBS (Desktop/Tablet/Mobile), CTA z. B. .framer-j2i4ik
 * — bereiche/*.html: große Karten oft a.framer-MKu96, CTA z. B. .framer-128n7b2
 */
#main a.framer-GvIBS [data-framer-name="CTA"],
#main a.framer-MKu96 [data-framer-name="CTA"],
#main [data-framer-name="CTA"][style*="opacity:0;"] {
	opacity: 1 !important;
	transform: none !important;
	mask: none !important;
	-webkit-mask: none !important;
}
/* Zerstörerische 0%-Maske (z. B. SSR-Zwischenzustand mit opacity:1) */
#main [data-framer-name="CTA"][style*="rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0) 0%)"] {
	mask: none !important;
	-webkit-mask: none !important;
}
/* Karten-Fuß: Innenabstand + kein Abschneiden */
#main a.framer-GvIBS [data-framer-name="Bottom"],
#main [data-framer-name="Bottom"]:has([data-framer-name="CTA"]) {
	padding-bottom: clamp(18px, 3vw, 36px);
	padding-inline: clamp(18px, 3vw, 40px);
	box-sizing: border-box;
	gap: clamp(12px, 2vw, 20px);
	overflow: visible !important;
}
/* CTA-Stack (ohne :has-only — funktioniert auch, wenn :has fehlt) */
#main a.framer-GvIBS [data-framer-name="CTA"],
#main a.framer-MKu96 [data-framer-name="CTA"],
#main [data-framer-name="Bottom"]:has([data-framer-name="CTA"]) [data-framer-name="CTA"] {
	position: relative !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: flex-end !important;
	justify-content: flex-end !important;
	gap: 6px !important;
	min-height: clamp(72px, 7vw, 104px);
	padding-bottom: 6px;
	padding-inline: clamp(10px, 1.4vw, 18px);
	box-sizing: border-box;
	overflow: visible !important;
}
#main a.framer-GvIBS [data-framer-name="CTA"] .framer-text,
#main a.framer-MKu96 [data-framer-name="CTA"] .framer-text,
#main [data-framer-name="Bottom"]:has([data-framer-name="CTA"]) [data-framer-name="CTA"] .framer-text {
	line-height: 1.25em;
	text-wrap: balance;
}

/*
 * Branchen-Unterseiten (MKu96): Framer setzt place-content: flex-start space-between → Kategorie bleibt
 * oben, Headline-Block wandert nach unten (Ist-Stand). Soll: alles oben links wie Bereiche-Hub.
 * CTA (.framer-128n7b2) ist position:absolute;bottom:0;left:50% — aus dem Flow, wirkt aufs Layout ein.
 */
#main a.framer-MKu96 {
	place-content: flex-start !important;
	align-content: flex-start !important;
	justify-content: flex-start !important;
	gap: clamp(12px, 2vw, 20px) !important;
}
#main a.framer-MKu96 [data-framer-name="CTA"] {
	bottom: auto !important;
	left: auto !important;
	right: auto !important;
	width: 100% !important;
	max-width: 100% !important;
	align-items: flex-start !important;
	justify-content: flex-start !important;
	min-height: 0 !important;
	padding-inline: 0 !important;
}

/*
 * Branchen-Unterseiten (Teaser-Kacheln a.framer-MKu96): Framer-Preset weicht von bereiche.html
 * (GvIBS-Karten, Preset 1reo5as) ab — „Geist Placeholder“-Metriken + 21px statt Variable-Placeholder + 28px.
 */
#main a.framer-MKu96 [data-framer-name="Top"] p.framer-text {
	--framer-font-family: "Geist Variable", "Geist Variable Placeholder", sans-serif !important;
}
#main a.framer-MKu96 [data-framer-name="Bottom"] h3.framer-text {
	--framer-font-family: "Geist Variable", "Geist Variable Placeholder", sans-serif !important;
	--framer-font-family-bold: "Geist Variable", "Geist Variable Placeholder", sans-serif !important;
	--framer-font-family-bold-italic: "Geist Variable", "Geist Variable Placeholder", sans-serif !important;
	--framer-font-family-italic: "Geist Variable", "Geist Variable Placeholder", sans-serif !important;
	--framer-font-open-type-features: "ss03" on !important;
	--framer-font-size: 28px !important;
	--framer-font-weight: 500 !important;
	--framer-letter-spacing: -0.02em !important;
	--framer-line-height: 1.2em !important;
	font-variation-settings: "wght" 520;
}
#main a.framer-MKu96 [data-framer-name="Bottom"] h3.framer-text strong {
	font-variation-settings: "wght" 600 !important;
}
@media (max-width: 759.98px) {
	#main a.framer-MKu96 [data-framer-name="Bottom"] h3.framer-text {
		--framer-font-size: 22px !important;
	}
}

/*
 * Kleine MKu96-Kacheln (Hub: Case Studies + Clients; Unterseiten: Other Case Studies):
 * CTA komplett aus (Metrik + „Mehr erfahren“). Kategorie bleibt im Top-Bereich; die h3-Zeile im
 * Bottom liegt am unteren Kartenrand (flex-end im wachsenden Bottom).
 */
#main section[data-framer-name="Other Case Studies Section"] a.framer-MKu96 [data-framer-name="CTA"],
#main section[data-framer-name="Case Studies Section"] a.framer-MKu96 [data-framer-name="CTA"],
#main section[data-framer-name="Clients Section"] a.framer-MKu96 [data-framer-name="CTA"] {
	display: none !important;
	visibility: hidden !important;
	opacity: 0 !important;
	pointer-events: none !important;
	height: 0 !important;
	min-height: 0 !important;
	max-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	overflow: hidden !important;
	border: none !important;
	mask: none !important;
	-webkit-mask: none !important;
}

#main section[data-framer-name="Other Case Studies Section"] a.framer-MKu96,
#main section[data-framer-name="Case Studies Section"] a.framer-MKu96,
#main section[data-framer-name="Clients Section"] a.framer-MKu96 {
	place-content: flex-start space-between !important;
	align-content: flex-start !important;
	justify-content: space-between !important;
}

#main section[data-framer-name="Other Case Studies Section"] a.framer-MKu96 [data-framer-name="Bottom"],
#main section[data-framer-name="Case Studies Section"] a.framer-MKu96 [data-framer-name="Bottom"],
#main section[data-framer-name="Clients Section"] a.framer-MKu96 [data-framer-name="Bottom"] {
	display: flex !important;
	flex-direction: column !important;
	justify-content: flex-end !important;
	align-items: stretch !important;
	flex: 1 1 auto !important;
	min-height: 0 !important;
}

/*
 * kanzleien.html: Hero-SSR lässt den Zusatz im Subtitel-<strong> leer — gleicher Inhalt wie auf den
 * Hub-Karten, nur für wirklich leeres <strong> (andere Bereich-Seiten haben dort Zitat-Text).
 */
#main section[data-framer-name="Hero Section"] h3.framer-text > strong:empty {
	display: block;
	font-family: "Geist Variable", "Geist Variable Placeholder", sans-serif !important;
}
#main section[data-framer-name="Hero Section"] h3.framer-text > strong:empty::before {
	content: "100%";
	display: block;
	font-size: clamp(32px, 3.4vw, 44px);
	font-variation-settings: "wght" 600;
	letter-spacing: -0.03em;
	line-height: 1.05;
	margin-bottom: 0.15em;
}
#main section[data-framer-name="Hero Section"] h3.framer-text > strong:empty::after {
	content: "DSGVO-konform und EU-AI-Act-ready";
	display: block;
	font-size: clamp(14px, 1.25vw, 17px);
	font-variation-settings: "wght" 400;
	opacity: 0.92;
	line-height: 1.25;
}

/*
 * bereiche.html — nur section.framer-1xq7a1e + framer-1ks13m8 (exklusiv diese Seite, zwei SSR-Hero-Blöcke):
 * Framer-Appear: transform zurücksetzen. Große GvIBS-Karte: Kategorie+Überschrift oben, CTA-Zeile (100% / DSGVO + Pill)
 * unten im Kartenfuß. Button-Text „Read More“ → „Mehr erfahren“: heroscale-static-slider.js (bereicheHeroGvibsReadMoreDe).
 */
#main section.framer-1xq7a1e[data-framer-name="Hero Section"] [data-framer-appear-id],
#main section.framer-1ks13m8[data-framer-name="Hero Section"] [data-framer-appear-id] {
	opacity: 1 !important;
	transform: none !important;
}

#main section.framer-1xq7a1e[data-framer-name="Hero Section"] a.framer-GvIBS.framer-1ggmd7r,
#main section.framer-1ks13m8[data-framer-name="Hero Section"] a.framer-GvIBS.framer-1ggmd7r {
	display: flex !important;
	flex-flow: column !important;
	justify-content: flex-start !important;
	align-items: stretch !important;
	align-content: flex-start !important;
	row-gap: clamp(8px, 1.4vh, 18px) !important;
	place-content: flex-start flex-start !important;
}

#main section.framer-1xq7a1e[data-framer-name="Hero Section"] a.framer-GvIBS [data-framer-name="Bottom"],
#main section.framer-1ks13m8[data-framer-name="Hero Section"] a.framer-GvIBS [data-framer-name="Bottom"] {
	display: flex !important;
	flex-direction: column !important;
	justify-content: flex-start !important;
	align-items: stretch !important;
	flex: 1 1 auto !important;
	min-height: 0 !important;
	width: 100% !important;
}

#main section.framer-1xq7a1e[data-framer-name="Hero Section"] a.framer-GvIBS [data-framer-name="CTA"],
#main section.framer-1ks13m8[data-framer-name="Hero Section"] a.framer-GvIBS [data-framer-name="CTA"] {
	opacity: 1 !important;
	visibility: visible !important;
	transform: none !important;
	mask: none !important;
	-webkit-mask: none !important;
	position: relative !important;
	bottom: auto !important;
	left: auto !important;
	right: auto !important;
	width: 100% !important;
	max-width: 100% !important;
	overflow: visible !important;
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: wrap !important;
	align-items: flex-end !important;
	justify-content: space-between !important;
	gap: clamp(10px, 2vw, 20px) !important;
	margin-top: auto !important;
	min-height: 0 !important;
}

#main section.framer-1xq7a1e[data-framer-name="Hero Section"] a.framer-GvIBS [data-framer-name="CTA"] [data-framer-component-type="RichTextContainer"],
#main section.framer-1ks13m8[data-framer-name="Hero Section"] a.framer-GvIBS [data-framer-name="CTA"] [data-framer-component-type="RichTextContainer"] {
	opacity: 1 !important;
}

/* Framer-Preset: Metric-Flex hat width:1px — „100%“-Spalte sonst praktisch unsichtbar */
#main section.framer-1xq7a1e[data-framer-name="Hero Section"] a.framer-GvIBS [data-framer-name="CTA"] [data-framer-name="Metric"],
#main section.framer-1ks13m8[data-framer-name="Hero Section"] a.framer-GvIBS [data-framer-name="CTA"] [data-framer-name="Metric"] {
	flex: 1 1 auto !important;
	width: auto !important;
	min-width: 0 !important;
	max-width: 100% !important;
}

/* Branchen: „Clients Section“ — Förder-Logos im Appear-Wrapper (opacity:0 ohne Runtime) */
#main section[data-framer-name="Clients Section"] [style*="opacity:0;"][style*="will-change:transform"] {
	opacity: 1 !important;
}

/* Framer-SSR-Bug: translateX(NaNpx) auf Ticker-Listen */
#main ul[style*="translateX(NaN"] {
	transform: translateX(0) !important;
}

#main header.framer-SFHaD,
#main header.framer-SFHaD .framer-1npekcz li,
#main header.framer-SFHaD .framer-h6kwlp li,
#main header.framer-SFHaD .framer-1i6mxd5 li {
	opacity: 1 !important;
}

/*
 * Desktop-Mega-Menüs (Branchen / KI-Produkte): Inhalte werden per heroscale-static-nav.js aus dem Tablet-Flyout
 * geklont; hier Hover, Z-Index und Overflow, damit Panels nicht vom Header abgeschnitten werden.
 */
@media (min-width: 1440px) {
	#main .framer-huxi9o-container.hidden-9iyxzk,
	#main .framer-guhhla-container,
	#main .framer-1h4pb9v-container {
		overflow: visible !important;
	}
	#main header.framer-SFHaD[data-framer-name="Desktop - Filled"] {
		max-height: none !important;
		overflow: visible !important;
	}
	#main header.framer-SFHaD[data-framer-name="Desktop - Filled"] .framer-w4r5u2,
	#main header.framer-SFHaD[data-framer-name="Desktop - Filled"] nav.framer-1t843fu,
	#main header.framer-SFHaD[data-framer-name="Desktop - Filled"] ul.framer-1npekcz {
		overflow: visible !important;
	}
	#main header.framer-SFHaD[data-framer-name="Desktop - Filled"]
		ul.framer-1npekcz
		> li[data-framer-name="Product"] {
		position: relative;
	}
	#main .heroscale-desktop-mega-panel {
		position: absolute;
		left: 0;
		top: 100%;
		z-index: 500;
		min-width: min(92vw, 720px);
		padding-top: 10px;
		margin-top: -4px;
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transform: translateY(6px);
		transition:
			opacity 0.18s ease,
			transform 0.18s ease,
			visibility 0.18s;
	}
	#main .heroscale-desktop-mega-panel::before {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		height: 14px;
		transform: translateY(-100%);
	}
	#main header.framer-SFHaD[data-framer-name="Desktop - Filled"]
		ul.framer-1npekcz
		> li[data-framer-name="Product"]:hover
		.heroscale-desktop-mega-panel,
	#main header.framer-SFHaD[data-framer-name="Desktop - Filled"]
		ul.framer-1npekcz
		> li[data-framer-name="Product"]:focus-within
		.heroscale-desktop-mega-panel {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transform: translateY(0);
	}
	#main .heroscale-desktop-mega-panel [data-framer-name="Dropdown: Product"] {
		width: max-content;
		max-width: min(92vw, 720px);
		box-sizing: border-box;
		box-shadow:
			0 12px 40px rgba(0, 0, 0, 0.12),
			0 2px 8px rgba(0, 0, 0, 0.06);
		border-radius: 10px;
	}
}

/*
 * Framer-SSR: Hero-Block (.hidden-1kb4vyr) ist bei ≤1099px display:none → kein Hintergrund,
 * bindHero findet keinen Block. Nur die <1440-Bildvariante (.hidden-mhcvel) soll sichtbar sein.
 */
@media (max-width: 1099.98px) {
	#main section.framer-hp9gow > .ssr-variant.hidden-1kb4vyr {
		display: contents !important;
	}
	#main section.framer-hp9gow .framer-19f1ni1 > .ssr-variant.hidden-oqqs8u {
		display: none !important;
	}
	/*
	 * Hero-Titel: zwei SSR-Zeilen (hidden-oqqs8u / hidden-mhcvel) wären sonst beide sichtbar
	 * (<1100px wendet Framer auf oqqs8u kein display:none an) → doppelte Überschrift, Pill-JS irritiert.
	 */
	#main section.framer-hp9gow .framer-1ahquko > .ssr-variant.hidden-oqqs8u {
		display: none !important;
	}
}

@media (max-width: 1439.98px) {
	#main section.framer-hp9gow .framer-6ke1nj,
	#main section.framer-hp9gow .framer-19f1ni1 {
		min-height: 50svh;
	}
}

/*
 * Header: .framer-huxi9o-container.hidden-9iyxzk verschwindet bei ≤759px komplett;
 * Tablet-Header (.hidden-9iyxzk.hidden-1e5v5lr) soll dort gelten, Desktop-SSR ausblenden.
 */
@media (max-width: 759.98px) {
	#main .framer-huxi9o-container.hidden-9iyxzk {
		display: block !important;
	}
	#main .framer-huxi9o-container > .ssr-variant.hidden-gqrxg9 {
		display: none !important;
	}
	#main .framer-huxi9o-container > .ssr-variant.hidden-9iyxzk.hidden-1e5v5lr {
		display: contents !important;
	}
	/*
	 * Fixer Header: Hero/Sticky-Layers (z. B. sehr schmale Viewports) dürfen den Burger nicht überdecken.
	 */
	#main .framer-huxi9o-container {
		z-index: 200 !important;
	}
	/*
	 * Zwei Header (Tablet + Mobile) wären sonst gleichzeitig im DOM sichtbar → doppelte
	 * Einträge (z. B. KI einfach erklärt, Kontakt). Nur den Mobile-Header nutzen.
	 */
	#main header.framer-SFHaD[data-framer-name="Tablet/Filled - Closed"] {
		display: none !important;
	}
	/*
	 * Mobile-Flyout: unter dem Menü wiederholen sich „Kontakt“ (Large White) und
	 * „Demo buchen“ (Medium Black, gleiches Ziel wie Termin/Kontakt) — entfernen.
	 */
	#main
		header.framer-SFHaD[data-framer-name="Mobile/Filled - Closed"]
		nav[data-framer-name="Navigation"]
		> a[data-framer-name="Large, White"],
	#main
		header.framer-SFHaD[data-framer-name="Mobile/Filled - Closed"]
		nav[data-framer-name="Navigation"]
		> div.framer-d73d4f-container {
		display: none !important;
	}
	/*
	 * Mobil: Chevron neben „Branchen“ / „KI-Produkte“ ausblenden (reine Liste).
	 */
	#main
		header.framer-SFHaD[data-framer-name="Mobile/Filled - Closed"]
		ul.framer-1i6mxd5
		[data-framer-name="Top"]
		> .framer-yvgXh {
		display: none !important;
	}
}

/* Banderole: nur Links klickbar, Rest nicht (vermeidet „tote“ Touch-Flächen über dem Header) */
#main [id="1gc48n1"],
#main div[data-framer-root] > div[tabindex="0"] {
	pointer-events: none !important;
}
#main [id="1gc48n1"] a,
#main [id="1gc48n1"] button,
#main div[data-framer-root] > div[tabindex="0"] a,
#main div[data-framer-root] > div[tabindex="0"] button {
	pointer-events: auto !important;
}

/* Tablet/Mobile-Navigation: Flyout ohne Framer-State (Tablet: ul.h6kwlp, Mobil: ul.1i6mxd5) */
#main:not(.heroscale-nav-is-open)
	header.framer-SFHaD[data-framer-name="Tablet/Filled - Closed"]
	ul.framer-h6kwlp,
#main:not(.heroscale-nav-is-open)
	header.framer-SFHaD[data-framer-name="Mobile/Filled - Closed"]
	ul.framer-1i6mxd5 {
	max-height: 0 !important;
	overflow: hidden !important;
	opacity: 0 !important;
	pointer-events: none !important;
	margin: 0 !important;
	padding: 0 !important;
	border: none !important;
}

#main.heroscale-nav-is-open
	header.framer-SFHaD[data-framer-name="Tablet/Filled - Closed"] {
	overflow: visible !important;
	max-height: none !important;
	z-index: 250;
}
#main.heroscale-nav-is-open
	header.framer-SFHaD[data-framer-name="Mobile/Filled - Closed"] {
	overflow: visible !important;
	max-height: none !important;
	z-index: 50;
}

#main.heroscale-nav-is-open
	header.framer-SFHaD[data-framer-name="Tablet/Filled - Closed"]
	.framer-w4r5u2,
#main.heroscale-nav-is-open
	header.framer-SFHaD[data-framer-name="Mobile/Filled - Closed"]
	.framer-w4r5u2 {
	height: auto !important;
	min-height: min(100dvh, 920px) !important;
	max-height: 100dvh !important;
	overflow-y: auto !important;
}

/* Tablet-Flyout: undurchsichtiger Hintergrund (Seiteninhalt sonst durchscheinend). */
#main.heroscale-nav-is-open
	header.framer-SFHaD[data-framer-name="Tablet/Filled - Closed"]
	.framer-w4r5u2 {
	background-color: var(
		--token-f2d0b226-11d7-401c-9054-7d237b6a1775,
		rgb(250, 250, 250)
	) !important;
}

#main.heroscale-nav-is-open
	header.framer-SFHaD[data-framer-name="Tablet/Filled - Closed"]
	ul.framer-h6kwlp,
#main.heroscale-nav-is-open
	header.framer-SFHaD[data-framer-name="Mobile/Filled - Closed"]
	ul.framer-1i6mxd5 {
	max-height: min(85vh, 800px) !important;
	overflow: auto !important;
	opacity: 1 !important;
	pointer-events: auto !important;
}

#main
	header.framer-SFHaD[data-framer-name="Tablet/Filled - Closed"]
	[data-framer-name="Closed"],
#main
	header.framer-SFHaD[data-framer-name="Mobile/Filled - Closed"]
	[data-framer-name="Closed"] {
	cursor: pointer;
}

/*
 * Tablet-Menü „Branchen“: zwei <li> (Product - Closed / Product - Open) — ohne Runtime beide sichtbar.
 * Klick auf „Top“ → heroscale-branchen-expanded (nur ul.framer-h6kwlp / Tablet).
 * Mobil (ul.framer-1i6mxd5): nur eine Product-Closed-Karte mit Bottom → wie KI-Varianten per
 * .heroscale-mobile-submenu-open (siehe Regel weiter unten bei framer-1i6mxd5).
 */
#main:not(.heroscale-branchen-expanded)
	header.framer-SFHaD[data-framer-name="Tablet/Filled - Closed"]
	ul.framer-h6kwlp
	> li:has(> div[data-framer-name="Product - Open"]) {
	display: none !important;
}

#main:not(.heroscale-branchen-expanded)
	header.framer-SFHaD[data-framer-name="Tablet/Filled - Closed"]
	ul.framer-h6kwlp
	> li:has(> div[data-framer-name="Product - Closed"])
	.framer-wgivrk[data-framer-name="Bottom"] {
	display: none !important;
}

#main.heroscale-branchen-expanded
	header.framer-SFHaD[data-framer-name="Tablet/Filled - Closed"]
	ul.framer-h6kwlp
	> li:has(> div[data-framer-name="Product - Closed"]) {
	display: none !important;
}

#main.heroscale-branchen-expanded
	header.framer-SFHaD[data-framer-name="Tablet/Filled - Closed"]
	ul.framer-h6kwlp
	> li:has(> div[data-framer-name="Product - Open"]) {
	display: list-item !important;
}

#main
	header.framer-SFHaD[data-framer-name="Tablet/Filled - Closed"]
	ul.framer-h6kwlp
	[data-framer-name="Top"],
#main
	header.framer-SFHaD[data-framer-name="Mobile/Filled - Closed"]
	ul.framer-1i6mxd5
	[data-framer-name="Top"] {
	cursor: pointer;
}

/*
 * Mobil: Unterpunkte (z. B. „KI-Produkte“ mit data-framer-name="Variant …") —
 * Bottom-Panel per Klasse .heroscale-mobile-submenu-open (heroscale-static-nav.js).
 */
#main
	header.framer-SFHaD[data-framer-name="Mobile/Filled - Closed"]
	ul.framer-1i6mxd5
	li
	> [tabindex="0"]:not(.heroscale-mobile-submenu-open)
	> [data-framer-name="Bottom"] {
	display: none !important;
}

/* Mobil: offenes Branchen-/KI-Panel über folgende Menüzeilen (Framer: Bottom oft absolute). */
#main
	header.framer-SFHaD[data-framer-name="Mobile/Filled - Closed"]
	ul.framer-1i6mxd5
	> li:has(> [tabindex="0"].heroscale-mobile-submenu-open) {
	position: relative !important;
	z-index: 80 !important;
	isolation: isolate !important;
}

#main
	header.framer-SFHaD[data-framer-name="Mobile/Filled - Closed"]
	ul.framer-1i6mxd5
	li
	> [tabindex="0"].heroscale-mobile-submenu-open {
	overflow: visible !important;
	max-height: none !important;
}

#main
	header.framer-SFHaD[data-framer-name="Mobile/Filled - Closed"]
	ul.framer-1i6mxd5
	li
	> [tabindex="0"].heroscale-mobile-submenu-open
	[data-framer-name="Bottom"] {
	position: relative !important;
	width: 100% !important;
	box-sizing: border-box !important;
}

/*
 * Tablet: KI-Zeile — Bottom wie Mobil; Nachfahren-Selektor; JS: heroscaleFlyoutSubmenuPanelSync (Stacking).
 */
#main
	header.framer-SFHaD[data-framer-name="Tablet/Filled - Closed"]
	ul.framer-h6kwlp
	li.heroscale-tablet-ki-from-mobile
	> [tabindex="0"]:not(.heroscale-mobile-submenu-open)
	[data-framer-name="Bottom"] {
	display: none !important;
}

#main
	header.framer-SFHaD[data-framer-name="Tablet/Filled - Closed"]
	ul.framer-h6kwlp
	> li.heroscale-tablet-ki-from-mobile:has(
			> [tabindex="0"].heroscale-mobile-submenu-open
		) {
	position: relative !important;
	z-index: 80 !important;
	isolation: isolate !important;
}

#main
	header.framer-SFHaD[data-framer-name="Tablet/Filled - Closed"]
	ul.framer-h6kwlp
	li.heroscale-tablet-ki-from-mobile
	> [tabindex="0"].heroscale-mobile-submenu-open {
	overflow: visible !important;
	max-height: none !important;
}

#main
	header.framer-SFHaD[data-framer-name="Tablet/Filled - Closed"]
	ul.framer-h6kwlp
	li.heroscale-tablet-ki-from-mobile
	> [tabindex="0"].heroscale-mobile-submenu-open
	[data-framer-name="Bottom"] {
	display: flex !important;
	flex-direction: column !important;
	position: relative !important;
	width: 100% !important;
	box-sizing: border-box !important;
	opacity: 1 !important;
	visibility: visible !important;
	max-height: none !important;
	height: auto !important;
	overflow: visible !important;
	transform: none !important;
	pointer-events: auto !important;
}

/*
 * Hero-Slideshow: Framer legt die Folien als Flex-Zeile (nebeneinander).
 * Nur visibility umzuschalten blendet aus, lässt die Breiten stehen → sichtbar
 * bleibt oft nur der erste Ausschnitt (grau/Overlay). Folien stapeln.
 */
#main [data-framer-name="Hero Section"] .framer-19f1ni1 ul {
	position: relative !important;
	width: 100% !important;
	height: 100% !important;
	min-height: 100% !important;
}
#main [data-framer-name="Hero Section"] .framer-19f1ni1 ul > li > div {
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	box-sizing: border-box !important;
}

/* Banderole: ohne Framer-JS bleibt die Liste bei opacity:0; Marquee läuft auf .heroscale-ticker-track */
#main [id="1gc48n1"] .framer-202ntr ul[role="group"] {
	opacity: 1 !important;
}

/* Marquee (Banderole: JS hängt zwei <ul> in .heroscale-ticker-track) */
#main [id="1gc48n1"] .heroscale-ticker-viewport {
	overflow: hidden;
	width: 100%;
}
#main [id="1gc48n1"] .heroscale-ticker-track {
	display: flex;
	width: max-content;
	animation-name: heroscale-marquee;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-duration: var(--hs-marquee-duration, 45s);
	will-change: transform;
}
#main [id="1gc48n1"] .heroscale-ticker-track > ul[role="group"] {
	flex-shrink: 0;
}
@keyframes heroscale-marquee {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(-50%);
	}
}
@media (prefers-reduced-motion: reduce) {
	#main [id="1gc48n1"] .heroscale-ticker-track {
		animation: none;
	}
}

/* Startseite / Agents: Integrations-Logos statisch, alle Breakpoint-Varianten */
#main [data-framer-name="LogoString"] ul[role="group"] {
	opacity: 1 !important;
	transform: none !important;
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: wrap !important;
	justify-content: flex-start !important;
	align-items: center !important;
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
	row-gap: 28px !important;
	column-gap: clamp(28px, 4vw, 72px) !important;
}

/*
 * Startseite „6 Säulen der Souveränität“ (.framer-19mqywz): Ticker-<ul> hat opacity:0 + translateX(-46px) ohne Runtime;
 * Eltern (.framer-mvon3r / .framer-1rzsf3f) nutzen overflow:clip → Karten wirken „leer“.
 */
#main ul[role="group"]:has(> li.ticker-item) {
	opacity: 1 !important;
	transform: translateX(0) !important;
	width: max-content !important;
	max-width: none !important;
}
#main .framer-19mqywz {
	overflow-x: auto;
	overflow-y: visible;
	width: 100%;
	max-width: 100%;
	-webkit-overflow-scrolling: touch;
	scrollbar-gutter: stable;
}
#main .framer-ttNg3 .framer-mvon3r:has(.framer-19mqywz),
#main .framer-ttNg3 .framer-1rzsf3f:has(.framer-19mqywz),
#main .framer-ttNg3 .framer-c1cxmc:has(.framer-19mqywz) {
	overflow-x: auto !important;
	overflow-y: visible !important;
	overflow: visible !important;
	mask: none !important;
	-webkit-mask: none !important;
}

/* Kunden-Logos („Wir werben nicht mit unseren bevorteilten Kunden…“): Framer opacity:0 ohne Runtime */
#main [data-framer-name="Company Logo Card 2"] {
	opacity: 1 !important;
}

/*
 * Kunden-Logo-Bereich: Framer setzt auf .framer-ohk94y nur padding-top — unten klebt die Leiste an die Folgesektion.
 * Zusätzlich overflow sichtbar (kein Abschneiden eines Untertitels).
 */
#main .framer-ohk94y {
	padding-bottom: clamp(28px, 5vw, 52px) !important;
	overflow: visible !important;
}
#main .framer-1mt0zs3 {
	padding-bottom: clamp(8px, 1.5vw, 20px);
}
#main .framer-rlxemx[data-framer-name="Management Feature Cards"] {
	margin-top: clamp(20px, 3.5vw, 48px);
}

/* Banderole (Ticker unten): dunkler Streifen + Padding */
#main [id="1gc48n1"] .framer-202ntr,
#main div[data-framer-root] > div[tabindex="0"] > .ssr-variant > div {
	background-color: rgb(42, 42, 44);
	padding-top: 12px;
	padding-bottom: 12px;
	overflow-x: hidden;
	overflow-y: visible;
}

/*
 * Banderole: Framer setzt (runtime) position:fixed, Zeile unten am Viewport.
 * Im Static-Export hat die Banderole je Seite eine andere ID/Klasse, aber ein stabiles Muster:
 * div[data-framer-root] > div[tabindex="0"] enthält die ssr-variants mit ul[role=group] / li.ticker-item.
 * --heroscale-banderol-height: gleicher Wert für Scroll-Padding und für kürzere 100vh-Flächen
 * (Hero-CTAs liegen sonst unter der Leiste).
 */
body:has([id="1gc48n1"]),
body:has(#main div[data-framer-root] > div[tabindex="0"]) {
	/* Eine Zeile + Padding der Leiste; etwas Luft, damit Hero-CTAs nicht visuell „unter“ der Banderole enden */
	--heroscale-banderol-height: 104px;
	padding-bottom: calc(
		var(--heroscale-banderol-height) + env(safe-area-inset-bottom, 0px)
	);
}

/* Full-Viewport-Höhen um Banderolen-Höhe verringern (Startseite: zwei min-height:100vh-Wrapper) */
body:has(#main [id="1gc48n1"]) #main > [data-layout-template="true"],
body:has(#main [id="1gc48n1"]) #main div[style*="min-height:100vh"][style*="width:auto"],
body:has(#main div[data-framer-root] > div[tabindex="0"])
	#main
	> [data-layout-template="true"],
body:has(#main div[data-framer-root] > div[tabindex="0"])
	#main
	div[style*="min-height:100vh"][style*="width:auto"] {
	min-height: calc(100vh - var(--heroscale-banderol-height)) !important;
	min-height: calc(100svh - var(--heroscale-banderol-height)) !important;
	min-height: calc(100dvh - var(--heroscale-banderol-height)) !important;
}

/* Header darf nicht wieder volle Viewport-Höhe „beanspruchen“ (Hero darunter kürzer bleiben) */
body:has(#main [id="1gc48n1"]),
body:has(#main div[data-framer-root] > div[tabindex="0"])
	#main
	header.framer-SFHaD[data-framer-name="Desktop - Filled"][style*="max-height:100dvh"] {
	max-height: calc(100dvh - var(--heroscale-banderol-height)) !important;
	max-height: calc(100svh - var(--heroscale-banderol-height)) !important;
}

/* Banderole immer unten fixieren (Static-Export) */
#main [id="1gc48n1"],
#main div[data-framer-root] > div[tabindex="0"] {
	position: fixed !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	width: 100% !important;
	z-index: 400 !important;
	transform: none !important;
}

/*
 * Hero mit Slideshow: Framer-Root nutzt oft display:contents → min-height-Kürzung greift nicht.
 * Padding am echten Hero-Block, damit „Termin anfragen“ / „Mehr erfahren“ oberhalb der fixen Banderole bleiben.
 */
body:has(#main [id="1gc48n1"]),
body:has(#main div[data-framer-root] > div[tabindex="0"])
	#main
	[data-framer-name="Hero Section"]:has(.framer-19f1ni1) {
	padding-bottom: calc(
		var(--heroscale-banderol-height) + clamp(12px, 2.5vw, 28px)
	) !important;
	box-sizing: border-box !important;
}

#main [id="1gc48n1"] .framer-qm4yf0 h3.framer-text,
#main div[data-framer-root] > div[tabindex="0"] .framer-qm4yf0 h3.framer-text {
	color: rgba(255, 255, 255, 0.92) !important;
	white-space: nowrap;
}

/* Extra-Sicherheit: CTA-Block etwas nach oben ziehen (über allen Breakpoints) */
body:has(#main div[data-framer-root] > div[tabindex="0"])
	#main
	[data-framer-name="Hero Section"]
	[data-framer-name="CTAs"] {
	margin-bottom: calc(var(--heroscale-banderol-height) + 8px) !important;
}

/* Hero-Slider: Pfeile leicht hervorheben (ohne Framer-Animation) */
#main fieldset.framer--slideshow-controls button[type="button"] {
	transition: transform 0.2s ease, background-color 0.2s ease, opacity 0.2s ease;
	cursor: pointer;
}
#main fieldset.framer--slideshow-controls button[type="button"]:hover {
	transform: scale(1.08);
	background-color: rgba(0, 0, 0, 0.38) !important;
}
#main fieldset.framer--slideshow-controls button[type="button"]:active {
	transform: scale(0.96);
}

/* Newsroom/Blog: Karten nutzen inline opacity:0 (nicht 0.001) — ohne Framer-JS unsichtbar */
#main [data-framer-name="Blog Section"] a.framer-5IvsI {
	opacity: 1 !important;
	transform: none !important;
}

/*
 * Förderhinweis BSFZ/BMFTR: Framer-SSR nutzt Platzhalter-SVG im „Icon Wrapper“;
 * Logos werden per heroscale-static-slider.js eingefügt (.heroscale-bsfz-funded).
 */
#main .framer-ohhijt.heroscale-bsfz-funded {
	flex-direction: row !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	column-gap: 20px !important;
	row-gap: 14px !important;
}
#main .framer-ohhijt.heroscale-bsfz-funded .framer-13d7pew {
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	justify-content: flex-start !important;
	flex-wrap: nowrap !important;
	gap: 12px !important;
	background-color: transparent !important;
	box-shadow: none !important;
	padding: 0 !important;
	min-height: 0 !important;
}
#main .framer-ohhijt.heroscale-bsfz-funded .heroscale-bsfz-funded-wrap {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 12px;
	flex-shrink: 0;
}
#main .framer-ohhijt.heroscale-bsfz-funded .heroscale-bsfz-funded-img {
	display: block;
	height: clamp(48px, 8vw, 72px);
	width: auto;
	max-width: min(240px, 42vw);
	object-fit: contain;
}
#main .framer-ohhijt.heroscale-bsfz-funded .heroscale-bsfz-funded-img--bmftr {
	height: clamp(40px, 7vw, 56px);
	max-width: min(280px, 48vw);
}
#main .framer-ohhijt.heroscale-bsfz-funded .framer-18htozx {
	flex: 1 1 220px;
	min-width: min(100%, 220px);
}

/*
 * Karriere (careers.html): fixer Header (framer-hEDto) liegt über dem Inhalt;
 * Framer-SSR lässt Hero/Open-Roles mit translateY/scale stehen → wirkt wie Abschneiden.
 * Selektoren nur über Klassen, die ausschließlich auf careers.html vorkommen.
 */
#main main.framer-1s6hn9t {
	padding-top: clamp(80px, 5vw + 52px, 124px);
	box-sizing: border-box;
}
#main section.framer-1h890rf[data-framer-name="Hero Section"] .framer-154z8zq {
	transform: none !important;
}
#main section.framer-1h890rf[data-framer-name="Hero Section"] .framer-12navye h1 span {
	transform: none !important;
}
#main section.framer-1mi0m5s[data-framer-name="Open Roles Section"] {
	transform: none !important;
	overflow: visible !important;
}
#main section.framer-1mi0m5s[data-framer-name="Open Roles Section"] .framer-2z8sc[data-framer-name="Heading Wrapper"] {
	overflow: visible !important;
	padding-top: 0.15em;
}
#main section.framer-1mi0m5s[data-framer-name="Open Roles Section"] .framer-hmq3hk h2 span {
	transform: none !important;
}

/*
 * Open Roles: Job-Zeile (.framer-720nm.framer-nfbsrr) hat overflow:clip + „Apply“ (.framer-4t0t7s) bei right:-32px;
 * ohne Framer-Hover wirkt das wie abgeschnittenes „Ap“. Hover-Regel setzt right:16px — wir übernehmen das statisch.
 */
#main section.framer-1mi0m5s[data-framer-name="Open Roles Section"] a.framer-720nm.framer-nfbsrr {
	overflow: visible !important;
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
}
#main section.framer-1mi0m5s[data-framer-name="Open Roles Section"] a.framer-720nm .framer-4t0t7s {
	right: clamp(10px, 2vw, 22px) !important;
	opacity: 1 !important;
	transform: translateY(-50%) !important;
}

/*
 * Branchen-Unterseiten (bereiche/*.html): Zwischen erstem FAQ-Block („Sicherheit & Rechtliches“) und
 * zweitem Block („Anwender & Nutzen“, .framer-1go4d3l) fehlt vertikaler Abstand — Framer schließt ohne Margin an.
 */
#main .framer-1go4d3l[data-framer-name="Heading Wrapper"] {
	margin-top: clamp(36px, 5vw, 72px) !important;
}

/*
 * Direktkontakt (contact.html / kontakt.html): Framer setzt overflow:clip auf Karte, linker Spalte und Liste —
 * Namen/Button werden abgeschnitten. SVG-<use href="#4119102008"> ohne Sprite → volle schwarze Icon-Kreise.
 */
#main section[data-framer-name="Contact Section"] .framer-cnarf,
#main section[data-framer-name="Contact Section"] .framer-1ynio20 {
	overflow: visible !important;
}
#main section[data-framer-name="Contact Section"] .framer-1sd5ec0,
#main section[data-framer-name="Contact Section"] .framer-1ws4hyu {
	overflow: visible !important;
}
#main .framer-16l8awe[data-framer-name="Contact Form Wrapper"],
#main .framer-1ogidy7[data-framer-name="Contact Form Wrapper"] {
	overflow: visible !important;
}

/*
 * agents.html (FAQ + Kontakt unten): Framer-SSR setzt auf dem Wrapper „Contact Form Wrapper“ und der
 * inneren „Column“ opacity:0.001 — ohne Runtime bleibt das Layout sichtbar (Kindelement-Form hat opacity:1),
 * aber die effektive Deckkraft ~0 macht Klicks/Lesbarkeit kaputt. Statisch auf voll sichtbar setzen.
 */
#main [data-framer-name="Contact Form Wrapper"] {
	opacity: 1 !important;
	transform: none !important;
}
#main [data-framer-name="Contact Form Wrapper"] > [data-framer-name="Column"] {
	opacity: 1 !important;
	transform: none !important;
}

/*
 * Framer-FAQ / Accordions (force-styles-…-item-N): ohne Runtime — Klicks verdrahtet in heroscale-static-nav.js.
 * Chevron im Kopf bei geöffnetem Panel drehen.
 */
#main [data-heroscale-accordion-wired] > div[role="button"] img {
	transition: transform 0.2s ease;
	transform-origin: center;
}
#main [data-heroscale-accordion-wired] > div[role="button"][aria-expanded="true"] img {
	transform: rotate(180deg);
}