/*
 * Design-Token und Schrift.
 *
 * Wird auf jeder Seite geladen, auch auf den eigenstaendigen
 * Landingpage-Templates. Deshalb steht hier nur, was global gelten soll:
 * Custom Properties, die Schrift und ein Minimalreset. Kein Bauteil-CSS.
 *
 * Werte stammen aus templates/template-meisterq-landingpage-v3.php.
 */

/* -------------------------------------------------------------- Schrift -- */

/*
 * Eine Familie mit vier Schnitten.
 *
 * Das Elternthema deklarierte stattdessen vier getrennte Familien
 * (AcidGrotesk-OneQrew-Book, -Medium, …). Der Schriftstapel der Landingpage
 * nennt aber "Acid Grotesk OneQrew" - ein Name, den es dort nie gab, weshalb
 * die Seite bis zum Themewechsel in Segoe UI lief. Eine Familie mit
 * Gewichtsangaben ist ausserdem das, was font-weight in den Regeln erwartet.
 */
@font-face {
	font-family: "Acid Grotesk OneQrew";
	src: url("../fonts/AcidGrotesk-OneQrew-Book.woff2") format("woff2");
	font-weight: 350;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Acid Grotesk OneQrew";
	src: url("../fonts/AcidGrotesk-OneQrew-BookItalic.woff2") format("woff2");
	font-weight: 350;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: "Acid Grotesk OneQrew";
	src: url("../fonts/AcidGrotesk-OneQrew-Medium.woff2") format("woff2");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

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

/* --------------------------------------------------------------- Token -- */

:root {
	/* Grundflaeche und Handlung. */
	--mq-dark: #190023;
	--mq-yellow: #f0f55f;
	--mq-yellow-hover: #e6ec3f;

	/*
	 * Teal in drei Abstufungen mit getrennten Aufgaben. Nie als Flaeche unter
	 * Text, nie als Knopf - Gelb bleibt die einzige Farbe des Anfassbaren.
	 *
	 *   --mq-teal        Flaeche, darauf ausschliesslich dunkler Text
	 *   --mq-teal-deep   Text und Fokusring auf hellem Grund
	 *   --mq-teal-bright Links und Hover auf dunklem Grund
	 *
	 * Kontrast, und daraus folgt, wo Teal nicht stehen darf:
	 *   #00a896 auf Weiss   2,98:1  -> nie Teal-Text auf Weiss
	 *   Weiss auf #00a896   2,98:1  -> auf Teal steht dunkler Text
	 *   #190023 auf #00a896 6,60:1  -> Normalfall auf Teal-Flaechen
	 *   #00786A auf Weiss   5,40:1  -> einziger Teal-Ton als Schrift auf Weiss
	 *   #00786A auf #190023 3,70:1  -> derselbe Ton als Fokusring auf Dunkel
	 *   Gelb auf #00a896    2,50:1  -> auf Teal-Flaechen kein Gelb
	 */
	--mq-teal: #00a896;
	--mq-teal-deep: #00786a;
	--mq-teal-bright: #2fd0bb;
	--mq-teal-tint: #d6efea;

	/* Flaechen und Text. */
	--mq-card: #463250;
	--mq-iconbg: #2d1937;
	--mq-beige: #f4f3ee;
	--mq-ink: #20221f;
	--mq-muted: #6c6c66;
	--mq-line: #868a85;
	--mq-hair: #c5c4b9;

	/* Bis 1024px Inhaltsbreite mittig, darunter 24px Rand. */
	--mq-gut: max(24px, calc((100vw - 1024px) / 2));

	--mq-font: "Acid Grotesk OneQrew", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;

	/* Kopfzeilenhoehe, auch fuer scroll-padding. */
	--mq-header-h: 80px;
}

/* -------------------------------------------------------------- Reset -- */

/*
 * Bewusst knapp. Das Elternthema brachte Tailwind-Preflight mit; davon bleibt
 * hier nur, was ohne Ersatz sichtbar kaputtginge.
 */
* {
	box-sizing: border-box;
}

body {
	margin: 0;
}

html {
	scroll-padding-top: calc(var(--mq-header-h) + 16px);
}

@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}