/* ERZEUGT von framework/w1/bau_w1.py aus ci-neu/tokens-ci.css – nicht von Hand ändern.
   Welle 1 (21.10.2026): Werte der neuen CI auf :root für alle Seiten. */

/* ==========================================================================
   paladinum Soldatenservice — Corporate Design 2026 (C1, Mauritz 01.10.2026)
   Ersetzt in Welle 1 (21.10.) die Werte in vorlage/framework/tokens.css.
   Namen bleiben gleich (--ps-*), damit Bausteine B-01–B-21 unverändert laufen.
   Quelle der Farbwerte: skripte/farben.py (Kontraste dort gerechnet).
   ========================================================================== */


:root {
	/* --- Grundfarben ------------------------------------------------------ */
	/* Navy = Dachmarke paladinum (gemessen im Vektorlogo #1E2748) */
	--ps-navy-950: #141A33;
	--ps-navy: #1E2748;
	--ps-navy-soft: #343E62;
	--ps-grau-600: #575E73;
	--ps-grau-300: #C9CDD6;
	--ps-grau-100: #EEF0F4;
	--ps-white: #FFFFFF;
	/* Bronzegrün = Untermarke Soldatenservice (RAL 6031 F9 ≈ #495746) */
	--ps-bronze-900: #2C3529;
	--ps-bronze-700: #495746;
	--ps-bronze-500: #56694A;
	--ps-bronze-300: #A9B793;
	--ps-bronze-100: #E7EBE0;
	/* Sand (Anmutung RAL 1039 F9): Akzentflächen, nie Seitengrund */
	--ps-sand-500: #C6B48C;
	--ps-sand-300: #E2D6BA;
	--ps-sand-100: #F3EEE2;
	/* Blau = Handlung (paladinum-Blau aus dem Logo #105681) */
	--ps-blue: #105681;
	--ps-blue-dark: #0B4466;
	--ps-blue-100: #E2EDF4;
	/* Messing: nur Pixelmotiv ≤ 32 px (ⓘ-Münze, Truhe). ΔE2000 ≥ 10 zu jedem GA-Gold */
	--ps-messing: #8E8440;
	--ps-messing-licht: #DCD3A0;
	--ps-fehler: #A3262A;

	/* Alte Namen → neue Werte (Übergang, damit Bestand nicht bricht) */
	--ps-blue-light: var(--ps-blue);          /* war #2380b8; nicht mehr verwenden */
	--ps-green: var(--ps-bronze-700);
	--ps-green-light: var(--ps-bronze-300);
	--ps-green-dark: var(--ps-bronze-900);
	--ps-oliv-mid: var(--ps-bronze-500);
	--ps-off: var(--ps-grau-100);
	--ps-off-2: #E3E6EC;
	--ps-text: var(--ps-navy);
	--ps-muted: var(--ps-grau-600);
	--ps-border: rgba(30, 39, 72, 0.14);
	--ps-gold: var(--ps-messing);             /* Gold entfällt (C3): Messing statt GA-Gold */
	--ps-sand: var(--ps-sand-300);
	--ps-sand-dark: var(--ps-sand-500);
	--ps-creme: var(--ps-sand-100);           /* nur Pixelwelt „voll“ */

	/* --- Rollen ----------------------------------------------------------- */
	--ps-farbe-text: var(--ps-navy);                 /* 14,59 auf Weiß */
	--ps-farbe-kopf: var(--ps-navy);
	--ps-farbe-leise: var(--ps-grau-600);            /* 6,45 auf Weiß, 5,66 auf Grau-100 */
	--ps-farbe-marke: var(--ps-bronze-700);          /* Untermarke: Deskriptor, Markenakzent, 7,68 auf Weiß */
	--ps-farbe-link: var(--ps-blue);                 /* 7,86 */
	--ps-farbe-link-hover: var(--ps-blue-dark);
	--ps-farbe-aktion: var(--ps-blue);               /* Primärknopf, Weiß darauf 7,86 */
	--ps-farbe-aktion-hover: var(--ps-blue-dark);    /* Weiß darauf 10,33 (E4: dunkler) */
	--ps-farbe-flaeche: var(--ps-white);
	--ps-farbe-flaeche-2: var(--ps-grau-100);        /* kühle Fläche: Tabellen, Formular */
	--ps-farbe-flaeche-3: var(--ps-off-2);
	--ps-farbe-flaeche-marke: var(--ps-bronze-100);  /* Markenfläche hell: Faktenleiste, Merkkasten */
	--ps-farbe-flaeche-warm: var(--ps-sand-100);     /* warme Fläche: Ergebnis, Zitat. Nie Seitengrund */
	--ps-farbe-dunkel: var(--ps-navy);               /* dunkle Bänder, Beratungsblock */
	--ps-farbe-dunkel-marke: var(--ps-bronze-900);   /* Nacht-Bronze: bevorzugte dunkle Hausfläche (Kopf, og:image, CTA, Social) */
	--ps-farbe-auf-dunkel: var(--ps-white);
	--ps-farbe-auf-dunkel-leise: var(--ps-bronze-300); /* 6,87 auf Navy; auf Weiß nie */
	--ps-farbe-rand: var(--ps-border);
	--ps-farbe-erledigt: var(--ps-bronze-700);       /* Haken, verdient */
	--ps-farbe-hinweis: var(--ps-messing);           /* ⓘ-Münze */
	--ps-farbe-fokus: var(--ps-blue);
	--ps-farbe-fehler: var(--ps-fehler);

	/* --- Schrift ---------------------------------------------------------- */
	--ps-font-head: "Barlow Semi Condensed", "Barlow", "Arial Narrow", Arial, sans-serif;
	--ps-font-body: "Barlow", Arial, sans-serif;
	--ps-font-zahl: "Barlow Semi Condensed", "Barlow", Arial, sans-serif; /* Beträge, tabellarische Ziffern */
	--ps-font-pixel: "Pixelify Sans", "Courier New", monospace;  /* nur Kleinstes in der Pixelwelt, nie Zahlen */
	--ps-font-pixel-kopf: "Pixelify Sans", "Courier New", monospace; /* Silkscreen entfällt */

	--ps-gr-h1: clamp(36px, 4.4vw, 58px);
	--ps-gr-abschnitt: clamp(28px, 3vw, 42px);
	--ps-gr-h2: clamp(24px, 2.2vw, 30px);
	--ps-gr-h3: 21px;
	--ps-gr-h4: 18px;
	--ps-gr-lead: 19px;
	--ps-gr-text: 17px;                      /* E1 */
	--ps-gr-klein: 15px;
	--ps-gr-fein: 13px;
	--ps-gr-label: 14px;

	--ps-zeile-kopf: 1.06;
	--ps-zeile-text: 1.7;                    /* E1 */
	--ps-zeile-klein: 1.55;
	--ps-zeile-eng: 1.2;

	--ps-lauf-kopf: -0.01em;                 /* Barlow SC braucht kaum Unterschneidung */
	--ps-lauf-label: 0.02em;                 /* keine gesperrten Versalien mehr außer im Logo */
	--ps-lauf-text: 0;

	--ps-staerke-kopf: 600;                  /* C4: echte Schnitte 600/700 statt nicht vorhandenem 800 */
	--ps-staerke-kopf-gross: 700;            /* nur H1 und Ergebniszahl */
	--ps-staerke-knopf: 600;
	--ps-staerke-text: 400;
	--ps-staerke-betont: 600;

	/* --- Maß -------------------------------------------------------------- */
	--ps-container: 1220px;
	--ps-lesebreite: 660px;
	--ps-rand-seite: 20px;
	--ps-a-1: 4px; --ps-a-2: 8px; --ps-a-3: 12px; --ps-a-4: 16px; --ps-a-5: 24px;
	--ps-a-6: 32px; --ps-a-7: 48px; --ps-a-8: 64px; --ps-a-9: 96px;
	--ps-a-abschnitt: clamp(56px, 7vw, 96px);

	/* Ecken: gerade Kanten wie die Schrift. Keine Pillen mehr. */
	--ps-radius-sm: 2px;
	--ps-radius: 4px;
	--ps-radius-lg: 8px;
	--ps-radius-voll: 4px;                   /* alter Pillen-Name zeigt jetzt auf 4 px */
	--ps-radius-pixel: 0;

	--ps-schatten-1: 0 1px 2px rgba(30, 39, 72, 0.08);
	--ps-schatten-2: 0 12px 32px rgba(30, 39, 72, 0.10);
	--ps-schatten-aktion: none;              /* Knopf ohne Leuchtschatten; Kante statt Glow */
	--ps-shadow: var(--ps-schatten-2);
	--ps-px: 3px;

	--ps-dauer-kurz: 160ms;
	--ps-dauer: 240ms;
	--ps-kurve: cubic-bezier(.2, .7, .2, 1);

	/* --- Bausteine ---------------------------------------------------------- */
	--ps-knopf-hoehe: 52px;
	--ps-knopf-polster: 0 24px;
	--ps-knopf-radius: var(--ps-radius);
	--ps-knopf-schrift: var(--ps-font-head);
	--ps-knopf-gr: 17px;
	--ps-knopf-bg: var(--ps-farbe-aktion);
	--ps-knopf-bg-hover: var(--ps-farbe-aktion-hover);
	--ps-knopf-text: var(--ps-white);
	--ps-knopf-kante: inset 0 -3px 0 rgba(0, 0, 0, 0.22); /* Unterkante wie gedrückte Taste (Spielebene, ruhig) */
	--ps-knopf-motiv-gr: 26px;

	--ps-info-gr: 16px;
	--ps-info-schimmer: 14s;
	--ps-info-tippflaeche: 32px;
	--ps-info-bg: var(--ps-farbe-hinweis);
	--ps-info-licht: var(--ps-messing-licht);
	--ps-info-rand: var(--ps-navy);

	--ps-kasten-bg: var(--ps-farbe-flaeche-marke);  /* neutraler Kasten ohne Leiste (Verbotsliste 01.10.) */
	--ps-kasten-rand: transparent;
	--ps-kasten-radius: var(--ps-radius);

	/* Merkkasten: der Soldat (Pose merke, Zeigefinger waagrecht) + Sprechblase wie im Gehaltsrechner */
	--ps-merke-rand: 2px solid var(--ps-navy);
	--ps-merke-schatten: 4px 4px 0 var(--ps-bronze-700);
	--ps-merke-ruf: var(--ps-bronze-700);
	--ps-merke-figur: 96px;                   /* 32 px Leinwand × 3 */

	/* Soldat (Zweitzeichen, 02.10.2026): Posen aus figur/posen.json, nur ganzzahlig skalieren */
	--ps-figur-leinwand: 32px;                /* Höhe jeder Pose, Fußlinie unten */
	--ps-figur-skala-rand: 2;                 /* 64 px hoch: am Rand, Systemzustände */
	--ps-figur-skala-merke: 3;                /* 96 px hoch: Merkkasten, Tipp, FAQ */
	--ps-figur-skala-kopf: 4;                 /* 128 px hoch: Seitenkopf, Beratungsblock */
	--ps-figur-lichtkante: var(--ps-bronze-100); /* nacht/-Fassung auf Nacht-Bronze und Navy */
	--ps-figur-rendering: pixelated;

	/* Lagezeichen B-16 (neu): Pixel-Schulterklappe + Nummer, harte Schattenkante */
	--ps-lz-rand: 2px solid var(--ps-navy);
	--ps-lz-schatten: 3px 3px 0 var(--ps-navy);
	--ps-lz-aktiv-bg: var(--ps-navy);
	--ps-lz-aktiv-schatten: 3px 3px 0 var(--ps-bronze-700);
	--ps-lz-erledigt-bg: var(--ps-bronze-100);

	--ps-tabelle-kopf-bg: var(--ps-navy);
	--ps-tabelle-kopf-text: var(--ps-white);
	--ps-tabelle-linie: var(--ps-farbe-rand);

	--ps-fortschritt-hoehe: 8px;
	--ps-fortschritt-bg: var(--ps-bronze-100);
	--ps-fortschritt-voll: var(--ps-bronze-700);

	/* Lagekarten-Raster (Gestaltungselement): 1-km-Gitter, nur auf Navy- und Bronzebändern */
	--ps-raster-linie: rgba(169, 183, 147, 0.16);
	--ps-raster-weite: 48px;

	/* --- Namen aus Phase B, die Bausteine noch nutzen ---------------------- */
	--ps-kasten-leiste: transparent;          /* keine linke Farbleiste mehr (Verbotsliste) */
	--ps-pixelrand:
		0 calc(var(--ps-px) * -1) 0 0 var(--ps-navy),
		0 var(--ps-px) 0 0 var(--ps-navy),
		calc(var(--ps-px) * -1) 0 0 0 var(--ps-navy),
		var(--ps-px) 0 0 0 var(--ps-navy),
		0 calc(var(--ps-px) * 2) 0 0 rgba(30, 39, 72, 0.25);
}

/* Pixel-Stufen je Seitentyp (Entscheidung Mauritz 30.09.2026): Körperklasse aus funktionen.php */
.ps-pixel-ruhig, [data-ps-pixel="ruhig"] {
	--ps-pixel-rahmen: none;
	--ps-pixel-label: var(--ps-font-head);
}
.ps-pixel-voll, [data-ps-pixel="voll"] {
	--ps-pixel-rahmen: var(--ps-pixelrand);
	--ps-pixel-label: var(--ps-font-pixel-kopf);
}

@media (prefers-reduced-motion: reduce) {
	:root { --ps-dauer-kurz: 0ms; --ps-dauer: 0ms; }
}