/*
Theme Name: ZDF Service
Description: Block-Theme für zdf-service.de
Version: 0.1.0
Requires at least: 6.8
Requires PHP: 8.2
*/

:where(a, button, summary, input, select, textarea):focus-visible {
	outline: 2px solid var(--wp--preset--color--akzent);
	outline-offset: 2px;
}

/* Label-Spalte: links Versal-Label, rechts Inhalt. Ohne Label volle Breite. */
.zdf-sektion { display: grid; gap: var(--wp--preset--spacing--30); }
@media (min-width: 782px) {
	.zdf-sektion:has(> .zdf-sektion__label) { grid-template-columns: 1fr 2fr; gap: var(--wp--preset--spacing--50); }
}
.zdf-sektion__label {
	margin: 0;
	font-size: var(--wp--preset--font-size--label);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

/* Abstand zwischen Modulen */
.wp-block-post-content > [class*="wp-block-zdf-"] { margin-block: var(--wp--preset--spacing--70); }

/* Kopf */
.zdf-kopf { padding-block: var(--wp--preset--spacing--40); }
.zdf-wortmarke { margin: 0; font-weight: 700; font-size: var(--wp--preset--font-size--gross); letter-spacing: -0.02em; }
.zdf-wortmarke a { text-decoration: none; }

/* Pill-Navigation, nur solange das Overlay geschlossen ist */
.zdf-navigation .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container {
	background: var(--wp--preset--color--text);
	border-radius: 999px;
	padding: 0.5rem 1.25rem;
	gap: 1.5rem;
}
.zdf-navigation .wp-block-navigation__responsive-container:not(.is-menu-open) a {
	display: inline-block;
	padding-block: 0.25rem;
	color: var(--wp--preset--color--hintergrund);
	text-decoration: none;
	text-transform: uppercase;
	font-size: var(--wp--preset--font-size--label);
	letter-spacing: 0.04em;
}
.zdf-navigation .wp-block-navigation__responsive-container:not(.is-menu-open) a:focus-visible { outline-color: var(--wp--preset--color--hintergrund); }
/* content: "" im ::before, damit der generierte Inhalt nicht in den Accessible Name des Links einfließt. */
.zdf-navigation a[aria-current="page"]::before {
	content: "";
	display: inline-block;
	width: .4em;
	height: .4em;
	border-radius: 50%;
	background: currentColor;
	margin-inline-end: .4em;
	vertical-align: middle;
}

/* Fuß */
.zdf-fuss { margin-block-start: var(--wp--preset--spacing--70); padding-block: var(--wp--preset--spacing--50); font-size: var(--wp--preset--font-size--klein); }
.zdf-fuss__liste { list-style: none; margin: var(--wp--preset--spacing--20) 0 0; padding: 0; display: grid; gap: 0.25rem; }
.zdf-fuss__liste a { text-decoration: none; }
.zdf-fuss__liste a:hover { text-decoration: underline; }
.zdf-fuss__copyright { margin-block-start: var(--wp--preset--spacing--50); }

/* Der Farbfleck im Hero ragt über den Rand; horizontal kappen, ohne die Unschärfe abzuschneiden. */
.wp-site-blocks { overflow-x: clip; }