/*
 * Hauswerk — Basis-Feinschliff
 *
 * Alles, was für die ganze Seite gilt und keinem Block gehört: Fokus,
 * Touch- und iOS-Verhalten, Textauswahl, Druckansicht, Bildverhalten.
 * Wie überall: nur ACSS-Variablen, keine rohen Farbwerte.
 */

/* =========================================================================
 * 1. Fokus — sichtbar, aber nur bei Tastaturbedienung
 * ====================================================================== */

/*
 * :focus-visible statt :focus — Mausklicks erzeugen keinen Rahmen, die
 * Tastaturbedienung schon. Der Rahmen liegt außen (offset), damit er auch auf
 * dunklen Flächen und über Bildern erkennbar bleibt.
 */
:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--primary-semi-dark);
	outline-offset: 2px;
	border-radius: 2px;
}

/* Auf dunklen Flächen den helleren Ton nehmen, sonst verschwindet der Rahmen. */
.hw-section--dark :where(a, button, summary, [tabindex]):focus-visible,
.hw-ft :where(a, button, [tabindex]):focus-visible {
	outline-color: var(--secondary);
}

/* Kein doppelter Rahmen, wenn der Browser zusätzlich :focus setzt. */
:where(a, button, input, textarea, select, summary):focus:not(:focus-visible) {
	outline: none;
}

/* Der Skip-Link ist der erste Tabstop der Seite. */
.hw-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
	background: var(--primary);
	color: var(--shade);
	padding: .9rem 1.4rem;
	font-weight: 700;
	text-decoration: none;
}

.hw-skip:focus {
	left: 0;
}

/* =========================================================================
 * 2. Touch und iOS
 * ====================================================================== */

/*
 * iOS zoomt automatisch hinein, wenn ein Formularfeld kleiner als 16 px ist.
 * Deshalb Mindestgröße erzwingen — betrifft vor allem Fluent Forms.
 */
@supports (-webkit-touch-callout: none) {
	:where(input, textarea, select) {
		font-size: max(16px, var(--text-m));
	}
}

/* Der blaue Blitz beim Antippen sieht auf einer ruhigen Seite störend aus. */
a,
button,
summary,
[role='button'] {
	-webkit-tap-highlight-color: transparent;
}

/* Touch-Ziele: die Empfehlung liegt bei 44 px. Betrifft die kleinen
   Bedienelemente (Slider-Punkte, Filterknöpfe). */
@media (pointer: coarse) {
	.hw-ref__dots button,
	.hw-kst__dot {
		position: relative;
	}

	/* Unsichtbar vergrößerter Klickbereich, ohne das Layout zu verschieben. */
	.hw-ref__dots button::after,
	.hw-kst__dot::after {
		content: '';
		position: absolute;
		inset: -18px -6px;
	}
}

/*
 * Safe-Area auf Geräten mit Notch/abgerundeten Ecken: der Footer und der
 * sticky Header sollen nicht unter die Systemleisten rutschen.
 */
@supports (padding: env(safe-area-inset-left)) {
	.hw-container,
	.hw-hd__inner,
	.hw-ft__inner {
		padding-left: max(var(--gutter), env(safe-area-inset-left));
		padding-right: max(var(--gutter), env(safe-area-inset-right));
	}

	.hw-ft__fine {
		padding-bottom: max(var(--space-s), env(safe-area-inset-bottom));
	}
}

/* Kein Gummiband-Effekt, der den Hintergrund durchblitzen lässt. */
html {
	overscroll-behavior-y: none;
}

/* Sanftes Scrollen für Ankersprünge — aber nur, wenn erwünscht. */
@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

/* =========================================================================
 * 3. Bilder und Medien
 * ====================================================================== */

/* Bilder nie über ihren Rahmen hinaus, immer proportional. */
img,
picture,
video,
svg {
	max-width: 100%;
	height: auto;
}

/* Bilder sind nicht auswählbar/ziehbar — verhindert das versehentliche
   Aufziehen von Bildern beim Wischen auf Touchgeräten. */
.hw-media img {
	user-select: none;
	-webkit-user-drag: none;
}

/* =========================================================================
 * 4. Textauswahl und Scrollbalken
 * ====================================================================== */

::selection {
	background: var(--primary);
	color: var(--shade);
}

/* Dezenter Scrollbalken, passend zur Palette (Firefox + WebKit). */
@media (pointer: fine) {
	* {
		scrollbar-width: thin;
		scrollbar-color: var(--shade-trans-30) transparent;
	}

	::-webkit-scrollbar {
		width: 10px;
		height: 10px;
	}

	::-webkit-scrollbar-track {
		background: transparent;
	}

	::-webkit-scrollbar-thumb {
		background: var(--shade-trans-20);
		border-radius: 6px;
		border: 2px solid transparent;
		background-clip: content-box;
	}

	::-webkit-scrollbar-thumb:hover {
		background: var(--shade-trans-30);
		background-clip: content-box;
	}
}

/* =========================================================================
 * 5. Lesbarkeit
 * ====================================================================== */

/* Keine abgeschnittenen Wörter, aber lange Begriffe dürfen brechen. */
:where(p, li, dd, figcaption, blockquote) {
	overflow-wrap: break-word;
	hyphens: auto;
}

/* Überschriften nicht trennen — das liest sich schlecht. */
:where(h1, h2, h3, h4, h5, h6) {
	hyphens: manual;
	text-wrap: balance;
}

/* Einzelne Wörter in der letzten Zeile vermeiden. */
:where(p, .hw-lead) {
	text-wrap: pretty;
}

/* =========================================================================
 * 6. Druckansicht
 * ====================================================================== */

@media print {
	/* Navigation, Slider-Bedienung und Formulare sind auf Papier sinnlos. */
	.hw-hd,
	.hw-skip,
	.hw-ref__arrows,
	.hw-ref__dots,
	.hw-ref__filter,
	.hw-kst__dots,
	.hw-kon__form,
	.hw-form__body,
	.hw-vid__play,
	.hw-hero__pause,
	#wpadminbar {
		display: none !important;
	}

	/* Alles sichtbar — die Reveals dürfen nichts verstecken. */
	.hw-rev {
		opacity: 1 !important;
		transform: none !important;
	}

	/* Flächen weg, Text schwarz: spart Toner und liest sich besser. */
	.hw-section {
		background: none !important;
		color: #000 !important;
		padding-block: 1.2rem !important;
	}

	.hw-section--dark :is(h1, h2, h3, h4, p, span, b) {
		color: #000 !important;
	}

	/* Slider aufklappen, damit alle Karten auf dem Papier stehen. */
	.hw-ref__list--scroller {
		display: block !important;
		overflow: visible !important;
	}

	.hw-ref__card {
		break-inside: avoid;
		margin-bottom: 1rem !important;
		margin-top: 0 !important;
	}

	/* Ziel von Links mitdrucken — auf Papier sonst nicht nachvollziehbar. */
	.hw-prosa a[href^='http']::after {
		content: ' (' attr(href) ')';
		font-size: .85em;
		word-break: break-all;
	}

	:where(h1, h2, h3, h4) {
		break-after: avoid;
	}

	:where(img, figure, .hw-media) {
		break-inside: avoid;
	}
}