/* SoftBau theme. Colours are the theme.json palette; the dark mode redefines the palette variables. */

/* ---------- dark mode ---------- */

:root { color-scheme: light; --sb-logo-blau: #1F4CDE; --sb-navy-text: #B9C2EA; --sb-navy-text-2: #8F9BCF; }
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		color-scheme: dark;
		--wp--preset--color--base: #050A22;
		--wp--preset--color--surface: #0A1232;
		--wp--preset--color--surface-2: #0D163B;
		--wp--preset--color--ink: #EDF0FF;
		--wp--preset--color--ink-2: #A8B0D5;
		--wp--preset--color--ink-3: #6F79A5;
		--wp--preset--color--line: #19234F;
		--wp--preset--color--accent: #4D6FF7;
		--wp--preset--color--accent-soft: rgba(77, 111, 247, .16);
		--wp--preset--color--navy: #030719;
		--wp--preset--color--navy-2: #0E1A52;
		--wp--preset--color--on-navy: #FFFFFF;
		--sb-logo-blau: #2E5BF0;
	}
}
:root[data-theme="dark"] {
	color-scheme: dark;
	--wp--preset--color--base: #050A22;
	--wp--preset--color--surface: #0A1232;
	--wp--preset--color--surface-2: #0D163B;
	--wp--preset--color--ink: #EDF0FF;
	--wp--preset--color--ink-2: #A8B0D5;
	--wp--preset--color--ink-3: #6F79A5;
	--wp--preset--color--line: #19234F;
	--wp--preset--color--accent: #4D6FF7;
	--wp--preset--color--accent-soft: rgba(77, 111, 247, .16);
	--wp--preset--color--navy: #030719;
	--wp--preset--color--navy-2: #0E1A52;
	--wp--preset--color--on-navy: #FFFFFF;
	--sb-logo-blau: #2E5BF0;
}

/* Light/dark pictures */
.sb-nur-dunkel { display: none !important; }
:root[data-theme="dark"] .sb-nur-hell { display: none !important; }
:root[data-theme="dark"] .sb-nur-dunkel { display: block !important; }
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .sb-nur-hell { display: none !important; }
	:root:not([data-theme="light"]) .sb-nur-dunkel { display: block !important; }
}

/* ---------- base ---------- */

html { scroll-behavior: smooth; scroll-padding-top: 96px; }
body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	font-feature-settings: "cv11", "ss01";
	overflow-x: clip;
}
::selection { background: var(--wp--preset--color--accent); color: #fff; }
:where(a, button, summary, input, select, textarea):focus-visible { outline: 2px solid var(--wp--preset--color--accent); outline-offset: 3px; border-radius: 6px; }
/* Light/dark switch: no transitions while the colours change, so the page repaints once (theme.js). */
.sb-umschalten *, .sb-umschalten *::before, .sb-umschalten *::after { transition: none !important; }

.sb-eyebrow {
	margin-bottom: .9rem !important;
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent);
}
.sb-lead { font-size: var(--wp--preset--font-size--large); line-height: 1.6; color: var(--wp--preset--color--ink-2); }
.sb-hinweis-admin { padding: 14px 16px; border-radius: 12px; border: 1px dashed var(--wp--preset--color--accent); color: var(--wp--preset--color--ink-2); text-align: center; }

/* ---------- header ---------- */

.sb-kopf-huelle { position: sticky; top: 0; z-index: 60; }
.admin-bar .sb-kopf-huelle { top: var(--wp-admin--admin-bar--height, 0px); }
.sb-kopfzeile {
	position: relative;
	isolation: isolate;
	border-bottom: 1px solid transparent;
	transition: border-color .3s, box-shadow .3s;
}
/* The blur sits on a pseudo element: a backdrop-filter on the header itself would trap the fixed menu overlay inside the header. */
.sb-kopfzeile::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: color-mix(in srgb, var(--wp--preset--color--base) 95%, transparent);
}
.sb-gescrollt .sb-kopfzeile {
	border-bottom-color: var(--wp--preset--color--line);
	box-shadow: 0 10px 30px -22px rgba(4, 15, 61, .35);
}
.sb-kopfzeile-innen { min-height: 74px; gap: 20px !important; }
.sb-logo { display: inline-flex; align-items: center; color: var(--wp--preset--color--ink); text-decoration: none !important; flex: none; }
.sb-logo-svg { display: block; height: 30px; width: auto; }
.sb-logo .b { fill: var(--sb-logo-blau); }
.sb-logo .n { fill: currentColor; }
.sb-nav { flex: 1 1 auto; }
.sb-nav .wp-block-navigation__container { gap: clamp(18px, 2.4vw, 34px); }
.sb-nav .wp-block-navigation-item__content { padding: 6px 0; position: relative; }
.sb-nav .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 2px;
	border-radius: 2px;
	background: var(--wp--preset--color--accent);
	transform: scaleX(0);
	transition: transform .25s cubic-bezier(.2, .8, .2, 1);
}
.sb-nav .wp-block-navigation-item__content:hover::after { transform: scaleX(1); }
.sb-kopfzeile-aktionen { gap: 10px !important; flex: none; }
.sb-kopfzeile-aktionen > p { margin: 0; }
.sb-thema {
	display: inline-grid;
	place-items: center;
	width: 42px; height: 42px;
	padding: 0;
	border-radius: 12px;
	border: 1px solid var(--wp--preset--color--line);
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--ink-2);
	cursor: pointer;
	transition: color .2s, border-color .2s, transform .2s;
}
.sb-thema:hover { color: var(--wp--preset--color--accent); border-color: var(--wp--preset--color--accent); }
.sb-thema:active { transform: scale(.94); }
.sb-thema svg { grid-area: 1 / 1; width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .45s cubic-bezier(.2, .8, .2, 1), opacity .3s; }
.sb-thema .sb-mond { opacity: 0; transform: rotate(-90deg) scale(.5); }
:root[data-theme="dark"] .sb-thema .sb-sonne { opacity: 0; transform: rotate(90deg) scale(.5); }
:root[data-theme="dark"] .sb-thema .sb-mond { opacity: 1; transform: none; }
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .sb-thema .sb-sonne { opacity: 0; transform: rotate(90deg) scale(.5); }
	:root:not([data-theme="light"]) .sb-thema .sb-mond { opacity: 1; transform: none; }
}
.sb-kopfzeile .sb-konto-link {
	min-height: 42px;
	padding: 0 14px;
	border-radius: 12px;
	border: 1px solid var(--wp--preset--color--line);
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--ink);
	font-size: .92rem;
}
.sb-kopfzeile .sb-konto-link:hover { border-color: var(--wp--preset--color--accent); color: var(--wp--preset--color--accent); text-decoration: none; }
.sb-kopf-cta .wp-block-button__link { padding: .72rem 1.15rem; font-size: .92rem; box-shadow: 0 10px 22px -12px color-mix(in srgb, var(--wp--preset--color--accent) 80%, transparent); }

