/*
 * Nachweis-Box „Für deine Checkliste“ (B-17, B-18; E-37/E-38, Nachtrag 07.10.2026 SPIELOEKONOMIE § 9).
 * Beiträge (single.php) und Themenseiten (funktionen.php setzt die Box vor den Beratungsblock). Aus artikel.css
 * herausgelöst, damit Themenseiten nur diese Regeln laden und kein Beitragslayout.
 */

/* ---- B-17 Punkte zum Thema, B-18 Stand der Station ---- */
#ps-sub .ps-punkte {
	max-width: var(--ps-lesebreite);
	margin-top: var(--ps-a-8);
	padding: var(--ps-a-6);
	border: 1px solid var(--ps-farbe-rand);
	border-radius: var(--ps-kasten-radius);
	background: var(--ps-kasten-bg);
}
#ps-sub .ps-punkte[hidden] { display: none; }
#ps-sub .ps-punkte__titel {
	font-size: var(--ps-gr-h3);
	line-height: var(--ps-zeile-kopf);
	letter-spacing: var(--ps-lauf-kopf);
}
#ps-sub .ps-punkte__liste {
	display: grid;
	gap: var(--ps-a-3);
	margin: var(--ps-a-5) 0 0;
	padding: 0;
	list-style: none;
}
#ps-sub .ps-punkte__liste li::before { content: none; }
#ps-sub .ps-punkt {
	display: grid;
	gap: var(--ps-a-1);
	margin: 0;
	padding: var(--ps-a-4) var(--ps-a-5);
	border: 1px solid var(--ps-farbe-rand);
	border-radius: var(--ps-radius-sm);
	background: var(--ps-farbe-flaeche);
}
#ps-sub .ps-punkt__ort {
	color: var(--ps-farbe-leise);
	font-size: var(--ps-gr-fein);
	line-height: var(--ps-zeile-klein);
}
#ps-sub .ps-punkt__titel {
	color: var(--ps-farbe-kopf);
	font-family: var(--ps-font-head);
	font-size: var(--ps-gr-h4);
	font-weight: var(--ps-staerke-kopf);
	line-height: var(--ps-zeile-eng);
}
#ps-sub .ps-punkt__kurz,
#ps-sub .ps-punkt__notiz {
	color: var(--ps-farbe-text);
	font-size: var(--ps-gr-klein);
	line-height: var(--ps-zeile-klein);
}
#ps-sub .ps-punkt__notiz { color: var(--ps-farbe-leise); }
#ps-sub .ps-punkt--gilt-nicht { background: var(--ps-farbe-flaeche-2); }
#ps-sub .ps-punkt--gilt-nicht .ps-punkt__titel { color: var(--ps-farbe-leise); }

#ps-sub .ps-punkt__haken {
	display: inline-flex;
	align-items: center;
	justify-self: start;
	gap: var(--ps-a-3);
	min-height: 44px;
	margin-top: var(--ps-a-2);
	padding: 0 var(--ps-a-4) 0 var(--ps-a-3);
	border: 1px solid var(--ps-farbe-rand);
	border-radius: var(--ps-radius-sm);
	background: var(--ps-farbe-flaeche);
	color: var(--ps-farbe-kopf);
	font-family: var(--ps-font-head);
	font-size: var(--ps-gr-h4);
	font-weight: var(--ps-staerke-knopf);
	line-height: var(--ps-zeile-eng);
	cursor: pointer;
}
#ps-sub .ps-punkt__haken:hover { border-color: var(--ps-farbe-link); }
/* Pixel-Stufe ruhig: der Haken ist das einzige Pixelmotiv (Kästchen mit harten Ecken). */
#ps-sub .ps-punkt__kasten {
	width: 20px;
	height: 20px;
	border: 2px solid var(--ps-farbe-kopf);
	border-radius: var(--ps-radius-pixel);
	background: var(--ps-farbe-flaeche);
}
#ps-sub .ps-punkt__haken[aria-pressed="true"] {
	border-color: var(--ps-farbe-erledigt);
	background: var(--ps-farbe-flaeche-2);
}
#ps-sub .ps-punkt__haken[aria-pressed="true"] .ps-punkt__kasten {
	border-color: var(--ps-farbe-erledigt);
	background:
		linear-gradient(var(--ps-farbe-erledigt), var(--ps-farbe-erledigt)) 3px 9px / 4px 4px no-repeat,
		linear-gradient(var(--ps-farbe-erledigt), var(--ps-farbe-erledigt)) 6px 11px / 4px 4px no-repeat,
		linear-gradient(var(--ps-farbe-erledigt), var(--ps-farbe-erledigt)) 9px 7px / 4px 4px no-repeat,
		linear-gradient(var(--ps-farbe-erledigt), var(--ps-farbe-erledigt)) 11px 4px / 4px 4px no-repeat,
		var(--ps-farbe-flaeche);
}

