/*
 * Glasfaser-Tarife
 * - 1/5-Spalte für den Unyson Page Builder
 * - Element "Glasfaser Tarif" (Farbe pro Tarif über --gh-c)
 */

/* ---------- 1/5-Spalte ---------- */
@media (min-width: 1200px) {
	.col-xl-1-5 {
		-ms-flex: 0 0 20%;
		flex: 0 0 20%;
		max-width: 20%;
		padding-left: 10px;
		padding-right: 10px;
	}
}

/* Unvollständige Reihen (z.B. 3 + 2 auf Tablets) mittig ausrichten */
.row:has(> .col-xl-1-5) {
	justify-content: center;
}

/* Tarifboxen in einer Reihe gleich hoch (auch mit Innenabstand-Wrapper der Spalte) */
[class*="col-"]:has(.gh-plan) {
	display: flex;
	flex-direction: column;
}

[class*="col-"]:has(.gh-plan) > :has(.gh-plan) {
	display: flex;
	flex-direction: column;
	flex: 1 0 auto;
}

/* ---------- Tarifbox ---------- */
.gh-plan {
	--gh-c: #1c97d5;
	--gh-badge: #74bb43;
	--gh-tint: color-mix(in srgb, var(--gh-c) 45%, #fff);
	position: relative;
	display: flex;
	flex-direction: column;
	flex: 1 0 auto;
	margin: 30px 0 25px;
	text-align: center;
	color: #333;
}

/* Kopf */
.gh-plan-head {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 78px;
	padding: 14px 12px;
	background-color: var(--gh-c);
	border-radius: 6px 6px 0 0;
	box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12);
}

.gh-plan .gh-plan-title {
	margin: 0;
	padding: 0;
	color: #fff;
	font-size: 19px;
	font-style: italic;
	font-weight: 300;
	line-height: 1.25;
	letter-spacing: 0;
	text-transform: none;
}

.gh-plan-title-1,
.gh-plan-title-2 {
	display: block;
}

.gh-plan-title-2 strong {
	font-weight: 700;
	text-transform: uppercase;
}

.gh-plan-title-note {
	font-weight: 300;
}

/* "Häufig gewählt" */
.gh-plan-badge {
	position: absolute;
	top: -14px;
	right: -6px;
	z-index: 2;
	padding: 3px 9px;
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.4;
	white-space: nowrap;
	background-color: var(--gh-badge);
	border: 2px solid #fff;
	border-radius: 4px;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
	transform: rotate(-6deg);
}

/* Inhalt */
.gh-plan-body {
	display: flex;
	flex-direction: column;
	flex: 1 0 auto;
	margin-top: 6px;
	padding: 16px 14px 22px;
	background: linear-gradient(to bottom, #fff 55%, color-mix(in srgb, var(--gh-c) 5%, #f1f1f1) 100%);
	border: 2px solid var(--gh-c);
	border-radius: 4px;
	box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
	/* Geschwindigkeit + Tacho skalieren mit der Boxbreite (cqi) */
	container-type: inline-size;
}

/* Geschwindigkeit + Tacho */
.gh-plan-speed {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	gap: clamp(8px, 7cqi, 36px);
	margin-bottom: 18px;
	text-align: left;
}

.gh-plan-speed-values {
	display: flex;
	flex-direction: column;
	align-items: center;
	line-height: 1.15;
}

.gh-plan-speed-value {
	color: #222;
	font-size: 15px;
	font-size: clamp(15px, 7.5cqi, 26px);
	font-style: italic;
	font-weight: 700;
	white-space: nowrap;
}

.gh-plan-speed-label {
	margin-bottom: 4px;
	font-size: 11px;
	font-size: clamp(11px, 3.8cqi, 14px);
}

.gh-plan-gauge {
	flex: 0 0 auto;
	width: 72px;
	width: clamp(68px, 36cqi, 140px);
	color: var(--gh-c);
}

.gh-plan-gauge svg,
.gh-plan-gauge img {
	display: block;
	width: 100%;
	height: auto;
}

/* Leistungen */
.gh-plan .gh-plan-features {
	margin: 0 0 22px;
	padding: 0;
	font-size: 14px;
	line-height: 1.35;
	list-style: none;
}

.gh-plan .gh-plan-features li {
	margin: 0;
	padding: 7px 0;
	border: 0;
}

.gh-plan .gh-plan-features li + li::before {
	content: "";
	display: block;
	width: 55%;
	height: 1px;
	margin: 0 auto 12px;
	background-color: var(--gh-tint);
}

/* Weitere Informationen */
.gh-plan-more {
	margin: -8px 0 22px;
	font-size: 13px;
	text-align: left;
}

.gh-plan-more summary {
	color: var(--gh-c);
	font-weight: 600;
	text-align: center;
	cursor: pointer;
}

.gh-plan-more-body {
	padding: 8px 4px 0;
}

.gh-plan-more-body p:last-child {
	margin-bottom: 0;
}

/* Preis-Badge */
.gh-plan-price {
	display: flex;
	flex-direction: column;
	align-items: center;
	align-self: center;
	width: 92%;
	margin-top: auto;
	padding: 10px 10px 12px;
	color: #fff;
	line-height: 1.1;
	background-color: var(--gh-c);
	border-radius: 6px;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18);
	transform: rotate(-4deg);
}

.gh-plan-price-main {
	font-size: 22px;
	font-weight: 700;
	white-space: nowrap;
}

.gh-plan-price-prefix {
	font-size: 0.8em;
}

.gh-plan-price-suffix {
	font-size: 14px;
}

.gh-plan-price-note {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-top: 6px;
	font-size: 10.5px;
	line-height: 1.2;
	text-align: left;
}

.gh-plan-phone {
	flex: 0 0 auto;
	width: 12px;
	height: 18px;
}

/* Button */
.gh-plan-button {
	margin-top: 22px;
}

.gh-plan-button a {
	display: inline-block;
	padding: 8px 22px;
	color: var(--gh-c);
	font-weight: 600;
	border: 2px solid var(--gh-c);
	border-radius: 30px;
	transition: background-color 0.2s, color 0.2s;
}

.gh-plan-button a:hover,
.gh-plan-button a:focus {
	color: #fff;
	background-color: var(--gh-c);
}

/* Hervorgehobener Tarif: ab 5 Spalten nach oben erhöht */
@media (min-width: 1200px) {
	.gh-plan.plan-featured {
		margin-top: 0;
	}

	.gh-plan.plan-featured .gh-plan-head {
		min-height: 92px;
	}
}