/*
Theme Name: Ansprechpartner für Digitales
Description: Schlichtes Block Theme (nur Darstellung) für die Website eines freiberuflichen Softwareentwicklers aus Erkelenz. Formular und Kontakt-Verschleierung liefert das Plugin adf-kontakt.
Version: 1.2.7
Requires at least: 6.6
Requires PHP: 8.0
License: GPL-2.0-or-later
Text Domain: ansprechpartner-digitales
*/

/* Nur was theme.json nicht kann: Fokus, Kopf, Navigation, Fuß, Kontaktleiste. Weitere Teile: assets/css/. */
:root {
	--adf-gutter: var(--wp--preset--spacing--gutter);
	--adf-primary: var(--wp--preset--color--primary);
	--adf-dark: var(--wp--preset--color--primary-dark);
	--adf-lexend: var(--wp--preset--font-family--lexend);
	--adf-pfeil: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
	--adf-chat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5h16v11H10l-5 4v-4H4z'/%3E%3C/svg%3E");
	--adf-haken: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
	--adf-kreuz: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8.5 8.5l7 7M15.5 8.5l-7 7'/%3E%3C/svg%3E");
	--adf-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
	--adf-menu: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16M4 12h16M4 17h16'/%3E%3C/svg%3E");
	--adf-mail: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3.5 6.5l8.5 6.5 8.5-6.5'/%3E%3C/svg%3E");
}

.wp-site-blocks > *,
main.wp-block-group > *,
.wp-block-post-content > * { margin-block: 0; }
.wp-site-blocks { overflow-x: clip; }
/* Lange Komposita ("Systemumstellungen") brechen um statt über den Rand zu laufen. Das clip oben würde sie nur abschneiden. */
body { overflow-wrap: break-word; }
:where(h1, h2, h3, h4, li) { -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 12 5 5; }
/* Ab Desktop ist genug Platz: große Überschriften nicht trennen ("Ansprech-partner"). */
@media (min-width: 1024px) { :where(h1, h2) { -webkit-hyphens: manual; hyphens: manual; } }

/* Fokus: immer sichtbar, auf dunklen Flächen in Akzentfarbe */
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible {
	outline: 3px solid var(--adf-dark);
	outline-offset: 3px;
	border-radius: 8px;
}
.adf-dark :focus-visible, .adf-footer :focus-visible { outline-color: var(--wp--preset--color--accent); }
.skip-link.screen-reader-text:focus {
	top: 12px; left: 16px; z-index: 100000; width: auto; height: auto; clip: auto; clip-path: none;
	padding: 12px 20px; border-radius: 8px; background: var(--adf-dark); color: #fff; font-size: 1.125rem;
}

