/*
 * Design-Tokens FLÆCHE.
 *
 * Erscheinungsbild nach der Designpräsentation "FLÆCHE Ausgabe 2" (Innphima Marketing):
 * schlicht in Schwarz und Weiß, viel Weißraum, Pink nur als Akzent.
 * Farben, Schriften, Größen und Abstände stehen ausschließlich hier; main.css greift
 * nur auf diese Variablen zu.
 *
 * Schriften: Proxima Nova (Headlines) und Helvetica Neue (Text), dieselbe
 * Grotesk-Familie, siehe Designkonzept "Typografie als Gestaltungskörper".
 * Beide Schriften sind kostenpflichtig lizenziert. Bis die Originaldateien unter
 * assets/fonts/ liegen und per @font-face eingebunden sind, greifen die
 * Systemschriften in der Fallback-Kette (kein Fremdhosting, keine Google Fonts).
 */

:root {
	/* Farben: Schwarz und Weiß, Pink nur als Akzent. Das "+" der Bildmarke ist immer Pink. */
	--f-paper: #ffffff;       /* Seitenhintergrund */
	--f-paper-2: #f5f5f5;     /* Sehr zurückhaltende Fläche, sparsam einsetzen */
	--f-paper-3: #ebebeb;     /* Hover auf Flächen, Platzhalter */
	--f-ink: #000000;         /* Text und Linien */
	--f-ink-2: #555555;       /* Nebentext (7,4:1 auf Weiß) */
	--f-ink-3: #767676;       /* Leise Angaben (4,5:1 auf Weiß) */
	--f-line: #e3e3e3;        /* Feine Linien */
	--f-accent: #e4097d;      /* PINK – exakt aus LOGO/flaeche_logo_positiv.svg; 4,5:1 auf Weiß */
	--f-accent-ink: #ffffff;  /* Text auf Pink */
	--f-accent-text: #e4097d; /* Pink für Text, erfüllt AA auf Weiß und auf Schwarz */
	--f-accent-soft: #fbdaeb; /* Textauswahl, Fokusring */
	--f-partner: #7a5d12;     /* Kennzeichnung Partnerbeitrag, bewusst nicht Pink */
	--f-ok: #2f7d32;

	/* Schwarze Flächen (Fuß, Anriss-Hinweis) */
	--f-dark: #000000;
	--f-dark-2: #111111;
	--f-dark-line: #333333;
	--f-dark-text: #ffffff;
	--f-dark-muted: #a3a3a3;
	--f-logo-bg: #272426;     /* Kacheln der Partnerlogos, passend zu den Logos aus dem Heft (helle Logos auf Dunkel) */

	/* Das Plus der Bildmarke (LOGO/innphima_plus.svg) als Grafik, damit Strichstärke und
	   Proportion überall exakt dem Logo entsprechen statt einem Schriftzeichen. */
	--f-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 386.37 386.37' fill='%23e4097d'%3E%3Crect x='188.47' width='26.48' height='386.37'/%3E%3Crect y='171.43' width='386.37' height='26.48'/%3E%3C/svg%3E");

	/* Typografie */
	--f-font-head: "Proxima Nova", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--f-font-text: "Helvetica Neue", Helvetica, Arial, -apple-system, "Segoe UI", Roboto, sans-serif;
	--f-size-00: 0.75rem;
	--f-size-0: 0.875rem;
	--f-size-1: 1rem;
	--f-size-2: 1.125rem;
	--f-size-3: 1.375rem;
	--f-size-4: clamp(1.625rem, 1.2rem + 1.4vw, 2.25rem);
	--f-size-5: clamp(2rem, 1.3rem + 2.6vw, 3.25rem);
	--f-size-6: clamp(2.5rem, 1.4rem + 4.4vw, 5rem);
	--f-size-7: clamp(3.25rem, 1.2rem + 8vw, 8.5rem);   /* Display: Ausgabentitel, Fuß-Wortmarke */
	--f-weight-head: 800;
	--f-lh-text: 1.65;
	--f-lh-head: 1.04;
	--f-track-head: -0.025em;
	--f-track-caps: 0.12em;
	--f-measure: 66ch;

	/* Abstände und Raster */
	--f-space-1: 0.5rem;
	--f-space-2: 1rem;
	--f-space-3: 1.5rem;
	--f-space-4: 3rem;
	--f-space-5: clamp(4rem, 2.5rem + 4vw, 7rem);
	--f-space-6: clamp(5rem, 3rem + 7vw, 11rem);
	--f-gutter: 1rem;
	--f-container: 80rem;
	--f-radius: 2px;
	--f-rule: 2px;            /* Kräftige Linie über Rubriken */
	--f-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
	--f-shadow-cover: 0 1px 1px rgba(0, 0, 0, 0.08), 0 12px 24px -6px rgba(0, 0, 0, 0.18), 0 32px 60px -20px rgba(0, 0, 0, 0.28);
	--f-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
	--f-header-h: 4.25rem;
}

@media (min-width: 640px) {
	:root {
		--f-gutter: 1.5rem;
	}
}

@media (min-width: 1024px) {
	:root {
		--f-gutter: 2.5rem;
		--f-header-h: 5rem;
	}
}