/*
 * Basis-Styles: Reset, Typografie, Buttons, Container, Standard-Komponenten.
 */

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

html {
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background-color: var(--sb-bg);
	color: var(--sb-color-text);
	font-family: var(--sb-font);
	font-size: var(--sb-fs-base);
	font-weight: var(--sb-fw-normal);
	line-height: var(--sb-lh-normal);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

/* Gradient-Text-Highlight (z. B. "Oberflächen" in der Headline) */
.sb-text-gradient {
	background: var(--sb-gradient-text);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}

img,
picture,
svg,
video {
	max-width: 100%;
	height: auto;
	display: block;
}

a {
	color: var(--sb-color-primary);
	text-decoration: none;
	transition: color var(--sb-transition);
}

a:hover,
a:focus {
	color: var(--sb-white);
}

h1, h2, h3, h4, h5, h6 {
	margin: 0 0 0.5em;
	color: var(--sb-color-heading);
	font-weight: var(--sb-fw-bold);
	line-height: var(--sb-lh-tight);
}

h1 { font-size: var(--sb-fs-h1); font-weight: var(--sb-fw-black); }
h2 { font-size: var(--sb-fs-h2); }
h3 { font-size: var(--sb-fs-h3); }
h4 { font-size: var(--sb-fs-h4); }
h5 { font-size: var(--sb-fs-h5); }
h6 { font-size: var(--sb-fs-h6); }

p { margin: 0 0 1rem; }

:focus-visible {
	outline: 2px solid var(--sb-color-primary);
	outline-offset: 3px;
}

/* --- Container --- */
.sb-container {
	width: 100%;
	max-width: var(--sb-wide);
	margin-inline: auto;
	padding-inline: var(--sb-gutter);
	padding-block: var(--sb-space-2xl);
}

.sb-container--narrow {
	max-width: var(--sb-narrow);
}

.sb-main {
	min-height: 50vh;
}

/* --- Buttons --- */
.sb-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	padding: 0.85em 1.6em;
	border: 1px solid transparent;
	border-radius: var(--sb-radius-pill);
	font-family: var(--sb-font);
	font-size: 1rem;
	font-weight: var(--sb-fw-bold);
	line-height: 1.2;
	cursor: pointer;
	text-align: center;
	transition: background-color var(--sb-transition), color var(--sb-transition),
		border-color var(--sb-transition), transform var(--sb-transition), box-shadow var(--sb-transition);
}

.sb-btn:hover,
.sb-btn:focus {
	transform: translateY(-2px);
}

.sb-btn--accent {
	background-color: var(--sb-color-accent);
	color: #06210b;
	box-shadow: 0 8px 24px rgba(var(--sb-rgb-accent), 0.3);
}

.sb-btn--accent:hover,
.sb-btn--accent:focus {
	background-color: var(--sb-color-accent-hover);
	color: #06210b;
}

.sb-btn--primary {
	background-color: var(--sb-color-primary);
	color: #04222e;
}

.sb-btn--ghost {
	background: rgba(var(--sb-rgb-white), 0.06);
	border-color: rgba(var(--sb-rgb-white), 0.18);
	color: var(--sb-white);
}

.sb-btn--ghost:hover,
.sb-btn--ghost:focus {
	background: rgba(var(--sb-rgb-white), 0.12);
	color: var(--sb-white);
}

/* Glasige Gradient-Buttons (wie im Hero) */
.sb-btn--glass,
.sb-btn--glass-pink,
.sb-btn--glass-teal {
	color: var(--sb-white);
	border-color: rgba(var(--sb-rgb-white), 0.25);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	box-shadow: inset 0 1px 0 rgba(var(--sb-rgb-white), 0.18), 0 10px 30px rgba(var(--sb-rgb-black), 0.35);
}

.sb-btn--glass {
	background: linear-gradient(135deg, rgba(var(--sb-rgb-white), 0.18), rgba(var(--sb-rgb-white), 0.04));
}

.sb-btn--glass-pink {
	background: linear-gradient(135deg, color-mix(in srgb, var(--sb-tint-pink) 70%, transparent), color-mix(in srgb, var(--sb-tint-purple) 45%, transparent));
}

.sb-btn--glass-teal {
	background: linear-gradient(135deg, color-mix(in srgb, var(--sb-tint-green) 70%, transparent), color-mix(in srgb, var(--sb-color-primary) 45%, transparent));
}

.sb-btn--glass:hover,
.sb-btn--glass-pink:hover,
.sb-btn--glass-teal:hover {
	color: var(--sb-white);
	border-color: rgba(var(--sb-rgb-white), 0.4);
}

.sb-btn--block {
	display: flex;
	width: 100%;
}

/* --- Richtext --- */
.sb-richtext {
	color: var(--sb-color-text);
}

.sb-richtext a {
	text-decoration: underline;
}

.sb-richtext ul,
.sb-richtext ol {
	padding-left: 1.4em;
}

/* --- Archiv / Cards --- */
.sb-archive__header {
	margin-bottom: var(--sb-space-xl);
	text-align: center;
}

.sb-archive__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
	gap: var(--sb-space-lg);
}

.sb-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.sb-card__media img {
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
}

.sb-card__body {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	padding: var(--sb-space-md);
}

.sb-card__title {
	font-size: var(--sb-fs-h4);
	margin: 0;
}

.sb-card__excerpt {
	color: var(--sb-color-muted);
	font-size: 0.95rem;
}

/* --- Pagination --- */
.sb-pagination {
	margin-top: var(--sb-space-xl);
}

.sb-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.5em;
	height: 2.5em;
	padding: 0 0.6em;
	margin: 0 0.2em;
	border-radius: var(--sb-radius-sm);
	background: rgba(var(--sb-rgb-white), 0.05);
	color: var(--sb-white);
}

.sb-pagination .page-numbers.current {
	background: var(--sb-color-primary);
	color: #04222e;
}

/* --- 404 --- */
.sb-404 {
	text-align: center;
}

.sb-404__inner {
	max-width: 640px;
	margin-inline: auto;
	padding: var(--sb-space-2xl) var(--sb-gutter);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--sb-space-md);
}

.sb-404__code {
	font-size: clamp(4rem, 2rem + 12vw, 9rem);
	font-weight: var(--sb-fw-black);
	line-height: 1;
	margin: 0;
	color: var(--sb-color-primary);
}

.sb-empty {
	text-align: center;
	color: var(--sb-color-muted);
}

/* --- Accessibility --- */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.sb-skip-link {
	position: absolute;
	left: -9999px;
	z-index: 1000;
	padding: 0.75em 1.25em;
	background: var(--sb-color-accent);
	color: #06210b;
	border-radius: 0 0 var(--sb-radius-sm) 0;
}

.sb-skip-link:focus {
	left: 0;
	top: 0;
}

/* Elementor-Seiteninhalte ohne Theme-Padding (Container 0/0 Konzept) */
.sb-page--elementor {
	display: block;
}

/* WordPress-Standardklassen */
.alignwide { max-width: var(--sb-wide); }
.alignfull { max-width: 100%; }
.aligncenter { margin-inline: auto; }