#ps-sub .ps-fortschritt { margin-top: var(--ps-a-4); }
#ps-sub .ps-fortschritt[hidden] { display: none; }
#ps-sub .ps-fortschritt__text {
	color: var(--ps-farbe-text);
	font-size: var(--ps-gr-klein);
	line-height: var(--ps-zeile-klein);
}
#ps-sub .ps-fortschritt__text span { color: var(--ps-farbe-leise); }
#ps-sub .ps-fortschritt__balken {
	height: var(--ps-fortschritt-hoehe);
	margin-top: var(--ps-a-2);
	border-radius: var(--ps-radius-pixel);
	background: var(--ps-fortschritt-bg);
	overflow: hidden;
}
#ps-sub .ps-fortschritt__balken span {
	display: block;
	height: 100%;
	background: var(--ps-fortschritt-voll);
}
#ps-sub .ps-punkte__fuss {
	margin-top: var(--ps-a-5);
	color: var(--ps-farbe-leise);
	font-size: var(--ps-gr-klein);
	line-height: var(--ps-zeile-klein);
}
#ps-sub .ps-punkte__fuss a { color: var(--ps-farbe-link); }

/* Station 9: keine Leiste, keine Hervorhebung erledigter Punkte (R-09). */
#ps-sub[data-ps-still] .ps-punkt__haken[aria-pressed="true"] { background: var(--ps-farbe-flaeche); }

/* ---- Nachtrag 07.10.2026: Nachweis, Vormerken, Kurzfrage ---- */
#ps-sub .ps-punkt__knoepfe { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ps-a-2) var(--ps-a-3); margin-top: var(--ps-a-2); }
#ps-sub .ps-punkt__knoepfe .ps-punkt__haken { margin-top: 0; }
#ps-sub .ps-punkt__haken[disabled] { cursor: not-allowed; opacity: .55; }
#ps-sub button.ps-punkt__merk,
#ps-sub button.ps-punkt__zurueck {
	min-height: 44px;
	padding: 0 var(--ps-a-4);
	border: 1px solid transparent;
	border-radius: var(--ps-radius-sm);
	background: transparent;
	color: var(--ps-farbe-link);
	font-family: var(--ps-font-body);
	font-size: var(--ps-gr-klein);
	text-decoration: underline;
	cursor: pointer;
}
#ps-sub button.ps-punkt__merk[aria-pressed="true"] { border-color: var(--ps-farbe-link); text-decoration: none; }
#ps-sub button.ps-punkt__zurueck { justify-self: start; min-height: 36px; padding: 0; color: var(--ps-farbe-leise); }
#ps-sub .ps-punkt--vor { border-color: var(--ps-farbe-link); }
#ps-sub .ps-frage { margin: var(--ps-a-3) 0 0; padding: 0; border: 0; min-width: 0; }
#ps-sub .ps-frage legend { padding: 0; color: var(--ps-farbe-kopf); font-size: var(--ps-gr-klein); font-weight: var(--ps-staerke-betont); line-height: var(--ps-zeile-klein); }
#ps-sub .ps-frage__wahl { display: grid; gap: var(--ps-a-2); margin-top: var(--ps-a-2); }
#ps-sub .ps-frage__antwort {
	min-height: 44px;
	padding: var(--ps-a-2) var(--ps-a-4);
	border: 1px solid var(--ps-farbe-rand);
	border-radius: var(--ps-radius-sm);
	background: var(--ps-farbe-flaeche);
	color: var(--ps-farbe-text);
	font-family: var(--ps-font-body);
	font-size: var(--ps-gr-klein);
	line-height: var(--ps-zeile-klein);
	text-align: left;
	cursor: pointer;
}
#ps-sub .ps-frage__antwort:hover { border-color: var(--ps-farbe-link); }
#ps-sub .ps-frage__antwort.ist-richtig { border-color: var(--ps-farbe-erledigt); background: var(--ps-farbe-flaeche-2); }
#ps-sub .ps-frage__antwort.ist-falsch { border-style: dashed; }
#ps-sub .ps-frage__rueck { margin-top: var(--ps-a-2); color: var(--ps-farbe-text); font-size: var(--ps-gr-klein); line-height: var(--ps-zeile-klein); }
/* Themenseiten: Box im eigenen Abschnitt vor dem Beratungsblock */
#ps-sub .ps-nachweis { padding-block: 0 var(--ps-a-7); }
#ps-sub .ps-nachweis .ps-punkte { margin-inline: auto; margin-top: 0; }

@media (max-width: 600px) {
	#ps-sub .ps-punkte { padding: var(--ps-a-5) var(--ps-a-4); margin-top: var(--ps-a-7); }
	#ps-sub .ps-punkt { padding: var(--ps-a-4); }
	#ps-sub .ps-nachweis .ps-punkte { margin-top: 0; }
}
#ps-sub .ps-punkte__sperre { margin-top: var(--ps-a-3); }
#ps-sub .ps-punkte__sperre[hidden] { display: none; }
#ps-sub .ps-punkte__andere summary {
	min-height: 44px;
	padding: var(--ps-a-3) 0;
	color: var(--ps-farbe-link);
	font-size: var(--ps-gr-klein);
	line-height: var(--ps-zeile-klein);
	cursor: pointer;
}
#ps-sub .ps-punkte__andere .ps-punkte__liste { margin-top: var(--ps-a-2); }
#ps-sub .ps-punkte__still p { margin: var(--ps-a-4) 0 0; color: var(--ps-farbe-leise); font-size: var(--ps-gr-klein); line-height: var(--ps-zeile-klein); }
#ps-sub a.ps-punkt__weiter { justify-self: start; display: inline-block; padding: var(--ps-a-2) 0; color: var(--ps-farbe-link); font-size: var(--ps-gr-klein); font-weight: var(--ps-staerke-betont); }