/* ---------------------------------------------------------------------
 * Weg-Karten auf dem Dashboard - "Sichtbar werden" und "Regulär beraten"
 *
 * ARBEITSTEILUNG:
 *   Service    src/Application/Profile/WegService.php - welche Etappen,
 *              was erfüllt ist, was fehlt, was empfohlen wird
 *   Shortcode  includes/weg-karte.php - rendert die Karte aus dem Service
 *   Diese      Aussehen nach weg-karten-mockup.html (Sven, 14.09.2026)
 *   Datei
 *   JS         assets/js/modules/app/weg-karte.js - Einreichen und
 *              Neu-Rendern
 *
 * Ersetzt "Dein Weg zur Sichtbarkeit" (weg-sichtbarkeit.css). Der
 * Rückbau des alten Moduls folgt erst nach dem Livetest des Einreichens.
 *
 * Geladen nur auf Seiten, die einen der beiden Shortcodes enthalten
 * (includes/weg-karte.php, am wp_enqueue_scripts-Hook).
 *
 * ⚠️ ZWEI SPEZIFITÄTS-EBENEN MIT ABSICHT:
 *   Grundregeln     (0,1,0) - eine Klasse. Abstände, Schrift, Flächen.
 *                   Sollen gegen jede Bricks-Klasse VERLIEREN.
 *   Zustandsregeln  (0,3,0) - erledigt, aktuell, gesperrt. Müssen gegen
 *                   Bricks (.klasse.brxe-… = 0,2,0) gewinnen.
 *
 * Umbruchpunkt auf Bricks' Wert 478px (das Mockup hat nur diesen einen).
 * ------------------------------------------------------------------- */

:root {
	/* ---------------------------------------------------------------
	 * Farben - alle aus Core-Framework-Tokens, gemessen gegen das
	 * Mockup (ΔE, unter 2 kaum sichtbar). Bericht vom 14.09.2026.
	 * --------------------------------------------------------------- */
	/* Kartenfläche weiss, Rahmen --brand-app-3 (Sven, 14.09.2026, live
	   gesehen). Im Entwurf standen #FCFCFA und #DDDCD6 als Annäherung.
	   Der Rahmen gilt auch für den Trenner in der Karte. */
	--sw-weg-flaeche: var(--light);
	--sw-weg-rahmen: var(--brand-app-3);
	--sw-weg-text: var(--brand-green-900);            /* App-Textfarbe (Sven, 31.08.) */
	--sw-weg-marke: var(--brand-green-900);           /* #2C4322, ΔE 4,8 */
	--sw-weg-pfeil: var(--brand-green-900);           /* #3C4C24 ist der bekannte Beinahe-Treffer */

	/* Farbe der Schritt-Zeichen. ⚠️ Die Dateien der Fortschrittsliste
	   tragen #3c4c24 fest - den Beinahe-Treffer, der laut Entscheidung
	   vom 31.08.2026 auf --brand-green-900 gehört (ΔE 5,6). Hier steht
	   das Token; soll die Karte bis zur Umstellung der Liste exakt deren
	   Wert zeigen, ist es diese eine Zeile. */
	--sw-weg-zeichen: var(--brand-green-900);
	--sw-weg-hover: var(--bg-50);                     /* #F7F7F4, ΔE 0,7 */
	--sw-weg-balken-grund: var(--brand-green-60);     /* #EDEDE6, exakt */
	--sw-weg-erledigt-flaeche: var(--status-green-light); /* #EEF5E8, exakt */
	--sw-weg-hinweis-flaeche: var(--status-yellow-light); /* #FFF6DE, exakt */
	--sw-weg-fehler-flaeche: var(--status-red-light);
	/* Kopf von Stufe 1 im Status incomplete, angezeigt als "Pausiert"
	   (21.09.2026, Wortlaut 23.09.2026): dieselbe Farbe wie das Etikett
	   im Statuspanel.
	   Bewusst ein EIGENER Name, obwohl der Wert heute derselbe ist wie
	   bei der Fehlermeldung darüber - die beiden sind verschiedene
	   Aussagen und sollen sich getrennt ändern lassen. */
	--sw-weg-fehlt-flaeche: var(--status-red-light);

	/* Nebentext: --brand-green-700 statt des Mockup-Graus #57646C, für
	   das es kein Token gibt. Sichtbar oliv statt blaugrau - so
	   bestätigt (Sven, 14.09.2026): Das Mockup ist die Vorlage für
	   Aufbau und Verhalten, nicht für Farben ohne Token. Kontrast 4,63
	   auf der Kartenfläche. */
	--sw-weg-nebentext: var(--brand-green-700);

	/* Inaktives Grau: DIESELBE Variable wie beim Statusicon
	   (assets/css/profil-status.css, lädt auf jeder App-Seite) - ein
	   Wert für "zurückgenommen", nicht zwei. */
	--sw-weg-grau: var(--sw-status-grau);

	/* Rahmen der erledigten Zeile: nächstes Token zu #D6E6C9 (ΔE 7,5),
	   bestätigt (Sven, 14.09.2026). */
	--sw-weg-erledigt-rahmen: var(--brand-green-100);

	/* Hinweistext: die App-Textfarbe statt #7A5210 (kein Token),
	   Kontrast 9,87 auf der gelben Fläche - bestätigt (Sven, 14.09.2026). */
	--sw-weg-hinweis-text: var(--brand-green-900);

	/* ---------------------------------------------------------------
	 * Strukturelle Grössen - keine Designwerte, sondern Masse der
	 * Bausteine (erlaubt laut Token-Grundregel vom 28.08.2026).
	 * --------------------------------------------------------------- */
	/* 10px ist der Radius an allen Ecken im Projekt (Sven, 14.09.2026).
	   Kein Token trifft ihn: --radius-m sind 7,5px, --radius-l 12,5px. */
	--sw-weg-radius: 10px;

	/* Ziffer im Kreis: 40 × 40, Schrift 21px in 400 (Sven, 15.09.2026). */
	--sw-weg-marke-groesse: 40px;
	--sw-weg-marke-schrift: 21px;
	/* Grösse der Schritt-Zeichen: 30 × 30 (Sven, 15.09.2026 - eine Zahl
	   statt "minimal grösser"). ⚠️ MUSS MIT DER FORTSCHRITTSLISTE AUF
	   DER BEARBEITEN-SEITE ÜBEREINSTIMMEN - deren Icon-Grösse steht in
	   Bricks, nicht hier. Wer eine ändert, ändert beide. Der Haken wächst
	   mit, die Ringstärke nicht: Sie ist im SVG auf 9,6 gesenkt
	   (includes/weg-karte.php). */
	--sw-weg-zeichen-groesse: 30px;
	--sw-weg-icon-groesse: 22px;
	--sw-weg-balken-hoehe: 8px;
}

