/* =====================================================================
   Artikel-Vorlage, Welle 2 (ab 28.10.2026) – Pixel-Stufe „ruhig“.
   Nur Tokens aus tokens.css, keine Literale (Stilwache S-01 bis S-06).
   Bausteine: B-16 Stationszeile, B-17 Punkte zum Thema, B-18 Stand der Station,
   B-20 Titelbild nach dem ersten Absatz.
   ===================================================================== */

/* ---- Kopf: am Handy kompakt, damit die Antwort im ersten Bildschirm steht ---- */
#ps-sub .ps-sub-hero--artikel {
	padding-block: clamp(40px, 5vw, 72px) var(--ps-a-5);
}
/* Kopf in derselben Spalte wie der Text (.ps-artikel ist 780 px breit und mittig). Seit die Antwort
   direkt unter dem Titel steht, fiele der Versatz zwischen Titel und Text sonst auf. */
@media (min-width: 861px) {
	#ps-sub .ps-sub-hero--artikel > .ps-container { max-width: 780px; }
}
#ps-sub .ps-sub-hero--artikel h1 {
	font-size: var(--ps-gr-h1);
	line-height: var(--ps-zeile-kopf);
}
@media (max-width: 600px) {
	#ps-sub .ps-sub-hero--artikel { padding-block: var(--ps-a-5) var(--ps-a-4); }
	/* Der letzte Krumenpunkt wiederholt die H1 und brach am Handy auf drei Zeilen. */
	#ps-sub .ps-sub-hero--artikel .ps-krume [aria-current="page"] { display: none; }
	#ps-sub .ps-sub-hero--artikel .ps-krume { margin-bottom: var(--ps-a-3); }
	#ps-sub .ps-sub-hero--artikel .ps-eyebrow { margin-bottom: var(--ps-a-2); }
}

/* ---- B-16 Stationszeile ---- */
#ps-sub .ps-station {
	display: inline-flex;
	align-items: center;
	gap: var(--ps-a-3);
	margin-top: var(--ps-a-4);
	padding: var(--ps-a-2) var(--ps-a-4) var(--ps-a-2) var(--ps-a-2);
	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-eng);
	text-decoration: none;
}
#ps-sub .ps-station:hover strong,
#ps-sub .ps-station:focus-visible strong { text-decoration: underline; }
#ps-sub .ps-station__nr {
	display: inline-grid;
	place-items: center;
	flex: 0 0 auto;
	width: 32px;
	height: 32px;
	border-radius: var(--ps-radius-pixel);
	background: var(--ps-farbe-dunkel);
	color: var(--ps-farbe-auf-dunkel);
	font-family: var(--ps-font-head);
	font-size: var(--ps-gr-h4);
	font-weight: var(--ps-staerke-kopf);
}
#ps-sub .ps-station strong { color: var(--ps-farbe-kopf); font-weight: var(--ps-staerke-betont); }

/* ---- Antwort zuerst ---- */
#ps-sub .ps-sec--antwort { padding-block: var(--ps-a-5) var(--ps-a-6); }
#ps-sub .ps-prose--antwort > p:first-child { margin-top: 0; }
#ps-sub .ps-sec--antwort + .ps-figure-sec { padding-bottom: var(--ps-a-2); }
@media (max-width: 600px) {
	#ps-sub .ps-sec--antwort { padding-block: var(--ps-a-3) var(--ps-a-5); }
}

/* ---- E-24 Werkzeug direkt unter der Antwort ---- */
#ps-sub .ps-sec--werkzeug { padding-block: 0 var(--ps-a-6); }

/* ---- 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 „Gelesen-Haken in Weiterlesen“ (nur mit PAL_WEITER_GELESEN) */
#ps-sub .ps-more__gelesen {
	color: var(--ps-farbe-erledigt);
	font-size: var(--ps-gr-fein);
	font-style: normal;
}

@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); }
}