/*
 * OSW Projektarbeit — Frontend
 *
 * Corporate Design OS West Schönau St.Gallen, abgeleitet vom Erscheinungsbild
 * der Stadt St.Gallen. Rot und Schwarz als Stadtfarben, Univers als Hausschrift
 * mit Arial als Rückfall.
 */

.osw-pa {
	--os-red: #e2001a;
	--os-black: #000000;
	--os-text: #2b2b2b;
	--os-bg: #ffffff;
	--os-bg-muted: #f8f9fa;
	--os-border: #e5e5e5;
	--os-border-strong: #c9cbce;
	--os-red-soft: #fdeced;

	--os-gruen: #2e8b4f;
	--os-gelb: #c98a00;
	--os-rot: #c3121f;
	--os-grau: #c9cbce;

	--os-font-sans: "LinotypeUniversW01-Regu", "Univers", Arial, sans-serif;
	--os-font-heading: "LinotypeUniversW01-Bold_723697", "Univers", Arial, sans-serif;

	font-family: var(--os-font-sans);
	color: var(--os-text);
	line-height: 1.5;
	box-sizing: border-box;
}

.osw-pa *,
.osw-pa *::before,
.osw-pa *::after {
	box-sizing: inherit;
}

.osw-pa h2,
.osw-pa h3,
.osw-pa h4 {
	font-family: var(--os-font-heading);
	color: var(--os-black);
	margin: 0 0 0.4em;
	line-height: 1.2;
}

.osw-pa h2 { font-size: 1.6rem; }
.osw-pa h3 { font-size: 1.2rem; }
.osw-pa h4 { font-size: 1rem; }

.osw-pa p { margin: 0 0 0.8em; }
.osw-pa p:last-child { margin-bottom: 0; }

.osw-pa .osw-pa-label {
	display: inline-block;
	font-family: var(--os-font-heading);
	font-size: 0.7rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--os-red);
	margin-bottom: 0.3em;
}

.osw-pa .osw-pa-label-rot {
	background: var(--os-red);
	color: #fff;
	padding: 2px 7px;
	margin: 0 0.4em 0 0;
}

.osw-pa .osw-pa-dim {
	color: #6b6d70;
	font-size: 0.9em;
}

.osw-pa .osw-pa-leer,
.osw-pa .osw-pa-hinweis {
	background: var(--os-bg-muted);
	border-left: 3px solid var(--os-red);
	padding: 16px 18px;
}

.osw-pa .osw-pa-btn {
	display: inline-block;
	background: var(--os-red);
	color: #fff;
	font-family: var(--os-font-heading);
	border: none;
	border-radius: 4px;
	padding: 8px 16px;
	text-decoration: none;
}

.osw-pa .osw-pa-btn:hover,
.osw-pa .osw-pa-btn:focus {
	background: #b80016;
	color: #fff;
}

.osw-pa :focus-visible {
	outline: 2px solid var(--os-red);
	outline-offset: 2px;
}

/* ---------------------------------------------------------------- Kopf */

.osw-pa-kopf {
	border-bottom: 2px solid var(--os-black);
	padding-bottom: 12px;
	margin-bottom: 24px;
}

/* ------------------------------------------------------------ Termine */

.osw-pa-jetzt {
	background: var(--os-bg-muted);
	border-left: 3px solid var(--os-red);
	padding: 12px 16px;
	margin-bottom: 20px;
}

.osw-pa-jetzt strong { display: block; font-family: var(--os-font-heading); }

.osw-pa-liste {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--os-border);
}

.osw-pa-termin {
	display: grid;
	grid-template-columns: 11rem 1fr;
	gap: 0 20px;
	padding: 16px 0;
	border-bottom: 1px solid var(--os-border);
}

.osw-pa-termin.ist-vorbei { opacity: 0.55; }
.osw-pa-termin.ist-ferien { background: var(--os-bg-muted); }
.osw-pa-termin.ist-jetzt { border-left: 3px solid var(--os-red); padding-left: 12px; }

.osw-pa-termin h3 { font-size: 1.05rem; }

