/* Vanguard LeadLab – Webseite.
   Farben nach dem LeadLab-Styleguide: eine Graufamilie (`gray`), ffw-rot als einzige
   Handlungsfarbe, Bereichsfarben nur als Akzentlinie, Fokus neutral. Schriften lokal. */

:root {
	--flaeche: #030712;      /* gray-950 */
	--panel: #111827;        /* gray-900 */
	--stufe: #1f2937;        /* gray-800 */
	--rand: #1f2937;         /* gray-800 */
	--rand-stark: #374151;   /* gray-700 */
	--titel: #f3f4f6;        /* gray-100 */
	--text: #e5e7eb;         /* gray-200 */
	--nebentext: #9ca3af;    /* gray-400 */
	--fokus: #9ca3af;        /* gray-400 */
	--rot: #cc0000;          /* ffw-rot */
	--rot-hover: #a30000;
	--gold: #ffb800;         /* ffw-gold – Vorbereiten */
	--gruen: #10b981;        /* emerald-500 – Auswerten */
	--radius: 12px;
	--breite: 72rem;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 5rem; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
}

body {
	margin: 0;
	background: var(--flaeche);
	color: var(--text);
	font: 400 1.0625rem/1.65 "Jost", system-ui, sans-serif;
}

img { display: block; max-width: 100%; height: auto; }

a { color: var(--titel); text-underline-offset: 3px; }

:focus-visible { outline: 2px solid var(--fokus); outline-offset: 3px; }

h1, h2, h3 { color: var(--titel); line-height: 1.2; margin: 0 0 0.6em; }
h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); font-weight: 700; letter-spacing: -0.01em; }
h3 { font-size: 1rem; font-weight: 600; margin-top: 1.6em; }

p { margin: 0 0 1em; }

.eyebrow {
	margin: 0 0 0.75rem;
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--nebentext);
}

.lead { font-size: 1.2rem; color: var(--text); }
.neben { font-size: 0.9rem; color: var(--nebentext); }

/* Kopf */
.kopf {
	position: sticky;
	top: 0;
	z-index: 10;
	background: rgba(3, 7, 18, 0.9);
	backdrop-filter: blur(8px);
	border-bottom: 1px solid var(--rand);
}

.kopf-innen {
	max-width: var(--breite);
	margin: 0 auto;
	padding: 0.75rem 1rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}

.marke {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

.navi { display: flex; align-items: center; gap: 1.5rem; }
.navi a:not(.knopf) { padding: 0.65rem 0; color: var(--nebentext); text-decoration: none; font-size: 0.95rem; }
.navi a:not(.knopf):hover { color: var(--titel); }

/* Handy: Menü-Knopf klappt die Abschnitte als Panel unter dem Kopf auf.
   Ohne Skript bleibt die Navigation offen stehen (Klasse .js setzt seite.js). */
.menue-knopf { display: none; }

@media (max-width: 760px) {
	.menue-knopf {
		display: inline-flex;
		align-items: center;
		gap: 0.6rem;
		min-height: 44px;
		padding: 0 0.9rem;
		border: 1px solid var(--rand-stark);
		border-radius: 8px;
		background: transparent;
		color: var(--titel);
		font: inherit;
		font-weight: 500;
		cursor: pointer;
	}
	.menue-strich,
	.menue-strich::before,
	.menue-strich::after {
		display: block;
		width: 18px;
		height: 2px;
		background: currentColor;
		border-radius: 1px;
	}
	.menue-strich { position: relative; }
	.menue-strich::before,
	.menue-strich::after { content: ""; position: absolute; left: 0; }
	.menue-strich::before { top: -6px; }
	.menue-strich::after { top: 6px; }
	.menue-knopf[aria-expanded="true"] .menue-strich { background: transparent; }
	.menue-knopf[aria-expanded="true"] .menue-strich::before { top: 0; transform: rotate(45deg); }
	.menue-knopf[aria-expanded="true"] .menue-strich::after { top: 0; transform: rotate(-45deg); }

	.navi {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		flex-direction: column;
		align-items: stretch;
		gap: 0.25rem;
		padding: 0.75rem 1rem 1rem;
		background: var(--panel);
		border-bottom: 1px solid var(--rand-stark);
	}
	.js .navi:not(.offen) { display: none; }
	.navi a:not(.knopf) {
		display: flex;
		align-items: center;
		min-height: 48px;
		padding: 0 0.5rem;
		border-radius: 8px;
		font-size: 1.05rem;
		color: var(--titel);
	}
	.navi a:not(.knopf):hover { background: var(--stufe); }
	.navi .knopf { margin-top: 0.5rem; min-height: 48px; }
	html:not(.js) .menue-knopf { display: none; }
}

/* Sehr schmale Geräte (iPhone SE: 320 px) */
@media (max-width: 360px) {
	.marke span { font-size: 0.95rem; }
	.abschnitt { padding-top: 3.5rem; padding-bottom: 3.5rem; }
	.paare li, .formular { padding: 1rem; }
	.knopfreihe .knopf { width: 100%; }
}

/* Knöpfe: Rot ist die Handlung */
.knopf {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0.6rem 1.4rem;
	border: 1px solid var(--rot);
	border-radius: 8px;
	background: var(--rot);
	color: #fff;
	font: inherit;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
}
.knopf:hover { background: var(--rot-hover); border-color: var(--rot-hover); }
.knopf-klein { min-height: 38px; padding: 0.4rem 1rem; font-size: 0.95rem; }
.knopf-zweit { background: transparent; border-color: var(--rand-stark); color: var(--titel); }
.knopf-zweit:hover { background: var(--stufe); border-color: var(--rand-stark); }
.knopfreihe { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.75rem; }

/* Abschnitte */
.abschnitt {
	max-width: var(--breite);
	margin: 0 auto;
	padding: 5rem 1rem;
	border-top: 1px solid var(--rand);
}
.abschnitt.start { border-top: 0; padding-top: 3.5rem; }

.titel { font-size: clamp(1.6rem, 3.2vw, 2.2rem); font-weight: 700; max-width: 40rem; margin-bottom: 2rem; }

.raster-2 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 3rem;
	align-items: center;
}
@media (max-width: 860px) {
	.raster-2 { grid-template-columns: 1fr; gap: 2rem; }
}