/* menu: inline links from 1000px, a full-screen menu below */
.sb-nav .sb-nur-menue { display: none !important; }
@media (min-width: 1000px) {
	.sb-nav .wp-block-navigation__responsive-container.hidden-by-default:not(.is-menu-open) { display: block; position: relative; width: 100%; z-index: auto; background: transparent !important; }
	.sb-nav .wp-block-navigation__responsive-container.hidden-by-default:not(.is-menu-open) .wp-block-navigation__responsive-container-close { display: none; }
	.sb-nav .wp-block-navigation__responsive-container-open.always-shown { display: none; }
}
@media (max-width: 999px) {
	.sb-nav { order: 3; flex: none; }
}
.sb-nav .wp-block-navigation__responsive-container-open {
	width: 42px; height: 42px;
	display: inline-grid; place-items: center;
	border-radius: 12px;
	border: 1px solid var(--wp--preset--color--line) !important;
	background: var(--wp--preset--color--surface) !important;
	color: var(--wp--preset--color--ink) !important;
}
.sb-nav .wp-block-navigation__responsive-container.is-menu-open {
	background:
		radial-gradient(120% 60% at 100% 0%, color-mix(in srgb, var(--wp--preset--color--accent) 14%, transparent), transparent 60%),
		var(--wp--preset--color--base) !important;
	color: var(--wp--preset--color--ink) !important;
	padding: 18px clamp(18px, 6vw, 40px) 32px !important;
	animation: sb-menue-auf .35s cubic-bezier(.16, 1, .3, 1) both;
}
.admin-bar .sb-nav .wp-block-navigation__responsive-container.is-menu-open { top: var(--wp-admin--admin-bar--height, 0px); }
.sb-nav .is-menu-open .wp-block-navigation__responsive-container-close {
	top: 14px; right: clamp(18px, 6vw, 40px);
	width: 42px; height: 42px;
	display: grid; place-items: center;
	border-radius: 12px;
	border: 1px solid var(--wp--preset--color--line);
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--ink);
}
.sb-nav .is-menu-open .wp-block-navigation__responsive-container-content { padding-top: 64px !important; gap: 0 !important; align-items: stretch !important; }
.sb-nav .is-menu-open .wp-block-navigation__container { gap: 0 !important; width: 100%; align-items: stretch !important; }
.sb-nav .is-menu-open .wp-block-navigation-item { width: 100%; animation: sb-menue-punkt .45s cubic-bezier(.16, 1, .3, 1) both; }
.sb-nav .is-menu-open .wp-block-navigation-item:nth-child(2) { animation-delay: .04s; }
.sb-nav .is-menu-open .wp-block-navigation-item:nth-child(3) { animation-delay: .08s; }
.sb-nav .is-menu-open .wp-block-navigation-item:nth-child(4) { animation-delay: .12s; }
.sb-nav .is-menu-open .wp-block-navigation-item:nth-child(5) { animation-delay: .16s; }
.sb-nav .is-menu-open .wp-block-navigation-item:nth-child(6) { animation-delay: .2s; }
.sb-nav .is-menu-open .wp-block-navigation-item:nth-child(7) { animation-delay: .24s; }
.sb-nav .is-menu-open .wp-block-navigation-item__content {
	box-sizing: border-box;
	display: flex !important;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 16px 2px !important;
	border-bottom: 1px solid var(--wp--preset--color--line);
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.6rem !important;
	font-weight: 600;
	letter-spacing: -.02em;
	color: var(--wp--preset--color--ink) !important;
}
.sb-nav .is-menu-open .wp-block-navigation-item__content::after {
	content: "→";
	position: static;
	height: auto;
	background: none;
	transform: none;
	color: var(--wp--preset--color--ink-3);
	font-size: 1.1rem;
}
.sb-nav .is-menu-open .sb-nur-menue { display: flex !important; }
.sb-nav .is-menu-open .sb-menue-cta { margin-top: 24px; }
.sb-nav .is-menu-open .sb-menue-cta .wp-block-navigation-item__content {
	justify-content: center;
	border: 0;
	border-radius: 14px;
	background: var(--wp--preset--color--accent);
	color: #fff !important;
	font-family: var(--wp--preset--font-family--body);
	font-size: 1.05rem !important;
	padding: 16px !important;
	box-shadow: 0 16px 32px -16px color-mix(in srgb, var(--wp--preset--color--accent) 80%, transparent);
}
.sb-nav .is-menu-open .sb-menue-cta .wp-block-navigation-item__content::after { display: none; }
@keyframes sb-menue-auf { from { opacity: 0; } to { opacity: 1; } }
@keyframes sb-menue-punkt { from { opacity: 0; translate: 0 14px; } to { opacity: 1; translate: 0 0; } }

@media (max-width: 1080px) { .sb-kopf-cta { display: none !important; } }
@media (max-width: 860px) {
	.sb-kopfzeile .sb-konto-link span { display: none; }
	.sb-kopfzeile .sb-konto-link { width: 42px; padding: 0; justify-content: center; }
}
@media (max-width: 599px) {
	.sb-kopfzeile-innen { min-height: 64px; gap: 8px !important; }
	.sb-logo-svg { height: 24px; }
}

/* ---------- hero ---------- */

