/* ============================================================
   MeinVerein Vergleichstabelle (Figma 3100:5214 / Mobile 3032:12107)
   Mindestschriftgröße 18px gemäß Repo-Regel.
   ============================================================ */

.mv-vergleich-tabelle {
	--mv-blue: #023e84;
	--mv-grey: #6a7282;
	--mv-light: #eff4fa;
	--mv-line: #d1dbeb;
	--mv-yellow: #ffe620;
	--mv-grey-98: #f8fbfd;
	--mv-font: "Geologica", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

	box-sizing: border-box;
	width: 100%;
	margin: 0;
	padding: 64px 32px;
	background: var(--mv-vt-bg, var(--mv-light));
	color: var(--mv-blue);
	font-family: var(--mv-font);
}

.mv-vergleich-tabelle *,
.mv-vergleich-tabelle *::before,
.mv-vergleich-tabelle *::after {
	box-sizing: border-box;
}

.mv-vergleich-tabelle__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 48px;
	max-width: 1318px;
	margin: 0 auto;
}

.mv-vergleich-tabelle__head {
	display: flex;
	flex-direction: column;
	gap: 16px;
	width: 100%;
	margin: 0;
	padding: 0;
	text-align: center;
}

.mv-vergleich-tabelle__headline {
	margin: 0;
	color: var(--mv-blue) !important;
	font-family: var(--mv-font);
	font-size: 36px;
	font-weight: 700;
	line-height: 45px;
}

.mv-vergleich-tabelle__subline {
	margin: 0;
	color: var(--mv-blue) !important;
	font-family: var(--mv-font);
	font-size: 18px;
	font-weight: 400;
	line-height: 28px;
}

/* ---------- Tabelle ---------- */
.mv-vergleich-tabelle__card {
	--mv-vt-frame: 10px;
	--mv-vt-radius: 40px;
	--mv-vt-with-width: 25%;
	--mv-vt-bottom-gap: 24px;
	--mv-vt-wedge: calc(var(--mv-vt-radius) - var(--mv-vt-frame));

	position: relative;
	width: 100%;
	max-width: 1147px;
	padding: 0;
	background: #fff;
	border-radius: 30px;
	box-shadow: 0 4px 18px rgba(0, 0, 0, 0.1);
}

/* Füllt die Keile zwischen grauer Spalte und den äußeren Rahmen-Rundungen (oben/unten links) grau auf */
.mv-vergleich-tabelle__card::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: calc(100% - var(--mv-vt-with-width));
	width: var(--mv-vt-radius);
	background-image:
		radial-gradient(circle var(--mv-vt-radius) at var(--mv-vt-radius) var(--mv-vt-wedge), transparent calc(var(--mv-vt-radius) - 0.5px), var(--mv-grey-98) var(--mv-vt-radius)),
		radial-gradient(circle var(--mv-vt-radius) at var(--mv-vt-radius) 0, transparent calc(var(--mv-vt-radius) - 0.5px), var(--mv-grey-98) var(--mv-vt-radius));
	background-size: var(--mv-vt-radius) var(--mv-vt-wedge);
	background-position: top left, bottom left;
	background-repeat: no-repeat;
	pointer-events: none;
}

/* Gelber Rahmen als ein durchgehendes Element über der „Mit“-Spalte; ragt um die Rahmenstärke über die Karte hinaus */
.mv-vergleich-tabelle__card::after {
	content: "";
	position: absolute;
	top: calc(-1 * var(--mv-vt-frame));
	right: 0;
	bottom: calc(-1 * var(--mv-vt-frame));
	width: var(--mv-vt-with-width);
	border: var(--mv-vt-frame) solid var(--mv-yellow);
	border-radius: var(--mv-vt-radius);
	pointer-events: none;
}

.mv-vergleich-tabelle__table {
	width: 100%;
	margin: 0;
	border-collapse: separate;
	border-spacing: 0;
	table-layout: fixed;
	background: transparent;
	border: 0;
}

.mv-vergleich-tabelle__table thead,
.mv-vergleich-tabelle__table tbody,
.mv-vergleich-tabelle__table tr {
	background: transparent;
	border: 0;
}

.mv-vergleich-tabelle__cell {
	height: 88px;
	padding: 0 24px;
	border: 0;
	border-bottom: 1px solid var(--mv-line);
	background: transparent;
	color: var(--mv-blue);
	font-family: var(--mv-font);
	font-weight: 400;
	text-align: center;
	vertical-align: middle;
}

.mv-vergleich-tabelle__table thead .mv-vergleich-tabelle__cell {
	height: 144px;
	padding-bottom: 16px;
	vertical-align: bottom;
}

.mv-vergleich-tabelle__table tbody tr:last-child .mv-vergleich-tabelle__cell {
	height: calc(88px + var(--mv-vt-bottom-gap));
	padding-bottom: var(--mv-vt-bottom-gap);
	border-bottom: 0;
}

.mv-vergleich-tabelle__table tbody tr:last-child .mv-vergleich-tabelle__cell--label {
	padding-bottom: calc(14px + var(--mv-vt-bottom-gap));
}

/* Kriterienspalte */
.mv-vergleich-tabelle__cell--label {
	width: 49%;
	padding-left: 40px;
	text-align: left;
}

.mv-vergleich-tabelle__table tbody .mv-vergleich-tabelle__cell--label {
	padding-top: 14px;
	padding-bottom: 14px;
}