/* =====================================================================
 * 1. Grundregeln (0,1,0)
 * ================================================================== */

.weg__karte {
	background-color: var(--sw-weg-flaeche);
	border: 1px solid var(--sw-weg-rahmen);
	border-radius: var(--sw-weg-radius);
	padding: var(--card-space);
	color: var(--sw-weg-text);
}

.weg__karte + .weg__karte,
.weg__klappe + .weg__karte {
	margin-top: var(--space-s);
}

/* Kopf */
/* Ziffer mittig zum Textblock aus Titel und Untertitel, nicht oben
   an der Überschrift: Sie bezeichnet die Etappe, nicht den Titel
   (Sven, 14.09.2026). Gilt für beide Karten. */
.weg__kopf {
	display: flex;
	align-items: center;
	gap: var(--space-xs);
}

.weg__marke {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--sw-weg-marke-groesse);
	height: var(--sw-weg-marke-groesse);
	border-radius: var(--radius-full);
	background-color: var(--sw-weg-marke);
	color: var(--light);
	font-size: var(--sw-weg-marke-schrift);
	font-weight: 400;
}

.weg__titelblock {
	flex: 1;
	min-width: 0;
}

.weg__titel {
	margin: 0;
	font-size: var(--text-m);
	font-weight: 400;
}

.weg__untertitel {
	margin: 0;
	font-size: var(--text-s);
	color: var(--sw-weg-nebentext);
}

.weg__icon {
	flex: none;
	width: var(--sw-weg-icon-groesse);
	height: var(--sw-weg-icon-groesse);
	color: var(--sw-weg-grau);
}

.weg__icon svg {
	display: block;
	width: 100%;
	height: 100%;
}

/* Fortschritt */
.weg__fortschritt {
	margin-top: var(--space-xs);
}

/* 🔴 TROG UND FÜLLUNG MIT DEMSELBEN RADIUS (15.09.2026). Live hatte die
   Füllung eine eckige rechte Kante im runden Trog - bei 6px kaum zu
   sehen, bei 8px deutlich. Der Radius hängt jetzt an der Balkenhöhe
   statt an einem Token, und die Füllung ERBT ihn (inherit) - so können
   beide nicht mehr auseinanderlaufen. */
.weg__balken {
	height: var(--sw-weg-balken-hoehe);
	border-radius: calc(var(--sw-weg-balken-hoehe) / 2);
	background-color: var(--sw-weg-balken-grund);
	overflow: hidden;
}

/* Die Breite kommt als --weg-anteil aus dem Service (Inline-Variable am
   Element). Kein zweites Rechnen im CSS. */
