/*
 * Basis: Ränder, Container, Fokus, Buttons, versteckter Text, Bewegung.
 * Werte aus DESIGN.md 1 und 3. Umbrüche: Handy unter 700 px,
 * Desktop ab 700 px, alle Raster zweispaltig erst ab 861 px.
 */

html {
	scroll-behavior: smooth;
}

/* „hidden“ gilt immer, auch wenn ein Block sonst eine Anzeige vorgibt. */
[hidden] {
	display: none !important;
}

/* [Bau] clip statt hidden, damit sticky im Leistungsfenster und beim Über-mich-Foto geht. */
.wp-site-blocks {
	overflow-x: clip;
}

/* Abstände kommen aus den Bereichen, nicht aus Browser-Vorgaben. */
:where(.wp-site-blocks) :where(p, h1, h2, h3, h4, h5, h6, figure, ul, ol, dl, dd, blockquote) {
	margin: 0;
}

:where(.wp-site-blocks) img {
	display: block;
	max-width: 100%;
	height: auto;
}

a {
	text-underline-offset: 3px;
}

/* Container Desktop: höchstens 1200 px, seitlich 24 px; Handy 16 px. */
.hk-wrap {
	box-sizing: border-box;
	width: 100%;
	max-width: var(--wp--custom--wrap);
	margin-inline: auto;
	padding-inline: var(--wp--custom--rand--handy);
}

@media (min-width: 700px) {
	.hk-wrap {
		padding-inline: var(--wp--custom--rand--desktop);
	}
}

/* Versteckter Text für Screenreader (DESIGN.md 3.3). */
.hk-sr {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0 0 0 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/* Fokus für alles: 3 px cobalt, 2 px Abstand. Auf Cobalt-Flächen weiß. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--wp--preset--color--cobalt);
	outline-offset: 2px;
}

.has-cobalt-background-color :focus-visible,
.has-cobalt-background-color:focus-visible {
	outline-color: var(--wp--preset--color--white);
}

/* Buttons: Pille, Inter 900, mindestens 44 px hoch. */
.wp-block-button__link.wp-element-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-height: 44px;
	text-align: center;
	cursor: pointer;
	transition: transform var(--wp--custom--dauer--lift) ease-out;
}

/* Zweitbutton: creme mit cobalt-Schrift (Block-Stil „Zweitbutton“). */
.wp-block-button.is-style-zweit .wp-block-button__link {
	background-color: var(--wp--preset--color--creme);
	color: var(--wp--preset--color--cobalt);
}

/* In Cobalt-Karten: weiß mit cobalt-Schrift. */
.has-cobalt-background-color .wp-block-button__link.wp-element-button {
	background-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--cobalt);
}

/* Hover-Lift für Buttons, Kreise und Kacheln: 2 px in 150 ms. */
.hk-tap,
.wp-block-button__link.wp-element-button {
	transition: transform var(--wp--custom--dauer--lift) ease-out;
}

.hk-tap:hover,
.wp-block-button__link.wp-element-button:hover {
	transform: translateY(-2px);
}

/* Avatar vor „hilke terhalle“ (Deko, kein Alt-Text). */
.hk-mit-avatar {
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: 700;
	color: var(--wp--preset--color--ink);
}

.hk-mit-avatar::before {
	content: "";
	flex: none;
	width: var(--hk-avatar, 30px);
	height: var(--hk-avatar, 30px);
	border-radius: 50%;
	background: url("../16.svg") center / cover no-repeat;
}

/* Icon per Maske: Farbe folgt der Schriftfarbe. */
.hk-icon {
	display: inline-block;
	width: var(--hk-icon, 24px);
	height: var(--hk-icon, 24px);
	background-color: currentColor;
	-webkit-mask: var(--hk-maske) center / contain no-repeat;
	mask: var(--hk-maske) center / contain no-repeat;
}

/* Button nur mit Icon: Text bleibt für Screenreader, sichtbar ist das Icon. */
.hk-icon-button .wp-block-button__link.wp-element-button {
	position: relative;
	width: 44px;
	min-width: 44px;
	height: 44px;
	padding: 0;
	overflow: hidden;
	background: transparent;
	color: var(--wp--preset--color--cobalt);
	font-size: 0;
	line-height: 0;
}

.hk-icon-button .wp-block-button__link.wp-element-button::before {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	width: var(--hk-icon, 22px);
	height: var(--hk-icon, 22px);
	background-color: currentColor;
	-webkit-mask: var(--hk-maske) center / contain no-repeat;
	mask: var(--hk-maske) center / contain no-repeat;
}

/* Bei reduzierter Bewegung: kein Lift, keine Übergänge, kein Laufband. */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		transition: none !important;
		animation: none !important;
	}

	.hk-tap:hover,
	.wp-block-button__link.wp-element-button:hover {
		transform: none;
	}
}