/* Kosten & Preise — desktop lock. Mobile/tablet media queries added after desktop QA. */

.kosten-page {
	overflow: hidden;
}

.kosten-section-header {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	text-align: center;
	margin-bottom: 40px;
	position: relative;
	z-index: 1;
}

.kosten-section-header .theme-text {
	max-width: 820px;
}

.kosten-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 12px;
	flex-shrink: 0;
}

.kosten-icon.is-lg {
	width: 48px;
	height: 48px;
}

.kosten-icon.is-blue {
	background: rgba(89, 178, 255, 0.07);
}

.kosten-icon.is-red {
	background: rgba(255, 69, 69, 0.08);
}

.kosten-icon.is-gold {
	background: #fff6d6;
}

.kosten-icon img {
	display: block;
	width: 22px;
	height: 22px;
}

.kosten-icon.is-lg img {
	width: 24px;
	height: 24px;
}

/* ---------- Hero ---------- */
.kosten-hero {
	background: #012e55;
	padding: 96px 0;
}

.kosten-hero-blob {
	width: 460px;
	height: 460px;
	right: -16px;
	top: 26px;
	background: #1a4a73;
	opacity: 0.45;
}

.kosten-hero-cloud-tr {
	width: 214px;
	right: 0;
	top: 27px;
	opacity: 0.5;
	mix-blend-mode: normal;
}

.kosten-hero-cloud-bl {
	width: 349px;
	left: -126px;
	top: 509px;
}

.kosten-hero-cloud-br {
	width: 344px;
	right: -110px;
	bottom: -46px;
	opacity: 0.5;
	mix-blend-mode: normal;
}

.kosten-hero .page-width-boxed {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 40px;
	text-align: center;
}

.kosten-hero-media {
	height: 460px;
	border-radius: 28px;
	background: #012e55;
	width: 100%;
}

.kosten-hero-copy {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	width: 100%;
}

.kosten-hero-crumb {
	font-family: "Source Sans 3", sans-serif;
	font-weight: 600;
	font-size: 14px;
	line-height: 1.4;
	color: #c7d2de;
	margin: 0;
}

.kosten-hero-copy .theme-title-xl {
	max-width: 1000px;
	margin: 0;
}

.kosten-hero-lead {
	max-width: 820px;
	color: #c7d2de;
	margin: 0;
}

.kosten-hero-trust {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 16px;
	padding-top: 4px;
}

.kosten-hero-trust-item {
	display: flex;
	align-items: center;
	gap: 8px;
	color: #fff;
	font-family: "Source Sans 3", sans-serif;
	font-weight: 600;
	font-size: 14px;
	line-height: 1.4;
}

.kosten-hero-trust .theme-check-badge {
	width: 22px;
	height: 22px;
	border-radius: 11px;
}

.kosten-hero .theme-button {
	position: relative;
	z-index: 1;
}

/* ---------- Preisübersicht ---------- */
.kosten-overview {
	background: #fff;
	padding: 90px 0;
}

.kosten-overview-glow-bl {
	width: 220px;
	height: 220px;
	left: -80px;
	top: 760px;
}

.kosten-overview-glow-tr {
	width: 240px;
	height: 240px;
	right: -67px;
	top: 60px;
}

.kosten-overview-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 24px;
	position: relative;
	z-index: 1;
}

.kosten-overview-card {
	width: 410px;
	background: #fff;
	border: 1px solid #e4e8ec;
	border-radius: 16px;
	padding: 26px 28px;
	box-shadow: 0 10px 24px 0 rgba(1, 46, 84, 0.06);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	box-sizing: border-box;
}

.kosten-overview-card .theme-title-xs {
	margin: 0;
}

.kosten-overview-price {
	margin: 0;
	font-family: "Source Sans 3", sans-serif;
	font-weight: 600;
	font-size: 14px;
	line-height: 1.4;
	color: #f04;
}

.kosten-overview-price span {
	font-weight: 400;
	line-height: 1.5;
	color: #9e9e9e;
	margin-right: 8px;
}

.kosten-overview-links {
	display: flex;
	align-items: center;
	gap: 18px;
	padding-top: 4px;
}