/* Kopfbereich */
.adf-header { border-bottom: 1px solid var(--wp--preset--color--line); background: #fff; }
/* Leiste bleibt beim Scrollen oben. Nicht bei wenig Höhe (Querformat, Zoom), sonst frisst sie den Inhalt.
   z-index über der mobilen Kontaktleiste (50), damit das geöffnete Menü sie überdeckt. scroll-padding hält
   Sprungziele und Fokus unter der Leiste frei (WCAG 2.4.11). */
@media (min-height: 500px) {
	.adf-header { position: sticky; top: var(--wp-admin--admin-bar--height, 0px); z-index: 60; }
	html { scroll-padding-top: 110px; }
}
@media (min-height: 500px) and (min-width: 1024px) and (max-width: 1260px) { html { scroll-padding-top: 170px; } } /* Navigation in zweiter Zeile */
.adf-header__innen {
	max-width: calc(var(--wp--style--global--wide-size) + 2 * var(--adf-gutter)); margin-inline: auto;
	padding: 16px var(--adf-gutter); gap: 16px 24px;
}
/* Logo: Absatz mit Link. Fett = erste Zeile, Rest = zweite Zeile; Kachel und Symbol liegen in der ersten Spalte. */
.adf-logo { margin: 0; font: 600 1.25rem/1.15 var(--adf-lexend); }
.adf-logo a {
	display: grid; grid-template-columns: auto auto; justify-content: start; align-items: start; column-gap: 14px;
	min-height: 48px; color: var(--adf-primary); text-decoration: none;
}
.adf-logo a::before, .adf-logo a::after { content: ""; grid-area: 1 / 1 / 3 / 2; width: 48px; height: 48px; }
.adf-logo a::before { border-radius: 12px; background: var(--adf-primary); }
.adf-logo a::after {
	place-self: start; margin: 10.5px 11px; width: 26px; height: 26px; background: #fff; /* Kachel 48 px: (48-26)/2, Blase liegt im Symbol 0,5 px tiefer */
	-webkit-mask: var(--adf-i) center / contain no-repeat; mask: var(--adf-i) center / contain no-repeat;
}
.adf-logo strong { align-self: end; font-weight: inherit; color: var(--adf-dark); }

/* Kompakter Kopf ab Desktop, an den Scrollweg gekoppelt: assets/js/kopf.js setzt --p (0 ganz oben, 1 nach 100 px)
   und misst die Wege. Text blendet aus, die Blase gleitet über den Inhaltsrand nach links, die Navigation hoch
   daneben, der Kopf wird flacher. Die beiden Ränder heben sich auf, der Inhalt darunter bleibt stehen. */
@media (min-width: 1024px) and (min-height: 500px) {
	.adf-header { margin-bottom: calc(var(--adf-weg, 0px) * var(--p, 0)); }
	.adf-header__innen { margin-bottom: calc(var(--adf-weg, 0px) * var(--p, 0) * -1); }
	.adf-logo { translate: calc(var(--adf-logo-x, 0px) * var(--p, 0)) calc(var(--adf-logo-y, 0px) * var(--p, 0)); }
	.adf-header__innen > .adf-nav { translate: calc(var(--adf-nav-x, 0px) * var(--p, 0)) calc(var(--adf-nav-y, 0px) * var(--p, 0)); } /* nicht .adf-nav: der Core hängt die Klasse auch an die innere ul */
	.adf-logo :is(strong, span) { opacity: calc(1 - 2 * var(--p, 0)); } /* in der ersten Hälfte weg, bevor die Navigation ankommt */
}

@media (max-width: 480px) {
	.adf-header__innen { gap: 12px 16px; }
	.adf-logo { font-size: 1.0625rem; }
	.adf-logo a { column-gap: 10px; }
	.adf-logo a::before { width: 44px; height: 44px; }
	.adf-logo a::after { margin: 8.5px 9px; }
}

/* Navigation: Menüpunkte mindestens 48 px hoch, aktiver Punkt fett mit Akzent-Unterstreichung */
.adf-nav .wp-block-navigation__container { gap: 4px; }
.adf-nav .wp-block-navigation-item__content {
	display: flex; align-items: center; min-height: 48px; padding: 0 12px;
	font-size: 1.125rem; color: var(--adf-dark); text-decoration: none;
}
.adf-nav .wp-block-navigation-item__content:hover { text-decoration: underline; }
.adf-nav a[aria-current="page"] {
	font-weight: 700; text-decoration: underline; text-decoration-thickness: 3px;
	text-decoration-color: var(--wp--preset--color--accent); text-underline-offset: 10px;
}
.adf-nav .adf-nav-cta > a {
	margin-left: 12px; padding: 0 22px; border-radius: 10px; font: 600 1.0625rem var(--adf-lexend);
	background: var(--wp--preset--color--accent); text-decoration: none;
}
/* Menü-Button bis 1023 px: der Kern schaltet erst unter 600 px um, die Leiste bricht aber schon unter ~1010 px in zwei Zeilen. */
@media (max-width: 1023px) {
	.adf-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none; }
	.adf-nav .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 18px;
		border: 2px solid var(--adf-primary); border-radius: 10px; background: #fff; color: var(--adf-dark);
		font: 600 1.0625rem var(--adf-lexend);
	}
	.adf-nav .wp-block-navigation__responsive-container-open svg { display: none; }
	.adf-nav .wp-block-navigation__responsive-container-open::before {
		content: ""; width: 22px; height: 22px; background: currentColor;
		-webkit-mask: var(--adf-menu) center / contain no-repeat; mask: var(--adf-menu) center / contain no-repeat;
	}
	.adf-nav .wp-block-navigation__responsive-container-open::after { content: "Menü"; }
}
.adf-nav .wp-block-navigation__responsive-container.is-menu-open.is-menu-open { padding: 24px var(--adf-gutter); background: #fff; color: var(--adf-dark); }
.adf-nav .is-menu-open .wp-block-navigation__responsive-container-content,
.adf-nav .is-menu-open .wp-block-navigation__container.wp-block-navigation__container { align-items: stretch; gap: 8px; padding-top: 0; }
.adf-nav .is-menu-open :is(.wp-block-navigation__container, .wp-block-navigation-item) { --navigation-layout-justification-setting: stretch; } /* Einträge im Overlay linksbündig, volle Breite */
.adf-nav .is-menu-open .wp-block-navigation-item__content { min-height: 56px; font-size: 1.375rem; }
.adf-nav .is-menu-open .adf-nav-cta > a { margin: 12px 0 0; justify-content: center; }
.adf-nav .adf-nav-cta > a { color: var(--adf-dark); }

/* Fußbereich */
.adf-footer { padding: 72px var(--adf-gutter) 40px; }
.adf-footer a { color: #fff; }
.adf-footer__raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 40px; }
.adf-footer p { margin: 0; font-size: 1.125rem; color: var(--wp--preset--color--on-dark); }
.adf-footer .adf-footer__titel, .adf-footer .adf-footer__marke { color: #fff; font: 600 1.125rem var(--adf-lexend); margin-bottom: 4px; }
.adf-footer .adf-footer__marke { font-size: 1.25rem; line-height: 1.2; margin-bottom: 14px; }
.adf-footer ul { list-style: none; margin: 0; padding: 0; }
.adf-footer__raster > *, .adf-footer__raster > * > * { margin-block-start: 0; } /* Fluss-Layout der Gruppen-Blöcke neutralisieren */
.adf-footer__raster a { display: flex; align-items: center; min-height: 48px; font-size: 1.125rem; }
.adf-footer__unten {
	margin-top: 48px; padding-top: 24px; gap: 12px 32px; align-items: center;
	border-top: 1px solid var(--wp--preset--color--line-dark);
}
.adf-footer__unten p { font-size: 1.0625rem; }
.adf-footer__recht { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.adf-footer__recht a { display: flex; align-items: center; min-height: 48px; }

/* Mobile Kontaktleiste: fest unten, nur auf kleinen Bildschirmen. Nicht bei wenig Höhe (Querformat, Zoom)
   und nicht auf der Kontaktseite. scroll-padding hält fokussierte Elemente über der Leiste (WCAG 2.4.11). */
.adf-leiste { display: none; }
@media (max-width: 781px) and (min-height: 500px) {
	body:not(:has(#kontakt-formular)) { padding-bottom: 88px; }
	html:not(:has(#kontakt-formular)) { scroll-padding-bottom: 100px; }
	body:has(#kontakt-formular) .adf-leiste { display: none; }
	.adf-leiste {
		position: fixed; inset: auto 0 0 0; z-index: 50; display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
		padding: 12px 16px; background: #fff; border-top: 1px solid var(--wp--preset--color--line);
		box-shadow: var(--wp--preset--shadow--leiste);
	}
	.adf-leiste > * { margin: 0; }
	.adf-leiste a {
		display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; border-radius: 10px;
		font: 600 1.125rem var(--adf-lexend); text-decoration: none;
	}
	.adf-leiste__anfrage a { background: var(--wp--preset--color--accent); color: var(--adf-dark); }
	.adf-leiste__wa a { border: 2px solid var(--adf-primary); color: var(--adf-primary); }
	.adf-leiste__anfrage a::before {
		content: ""; flex: none; width: 20px; height: 20px; background: currentColor;
		-webkit-mask: var(--adf-mail) center / contain no-repeat; mask: var(--adf-mail) center / contain no-repeat;
	}
}

/* Windows-Kontrastmodus: Masken-Symbole und Button-Flächen bekommen Systemfarben, sonst verschwinden sie. */
@media (forced-colors: active) {
	.adf-mehr::after, .adf-pfeil .wp-block-button__link::after, .adf-chat .wp-block-button__link::before, .adf-leiste a::before,
	.adf-logo a::after, .adf-haken li::before, .adf-anliegen li::before, .adf-pfeilliste li::before, .adf-kreuz li::before,
	.wp-block-details summary::after, .adf-nav .wp-block-navigation__responsive-container-open::before {
		forced-color-adjust: none; background: CanvasText;
	}
	.wp-block-button__link, .adf-senden, .adf-leiste a, .adf-nav .adf-nav-cta > a { border: 2px solid ButtonText; }
}