/**
 * Glas Systeme Blocks – Design-Basis
 *
 * Eine Quelle für Farben, Schriften, Abstände und gemeinsame Bausteine
 * (Container, Buttons). Wird als Abhängigkeit jedes Block-Stylesheets geladen,
 * also nur dort, wo ein Block der Landingpage vorkommt.
 *
 * Werte aus der Vorlage lp-entwurf-glasbruch.html (eingefroren 17.09.2026).
 */

/* Schriften: selbst gehostet, SIL Open Font License (siehe assets/fonts/OFL-*.txt).
 * Stärken bewusst wie in der Vorlage eingegrenzt (Oswald 500–600, Source Sans 3 400–600):
 * Die Vorlage lädt nur diese Stärken, der Browser weicht bei „normal“ bzw. „bold“
 * auf die nächste vorhandene aus. Mit dem vollen Bereich der variablen Schrift
 * wären Telefonnummer und Kontaktleiste sichtbar schmaler (gemessen 17.09.2026). */
@font-face {
	font-family: "Oswald";
	font-style: normal;
	font-weight: 500 600;
	font-display: swap;
	src: url("../fonts/oswald-latin-variable.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Source Sans 3";
	font-style: normal;
	font-weight: 400 600;
	font-display: swap;
	src: url("../fonts/source-sans-3-latin-variable.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
	--gs-ink: #172026;
	--gs-ink-soft: #4a5860;
	--gs-paper: #fff;
	--gs-glass: #eaf6fb;
	--gs-glass-2: #d6eef7;
	--gs-line: #c9dee8;
	--gs-accent: #16a5d8;
	--gs-accent-deep: #0e7ea8;
	--gs-wa: #1ebe5d;
	--gs-wa-deep: #169a4a;
	--gs-error: #d0413a;
	--gs-font-display: "Oswald", system-ui, sans-serif;
	--gs-font-body: "Source Sans 3", system-ui, sans-serif;
	--gs-max: 1100px;
	--gs-gutter: 24px;
	--gs-radius: 6px;
	--gs-header-offset: 80px;
}

/* Grundtypografie – niedrige Spezifität, Blöcke überschreiben gezielt.
 * Wie in der Vorlage gilt die Überschriften-Regel nur für h1–h3. */
.gs-block {
	box-sizing: border-box;
	font-family: var(--gs-font-body);
	font-size: 18px;
	line-height: 1.55;
	color: var(--gs-ink);
	scroll-margin-top: var(--gs-header-offset);
}

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

.gs-block :where(h1, h2, h3) {
	font-family: var(--gs-font-display);
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: 0.005em;
	margin: 0 0 0.5em;
	color: inherit;
	text-transform: none;
}

.gs-block :where(h1) {
	font-size: clamp(2.1rem, 4.5vw, 3.4rem);
}

.gs-block :where(h2) {
	font-size: clamp(1.7rem, 3.2vw, 2.5rem);
}

.gs-block :where(h3) {
	font-size: 1.35rem;
	font-weight: 500;
}

.gs-block :where(p) {
	margin: 0 0 1em;
	max-width: 62ch;
}

.gs-block :where(a) {
	color: var(--gs-accent-deep);
}

/* Hover-Rückmeldung: sanfter Übergang für Links, Buttons und FAQ-Fragen (Wunsch René 29.09.) */
.gs-block :where(a, button, summary, .gs-btn) {
	transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, text-decoration-color 0.15s ease;
}

@media (prefers-reduced-motion: reduce) {
	.gs-block :where(a, button, summary, .gs-btn) {
		transition: none;
	}
}

.gs-block :focus-visible {
	outline: 3px solid var(--gs-accent);
	outline-offset: 3px;
}

/* Container */
.gs-wrap {
	max-width: var(--gs-max);
	margin: 0 auto;
	padding: 0 var(--gs-gutter);
}

.gs-tint {
	background: var(--gs-glass);
}

/* Buttons */
.gs-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.55em;
	font-family: var(--gs-font-display);
	font-weight: 500;
	font-size: 1.05rem;
	letter-spacing: 0.02em;
	line-height: 1;
	text-decoration: none;
	padding: 0.85em 1.4em;
	border-radius: var(--gs-radius);
	border: 2px solid transparent;
	cursor: pointer;
}

.gs-btn svg {
	width: 1.15em;
	height: 1.15em;
	fill: currentColor;
	flex: none;
}

.gs-btn--primary {
	background: var(--gs-accent);
	color: #fff;
}

.gs-btn--primary:hover {
	background: var(--gs-accent-deep);
	color: #fff;
}

.gs-btn--wa {
	background: var(--gs-wa);
	color: #fff;
}

.gs-btn--wa:hover {
	background: var(--gs-wa-deep);
	color: #fff;
}

.gs-btn--wa-outline {
	background: transparent;
	color: var(--gs-wa-deep);
	border-color: var(--gs-wa);
}

.gs-btn--wa-outline:hover {
	background: var(--gs-wa);
	color: #fff;
}

.gs-btn--ghost {
	background: transparent;
	color: var(--gs-ink);
	border-color: var(--gs-line);
}

.gs-btn--ghost:hover {
	border-color: var(--gs-ink);
}

/* Nur für Screenreader */
.gs-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;
}

/* Seitenrahmen des Landingpage-Templates (Child-Theme: page-landingpage.php) */
html:has(body.gs-landingpage) {
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html:has(body.gs-landingpage) {
		scroll-behavior: auto;
	}
}

body.gs-landingpage {
	margin: 0;
	background: var(--gs-paper);
	color: var(--gs-ink);
	font-family: var(--gs-font-body);
	font-size: 18px;
	line-height: 1.55;
	overflow-x: clip;
}

@supports not (overflow-x: clip) {
	body.gs-landingpage {
		overflow-x: hidden;
	}
}