.bild { margin: 0; }
.bild img { border-radius: var(--radius); border: 1px solid var(--rand-stark); }
.bild figcaption { margin-top: 0.6rem; font-size: 0.9rem; color: var(--nebentext); }

/* 1 · Drei Säulen, Bereichsfarben als Akzentlinie */
.saeulen {
	list-style: none;
	padding: 0;
	margin: 4rem 0 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1rem;
}
.saeulen li {
	background: var(--panel);
	border: 1px solid var(--rand);
	border-top: 3px solid var(--akzent);
	border-radius: var(--radius);
	padding: 1.4rem 1.5rem;
}
.saeulen h2 { font-size: 1.15rem; margin-bottom: 0.4rem; }
.saeulen p { margin: 0; color: var(--nebentext); }
.saeulen .vorbereiten { --akzent: var(--gold); }
.saeulen .ueben { --akzent: var(--rot); }
.saeulen .auswerten { --akzent: var(--gruen); }

@media (max-width: 760px) {
	.saeulen { grid-template-columns: 1fr; }
}

.fakten {
	list-style: none;
	padding: 0;
	margin: 2.5rem 0 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1rem;
	color: var(--nebentext);
	font-size: 0.95rem;
}
.fakten b {
	display: block;
	font: 600 2rem/1.2 "IBM Plex Mono", monospace;
	font-variant-numeric: tabular-nums;
	color: var(--titel);
}
@media (max-width: 560px) {
	.fakten { grid-template-columns: 1fr; }
}

/* 2 · Problem und Lösung */
.paare { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.25rem; }
.paare li {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2rem;
	align-items: center;
	background: var(--panel);
	border: 1px solid var(--rand);
	border-radius: var(--radius);
	padding: 1.75rem;
}
.paare li:nth-child(even) .paar-text { order: 2; }
.paare img {
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	object-position: top left;
	border-radius: 8px;
	border: 1px solid var(--rand-stark);
}
.paare p { color: var(--nebentext); }
.paare .problem {
	display: flex;
	align-items: baseline;
	gap: 0.75rem;
	margin-bottom: 0.4rem;
	font-size: 1.3rem;
	font-weight: 600;
	color: var(--titel);
}
.paare .nr { font: 500 0.9rem "IBM Plex Mono", monospace; color: var(--nebentext); }
.paare .antwort {
	margin: 1rem 0 0;
	padding-left: 1rem;
	border-left: 3px solid var(--gruen);
	color: var(--text);
}
@media (max-width: 860px) {
	.paare li { grid-template-columns: 1fr; gap: 1.25rem; padding: 1.25rem; }
	.paare li:nth-child(even) .paar-text { order: 0; }
}

/* 3 · Referenz, 4 · Kontakt: Listen mit Haken */
.haken { list-style: none; padding: 0; margin: 1.5rem 0; }
.haken li { position: relative; padding-left: 1.75rem; margin-bottom: 0.9rem; }
.haken li::before {
	content: "";
	position: absolute;
	left: 0.15rem;
	top: 0.45em;
	width: 0.45rem;
	height: 0.8rem;
	border: solid var(--gruen);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}
.haken b { color: var(--titel); font-weight: 600; }

/* Logo-Laufband: helle Kacheln, weil die Marken für weißen Grund gemacht sind
   (Sigmaringen: Braun auf Weiß) – umfärben dürfen wir sie nicht. */
