/* =============================================================================
   KMP Digital — Layout
   Container, Site-Header, Site-Footer, Block-Rahmen.
   ============================================================================= */

/* Container ------------------------------------------------------------- */
.container {
	width: 100%;
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--container-px);
}

/* Section Default ------------------------------------------------------- */
.section {
	padding-block: var(--block-py);
}
.section--center {
	text-align: center;
}

/* Block-Wrapper — zentrale Regel, damit kein Padding-Chaos wie in WPBakery.
   Jeder Block hat den gleichen vertikalen Rhythmus. Innere Namespaces
   überschreiben nur, wenn wirklich nötig. */
.block {
	padding-block: var(--block-py);
	position: relative;
}
.block--dark {
	background: var(--kmp-surface-dark);
	color: #fff;
}
.block--dark .eyebrow { color: rgba(255, 255, 255, 0.65); }
.block--dark a        { color: var(--kmp-purple); }

.block--light {
	background: var(--kmp-surface-light);
	color: var(--kmp-ink);
}

.block--white {
	background: #fff;
}

/* Site-Header ----------------------------------------------------------- */
.site-header {
	position: sticky;
	top: 0;
	z-index: var(--z-header);
	background: rgba(255, 255, 255, 0.88);
	backdrop-filter: saturate(140%) blur(14px);
	-webkit-backdrop-filter: saturate(140%) blur(14px);
	border-bottom: 1px solid var(--kmp-line);
}
.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-5);
	max-width: var(--container-max);
	margin-inline: auto;
	padding: var(--space-3) var(--container-px);
}
.site-header__logo {
	font-family: var(--font-display);
	font-weight: var(--fw-black);
	letter-spacing: -0.02em;
	color: var(--kmp-dark);
	text-decoration: none;
	font-size: 1.125rem;
}
.site-header__logo img { max-height: 36px; width: auto; }

.site-nav__list {
	display: flex;
	gap: var(--space-5);
	list-style: none;
	margin: 0; padding: 0;
}
.site-nav__list a {
	color: var(--kmp-ink);
	text-decoration: none;
	font-weight: var(--fw-medium);
	font-size: var(--fs-small);
	padding: var(--space-2) 0;
	transition: color var(--dur-fast);
}
.site-nav__list a:hover,
.site-nav__list .current-menu-item > a { color: var(--kmp-purple); }

.site-header__cta { white-space: nowrap; }

@media (max-width: 900px) {
	.site-nav { display: none; } /* Minimal — JS-Toggle folgt im nächsten Schritt */
}

/* Site-Footer ----------------------------------------------------------- */
.site-footer {
	background: var(--kmp-dark);
	color: rgba(255, 255, 255, 0.8);
	padding-block: var(--space-8);
	margin-top: var(--space-9);
}
.site-footer__inner {
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--container-px);
	display: grid;
	gap: var(--space-7);
	grid-template-columns: 1fr;
}
@media (min-width: 900px) {
	.site-footer__inner {
		grid-template-columns: 2fr 2fr 1fr;
		align-items: start;
	}
}
.site-footer__title { color: #fff; font-size: 1.125rem; display: block; margin-bottom: var(--space-2); }
.site-footer__claim { margin: 0; color: rgba(255, 255, 255, 0.65); max-width: 34ch; }

.site-footer__list {
	list-style: none; padding: 0; margin: 0;
	display: grid; gap: var(--space-2);
}
.site-footer__list a {
	color: rgba(255, 255, 255, 0.8);
	text-decoration: none;
}
.site-footer__list a:hover { color: var(--kmp-purple); }

.site-footer__meta {
	display: flex; flex-wrap: wrap; gap: var(--space-4);
	font-size: var(--fs-small); color: rgba(255, 255, 255, 0.55);
}
.site-footer__meta a { color: inherit; text-decoration: none; }
.site-footer__meta a:hover { color: var(--kmp-purple); }