/**
 * Split Phone Number
 *
 * Shows a single phone number visually split into two clickable halves:
 * top half links to tel: (Festnetz) in dark gray,
 * bottom half links to wa.me (WhatsApp) in black.
 * Both number links are stacked in the same grid cell for pixel-perfect alignment.
 * Labels are clickable links and highlight on hover via :has().
 */

.split-phone {
	position: relative;
}

.split-phone__number {
	display: grid;
	position: relative;
	font-size: clamp(1.85rem, 1.85rem + ((1vw - 0.2rem) * 1.35), 3.6rem);
}

/* Both number links occupy the same grid cell */
.split-phone__number a {
	grid-area: 1 / 1;
	display: block;
	font-size: inherit;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	padding: 0.1em 0.3em;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.split-phone__number a:hover {
	background-color: #111;
	color: #fff;
}

.split-phone__top {
	clip-path: inset(0 0 50% 0);
	color: #686868;
}

.split-phone__bottom {
	clip-path: inset(50% 0 0 0);
	color: #111;
}

/* Labels (clickable links) */
.split-phone__label {
	display: block;
	padding: 0.15em 0.3em;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.split-phone__label--top {
	color: #686868;
}

.split-phone__label--bottom {
	color: #111;
}

/* Highlight label when hovering its own label link */
.split-phone__label:hover {
	background-color: #111;
	color: #fff;
}

/* Highlight labels when hovering the corresponding number half via :has() */
.split-phone:has(.split-phone__top:hover) .split-phone__label--top {
	background-color: #111;
	color: #fff;
}

.split-phone:has(.split-phone__bottom:hover) .split-phone__label--bottom {
	background-color: #111;
	color: #fff;
}

/* Highlight number half when hovering the corresponding label via :has() */
.split-phone:has(.split-phone__label--top:hover) .split-phone__top {
	background-color: #111;
	color: #fff;
}

.split-phone:has(.split-phone__label--bottom:hover) .split-phone__bottom {
	background-color: #111;
	color: #fff;
}