/* ============================================================
   SAV — Base / Reset / Typografie
   ============================================================ */

html {
	scroll-behavior: smooth;
	overflow-x: hidden;
}

/* Hidden-Attribut muss display:none erzwingen — manche Themes/Plugins
   überschreiben das mit eigenem `display:` Selektor */
[hidden] { display: none !important; }

body {
	font-family: var(--font-sans);
	font-size: var(--text-base);
	line-height: var(--leading-relaxed);
	color: var(--neutral-700);
	background-color: var(--white);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-feature-settings: 'cv11', 'ss01', 'ss03';
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
	max-width: 100vw;
	position: relative;
}

/* Headings — Font-Family/Weight/Color global, aber FONT-SIZES nur für Custom-Bereiche.
   Hybrid-Strategie 2026-05-25: Blocksy bringt eigene Heading-Sizes für WC-Komponenten
   (h1.product_title, h2.woocommerce-loop-product__title etc.) — globale font-size-Regel
   würde diese überschreiben. Daher size-Klassen .h1..h6 für explicit gewünschte Größen
   in Custom-Templates verwenden. */
h1, h2, h3, h4, h5, h6,
.entry-title {
	font-family: var(--font-sans);
	font-weight: var(--font-weight-bold);
	line-height: var(--leading-tight);
	color: var(--neutral-900);
	letter-spacing: -0.015em;
}

.h1 { font-size: var(--text-4xl); font-weight: var(--font-weight-extra); letter-spacing: -0.02em; }
.h2 { font-size: var(--text-3xl); }
.h3 { font-size: var(--text-2xl); }
.h4 { font-size: var(--text-xl);  font-weight: var(--font-weight-semibold); }
.h5 { font-size: var(--text-lg);  font-weight: var(--font-weight-semibold); }
.h6 { font-size: var(--text-base);font-weight: var(--font-weight-semibold); text-transform: uppercase; letter-spacing: 0.05em; }

p { margin: 0 0 var(--space-4) 0; }

a {
	color: var(--brand-orange);
	text-decoration: none;
	transition: color var(--duration-fast) var(--ease-out);
}
a:hover { color: var(--brand-orange-hover); }

/* Fokus-Ring — sichtbar aber elegant */
:focus-visible {
	outline: 2px solid var(--brand-orange);
	outline-offset: 3px;
	border-radius: var(--radius-sm);
}

/* Selection */
::selection {
	background-color: var(--brand-orange);
	color: var(--white);
}

/* Bilder default */
img {
	max-width: 100%;
	height: auto;
	display: block;
}

/* Listen */
ul, ol {
	padding-left: 1.4em;
	margin: 0 0 var(--space-4) 0;
}
ul li, ol li { margin-bottom: var(--space-2); }

/* Tabellen */
table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--text-sm);
}
th, td {
	padding: var(--space-3) var(--space-4);
	text-align: left;
	border-bottom: 1px solid var(--neutral-200);
}
th {
	font-weight: var(--font-weight-semibold);
	color: var(--neutral-900);
	background-color: var(--neutral-50);
}

/* Code */
code, pre, kbd {
	font-family: var(--font-mono);
	font-size: 0.92em;
}
code {
	background-color: var(--neutral-100);
	padding: 0.1em 0.4em;
	border-radius: var(--radius-sm);
}

/* Hr */
hr {
	border: none;
	border-top: 1px solid var(--neutral-200);
	margin: var(--space-8) 0;
}

/* Reduced Motion */
@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;
	}
}

/* Skip-Link für A11y */
.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: var(--z-tooltip);
	background: var(--brand-orange);
	color: var(--white);
	padding: var(--space-3) var(--space-5);
	font-weight: var(--font-weight-semibold);
	border-radius: 0 0 var(--radius-md) 0;
}
.skip-link:focus { left: 0; }