/*
 * Basis und Layout (v2 ksb-redesign.css Kap. 2, 3, 5, 6 – ohne .ksb-page-Scoping, ohne !important).
 */

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

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

	body {
		margin: 0;
		display: flex;
		flex-direction: column;
		min-height: 100vh;
		min-height: 100dvh;
		font-family: var(--ksb-font-text);
		font-size: var(--ksb-fs-base);
		line-height: var(--ksb-lh-text);
		color: var(--ksb-ink);
		background: var(--ksb-paper);
		-webkit-font-smoothing: antialiased;
		text-rendering: optimizeLegibility;
	}

	main {
		display: block;
		flex: 1 0 auto;
	}

	.site-footer {
		margin-top: auto;
	}

	img,
	svg,
	video {
		max-width: 100%;
	}

	img {
		display: block;
		height: auto;
	}

	a {
		color: inherit;
	}

	button,
	input,
	select,
	textarea {
		font: inherit;
		color: inherit;
	}

	button {
		cursor: pointer;
	}

	h1,
	h2,
	h3,
	h4 {
		font-family: var(--ksb-font-display);
		font-weight: 700;
		line-height: var(--ksb-lh-title);
		letter-spacing: var(--ksb-ls-title);
		color: var(--ksb-ink);
	}

	:focus-visible {
		outline: none;
		box-shadow: var(--ksb-focus);
		border-radius: var(--ksb-radius-sm);
	}

	[hidden] {
		display: none;
	}

	.skip-link {
		position: absolute;
		left: var(--ksb-space-4);
		top: -100px;
		z-index: 2000;
		padding: var(--ksb-space-2) var(--ksb-space-4);
		background: var(--ksb-ink);
		color: var(--ksb-paper);
		border-radius: var(--ksb-radius-sm);
		text-decoration: none;
	}

	.skip-link:focus {
		top: var(--ksb-space-2);
	}

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

	/* Typografie (v2 Kap. 3) */
	.eyebrow {
		margin: 0;
		font-family: var(--ksb-font-text);
		font-size: var(--ksb-fs-xs);
		font-weight: 600;
		letter-spacing: var(--ksb-ls-eyebrow);
		text-transform: uppercase;
		color: var(--ksb-gold);
	}

	.h1,
	.h2,
	.page-h1,
	.page-h2 {
		margin: 0;
		font-family: var(--ksb-font-display);
		font-weight: 700;
		letter-spacing: var(--ksb-ls-display);
		line-height: var(--ksb-lh-display);
		color: var(--ksb-ink);
		text-wrap: balance;
	}

	.h1,
	.page-h1 {
		font-size: var(--ksb-fs-h1);
	}

	.h2,
	.page-h2 {
		font-size: var(--ksb-fs-h2);
	}

	.h3 {
		margin: 0;
		font-family: var(--ksb-font-text);
		font-size: var(--ksb-fs-h3);
		font-weight: 600;
		letter-spacing: var(--ksb-ls-title);
		line-height: var(--ksb-lh-title);
		color: var(--ksb-ink);
		text-wrap: balance;
	}

	/* Akzentwort im Titel: v2 kursiv (Roboto ohne Kursiv-Schnitt → vom Browser schräg gestellt) */
	em.accent,
	.h1 em {
		font-style: italic;
		font-weight: 400;
	}

	.lede {
		margin: 0;
		font-size: var(--ksb-fs-lede);
		line-height: var(--ksb-lh-text);
		color: var(--ksb-ink-soft);
		text-wrap: pretty;
	}
}

@layer layout {
	.container {
		width: 100%;
		max-width: var(--ksb-container);
		margin-inline: auto;
		padding-inline: var(--ksb-gutter);
	}

	.section {
		padding-block: var(--ksb-section-y);
	}

	/* Platzhalter-Fläche (v2 Kap. 6) */
	.placeholder {
		position: relative;
		width: 100%;
		background: repeating-linear-gradient(135deg, var(--ksb-stripe-a) 0 14px, var(--ksb-stripe-b) 14px 28px);
		border: 1px solid var(--ksb-line);
		border-radius: var(--ksb-radius-sm);
	}

	.placeholder[data-label]::after {
		content: attr(data-label);
		position: absolute;
		left: var(--ksb-space-3);
		bottom: 10px;
		padding: var(--ksb-space-1) var(--ksb-space-2);
		font: 500 11px/1 ui-monospace, "SF Mono", Menlo, monospace;
		letter-spacing: .04em;
		color: var(--ksb-gold);
		background: rgb(255 253 247 / .85);
		border-radius: 3px;
	}
}