/* Design-Tokens nach Referenzentwurf. Maße in px gelten bei 1440 px Breite. */

@font-face {
	font-family: "Montserrat Variable";
	font-style: normal;
	font-display: swap;
	font-weight: 100 900;
	src: url("../fonts/montserrat-latin-wght-normal.woff2") format("woff2-variations");
	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 Variable";
	font-style: normal;
	font-display: swap;
	font-weight: 100 900;
	src: url("../fonts/inter-latin-wght-normal.woff2") format("woff2-variations");
	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 {
	/* Flächen, gemessen im Entwurf */
	--tl-nacht: #00070e;          /* Kopfbereich */
	--tl-nacht-2: #000d16;        /* Kundenstimmen */
	--tl-nacht-3: #000b14;        /* Fuß */
	--tl-leiste: #03101a;         /* Systemleiste */
	--tl-karte-dunkel: #0b1a29;   /* Lösungskarten */
	--tl-karte-glas: #081a29;     /* Kundenstimmen-Karten */
	--tl-hell: #f4f7fa;           /* Lösungen */
	--tl-weiss: #ffffff;

	/* Farben */
	--tl-blau: #00a7fe;           /* Knöpfe, nur mit dunkler Schrift (7,6:1) */
	--tl-blau-titel: #0aa6f0;     /* Überschrift auf Dunkel (7,2:1) */
	--tl-blau-text: #0073c2;      /* Blau als Text auf Hell (4,7:1) */
	--tl-blau-hell: #3cb8ff;      /* Überzeilen auf Dunkel */
	--tl-rot: #e5242c;
	--tl-rot-hell: #ff3b47;
	--tl-tinte: #08111b;          /* Text auf Hell und auf Blau */
	--tl-text-hell: #e7edf3;      /* Fließtext auf Dunkel */
	--tl-grau-dunkel: #9aa6b4;    /* Nebentext auf Dunkel */
	--tl-grau-hell: #4a5563;      /* Nebentext auf Hell */
	--tl-linie-dunkel: rgba(255, 255, 255, 0.14);

	--tl-band: linear-gradient(90deg, #0191e9 0%, #017ac8 10%, #0762a6 20%, #0d497f 30%, #1a3860 40%, #282f4d 50%, #4a2c43 60%, #702a3b 70%, #9e2d3a 80%, #bd2f3a 90%, #e5333c 100%);
	--tl-band-abschluss: linear-gradient(90deg, #0170bc 0%, #01508c 10%, #01437b 20%, #01457d 30%, #034275 40%, #112e57 50%, #242746 60%, #652a43 70%, #862535 80%, #b22632 90%, #f6313a 100%);

	/* Schrift */
	--tl-schrift-titel: "Montserrat Variable", "Montserrat", ui-sans-serif, system-ui, sans-serif;
	--tl-schrift: "Inter Variable", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

	/* Raster */
	--tl-breite: 1440px;
	--tl-rand-l: 70px;
	--tl-rand-r: 40px;
	--tl-radius: 6px;
	--tl-radius-karte: 8px;
	--tl-ziel: 44px;

	/* Bewegung */
	--tl-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--tl-dauer: 0.6s;
}