.sb-hero {
	--sb-band: min(24vw, 330px);
	position: relative;
	isolation: isolate;
	padding-top: clamp(56px, 8vw, 104px) !important;
	padding-bottom: clamp(48px, 7vw, 96px) !important;
	color: var(--wp--preset--color--on-navy);
	background:
		linear-gradient(var(--wp--preset--color--navy), var(--wp--preset--color--navy)) top / 100% calc(100% - var(--sb-band)) no-repeat,
		var(--wp--preset--color--base);
}
.sb-hero-deko { position: absolute; inset: 0 0 var(--sb-band) 0; overflow: hidden; z-index: -1; pointer-events: none; }
.sb-hero-deko, .sb-cta-deko { max-width: none !important; margin: 0 !important; }
.sb-glow {
	position: absolute;
	left: 50%; top: 18%;
	width: min(1100px, 120vw); height: 700px;
	translate: -50% 0;
	background: radial-gradient(closest-side, rgba(46, 91, 240, .42), rgba(46, 91, 240, .1) 55%, transparent 75%);
}
.sb-raster-muster {
	position: absolute; inset: 0;
	background-image: radial-gradient(rgba(255, 255, 255, .09) 1px, transparent 1.4px);
	background-size: 26px 26px;
	-webkit-mask-image: radial-gradient(70% 60% at 50% 30%, #000 20%, transparent 75%);
	mask-image: radial-gradient(70% 60% at 50% 30%, #000 20%, transparent 75%);
}
.sb-licht {
	position: absolute;
	left: 0; top: 0;
	width: 560px; height: 560px;
	margin: -280px 0 0 -280px;
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(120, 150, 255, .18), transparent);
	opacity: 0;
	transform: translate3d(var(--lx, 50vw), var(--ly, 30vh), 0);
	transition: opacity .6s;
	will-change: transform;
}
.sb-hero:hover .sb-licht { opacity: 1; }
.sb-dreieck { position: absolute; display: block; width: 0; height: 0; opacity: .9; }
.sb-hero .sb-d1 { left: -6%; top: 12%; border-left: 0 solid transparent; border-right: 360px solid transparent; border-bottom: 360px solid rgba(31, 76, 222, .16); }
.sb-hero .sb-d2 { right: -4%; top: -8%; border-left: 300px solid transparent; border-top: 300px solid rgba(31, 76, 222, .2); }
.sb-hero .sb-d3 { right: 18%; bottom: 8%; border-left: 90px solid transparent; border-bottom: 90px solid rgba(255, 255, 255, .05); }

.sb-hero-text { position: relative; }
.sb-chip {
	display: table;
	margin-inline: auto !important;
	margin-bottom: 26px !important;
	padding: 7px 14px 7px 12px;
	border-radius: 99px;
	border: 1px solid rgba(255, 255, 255, .16);
	background: rgba(255, 255, 255, .06);
	color: var(--sb-navy-text);
	font-size: .85rem;
	font-weight: 600;
}
.sb-chip::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 9px; border-radius: 50%; background: #4D6FF7; box-shadow: 0 0 0 4px rgba(77, 111, 247, .25); vertical-align: 1px; }
.sb-hero-titel {
	color: #fff !important;
	font-size: var(--wp--preset--font-size--huge) !important;
	line-height: 1.04 !important;
	letter-spacing: -.04em !important;
	margin: 0 auto !important;
	max-width: 15ch;
	text-wrap: balance;
}
.sb-verlauf {
	background: linear-gradient(92deg, #A9BAFF 0%, #5D7CFA 45%, #E8EDFF 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.sb-hero-lead { max-width: 640px; margin: 24px auto 0 !important; color: var(--sb-navy-text); font-size: var(--wp--preset--font-size--large); line-height: 1.6; text-wrap: pretty; }
.sb-hero-knoepfe { margin-top: 34px !important; gap: 12px !important; }
.sb-knopf-hell .wp-block-button__link { background: #fff !important; color: #040F3D !important; box-shadow: 0 16px 34px -14px rgba(0, 0, 0, .6); }
.sb-knopf-hell .wp-block-button__link:hover { background: #E8EDFF !important; }
.sb-knopf-glas .wp-block-button__link {
	border: 1px solid rgba(255, 255, 255, .28) !important;
	background: rgba(255, 255, 255, .06) !important;
	color: #fff !important;
	padding: calc(.85rem - 1px) calc(1.4rem - 1px) !important;
}
.sb-knopf-glas .wp-block-button__link:hover { background: rgba(255, 255, 255, .12) !important; }
.wp-block-button__link { transition: transform .2s cubic-bezier(.2, .8, .2, 1), box-shadow .2s, background-color .2s; }
.wp-block-button__link:hover { transform: translateY(-1px); text-decoration: none !important; }
.sb-vorteile { list-style: none; margin: 30px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px; color: var(--sb-navy-text); font-size: .9rem; font-weight: 500; }
.sb-vorteile li { display: inline-flex; align-items: center; gap: 8px; }
.sb-vorteile svg { width: 18px; height: 18px; padding: 3px; box-sizing: border-box; border-radius: 50%; background: rgba(77, 111, 247, .3); fill: none; stroke: #C9D3FF; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }

/* stage with the app */
.sb-buehne {
	position: relative;
	max-width: 1120px;
	margin: clamp(48px, 6vw, 72px) auto 0 !important;
	perspective: 1800px;
}
.sb-browser {
	position: relative;
	border-radius: 18px;
	overflow: hidden;
	background: var(--wp--preset--color--surface);
	border: 1px solid rgba(255, 255, 255, .14);
	box-shadow: 0 50px 100px -30px rgba(2, 6, 30, .7), 0 20px 40px -20px rgba(2, 6, 30, .5), 0 0 0 8px rgba(255, 255, 255, .04);
	transform-origin: 50% 0;
	transition: transform .1s linear;
}
.sb-js .sb-browser { transform: rotateX(var(--kipp, 0deg)) scale(var(--zoom, 1)); }
.sb-browser-leiste {
	display: flex;
	align-items: center;
	gap: 7px;
	height: 38px;
	padding: 0 14px;
	background: var(--wp--preset--color--surface-2);
	border-bottom: 1px solid var(--wp--preset--color--line);
}
.sb-browser-leiste i { width: 11px; height: 11px; border-radius: 50%; background: var(--wp--preset--color--line); }
.sb-browser-leiste i:first-child { background: #FF6159; }
.sb-browser-leiste i:nth-child(2) { background: #FFBD2E; }
.sb-browser-leiste i:nth-child(3) { background: #28C941; }
.sb-browser-leiste span { margin: 0 auto; padding: 3px 40px; border-radius: 7px; background: var(--wp--preset--color--surface); border: 1px solid var(--wp--preset--color--line); color: var(--wp--preset--color--ink-3); font-size: .75rem; translate: -24px 0; }
.sb-browser img { display: block; width: 100%; height: auto; }
.sb-handy {
	position: absolute;
	right: -3%;
	bottom: -7%;
	width: clamp(120px, 19%, 214px);
	border-radius: 34px;
	border: 7px solid #0B1233;
	overflow: hidden;
	background: #0B1233;
	box-shadow: 0 40px 80px -24px rgba(2, 6, 30, .65), 0 0 0 1px rgba(255, 255, 255, .08);
	animation: sb-schweben 7s ease-in-out infinite;
}
.sb-handy img { display: block; width: 100%; height: auto; border-radius: 27px; }
.sb-schwebe {
	position: absolute;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 16px 12px 12px;
	border-radius: 16px;
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--ink);
	border: 1px solid var(--wp--preset--color--line);
	box-shadow: 0 30px 60px -24px rgba(4, 15, 61, .45), 0 6px 16px rgba(4, 15, 61, .08);
	white-space: nowrap;
	animation: sb-schweben 6s ease-in-out infinite;
}
.sb-schwebe strong { display: block; font-size: .9rem; }
.sb-schwebe small { display: block; font-size: .78rem; color: var(--wp--preset--color--ink-3); }
.sb-schwebe-icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: #E0F4EB; color: #0F7F55; flex: none; }
.sb-schwebe-icon.sb-blau { background: var(--wp--preset--color--accent-soft); color: var(--wp--preset--color--accent); }
.sb-schwebe-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.sb-schwebe-1 { left: -5%; bottom: 16%; }
.sb-schwebe-2 { right: 6%; top: 9%; animation-delay: -3s; }

@media (max-width: 900px) {
	.sb-schwebe-2 { display: none; }
	.sb-schwebe-1 { left: 2%; bottom: -6%; }
	.sb-handy { right: 2%; }
}
@media (max-width: 600px) {
	.sb-hero { --sb-band: 30vw; }
	.sb-browser { border-radius: 12px; }
	.sb-browser-leiste { height: 26px; padding: 0 9px; gap: 5px; }
	.sb-browser-leiste i { width: 7px; height: 7px; }
	.sb-browser-leiste span { display: none; }
	.sb-handy { width: 30%; border-width: 4px; border-radius: 20px; bottom: -10%; right: -1%; }
	.sb-handy img { border-radius: 16px; }
	.sb-schwebe { display: none; }
	.sb-vorteile { flex-direction: column; align-items: center; gap: 8px; }
}

/* ---------- sections ---------- */

.sb-abschnitt { padding-top: clamp(72px, 10vw, 128px) !important; padding-bottom: clamp(72px, 10vw, 128px) !important; position: relative; }
.sb-abschnitt-kopf { margin-bottom: clamp(36px, 5vw, 60px) !important; }
.sb-abschnitt-kopf h2 { text-wrap: balance; }
.sb-abschnitt-kopf .sb-lead { margin-top: 1rem; text-wrap: pretty; }
.sb-funktionen { padding-top: clamp(40px, 6vw, 80px) !important; }
.sb-einblicke, .sb-support-abschnitt, .sb-faq-abschnitt { background: var(--wp--preset--color--surface); }
.sb-pakete-abschnitt {
	background:
		radial-gradient(60% 50% at 50% 0%, color-mix(in srgb, var(--wp--preset--color--accent) 10%, transparent), transparent 70%),
		var(--wp--preset--color--base);
}

/* features */
.sb-raster-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 22px); }
.sb-feature {
	position: relative;
	padding: 30px 28px;
	border-radius: 22px;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--line);
	box-shadow: 0 1px 2px rgba(4, 15, 61, .04);
	overflow: hidden;
	transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s, border-color .35s;
}
.sb-feature::after {
	content: "";
	position: absolute;
	right: -40px; top: -40px;
	width: 0; height: 0;
	border-left: 80px solid transparent;
	border-bottom: 80px solid var(--wp--preset--color--accent-soft);
	transform: rotate(180deg);
	opacity: 0;
	transition: opacity .35s, translate .35s;
}
.sb-feature:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--wp--preset--color--accent) 35%, var(--wp--preset--color--line)); box-shadow: 0 24px 50px -28px rgba(4, 15, 61, .35); }
.sb-feature:hover::after { opacity: 1; translate: -10px 10px; }
.sb-feature-icon { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 15px; background: var(--wp--preset--color--accent-soft); color: var(--wp--preset--color--accent); }
.sb-feature-icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sb-feature h3 { margin: 20px 0 8px; font-size: 1.18rem; }
.sb-feature p { margin: 0; color: var(--wp--preset--color--ink-2); font-size: .98rem; line-height: 1.6; }

/* showcase rows */
.sb-reihen { display: grid; gap: clamp(72px, 10vw, 128px); }
.sb-reihe { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 88px); align-items: center; }
.sb-reihe-um .sb-reihe-bild { order: 2; }
.sb-reihe-bild { position: relative; margin: 0; }
.sb-reihe-bild::before {
	content: "";
	position: absolute;
	inset: 8% -4% -6% 6%;
	border-radius: 28px;
	background: linear-gradient(140deg, var(--wp--preset--color--accent), var(--wp--preset--color--navy-2));
	opacity: .14;
	z-index: 0;
}
.sb-reihe-um .sb-reihe-bild::before { inset: 8% 6% -6% -4%; }
.sb-reihe-bild img {
	position: relative;
	display: block;
	width: 100%;
	height: auto;
	border-radius: 18px;
	border: 1px solid var(--wp--preset--color--line);
	box-shadow: 0 40px 80px -40px rgba(4, 15, 61, .45);
}
.sb-reihe-text h3 { margin: 0; font-size: clamp(1.65rem, 2.8vw, 2.25rem); letter-spacing: -.03em; line-height: 1.12; text-wrap: balance; }
.sb-reihe-text .sb-lead { margin: 18px 0 0; }
.sb-liste-check { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 12px; }
.sb-liste-check li { display: flex; gap: 12px; align-items: center; font-weight: 500; }
.sb-liste-check svg { width: 24px; height: 24px; padding: 5px; box-sizing: border-box; border-radius: 50%; background: var(--wp--preset--color--accent-soft); fill: none; stroke: var(--wp--preset--color--accent); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* support */
.sb-support-spalten { gap: clamp(32px, 6vw, 88px) !important; align-items: center !important; }
.sb-support-text h2 { margin-top: 0; text-wrap: balance; }
.sb-fakten { list-style: none; margin: 32px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.sb-fakten li { display: grid; gap: 2px; padding: 16px; border-radius: 16px; background: var(--wp--preset--color--base); border: 1px solid var(--wp--preset--color--line); }
.sb-fakten strong { font-family: var(--wp--preset--font-family--display); font-size: 1.15rem; }
.sb-fakten span { font-size: .85rem; color: var(--wp--preset--color--ink-3); line-height: 1.4; }
.sb-support-karte .sb-support-box {
	position: relative;
	overflow: hidden;
	padding: clamp(28px, 4vw, 40px);
	border-radius: 26px;
	color: #fff;
	background: linear-gradient(160deg, var(--wp--preset--color--navy-2), var(--wp--preset--color--navy) 70%);
	box-shadow: 0 40px 80px -36px rgba(4, 15, 61, .65);
}
.sb-support-karte .sb-support-box::before {
	content: "";
	position: absolute;
	right: -60px; top: -60px;
	border-left: 180px solid transparent;
	border-top: 180px solid rgba(46, 91, 240, .35);
}
.sb-support-karte .sb-preis-info, .sb-support-karte .sb-pro { color: var(--sb-navy-text-2); }
.sb-support-karte .sb-haekchen li { color: var(--sb-navy-text); }
.sb-support-karte .sb-haekchen li:first-child:not(:only-child) { color: #fff; }
.sb-support-karte .sb-haekchen li .sb-icon { background: rgba(77, 111, 247, .25); color: #9CB0FF; }
.sb-support-karte .sb-knopf { background: #fff; color: #040F3D !important; box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .6); }
.sb-support-karte .sb-knopf:hover { filter: none; background: #E8EDFF; }

/* steps */
.sb-schritte { list-style: none; margin: 0 auto; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 2vw, 22px); position: relative; }
.sb-schritte::before {
	content: "";
	position: absolute;
	left: 12%; right: 12%; top: 50px;
	border-top: 2px dashed color-mix(in srgb, var(--wp--preset--color--accent) 35%, transparent);
	z-index: 0;
}
.sb-schritte li { position: relative; z-index: 1; padding: 28px 24px; border-radius: 22px; background: var(--wp--preset--color--surface); border: 1px solid var(--wp--preset--color--line); text-align: center; }
.sb-schritt-nr {
	display: inline-grid;
	place-items: center;
	width: 46px; height: 46px;
	border-radius: 14px;
	background: var(--wp--preset--color--navy);
	color: #fff;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: 1.15rem;
	box-shadow: 0 12px 24px -12px rgba(4, 15, 61, .6), 0 0 0 6px var(--wp--preset--color--base);
}
.sb-schritte li:last-child .sb-schritt-nr { background: var(--wp--preset--color--accent); }
.sb-schritte h3 { margin: 18px 0 8px; font-size: 1.12rem; }
.sb-schritte p { margin: 0; color: var(--wp--preset--color--ink-2); font-size: .96rem; line-height: 1.55; }

/* FAQ */
.sb-faq > .sb-frage { margin: 0 !important; border-bottom: 1px solid var(--wp--preset--color--line); }
.sb-faq > .sb-frage:first-child { border-top: 1px solid var(--wp--preset--color--line); }
.sb-frage summary {
	position: relative;
	list-style: none;
	cursor: pointer;
	padding: 24px 52px 24px 0;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	font-size: 1.12rem;
	letter-spacing: -.01em;
}
.sb-frage summary::-webkit-details-marker { display: none; }
.sb-frage summary::after {
	content: "";
	position: absolute;
	right: 4px; top: 50%;
	width: 32px; height: 32px;
	margin-top: -16px;
	border-radius: 10px;
	background:
		linear-gradient(currentColor, currentColor) center / 12px 2px no-repeat,
		linear-gradient(currentColor, currentColor) center / 2px 12px no-repeat,
		var(--wp--preset--color--base);
	color: var(--wp--preset--color--ink-2);
	transition: transform .3s cubic-bezier(.2, .8, .2, 1), background-color .3s;
}
.sb-frage[open] summary::after { transform: rotate(45deg); color: var(--wp--preset--color--accent); }
.sb-frage summary:hover { color: var(--wp--preset--color--accent); }
.sb-frage p { margin: 0 0 24px; padding-right: 52px; color: var(--wp--preset--color--ink-2); line-height: 1.7; }
.sb-frage[open] p { animation: sb-hoch .35s cubic-bezier(.2, .8, .2, 1); }

/* final call to action */
.sb-cta {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	padding: clamp(52px, 7vw, 96px) clamp(22px, 5vw, 64px) !important;
	border-radius: clamp(22px, 3vw, 32px);
	background:
		radial-gradient(70% 90% at 50% 0%, rgba(46, 91, 240, .45), transparent 70%),
		var(--wp--preset--color--navy);
	color: #fff;
}
.sb-cta h2 { color: #fff !important; text-wrap: balance; }
.sb-cta .sb-lead { color: var(--sb-navy-text); }
.sb-cta-deko { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.sb-cta .sb-d1 { left: -40px; bottom: -40px; border-right: 220px solid transparent; border-bottom: 220px solid rgba(31, 76, 222, .3); }
.sb-cta .sb-d2 { right: 6%; top: 14%; border-left: 70px solid transparent; border-top: 70px solid rgba(255, 255, 255, .08); animation: sb-schweben 7s ease-in-out infinite; }
.sb-cta .wp-block-buttons { margin-top: 30px !important; gap: 12px; }

/* ---------- footer ---------- */

.sb-fuss-huelle { margin-top: 0 !important; }
.sb-fuss {
	padding-top: clamp(56px, 7vw, 88px) !important;
	padding-bottom: 28px !important;
	background: var(--wp--preset--color--navy);
	color: #AEB7DD;
	font-size: .95rem;
}
.sb-fuss-raster { display: grid; grid-template-columns: minmax(0, 1.7fr) repeat(3, minmax(0, 1fr)); gap: 40px; }
.sb-fuss .sb-logo { color: #fff; }
.sb-fuss .sb-logo .b { fill: #2E5BF0; }
.sb-fuss-marke p { margin: 18px 0 0; max-width: 34ch; line-height: 1.6; }
.sb-fuss h2 { margin: 4px 0 16px; color: #fff; font-family: var(--wp--preset--font-family--body); font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.sb-fuss ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.sb-fuss a { color: #AEB7DD; }
.sb-fuss a:hover { color: #fff; text-decoration: none; }
.sb-fuss-unten {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 12px 24px;
	margin-top: clamp(40px, 6vw, 64px) !important;
	padding-top: 24px;
	border-top: 1px solid rgba(255, 255, 255, .08);
	font-size: .85rem;
	color: #7F8BBF;
}
.sb-fuss-zahlung { display: inline-flex; align-items: center; gap: 8px; }
.sb-fuss-zahlung svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- pages ---------- */

.sb-seite { padding-top: clamp(40px, 6vw, 80px) !important; padding-bottom: clamp(64px, 9vw, 112px) !important; min-height: 60vh; }
.sb-seitenkopf { margin-bottom: clamp(28px, 4vw, 48px) !important; }
.sb-seitenkopf .wp-block-post-title { margin: 0; text-wrap: balance; }
.sb-seite .wp-block-post-content > p, .sb-seite .wp-block-post-content > ul, .sb-seite .wp-block-post-content > ol { color: var(--wp--preset--color--ink-2); }
.sb-seite .wp-block-post-content > h2 { font-size: var(--wp--preset--font-size--x-large); margin-top: 2.2em; }
.sb-404 { text-align: center; }
.sb-404 h1 { margin-top: 0; }
.sb-beitragsliste { display: grid; gap: 16px; padding: 0; }
.sb-karte-block { padding: 26px 28px; border-radius: 20px; background: var(--wp--preset--color--surface); border: 1px solid var(--wp--preset--color--line); }
.sb-karte-block .wp-block-post-title { margin: 6px 0 10px; }
.sb-karte-block .wp-block-post-title a { color: var(--wp--preset--color--ink); }
.sb-karte-block .wp-block-post-date { color: var(--wp--preset--color--ink-3); }

/* ---------- motion ---------- */

.sb-hero-text > * { animation: sb-hoch .9s cubic-bezier(.16, 1, .3, 1) both; }
.sb-hero-text > *:nth-child(2) { animation-delay: .08s; }
.sb-hero-text > *:nth-child(3) { animation-delay: .16s; }
.sb-hero-text > *:nth-child(4) { animation-delay: .24s; }
.sb-hero-text > *:nth-child(5) { animation-delay: .32s; }
.sb-buehne { animation: sb-hoch 1.1s cubic-bezier(.16, 1, .3, 1) .3s both; }

.sb-js [data-sb-zeige] {
	opacity: 0;
	translate: 0 28px;
	transition: opacity .8s cubic-bezier(.16, 1, .3, 1), translate .8s cubic-bezier(.16, 1, .3, 1), transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s, border-color .35s;
	transition-delay: calc(var(--i, 0) * 70ms), calc(var(--i, 0) * 70ms), 0s, 0s, 0s;
}
.sb-js [data-sb-zeige].ist-sichtbar { opacity: 1; translate: 0 0; }

@keyframes sb-hoch { from { opacity: 0; translate: 0 26px; } to { opacity: 1; translate: 0 0; } }
@keyframes sb-schweben { 0%, 100% { translate: 0 0; } 50% { translate: 0 -7px; } }
@keyframes sb-atmen { 0%, 100% { opacity: .8; } 50% { opacity: 1; } }
@keyframes sb-puls { 0%, 100% { box-shadow: 0 0 0 4px rgba(77, 111, 247, .25); } 50% { box-shadow: 0 0 0 7px rgba(77, 111, 247, .08); } }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.sb-hero-text > *, .sb-buehne, .sb-handy, .sb-schwebe, .sb-glow, .sb-dreieck, .sb-chip::before { animation: none !important; }
	.sb-js [data-sb-zeige] { opacity: 1; translate: none; transition: none; }
	.sb-js .sb-browser { transform: none; }
}

/* ---------- small screens ---------- */

@media (max-width: 1000px) {
	.sb-raster-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sb-schritte { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sb-schritte::before { display: none; }
	.sb-fuss-raster { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.sb-fuss-marke { grid-column: 1 / -1; }
}
@media (max-width: 781px) {
	.sb-reihe { grid-template-columns: 1fr; gap: 28px; }
	.sb-reihe-um .sb-reihe-bild { order: 0; }
	.sb-fakten { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
	.sb-raster-3, .sb-schritte { grid-template-columns: 1fr; }
	.sb-fuss-raster { grid-template-columns: 1fr 1fr; gap: 32px 20px; }
	.sb-frage summary { font-size: 1.02rem; padding: 20px 48px 20px 0; }
	.sb-frage p { padding-right: 0; }
	.sb-feature { padding: 24px 22px; }
}


/* =========================================================
   1.1: more information, quieter effects
   ========================================================= */

/* hero: word rotator and value strip */
.sb-rotator { display: inline-block; color: #fff; min-width: 3ch; transition: opacity .3s, translate .3s; }
.sb-rotator.ist-weg { opacity: 0; translate: 0 6px; }
.sb-wertleiste {
	list-style: none;
	max-width: 1120px;
	margin: clamp(56px, 7vw, 88px) auto 0 !important;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 14px;
	color: var(--wp--preset--color--ink);
}
.sb-wertleiste li {
	display: grid;
	grid-template-columns: auto 1fr;
	column-gap: 12px;
	align-items: center;
	padding: 16px 18px;
	border-radius: 18px;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--line);
}
.sb-wert-icon { grid-row: span 2; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: var(--wp--preset--color--accent-soft); color: var(--wp--preset--color--accent); }
.sb-wert-icon svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.sb-wertleiste strong { font-size: .98rem; line-height: 1.3; }
.sb-wertleiste span:not(.sb-wert-icon) { font-size: .84rem; color: var(--wp--preset--color--ink-3); line-height: 1.35; }

/* trades ticker */
.sb-gewerke { padding: 8px 0 clamp(28px, 4vw, 44px) !important; overflow: hidden; }
.sb-gewerke-titel { margin: 0 0 18px !important; text-align: center; font-size: .82rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--wp--preset--color--ink-3); }
.sb-laufband {
	display: flex;
	width: max-content;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
	max-width: none !important;
}
.sb-gewerke .sb-laufband { width: 100%; }
.sb-laufband ul { list-style: none; margin: 0; padding: 0 0 0 0; display: flex; gap: 12px; flex: none; padding-right: 12px; animation: sb-laufen 48s linear infinite; }
.sb-laufband:hover ul { animation-play-state: paused; }
.sb-laufband li { display: inline-flex; align-items: center; gap: 9px; padding: 10px 18px; border-radius: 99px; background: var(--wp--preset--color--surface); border: 1px solid var(--wp--preset--color--line); font-weight: 500; font-size: .95rem; color: var(--wp--preset--color--ink-2); white-space: nowrap; }
.sb-laufband svg { width: 11px; height: 11px; fill: var(--wp--preset--color--accent); opacity: .8; }
@keyframes sb-laufen { to { translate: -100% 0; } }

/* before / after */
.sb-vorher { background: var(--wp--preset--color--surface); }
.sb-vergleich-karten { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: clamp(14px, 2.4vw, 28px); align-items: stretch; }
.sb-vk { position: relative; padding: clamp(24px, 3vw, 36px); border-radius: 24px; border: 1px solid var(--wp--preset--color--line); }
.sb-vk-ohne { background: var(--wp--preset--color--base); }
.sb-vk-mit {
	color: #fff;
	border-color: transparent;
	background: radial-gradient(90% 70% at 100% 0%, rgba(46, 91, 240, .45), transparent 60%), linear-gradient(160deg, var(--wp--preset--color--navy-2), var(--wp--preset--color--navy));
	box-shadow: 0 40px 80px -40px rgba(4, 15, 61, .6);
}
.sb-vk-titel { margin: 0 0 18px !important; }
.sb-vk-titel span { display: inline-block; padding: 5px 12px; border-radius: 99px; font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; background: var(--wp--preset--color--surface); color: var(--wp--preset--color--ink-3); border: 1px solid var(--wp--preset--color--line); }
.sb-vk-mit .sb-vk-titel span { background: rgba(77, 111, 247, .25); color: #C9D3FF; border-color: rgba(255, 255, 255, .12); }
.sb-vk ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.sb-vk li { display: flex; gap: 12px; align-items: flex-start; line-height: 1.5; }
.sb-vk-ohne li { color: var(--wp--preset--color--ink-2); }
.sb-vk-mit li { color: #DCE2FF; }
.sb-vk li svg { flex: none; width: 22px; height: 22px; padding: 4px; margin-top: 1px; box-sizing: border-box; border-radius: 50%; fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.sb-vk-ohne li svg { background: color-mix(in srgb, #C0304A 12%, transparent); stroke: #C0304A; }
.sb-vk-mit li svg { background: rgba(61, 211, 154, .18); stroke: #3DD39A; }
.sb-vk-pfeil { display: grid; place-items: center; }
.sb-vk-pfeil svg { width: 46px; height: 46px; padding: 12px; box-sizing: border-box; border-radius: 50%; background: var(--wp--preset--color--accent); fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; box-shadow: 0 12px 26px -10px color-mix(in srgb, var(--wp--preset--color--accent) 80%, transparent); }
.sb-js .sb-vk li { opacity: 0; translate: -8px 0; transition: opacity .5s, translate .5s; transition-delay: calc(var(--i) * 70ms + .15s); }
.sb-js .sb-vk.ist-sichtbar li { opacity: 1; translate: 0 0; }

/* order in five steps */
.sb-weg { list-style: none; margin: 0 auto; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(12px, 2vw, 24px); position: relative; counter-reset: weg; }
.sb-weg::before, .sb-weg::after {
	content: "";
	position: absolute;
	left: 10%; right: 10%; top: 31px;
	height: 2px;
	border-radius: 2px;
	background: var(--wp--preset--color--line);
}
.sb-weg::after { background: linear-gradient(90deg, var(--wp--preset--color--accent), #6A87FF); transform: scaleX(var(--weg, 0)); transform-origin: left; transition: transform 1.6s cubic-bezier(.65, 0, .35, 1); }
.sb-weg.ist-sichtbar::after { --weg: 1; }
.sb-weg-schritt { position: relative; z-index: 1; text-align: center; }
.sb-weg-punkt {
	display: grid; place-items: center;
	width: 64px; height: 64px;
	margin: 0 auto 16px;
	border-radius: 20px;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--line);
	color: var(--wp--preset--color--ink-3);
	box-shadow: 0 0 0 8px var(--wp--preset--color--base);
	transition: background-color .5s, color .5s, border-color .5s, transform .5s cubic-bezier(.2, .8, .2, 1);
	transition-delay: calc(var(--i) * .3s + .2s);
}
.sb-weg-punkt svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.sb-weg.ist-sichtbar .sb-weg-punkt { background: var(--wp--preset--color--navy); border-color: var(--wp--preset--color--navy); color: #fff; transform: translateY(-2px); }
.sb-weg.ist-sichtbar .sb-weg-schritt:last-child .sb-weg-punkt { background: var(--wp--preset--color--accent); border-color: var(--wp--preset--color--accent); }
.sb-weg-wer { display: inline-block; padding: 3px 10px; border-radius: 99px; background: var(--wp--preset--color--accent-soft); color: var(--wp--preset--color--accent); font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.sb-weg h3 { margin: 10px 0 6px; font-size: 1.12rem; }
.sb-weg p { margin: 0; font-size: .94rem; line-height: 1.55; color: var(--wp--preset--color--ink-2); }

/* product tour */
.sb-tour-abschnitt { background: var(--wp--preset--color--surface); }
.sb-tour { display: grid; grid-template-columns: minmax(250px, 340px) minmax(0, 1fr); gap: clamp(20px, 3vw, 40px); align-items: start; }
.sb-tour-liste { display: grid; gap: 8px; }
.sb-tour-tab {
	position: relative;
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 14px;
	align-items: center;
	width: 100%;
	padding: 14px 16px;
	overflow: hidden;
	text-align: left;
	border-radius: 16px;
	border: 1px solid transparent;
	background: transparent;
	color: var(--wp--preset--color--ink-2);
	font: inherit;
	cursor: pointer;
	transition: background-color .25s, border-color .25s, color .25s;
}
.sb-tour-tab:hover { background: var(--wp--preset--color--base); }
.sb-tour-tab[aria-selected="true"] { background: var(--wp--preset--color--base); border-color: var(--wp--preset--color--line); color: var(--wp--preset--color--ink); box-shadow: 0 14px 30px -24px rgba(4, 15, 61, .45); }
.sb-tour-nr { font-family: var(--wp--preset--font-family--display); font-weight: 700; font-size: .85rem; color: var(--wp--preset--color--ink-3); width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; border: 1px solid var(--wp--preset--color--line); }
.sb-tour-tab[aria-selected="true"] .sb-tour-nr { background: var(--wp--preset--color--accent); border-color: var(--wp--preset--color--accent); color: #fff; }
.sb-tour-text { display: grid; gap: 1px; }
.sb-tour-text strong { font-size: 1rem; }
.sb-tour-text small { font-size: .84rem; color: var(--wp--preset--color--ink-3); }
.sb-tour-balken { position: absolute; left: 16px; right: 16px; bottom: 0; height: 2px; border-radius: 2px; overflow: hidden; opacity: 0; }
.sb-tour-tab[aria-selected="true"] .sb-tour-balken { opacity: 1; }
.sb-tour-balken i { display: block; height: 100%; background: var(--wp--preset--color--accent); transform-origin: left; transform: scaleX(0); }
.sb-tour.laeuft .sb-tour-tab[aria-selected="true"] .sb-tour-balken i { animation: sb-balken var(--sb-tour-dauer, 7s) linear forwards; }
.sb-tour.pausiert .sb-tour-tab[aria-selected="true"] .sb-tour-balken i { animation-play-state: paused; }
@keyframes sb-balken { to { transform: scaleX(1); } }
.sb-tour-browser { box-shadow: 0 50px 90px -40px rgba(4, 15, 61, .5), 0 0 0 1px var(--wp--preset--color--line); border-color: var(--wp--preset--color--line); }
.sb-tour-bilder { position: relative; display: grid; }
.sb-tour-panel { grid-area: 1 / 1; margin: 0; }
.sb-tour-panel[hidden] { display: block !important; visibility: hidden; opacity: 0; }
.sb-tour-panel img { display: block; width: 100%; height: auto; }
.sb-tour-panel.ist-aktiv { animation: sb-einblenden .55s cubic-bezier(.16, 1, .3, 1); }
.sb-tour-panel figcaption {
	position: absolute;
	left: 16px; right: 16px; bottom: 16px;
	display: grid; gap: 2px;
	max-width: 520px;
	padding: 14px 18px;
	border-radius: 14px;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--line);
	box-shadow: 0 20px 40px -24px rgba(4, 15, 61, .5);
	font-size: .92rem;
	line-height: 1.5;
	color: var(--wp--preset--color--ink-2);
}
.sb-tour-panel figcaption strong { color: var(--wp--preset--color--ink); font-size: 1rem; }
.sb-tour-panel.ist-aktiv figcaption { animation: sb-hoch .6s cubic-bezier(.16, 1, .3, 1) .15s both; }
@keyframes sb-einblenden { from { opacity: 0; scale: 1.015; } to { opacity: 1; scale: 1; } }

/* calculator */
.sb-rechner {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	gap: clamp(24px, 5vw, 72px);
	align-items: center;
	padding: clamp(28px, 5vw, 56px);
	border-radius: 30px;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--line);
	box-shadow: 0 40px 80px -50px rgba(4, 15, 61, .4);
}
.sb-rechner h2 { margin: 0; font-size: var(--wp--preset--font-size--xx-large); text-wrap: balance; }
.sb-rechner .sb-lead { margin: 14px 0 28px; }
.sb-regler { margin-top: 20px; }
.sb-regler label { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 8px; font-weight: 600; font-size: .95rem; }
.sb-regler label small { font-weight: 400; color: var(--wp--preset--color--ink-3); }
.sb-regler output { font-variant-numeric: tabular-nums; color: var(--wp--preset--color--accent); font-weight: 700; white-space: nowrap; }
.sb-regler input[type="range"] {
	--wert: 10%;
	-webkit-appearance: none; appearance: none;
	width: 100%; height: 8px;
	border-radius: 99px;
	background: linear-gradient(90deg, var(--wp--preset--color--accent) var(--wert), var(--wp--preset--color--line) var(--wert));
	outline: none;
	cursor: pointer;
}
.sb-regler input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; border-radius: 50%; background: #fff; border: 2px solid var(--wp--preset--color--accent); box-shadow: 0 4px 12px rgba(4, 15, 61, .25); transition: transform .15s; }
.sb-regler input[type="range"]::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 2px solid var(--wp--preset--color--accent); box-shadow: 0 4px 12px rgba(4, 15, 61, .25); }
.sb-regler input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.12); }
.sb-regler input[type="range"]:focus-visible { box-shadow: 0 0 0 4px color-mix(in srgb, var(--wp--preset--color--accent) 25%, transparent); }
.sb-regler-paket { display: flex; gap: 8px; margin-top: 26px; }
.sb-regler-paket label { flex: 1; margin: 0; cursor: pointer; display: block; }
.sb-regler-paket input { position: absolute; opacity: 0; pointer-events: none; }
.sb-regler-paket span { display: block; padding: 11px 10px; text-align: center; border-radius: 12px; border: 1.5px solid var(--wp--preset--color--line); background: var(--wp--preset--color--base); font-weight: 600; transition: all .2s; }
.sb-regler-paket input:checked + span { border-color: var(--wp--preset--color--accent); background: var(--wp--preset--color--accent-soft); color: var(--wp--preset--color--accent); }
.sb-regler-paket input:focus-visible + span { box-shadow: 0 0 0 3px color-mix(in srgb, var(--wp--preset--color--accent) 30%, transparent); }
.sb-rechner-ergebnis {
	position: relative;
	overflow: hidden;
	padding: clamp(24px, 3.5vw, 36px);
	border-radius: 24px;
	color: #fff;
	background: radial-gradient(90% 70% at 100% 0%, rgba(46, 91, 240, .5), transparent 60%), linear-gradient(160deg, var(--wp--preset--color--navy-2), var(--wp--preset--color--navy));
}
.sb-ergebnis-label, .sb-ergebnis-amort > span:first-child { display: block; font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #8F9BCF; }
.sb-ergebnis-gross strong { display: block; margin-top: 6px; font-family: var(--wp--preset--font-family--display); font-size: clamp(2.6rem, 5vw, 3.6rem); line-height: 1; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.sb-ergebnis-gross small, .sb-ergebnis-amort small { font-family: var(--wp--preset--font-family--body); font-size: 1rem; font-weight: 500; letter-spacing: 0; color: #B9C2EA; }
.sb-ergebnis-zeilen { margin: 22px 0; padding: 14px 0; border-top: 1px solid rgba(255, 255, 255, .1); border-bottom: 1px solid rgba(255, 255, 255, .1); display: grid; gap: 10px; }
.sb-ergebnis-zeilen div { display: flex; justify-content: space-between; gap: 12px; font-size: .94rem; color: #B9C2EA; }
.sb-ergebnis-zeilen strong { color: #fff; font-variant-numeric: tabular-nums; }
.sb-ergebnis-zeilen em { font-style: normal; color: #fff; }
.sb-ergebnis-amort strong { display: block; margin-top: 4px; font-family: var(--wp--preset--font-family--display); font-size: 2rem; letter-spacing: -.03em; }
.sb-amort-balken { display: block; height: 6px; margin-top: 12px; border-radius: 99px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.sb-amort-balken i { display: block; height: 100%; width: 50%; border-radius: inherit; background: linear-gradient(90deg, #3DD39A, #9CB0FF); transition: width .6s cubic-bezier(.2, .8, .2, 1); }
.sb-ergebnis-hinweis { margin: 16px 0 18px; font-size: .78rem; line-height: 1.5; color: #8F9BCF; }
.sb-ergebnis-knopf { display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px; border-radius: 12px; background: #fff; color: #040F3D !important; font-weight: 600; text-decoration: none !important; transition: transform .2s, background-color .2s; }
.sb-ergebnis-knopf:hover { background: #E8EDFF; transform: translateY(-1px); }
.sb-ergebnis-knopf svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* spotlight on cards (follows the pointer) */
.sb-feature, .sb-paket, .sb-wertleiste li { --mx: 50%; --my: 0%; }
.sb-feature::before, .sb-wertleiste li::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: radial-gradient(360px circle at var(--mx) var(--my), color-mix(in srgb, var(--wp--preset--color--accent) 10%, transparent), transparent 60%);
	opacity: 0;
	transition: opacity .35s;
	pointer-events: none;
}
.sb-wertleiste li { position: relative; overflow: hidden; }
.sb-feature:hover::before, .sb-wertleiste li:hover::before { opacity: 1; }

/* primary buttons: a soft light sweep on hover */
.wp-block-button:not(.is-style-outline) .wp-block-button__link, .sb-knopf:not(.sb-knopf-rand) { position: relative; overflow: hidden; }
.wp-block-button:not(.is-style-outline) .wp-block-button__link::after, .sb-knopf:not(.sb-knopf-rand)::after {
	content: "";
	position: absolute;
	top: 0; bottom: 0; left: -60%;
	width: 50%;
	background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .28), transparent);
	transform: skewX(-18deg);
	opacity: 0;
	pointer-events: none;
}
.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover::after, .sb-knopf:not(.sb-knopf-rand):hover::after { animation: sb-glanz .8s ease; }
@keyframes sb-glanz { from { left: -60%; opacity: 1; } to { left: 130%; opacity: 0; } }

/* reading progress */
.sb-fortschritt { position: fixed; left: 0; right: 0; top: 0; height: 3px; z-index: 70; pointer-events: none; }
.admin-bar .sb-fortschritt { top: var(--wp-admin--admin-bar--height, 0px); }
.sb-fortschritt i { display: block; height: 100%; background: linear-gradient(90deg, var(--wp--preset--color--accent), #8EA3FF); transform-origin: left; transform: scaleX(var(--fortschritt, 0)); }

/* order bar for phones */
.sb-mobil-leiste { display: none; }
@media (max-width: 781px) {
	.sb-mobil-leiste {
		position: fixed;
		left: 12px; right: 12px; bottom: 12px;
		z-index: 55;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		padding: 10px 10px 10px 18px;
		border-radius: 18px;
		background: var(--wp--preset--color--navy);
		color: #fff;
		box-shadow: 0 20px 40px -16px rgba(2, 6, 30, .6);
		transform: translateY(140%);
		transition: transform .45s cubic-bezier(.16, 1, .3, 1);
	}
	.sb-mobil-leiste.ist-da { transform: none; }
	.sb-mobil-leiste span { display: grid; line-height: 1.25; }
	.sb-mobil-leiste small { color: #B9C2EA; font-size: .8rem; }
	.sb-mobil-leiste a { padding: 12px 18px; border-radius: 12px; background: #fff; color: #040F3D; font-weight: 700; font-size: .95rem; text-decoration: none; }
}

/* cookie notice */
.sb-cookie {
	position: fixed;
	left: clamp(12px, 2vw, 24px);
	bottom: clamp(12px, 2vw, 24px);
	z-index: 80;
	width: min(440px, calc(100vw - 24px));
	animation: sb-cookie-auf .5s cubic-bezier(.16, 1, .3, 1) both;
}
.sb-cookie[hidden] { display: none; }
.sb-cookie-karte {
	padding: 20px 20px 18px;
	border-radius: 20px;
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--ink);
	border: 1px solid var(--wp--preset--color--line);
	box-shadow: 0 30px 70px -24px rgba(4, 15, 61, .45), 0 4px 14px rgba(4, 15, 61, .08);
}
.sb-cookie-kopf { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.sb-cookie-kopf h2 { margin: 0; font-size: 1.05rem; letter-spacing: -.01em; }
.sb-cookie-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--wp--preset--color--accent-soft); color: var(--wp--preset--color--accent); }
.sb-cookie-icon svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sb-cookie p { margin: 0; font-size: .88rem; line-height: 1.55; color: var(--wp--preset--color--ink-2); }
.sb-cookie-details { display: grid; gap: 8px; margin-top: 14px; }
.sb-cookie-details[hidden] { display: none; }
.sb-cookie-art { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; background: var(--wp--preset--color--base); border: 1px solid var(--wp--preset--color--line); cursor: pointer; }
.sb-cookie-art input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--wp--preset--color--accent); flex: none; }
.sb-cookie-art span { display: grid; gap: 2px; }
.sb-cookie-art strong { font-size: .9rem; }
.sb-cookie-art small { font-size: .8rem; line-height: 1.45; color: var(--wp--preset--color--ink-3); }
.sb-cookie-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; align-items: center; }
.sb-cookie-knopf { flex: 1 1 130px; min-height: 42px; padding: 0 14px; border-radius: 11px; border: 0; background: var(--wp--preset--color--ink); color: var(--wp--preset--color--surface); font: inherit; font-weight: 600; font-size: .9rem; cursor: pointer; transition: filter .2s, transform .2s; }
.sb-cookie-knopf.sb-cookie-alle { background: var(--wp--preset--color--accent); color: #fff; }
.sb-cookie-knopf:hover { filter: brightness(1.12); transform: translateY(-1px); }
.sb-cookie-text { flex: 0 0 100%; order: 3; padding: 4px 0 0; border: 0; background: none; color: var(--wp--preset--color--ink-3); font: inherit; font-size: .84rem; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; text-align: center; }
.sb-cookie-text:hover { color: var(--wp--preset--color--accent); }
@keyframes sb-cookie-auf { from { opacity: 0; translate: 0 24px; } to { opacity: 1; translate: 0 0; } }

/* footer additions */
.sb-fuss-adresse { margin-top: 18px; font-style: normal; font-size: .88rem; line-height: 1.7; color: #8F9BCF; }
.sb-fuss-cookie { padding: 0; border: 0; background: none; color: #AEB7DD; font: inherit; cursor: pointer; }
.sb-fuss-cookie:hover { color: #fff; }
.sb-widerruf-knopf { display: inline-flex; align-items: center; padding: 7px 14px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .28); color: #fff !important; font-weight: 600; font-size: .85rem; }
.sb-widerruf-knopf:hover { background: rgba(255, 255, 255, .08); text-decoration: none !important; }

/* responsive for the new sections */
@media (max-width: 1000px) {
	.sb-wertleiste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sb-weg { grid-template-columns: 1fr; gap: 0; max-width: 560px; }
	.sb-weg::before, .sb-weg::after { left: 31px; right: auto; top: 32px; bottom: 32px; width: 2px; height: auto; transform-origin: top; transform: scaleY(var(--weg, 0)); }
	.sb-weg::before { transform: none; }
	.sb-weg-schritt { display: grid; grid-template-columns: 64px 1fr; column-gap: 18px; text-align: left; padding-bottom: 26px; }
	.sb-weg-punkt { grid-row: span 3; margin: 0; }
	.sb-weg-wer { justify-self: start; }
	.sb-weg h3 { margin-top: 6px; }
	.sb-tour { grid-template-columns: 1fr; }
	.sb-tour-liste { display: flex; overflow-x: auto; gap: 8px; padding-bottom: 4px; scroll-snap-type: x mandatory; scrollbar-width: none; }
	.sb-tour-liste::-webkit-scrollbar { display: none; }
	.sb-tour-tab { flex: none; width: auto; grid-template-columns: auto auto; scroll-snap-align: start; border-color: var(--wp--preset--color--line); }
	.sb-tour-text small { display: none; }
	.sb-rechner { grid-template-columns: 1fr; }
}
@media (max-width: 781px) {
	.sb-vergleich-karten { grid-template-columns: 1fr; }
	.sb-vk-pfeil svg { rotate: 90deg; }
	.sb-tour-panel figcaption { position: static; max-width: none; border-radius: 0; border-width: 1px 0 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (max-width: 600px) {
	.sb-wertleiste { grid-template-columns: 1fr; }
	.sb-cookie { left: 8px; right: 8px; bottom: 8px; width: auto; }
	.sb-regler-paket span { padding: 10px 6px; font-size: .9rem; }
}
@media (prefers-reduced-motion: reduce) {
	.sb-laufband ul, .sb-tour-panel.ist-aktiv, .sb-tour-panel.ist-aktiv figcaption, .sb-cookie, .sb-nav .is-menu-open .wp-block-navigation-item, .sb-nav .wp-block-navigation__responsive-container.is-menu-open { animation: none !important; }
	.sb-weg::after { transition: none; }
	.sb-js .sb-vk li { opacity: 1; translate: none; }
	.wp-block-button__link::after, .sb-knopf::after { display: none; }
}

/* legal pages */
.sb-rechtstext { color: var(--wp--preset--color--ink-2); }
.sb-rechtstext > * + * { margin-top: 1rem; }
.sb-rechtstext h2 { margin-top: 2.4rem !important; font-size: var(--wp--preset--font-size--x-large); color: var(--wp--preset--color--ink); }
.sb-rechtstext h3 { margin-top: 1.6rem !important; font-size: var(--wp--preset--font-size--large); color: var(--wp--preset--color--ink); }
.sb-rechtstext strong { color: var(--wp--preset--color--ink); }
.sb-rechtstext ul, .sb-rechtstext ol { padding-left: 1.3em; display: grid; gap: .5rem; }
.sb-rt-tabelle { overflow-x: auto; }
.sb-rt-tabelle table { min-width: 560px; }
.sb-seite .sb-entwurf { margin-bottom: 1.5rem; }