/**
 * Theme – Global: Sizing-Engine, Basis-Styles, Typografie, Links, Buttons.
 *
 * SIZING-ENGINE (aus dem Vorgänger-Theme, 1:1 übernommen):
 * Die Root-Schriftgrösse skaliert proportional mit dem Viewport
 * (html { font-size: min(1rem, X vw) } pro Breakpoint-Stufe). Dadurch
 * schrumpfen ALLE rem-Werte (Layout, Abstände, Typografie) proportional —
 * das ist der zentrale Layout-Mechanismus dieses Designs. Nicht entfernen,
 * nicht mit clamp()-Typografie kombinieren (würde doppelt skalieren).
 *
 * Die theme.json-Presets (--wp--preset--font-size--*) werden pro Breakpoint
 * hier überschrieben — exakt wie die --fsize__-Variablen im Alt-Theme.
 *
 * Breakpoint-Referenz (desktop-first, bewusste Projekt-Konvention):
 *   @media only screen and (max-width: 80em)   1280px  Mini-Desktop
 *   @media only screen and (max-width: 55em)   880px   Tablet
 *   @media only screen and (max-width: 36em)   576px   Mobile
 *   @media only screen and (max-width: 27em)   432px   Mini-Mobile
 */

/* =========================================================================
   Lokale Design-Variablen (ergänzend zu den theme.json-Presets)
   ========================================================================= */

:root {
	/* Icon-Grössen */
	--isize__small: 0.725em;
	--isize__regular: 1.375em;
	--isize__large: 3.25rem;

	/* Border-Presets (Farbe folgt der Saison via Preset-Variablen) */
	--border__small: 0.0625em solid var(--wp--preset--color--primary);
	--border__small--secondary: 0.0625em solid var(--wp--preset--color--secondary);
	--border__small--light: 0.0625em solid var(--wp--preset--color--background);
	--border__regular: 0.125rem solid var(--wp--preset--color--primary);
	--border__regular--primary: 0.125rem solid var(--wp--preset--color--primary);
	--border__regular--secondary: 0.125rem solid var(--wp--preset--color--secondary);
	--border__regular--light: 0.125rem solid var(--wp--preset--color--primary);
	--border__large: 0.25em solid var(--wp--preset--color--primary);

	/* Inhalts-Wrapper (genutzt von layout.css und Content-Klassen) */
	--innerwrap__width: min(100vw, 170rem);
	--innerwrap__width--slim: min(100vw, 110rem);
	--innerwrap__width--slimmer: min(100vw, 50rem);
	--innerwrap__width--slim-af: min(100vw, 35rem);
	--innerwrap__px: 7rem;
	--innerwrap__py: 7rem;

	/* Navigations-Höhe (Bottom-Bar, siehe navigation.css) */
	--spnkt-nav-height: 6.375rem;
}

/* =========================================================================
   Root-Sizing-Engine (proportionale rem-Skalierung)
   ========================================================================= */

html,
body {
	font-size: min(1rem, 0.8vw);
	line-height: 1.2em;
}

/* =========================================================================
   Scroll-Offset für Ankernavigation (#events, #social-media, #forest …)
   -------------------------------------------------------------------------
   Sprungziele erhalten oberhalb Atem-Raum, damit der angesteuerte Abschnitt
   nicht bündig am oberen Rand klebt. scroll-padding-top auf dem scrollenden
   Root greift für JEDEN Fragment-Sprung, unabhängig vom Ziel-Block – kein
   Hardcoding von Block-IDs nötig.
   Bewusst in px (nicht rem): die Werte sollen fix bleiben und NICHT mit der
   proportionalen rem-Engine (font-size: min(1rem, Xvw)) mitskalieren.
   Desktop-first: 50px Basis, ab Tablet (55em) 80px.
   ========================================================================= */
html {
	scroll-padding-top: 40px;
}

@media only screen and (max-width: 55em) {
	html {
		scroll-padding-top: 90px;
	}
}

@media only screen and (max-width: 80em) {
	html,
	body {
		font-size: min(1em, 1vw);
	}
}

