/* Abgeleitet von ellprex/digipost_ui frontend/src/tokens.css, aber KEINE
 * reine Kopie: den Block "Website-Geometrie" (--container-schmal, --hoehe-kopf,
 * --abstand-abschnitt, --h1-web/--h2-web/--h3-web) gibt es nur hier, die SPA
 * kennt ihn nicht (SCHNITT-NACHTRAG-5 N5.7/N5.8). Alles andere ist gespiegelt:
 * Aenderungen daran in beiden Dateien, nur nach Manager-Freigabe
 * (SCHNITT.md Abschnitt 4). Die Schriften bindet schrift.css ein. */

/* Digipost — Designtokens, woertlich von lettershop.de abgelesen.
 *
 * Quelle: Recherche-2026-09-27/R1-lettershop-ui.md Abschnitt (d), Belege [CSS].
 * Diese Datei ist Teil des Schnitts: Werte hier aendern nur nach Manager-Freigabe.
 * Espresso-Tokens von frappe-ui werden NICHT umdefiniert -- Digipost setzt eigene
 * Variablen daneben, weil die Espresso-Namen zwischen v1 und v2 brechen.
 * Gelb ist der einzige Akzent. Keine Schatten, keine Verlaeufe.
 */

:root {
	/* Blau */
	--blue-night: #002a4d; /* Fliesstext */
	--blue-dark: #003f73; /* H2/H5, Knopfrand und -text, Betraege */
	--blue-medium: #436e9c; /* Hero, Schrittleiste */
	--blue-light: #4eb9ff;

	/* Akzent und Signale */
	--yellow: #ffcc40; /* einziger Akzent, auch Knopf-Hover */
	--green: #23b93c;
	--red: #f95959;

	/* Flaechen */
	--white: #ffffff;
	--white-50: rgba(255, 255, 255, 0.5);

	/* Graustufen */
	--grey-light: #edf2f7; /* Feldhintergrund */
	--grey-regular: #e1e8f0; /* Rahmen deaktiviert */
	--grey-regular-50: rgba(225, 232, 240, 0.5);
	--grey-regular-70: rgba(225, 232, 240, 0.7);
	--grey-semidark: #d1dceb; /* Seitenhintergrund Konfigurator */
	--grey-semidark-50: rgba(209, 220, 235, 0.5);
	--grey-medium: #bfccdb;
	--grey-medium-50: rgba(191, 204, 219, 0.5);
	--grey-medium-55: rgba(191, 204, 219, 0.55);
	--grey-midnight: #405a78; /* Formular-Labels */
	--grey-night: #4a5f72; /* Feldtext */
	--grey-dark: #6b7c8c; /* Sekundaertext */
	--grey-dark-50: rgba(107, 124, 140, 0.5);
	--black: #000000;

	/* Geometrie */
	--container: 1500px;
	--spalte-formular: 950px;
	--spalte-warenkorb: 435px;
	--radius-karte: 10px;
	--radius-feld: 5px;
	--radius-knopf: 20px;
	--radius-knopf-hero: 25px;
	--padding-karte: 30px;
	--abstand-karte: 40px;
	--hoehe-feld: 55px;
	--hoehe-knopf: 40px;
	--hoehe-knopf-hero: 50px;
	--hoehe-schrittleiste: 60px;
	--breite-label: 300px;

	/* Website-Geometrie (P6-G, gemessen an lettershop.de/css/main.css am
	 * 27.09.2026). Nur ergaenzt, kein bestehender Wert geaendert. */
	--container-schmal: 1340px; /* Hero-Banner, Fuss */
	--hoehe-kopf: 130px; /* div.head */
	--abstand-abschnitt: 100px; /* div.main padding oben/unten */
	--h1-web: 60px;
	--h2-web: 40px;
	--h3-web: 32px;
}

/* Schrift: zwei selbst gehostete Familien, Gewicht immer normal, Schnitt ueber
 * die eigene Familie. Auf der Website liegen die woff2-Dateien unter
 * digipost_web/public/fonts/ und werden in schrift.css per @font-face
 * eingebunden, nicht hier. */
:root {
	--font-h1: 'PJS-EB', system-ui, sans-serif; /* Plus Jakarta Sans ExtraBold */
	--font-h: 'PJS-B', system-ui, sans-serif; /* Bold: H4, H5, Schrittleiste */
	--font-label: 'PJS-SB', system-ui, sans-serif; /* SemiBold: Formular-Labels */
	--font-body: 'SS-R', system-ui, sans-serif; /* Source Sans Regular */
	--font-knopf: 'SS-SB', system-ui, sans-serif; /* SemiBold: Knoepfe, Links */
}

body {
	margin: 0;
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.4;
	color: var(--blue-night);
	background: var(--white);
}

h1 {
	font-family: var(--font-h1);
	font-size: 40px;
	line-height: 1;
	margin: 0 0 20px;
	color: var(--white);
}

h2 {
	font-family: var(--font-h1);
	font-size: 34px;
	line-height: 1.2;
	margin: 10px 0 30px;
	color: var(--blue-dark);
}

h4 {
	font-family: var(--font-h);
	font-size: 24px;
	line-height: 1.3;
	margin: 10px 0;
}

h5 {
	font-family: var(--font-h);
	font-size: 20px;
	line-height: 1.3;
	margin: 10px 0;
	color: var(--blue-dark);
}