.osw-pa-termin-datum { display: flex; flex-direction: column; gap: 2px; }
.osw-pa-termin-datum .osw-pa-datum { font-weight: bold; color: var(--os-black); }
.osw-pa-termin-datum .osw-pa-kw { font-size: 0.8rem; color: #6b6d70; }

.osw-pa-termin-inhalt ul {
	margin: 0.4em 0 0;
	padding-left: 1.1em;
	font-size: 0.93rem;
}

.osw-pa-abgabe {
	margin-top: 0.7em;
	padding: 8px 12px;
	background: #fdeced;
	font-size: 0.9rem;
}

/* ------------------------------------------------------------- Karten */

.osw-pa-karten {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 16px;
}

.osw-pa-karte {
	border: 1px solid var(--os-border);
	background: var(--os-bg);
	padding: 16px 18px;
}

.osw-pa-karte h3 { font-size: 1.05rem; }
.osw-pa-karte h3 a { color: var(--os-black); text-decoration: none; }
.osw-pa-karte h3 a:hover { color: var(--os-red); }

.osw-pa-unterkapitel {
	list-style: none;
	margin: 0.6em 0 0;
	padding: 0;
	border-top: 1px solid var(--os-border);
}

.osw-pa-unterkapitel > li { border-bottom: 1px solid var(--os-border); }
.osw-pa-unterkapitel a { display: block; padding: 6px 0; font-size: 0.92rem; text-decoration: none; color: var(--os-text); }
.osw-pa-unterkapitel a:hover { color: var(--os-red); }

/* --------------------------------------------------------- Ideenpool */

.osw-pa-filter {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin-bottom: 18px;
	padding-bottom: 18px;
	border-bottom: 1px solid var(--os-border);
}

.osw-pa-filter-gruppe { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.osw-pa-filter-gruppe .osw-pa-label { width: 100%; margin: 0; }

.osw-pa-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: var(--os-bg);
	border: 1px solid var(--os-border);
	border-radius: 4px;
	padding: 5px 12px;
	font-family: var(--os-font-sans);
	font-size: 0.88rem;
	color: var(--os-text);
	cursor: pointer;
}

.osw-pa-chip:hover { border-color: #9a9c9f; }

.osw-pa-chip.ist-aktiv {
	background: var(--os-black);
	border-color: var(--os-black);
	color: #fff;
	font-family: var(--os-font-heading);
}

.osw-pa-treffer { font-size: 0.85rem; color: #6b6d70; margin-bottom: 14px; }

.osw-pa-punkt {
	display: inline-block;
	width: 11px;
	height: 11px;
	border-radius: 50%;
	background: var(--os-grau);
	flex: none;
}

/* Die Ampel färbt den Punkt, nicht das ganze Element. Trägt ein Container
   die Ampelklasse, meint sie seinen Punkt und seinen Rand — sonst stünde
   dunkler Text auf dunkelgrünem Grund. */

.osw-pa-grad-gruen .osw-pa-punkt,
.osw-pa-punkt.osw-pa-ampel-gruen,
.osw-pa-ampel-gruen > .osw-pa-punkt { background: var(--os-gruen); }
.osw-pa-grad-gelb .osw-pa-punkt,
.osw-pa-punkt.osw-pa-ampel-gelb,
.osw-pa-ampel-gelb > .osw-pa-punkt { background: var(--os-gelb); }
.osw-pa-grad-rot .osw-pa-punkt,
.osw-pa-punkt.osw-pa-ampel-rot,
.osw-pa-ampel-rot > .osw-pa-punkt { background: var(--os-rot); }
.osw-pa-punkt.osw-pa-ampel-grau,
.osw-pa-ampel-grau > .osw-pa-punkt { background: var(--os-grau); }

.osw-pa-idee-kopf { display: flex; align-items: center; gap: 9px; }
.osw-pa-idee-kopf h3 { margin: 0; }

.osw-pa-idee-felder { margin: 0.7em 0 0; font-size: 0.9rem; }
.osw-pa-idee-felder dt { font-family: var(--os-font-heading); color: var(--os-black); font-size: 0.78rem; letter-spacing: 0.04em; margin-top: 0.6em; }
.osw-pa-idee-felder dd { margin: 0.1em 0 0; }

.osw-pa-tags { margin-top: 0.8em; display: flex; flex-wrap: wrap; gap: 5px; }
.osw-pa-tag { font-size: 0.74rem; background: var(--os-bg-muted); border: 1px solid var(--os-border); padding: 2px 7px; }

.osw-pa-idee[hidden] { display: none; }

/* --------------------------------------------------------- Dashboard */

.osw-pa-jetzt-raster {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 1px;
	background: var(--os-border);
	border: 1px solid var(--os-border);
	margin-bottom: 26px;
}

.osw-pa-kachel {
	background: var(--os-bg-muted);
	padding: 16px 18px;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.osw-pa-kachel.ist-abgabe { background: #fdeced; }
.osw-pa-kachel strong { font-family: var(--os-font-heading); color: var(--os-black); }

.osw-pa-block { margin-bottom: 30px; }

.osw-pa-daten { display: grid; grid-template-columns: 11rem 1fr; gap: 8px 16px; margin: 0; font-size: 0.95rem; }
.osw-pa-daten dt { font-family: var(--os-font-heading); color: var(--os-black); }
.osw-pa-daten dd { margin: 0; }

.osw-pa-ziele { margin: 0.5em 0 0; padding-left: 1.3em; font-size: 0.95rem; }

.osw-pa-meilensteine { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--os-border); }

.osw-pa-meilensteine > li {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 11px 0;
	border-bottom: 1px solid var(--os-border);
}

.osw-pa-meilensteine .osw-pa-punkt { width: 13px; height: 13px; }
.osw-pa-meilensteine .osw-pa-m-text { flex: 1; display: flex; flex-direction: column; }
.osw-pa-meilensteine .osw-pa-m-text strong { font-family: var(--os-font-heading); color: var(--os-black); font-size: 0.95rem; }
.osw-pa-meilensteine .osw-pa-m-status { font-size: 0.82rem; color: #6b6d70; white-space: nowrap; }

.osw-pa-meilensteine .osw-pa-ampel-gruen .osw-pa-punkt { background: var(--os-gruen); }
.osw-pa-meilensteine .osw-pa-ampel-gelb .osw-pa-punkt { background: var(--os-gelb); }
.osw-pa-meilensteine .osw-pa-ampel-rot .osw-pa-punkt { background: var(--os-rot); }
.osw-pa-meilensteine .osw-pa-ampel-rot .osw-pa-m-status { color: var(--os-rot); font-family: var(--os-font-heading); }

/* Der Zustand steht am linken Rand und in einem Hauch Farbe — der Text
   bleibt dabei schwarz auf sehr hell und ist immer lesbar. */

.osw-pa-meilensteine > li { padding-left: 12px; border-left: 3px solid transparent; }
.osw-pa-meilensteine > li.osw-pa-ampel-gruen { border-left-color: var(--os-gruen); background: #f4faf5; }
.osw-pa-meilensteine > li.osw-pa-ampel-gelb  { border-left-color: var(--os-gelb);  background: #fdfaf1; }
.osw-pa-meilensteine > li.osw-pa-ampel-rot   { border-left-color: var(--os-rot);   background: #fdf5f5; }
.osw-pa-meilensteine > li.osw-pa-ampel-grau  { border-left-color: var(--os-border); }

.osw-pa-meilensteine .osw-pa-ampel-gruen .osw-pa-m-status { color: #1a7f37; font-family: var(--os-font-heading); }

/* ------------------------------------------------------------ Budget */

.osw-pa-budget-balken {
	height: 12px;
	background: var(--os-bg-muted);
	border: 1px solid var(--os-border);
	overflow: hidden;
}

.osw-pa-budget-balken span { display: block; height: 100%; background: var(--os-gruen); }
.osw-pa-budget.ist-ueber .osw-pa-budget-balken span { background: var(--os-rot); }
.osw-pa-budget-text { margin: 8px 0 0; font-size: 0.95rem; }
.osw-pa-warnung { color: var(--os-rot); font-family: var(--os-font-heading); font-size: 0.9rem; }

.osw-pa-journal { list-style: none; margin: 0.6em 0 0; padding: 0; }
.osw-pa-journal > li { display: flex; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--os-border); font-size: 0.92rem; }
.osw-pa-journal .osw-pa-datum { color: #6b6d70; white-space: nowrap; }

/* ----------------------------------------------------------- Tabelle */

.osw-pa-tabelle-wrap { overflow-x: auto; border: 1px solid var(--os-border); }

.osw-pa-tabelle { border-collapse: collapse; width: 100%; font-size: 0.9rem; }

.osw-pa-tabelle th,
.osw-pa-tabelle td {
	text-align: left;
	padding: 9px 12px;
	border-bottom: 1px solid var(--os-border);
	vertical-align: middle;
}

.osw-pa-tabelle thead th {
	font-family: var(--os-font-heading);
	font-size: 0.74rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--os-black);
	background: var(--os-bg-muted);
	white-space: nowrap;
}

.osw-pa-tabelle tbody th { font-family: var(--os-font-heading); color: var(--os-black); }
.osw-pa-tabelle tbody th .osw-pa-dim { display: block; font-weight: normal; }
.osw-pa-tabelle tbody tr:last-child td,
.osw-pa-tabelle tbody tr:last-child th { border-bottom: 0; }

.osw-pa-tabelle .osw-pa-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.osw-pa-tabelle .osw-pa-num.ist-ueber { color: var(--os-rot); font-family: var(--os-font-heading); }
.osw-pa-tabelle .osw-pa-note { font-family: var(--os-font-heading); color: var(--os-black); }
.osw-pa-tabelle .osw-pa-spalte-m,
.osw-pa-tabelle .osw-pa-zelle-m { text-align: center; padding-left: 6px; padding-right: 6px; }
.osw-pa-tabelle .osw-pa-thema { max-width: 18rem; }

.osw-pa-legende { margin-top: 12px; font-size: 0.84rem; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.osw-pa-legende .osw-pa-punkt { margin-right: 2px; }

/* ------------------------------------------------------------ Raster */

.osw-pa-gewichtung { margin-bottom: 28px; }

.osw-pa-gewicht-balken { display: flex; height: 14px; border: 1px solid var(--os-border); overflow: hidden; }
.osw-pa-gewicht { display: block; height: 100%; }

.osw-pa-gewicht-arbeitsprozess { background: #7a7c80; }
.osw-pa-gewicht-dokumentation { background: #b3b5b8; }
.osw-pa-gewicht-produkt { background: var(--os-red); }
.osw-pa-gewicht-praesentation { background: var(--os-black); }

.osw-pa-gewicht-legende { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: 0.87rem; }
.osw-pa-gewicht-legende > li { display: flex; align-items: center; gap: 6px; }
.osw-pa-gewicht-legende .osw-pa-punkt { border-radius: 2px; }

.osw-pa-kriterien { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--os-border); }

.osw-pa-kriterien > li {
	display: grid;
	grid-template-columns: 2.6rem 1fr 2.6rem;
	gap: 0 12px;
	padding: 13px 0;
	border-bottom: 1px solid var(--os-border);
}

.osw-pa-k-nr { font-family: var(--os-font-heading); color: var(--os-red); font-size: 0.85rem; }
.osw-pa-k-max { font-family: var(--os-font-heading); color: var(--os-black); text-align: right; font-variant-numeric: tabular-nums; }
.osw-pa-k-text strong { font-family: var(--os-font-heading); color: var(--os-black); display: block; font-size: 0.95rem; }
.osw-pa-k-text p { margin: 0.25em 0 0; font-size: 0.92rem; }
.osw-pa-k-items { margin: 0.5em 0 0; padding-left: 1.2em; font-size: 0.88rem; }

.osw-pa-stufen { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 0.6em; }
.osw-pa-stufe { font-size: 0.78rem; background: var(--os-bg-muted); border: 1px solid var(--os-border); padding: 2px 8px; }
.osw-pa-stufe b { font-family: var(--os-font-heading); color: var(--os-black); margin-left: 4px; }

.osw-pa-skala th[scope="row"] { font-variant-numeric: tabular-nums; }

/* -------------------------------------------------------------- Klein */

@media (max-width: 640px) {
	.osw-pa-termin { grid-template-columns: 1fr; gap: 6px; }
	.osw-pa-termin-datum { flex-direction: row; gap: 10px; align-items: baseline; }
	.osw-pa-daten { grid-template-columns: 1fr; gap: 2px; }
	.osw-pa-daten dd { margin-bottom: 0.6em; }
	.osw-pa-kriterien > li { grid-template-columns: 2.2rem 1fr; }
	.osw-pa-k-max { grid-column: 1; grid-row: 1; text-align: left; }
	.osw-pa-meilensteine > li { flex-wrap: wrap; }
}

/* ================================================================
 * Ab Version 0.2.0: Wegweiser-Reader, Formulare, Budget, Meldungen
 * ============================================================== */

/* ------------------------------------------------------ Meldungen */

.osw-pa .osw-pa-meldung {
	background: #eef7f0;
	border-left: 3px solid var(--os-gruen);
	padding: 12px 16px;
	margin-bottom: 20px;
	font-size: 0.95rem;
}

.osw-pa .osw-pa-meldung.ist-warnung {
	background: #fdeced;
	border-left-color: var(--os-rot);
	font-family: var(--os-font-heading);
}

/* --------------------------------------------- Wegweiser als Reader */

.osw-pa-wegweiser {
	display: grid;
	grid-template-columns: minmax(200px, 17rem) 1fr;
	gap: 36px;
	align-items: start;
}

.osw-pa-reader-nav {
	position: sticky;
	top: 20px;
	border-top: 2px solid var(--os-black);
	padding-top: 12px;
}

.osw-pa-reader-nav ol {
	list-style: none;
	margin: 0;
	padding: 0;
}

.osw-pa-reader-nav a {
	display: flex;
	gap: 10px;
	align-items: baseline;
	padding: 7px 8px 7px 0;
	text-decoration: none;
	color: var(--os-text);
	font-size: 0.92rem;
	line-height: 1.3;
	border-bottom: 1px solid var(--os-border);
}

.osw-pa-reader-nav a:hover { color: var(--os-red); }

.osw-pa-reader-nav a.ist-aktiv {
	font-family: var(--os-font-heading);
	color: var(--os-black);
	border-left: 3px solid var(--os-red);
	padding-left: 9px;
	margin-left: -12px;
}

.osw-pa-reader-nr {
	font-size: 0.72rem;
	color: var(--os-red);
	font-variant-numeric: tabular-nums;
	flex: none;
}

.osw-pa-reader-kapitel h2 { font-size: clamp(1.4rem, 3.4vw, 1.9rem); margin-bottom: 0.3em; }

.osw-pa-reader-lead {
	font-size: 1.05rem;
	color: var(--os-text);
	border-left: 3px solid var(--os-red);
	padding-left: 14px;
	margin-bottom: 1.4em;
}

.osw-pa-reader-text { max-width: 40em; }
.osw-pa-reader-text h3 { margin-top: 1.6em; }
.osw-pa-reader-text ul,
.osw-pa-reader-text ol { padding-left: 1.3em; }
.osw-pa-reader-text li { margin-bottom: 0.35em; }
.osw-pa-reader-text blockquote {
	margin: 1.2em 0;
	padding: 10px 16px;
	background: var(--os-bg-muted);
	border-left: 3px solid var(--os-border);
	font-style: italic;
}
.osw-pa-reader-text pre {
	background: var(--os-bg-muted);
	padding: 12px 14px;
	overflow-x: auto;
	font-size: 0.85rem;
	white-space: pre-wrap;
}
.osw-pa-reader-text table {
	border-collapse: collapse;
	width: 100%;
	margin: 1.2em 0;
	font-size: 0.9rem;
}
.osw-pa-reader-text th,
.osw-pa-reader-text td {
	border: 1px solid var(--os-border);
	padding: 7px 10px;
	text-align: left;
	vertical-align: top;
}
.osw-pa-reader-text th { background: var(--os-bg-muted); font-family: var(--os-font-heading); color: var(--os-black); }

.osw-pa-reader-blaettern {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	margin-top: 2.4em;
	padding-top: 16px;
	border-top: 1px solid var(--os-border);
	font-size: 0.9rem;
}

.osw-pa-reader-blaettern a { color: var(--os-text); text-decoration: none; }
.osw-pa-reader-blaettern a:hover { color: var(--os-red); }
.osw-pa-reader-blaettern .osw-pa-weiter { text-align: right; font-family: var(--os-font-heading); }

/* Ohne JavaScript stehen alle Kapitel untereinander. */
.osw-pa-wegweiser:not(.hat-js) .osw-pa-reader-kapitel {
	padding-bottom: 2.4em;
	margin-bottom: 2.4em;
	border-bottom: 1px solid var(--os-border);
}

/* --------------------------------------------------- Schnellnavigation */

.osw-pa-schnellnav {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 24px;
}

.osw-pa-schnellnav a {
	border: 1px solid var(--os-border);
	border-radius: 4px;
	padding: 6px 13px;
	font-size: 0.88rem;
	text-decoration: none;
	color: var(--os-text);
	background: var(--os-bg);
}

.osw-pa-schnellnav a:hover { border-color: var(--os-red); color: var(--os-red); }

/* --------------------------------------------------------- Formulare */

.osw-pa-form fieldset {
	border: 1px solid var(--os-border);
	padding: 18px 20px 20px;
	margin: 0 0 20px;
	background: var(--os-bg);
}

.osw-pa-form legend {
	font-family: var(--os-font-heading);
	font-size: 1.05rem;
	color: var(--os-black);
	padding: 0 8px 0 0;
}

.osw-pa-form legend .osw-pa-dim { font-family: var(--os-font-sans); font-weight: normal; }

.osw-pa .osw-pa-hilfe {
	font-size: 0.9rem;
	color: #6b6d70;
	max-width: 46em;
	margin-bottom: 0.9em;
}

.osw-pa-form input[type="text"],
.osw-pa-form input[type="date"],
.osw-pa-form input[type="number"],
.osw-pa-form input[type="url"],
.osw-pa-form select,
.osw-pa-form textarea {
	font-family: var(--os-font-sans);
	font-size: 0.95rem;
	color: var(--os-text);
	background: var(--os-bg);
	border: 1px solid var(--os-border-strong, #c9cbce);
	border-radius: 4px;
	padding: 8px 11px;
	width: 100%;
	max-width: 100%;
}

.osw-pa-form textarea { line-height: 1.55; resize: vertical; }

.osw-pa-form input:focus,
.osw-pa-form select:focus,
.osw-pa-form textarea:focus {
	border-color: var(--os-red);
	outline: 2px solid rgba(226, 0, 26, 0.18);
	outline-offset: 0;
}

.osw-pa-form-zeile {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 16px;
	margin-bottom: 14px;
}

.osw-pa-form-zeile label,
.osw-pa-block-label {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin-bottom: 14px;
}

.osw-pa-form-zeile label { margin-bottom: 0; }
.osw-pa-form-zeile .osw-pa-breit { flex: 1 1 20rem; }

.osw-pa-form-zeile label > span,
.osw-pa-block-label > span {
	font-family: var(--os-font-heading);
	font-size: 0.78rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: #6b6d70;
}

.osw-pa-form-aktionen {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 14px;
	align-items: center;
	margin: 18px 0 10px;
}

.osw-pa .osw-pa-btn-leer {
	display: inline-block;
	background: var(--os-bg);
	color: var(--os-text);
	border: 1px solid var(--os-border-strong, #c9cbce);
	border-radius: 4px;
	padding: 8px 16px;
	font-family: var(--os-font-sans);
	font-size: 0.92rem;
	text-decoration: none;
	cursor: pointer;
}

.osw-pa .osw-pa-btn-leer:hover { border-color: var(--os-red); color: var(--os-red); }

.osw-pa .osw-pa-btn { cursor: pointer; font-size: 0.95rem; }

.osw-pa-pruefung { font-size: 0.86rem; margin-top: 0.45em; min-height: 1.2em; }
.osw-pa-pruefung.ist-hinweis { color: var(--os-gelb); }
.osw-pa-pruefung.ist-gut { color: var(--os-gruen); }

.osw-pa-wortzahl { font-size: 0.78rem; color: #9a9c9f; margin-top: 4px; text-align: right; }

.osw-pa-beispiel {
	margin-top: 14px;
	background: var(--os-bg-muted);
	border: 1px solid var(--os-border);
	padding: 10px 14px;
	font-size: 0.9rem;
}

.osw-pa-beispiel summary { cursor: pointer; font-family: var(--os-font-heading); color: var(--os-black); }
.osw-pa-beispiel p { margin-top: 0.7em; }

.osw-pa-check { display: flex; align-items: center; justify-content: center; }
.osw-pa-check input { width: 18px; height: 18px; }

/* ----------------------------------------------- Zeilen-Tabellen */

.osw-pa-ziel-tabelle,
.osw-pa-schritt-tabelle,
.osw-pa-material-tabelle {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-bottom: 14px;
}

.osw-pa-ziel-kopf,
.osw-pa-schritt-kopf,
.osw-pa-material-kopf {
	font-family: var(--os-font-heading);
	font-size: 0.72rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #6b6d70;
}

.osw-pa-ziel-kopf { display: grid; grid-template-columns: 1.7rem 1fr 1fr 1fr; gap: 8px; }
.osw-pa-ziel-zeile { display: grid; grid-template-columns: 1.7rem 1fr 1fr 1fr; gap: 8px; align-items: center; }
.osw-pa-ziel-nr { font-family: var(--os-font-heading); color: var(--os-red); font-size: 0.85rem; }

.osw-pa-schritt-kopf { display: grid; grid-template-columns: 1fr 16rem 3.5rem; gap: 8px; }
.osw-pa-schritt-zeile { display: grid; grid-template-columns: 1fr 16rem 3.5rem; gap: 8px; align-items: center; }

.osw-pa-material-kopf { display: grid; grid-template-columns: 1.6fr 0.6fr 1.2fr 0.8fr 2.5rem; gap: 8px; }
.osw-pa-material-zeile { display: grid; grid-template-columns: 1.6fr 0.6fr 1.2fr 0.8fr 2.5rem; gap: 8px; align-items: center; }
.osw-pa-material-zeile .osw-pa-kosten { text-align: right; font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------ Countdown */

.osw-pa-countdown {
	display: flex;
	align-items: baseline;
	gap: 12px;
	background: var(--os-bg-muted);
	border-left: 3px solid var(--os-black);
	padding: 14px 18px;
	margin-bottom: 20px;
}

.osw-pa-countdown strong {
	font-family: var(--os-font-heading);
	font-size: 2rem;
	color: var(--os-black);
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

.osw-pa-countdown.ist-knapp { border-left-color: var(--os-red); background: #fdeced; }
.osw-pa-countdown.ist-knapp strong { color: var(--os-red); }

.osw-pa-ferienliste { list-style: none; margin: 0; padding: 0; }
.osw-pa-ferienliste > li {
	display: flex;
	justify-content: space-between;
	gap: 14px;
	padding: 8px 0;
	border-bottom: 1px solid var(--os-border);
	font-size: 0.92rem;
}

/* -------------------------------------------------------- Journal */

.osw-pa-journal-liste { list-style: none; margin: 0; padding: 0; }

.osw-pa-journal-liste > li {
	border: 1px solid var(--os-border);
	border-left: 3px solid var(--os-border);
	padding: 14px 16px;
	margin-bottom: 10px;
	background: var(--os-bg);
}

.osw-pa-journal-liste > li:first-child { border-left-color: var(--os-red); }

.osw-pa-journal-kopf {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px 12px;
	margin-bottom: 0.5em;
}

.osw-pa-journal-kopf .osw-pa-datum { color: #6b6d70; font-size: 0.86rem; white-space: nowrap; }
.osw-pa-journal-kopf strong { font-family: var(--os-font-heading); color: var(--os-black); }

.osw-pa-naechster { font-size: 0.9rem; background: var(--os-bg-muted); padding: 7px 11px; }
.osw-pa-naechster .osw-pa-label { margin: 0 8px 0 0; }

.osw-pa-loeschen { margin-top: 8px; }
.osw-pa-loeschen-btn {
	background: none;
	border: 0;
	color: #9a9c9f;
	font-size: 0.8rem;
	cursor: pointer;
	padding: 2px 0;
	text-decoration: underline;
}
.osw-pa-loeschen-btn:hover { color: var(--os-rot); }

/* ---------------------------------------------------- Projektheft */

.osw-pa-kapitel-auto {
	border: 1px dashed var(--os-border-strong, #c9cbce);
	background: var(--os-bg-muted);
	padding: 12px 16px;
	margin-bottom: 14px;
}

.osw-pa-kapitel-auto strong { font-family: var(--os-font-heading); color: var(--os-black); margin-right: 8px; }
.osw-pa-kapitel-auto p { margin: 0.4em 0 0; font-size: 0.88rem; }

.osw-pa-kapitel-feld legend .osw-pa-dim { font-size: 0.82rem; margin-left: 8px; }

/* ------------------------------------------------ Meilenstein-Knopf */

.osw-pa-m-form { margin: 0; flex: none; }

.osw-pa-m-btn {
	background: var(--os-bg);
	border: 1px solid var(--os-border-strong, #c9cbce);
	border-radius: 4px;
	padding: 5px 11px;
	font-family: var(--os-font-sans);
	font-size: 0.8rem;
	color: var(--os-text);
	cursor: pointer;
	white-space: nowrap;
}

.osw-pa-m-btn:hover { border-color: var(--os-red); color: var(--os-red); }

.osw-pa-m-btn.ist-erledigt {
	background: var(--os-gruen);
	border-color: var(--os-gruen);
	color: #fff;
}

/* ------------------------------------------------------------ Klein */

@media (max-width: 860px) {
	.osw-pa-wegweiser { grid-template-columns: 1fr; gap: 20px; }
	.osw-pa-reader-nav { position: static; }
	.osw-pa-reader-nav ol { columns: 2; column-gap: 20px; }
	.osw-pa-reader-nav a.ist-aktiv { margin-left: 0; padding-left: 9px; }
}

@media (max-width: 640px) {
	.osw-pa-reader-nav ol { columns: 1; }

	.osw-pa-ziel-kopf,
	.osw-pa-schritt-kopf,
	.osw-pa-material-kopf { display: none; }

	.osw-pa-ziel-zeile,
	.osw-pa-schritt-zeile,
	.osw-pa-material-zeile {
		grid-template-columns: 1fr;
		gap: 6px;
		border: 1px solid var(--os-border);
		padding: 12px;
		background: var(--os-bg-muted);
	}

	.osw-pa-ziel-nr { color: var(--os-red); font-size: 0.75rem; }
	.osw-pa-check { justify-content: flex-start; }
	.osw-pa-reader-blaettern { flex-direction: column; }
	.osw-pa-reader-blaettern .osw-pa-weiter { text-align: left; }
}

/* ================================================================
 * Ab Version 0.3.0: Standortgespräche und Beurteilung
 * ============================================================== */

/* -------------------------------------------- Standortgespräche */

.osw-pa-gespraech {
	border: 1px solid var(--os-border);
	border-left: 3px solid var(--os-grau);
	background: var(--os-bg);
	padding: 18px 20px 20px;
	margin-bottom: 18px;
}

.osw-pa-gespraech.osw-pa-ampel-gruen { border-left-color: var(--os-gruen); }
.osw-pa-gespraech.osw-pa-ampel-gelb { border-left-color: var(--os-gelb); }
.osw-pa-gespraech.osw-pa-ampel-rot { border-left-color: var(--os-rot); }

.osw-pa-gespraech-kopf {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin-bottom: 12px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--os-border);
}

.osw-pa-gespraech-kopf > div { flex: 1; }
.osw-pa-gespraech-kopf h3 { margin: 0 0 0.15em; font-size: 1.1rem; }
.osw-pa-gespraech-kopf .osw-pa-punkt { width: 13px; height: 13px; margin-top: 5px; }

.osw-pa-gespraech.osw-pa-ampel-gruen .osw-pa-punkt { background: var(--os-gruen); }
.osw-pa-gespraech.osw-pa-ampel-gelb .osw-pa-punkt { background: var(--os-gelb); }
.osw-pa-gespraech.osw-pa-ampel-rot .osw-pa-punkt { background: var(--os-rot); }

.osw-pa-gespraech-status {
	font-family: var(--os-font-heading);
	font-size: 0.75rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: #6b6d70;
	white-space: nowrap;
}

.osw-pa-gespraech-termin {
	background: var(--os-bg-muted);
	padding: 8px 12px;
	font-size: 0.92rem;
	margin-bottom: 0.9em;
}

.osw-pa-gespraech-termin .osw-pa-label { margin: 0 8px 0 0; }

.osw-pa-gespraech-ergebnis {
	background: var(--os-bg-muted);
	padding: 14px 16px;
	margin-top: 1em;
}

.osw-pa-gespraech-ergebnis h4 { margin: 0 0 0.3em; }
.osw-pa-gespraech-ergebnis h4 + p { margin-bottom: 1em; }

.osw-pa-abmachung {
	border-left: 3px solid var(--os-red);
	padding-left: 12px;
	font-family: var(--os-font-heading);
	color: var(--os-black);
}

.osw-pa-frage-hilfe {
	display: block;
	font-style: normal;
	font-size: 0.84rem;
	color: #9a9c9f;
	text-transform: none;
	letter-spacing: 0;
	margin-bottom: 2px;
}

/* Gesprächsblock in der Beurteilungsansicht */

.osw-pa-gespraech-lp {
	border: 1px solid var(--os-border);
	border-left: 3px solid var(--os-grau);
	background: var(--os-bg);
	margin-bottom: 10px;
}

.osw-pa-gespraech-lp.osw-pa-ampel-gruen { border-left-color: var(--os-gruen); }
.osw-pa-gespraech-lp.osw-pa-ampel-gelb { border-left-color: var(--os-gelb); }
.osw-pa-gespraech-lp.osw-pa-ampel-rot { border-left-color: var(--os-rot); }

.osw-pa-gespraech-lp summary {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 16px;
	cursor: pointer;
	flex-wrap: wrap;
}

.osw-pa-gespraech-lp summary strong { font-family: var(--os-font-heading); color: var(--os-black); }
.osw-pa-gespraech-lp summary .osw-pa-gespraech-status { margin-left: auto; }
.osw-pa-gespraech-lp.osw-pa-ampel-gruen summary .osw-pa-punkt { background: var(--os-gruen); }
.osw-pa-gespraech-lp.osw-pa-ampel-gelb summary .osw-pa-punkt { background: var(--os-gelb); }
.osw-pa-gespraech-lp.osw-pa-ampel-rot summary .osw-pa-punkt { background: var(--os-rot); }

.osw-pa-gespraech-inhalt { padding: 0 16px 16px; border-top: 1px solid var(--os-border); }
.osw-pa-gespraech-inhalt h4 { margin-top: 1.2em; }

.osw-pa-vorbereitung { margin: 0.6em 0 1.4em; font-size: 0.93rem; }
.osw-pa-vorbereitung dt {
	font-family: var(--os-font-heading);
	color: var(--os-black);
	font-size: 0.85rem;
	margin-top: 0.9em;
}
.osw-pa-vorbereitung dd {
	margin: 0.15em 0 0;
	padding-left: 12px;
	border-left: 2px solid var(--os-border);
}

.osw-pa-check-zeile {
	display: flex;
	align-items: center;
	gap: 9px;
	margin-bottom: 14px;
	font-size: 0.95rem;
}

.osw-pa-check-zeile input { width: 18px; height: 18px; }

/* ------------------------------------------------ Beurteilung */

.osw-pa-punktestand {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 1px;
	background: var(--os-border);
	border: 1px solid var(--os-border);
	margin-bottom: 22px;
	position: sticky;
	top: 0;
	z-index: 5;
}

.osw-pa-punktestand > div {
	background: var(--os-bg-muted);
	padding: 12px 16px;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.osw-pa-punktestand strong {
	font-family: var(--os-font-heading);
	font-size: 1.5rem;
	color: var(--os-black);
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
}

.osw-pa-punktestand strong .osw-pa-dim { font-size: 0.9rem; }

.osw-pa-kriterien-feld { padding-top: 14px; }

.osw-pa-kriterium {
	display: grid;
	grid-template-columns: 1fr 17rem;
	gap: 12px 20px;
	padding: 14px 0;
	border-bottom: 1px solid var(--os-border);
	align-items: start;
}

.osw-pa-kriterium:last-child { border-bottom: 0; }
.osw-pa-kriterium.ist-abweichung { background: #fffbf0; }

.osw-pa-kriterium-text { display: flex; gap: 12px; }
.osw-pa-kriterium-text strong { font-family: var(--os-font-heading); color: var(--os-black); font-size: 0.95rem; display: block; }
.osw-pa-kriterium-text p { margin: 0.2em 0 0; font-size: 0.9rem; }

.osw-pa-selbsteinschaetzung {
	margin-top: 0.5em !important;
	font-size: 0.86rem !important;
	background: var(--os-bg-muted);
	padding: 4px 9px;
	display: inline-block;
}

.osw-pa-selbsteinschaetzung .osw-pa-label { margin: 0 6px 0 0; }
.osw-pa-selbsteinschaetzung em { color: var(--os-gelb); font-style: normal; margin-left: 8px; }

.osw-pa-stufenwahl { display: flex; flex-wrap: wrap; gap: 6px; }

.osw-pa-stufe-wahl { cursor: pointer; }
.osw-pa-stufe-wahl input { position: absolute; opacity: 0; width: 0; height: 0; }

.osw-pa-stufe-wahl span {
	display: inline-flex;
	align-items: baseline;
	gap: 5px;
	border: 1px solid var(--os-border-strong);
	border-radius: 4px;
	padding: 6px 11px;
	font-size: 0.85rem;
	background: var(--os-bg);
	white-space: nowrap;
}

.osw-pa-stufe-wahl span b {
	font-family: var(--os-font-heading);
	color: var(--os-black);
	font-variant-numeric: tabular-nums;
}

.osw-pa-stufe-wahl:hover span { border-color: var(--os-red); }

.osw-pa-stufe-wahl input:checked + span {
	background: var(--os-black);
	border-color: var(--os-black);
	color: #fff;
}

.osw-pa-stufe-wahl input:checked + span b { color: #fff; }

.osw-pa-stufe-wahl input:focus-visible + span {
	outline: 2px solid var(--os-red);
	outline-offset: 2px;
}

@media (max-width: 760px) {
	.osw-pa-kriterium { grid-template-columns: 1fr; }
	.osw-pa-punktestand { position: static; }
}

/* ================================================================
 * Ab Version 0.4.0: Kopfleiste, Zeitstrahl, Übersicht
 * ============================================================== */

/* -------------------------------------------------- Kopfleiste */

.osw-pa-kopfleiste {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 18px;
	padding: 10px 0 12px;
	margin-bottom: 26px;
	border-bottom: 2px solid var(--os-black);
}

.osw-pa-zurueck-btn {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	background: var(--os-black);
	color: #fff;
	border-radius: 4px;
	padding: 7px 14px 7px 10px;
	font-family: var(--os-font-heading);
	font-size: 0.85rem;
	text-decoration: none;
	flex: none;
}

.osw-pa-zurueck-btn:hover,
.osw-pa-zurueck-btn:focus { background: var(--os-red); color: #fff; }

.osw-pa-fahne { display: inline-flex; gap: 3px; }
.osw-pa-fahne span { display: block; width: 8px; height: 15px; transform: skewX(-14deg); }
.osw-pa-fahne span:first-child { background: var(--os-red); }
.osw-pa-fahne span:last-child { background: #fff; }

.osw-pa-kopfleiste-links {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 6px;
	flex: 1;
}

.osw-pa-kopfleiste-links a {
	padding: 5px 10px;
	border-radius: 3px;
	font-size: 0.85rem;
	color: var(--os-text);
	text-decoration: none;
	white-space: nowrap;
}

.osw-pa-kopfleiste-links a:hover { background: var(--os-bg-muted); color: var(--os-red); }

.osw-pa-kopfleiste-links a.ist-aktiv {
	background: var(--os-red-soft);
	color: var(--os-red);
	font-family: var(--os-font-heading);
}

/* Ab 0.12.0: die Leiste ist in Gruppen geteilt. Links das, woran man
   arbeitet, rechts abgesetzt das, worin man nachschlägt. */

.osw-pa-kopf-gruppe { display: inline-flex; flex-wrap: wrap; gap: 4px 6px; }

.osw-pa-kopf-gruppe > a { font-family: var(--os-font-heading); }

.osw-pa-kopf-lesen > a {
	font-family: var(--os-font-sans);
	color: #5a5a5a;
}

.osw-pa-kopf-trenner {
	width: 1px;
	align-self: stretch;
	min-height: 20px;
	background: var(--os-border);
	margin: 0 4px;
}

.osw-pa-kopf-rechts { margin-left: auto; }

.osw-pa-zurueck-btn.ist-aktiv { background: var(--os-red); }

/* ------------------------------------- Bausteine des eigenen Projekts */

.osw-pa-bausteinleiste {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 6px;
	margin: -20px 0 26px;
	padding: 0 0 10px;
	border-bottom: 1px solid var(--os-border);
}

.osw-pa-bausteinleiste a {
	padding: 4px 10px;
	border-radius: 3px;
	font-size: 0.82rem;
	color: #5a5a5a;
	text-decoration: none;
	white-space: nowrap;
}

.osw-pa-bausteinleiste a:hover { background: var(--os-bg-muted); color: var(--os-red); }

.osw-pa-bausteinleiste a.ist-aktiv {
	background: var(--os-black);
	color: #fff;
	font-family: var(--os-font-heading);
}

/* ------------------------------------------------ Kopf Übersicht */

.osw-pa-start-kopf {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 26px;
	flex-wrap: wrap;
}

.osw-pa-start-kopf > div:nth-child(2) { flex: 1; }
.osw-pa-start-kopf h2 { margin: 0; font-size: clamp(1.5rem, 4vw, 2.1rem); }
.osw-pa-start-kopf .osw-pa-label { margin: 0; }

.osw-pa-start-kopf .osw-pa-fahne span { width: 14px; height: 26px; }
.osw-pa-start-kopf .osw-pa-fahne span:last-child { background: var(--os-black); }

.osw-pa-start-phase { text-align: right; }
.osw-pa-start-phase strong { font-family: var(--os-font-heading); font-size: 1.1rem; color: var(--os-black); display: block; }

/* -------------------------------------------------- Zeitstrahl */

.osw-pa-zeitstrahl-block {
	background: var(--os-bg-muted);
	border: 1px solid var(--os-border);
	padding: 20px 22px 16px;
}

.osw-pa-zs-kopf {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 16px;
	flex-wrap: wrap;
	margin-bottom: 22px;
}

.osw-pa-zs-kopf > div:first-child { display: flex; flex-direction: column; gap: 2px; }
.osw-pa-zs-kopf strong { font-family: var(--os-font-heading); color: var(--os-black); font-size: 1.05rem; }

.osw-pa-zs-abgabe {
	display: flex;
	flex-direction: column;
	gap: 2px;
	background: var(--os-bg);
	border: 1px solid var(--os-border);
	border-left: 3px solid var(--os-black);
	padding: 10px 14px;
	text-decoration: none;
	color: var(--os-text);
	min-width: 15rem;
}

.osw-pa-zs-abgabe:hover { border-color: var(--os-red); border-left-color: var(--os-red); }
.osw-pa-zs-abgabe.ist-knapp { border-left-color: var(--os-red); background: var(--os-red-soft); }
.osw-pa-zs-abgabe strong { font-family: var(--os-font-heading); color: var(--os-black); font-size: 0.95rem; }

.osw-pa-zeitstrahl { position: relative; }

.osw-pa-zs-achse {
	position: relative;
	height: 26px;
	background: #dfe1e3;
	border-radius: 3px;
	margin-bottom: 8px;
}

.osw-pa-zs-gelaufen {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	background: #b4b7ba;
	border-radius: 3px 0 0 3px;
}

.osw-pa-zs-ferien {
	position: absolute;
	top: 0;
	height: 100%;
	background: repeating-linear-gradient(45deg, #fff 0 4px, #eceef0 4px 8px);
	z-index: 2;
}

.osw-pa-zs-woche {
	position: absolute;
	top: 0;
	height: 100%;
	background: var(--os-black);
	z-index: 3;
}

.osw-pa-zs-meilenstein {
	position: absolute;
	top: 50%;
	width: 13px;
	height: 13px;
	margin: -6.5px 0 0 -6.5px;
	border-radius: 50%;
	background: var(--os-red);
	border: 2px solid #fff;
	z-index: 4;
	cursor: help;
}

.osw-pa-zs-meilenstein.ist-vorbei { background: #9a9c9f; }

.osw-pa-zs-heute {
	position: absolute;
	top: -6px;
	bottom: -6px;
	width: 2px;
	background: var(--os-black);
	z-index: 5;
}

.osw-pa-zs-heute b {
	position: absolute;
	top: -18px;
	left: 50%;
	transform: translateX(-50%);
	font-family: var(--os-font-heading);
	font-size: 0.65rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--os-black);
	background: var(--os-bg-muted);
	padding: 0 4px;
	white-space: nowrap;
}

.osw-pa-zs-marken {
	display: flex;
	justify-content: space-between;
	font-size: 0.75rem;
	color: #6b6d70;
	font-variant-numeric: tabular-nums;
}

.osw-pa-zs-legende {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 6px 18px;
	margin: 12px 0 0;
	padding: 0;
	font-size: 0.78rem;
	color: #6b6d70;
}

.osw-pa-zs-legende li { display: flex; align-items: center; gap: 6px; }

.osw-pa-zs-key { display: inline-block; width: 11px; height: 11px; }
.osw-pa-zs-key.ist-meilenstein { border-radius: 50%; background: var(--os-red); }
.osw-pa-zs-key.ist-woche { background: var(--os-black); }
.osw-pa-zs-key.ist-ferien { background: repeating-linear-gradient(45deg, #fff 0 3px, #dfe1e3 3px 6px); border: 1px solid var(--os-border); }

/* ------------------------------------------------------- Ringe */

.osw-pa-ring { position: relative; width: 64px; height: 64px; flex: none; }
.osw-pa-ring svg { width: 100%; height: 100%; display: block; }

.osw-pa-ring-mitte {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--os-font-heading);
	font-size: 0.82rem;
	color: var(--os-black);
	font-variant-numeric: tabular-nums;
}

.osw-pa-ring-text { font-size: 0.78rem; color: #6b6d70; }

/* -------------------------------------------------- Kennzahlen */

.osw-pa-kennzahlen {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 1px;
	background: var(--os-border);
	border: 1px solid var(--os-border);
}

.osw-pa-kz {
	background: var(--os-bg);
	padding: 16px 18px;
	display: flex;
	align-items: center;
	gap: 14px;
}

.osw-pa-kz.ist-warnung { background: var(--os-red-soft); }
.osw-pa-kz > div:last-child { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.osw-pa-kz strong { font-family: var(--os-font-heading); color: var(--os-black); font-size: 1rem; }
.osw-pa-kz .osw-pa-label { margin: 0; }

.osw-pa-kz-zahl {
	font-family: var(--os-font-heading);
	font-size: 2.4rem;
	line-height: 1;
	color: var(--os-black);
	font-variant-numeric: tabular-nums;
	flex: none;
	min-width: 2.2ch;
	text-align: right;
}

.osw-pa-kz.ist-warnung .osw-pa-kz-zahl { color: var(--os-rot); }

/* ---------------------------------------------- Handlungsbedarf */

.osw-pa-handlungen { list-style: none; margin: 0; padding: 0; }

.osw-pa-handlungen > li {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	background: var(--os-bg);
	border: 1px solid var(--os-border);
	border-left: 3px solid var(--os-grau);
	padding: 14px 16px;
	margin-bottom: 8px;
	flex-wrap: wrap;
}

.osw-pa-handlungen > li.osw-pa-ampel-rot { border-left-color: var(--os-rot); }
.osw-pa-handlungen > li.osw-pa-ampel-gelb { border-left-color: var(--os-gelb); }
.osw-pa-handlungen > li.osw-pa-ampel-rot .osw-pa-punkt { background: var(--os-rot); }
.osw-pa-handlungen > li.osw-pa-ampel-gelb .osw-pa-punkt { background: var(--os-gelb); }
.osw-pa-handlungen .osw-pa-punkt { margin-top: 5px; width: 12px; height: 12px; }

.osw-pa-handlung-text { flex: 1; min-width: 14rem; }
.osw-pa-handlung-text strong { font-family: var(--os-font-heading); color: var(--os-black); display: block; }
.osw-pa-handlung-text p { margin: 0.2em 0 0; font-size: 0.92rem; }

.osw-pa-namen {
	display: inline-block;
	font-size: 0.85rem !important;
	color: #6b6d70;
	background: var(--os-bg-muted);
	border-left: 2px solid var(--os-border-strong);
	padding: 4px 10px;
	margin-top: 0.5em !important;
	max-width: 100%;
}

.osw-pa-erledigt {
	display: flex;
	align-items: center;
	gap: 12px;
	background: #eef7f0;
	border-left: 3px solid var(--os-gruen);
	padding: 14px 18px;
}

.osw-pa-erledigt strong { display: block; font-family: var(--os-font-heading); color: var(--os-black); }
.osw-pa-erledigt .osw-pa-punkt { width: 13px; height: 13px; }

/* ------------------------------------------------ Gruppenkacheln */

.osw-pa-gruppe {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
	gap: 10px;
}

.osw-pa-sus-karte {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	text-align: center;
	background: var(--os-bg);
	border: 1px solid var(--os-border);
	padding: 16px 12px 14px;
	text-decoration: none;
	color: var(--os-text);
}

.osw-pa-sus-karte:hover { border-color: var(--os-red); }
.osw-pa-sus-name { font-family: var(--os-font-heading); color: var(--os-black); font-size: 0.92rem; margin-top: 4px; }
.osw-pa-sus-thema { font-size: 0.8rem; color: #6b6d70; line-height: 1.35; }
.osw-pa-sus-ampeln { display: flex; gap: 4px; margin-top: 6px; }
.osw-pa-sus-ampeln .osw-pa-punkt { width: 9px; height: 9px; }

/* ---------------------------------------------- Schülerübersicht */

.osw-pa-mein-stand {
	display: flex;
	align-items: center;
	gap: 24px;
	background: var(--os-bg-muted);
	border: 1px solid var(--os-border);
	border-left: 3px solid var(--os-red);
	padding: 22px 24px;
	flex-wrap: wrap;
}

.osw-pa-mein-ring { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: none; }
.osw-pa-mein-ring .osw-pa-ring { width: 92px; height: 92px; }
.osw-pa-mein-ring .osw-pa-ring-mitte { font-size: 1rem; }

.osw-pa-mein-text { flex: 1; min-width: 16rem; }
.osw-pa-mein-text h3 { margin-bottom: 0.3em; }

.osw-pa-mein-leitfrage {
	font-size: 1.02rem;
	border-left: 3px solid var(--os-border-strong);
	padding-left: 12px;
	margin-bottom: 1em;
}

.osw-pa-schritte { list-style: none; margin: 0; padding: 0; counter-reset: baustein; }

.osw-pa-schritte > li {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 12px 14px;
	border: 1px solid var(--os-border);
	border-left: 3px solid var(--os-border-strong);
	margin-bottom: 6px;
	background: var(--os-bg);
	flex-wrap: wrap;
}

.osw-pa-schritte > li.ist-erledigt { border-left-color: var(--os-gruen); background: #fbfdfb; }

.osw-pa-schritt-nr {
	font-family: var(--os-font-heading);
	font-size: 0.9rem;
	color: var(--os-red);
	font-variant-numeric: tabular-nums;
	width: 1.8rem;
	flex: none;
}

.osw-pa-schritte > li.ist-erledigt .osw-pa-schritt-nr { color: var(--os-gruen); font-size: 1.1rem; }

.osw-pa-schritt-text { flex: 1; display: flex; flex-direction: column; min-width: 10rem; }
.osw-pa-schritt-text strong { font-family: var(--os-font-heading); color: var(--os-black); font-size: 0.95rem; }

/* --------------------------------------------------- Kartenlink */

.osw-pa-karte-link { display: block; text-decoration: none; color: var(--os-text); }
.osw-pa-karte-link:hover { border-color: var(--os-red); }
.osw-pa-karte-link h4 { font-size: 1.02rem; margin-bottom: 0.3em; color: var(--os-black); }
.osw-pa-karte-link:hover h4 { color: var(--os-red); }

.osw-pa-mehr {
	float: right;
	font-family: var(--os-font-sans);
	font-size: 0.85rem;
	font-weight: normal;
	text-decoration: none;
	color: var(--os-red);
}

/* -------------------------------------------------------- Klein */

@media (max-width: 640px) {
	.osw-pa-kopfleiste-links { gap: 2px; }
	.osw-pa-kopfleiste-links a { font-size: 0.8rem; padding: 4px 8px; }
	.osw-pa-kopf-trenner { display: none; }
	.osw-pa-kopf-rechts { margin-left: 0; }
	.osw-pa-bausteinleiste { margin-top: -14px; }
	.osw-pa-bausteinleiste a { font-size: 0.78rem; padding: 4px 8px; }
	.osw-pa-start-phase { text-align: left; }
	.osw-pa-kz-zahl { font-size: 1.9rem; }
	.osw-pa-zs-abgabe { min-width: 0; width: 100%; }
	.osw-pa-mein-stand { gap: 16px; }
}

/* ================================================================
 * Ab Version 0.5.0: Anmeldung, Profil, Leitfaden
 * ============================================================== */

/* ------------------------------------------------- Anmeldung */

.osw-pa-code-feld {
	font-family: var(--os-font-mono, "SFMono-Regular", Consolas, monospace);
	font-size: 1.25rem !important;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-align: center;
	max-width: 16rem !important;
}

.osw-pa-checkliste {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 6px 16px;
	margin-top: 6px;
}

.osw-pa-checkliste .osw-pa-check-zeile {
	align-items: flex-start;
	margin-bottom: 0;
	padding: 8px 10px;
	border: 1px solid var(--os-border);
	background: var(--os-bg);
}

.osw-pa-checkliste .osw-pa-check-zeile:hover { border-color: var(--os-border-strong); }
.osw-pa-checkliste .osw-pa-check-zeile input { margin-top: 2px; }
.osw-pa-checkliste .osw-pa-check-zeile strong { display: block; font-family: var(--os-font-heading); color: var(--os-black); font-size: 0.9rem; }

.osw-pa-teilnahme {
	background: var(--os-red-soft);
	border-left: 3px solid var(--os-red);
	padding: 12px 14px;
	font-size: 1rem;
}

.osw-pa-teilnahme input { width: 20px; height: 20px; }

.osw-pa-form fieldset.ist-dabei { border-left: 3px solid var(--os-gruen); }

/* --------------------------------------------------- Leitfaden */

.osw-pa-lf-stand {
	display: flex;
	align-items: center;
	gap: 18px;
	background: var(--os-bg-muted);
	border: 1px solid var(--os-border);
	border-left: 3px solid var(--os-red);
	padding: 18px 20px;
	margin-bottom: 22px;
	flex-wrap: wrap;
}

.osw-pa-lf-stand > div { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 14rem; }
.osw-pa-lf-stand strong { font-family: var(--os-font-heading); color: var(--os-black); font-size: 1.05rem; }

.osw-pa-lf-liste { list-style: none; margin: 0; padding: 0; }

.osw-pa-lf-liste > li {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 14px 16px;
	border: 1px solid var(--os-border);
	border-left: 3px solid var(--os-border-strong);
	margin-bottom: 7px;
	background: var(--os-bg);
	flex-wrap: wrap;
}

.osw-pa-lf-liste > li.osw-pa-lf-erledigt { border-left-color: var(--os-gruen); background: #fbfdfb; }
.osw-pa-lf-liste > li.osw-pa-lf-laufend { border-left-color: var(--os-gelb); }
.osw-pa-lf-liste > li.osw-pa-lf-info { border-left-color: var(--os-border); opacity: 0.85; }
.osw-pa-lf-liste > li.ist-ueberfaellig { border-left-color: var(--os-rot); background: var(--os-red-soft); }

.osw-pa-lf-marke {
	font-family: var(--os-font-heading);
	font-size: 1.1rem;
	width: 1.4rem;
	text-align: center;
	flex: none;
	color: var(--os-border-strong);
	line-height: 1.5;
}

.osw-pa-lf-erledigt .osw-pa-lf-marke { color: var(--os-gruen); }
.osw-pa-lf-laufend .osw-pa-lf-marke { color: var(--os-gelb); }

.osw-pa-lf-text { flex: 1; min-width: 14rem; display: flex; flex-direction: column; gap: 3px; }

.osw-pa-lf-wann {
	font-family: var(--os-font-heading);
	font-size: 0.72rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--os-red);
}

.osw-pa-lf-info .osw-pa-lf-wann { color: #9a9c9f; }
.osw-pa-lf-text strong { font-family: var(--os-font-heading); color: var(--os-black); font-size: 0.98rem; }
.osw-pa-lf-text p { margin: 0; font-size: 0.9rem; }

.osw-pa-lf-detail {
	display: inline-block;
	align-self: flex-start;
	font-size: 0.82rem;
	background: var(--os-bg-muted);
	border: 1px solid var(--os-border);
	padding: 2px 8px;
	margin-top: 3px;
	color: #6b6d70;
}

.osw-pa-lf-beide { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 26px; }
.osw-pa-lf-beide h3 { border-bottom: 2px solid var(--os-black); padding-bottom: 8px; margin-bottom: 14px; }

/* ------------------------------------ Nächste Schritte, Übersicht */

.osw-pa-naechste { list-style: none; margin: 0; padding: 0; }

.osw-pa-naechste > li {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 13px 16px;
	border: 1px solid var(--os-border);
	border-left: 3px solid var(--os-red);
	margin-bottom: 7px;
	background: var(--os-bg);
	flex-wrap: wrap;
}

.osw-pa-naechste > li.ist-spaet { background: var(--os-red-soft); }

.osw-pa-naechste-nr {
	font-family: var(--os-font-mono, monospace);
	font-size: 0.85rem;
	color: var(--os-red);
	flex: none;
}

.osw-pa-naechste-text { flex: 1; display: flex; flex-direction: column; min-width: 12rem; }
.osw-pa-naechste-text strong { font-family: var(--os-font-heading); color: var(--os-black); font-size: 0.98rem; }

/* ------------------------------------------------------- Drucken */

@media print {
	.osw-pa-kopfleiste,
	.osw-pa-bausteinleiste,
	.no-print,
	.osw-pa-btn-leer,
	.osw-pa-btn { display: none !important; }

	.osw-pa-lf-liste > li { break-inside: avoid; border-left-width: 3px; }
	.osw-pa-leitfaden { font-size: 10pt; }
	.osw-pa-lf-beide { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------
 * Projektidee: Handlungsfeld wählen
 * ------------------------------------------------------------------ */

.osw-pa .osw-pa-feldwahl {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: 0.6rem;
	margin-top: 0.6rem;
}

.osw-pa .osw-pa-feldwahl-option {
	display: block;
	position: relative;
	padding: 0.85rem 0.9rem 0.85rem 2.4rem;
	border: 1px solid var(--os-border);
	background: var(--os-bg);
	cursor: pointer;
	transition: border-color 0.15s, background-color 0.15s;
}

.osw-pa .osw-pa-feldwahl-option:hover {
	border-color: var(--os-border-strong);
	background: var(--os-bg-muted);
}

.osw-pa .osw-pa-feldwahl-option input[type="radio"] {
	position: absolute;
	top: 1rem;
	left: 0.9rem;
	margin: 0;
}

.osw-pa .osw-pa-feldwahl-option:has(input:checked),
.osw-pa .osw-pa-feldwahl-option.ist-gewaehlt {
	border-color: var(--os-red);
	background: var(--os-red-soft);
}

.osw-pa .osw-pa-feldwahl-titel {
	display: block;
	font-family: var(--os-font-heading);
	color: var(--os-black);
	line-height: 1.25;
}

.osw-pa .osw-pa-feldwahl-text {
	display: block;
	margin-top: 0.25em;
	font-size: 0.86rem;
	color: #6b6d70;
	line-height: 1.4;
}

.osw-pa .osw-pa-quittung {
	margin: 1rem 0 1.4rem;
	padding: 0.7rem 0.9rem;
	border-left: 3px solid var(--os-gruen);
	background: var(--os-bg-muted);
	font-size: 0.92rem;
}

.osw-pa .osw-pa-idee-weiter {
	margin-top: 1.6rem;
	padding-top: 1rem;
	border-top: 1px solid var(--os-border);
	font-size: 0.92rem;
	color: #6b6d70;
}

/* ---------------------------------------------------------------------
 * Anmeldung: wer bin ich?
 * ------------------------------------------------------------------ */

.osw-pa .osw-pa-anmelden-lead { max-width: 42em; margin-bottom: 1.4rem; }

.osw-pa .osw-pa-rollenwahl {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
	gap: 1rem;
	margin-bottom: 1.6rem;
}

.osw-pa .osw-pa-rollenkarte {
	position: relative;
	display: block;
	padding: 1.5rem 3rem 1.4rem 1.4rem;
	border: 1px solid var(--os-border);
	border-top: 3px solid var(--os-black);
	background: var(--os-bg);
	text-decoration: none;
	color: var(--os-text);
	transition: border-color 0.15s, background-color 0.15s, transform 0.15s;
}

.osw-pa .osw-pa-rollenkarte.ist-lp { border-top-color: var(--os-red); }

.osw-pa .osw-pa-rollenkarte:hover,
.osw-pa .osw-pa-rollenkarte:focus {
	border-color: var(--os-border-strong);
	background: var(--os-bg-muted);
}

.osw-pa .osw-pa-rollenkarte:hover .osw-pa-rollenkarte-pfeil {
	transform: translateX(3px);
	color: var(--os-red);
}

.osw-pa .osw-pa-rollenkarte-marke {
	display: inline-block;
	font-family: var(--os-font-heading);
	font-size: 0.68rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #fff;
	background: var(--os-black);
	padding: 2px 8px;
	margin-bottom: 0.7rem;
}

.osw-pa .osw-pa-rollenkarte.ist-lp .osw-pa-rollenkarte-marke { background: var(--os-red); }

.osw-pa .osw-pa-rollenkarte-titel {
	display: block;
	font-family: var(--os-font-heading);
	font-size: 1.15rem;
	line-height: 1.2;
	color: var(--os-black);
	margin-bottom: 0.4rem;
}

.osw-pa .osw-pa-rollenkarte-text {
	display: block;
	font-size: 0.92rem;
	color: #6b6d70;
	line-height: 1.45;
}

.osw-pa .osw-pa-rollenkarte-code {
	display: block;
	margin-top: 0.9rem;
	padding-top: 0.7rem;
	border-top: 1px solid var(--os-border);
	font-size: 0.84rem;
	color: #6b6d70;
}

.osw-pa .osw-pa-rollenkarte-code code {
	font-family: Consolas, "SFMono-Regular", monospace;
	background: var(--os-bg-muted);
	padding: 1px 5px;
	color: var(--os-black);
}

.osw-pa .osw-pa-rollenkarte-pfeil {
	position: absolute;
	top: 1.4rem;
	right: 1.3rem;
	font-size: 1.3rem;
	line-height: 1;
	color: var(--os-border-strong);
	transition: transform 0.15s, color 0.15s;
}

.osw-pa .osw-pa-anmelden-fuss {
	font-size: 0.9rem;
	color: #6b6d70;
	padding-top: 1rem;
	border-top: 1px solid var(--os-border);
}

.osw-pa .osw-pa-anmelden-fuss a { margin-left: 0.5em; }

/* Die gewählte Rolle bleibt oben im Formular sichtbar */

.osw-pa .osw-pa-rollenzeile {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.7rem;
	padding: 0.7rem 0.9rem;
	background: var(--os-bg-muted);
	border-left: 3px solid var(--os-black);
	margin-bottom: 1.4rem;
	font-size: 0.92rem;
}

.osw-pa .osw-pa-rollenzeile-marke {
	font-family: var(--os-font-heading);
	font-size: 0.68rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #fff;
	background: var(--os-black);
	padding: 2px 8px;
}

.osw-pa .osw-pa-rollenzeile-marke.ist-lp { background: var(--os-red); }
.osw-pa .osw-pa-rollenzeile-text { color: #6b6d70; }
.osw-pa .osw-pa-rollenzeile-wechsel { margin-left: auto; }

/* ---------------------------------------------------------------------
 * Schüleransicht
 * ------------------------------------------------------------------ */

.osw-pa.osw-pa-vorschaubalken {
	position: sticky;
	top: 0;
	z-index: 40;
	background: var(--os-red);
	color: #fff;
	margin-bottom: 0.9rem;
}

.osw-pa.osw-pa-vorschaubalken.ist-lesen { background: var(--os-black); }

.osw-pa-vorschaubalken-inhalt {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 0.9rem;
	padding: 0.6rem 0.9rem;
}

.osw-pa-vorschaubalken-marke {
	font-family: var(--os-font-heading);
	font-size: 0.66rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	background: rgba(255, 255, 255, 0.22);
	padding: 3px 8px;
	white-space: nowrap;
}

.osw-pa-vorschaubalken-text {
	font-size: 0.9rem;
	line-height: 1.4;
	flex: 1 1 18rem;
}

.osw-pa-vorschaubalken-text strong {
	font-family: var(--os-font-heading);
	color: #fff;
}

.osw-pa-vorschaubalken-knoepfe {
	display: flex;
	gap: 0.5rem;
	margin-left: auto;
}

.osw-pa-vorschau-form { display: inline; margin: 0; }

.osw-pa-vorschaubalken-btn {
	font-family: var(--os-font-sans);
	font-size: 0.86rem;
	line-height: 1.3;
	padding: 5px 12px;
	border: 1px solid rgba(255, 255, 255, 0.55);
	background: transparent;
	color: #fff;
	border-radius: 3px;
	cursor: pointer;
	white-space: nowrap;
}

.osw-pa-vorschaubalken-btn:hover { background: rgba(255, 255, 255, 0.16); }

.osw-pa-vorschaubalken-btn.ist-stark {
	background: #fff;
	border-color: #fff;
	color: var(--os-black);
	font-family: var(--os-font-heading);
}

.osw-pa-vorschaubalken-btn.ist-stark:hover { background: rgba(255, 255, 255, 0.86); }

/* Einstieg auf der Übersicht */

.osw-pa .osw-pa-schuelersicht-text { max-width: 46em; color: #6b6d70; margin-bottom: 1rem; }

.osw-pa .osw-pa-schuelersicht-karten {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
	gap: 1rem;
}

.osw-pa .osw-pa-schuelersicht-karte {
	border: 1px solid var(--os-border);
	background: var(--os-bg);
	padding: 1.2rem 1.2rem 1rem;
	display: flex;
	flex-direction: column;
	gap: 0.7rem;
}

.osw-pa .osw-pa-schuelersicht-karte h4 {
	margin: 0;
	font-family: var(--os-font-heading);
	font-size: 1.05rem;
	color: var(--os-black);
}

.osw-pa .osw-pa-schuelersicht-karte p {
	margin: 0;
	font-size: 0.92rem;
	color: #6b6d70;
	line-height: 1.45;
}

.osw-pa .osw-pa-schuelersicht-karte form { margin: 0.2rem 0 0; }

.osw-pa .osw-pa-schuelersicht-wahl {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: center;
}

.osw-pa .osw-pa-schuelersicht-wahl select { flex: 1 1 11rem; min-width: 0; }

.osw-pa .osw-pa-schuelersicht-fuss {
	margin-top: auto !important;
	padding-top: 0.6rem;
	border-top: 1px solid var(--os-border);
	font-size: 0.84rem !important;
}

@media (max-width: 640px) {
	.osw-pa-vorschaubalken-knoepfe { margin-left: 0; width: 100%; }
	.osw-pa .osw-pa-rollenzeile-wechsel { margin-left: 0; }
}

/* Im Lesemodus sind die Felder sichtbar, aber nicht bedienbar. Der Balken
   steht als Geschwister vor dem Formular, deshalb genügt ein Nachbarselektor —
   gesperrt wird ohnehin serverseitig, das hier ist der sichtbare Hinweis. */

.osw-pa-vorschaubalken.ist-lesen ~ .osw-pa-form input,
.osw-pa-vorschaubalken.ist-lesen ~ .osw-pa-form select,
.osw-pa-vorschaubalken.ist-lesen ~ .osw-pa-form textarea,
.osw-pa-vorschaubalken.ist-lesen ~ .osw-pa-form button,
.osw-pa-vorschaubalken.ist-lesen ~ * .osw-pa-form input,
.osw-pa-vorschaubalken.ist-lesen ~ * .osw-pa-form select,
.osw-pa-vorschaubalken.ist-lesen ~ * .osw-pa-form textarea,
.osw-pa-vorschaubalken.ist-lesen ~ * .osw-pa-form button {
	pointer-events: none;
	background: var(--os-bg-muted);
	color: #6b6d70;
	cursor: not-allowed;
}

.osw-pa-vorschaubalken.ist-lesen ~ .osw-pa-form .osw-pa-btn,
.osw-pa-vorschaubalken.ist-lesen ~ * .osw-pa-form .osw-pa-btn {
	background: var(--os-grau);
	border-color: var(--os-grau);
}

/* ---------------------------------------------------------------------
 * KI-Unterstützung bei der Beurteilung
 * ------------------------------------------------------------------ */

.osw-pa .osw-pa-kileiste {
	display: flex;
	flex-wrap: wrap;
	gap: 0.8rem 1.2rem;
	align-items: center;
	padding: 0.9rem 1.1rem;
	background: var(--os-bg-muted);
	border-left: 3px solid var(--os-gelb);
	margin-bottom: 1.2rem;
}

.osw-pa .osw-pa-kileiste-text {
	flex: 1 1 22rem;
	font-size: 0.92rem;
	line-height: 1.45;
	color: #6b6d70;
}

.osw-pa .osw-pa-kileiste-marke {
	display: inline-block;
	font-family: var(--os-font-heading);
	font-size: 0.66rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #fff;
	background: var(--os-gelb);
	padding: 2px 8px;
	margin-right: 0.5em;
	vertical-align: 1px;
}

.osw-pa .osw-pa-kileiste-form {
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;
	margin: 0;
}

.osw-pa .osw-pa-ki-zusammenfassung {
	font-size: 0.9rem;
	color: #6b6d70;
	margin: -0.4rem 0 1.2rem;
}

.osw-pa .osw-pa-kivorschlag {
	margin: 0.6rem 0 0.2rem;
	padding: 0.7rem 0.9rem;
	background: #fbf3e2;
	border-left: 3px solid var(--os-gelb);
}

.osw-pa .osw-pa-kivorschlag-kopf {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.5rem;
	margin: 0 0 0.4rem;
	font-size: 0.9rem;
}

.osw-pa .osw-pa-kivorschlag-marke {
	font-family: var(--os-font-heading);
	font-size: 0.62rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #8a6000;
}

.osw-pa .osw-pa-kivorschlag-kopf strong {
	font-family: var(--os-font-heading);
	color: var(--os-black);
}

.osw-pa .osw-pa-kivorschlag-kopf em {
	font-style: normal;
	color: #6b6d70;
	font-size: 0.86rem;
}

.osw-pa .osw-pa-kivorschlag-grund {
	margin: 0 0 0.4rem;
	font-size: 0.9rem;
	line-height: 1.45;
}

.osw-pa .osw-pa-kivorschlag-beleg {
	margin: 0;
	padding: 0.3rem 0 0.3rem 0.8rem;
	border-left: 2px solid rgba(201, 138, 0, 0.45);
	font-size: 0.88rem;
	line-height: 1.5;
	color: var(--os-text);
}

.osw-pa .osw-pa-kivorschlag-beleg::before { content: '«'; }
.osw-pa .osw-pa-kivorschlag-beleg::after { content: '»'; }

.osw-pa .osw-pa-berichtblock { margin-top: 2rem; }
.osw-pa .osw-pa-berichtblock textarea { width: 100%; line-height: 1.6; }
.osw-pa .osw-pa-bericht-frei { margin: 0.7rem 0; }

/* Der freigegebene Bericht auf der Seite der Schüler:in */

.osw-pa .osw-pa-bericht-sus {
	border-left: 3px solid var(--os-red);
	background: var(--os-bg-muted);
	padding: 1.2rem 1.4rem;
	margin-top: 1.4rem;
}

.osw-pa .osw-pa-bericht-sus h3 { margin-top: 0; }
.osw-pa .osw-pa-bericht-sus p { line-height: 1.65; }
.osw-pa .osw-pa-bericht-sus p + p { margin-top: 0.8em; }

/* ------------------------------------ Bereichsübersicht ab 0.12.0 */

.osw-pa-bereiche-lead { margin: -6px 0 14px; font-size: 0.88rem; }

.osw-pa-bereiche-titel {
	margin: 22px 0 10px;
	padding-top: 14px;
	border-top: 1px solid var(--os-border);
}

.osw-pa-karte.ist-arbeit { border-left: 3px solid var(--os-red); }
.osw-pa-karte.ist-arbeit h4 { color: var(--os-red); }

/* ================================================================
 * Ab Version 0.13.0: Bilder und Abschnitte
 * ============================================================== */

/* ------------------------------------------- Bilder im Journal */

.osw-pa-bildfeld input[type="file"] { margin: 4px 0 6px; }

.osw-pa-bilderzeile {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 10px 0 0;
	padding: 0;
}

.osw-pa-bilderzeile > li { position: relative; }

.osw-pa-bilderzeile img {
	display: block;
	width: 110px;
	height: 110px;
	object-fit: cover;
	border: 1px solid var(--os-border);
	background: var(--os-bg-muted);
}

.osw-pa-bilderzeile form { position: absolute; top: 3px; right: 3px; margin: 0; }

.osw-pa-bild-weg {
	width: 22px;
	height: 22px;
	border: 0;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.62);
	color: #fff;
	font-size: 15px;
	line-height: 1;
	cursor: pointer;
	padding: 0;
}

.osw-pa-bild-weg:hover { background: var(--os-red); }

/* -------------------------------------- Abschnitte im Projektheft */

.osw-pa-abschnitte { margin: 6px 0 0; }

.osw-pa-abschnitt {
	border: 1px solid var(--os-border);
	border-left: 3px solid var(--os-border);
	background: #fff;
	margin-bottom: 10px;
}

.osw-pa-abschnitt.ist-bild { border-left-color: var(--os-black); }
.osw-pa-abschnitt.ist-titel { border-left-color: var(--os-red); }

.osw-pa-abschnitt-kopf {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	padding: 5px 8px;
	background: var(--os-bg-muted);
	border-bottom: 1px solid var(--os-border);
}

.osw-pa-abschnitt-art {
	font-size: 0.72rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #6b6d70;
	font-family: var(--os-font-heading);
}

.osw-pa-werkzeuge { display: flex; gap: 2px; }

.osw-pa-werkzeuge button,
.osw-pa-abschnitt-griffe button {
	min-width: 28px;
	height: 26px;
	border: 1px solid var(--os-border);
	background: #fff;
	color: var(--os-text);
	font-size: 0.82rem;
	line-height: 1;
	cursor: pointer;
	padding: 0 6px;
	border-radius: 3px;
}

.osw-pa-werkzeuge button:hover,
.osw-pa-abschnitt-griffe button:hover { border-color: var(--os-black); color: var(--os-red); }

.osw-pa-abschnitt-griffe { display: flex; gap: 2px; margin-left: auto; }
.osw-pa-abschnitt-griffe button[data-osw-pa-weg]:hover { background: var(--os-red); color: #fff; border-color: var(--os-red); }

.osw-pa-schreibfeld {
	min-height: 5.5em;
	padding: 10px 12px;
	font-size: 0.97rem;
	line-height: 1.6;
	outline: none;
}

.osw-pa-schreibfeld:focus { box-shadow: inset 0 0 0 2px var(--os-red-soft); }
.osw-pa-schreibfeld ul, .osw-pa-schreibfeld ol { margin: 0.4em 0 0.4em 1.3em; padding: 0; }
.osw-pa-schreibfeld p { margin: 0 0 0.6em; }

.osw-pa-schreibfeld.ist-leer::before {
	content: attr(data-platzhalter);
	color: #9a9a9a;
	pointer-events: none;
}

.osw-pa-verborgen { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); border: 0; padding: 0; }

.osw-pa-abschnitt-titel {
	width: 100%;
	border: 0;
	padding: 9px 12px;
	font-family: var(--os-font-heading);
	font-size: 1.05rem;
	color: var(--os-black);
}

.osw-pa-abschnitt-bild { display: flex; gap: 14px; padding: 10px 12px; flex-wrap: wrap; }

.osw-pa-abschnitt-vorschau {
	width: 130px;
	min-height: 96px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px dashed var(--os-border);
	background: var(--os-bg-muted);
	flex: none;
	font-size: 0.8rem;
	text-align: center;
	padding: 6px;
}

.osw-pa-abschnitt-vorschau img { max-width: 100%; height: auto; display: block; }

.osw-pa-abschnitt-bildfelder { flex: 1; min-width: 15rem; display: flex; flex-direction: column; gap: 8px; }
.osw-pa-abschnitt-bildfelder label { display: flex; flex-direction: column; gap: 3px; font-size: 0.87rem; }
.osw-pa-abschnitt-bildfelder label > span { font-family: var(--os-font-heading); color: var(--os-black); font-size: 0.82rem; }

.osw-pa-abschnitt-neu { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 4px 0 2px; }

.osw-pa-btn-klein {
	border: 1px solid var(--os-black);
	background: #fff;
	color: var(--os-black);
	font-family: var(--os-font-heading);
	font-size: 0.82rem;
	padding: 4px 11px;
	border-radius: 3px;
	cursor: pointer;
}

.osw-pa-btn-klein:hover { background: var(--os-black); color: #fff; }

/* ------------------------------------- Abschnitte im fertigen Heft */

.osw-pa-ab-titel { margin: 1.3em 0 0.4em; font-family: var(--os-font-heading); color: var(--os-black); }
.osw-pa-ab-text { margin: 0 0 0.8em; }
.osw-pa-ab-text ul, .osw-pa-ab-text ol { margin: 0.4em 0 0.8em 1.3em; padding: 0; }

.osw-pa-ab-bild { margin: 1em 0 1.2em; }
.osw-pa-ab-bild img { display: block; width: 100%; height: auto; border: 1px solid var(--os-border); }
.osw-pa-ab-bild figcaption { font-size: 0.85rem; color: #6b6d70; margin-top: 5px; }
.osw-pa-ab-bild.ist-klein { max-width: 48%; }
.osw-pa-ab-bild.ist-mittel { max-width: 72%; }
.osw-pa-ab-bild.ist-gross { max-width: 100%; }

@media (max-width: 640px) {
	.osw-pa-ab-bild.ist-klein,
	.osw-pa-ab-bild.ist-mittel { max-width: 100%; }
	.osw-pa-bilderzeile img { width: 84px; height: 84px; }
}

@media print {
	.osw-pa-ab-bild { break-inside: avoid; }
	.osw-pa-ab-bild.ist-klein { max-width: 45%; }
	.osw-pa-ab-bild.ist-mittel { max-width: 70%; }
}

.osw-pa-bildhinweis { margin: 2px 0 14px; font-size: 0.86rem; }

/* ------------------------------------- Titelblatt-Vorlagen ab 0.14.0 */

.osw-pa-titelblatt-feld .osw-pa-label { margin: 16px 0 8px; }

.osw-pa-vorlagen {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
	gap: 10px;
	margin-bottom: 18px;
}

.osw-pa-vorlage {
	display: block;
	border: 1px solid var(--os-border);
	border-radius: 4px;
	padding: 12px;
	cursor: pointer;
	background: #fff;
	text-align: center;
}

.osw-pa-vorlage:hover { border-color: var(--os-black); }

.osw-pa-vorlage.ist-gewaehlt,
.osw-pa-vorlage:has(input:checked) {
	border-color: var(--os-red);
	box-shadow: inset 0 0 0 1px var(--os-red);
}

.osw-pa-vorlage input { position: absolute; opacity: 0; width: 0; height: 0; }
.osw-pa-skizze { display: block; margin: 0 auto 9px; }
.osw-pa-vorlage strong { display: block; font-family: var(--os-font-heading); color: var(--os-black); font-size: 0.92rem; }
.osw-pa-vorlage .osw-pa-dim { display: block; font-size: 0.8rem; margin-top: 3px; line-height: 1.4; }

.osw-pa-titelbild { border: 1px solid var(--os-border); border-radius: 4px; margin-bottom: 14px; }

.osw-pa-kasten {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 0.9rem;
	margin: 6px 0 12px;
}

.osw-pa-kasten input { width: auto; margin: 0; }

/* ------------------------------------- Speicherleiste ab 0.15.0 */

.osw-pa-speicherleiste {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 40;
	background: #fff;
	border-top: 2px solid var(--os-black);
	box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.07);
}

.osw-pa-speicherleiste-innen {
	max-width: 62rem;
	margin: 0 auto;
	padding: 9px 16px;
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}

.osw-pa-stand {
	font-size: 0.87rem;
	color: #6b6d70;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	flex: 1;
	min-width: 9rem;
}

.osw-pa-stand::before {
	content: "";
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--os-gruen);
	flex: none;
}

.osw-pa-speicherleiste.ist-offen { border-top-color: var(--os-red); }
.osw-pa-speicherleiste.ist-offen .osw-pa-stand { color: var(--os-red); font-family: var(--os-font-heading); }
.osw-pa-speicherleiste.ist-offen .osw-pa-stand::before { background: var(--os-red); }

.osw-pa-stand-knoepfe { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.osw-pa-stand-knoepfe .osw-pa-btn,
.osw-pa-stand-knoepfe .osw-pa-btn-leer { padding: 7px 16px; font-size: 0.9rem; }

/* Platz schaffen, damit die Leiste nichts verdeckt. */
body.osw-pa-hat-leiste { padding-bottom: 76px; }

@media (max-width: 640px) {
	.osw-pa-speicherleiste-innen { padding: 8px 12px; gap: 8px; }
	.osw-pa-stand { width: 100%; flex: none; font-size: 0.82rem; }
	.osw-pa-stand-knoepfe { width: 100%; }
	.osw-pa-stand-knoepfe .osw-pa-btn { flex: 1; text-align: center; }
	body.osw-pa-hat-leiste { padding-bottom: 116px; }
}

@media print {
	.osw-pa-speicherleiste { display: none !important; }
	body.osw-pa-hat-leiste { padding-bottom: 0; }
}

/* ------------------------------------------ Rückgängig ab 0.16.0 */

.osw-pa-zurueckholen {
	position: fixed;
	left: 50%;
	transform: translateX(-50%);
	bottom: 88px;
	z-index: 50;
	display: flex;
	align-items: center;
	gap: 14px;
	background: var(--os-black);
	color: #fff;
	padding: 10px 14px 10px 18px;
	border-radius: 4px;
	font-size: 0.9rem;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
	max-width: calc(100vw - 32px);
}

.osw-pa-zurueckholen-btn {
	background: none;
	border: 0;
	color: #fff;
	font-family: var(--os-font-heading);
	font-size: 0.9rem;
	text-decoration: underline;
	cursor: pointer;
	padding: 2px 4px;
	white-space: nowrap;
}

.osw-pa-zurueckholen-btn:hover { color: var(--os-red-soft); }

@media (max-width: 640px) {
	.osw-pa-zurueckholen { bottom: 126px; }
}

@media print {
	.osw-pa-zurueckholen { display: none !important; }
}

/* ================================================================
 * Ab Version 0.17.0: Wegweiser als Karten
 * ============================================================== */

/* Ohne JavaScript bleibt der ganze Text sichtbar und die Karten unsichtbar —
   der Wegweiser funktioniert also auch dann vollständig. */

.osw-pa-stapel,
.osw-pa-stapelleiste { display: none; }

.osw-pa-wegweiser.ist-karten .osw-pa-stapel { display: block; }
.osw-pa-wegweiser.ist-karten .osw-pa-stapelleiste { display: flex; }
.osw-pa-wegweiser.ist-karten .osw-pa-reader-text { display: none; }
.osw-pa-wegweiser.ist-karten .osw-pa-reader-lead { display: none; }

/* ----------------------------------------------- Ansichtswahl */

.osw-pa-ansichtswahl {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 22px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--os-border);
}

.osw-pa-ansichtswahl .osw-pa-label { margin: 0 6px 0 0; }

.osw-pa-ansichtswahl button {
	border: 1px solid var(--os-border);
	background: #fff;
	color: var(--os-text);
	font-size: 0.86rem;
	padding: 5px 13px;
	border-radius: 3px;
	cursor: pointer;
}

.osw-pa-ansichtswahl button:hover { border-color: var(--os-black); }

.osw-pa-ansichtswahl button.ist-aktiv {
	background: var(--os-black);
	border-color: var(--os-black);
	color: #fff;
	font-family: var(--os-font-heading);
}

/* ----------------------------------------------------- Karte */

/* Eigene Klassennamen! In 0.17.0 hiessen diese beiden «osw-pa-karten» und
   «osw-pa-karte» — genau wie das Kachelraster im Ideenpool, in der
   Beurteilungsliste und auf der Startseite. Das «display: none» des
   Kartenstapels hat dort alles unsichtbar gemacht. */

.osw-pa-stapel .osw-pa-stapelkarte { display: none; }
.osw-pa-stapel .osw-pa-stapelkarte.ist-sichtbar { display: block; }

.osw-pa-stapel-innen {
	border: 1px solid var(--os-border);
	border-top: 3px solid var(--os-red);
	border-radius: 4px;
	background: #fff;
	padding: clamp(18px, 3vw, 30px);
	min-height: 22rem;
	display: flex;
	flex-direction: column;
	gap: clamp(14px, 2.4vw, 26px);
}

.osw-pa-stapel-bild {
	background: var(--os-bg-muted);
	border-radius: 3px;
	padding: 10px;
}

.osw-pa-dia { display: block; width: 100%; height: auto; max-height: 15rem; margin: 0 auto; }

.osw-pa-stapel-text > h3 {
	margin: 0 0 10px;
	font-size: clamp(1.15rem, 2.2vw, 1.5rem);
}

.osw-pa-stapel-text p { font-size: clamp(0.98rem, 1.5vw, 1.08rem); line-height: 1.62; }
.osw-pa-stapel-text > :last-child { margin-bottom: 0; }

.osw-pa-stapel-lead {
	font-family: var(--os-font-heading);
	color: var(--os-black);
	font-size: clamp(1.05rem, 2vw, 1.25rem) !important;
	line-height: 1.45;
}

/* ------------------------------------------------ Bedienleiste */

.osw-pa-stapelleiste {
	align-items: center;
	gap: 14px;
	margin: 14px 0 0;
	flex-wrap: wrap;
}

.osw-pa-stapel-btn {
	border: 1px solid var(--os-black);
	background: #fff;
	color: var(--os-black);
	font-family: var(--os-font-heading);
	font-size: 0.9rem;
	padding: 8px 18px;
	border-radius: 3px;
	cursor: pointer;
	flex: none;
}

.osw-pa-stapel-btn:hover:not(:disabled) { background: var(--os-black); color: #fff; }
.osw-pa-stapel-btn.ist-weiter:not(:disabled) { background: var(--os-red); border-color: var(--os-red); color: #fff; }
.osw-pa-stapel-btn.ist-weiter:hover:not(:disabled) { background: var(--os-black); border-color: var(--os-black); }
.osw-pa-stapel-btn:disabled { opacity: 0.3; cursor: default; }

.osw-pa-stapel-punkte {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	flex-wrap: wrap;
}

.osw-pa-stapel-punkt {
	width: 9px;
	height: 9px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--os-border);
	cursor: pointer;
}

.osw-pa-stapel-punkt.ist-durch { background: var(--os-black); }
.osw-pa-stapel-punkt.ist-aktiv { background: var(--os-red); width: 22px; border-radius: 5px; }

.osw-pa-stapel-zahl {
	font-size: 0.8rem;
	color: #6b6d70;
	margin-left: 8px;
	white-space: nowrap;
}

@media (max-width: 640px) {
	.osw-pa-stapel-innen { min-height: 0; }
	.osw-pa-stapel-zahl { width: 100%; text-align: center; margin: 4px 0 0; }
	.osw-pa-stapel-btn { padding: 8px 14px; }
}

@media print {
	.osw-pa-stapel, .osw-pa-stapelleiste, .osw-pa-ansichtswahl { display: none !important; }
	.osw-pa-wegweiser.ist-karten .osw-pa-reader-text { display: block !important; }
}

/* ================================================================
 * Ab Version 0.18.0: Tabellen als Felder, Listen in Karten
 * ============================================================== */

/* Eine nackte Tabelle mitten in einer Karte sah aus wie ein Ausrutscher.
   Jetzt steht sie in einem gerahmten Feld, die Spalten sind gleich breit
   und die Zellen oben ausgerichtet — und auf schmalen Bildschirmen wird
   aus jeder Zeile ein eigenes Feld mit beschrifteten Angaben. */

.osw-pa-tabelle {
	margin: 1.2em 0;
	border: 1px solid var(--os-border);
	border-radius: 6px;
	overflow: hidden;
	background: #fff;
}

.osw-pa-tabelle table {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
	table-layout: fixed;
	font-size: 0.9rem;
	line-height: 1.5;
}

.osw-pa-tabelle th,
.osw-pa-tabelle td {
	border: 0;
	border-top: 1px solid var(--os-border);
	border-left: 1px solid var(--os-border);
	padding: 10px 13px;
	text-align: left;
	vertical-align: top;
	word-break: break-word;
	hyphens: auto;
}

.osw-pa-tabelle tr > :first-child { border-left: 0; }
.osw-pa-tabelle thead th { border-top: 0; }

.osw-pa-tabelle thead th {
	background: var(--os-bg-muted);
	font-family: var(--os-font-heading);
	color: var(--os-black);
	font-size: 0.76rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	white-space: nowrap;
}

.osw-pa-tabelle tbody tr:nth-child(even) > * { background: #fbfbfc; }

/* Die erste Spalte trägt in unseren Tabellen durchwegs das Stichwort. */
.osw-pa-tabelle tbody td:first-child {
	font-family: var(--os-font-heading);
	color: var(--os-black);
}

.osw-pa-td-kopf { display: none; }

@media (max-width: 700px) {
	.osw-pa-tabelle table,
	.osw-pa-tabelle tbody,
	.osw-pa-tabelle tr,
	.osw-pa-tabelle td {
		display: block;
		width: 100%;
	}

	.osw-pa-tabelle thead { display: none; }

	.osw-pa-tabelle tbody tr {
		border-top: 1px solid var(--os-border);
		padding: 6px 0;
	}

	.osw-pa-tabelle tbody tr:first-child { border-top: 0; }
	.osw-pa-tabelle tbody tr:nth-child(even) > * { background: transparent; }

	.osw-pa-tabelle td {
		border: 0;
		padding: 7px 13px;
	}

	.osw-pa-td-kopf {
		display: block;
		font-family: var(--os-font-heading);
		font-size: 0.7rem;
		letter-spacing: 0.06em;
		text-transform: uppercase;
		color: var(--os-red);
		margin-bottom: 2px;
	}
}

/* ------------------------------------------- Listen und Zitate in Karten */

.osw-pa-stapel-text ul,
.osw-pa-stapel-text ol {
	padding-left: 1.25em;
	margin: 0 0 1em;
	font-size: clamp(0.96rem, 1.5vw, 1.05rem);
	line-height: 1.58;
}

.osw-pa-stapel-text li { margin-bottom: 0.45em; }
.osw-pa-stapel-text li::marker { color: var(--os-red); font-family: var(--os-font-heading); }

.osw-pa-stapel-text blockquote {
	margin: 1em 0;
	padding: 2px 0 2px 16px;
	border-left: 3px solid var(--os-red);
	background: none;
	color: var(--os-black);
}

.osw-pa-stapel-text blockquote p { margin: 0; }

.osw-pa-stapel-text pre {
	background: var(--os-bg-muted);
	border: 1px solid var(--os-border);
	border-radius: 4px;
	padding: 12px 14px;
	font-size: 0.84rem;
	line-height: 1.65;
	white-space: pre-wrap;
	overflow-x: auto;
}

/* Bei viel Text darf die Karte mitwachsen, statt den Inhalt zu quetschen. */
.osw-pa-stapel-text { min-width: 0; }

/* ---------------------------------------------------------------------
   Übungen im Wegweiser (0.19.0)
   ------------------------------------------------------------------ */

.osw-pa-uebung-auftrag { margin: 0 0 16px; }
.osw-pa-uebung-liste { margin: 0; padding: 0; list-style: none; counter-reset: osw-pa-uebung; }
.osw-pa-uebung-punkt {
	counter-increment: osw-pa-uebung;
	margin: 0 0 12px;
	padding: 14px 16px;
	border: 1px solid var(--os-border);
	border-left: 4px solid var(--os-border-strong);
	border-radius: 4px;
	background: var(--os-bg);
}
.osw-pa-uebung-punkt.ist-richtig { border-left-color: var(--os-gruen); }
.osw-pa-uebung-punkt.ist-falsch { border-left-color: var(--os-red); background: var(--os-red-soft); }
.osw-pa-uebung-aussage { margin: 0 0 10px; font-family: var(--os-font-heading); }
.osw-pa-uebung-aussage::before { content: counter(osw-pa-uebung) ". "; color: var(--os-red); }
.osw-pa-uebung-wahl { display: flex; flex-wrap: wrap; gap: 8px; }
.osw-pa-uebung-wahl .osw-pa-chip { cursor: pointer; font: inherit; }
.osw-pa-uebung-rueckmeldung { margin: 10px 0 0; font-size: .95em; }
.osw-pa-uebung-punkt.ist-richtig .osw-pa-uebung-rueckmeldung { color: var(--os-gruen); }
.osw-pa-uebung-loesung { margin: 10px 0 0; }
.osw-pa-uebung-loesung summary { cursor: pointer; color: var(--os-red); }
.osw-pa-uebung-fuss { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 16px 0 0; }
.osw-pa-uebung-stand { margin: 0; font-family: var(--os-font-heading); }

/* ------------------------------------------------ Einstieg zur Einführung */

.osw-pa-einstieg {
	display: grid;
	grid-template-columns: minmax(0, 300px) 1fr;
	gap: 0;
	padding: 0 !important;
	overflow: hidden;
	border: 1px solid var(--os-border);
	border-left: 4px solid var(--os-red);
	border-radius: 4px;
	text-decoration: none;
	color: inherit;
	transition: border-color .18s ease, transform .18s ease;
}

.osw-pa-einstieg__bild { display: block; background: #f1eee9; }
.osw-pa-einstieg__bild img { display: block; width: 100%; height: 100%; object-fit: cover; }

.osw-pa-einstieg__text { display: grid; align-content: center; gap: 6px; padding: 18px 22px; }
.osw-pa-einstieg__text strong { font-family: var(--os-font-heading); font-size: 1.35rem; color: var(--os-black); }
.osw-pa-einstieg__los { font-family: var(--os-font-heading); color: var(--os-red); }

@media (hover: hover) {
	.osw-pa-einstieg:hover { border-color: var(--os-black); border-left-color: var(--os-red); transform: translateY(-2px); }
}

@media (max-width: 640px) {
	.osw-pa-einstieg { grid-template-columns: 1fr; }
	.osw-pa-einstieg__bild { aspect-ratio: 1280 / 500; }
}

.osw-pa-einstieg__bild--tour {
	position: relative;
	display: grid;
	place-items: center;
	min-height: 150px;
	background: var(--os-black);
	overflow: hidden;
}

.osw-pa-einstieg__bild--tour b {
	position: relative;
	z-index: 1;
	font-family: var(--os-font-heading);
	font-size: 2rem;
	color: #fff;
	letter-spacing: .04em;
}

.osw-pa-einstieg__bild--tour i {
	position: absolute;
	width: 140%;
	height: 22px;
	background: var(--os-red);
	transform: skewY(-12deg);
	opacity: .9;
}

.osw-pa-einstieg__bild--tour i:nth-of-type(1) { top: 18%; }
.osw-pa-einstieg__bild--tour i:nth-of-type(2) { top: 48%; opacity: .55; height: 10px; }
.osw-pa-einstieg__bild--tour i:nth-of-type(3) { top: 74%; opacity: .3; height: 6px; }

/* Freigabe der Beurteilung */
.osw-pa .osw-pa-freigabe {
	margin-top: 24px;
	padding: 16px 18px;
	border: 1px solid var(--os-border);
	border-left: 4px solid var(--os-gelb);
	border-radius: 4px;
	background: var(--os-bg-muted);
}

.osw-pa .osw-pa-freigabe.ist-frei { border-left-color: var(--os-gruen); }
.osw-pa .osw-pa-freigabe p { display: grid; gap: 4px; }

/* ------------------------------------------------------------ Projektakte */

.osw-pa-akte__kopf {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-end;
	gap: 16px;
	margin-bottom: 18px;
	padding-bottom: 16px;
	border-bottom: 2px solid var(--os-black);
}

.osw-pa-akte__thema { margin: 0; font-size: 1.1rem; color: var(--os-black); }
.osw-pa-akte__knoepfe { display: flex; flex-wrap: wrap; gap: 10px; }

.osw-pa-akte__sprung {
	position: sticky;
	top: 0;
	z-index: 2;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0 0 20px;
	padding: 10px 0;
	background: #fff;
}

.osw-pa-akte__sprung a {
	padding: 6px 14px;
	border: 1px solid var(--os-border);
	border-radius: 999px;
	color: var(--os-black);
	font-size: .88rem;
	text-decoration: none;
}

.osw-pa-akte__sprung a:hover { border-color: var(--os-red); color: var(--os-red); }

.osw-pa-akte__teil { scroll-margin-top: 70px; }

.osw-pa-akte__fakten { display: grid; gap: 6px; margin: 0 0 14px; }
.osw-pa-akte__fakten div { display: grid; grid-template-columns: 9em 1fr; gap: 10px; }
.osw-pa-akte__fakten dt { color: #6b6d70; }
.osw-pa-akte__fakten dd { margin: 0; }

.osw-pa-akte__journal { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }

.osw-pa-akte__journal > li {
	padding: 14px 16px;
	border: 1px solid var(--os-border);
	border-left: 4px solid var(--os-red);
	border-radius: 4px;
}

.osw-pa-akte__journal h4 { margin: 2px 0 6px; }
.osw-pa-akte__wann { margin: 0; font-size: .8rem; color: #6b6d70; }

.osw-pa-akte__bilder { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.osw-pa-akte__bilder img { width: 140px; height: 100px; object-fit: cover; border-radius: 3px; border: 1px solid var(--os-border); }

.osw-pa-akte__kapitel {
	margin: 0 0 8px;
	border: 1px solid var(--os-border);
	border-radius: 4px;
}

.osw-pa-akte__kapitel summary {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 14px;
	font-family: var(--os-font-heading);
	cursor: pointer;
}

.osw-pa-akte__kapitel[open] summary { border-bottom: 1px solid var(--os-border); }
.osw-pa-akte__kapitel > :not(summary) { margin-left: 14px; margin-right: 14px; }
.osw-pa-akte__text { padding: 8px 0 12px; max-width: 75ch; }
.osw-pa-akte__text img { max-width: 100%; height: auto; }

.osw-pa-akte__liste { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }

.osw-pa-akte__liste li {
	display: grid;
	grid-template-columns: 18px 1fr auto;
	gap: 10px;
	align-items: center;
	padding: 8px 10px;
	border: 1px solid var(--os-border);
	border-radius: 4px;
}

.osw-pa-akte__haken { width: 14px; height: 14px; border: 2px solid #c9cbce; border-radius: 3px; }
.osw-pa-akte__liste .ist-erledigt .osw-pa-akte__haken { background: var(--os-gruen); border-color: var(--os-gruen); }
.osw-pa-akte__ueber { color: var(--os-red); font-family: var(--os-font-heading); }

@media (max-width: 620px) {
	.osw-pa-akte__fakten div { grid-template-columns: 1fr; gap: 0; }
	.osw-pa-akte__liste li { grid-template-columns: 18px 1fr; }
	.osw-pa-akte__liste li > :last-child { grid-column: 2; }
}

/* --------------------------------------------- Abgaben und Rückmeldungen */

.osw-pa .osw-pa-abgabe {
	display: grid;
	gap: 8px;
	padding: 14px 16px;
	border: 1px solid var(--os-border);
	border-left: 4px solid var(--os-border-strong);
	border-radius: 4px;
	background: #fff;
	scroll-margin-top: 80px;
}

.osw-pa .osw-pa-abgabe--eingereicht { border-left-color: var(--os-gelb); }
.osw-pa .osw-pa-abgabe--angenommen { border-left-color: var(--os-gruen); }
.osw-pa .osw-pa-abgabe--zurueck { border-left-color: var(--os-red); background: var(--os-red-soft); }

.osw-pa .osw-pa-abgabe p { margin: 0; }
.osw-pa .osw-pa-abgabe__stand { display: grid; gap: 2px; }
.osw-pa .osw-pa-abgabe__spaet { color: var(--os-red); font-family: var(--os-font-heading); }
.osw-pa .osw-pa-abgabe__aktionen { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.osw-pa .osw-pa-abgabe__aktionen form { margin: 0; }
.osw-pa .osw-pa-abgabe__kommentar { padding: 10px 12px; border-left: 3px solid var(--os-red); background: #fff; }
.osw-pa .osw-pa-abgabe__kommentar p:last-child { margin-bottom: 0; }

.osw-pa .osw-pa-abgabe--kurz { grid-column: 1 / -1; margin-top: 8px; padding: 10px 12px; }

.osw-pa .osw-pa-rueckmeldungen { display: grid; gap: 8px; margin: 10px 0; padding: 0; list-style: none; }

.osw-pa .osw-pa-rueckmeldung {
	padding: 10px 12px;
	border-left: 3px solid var(--os-black);
	border-radius: 0 4px 4px 0;
	background: var(--os-bg-muted);
}

.osw-pa .osw-pa-rueckmeldung.ist-neu { border-left-color: var(--os-red); background: var(--os-red-soft); }
.osw-pa .osw-pa-rueckmeldung p:last-child { margin-bottom: 0; }

.osw-pa .osw-pa-rueckmeldung-neu { margin: 8px 0 0; }
.osw-pa .osw-pa-rueckmeldung-neu summary { cursor: pointer; color: var(--os-red); font-family: var(--os-font-heading); font-size: .9rem; }
.osw-pa .osw-pa-rueckmeldung-neu textarea { width: 100%; }

.osw-pa .osw-pa-neu-rueckmeldungen { border-left: 4px solid var(--os-red); padding-left: 16px; }

.osw-pa .osw-pa-akte__abgabe {
	margin: 0 0 12px;
	padding: 14px 16px;
	border: 1px solid var(--os-border);
	border-left: 4px solid var(--os-border-strong);
	border-radius: 4px;
}

.osw-pa .osw-pa-akte__abgabe.osw-pa-abgabe--eingereicht { border-left-color: var(--os-gelb); }
.osw-pa .osw-pa-akte__abgabe.osw-pa-abgabe--angenommen { border-left-color: var(--os-gruen); }
.osw-pa .osw-pa-akte__abgabe.osw-pa-abgabe--zurueck { border-left-color: var(--os-red); }

.osw-pa .osw-pa-akte__abgabekopf { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; margin: 0 0 6px; }
.osw-pa .osw-pa-akte__status { margin-left: auto; font-family: var(--os-font-heading); }
.osw-pa .osw-pa-akte__pruefen { margin-top: 10px; }
.osw-pa .osw-pa-akte__pruefen textarea { width: 100%; }

/* Frist und Unterschrift in der Projektakte */
.osw-pa .osw-pa-akte__frist { margin: 0 0 6px; color: var(--os-red); font-family: var(--os-font-heading); font-size: .88rem; }

.osw-pa .osw-pa-akte__unterschrift {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin: 6px 0 8px;
	padding: 8px 10px;
	border-radius: 4px;
	background: var(--os-bg-muted);
}

.osw-pa .osw-pa-akte__ok { color: var(--os-gruen); font-family: var(--os-font-heading); }
.osw-pa .osw-pa-akte__fristfeld { margin-top: 8px; }
.osw-pa .osw-pa-akte__fristfeld summary { cursor: pointer; font-size: .86rem; color: #6b6d70; }

/* Ziele der Vereinbarung beim Kriterium Zielerreichung */
.osw-pa .osw-pa-k-ziele { margin: 6px 0 0; padding-left: 1.2em; font-size: .9rem; }
.osw-pa .osw-pa-k-ziele li { margin-bottom: 4px; }
.osw-pa .osw-pa-k-ziele .osw-pa-dim { display: block; }

/* Zuteilung im Frontend (Projektleitung) */
.osw-pa-zuteilung__teil { margin-top: 28px; }
.osw-pa-zuteilung h3 { margin: 28px 0 10px; font-family: var(--os-font-heading); }
.osw-pa-zuteilung .ist-ueber { color: var(--os-rot); font-family: var(--os-font-heading); }
.osw-pa-zuteilung select { max-width: 100%; }

.osw-pa-zuteilung__gruppen {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 12px;
}

.osw-pa-zuteilung__gruppe {
	padding: 12px 14px;
	border: 1px solid var(--os-border);
	border-radius: 6px;
	background: var(--os-bg);
}

.osw-pa-zuteilung__gruppenkopf { display: flex; flex-direction: column; gap: 2px; margin: 0 0 8px; }
.osw-pa-zuteilung__gruppe ul { margin: 0; padding-left: 1.1em; font-size: .9rem; }

.osw-pa-zuteilung__kennzahlen {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 12px;
	margin: 12px 0 4px;
}

.osw-pa-zuteilung__balken { display: block; height: 6px; margin-top: 6px; border-radius: 3px; background: var(--os-bg-muted); overflow: hidden; }
.osw-pa-zuteilung__balken i { display: block; height: 100%; background: var(--os-red); }

.osw-pa-zuteilung__freigabe {
	margin-top: 22px;
	padding: 14px 16px;
	border-left: 4px solid var(--os-red);
	background: var(--os-red-soft);
}

.osw-pa-zuteilung__freigabe p { margin: 0 0 10px; }

.osw-pa-zuteilung__neu,
.osw-pa-zuteilung__listen { margin-top: 28px; padding: 12px 16px; border: 1px solid var(--os-border); border-radius: 6px; }
.osw-pa-zuteilung__neu > summary,
.osw-pa-zuteilung__listen > summary { cursor: pointer; font-family: var(--os-font-heading); }
.osw-pa-zuteilung__listen textarea { width: 100%; font-size: .85rem; }

/* Projektheft der Lehrperson: Bereiche als Tabs (mit JavaScript) */
.osw-pa-akte.ist-reiter .osw-pa-akte__teil:not(.ist-aktiv) { display: none; }

.osw-pa-akte__sprung a.ist-aktiv,
.osw-pa-akte__sprung a.ist-aktiv:hover {
	border-color: var(--os-black);
	background: var(--os-black);
	color: var(--os-bg);
}

.osw-pa-akte__sprung a:focus-visible { outline: 2px solid var(--os-red); outline-offset: 2px; }

@media print {
	.osw-pa-akte.ist-reiter .osw-pa-akte__teil:not(.ist-aktiv) { display: block; }
	.osw-pa-akte__sprung { display: none; }
}

.osw-pa-akte [id^="akte-eintrag-"] { scroll-margin-top: 70px; }

/* Gesprächstermine im Cockpit */
.osw-pa-gtermine { margin-top: 24px; }
.osw-pa-gtermine > summary { cursor: pointer; display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; }
.osw-pa-gtermine__titel { font-family: var(--os-font-heading); font-size: 1.1rem; color: var(--os-black); }
.osw-pa-gtermine__tabelle th .osw-pa-m-btn { display: block; margin-top: 6px; }
.osw-pa-gtermine__tabelle select { max-width: 100%; }
.osw-pa-gtermine__plan { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-top: 18px; }
.osw-pa-gtermine__plan h4 { margin: 0 0 6px; font-family: var(--os-font-heading); }
.osw-pa-gtermine__plan ul { margin: 0; padding-left: 1.1em; font-size: .9rem; }
.osw-pa-gtermine__plan li { margin-bottom: 4px; }

/* Termine-Seite: zu welchem Gespräch ein Termin gehört */
.osw-pa .osw-pa-termin-gespraech { margin: -4px 0 8px; color: var(--os-red); font-family: var(--os-font-heading); font-size: .85rem; }