@media only screen and (max-width: 55em) {
	html,
	body {
		font-size: min(1rem, 1.75vw);
	}

	body {
		/* Preset-Überschreibung Tablet (Faktoren aus dem Alt-Theme). */
		--wp--preset--font-size--xx-large: calc(6.8125rem * 0.6375);
		--wp--preset--font-size--x-large: calc(2.625rem * 0.85);
		--wp--preset--font-size--large: calc(2.125rem * 0.85);
		--wp--preset--font-size--medium: calc(1.5625rem * 0.85);
		--wp--preset--font-size--small: 0.875rem;
	}

	:root {
		--isize__large: calc(3.25rem * 0.85);
		--innerwrap__px: 4rem;
		--innerwrap__py: 4rem;
		--spnkt-nav-height: 5.75rem;
	}
}

@media only screen and (max-width: 36em) {
	html,
	body {
		font-size: min(1rem, 3.675vw);
	}

	body {
		--wp--preset--font-size--xx-large: 2.875rem;
		--wp--preset--font-size--x-large: 1.75rem;
		--wp--preset--font-size--large: 1.5rem;
		--wp--preset--font-size--medium: 1rem;
		--wp--preset--font-size--small: 0.875rem;
	}

	:root {
		--isize__large: 2rem;
		--border__regular: 0.0625rem solid var(--wp--preset--color--primary);
		--border__regular--primary: 0.0625rem solid var(--wp--preset--color--primary);
		--border__regular--secondary: 0.0625rem solid var(--wp--preset--color--secondary);
		--border__regular--light: 0.0625rem solid var(--wp--preset--color--primary);
		--innerwrap__px: 2.5rem;
		--innerwrap__py: 3.5rem;
		--spnkt-nav-height: 4rem;
	}
}

/* =========================================================================
   Screen-Reader-Only (WCAG) + Skip-Link
   ========================================================================= */

.spnkt-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.spnkt-sr-only-focusable:focus,
.spnkt-sr-only-focusable:active {
	position: fixed;
	top: 1rem;
	left: 1rem;
	z-index: 1000;
	width: auto;
	height: auto;
	padding: 0.5em 1em;
	margin: 0;
	overflow: visible;
	clip: auto;
	white-space: normal;
	background: var(--wp--preset--color--background);
	color: var(--wp--preset--color--foreground);
}

/* =========================================================================
   Fokus & Bewegung (WCAG)
   ========================================================================= */

:focus:not(:focus-visible) {
	outline: none;
}

:focus-visible {
	outline: var(--border__regular);
	outline-offset: 0.125rem;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* =========================================================================
   Body-Scroll-Lock für Modals/Overlays (Mobile-Navigation)
   ========================================================================= */

html.spnkt-has-modal-open,
html.spnkt-has-modal-open body {
	overflow: hidden;
}

/* =========================================================================
   Basis / Reset
   ========================================================================= */

*,
*::before,
*::after {
	box-sizing: border-box;
}

img {
	max-width: 100%;
	height: auto;
}

body {
	font-family: var(--wp--preset--font-family--base);
	font-weight: 400;
	margin: 0;
	font-feature-settings: "kern" 1;
	font-kerning: normal;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	background-color: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--primary);

	/* Sticky-Footer-Gerüst */
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-height: 100dvh;
}

.spnkt-main {
	flex-grow: 1;
	width: 100%;
}

/* Scrollbar ausblenden (Design-Entscheid aus dem Vorgänger-Theme) */
body::-webkit-scrollbar {
	display: none;
}

body {
	-ms-overflow-style: none;
	scrollbar-width: none;
}

/* =========================================================================
   Typografie (Werte 1:1 aus dem Vorgänger-Theme)
   ========================================================================= */

h1,
.h1 {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--xx-large);
	line-height: 1em;
	color: var(--wp--preset--color--primary);
	hyphens: none;
}

h2,
.h2 {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--x-large);
	line-height: 1.19em;
	color: var(--wp--preset--color--primary);
	text-decoration: none;
	hyphens: none;
}

