/* dkg/anruf – Telefon zuerst. Tokens ausschließlich aus theme.json. */

.dkg-anruf {
	--dkg-ease: var(--wp--custom--ease, cubic-bezier(.2, .7, .1, 1));
	font-family: var(--wp--preset--font-family--archivo);
}

.dkg-anruf a {
	-webkit-tap-highlight-color: transparent;
}

.dkg-anruf a:focus-visible {
	outline: 3px solid var(--wp--preset--color--navy);
	outline-offset: 2px;
}

.dkg-anruf svg {
	display: block;
	flex: none;
}

.dkg-anruf__nummer {
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* ---------- Variante block ---------- */

.dkg-anruf--block {
	display: grid;
	gap: var(--wp--preset--spacing--20);
	max-width: 34rem;
}

.dkg-anruf__button {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: .875rem;
	min-height: 4rem;
	padding: .625rem 1rem .625rem .75rem;
	border-radius: var(--wp--custom--radius, 2px);
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--white);
	text-decoration: none;
	transition: background-color 160ms var(--dkg-ease);
}

.dkg-anruf__button:hover {
	background: var(--wp--preset--color--navy-2);
	color: var(--wp--preset--color--white);
}

.dkg-anruf__icon {
	display: grid;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	background: var(--wp--preset--color--mint);
	color: var(--wp--preset--color--ink);
}

.dkg-anruf__icon svg {
	width: 1.25rem;
	height: 1.25rem;
}

.dkg-anruf__text {
	display: grid;
	gap: .1875rem;
	min-width: 0;
}

.dkg-anruf__label {
	font-family: var(--wp--preset--font-family--plex-mono);
	font-size: var(--wp--preset--font-size--mono);
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--wp--custom--on-navy-2);
}

.dkg-anruf__button .dkg-anruf__nummer {
	font-size: clamp(1.375rem, 1.05rem + 1.5vw, 1.875rem);
	font-weight: 720;
	font-stretch: 84%;
	line-height: 1.05;
	letter-spacing: .01em;
}

.dkg-anruf__pfeil {
	width: 1.25rem;
	height: 1.25rem;
	transition: transform 160ms var(--dkg-ease);
}

.dkg-anruf__button:hover .dkg-anruf__pfeil {
	transform: translateX(3px);
}

@media (max-width: 22.4rem) {
	.dkg-anruf__button {
		gap: .625rem;
	}

	.dkg-anruf__pfeil {
		display: none;
	}
}

@media (min-width: 48rem) {
	.dkg-anruf__button {
		min-height: 4.5rem;
		padding-inline: .875rem 1.125rem;
	}
}

/* Mikrozeile Erreichbarkeit (statisch ohne JS, live mit view.js) – bewusst ohne Status-Punkt */
.dkg-anruf__status {
	display: flex;
	align-items: center;
	gap: .375rem;
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.35;
	color: var(--wp--preset--color--ink-2);
}

.dkg-anruf__status-icon {
	width: 1rem;
	height: 1rem;
	color: var(--wp--preset--color--ink-3);
}

/* WhatsApp + Rückruf als Haarlinien-Buttons. Container-Query auf die Button-Zeile selbst (nicht auf den Block,
   damit ein schmal eingepasster Anruf-Block nicht kollabiert). */
.dkg-anruf__alt {
	container-type: inline-size;
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
	gap: var(--wp--preset--spacing--20);
	margin-top: var(--wp--preset--spacing--10);
}

.dkg-anruf__linie {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .5rem;
	min-height: 3rem;
	padding: .375rem .75rem .375rem .875rem;
	border: 1px solid var(--wp--custom--line-strong, currentColor);
	border-radius: var(--wp--custom--radius, 2px);
	color: var(--wp--preset--color--ink);
	font-size: .9375rem;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	transition: border-color 160ms var(--dkg-ease), background-color 160ms var(--dkg-ease);
}

.dkg-anruf__linie:hover {
	border-color: var(--wp--preset--color--ink);
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--ink);
}

.dkg-anruf__linie svg {
	width: 1.125rem;
	height: 1.125rem;
}

/* Unter 25rem: „Fotos per WhatsApp“ (max. 2 Zeilen bei 360 px). display:none nimmt den Zusatz auch aus dem
   zugänglichen Namen – Name = sichtbarer Text. */
@container (max-width: 25rem) {
	.dkg-anruf__zusatz {
		display: none;
	}

	.dkg-anruf__linie {
		gap: .375rem;
		padding-inline: .625rem .5rem;
	}
}

/* Trust-Strip */
.dkg-anruf__person {
	display: flex;
	align-items: center;
	gap: .75rem;
	margin-top: var(--wp--preset--spacing--20);
	padding-top: var(--wp--preset--spacing--30);
	border-top: 1px solid var(--wp--custom--line, currentColor);
}

.dkg-anruf__avatar {
	flex: none;
	width: 3rem;
	height: 3rem;
	border-radius: 50%;
	object-fit: cover;
	background: var(--wp--preset--color--paper-2);
}

