/* =============================================================================
   KMP Digital — Base
   Moderner, schlanker Reset + globale Typografie.
   ============================================================================= */

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

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

body {
	margin: 0;
	font-family: var(--font-body);
	font-size: var(--fs-body);
	line-height: var(--lh-normal);
	color: var(--kmp-ink);
	background: var(--kmp-white);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

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

a {
	color: var(--kmp-purple);
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--kmp-dark); }

/* Buttons erben nicht die Link-Hover-Farbe */
a.btn:hover,
a[class*="__cta"]:hover,
a[class*="__btn"]:hover { color: inherit; }

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-display);
	font-weight: var(--fw-bold);
	line-height: var(--lh-tight);
	letter-spacing: -0.01em;
	margin: 0 0 var(--space-4);
	color: inherit;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }

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

/* Utility: für Screenreader sichtbar, visuell versteckt */
.screen-reader-text {
	border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);
	height: 1px; width: 1px; overflow: hidden; position: absolute !important;
	word-wrap: normal !important;
}

.skip-link:focus {
	position: absolute; top: 1rem; left: 1rem;
	background: var(--kmp-dark); color: #fff; padding: .75rem 1rem;
	border-radius: var(--r-md); z-index: 1000;
}

/* Form-Elemente — minimaler Reset */
button, input, select, textarea {
	font: inherit;
	color: inherit;
}
button { cursor: pointer; background: none; border: 0; padding: 0; }

/* Hairline-Utility */
hr {
	border: 0; height: 1px; background: var(--kmp-line); margin: var(--space-6) 0;
}

/* Fokus konsistent */
:focus-visible {
	outline: 2px solid var(--kmp-purple);
	outline-offset: 2px;
	border-radius: var(--r-sm);
}

/* Eyebrow-Label (wiederkehrendes Muster über der H1/H2) */
.eyebrow {
	font-size: var(--fs-eyebrow);
	font-weight: var(--fw-bold);
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--kmp-purple);
	margin: 0 0 var(--space-3);
}

/* Display-Klassen für Hero-Headlines */
.display {
	font-family: var(--font-display);
	font-size: var(--fs-display);
	line-height: var(--lh-tight);
	font-weight: var(--fw-black);
	letter-spacing: -0.02em;
	margin: 0 0 var(--space-5);
}
.lead {
	font-size: var(--fs-lead);
	line-height: var(--lh-loose);
	color: var(--kmp-ink-2);
	margin: 0 0 var(--space-6);
	max-width: 62ch;
}

/* Prose-Block (für WYSIWYG / SEO-Texte) */
.prose {
	max-width: 72ch;
	color: var(--kmp-ink);
	line-height: var(--lh-loose);
}
.prose > * + * { margin-top: var(--space-4); }
.prose h2 { font-size: var(--fs-h2); margin-top: var(--space-7); }
.prose h3 { font-size: var(--fs-h3); margin-top: var(--space-6); }
.prose ul,
.prose ol { padding-left: 1.25rem; margin: 0 0 var(--space-4); }
.prose li + li { margin-top: var(--space-2); }
.prose a { text-decoration: underline; }
.prose img { border-radius: var(--r-md); margin: var(--space-5) 0; }
.prose blockquote {
	border-left: 3px solid var(--kmp-purple);
	padding-left: var(--space-4);
	color: var(--kmp-ink-2);
	font-style: italic;
	margin: var(--space-5) 0;
}