.weg__balken-anteil {
	display: block;
	height: 100%;
	width: var(--weg-anteil, 0%);
	border-radius: inherit;
	background-color: var(--sw-weg-marke);
}

.weg__zaehler {
	margin: var(--space-3xs) 0 0;
	font-size: var(--text-s);
	color: var(--sw-weg-nebentext);
}

.weg__trenner {
	margin: var(--space-xs) 0;
	border: 0;
	border-top: 1px solid var(--sw-weg-rahmen);
}

/* Schritte */
.weg__schritte {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.weg__schritt {
	display: flex;
	align-items: center;
	gap: var(--space-2xs);
	padding: var(--space-2xs);
	border-radius: var(--radius-m);

	/* 🔴 DIE STRUKTUR IST GETEILT, DIE FLÄCHE GEHÖRT DEM ORT
	   (29.09.2026). Dieselben Zeilen stehen in der Karte und im
	   Statusmenü; Aufbau, Abstände und Zeichen sollen dort gleich sein.
	   Die Fläche nicht: In der Karte liegen sie auf einer weissen Karte,
	   im Panel neben Aktionen mit grauem Grund.

	   Deshalb zwei Variablen statt einer zweiten Fassung der Regel. Wer
	   die Struktur ändert, ändert beide Orte; wer die Fläche ändert, nur
	   einen. Vorgabe hier: keine Fläche - so war es bisher. */
	background-color: var(--sw-weg-schritt-flaeche, transparent);
	color: inherit;
	text-decoration: none;
}

a.weg__schritt:hover {
	background-color: var(--sw-weg-hover);
}

/* Die Zeichen sind die SVGs der Fortschrittsliste (includes/weg-karte.php),
   KEINE nachgebauten CSS-Kreise mehr - die sahen offen grau und dünn
   aus, die Liste dunkelgrün und kräftig. Hier nur Grösse und Farbe. */
.weg__zeichen {
	flex: none;
	display: flex;
	width: var(--sw-weg-zeichen-groesse);
	height: var(--sw-weg-zeichen-groesse);
	color: var(--sw-weg-zeichen);
}

.weg__zeichen svg {
	display: block;
	width: 100%;
	height: 100%;
}

.weg__schritt-text {
	flex: 1;
	min-width: 0;
}

.weg__schritt-zusatz {
	color: var(--sw-weg-grau);
}

.weg__pfeil {
	flex: none;
	color: var(--sw-weg-pfeil);
}

/* Abschluss */
.weg__abschluss {
	margin-top: var(--space-xs);
}

.weg__knopf {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2xs);
	/* border-box ausdrücklich: "Anmerkungen ansehen" ist ein <a>, und
	   ein <a> rechnet die Breite ohne Innenabstand - mit width: 100%
	   ragte er rechts aus der Karte (Test 14.09.2026). Ein <button>
	   bekommt border-box vom Browser, ein Link nicht. */
	box-sizing: border-box;
	width: 100%;
	margin: 0;
	padding: var(--btn-space);
	border: 0;
	border-radius: var(--radius-full);
	background-color: var(--sw-weg-marke);
	color: var(--light);
	font: inherit;
	font-size: var(--text-s);
	font-weight: 500;
	letter-spacing: .04em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
}

/* Zwei Knöpfe übereinander (revision_required) */
.weg__knopf + .weg__knopf {
	margin-top: var(--space-2xs);
}

.weg__knopf-notiz {
	margin: var(--space-3xs) 0 0;
	font-size: var(--text-s);
	color: var(--sw-weg-nebentext);
	text-align: center;
}

.weg__status {
	display: flex;
	align-items: flex-start;
	gap: var(--space-2xs);
	padding: var(--space-xs);
	border-radius: var(--radius-m);
	background-color: var(--sw-weg-hover);
	color: var(--sw-weg-nebentext);
}

.weg__status svg {
	flex: none;
	width: 20px;
	height: 20px;
	color: var(--sw-weg-pfeil);
}

.weg__hinweis {
	margin-bottom: var(--space-2xs);
	padding: var(--space-xs);
	border-radius: var(--radius-m);
	background-color: var(--sw-weg-hinweis-flaeche);
	color: var(--sw-weg-hinweis-text);
}

/* Fehlermeldung beim Einreichen - nur sichtbar, wenn weg-karte.js sie
   füllt (Attribut hidden). */
.weg__fehler {
	margin: var(--space-2xs) 0 0;
	padding: var(--space-2xs) var(--space-xs);
	border-radius: var(--radius-m);
	background-color: var(--sw-weg-fehler-flaeche);
	color: var(--sw-weg-text);
}

/* Erledigt: eingeklappt, aufklappbar über <details> - ohne JavaScript,
   mit Tastatur und Vorlesen vom Browser. */
.weg__klappe {
	margin: 0;
}