h3,
.h3,
h4,
h5,
h6,
.h4,
.h5,
.h6 {
	font-family: var(--wp--preset--font-family--base);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.058em;
	color: var(--wp--preset--color--primary);
	text-decoration: none;
	hyphens: none;
}

/* Heading-Klassen setzen sich gegen den passenden Element-Selektor durch
   (z.B. <h2 class="h1">): Doppelklasse erhöht die Spezifität ohne !important. */
.h1.h1 {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--xx-large);
	line-height: 1em;
}

.h2.h2 {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--x-large);
	line-height: 1.19em;
}

.h3.h3,
.h4.h4,
.h5.h5,
.h6.h6 {
	font-family: var(--wp--preset--font-family--base);
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.058em;
}

.mb-title {
	margin-bottom: 0.625em;
}

p,
li,
.p,
address,
blockquote {
	font-family: var(--wp--preset--font-family--base);
	font-weight: 400;
	font-size: var(--wp--preset--font-size--medium);
	font-style: normal;
	line-height: 1.16em;
	color: var(--wp--preset--color--primary);
	hyphens: none;
}

.p-bold,
.p b,
.p strong {
	font-weight: 700;
	font-size: var(--wp--preset--font-size--medium);
}

blockquote {
	margin: 0;
	padding: 0;
}

.s,
.fsize--marginal {
	font-weight: 400;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.66em;
	color: var(--wp--preset--color--primary);
}

.p.s a,
.s a {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--primary);
	text-decoration: none;
}

.uppercase {
	text-transform: uppercase;
}

strong,
b {
	font-weight: 700;
	color: var(--wp--preset--color--primary);
	hyphens: none;
}

ul.plain {
	padding-left: 0;
}

ul.plain li {
	list-style: none;
	hyphens: none;
}

ul.plain li::before {
	content: none;
}

/* --- Responsive Typografie-Helfer (Alt-Theme) */

@media only screen and (max-width: 36em) {
	.responsive-title br {
		display: none;
	}

	.h2-sm {
		font-size: var(--wp--preset--font-size--x-large);
	}

	.p-sm {
		font-size: var(--wp--preset--font-size--medium);
	}
}

/* =========================================================================
   WYSIWYG-Inhalte (Klassenname aus DB-Inhalten — nicht umbenennen)
   ========================================================================= */

.wysiwyg > *:first-child {
	margin-top: 0;
}

.wysiwyg > *:last-child {
	margin-bottom: 0;
}

.wysiwyg h1,
.wysiwyg h2 {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	color: var(--wp--preset--color--primary);
	margin-bottom: 0.625em;
	text-decoration: none;
	hyphens: none;
	overflow: visible;
}

.wysiwyg h1 {
	font-size: var(--wp--preset--font-size--xx-large);
	line-height: 1em;
}

.wysiwyg h2 {
	font-size: var(--wp--preset--font-size--x-large);
	line-height: 1.19em;
}

.wysiwyg h3,
.wysiwyg h4,
.wysiwyg h5,
.wysiwyg h6 {
	font-family: var(--wp--preset--font-family--base);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 700;
	line-height: 1.058em;
	color: var(--wp--preset--color--primary);
	margin-bottom: 0.625em;
	hyphens: none;
	overflow: visible;
}

.wysiwyg p,
.wysiwyg li,
.wysiwyg blockquote {
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.16em;
	margin-bottom: 0.625em;
	color: var(--wp--preset--color--primary);
	hyphens: none;
}

.wysiwyg b,
.wysiwyg strong {
	font-weight: 700;
	color: var(--wp--preset--color--primary);
}

.wysiwyg p a,
.wysiwyg u {
	text-decoration: none;
	border-bottom: var(--border__small);
	padding: 0 0 0.0625em 0;
}

@supports (text-decoration-skip-ink: none) {
	.wysiwyg p a,
	.wysiwyg u {
		border-bottom: unset;
		padding: 0;
		text-decoration: underline;
		text-decoration-skip-ink: none;
		text-decoration-thickness: 0.0625em;
		text-underline-offset: 0.2em;
	}
}