.dkg-anruf__person-text {
	display: grid;
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.35;
	color: var(--wp--preset--color--ink-2);
}

.dkg-anruf__person-text strong {
	font-weight: 650;
	color: var(--wp--preset--color--ink);
}

.dkg-anruf__bewertung {
	color: var(--wp--preset--color--ink);
	text-underline-offset: .2em;
}

.dkg-anruf__stand {
	font-family: var(--wp--preset--font-family--plex-mono);
	font-size: var(--wp--preset--font-size--mono);
	color: var(--wp--preset--color--ink-3);
}

/* ---------- Variante kompakt (Button: Label + Nummer zweizeilig) ---------- */

.dkg-anruf__button--kompakt {
	display: inline-grid;
	grid-template-columns: auto minmax(0, auto);
	gap: .75rem;
	min-height: 3.5rem;
	padding: .5rem 1.25rem .5rem .5rem;
}

.dkg-anruf__button--kompakt .dkg-anruf__icon {
	width: 2.5rem;
	height: 2.5rem;
}

.dkg-anruf__button--kompakt .dkg-anruf__text {
	gap: .125rem;
}

.dkg-anruf__button--kompakt .dkg-anruf__label {
	font-family: inherit;
	font-size: 1.0625rem;
	font-weight: 680;
	line-height: 1.15;
	letter-spacing: 0;
	text-transform: none;
	color: inherit;
}

.dkg-anruf__button--kompakt .dkg-anruf__nummer {
	font-size: .9375rem;
	font-weight: 500;
	line-height: 1.2;
	color: var(--wp--custom--on-navy-2);
}

/* ---------- Variante header (Textlink + Mikrozeile) ---------- */

.dkg-anruf--header {
	display: grid;
	justify-items: end;
	gap: .125rem;
}

.dkg-anruf__textlink {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	min-height: 2.75rem;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

.dkg-anruf__textlink .dkg-anruf__nummer {
	font-size: 1.25rem;
	font-weight: 720;
	font-stretch: 84%;
	text-decoration: underline 1px transparent;
	text-underline-offset: .2em;
	transition: text-decoration-color 160ms var(--dkg-ease);
}

.dkg-anruf__textlink:hover .dkg-anruf__nummer {
	text-decoration-color: currentColor;
}

.dkg-anruf__textlink-icon {
	width: 1.125rem;
	height: 1.125rem;
	color: var(--wp--preset--color--navy);
}

.dkg-anruf--header .dkg-anruf__status {
	margin-top: -.375rem;
	font-family: var(--wp--preset--font-family--plex-mono);
	font-size: var(--wp--preset--font-size--mono);
	color: var(--wp--preset--color--ink-3);
}

.dkg-anruf--header .dkg-anruf__status-icon {
	display: none;
}

/* ---------- Variante header-mobil (48-px-Icon-Button, Haarlinie: der gefüllte Button gehört dem Hero) ---------- */

.dkg-anruf__icon-button {
	display: grid;
	place-items: center;
	width: 3rem;
	height: 3rem;
	border: 1px solid var(--wp--custom--line-strong, currentColor);
	border-radius: var(--wp--custom--radius, 2px);
	color: var(--wp--preset--color--navy);
	transition: background-color 160ms var(--dkg-ease);
}

.dkg-anruf__icon-button:hover {
	background: var(--wp--preset--color--paper-2);
}

.dkg-anruf__icon-button svg {
	width: 1.375rem;
	height: 1.375rem;
}

/* ---------- Variante text ---------- */

.dkg-anruf--text {
	margin: 0;
}

.dkg-anruf__inline {
	font-weight: 650;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	color: var(--wp--preset--color--navy);
	text-underline-offset: .2em;
}

/* ---------- Dunkle Sektionen ---------- */

:is(.dkg-sektion--dunkel, footer) .dkg-anruf a:focus-visible {
	outline-color: var(--wp--preset--color--mint);
}

:is(.dkg-sektion--dunkel, footer) .dkg-anruf__linie,
:is(.dkg-sektion--dunkel, footer) .dkg-anruf__textlink,
:is(.dkg-sektion--dunkel, footer) .dkg-anruf__icon-button {
	border-color: color-mix(in srgb, var(--wp--preset--color--white) 36%, transparent);
	color: var(--wp--preset--color--white);
}

:is(.dkg-sektion--dunkel, footer) .dkg-anruf__linie:hover {
	background: transparent;
	border-color: var(--wp--preset--color--white);
}

:is(.dkg-sektion--dunkel, footer) .dkg-anruf__status,
:is(.dkg-sektion--dunkel, footer) .dkg-anruf__person-text {
	color: var(--wp--preset--color--on-dark-2);
}

@media (prefers-reduced-motion: reduce) {
	.dkg-anruf *,
	.dkg-anruf *::before {
		transition: none !important;
	}
}