.kosten-overview-offer,
.kosten-overview-offer:visited,
.kosten-overview-offer:hover,
.kosten-overview-offer:focus,
.kosten-overview-more,
.kosten-overview-more:visited,
.kosten-overview-more:hover,
.kosten-overview-more:focus {
	font-family: "Source Sans 3", sans-serif;
	font-weight: 600;
	font-size: 14px;
	line-height: 1.4;
	text-decoration: none;
}

.kosten-overview-offer,
.kosten-overview-offer:visited,
.kosten-overview-offer:hover,
.kosten-overview-offer:focus {
	color: #012e55;
}

.kosten-overview-more,
.kosten-overview-more:visited,
.kosten-overview-more:hover,
.kosten-overview-more:focus {
	color: #f04;
}

/* ---------- Faktoren ---------- */
.kosten-faktoren {
	background: #f5f5f5;
	padding: 90px 0;
}

.kosten-faktoren-glow-tl {
	width: 240px;
	height: 240px;
	left: -90px;
	top: -60px;
}

.kosten-faktoren-glow-br {
	width: 220px;
	height: 220px;
	right: -20px;
	bottom: 93px;
}

.kosten-faktoren-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 24px;
	position: relative;
	z-index: 1;
}

.kosten-faktoren-card {
	width: 410px;
	background: #fff;
	border-radius: 16px;
	padding: 28px 26px;
	box-shadow: 0 10px 26px 0 rgba(1, 46, 84, 0.07);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
	box-sizing: border-box;
}

.kosten-faktoren-card .theme-title-xs,
.kosten-faktoren-card .theme-text-sm {
	margin: 0;
}

/* ---------- Schritte ---------- */
.kosten-schritte {
	background: #fff;
	padding: 90px 0;
}

.kosten-schritte-glow-tl {
	width: 220px;
	height: 220px;
	left: -90px;
	top: 60px;
}

.kosten-schritte-glow-br {
	width: 240px;
	height: 240px;
	right: -55px;
	top: 220px;
}

.kosten-schritte-row {
	display: flex;
	gap: 24px;
	position: relative;
	z-index: 1;
}

.kosten-schritte-card {
	flex: 1 1 0;
	min-width: 0;
	background: #f5f5f5;
	border-radius: 16px;
	padding: 32px 28px;
	box-shadow: 0 10px 26px 0 rgba(1, 46, 84, 0.07);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
	box-sizing: border-box;
}

.kosten-schritte-num {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 24px;
	background: #012e55;
	color: #fff;
	font-family: "Cal Sans", "Source Sans 3", sans-serif;
	font-size: 26px;
	line-height: 1.3;
}

.kosten-schritte-card .theme-title-xs,
.kosten-schritte-card .theme-text-sm {
	margin: 0;
}

/* ---------- Praxisbeispiele ---------- */
.kosten-beispiele {
	background: #f5f5f5;
	padding: 90px 0;
}

.kosten-beispiele-glow-tl {
	width: 240px;
	height: 240px;
	left: -90px;
	top: 40px;
}

.kosten-beispiele-glow-br {
	width: 220px;
	height: 220px;
	right: -30px;
	top: 240px;
}

.kosten-beispiele-row {
	display: flex;
	gap: 24px;
	position: relative;
	z-index: 1;
}

.kosten-beispiele-card {
	flex: 1 1 0;
	min-width: 0;
	background: #fff;
	border-radius: 16px;
	padding: 32px;
	box-shadow: 0 10px 26px 0 rgba(1, 46, 84, 0.07);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
	box-sizing: border-box;
}

.kosten-beispiele-media {
	width: 100%;
	height: 190px;
	border-radius: 12px;
}

.kosten-beispiele-media.is-bottom > img {
	object-position: center 80%;
}

.kosten-beispiele-card .theme-title-sm,
.kosten-beispiele-card .theme-text {
	margin: 0;
}

/* ---------- Galerie ---------- */
.kosten-gallery {
	background: #f5f7fa;
	padding: 64px 0;
}

.kosten-gallery-glow-tl {
	width: 360px;
	height: 360px;
	left: -120px;
	top: -80px;
}

.kosten-gallery-glow-br {
	width: 200px;
	height: 200px;
	right: 2px;
	bottom: 65px;
}

.kosten-gallery-row {
	display: flex;
	gap: 20px;
	position: relative;
	z-index: 1;
}

.kosten-gallery-column {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 20px;
	min-width: 0;
}

.kosten-gallery-media {
	width: 100%;
	border-radius: 18px;
	flex-shrink: 0;
}