.weg__erledigt {
	display: flex;
	align-items: center;
	gap: var(--space-2xs);
	padding: var(--space-xs) var(--space-s);
	border: 1px solid var(--sw-weg-erledigt-rahmen);
	border-radius: var(--sw-weg-radius);
	background-color: var(--sw-weg-erledigt-flaeche);
	color: var(--sw-weg-text);
	font-weight: 600;
	list-style: none;
	cursor: pointer;
}

/* Veröffentlicht, aber etwas fehlt (21.09.2026): dieselbe Klappe, kein
   Grün. Fläche wie das Etikett im Statuspanel
   (--sw-weg-fehlt-flaeche = --status-red-light), Rahmen der neutrale
   der Karte - das Erledigt-Grün darf nicht auf einem offenen Punkt
   liegen. */
.weg__erledigt--fehlt {
	border-color: var(--sw-weg-rahmen);
	background-color: var(--sw-weg-fehlt-flaeche);
}

.weg__erledigt::-webkit-details-marker {
	display: none;
}

.weg__erledigt svg {
	flex: none;
	width: 20px;
	height: 20px;
}

.weg__erledigt .weg__pfeil {
	display: inline-block;
	margin-left: auto;
	font-weight: 400;
}

.weg__klappe-inhalt {
	margin-top: var(--space-2xs);
}

/* Nur vorgelesen: "Erledigt:", "Offen:" vor dem Schritt. Das Zeichen
   links ist aria-hidden - ohne diesen Text hörte man nur die Namen. */
.weg__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* Ohne Fortschritt und Schrittliste (submitted, revision_required)
   folgt der Abschluss direkt auf den Trenner. */
.weg__abschluss--direkt {
	margin-top: 0;
}

/* =====================================================================
 * 2. Zustandsregeln (0,3,0)
 * ================================================================== */

/* Gesperrte Karte (Karte 2) */
.weg__karte.weg__karte--gesperrt.weg__karte--gesperrt {
	background-color: var(--sw-weg-hover);
	border-color: var(--sw-weg-balken-grund);
}

.weg__kopf .weg__marke.weg__marke--gesperrt {
	background-color: var(--sw-weg-grau);
}

.weg__karte--gesperrt .weg__titelblock .weg__titel {
	color: var(--sw-weg-nebentext);
}

/* Schritt erledigt */
.weg__schritte .weg__schritt.weg__schritt--erledigt .weg__schritt-text {
	color: var(--sw-weg-nebentext);
}

/* Schritt empfohlen ("aktuell") - Empfehlung, kein Zwang. Trägt nur
   die fette Schrift: Das Zeichen ist dasselbe wie bei jedem offenen
   Schritt, weil es identisch mit der Fortschrittsliste sein muss. */
.weg__schritte .weg__schritt--aktuell .weg__schritt-text {
	font-weight: 600;
}

/* Zweitrangiger Knopf: umrandet, wenn ein anderer der Hauptweg ist
   ("Erneut einreichen" unter "Anmerkungen ansehen"). VOR der
   Gesperrt-Regel, damit bei gleicher Gewichtung grau gewinnt. */
.weg__abschluss .weg__knopf.weg__knopf--zweit {
	background-color: transparent;
	box-shadow: inset 0 0 0 1px var(--sw-weg-marke);
	color: var(--sw-weg-marke);
}

/* Knopf gesperrt - bleibt ein Knopf an derselben Stelle, erklärt durch
   die Zeile darunter ("Sobald alle Schritte erledigt sind, …"). */
.weg__abschluss .weg__knopf.weg__knopf--gesperrt {
	box-shadow: none;
	background-color: var(--sw-weg-balken-grund);
	color: var(--sw-weg-grau);
	cursor: not-allowed;
}

/* Während der Anfrage */
.weg__abschluss .weg__knopf[aria-busy="true"] {
	cursor: progress;
	opacity: .7;
}

/* Aufgeklappt: Pfeil zeigt nach oben */
.weg__klappe[open] > .weg__erledigt .weg__pfeil {
	transform: rotate(180deg);
}

/* =====================================================================
 * 3. Schmal (Bricks 478px)
 * ================================================================== */

/* Handy: Ziffer wieder oben am Titel (Bricks 767px). Auf 375px bricht
   der Untertitel von Karte 2 in zwei Zeilen um; mittig sässe die Ziffer
   dann neben der ersten Untertitelzeile statt beim Titel und verlöre
   ihren Bezug (gemessen 15.09.2026). Karte 1 schaltet mit um, damit
   beide Karten gleich aussehen. */
@media (max-width: 767px) {
	.weg__kopf {
		align-items: flex-start;
	}
}

@media (max-width: 478px) {
	.weg__karte {
		padding: var(--space-xs);
	}
}