/* Diagnose lernen – Erscheinungsbild (Papier, Tinte, Signalgelb)
 * Signalgelb ist nur Fläche und Linie. Textakzente auf hellem Grund laufen über --dl-ocker (Kontrast auf Papier ≥ 4,5:1,
 * gemessen mit werkzeuge/kontrast.mjs). */

@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");
}
@font-face {
	font-family: "Newsreader Variable";
	font-style: normal;
	font-display: swap;
	font-weight: 200 800;
	src: url("fonts/newsreader-latin-wght-normal.woff2") format("woff2-variations");
}

:root {
	--dl-tinte: #2b2d6e;
	--dl-tinte-dunkel: #1d1f52;
	--dl-indigo: #4a4fb0;
	--dl-gelb: #f2b632;
	--dl-gelb-hell: #fdf3d7;
	--dl-ocker: #8a6200;
	--dl-link: #3a3d96;
	--dl-text: #16181f;
	--dl-grau: #5c6170;
	--dl-grau-hell: #626776;
	--dl-papier: #faf8f3;
	--dl-karte: #ffffff;
	--dl-sand: #f2efe6;
	--dl-linie: #e6e1d4;
	--dl-akzent-hell: #efeff8;
	--dl-serif: "Newsreader Variable", Georgia, "Times New Roman", serif;
	--dl-sans: "Inter Variable", system-ui, -apple-system, "Segoe UI", sans-serif;
	--dl-rahmen: 1180px;
}

html { -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	background: var(--dl-papier);
	color: var(--dl-text);
	font-family: var(--dl-sans);
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}
h1, h2, h3 {
	font-family: var(--dl-serif);
	font-weight: 500;
	letter-spacing: -0.015em;
	color: var(--dl-tinte);
}
h4, h5, h6 { font-family: var(--dl-sans); }
img { max-width: 100%; }
a { color: var(--dl-link); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { color: var(--dl-tinte); }
::selection { background: rgba(242, 182, 50, .35); }
:focus-visible { outline: 3px solid var(--dl-tinte); outline-offset: 2px; }

.dl-rahmen { max-width: var(--dl-rahmen); margin-left: auto; margin-right: auto; padding-left: 1.5rem; padding-right: 1.5rem; box-sizing: border-box; }
@media (max-width: 600px) { .dl-rahmen { padding-left: 16px; padding-right: 16px; } }
.dl-etikett {
	font-family: var(--dl-sans); font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
	color: var(--dl-grau); margin: 0 0 1.2rem;
}
.dl-etikett .dl-punkt { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--dl-gelb); margin: 0 .7em .15em; vertical-align: middle; }
.dl-etikett a { color: inherit; text-decoration: none; }
.dl-lead { font-size: 1.12rem; line-height: 1.65; color: var(--dl-grau); max-width: 36em; margin: 0 0 2rem; }
.dl-lead strong { color: var(--dl-text); font-weight: 600; }

.dl-cta {
	display: inline-flex; align-items: center; gap: .6rem; padding: .85rem 1.5rem; border-radius: 999px;
	font: inherit; font-size: .95rem; font-weight: 600; text-decoration: none !important; transition: background .15s, transform .15s; cursor: pointer;
}
.dl-cta-haupt { background: var(--dl-tinte); color: #fff !important; border: 0; }
.dl-cta-haupt:hover { background: var(--dl-tinte-dunkel); transform: translateY(-1px); }
.dl-cta-neben { color: var(--dl-tinte) !important; border: 0; border-bottom: 1px solid currentColor; border-radius: 0; padding: 0 0 .15rem; background: none; }
.dl-cta-neben:hover { color: var(--dl-link) !important; }

/* Filterknöpfe (Übersichten) */
.dl-filter { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.2rem; }
.dl-filter-knopf {
	font: inherit; font-size: .8rem; font-weight: 600; cursor: pointer; display: inline-flex; gap: .45rem; align-items: baseline;
	padding: .55rem .95rem; border-radius: 999px; border: 1px solid var(--dl-linie); background: transparent; color: var(--dl-grau);
	transition: background .15s, color .15s, border-color .15s;
}
.dl-filter-knopf span { font-weight: 400; color: var(--dl-grau-hell); }
.dl-filter-knopf:hover { border-color: var(--dl-tinte); color: var(--dl-tinte); }
.dl-filter-knopf.aktiv { background: var(--dl-tinte); border-color: var(--dl-tinte); color: #fff; }
.dl-filter-knopf.aktiv span { color: rgba(255, 255, 255, .75); }
.dl-lp-status { color: var(--dl-grau); }

/* Fußzeile */
.dl-fuss { border-top: 1px solid var(--dl-linie); margin-top: 5rem; padding: 2.4rem 0 2.8rem; color: var(--dl-grau); font-size: .88rem; text-align: center; }
.dl-fuss-marke { display: inline-flex; align-items: center; gap: .55rem; font-family: var(--dl-serif); font-size: 1.15rem; color: var(--dl-tinte); text-decoration: none; }
.dl-fuss-marke img { width: 30px; height: 30px; }
.dl-fuss-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem 1.6rem; margin: 1.2rem 0 .8rem; font-size: .74rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.dl-fuss-nav a { color: var(--dl-grau); text-decoration: none; }
.dl-fuss-nav a:hover { color: var(--dl-tinte); }
.dl-fuss-hinweis { margin: 0 auto; color: var(--dl-grau-hell); font-size: .82rem; max-width: 46em; line-height: 1.6; }
.dl-fuss-hinweis a { color: inherit; }
.dl-fuss-nachweis { margin: .45rem auto 0; color: var(--dl-grau-hell); font-size: .74rem; max-width: 60em; line-height: 1.5; }
.dl-fuss-nachweis a { color: inherit; }