/* ==========================================================================
   DESIGN-TOKENS
   Alle Farben, Schriften, Abstände und Radien an EINER Stelle.
   Farbe ändern = hier den Wert ändern, der Rest des Themes folgt automatisch.
   ========================================================================== */

/* Schriften wie im Design System (lokal gehostet, DSGVO): Space Grotesk, Inter, JetBrains Mono */
@font-face {
	font-family: "Space Grotesk";
	src: url("../fonts/space-grotesk-latin-var.woff2") format("woff2");
	font-weight: 300 700;
	font-style: normal;
	font-display: swap;
	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: "Space Grotesk";
	src: url("../fonts/space-grotesk-latin-ext-var.woff2") format("woff2");
	font-weight: 300 700;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Inter";
	src: url("../fonts/inter-latin-var.woff2") format("woff2");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
	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: "Inter";
	src: url("../fonts/inter-latin-ext-var.woff2") format("woff2");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Inter";
	src: url("../fonts/inter-latin-var-italic.woff2") format("woff2");
	font-weight: 100 900;
	font-style: italic;
	font-display: swap;
	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: "JetBrains Mono";
	src: url("../fonts/jetbrains-mono-latin-400-normal.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	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: "JetBrains Mono";
	src: url("../fonts/jetbrains-mono-latin-500-normal.woff2") format("woff2");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
	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: "JetBrains Mono";
	src: url("../fonts/jetbrains-mono-latin-700-normal.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
	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 {
	/*
	 * Farben aus dem Design System „aminolabspro“ (Tokens in Klammern).
	 * Regel der Marke: Mint ist die eine Aktionsfarbe – Text darauf immer Ink, nie Weiß.
	 */

	/* --- Farben: hell --- */
	--alp-ink: #1A1F2E;          /* ink – Überschriften, Text, Footer, dunkle Flächen */
	--alp-ink-2: #565F78;        /* ink-soft – Fließtext */
	--alp-muted: #5A6478;        /* mid – Nebentext, Labels (5,95:1 auf Weiß) */
	/* Helle Flächen wie auf aminolabspro.com (Design System: bg, bg2, bg3, line) */
	--alp-line: #E4EBF0;         /* line – Linien, Rahmen */
	--alp-line-2: #D3DCE4;       /* etwas kräftiger für Eingabefelder (aus line abgeleitet) */
	--alp-paper: #F7FAFB;        /* bg2 – getönte Abschnitte */
	--alp-paper-2: #EEF3F7;      /* bg3 – Bildgründe, noch etwas dunkler */
	--alp-surface: #FFFFFF;      /* bg – Seite, Karten, Header */
	--alp-surface-rgb: 255, 255, 255; /* dasselbe als RGB für halbtransparente Flächen */
	--alp-field: #FFFFFF;        /* Eingabefelder */

	/* --- Markenfarben --- */
	--alp-action: #6EDAB4;       /* mint – Buttons, aktive Zustände, Badges, Balken */
	--alp-action-hover: #4DC49A; /* mint-dark – Hover von Mint-Flächen */
	--alp-on-action: #1A1F2E;    /* on-mint – Text & Icons auf Mint */
	--alp-brand: #2E8B6E;        /* mint-deep – grüne Schrift, Links, Icons, Linien */
	--alp-brand-hover: #1A1F2E;  /* Links beim Überfahren: ink */
	--alp-brand-soft: #F0FBF7;   /* mint-bg – Kacheln, Chips, Hinweise */
	--alp-brand-line: #D4F3E8;   /* mint-mid – Rand von Mint-Kacheln */
	--alp-mint: #6EDAB4;         /* mint – Leuchtakzent auf dunklem Grund */

	/* --- Dunkle Abschnitte (Ink/Navy) --- */
	--alp-dark: #1A1F2E;         /* ink – Footer, dunkle Sektionen */
	--alp-dark-2: #232A3D;       /* navy-soft – erhobene Flächen auf Navy */
	--alp-dark-line: #323B52;    /* navy-line – Linien auf Navy */
	--alp-dark-text: #DDE2EC;    /* Text auf Navy */
	--alp-dark-muted: #8891A5;   /* text-muted (dunkel) */
	--alp-dark-deep: #0B1A26;    /* navy-deep – hinter dunklen Produktfotos */

	/* --- Status --- */
	--alp-ok: #2E8B6E;
	--alp-ok-soft: #F0FBF7;
	--alp-warn: #8A6F2E;         /* gold-ink */
	--alp-warn-soft: #FBF2E2;    /* amber-bg */
	--alp-warn-line: #E8A94D;    /* amber – nur als Linie */
	--alp-error: #B23A3A;
	--alp-error-soft: #FDEEEE;

	/* --- Schriften --- */
	--alp-font-display: "Space Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
	--alp-font-body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--alp-font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

	/* --- Schriftgrößen (fließend zwischen Handy und Desktop) --- */
	--alp-fs-xs: 0.75rem;
	--alp-fs-sm: 0.875rem;
	--alp-fs-base: 1rem;
	--alp-fs-md: 1.125rem;
	--alp-fs-lg: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
	--alp-fs-xl: clamp(1.6rem, 1.3rem + 1.2vw, 2.25rem);
	--alp-fs-2xl: clamp(2rem, 1.5rem + 2.2vw, 3.25rem);
	--alp-fs-3xl: clamp(2.4rem, 1.6rem + 3.6vw, 4.5rem);

	/* --- Abstände --- */
	--alp-space-1: 0.25rem;
	--alp-space-2: 0.5rem;
	--alp-space-3: 0.75rem;
	--alp-space-4: 1rem;
	--alp-space-5: 1.5rem;
	--alp-space-6: 2rem;
	--alp-space-7: 3rem;
	--alp-space-8: clamp(3.5rem, 2.5rem + 4vw, 6.5rem);   /* Abstand zwischen Abschnitten */
	--alp-gutter: clamp(1rem, 0.6rem + 2vw, 2rem);        /* Seitenrand */
	--alp-container: 1280px;

	/* --- Radien (nach Rolle) --- */
	--alp-r-sm: 6px;     /* radius-xs – Chips, Tags */
	--alp-r-md: 8px;     /* radius-sm – Buttons, Eingabefelder */
	--alp-r-lg: 16px;    /* Karten */
	--alp-r-xl: 24px;    /* große Flächen, Hero-Zertifikat */

	/* --- Schatten --- */
	--alp-shadow-sm: 0 1px 2px rgba(26, 31, 46, 0.05);
	--alp-shadow-md: 0 2px 16px rgba(26, 31, 46, 0.07);        /* shadow */
	--alp-shadow-lg: 0 8px 40px rgba(26, 31, 46, 0.11);        /* shadow-lg */
	--alp-shadow-mint: 0 6px 24px rgba(110, 218, 180, 0.35);   /* shadow-mint – Primär-Button beim Überfahren */
	--alp-shadow-card: 0 6px 32px rgba(110, 218, 180, 0.15);   /* shadow-card-hover */

	/* --- Bewegung --- */
	--alp-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
	--alp-dur: 180ms;

	/* --- Höhen fester Leisten --- */
	--alp-bottom-nav-h: 64px;
}

@media (prefers-reduced-motion: reduce) {
	:root { --alp-dur: 0ms; }
}