@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/inter/Inter-Regular.woff2") format("woff2");
}

@font-face {
	font-family: "Inter";
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/inter/Inter-Italic.woff2") format("woff2");
}

@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("../fonts/inter/Inter-SemiBold.woff2") format("woff2");
}

@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("../fonts/inter/Inter-Bold.woff2") format("woff2");
}

/* ---------------------------------------------------------------------
 * Theme Foundation (Phase 1B)
 * Mobile-first, ohne Framework und mit lokalen statischen Inter-Schnitten.
 * Deckt bewusst nur globale Tokens und Basiselemente ab.
 * ------------------------------------------------------------------ */

:root {
	--fk-color-brand-navy: #102a56;
	--fk-color-brand-cyan: #03c3ee;
	--fk-color-brand-blue: #2161e8;
	--fk-color-brand-blue-dark: #1749b5;
	--fk-color-brand-blue-light: #eaf2ff;
	--fk-color-brand-blue-soft: #f4f8ff;
	--fk-color-brand: var(--fk-color-brand-navy);
	--fk-color-accent: var(--fk-color-brand-blue);
	--fk-color-white: #ffffff;
	--fk-color-black: #000000;
	--fk-color-text: #18263d;
	--fk-color-heading: #102a56;
	--fk-color-text-muted: #52637a;
	--fk-color-background: #f4f8ff;
	--fk-color-surface: #ffffff;
	--fk-color-surface-subtle: #f4f8ff;
	--fk-color-border: #d7e0ed;
	--fk-color-border-strong: #9baec5;
	--fk-color-link: var(--fk-color-brand-blue-dark);
	--fk-color-focus: var(--fk-color-brand-blue);
	--fk-color-danger: #b42318;
	--fk-color-danger-surface: #fef3f2;
	--fk-color-warning: #934f00;
	--fk-color-warning-surface: #fff7e6;
	--fk-color-success: #067647;
	--fk-color-success-surface: #ecfdf3;
	--fk-color-info: #175cd3;
	--fk-color-info-surface: #eff8ff;
	--fk-font-sans: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--fk-space-1: 0.25rem;
	--fk-space-2: 0.5rem;
	--fk-space-3: 0.75rem;
	--fk-space-4: 1rem;
	--fk-space-5: 1.25rem;
	--fk-space-6: 1.5rem;
	--fk-space-8: 2rem;
	--fk-space-10: 2.5rem;
	--fk-space-12: 3rem;
	--fk-space-16: 4rem;
	--fk-space-20: 5rem;
	--fk-radius-sm: 0.25rem;
	--fk-radius-md: 0.5rem;
	--fk-radius-lg: 0.75rem;
	--fk-radius-card: 0.875rem;
	--fk-border-width: 1px;
	--fk-shadow-subtle: 0 1px 2px rgba(16, 42, 86, 0.08);
	--fk-layout-page-max: 75rem;
	--fk-layout-page-wide-max: 80rem;
	--fk-layout-reading-max: 48rem;
	--fk-layout-gutter: 1rem;
	--fk-layout-gutter-tablet: 1.5rem;
	--fk-size-interactive-min: 2.75rem;
	--fk-size-control: 3rem;
	--fk-size-control-large: 3.5rem;
	--fk-font-size-body: 1rem;
	--fk-font-size-lead: 1.125rem;
	--fk-font-size-h1: 2rem;
	--fk-font-size-h1-desktop: 2.75rem;
	--fk-font-size-h2: 1.75rem;
	--fk-font-size-h2-desktop: 2rem;
	--fk-font-size-display: 2.375rem;
	--fk-font-size-display-desktop: 3.25rem;
	--fk-transition-duration: 160ms;
	--fk-transition-timing: ease;
}

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

html {
	-webkit-text-size-adjust: 100%;
	background-color: var(--fk-color-background);
}

body {
	margin: 0;
	font-family: var(--fk-font-sans);
	font-size: var(--fk-font-size-body);
	line-height: 1.5;
	color: var(--fk-color-text);
	background-color: var(--fk-color-background);
}

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

img,
picture,
video,
canvas,
svg {
	display: block;
}

body h1,
body h2,
body h3,
body h4,
body h5,
body h6 {
	margin-top: 0;
	color: var(--fk-color-heading);
	line-height: 1.2;
	letter-spacing: -0.01em;
}

body h1 {
	font-size: var(--fk-font-size-h1);
}

body h2 {
	font-size: var(--fk-font-size-h2);
}

body h3 {
	font-size: 1.25rem;
}

p,
ul,
ol {
	margin-top: 0;
}

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

button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
	min-height: var(--fk-size-control);
	padding: var(--fk-space-2) var(--fk-space-4);
	border: var(--fk-border-width) solid var(--fk-color-brand-blue);
	border-radius: var(--fk-radius-md);
	color: var(--fk-color-white);
	background-color: var(--fk-color-brand-blue);
	font-weight: 600;
	line-height: 1.25;
	cursor: pointer;
	transition: background-color var(--fk-transition-duration) var(--fk-transition-timing), border-color var(--fk-transition-duration) var(--fk-transition-timing), color var(--fk-transition-duration) var(--fk-transition-timing);
}

button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
	border-color: var(--fk-color-brand-blue-dark);
	background-color: var(--fk-color-brand-blue-dark);
}

button:active,
input[type="button"]:active,
input[type="reset"]:active,
input[type="submit"]:active {
	background-color: var(--fk-color-brand-navy);
}

button:disabled,
input[type="button"]:disabled,
input[type="reset"]:disabled,
input[type="submit"]:disabled,
input:disabled,
select:disabled,
textarea:disabled {
	cursor: not-allowed;
	opacity: 0.55;
}

input:not([type]),
input[type="email"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="text"],
input[type="url"],
select,
textarea {
	width: 100%;
	min-height: var(--fk-size-control);
	padding: var(--fk-space-2) var(--fk-space-3);
	border: var(--fk-border-width) solid var(--fk-color-border-strong);
	border-radius: var(--fk-radius-md);
	color: var(--fk-color-text);
	background-color: var(--fk-color-surface);
	font-size: 1rem;
	line-height: 1.5;
}

textarea {
	min-height: 7.5rem;
	resize: vertical;
}

a {
	color: var(--fk-color-link);
	text-decoration: underline;
	transition: color var(--fk-transition-duration) var(--fk-transition-timing);
}

a:hover {
	color: var(--fk-color-brand-blue-dark);
	text-decoration-thickness: 0.14em;
	text-underline-offset: 0.16em;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
	outline: 3px solid var(--fk-color-focus);
	outline-offset: 3px;
}

@media (min-width: 37.5rem) {
	:root {
		--fk-font-size-h1: 2.5rem;
	}
}

@media (min-width: 48rem) {
	:root {
		--fk-layout-gutter: var(--fk-layout-gutter-tablet);
		--fk-font-size-h2: var(--fk-font-size-h2-desktop);
	}
}

@media (min-width: 64rem) {
	:root {
		--fk-font-size-h1: var(--fk-font-size-h1-desktop);
		--fk-font-size-display: var(--fk-font-size-display-desktop);
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		scroll-behavior: auto;
		transition-duration: 0.01ms;
		animation-duration: 0.01ms;
		animation-iteration-count: 1;
	}
}