.mv-vergleich-tabelle__table tbody .mv-vergleich-tabelle__cell--label > * {
	vertical-align: middle;
}

.mv-vergleich-tabelle__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	margin-right: 16px;
	background: var(--mv-light);
	border-radius: 999px;
}

.mv-vergleich-tabelle__icon img {
	display: block;
	width: 24px;
	height: 24px;
}

.mv-vergleich-tabelle__text {
	display: inline-flex;
	flex-direction: column;
	max-width: calc(100% - 60px);
}

.mv-vergleich-tabelle__title {
	color: var(--mv-blue) !important;
	font-size: 18px;
	font-weight: 600;
	line-height: 30px;
}

.mv-vergleich-tabelle__row-sub {
	color: var(--mv-grey) !important;
	font-size: 16px;
	font-weight: 400;
	line-height: 24px;
}

/* Spalte „Ohne“ */
.mv-vergleich-tabelle__cell--without {
	width: 26%;
	background: var(--mv-grey-98);
	font-size: 18px;
	font-weight: 600;
	line-height: 30px;
}

/* Spalte „Mit“ – Rahmen kommt vom Card-Overlay, Padding hält den Inhalt innerhalb des Rahmens */
.mv-vergleich-tabelle__cell--with {
	width: var(--mv-vt-with-width);
	padding-left: calc(24px + var(--mv-vt-frame));
	padding-right: calc(24px + var(--mv-vt-frame));
	background: transparent;
}

.mv-vergleich-tabelle__table thead .mv-vergleich-tabelle__cell--with {
	padding-bottom: 44px;
}

.mv-vergleich-tabelle__cell--without img,
.mv-vergleich-tabelle__cell--with img {
	display: inline-block;
	width: 24px;
	height: 24px;
	vertical-align: middle;
}

.mv-vergleich-tabelle__logo {
	display: inline-block;
	width: 188px !important;
	max-width: 100%;
	height: auto !important;
	vertical-align: bottom;
}

/* ---------- CTA ---------- */
.mv-vergleich-tabelle__cta {
	display: flex;
	justify-content: center;
	width: 100%;
}

.mv-vergleich-tabelle__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 14px 28px;
	background: var(--mv-blue);
	border-radius: 7px;
	color: #fff !important;
	font-family: var(--mv-font);
	font-size: 18px;
	font-weight: 600;
	line-height: 24px;
	text-decoration: none !important;
	transition: background-color 0.2s ease;
}

.mv-vergleich-tabelle__button:hover,
.mv-vergleich-tabelle__button:focus-visible {
	background: #012b5c;
	color: #fff !important;
}

.mv-vergleich-tabelle__button img {
	display: block;
	width: 16px;
	height: 16px;
}

/* ---------- Responsive ---------- */
@media (max-width: 1023px) {
	.mv-vergleich-tabelle__cell--label {
		padding-left: 24px;
	}
}

@media (max-width: 767px) {
	.mv-vergleich-tabelle {
		padding: 56px 16px;
	}

	.mv-vergleich-tabelle__inner {
		gap: 32px;
	}

	.mv-vergleich-tabelle__headline {
		font-size: 28px;
		line-height: 36px;
	}

	.mv-vergleich-tabelle__card {
		--mv-vt-frame: 6px;
		--mv-vt-radius: 24px;
		--mv-vt-with-width: 24%;
		--mv-vt-bottom-gap: 16px;

		border-radius: 20px;
	}

	.mv-vergleich-tabelle__cell {
		height: auto;
		padding: 16px 8px;
	}

	.mv-vergleich-tabelle__table tbody tr:last-child .mv-vergleich-tabelle__cell {
		height: auto;
		padding-bottom: calc(16px + var(--mv-vt-bottom-gap));
	}

	.mv-vergleich-tabelle__table tbody tr:last-child .mv-vergleich-tabelle__cell--label {
		padding-bottom: calc(20px + var(--mv-vt-bottom-gap));
	}

	.mv-vergleich-tabelle__table thead .mv-vergleich-tabelle__cell {
		height: auto;
		padding: 20px 8px 16px;
		font-size: 18px;
		line-height: 24px;
	}

	.mv-vergleich-tabelle__cell--label {
		width: 52%;
		padding-left: 16px;
	}

	.mv-vergleich-tabelle__table tbody .mv-vergleich-tabelle__cell--label {
		padding-top: 20px;
		padding-bottom: 20px;
	}

	.mv-vergleich-tabelle__icon {
		display: flex;
		margin: 0 0 12px;
	}

	.mv-vergleich-tabelle__text {
		display: flex;
		max-width: none;
	}

	.mv-vergleich-tabelle__title {
		line-height: 24px;
	}

	.mv-vergleich-tabelle__row-sub {
		line-height: 24px;
	}

	.mv-vergleich-tabelle__cell--without {
		width: 24%;
	}

	.mv-vergleich-tabelle__cell--with {
		padding-left: calc(8px + var(--mv-vt-frame));
		padding-right: calc(8px + var(--mv-vt-frame));
	}

	.mv-vergleich-tabelle__table thead .mv-vergleich-tabelle__cell--with {
		padding-bottom: 16px;
	}

	.mv-vergleich-tabelle__logo {
		width: 100% !important;
		max-width: 72px;
	}

	.mv-vergleich-tabelle__cta,
	.mv-vergleich-tabelle__button {
		width: 100%;
	}
}