.wysiwyg ul,
.wysiwyg ol {
	padding-left: 1.5em;
}

.wysiwyg ul {
	list-style: none;
}

.wysiwyg ul li {
	position: relative;
}

.wysiwyg ul li:not(:last-of-type) {
	margin-bottom: 0.625em;
}

.wysiwyg ul li::before {
	content: "\2014";
	position: absolute;
	left: -1.2em;
	color: inherit;
	transform: scaleX(0.75);
	display: inline-block;
}

.wysiwyg blockquote {
	position: relative;
	display: inline-block;
	margin: 0;
}

.wysiwyg blockquote::before,
.wysiwyg blockquote::after {
	position: absolute;
	font-size: 1.375em;
	color: var(--wp--preset--color--primary);
}

.wysiwyg blockquote::before {
	content: "«";
	left: -0.725em;
	top: -0.0875em;
}

.wysiwyg blockquote::after {
	content: "»";
	right: -0.725em;
	top: -0.0875em;
}

.wysiwyg hr {
	margin: 2em 0;
}

.wysiwyg img {
	display: block;
	max-width: 100%;
	height: auto;
	margin: 2em auto;
}

.wysiwyg table {
	width: 100%;
	border-collapse: collapse;
	margin: 2em auto;
}

.wysiwyg table th,
.wysiwyg table td {
	padding: 0.5em;
	border: var(--border__small);
	text-align: left;
	vertical-align: top;
}

/* =========================================================================
   Links & Interaktionen
   ========================================================================= */

a,
a:hover {
	text-decoration: none;
}

a.underline,
a.underline:hover,
p a,
p a:hover,
.p a,
.p a:hover {
	text-decoration: none;
	border-bottom: var(--border__small);
	padding: 0 0 0.0625em 0;
}

@supports (text-decoration-skip-ink: none) {
	a.underline,
	a.underline:hover,
	p a,
	p a:hover,
	.p a,
	.p a:hover {
		border-bottom: unset;
		padding: 0;
		text-decoration: underline;
		text-decoration-skip-ink: none;
		text-decoration-thickness: 0.0625em;
		text-underline-offset: 0.2em;
	}
}

a.no-underline,
a.no-underline:hover {
	text-decoration: none;
}

.hover-scale,
.hover-scale-xs {
	display: inline-block;
	transition: transform 0.2s ease-out;
}

.hover-scale:hover {
	transform: scale(1.05);
}

.hover-scale-xs:hover {
	transform: scale(1.02);
}

/* Selection-Variante auf sekundär eingefärbten Flächen. */
.fcolor--secondary::selection {
	background: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--primary);
}

/* =========================================================================
   Buttons (Legacy-Klasse .button für DB-Inhalte; Gutenberg via theme.json)
   ========================================================================= */

button {
	background: unset;
	border: unset;
	padding: 0;
	margin: 0;
}

.button {
	display: inline-block;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--background);
	border-radius: 0.8125rem;
	padding: 0.4em 0.8em;
	line-height: 1em;
	border: 0;
	cursor: pointer;
}

.button.neg-primary {
	background: transparent;
	color: var(--wp--preset--color--primary);
	border: var(--border__regular--primary);
}

.button.neg-secondary {
	background: transparent;
	color: var(--wp--preset--color--secondary);
	border: var(--border__regular--secondary);
}

.button.neg-secondary:hover,
.button.neg-secondary.is-active {
	background: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--primary);
}

.centered-button {
	width: 100%;
	text-align: center;
	margin: 1.875em 0;
}

.centered-button .button {
	display: inline;
}

@media only screen and (max-width: 55em) {
	.button {
		padding: 0.5em 0.8em;
	}
}

@media only screen and (max-width: 36em) {
	.button {
		border-radius: 0.3475rem;
	}
}

/* =========================================================================
   Print
   ========================================================================= */

@media print {
	@page {
		margin: 1cm;
	}

	header,
	nav,
	footer {
		display: none;
	}

	img {
		max-width: 31.25em;
		visibility: visible !important;
	}
}