.logo-band { margin-top: 4rem; }
.logo-fenster { overflow: hidden; }
/* Weiche Kanten nur, solange das Band läuft – still stehend schnitten sie die erste Kachel an */
.logo-band.laeuft .logo-fenster {
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
@media (prefers-reduced-motion: reduce) {
	.logo-band.laeuft .logo-fenster { -webkit-mask-image: none; mask-image: none; }
}
.logo-spur {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem;
}
.logo-spur li {
	flex: none;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 15rem;
	height: 8.5rem;
	padding: 1rem;
	background: #f3f4f6;          /* gray-100 */
	border-radius: var(--radius);
}
.logo-spur img {
	max-width: 100%;
	max-height: 4.5rem;
	width: auto;
	height: auto;
	mix-blend-mode: multiply;     /* weißer Bildgrund (Stetten) verschwindet in der Kachel */
}
/* Fast-weißer Bildgrund (Stetten: 253 statt 255) stünde unter multiply als
   heller Kasten da. 1 % Helligkeit hebt ihn auf Weiß – für jedes Logo, damit ein
   neu abgelegtes keine Sonderbehandlung braucht; sichtbar ändert sich nichts. */
.logo-spur img { filter: brightness(1.01); }
/* Der Name steht im Logo schon drin – sichtbar nur, wenn das Logo fehlt,
   für Screenreader immer (das Bild hat alt=""). */
.logo-spur span {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}
.logo-spur li.ohne-bild img { display: none; }
.logo-spur li.ohne-bild span {
	position: static;
	width: auto;
	height: auto;
	overflow: visible;
	clip-path: none;
	white-space: normal;
	font-size: 1.15rem;
	font-weight: 600;
	text-align: center;
	color: #111827;               /* gray-900 */
}

/* Läuft nur mit Skript (.laeuft) und ohne „Bewegung reduzieren“ */
.logo-band.laeuft .logo-spur {
	flex-wrap: nowrap;
	width: max-content;
	animation: logo-lauf var(--dauer, 30s) linear infinite;
}
.logo-band.laeuft .logo-fenster:hover .logo-spur,
.logo-band.laeuft .logo-fenster:focus-within .logo-spur { animation-play-state: paused; }
@keyframes logo-lauf {
	to { transform: translateX(calc(-50% - 0.625rem)); }  /* eine Hälfte + halbe Lücke */
}
@media (prefers-reduced-motion: reduce) {
	.logo-band.laeuft .logo-spur { animation: none; }
}
@media (max-width: 560px) {
	.logo-spur li { width: 12rem; height: 7rem; }
}

/* Formular */
.formular {
	display: grid;
	gap: 1rem;
	background: var(--panel);
	border: 1px solid var(--rand);
	border-radius: var(--radius);
	padding: 1.75rem;
}
.formular label { display: grid; gap: 0.35rem; font-size: 0.9rem; font-weight: 500; color: var(--titel); }
.formular input, .formular select, .formular textarea {
	width: 100%;
	min-height: 44px;
	padding: 0.6rem 0.75rem;
	border: 1px solid var(--rand-stark);
	border-radius: 8px;
	background: var(--flaeche);
	color: var(--titel);
	font: inherit;
	font-weight: 400;
}
.formular input:focus-visible, .formular select:focus-visible, .formular textarea:focus-visible {
	outline: 2px solid var(--fokus);
	outline-offset: 1px;
}
.formular .neben { margin: 0; }

/* 5 · Impressum */
.impressum .raster-2 { align-items: start; }
.impressum h3:first-child { margin-top: 0; }
.impressum p { color: var(--nebentext); }

/* E-Mail im Impressum: Einschübe gegen Sammel-Bots, unsichtbar und nicht kopierbar */
.adresse .tarn { display: none; }

/* Textknopf „Adresse anzeigen“ (ohne Skript zwecklos, dann gilt der noscript-Zweig) */
html:not(.js) [data-adresse-zeigen] { display: none; }
.textknopf {
	padding: 0;
	border: 0;
	background: none;
	color: var(--titel);
	font: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}
.mit-knopf, .neben:has(.textknopf) { min-height: 44px; display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; }

/* Honigtopf: aus dem Bild geschoben statt display:none – manche Bots
   überspringen ausdrücklich versteckte Felder, dieses füllen sie aus. */
.honigtopf {
	position: absolute;
	left: -10000px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Prüf-Dialog */
.pruefung {
	width: min(26rem, calc(100vw - 2rem));
	padding: 1.75rem;
	border: 1px solid var(--rand-stark);
	border-radius: var(--radius);
	background: var(--panel);
	color: var(--text);
}
.pruefung::backdrop { background: rgba(3, 7, 18, 0.75); }
.pruefung h2 { font-size: 1.25rem; }
.pruefung p { color: var(--nebentext); }
.pruefung label { display: grid; gap: 0.5rem; font-weight: 500; color: var(--titel); }
.pruefung input {
	min-height: 44px;
	padding: 0.6rem 0.75rem;
	border: 1px solid var(--rand-stark);
	border-radius: 8px;
	background: var(--flaeche);
	color: var(--titel);
	font: inherit;
}
.pruefung .knopfreihe { margin-top: 1.25rem; }
.pruefung-fehler { margin: 0.75rem 0 0; color: #f87171; } /* red-400 */

/* Fuß */
.fuss {
	max-width: var(--breite);
	margin: 0 auto;
	padding: 2rem 1rem 3rem;
	border-top: 1px solid var(--rand);
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 1rem;
	font-size: 0.9rem;
	color: var(--nebentext);
}
.fuss a { color: var(--nebentext); }