p {
	font-family: var(--font-body);
	font-size: 14px;
	line-height: 1;
	margin: 0;
	color: var(--blue-night);
}

.dp-center {
	max-width: var(--container);
	margin: 0 auto;
}

/* Karte: weiss, 10 px, 30 px Padding, kein Schatten, kein Rahmen. */
.dp-karte {
	background: var(--white);
	border-radius: var(--radius-karte);
	padding: var(--padding-karte);
	margin-top: var(--abstand-karte);
}

/* Formularzeile: Label 300 px rechtsbuendig, Feld fuellt den Rest. */
.dp-zeile {
	display: flex;
	margin-top: 10px;
}

.dp-zeile > label {
	width: var(--breite-label);
	flex: 0 0 var(--breite-label);
	text-align: right;
	padding: 15px 20px 0 0;
	font-family: var(--font-label);
	font-size: 18px;
	color: var(--grey-midnight);
}

.dp-feld,
.dp-zeile input[type='text'],
.dp-zeile input[type='number'],
.dp-zeile select {
	background: var(--grey-light);
	color: var(--grey-night);
	border: none;
	border-radius: var(--radius-feld);
	height: var(--hoehe-feld);
	font-family: var(--font-body);
	font-size: 18px;
	padding: 15px 20px;
	box-sizing: border-box;
	flex: 1 1 auto;
}

.dp-zeile select {
	padding-right: 40px;
	appearance: none;
}

/* Knopf: weiss mit blauem Rand, Pfeil rechts, Hover gelb. */
.dp-knopf {
	height: var(--hoehe-knopf);
	box-sizing: border-box;
	/* inline-flex + align-items statt padding-top: der Text sitzt unabhaengig von
	 * Schriftmetrik und Zoom mittig (UI-Schliff 28.09., vorher 11 px padding-top). */
	display: inline-flex;
	align-items: center;
	gap: 8px;
	vertical-align: middle;
	font-family: var(--font-knopf);
	font-size: 18px;
	line-height: 1;
	white-space: nowrap;
	text-decoration: none;
	padding: 0 50px 0 20px;
	border-radius: var(--radius-knopf);
	color: var(--blue-dark);
	border: 1px solid var(--blue-dark);
	background: var(--white);
	cursor: pointer;
	position: relative;
}

.dp-knopf:focus-visible {
	outline: 2px solid var(--blue-dark);
	outline-offset: 2px;
}

.dp-knopf:hover {
	color: var(--blue-night);
	background-color: var(--yellow);
}

.dp-knopf:disabled {
	opacity: 0.5;
	cursor: default;
	background-color: var(--white);
	color: var(--grey-dark);
	border-color: var(--grey-regular);
}

.dp-knopf--ohne-pfeil {
	padding: 0 20px;
}

/* Schrittleiste: fuenf gleiche Spalten, 2 px Luecke, 4 px Unterbalken.
 * weiss = offen, --blue-dark = aktiv, --yellow = erledigt. */
.dp-schritte {
	height: var(--hoehe-schrittleiste);
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	column-gap: 2px;
	background: var(--blue-medium);
	font-family: var(--font-h);
	font-size: 18px;
	color: var(--white);
}

.dp-schritt {
	display: flex;
	align-items: center;
	justify-content: center;
	border-bottom: 4px solid var(--white);
}

.dp-schritt--aktiv {
	border-bottom-color: var(--blue-dark);
}

.dp-schritt--erledigt {
	border-bottom-color: var(--yellow);
}

/* Warenkorb: gelber Kopf, weisser Koerper. */
.dp-warenkorb {
	font-family: var(--font-body);
	font-size: 18px;
	color: var(--grey-dark);
	width: var(--spalte-warenkorb);
}

.dp-warenkorb b,
.dp-warenkorb strong,
.dp-warenkorb h5 {
	color: var(--blue-dark);
}

.dp-warenkorb-kopf {
	background: var(--yellow);
	border-radius: var(--radius-karte) var(--radius-karte) 0 0;
	padding: 20px 30px;
}

.dp-warenkorb-koerper {
	background: var(--white);
	padding: 30px;
}

/* Flaechen-Modifier wie im Original. */
.dp-bg-weiss {
	background: var(--white);
}
.dp-bg-hell {
	background: var(--grey-light);
}
.dp-bg-mittel {
	background: var(--grey-semidark);
}
.dp-bg-gelb {
	background: var(--yellow);
}

/* Breakpoints: 100-px-Raster, ab 1560 alle Container auf 100 % + 30 px.
 * Letzter Stopp 340 px. */
@media screen and (max-width: 1560px) {
	.dp-center {
		max-width: 100%;
		padding: 0 30px;
	}
}

@media screen and (max-width: 1040px) {
	.dp-zeile {
		display: block;
	}
	.dp-zeile > label {
		width: auto;
		flex: none;
		text-align: left;
		padding: 0 0 5px 0;
		display: block;
	}
	.dp-karte {
		padding: 20px;
		margin-top: 20px;
	}
	.dp-warenkorb {
		width: 100%;
	}
	.dp-knopf {
		font-size: 17px;
	}
}

@media screen and (max-width: 640px) {
	.dp-knopf {
		font-size: 16px;
	}
	.dp-schritte {
		font-size: 14px;
	}
}