.kosten-gallery-column-tall .kosten-gallery-media {
	height: 460px;
}

.kosten-gallery-column-pair .kosten-gallery-media {
	height: 220px;
}

.kosten-gallery-column-mixed .kosten-gallery-media:first-child {
	height: 300px;
}

.kosten-gallery-column-mixed .kosten-gallery-media:last-child {
	height: 140px;
}

.kosten-gallery-row.is-fluid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	height: auto;
	gap: 20px;
}

.kosten-gallery-row.is-fluid .kosten-gallery-media {
	height: 220px;
	border-radius: 18px;
	width: 100%;
}

/* ---------- Mid CTA ---------- */
.kosten-mid-cta {
	background: #012e55;
	padding: 54px 0;
}

.kosten-mid-cta-cloud-r {
	width: 436px;
	right: -176px;
	top: 10px;
	opacity: 0.5;
	mix-blend-mode: normal;
}

.kosten-mid-cta-cloud-l {
	width: 363px;
	left: -110px;
	top: 60px;
}

.kosten-mid-cta-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}

.kosten-mid-cta-copy {
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-width: 0;
}

.kosten-mid-cta-copy .theme-title-md {
	margin: 0;
	color: #fff;
}

.kosten-mid-cta-copy .theme-text {
	margin: 0;
	color: #c7d2de;
}

.kosten-mid-cta .theme-button {
	flex-shrink: 0;
	position: relative;
	z-index: 1;
}

/* ---------- FAQ ---------- */
.kosten-faq {
	background: #fff;
	padding: 90px 0;
}

.kosten-faq-glow-tl {
	width: 220px;
	height: 220px;
	left: -90px;
	top: 60px;
}

.kosten-faq-glow-br {
	width: 240px;
	height: 240px;
	right: -50px;
	bottom: 139px;
}

.kosten-faq-list {
	margin-top: 36px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.kosten-faq-item {
	background: #f5f5f5;
	border-radius: 12px;
	padding: 24px 28px;
}

.kosten-faq-question-title {
	margin: 0;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
}

.kosten-faq-question,
.kosten-faq-question:hover,
.kosten-faq-question:focus,
.kosten-faq-question:active {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	width: 100%;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
	text-align: left;
	font-family: "Cal Sans", "Source Sans 3", sans-serif;
	font-size: 22px;
	line-height: 1.4;
	color: #012e55;
	text-transform: uppercase;
}

.kosten-faq-icon {
	color: #f04;
	font-size: 26px;
	line-height: 1.3;
	flex-shrink: 0;
}

.kosten-faq-answer {
	display: none;
	margin: 10px 0 0;
	font-size: 16px;
	line-height: 1.6;
	color: #333;
}

.kosten-faq-item.is-open .kosten-faq-answer {
	display: block;
}

.kosten-faq-item.is-open .kosten-faq-icon {
	transform: rotate(45deg);
}

/* ---------- Final CTA ---------- */
.kosten-offer-cta {
	background: #f04;
	padding: 70px 0;
	text-align: center;
}

.kosten-offer-cta .theme-title-lg {
	color: #fff;
	max-width: 900px;
	margin: 0 auto;
}

.kosten-offer-cta-lead {
	color: #ffe3ea;
	max-width: 760px;
	margin: 18px auto 0;
}

.kosten-offer-cta .theme-button {
	margin-top: 24px;
	position: relative;
	z-index: 1;
}

/* ---------- Tablet (no Figma frame) — interpolate from desktop + mobile ---------- */
@media (max-width: 1024px) {
	.kosten-hero-media {
		height: 360px;
		border-radius: 20px;
	}

	.kosten-overview,
	.kosten-faktoren,
	.kosten-schritte,
	.kosten-beispiele,
	.kosten-faq {
		padding-top: 64px;
		padding-bottom: 64px;
	}

	.kosten-overview-card,
	.kosten-faktoren-card {
		width: calc(50% - 12px);
	}

	.kosten-schritte-row {
		flex-wrap: wrap;
	}

	.kosten-schritte-card {
		flex: 1 1 calc(50% - 12px);
		max-width: calc(50% - 12px);
	}

	.kosten-beispiele-row {
		flex-direction: column;
	}

	.kosten-gallery-row {
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
		align-content: space-between;
		height: 628px;
		gap: 16px;
	}

	.kosten-gallery-column {
		display: contents;
	}

	.kosten-gallery-media {
		width: calc(50% - 8px);
		border-radius: 16px;
	}

	.kosten-gallery-column-tall .kosten-gallery-media {
		order: 1;
		height: 300px;
	}

	.kosten-gallery-column-mixed .kosten-gallery-media:first-child {
		order: 2;
		height: 260px;
	}

	.kosten-gallery-column-pair .kosten-gallery-media:first-child {
		order: 3;
		height: 196px;
	}

	.kosten-gallery-column-pair .kosten-gallery-media:last-child {
		order: 4;
		height: 220px;
	}

	.kosten-gallery-column-mixed .kosten-gallery-media:last-child {
		order: 5;
		height: 180px;
	}

	.kosten-gallery-row.is-fluid {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		height: auto;
		gap: 16px;
	}

	.kosten-gallery-row.is-fluid .kosten-gallery-media {
		height: 220px;
		width: 100%;
	}

	.kosten-mid-cta-inner {
		flex-wrap: wrap;
	}

	.kosten-faq-item {
		padding: 22px 24px;
	}
}

/* ---------- Mobile (Figma 1385:2) — only rules that differ from tablet ---------- */
@media (max-width: 767px) {
	.kosten-hero {
		padding: 36px 0;
	}

	.kosten-hero .page-width-boxed {
		flex-direction: column-reverse;
		gap: 40px;
	}

	.kosten-hero-media {
		height: 365px;
		border-radius: 28px;
	}

	.kosten-hero-lead {
		color: #fff;
		max-width: none;
	}

	.kosten-hero-trust {
		flex-direction: column;
		gap: 10px;
	}

	.kosten-hero-cloud-tr {
		width: 56px;
		right: 0;
		top: 23px;
	}

	.kosten-hero-cloud-bl {
		width: 180px;
		left: -90px;
		top: auto;
		bottom: 280px;
	}

	.kosten-hero-cloud-br {
		width: 90px;
		right: -28px;
		bottom: auto;
		top: 700px;
	}

	.kosten-overview,
	.kosten-faktoren,
	.kosten-schritte,
	.kosten-beispiele,
	.kosten-faq {
		padding-top: 40px;
		padding-bottom: 40px;
	}

	.kosten-section-header {
		margin-bottom: 32px;
	}

	.kosten-overview-card,
	.kosten-faktoren-card,
	.kosten-schritte-card {
		width: 100%;
		max-width: none;
		flex: 1 1 auto;
	}

	.kosten-overview-grid,
	.kosten-faktoren-grid,
	.kosten-schritte-row {
		gap: 16px;
	}

	.kosten-beispiele-row {
		gap: 16px;
	}

	.kosten-beispiele-card {
		padding: 24px;
	}

	.kosten-gallery {
		padding: 24px 0;
	}

	.kosten-gallery-row {
		height: 490px;
		gap: 15px;
	}

	.kosten-gallery-media {
		width: calc(50% - 7.5px);
		border-radius: 14px;
	}

	.kosten-gallery-column-tall .kosten-gallery-media {
		height: 230px;
	}

	.kosten-gallery-column-mixed .kosten-gallery-media:first-child {
		height: 200px;
	}

	.kosten-gallery-column-pair .kosten-gallery-media:first-child {
		height: 150px;
	}

	.kosten-gallery-column-pair .kosten-gallery-media:last-child {
		height: 170px;
	}

	.kosten-gallery-column-mixed .kosten-gallery-media:last-child {
		height: 140px;
	}

	.kosten-gallery-row.is-fluid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 15px;
	}

	.kosten-gallery-row.is-fluid .kosten-gallery-media {
		height: 180px;
		border-radius: 14px;
	}

	.kosten-mid-cta {
		padding: 54px 0;
	}

	.kosten-mid-cta-inner {
		flex-direction: column;
		align-items: flex-start;
		gap: 24px;
	}

	.kosten-mid-cta-cloud-r,
	.kosten-mid-cta-cloud-l {
		display: none;
	}

	.kosten-faq-item {
		padding: 20px;
	}

	.kosten-faq-question {
		font-size: 18px;
	}

	.kosten-offer-cta {
		padding: 56px 0;
	}

	.kosten-offer-cta .theme-title-lg,
	.kosten-offer-cta-lead {
		max-width: none;
	}
}