/*
 * OSW Projektarbeit — Einführung als Präsentation
 *
 * Ohne JavaScript stehen die Folien untereinander. Mit JavaScript bekommt
 * der Rahmen die Klasse .ist-bereit: eine Bühne, eine Folie aufs Mal,
 * Kapitel oben, Weiter und Zurück unten, der rote Faden als Fortschritt.
 *
 * Bewegung: Jede Folie baut sich beim Betreten auf (data-auftritt, gestaffelt
 * über --i). Bilder werden von einem roten Band im Schrägschnitt (−12°)
 * freigelegt – dem einzigen Ornament der OS West. Unter
 * prefers-reduced-motion steht alles sofort still da.
 */

.osw-pa-vortrag {
	--vortrag-rot: var(--os-red, #e2001a);
	--vortrag-papier: #f1eee9;
	--vortrag-linie: var(--os-border, #e5e5e5);
	--vortrag-schnitt: -12deg;
	--vortrag-hoehe: clamp(600px, calc(100vh - 120px), 920px);

	position: relative;
	background: #fff;
	border: 1px solid var(--vortrag-linie);
	border-radius: 4px;
	margin: 0 0 32px;
}

.osw-pa-vortrag .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

/* ---------------------------------------------------------------- Ohne JS */

.osw-pa-vortrag:not(.ist-bereit) .osw-pa-vortrag__folie {
	padding: clamp(24px, 4vw, 48px);
	border-bottom: 1px solid var(--vortrag-linie);
}

.osw-pa-vortrag [hidden] { display: none !important; }

/* ---------------------------------------------------------- Bühne mit JS */

.osw-pa-vortrag.ist-bereit {
	display: grid;
	grid-template-rows: auto minmax(0, 1fr) auto auto;
	grid-template-columns: minmax(0, 1fr);
	height: var(--vortrag-hoehe);
	overflow: hidden;
}

.osw-pa-vortrag.ist-bereit .osw-pa-vortrag__kopf,
.osw-pa-vortrag.ist-bereit .osw-pa-vortrag__fuss { display: flex; }

.osw-pa-vortrag.ist-vollbild,
.osw-pa-vortrag.ist-ersatzvollbild {
	--vortrag-hoehe: 100vh;
	border: 0;
	border-radius: 0;
	margin: 0;
	width: 100%;
}

@supports (height: 100dvh) {
	.osw-pa-vortrag.ist-vollbild,
	.osw-pa-vortrag.ist-ersatzvollbild { --vortrag-hoehe: 100dvh; }
}

.osw-pa-vortrag.ist-ersatzvollbild {
	position: fixed;
	inset: 0;
	z-index: 100000;
}

.osw-pa-vortrag:fullscreen { background: #fff; }

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

.osw-pa-vortrag__kopf {
	position: relative;
	align-items: center;
	gap: 12px;
	padding: 10px 16px 18px;
	border-bottom: 1px solid var(--vortrag-linie);
	background: #fff;
	z-index: 3;
}

.osw-pa-vortrag__kapitel {
	display: flex;
	gap: 4px;
	flex: 1 1 auto;
	min-width: 0;
	overflow-x: auto;
	scrollbar-width: none;
}

.osw-pa-vortrag__kapitel::-webkit-scrollbar { display: none; }

.osw-pa-vortrag__kapitelknopf {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	flex: 0 0 auto;
	min-height: 40px;
	padding: 6px 12px 6px 6px;
	border: 1px solid transparent;
	border-radius: 999px;
	background: none;
	font: inherit;
	font-size: .88rem;
	color: #6f6f6f;
	cursor: pointer;
	transition: color .18s ease, border-color .18s ease, background-color .18s ease;
}

.osw-pa-vortrag__kapitelnr {
	display: inline-grid;
	place-items: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	border: 1px solid var(--vortrag-linie);
	font-family: var(--os-font-heading);
	font-size: .8rem;
	font-variant-numeric: tabular-nums;
	transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}

.osw-pa-vortrag__kapitelknopf.ist-erledigt .osw-pa-vortrag__kapitelnr {
	border-color: var(--os-black);
	color: var(--os-black);
}

.osw-pa-vortrag__kapitelknopf[aria-current="step"] {
	color: var(--os-black);
	border-color: var(--os-black);
}

.osw-pa-vortrag__kapitelknopf[aria-current="step"] .osw-pa-vortrag__kapitelnr {
	background: var(--vortrag-rot);
	border-color: var(--vortrag-rot);
	color: #fff;
}

@media (hover: hover) {
	.osw-pa-vortrag__kapitelknopf:hover { color: var(--os-black); background: var(--os-bg-muted, #f8f9fa); }
}

.osw-pa-vortrag__werkzeuge { display: flex; gap: 6px; flex: 0 0 auto; }

.osw-pa-vortrag__werkzeug {
	min-height: 40px;
	padding: 6px 14px;
	border: 1px solid var(--vortrag-linie);
	border-radius: 999px;
	background: #fff;
	font: inherit;
	font-size: .85rem;
	color: var(--os-black);
	cursor: pointer;
	transition: border-color .18s ease, color .18s ease;
}

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

.osw-pa-vortrag__werkzeug[aria-expanded="true"] { border-color: var(--vortrag-rot); color: var(--vortrag-rot); }

/* Der rote Faden: wächst mit jeder Folie. */
.osw-pa-vortrag__faden {
	position: absolute;
	left: 16px;
	right: 16px;
	bottom: 2px;
	width: calc(100% - 32px);
	height: 14px;
	overflow: visible;
}

.osw-pa-vortrag__faden path {
	fill: none;
	stroke-width: 2.5;
	stroke-linecap: round;
}

.osw-pa-vortrag__fadengrund { stroke: var(--vortrag-linie); }

.osw-pa-vortrag__fadenrot {
	stroke: var(--vortrag-rot);
	stroke-dasharray: 100 100;
	stroke-dashoffset: var(--faden, 100);
	transition: stroke-dashoffset .8s cubic-bezier(.3, .7, .2, 1);
}

/* ---------------------------------------------------- Sprechtext, Vorlesen */

.osw-pa-vortrag__sprechfeld {
	max-height: 30vh;
	overflow-y: auto;
	padding: 12px 18px 14px;
	border-top: 1px solid var(--vortrag-linie);
	border-left: 4px solid var(--vortrag-rot);
	background: var(--os-bg-muted, #f8f9fa);
	z-index: 3;
}

.osw-pa-vortrag__sprechkopf {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 6px 16px;
	margin: 0 0 6px;
	font-size: .82rem;
	color: #6f6f6f;
}

.osw-pa-vortrag__sprechkopf span {
	font-family: var(--os-font-heading);
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--vortrag-rot);
}

.osw-pa-vortrag__sprechkopf label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }

.osw-pa-vortrag__sprechinhalt {
	margin: 0;
	max-width: 90ch;
	font-size: clamp(.98rem, 1.2vw, 1.12rem);
	line-height: 1.55;
	color: var(--os-text, #2b2b2b);
}

.osw-pa-vortrag__werkzeug--ton { display: inline-flex; align-items: center; gap: 8px; }
.osw-pa-vortrag__werkzeug--ton[hidden] { display: none; }

.osw-pa-vortrag__welle { display: inline-flex; align-items: center; gap: 2px; height: 14px; }

.osw-pa-vortrag__welle i {
	display: block;
	width: 3px;
	height: 6px;
	border-radius: 2px;
	background: currentColor;
}

.osw-pa-vortrag__werkzeug--ton.ist-an {
	border-color: var(--vortrag-rot);
	background: var(--vortrag-rot);
	color: #fff;
}

.osw-pa-vortrag__werkzeug--ton.ist-an .osw-pa-vortrag__welle i { animation: oswPaVWelle .9s ease-in-out infinite; }
.osw-pa-vortrag__werkzeug--ton.ist-an .osw-pa-vortrag__welle i:nth-child(2) { animation-delay: .15s; }
.osw-pa-vortrag__werkzeug--ton.ist-an .osw-pa-vortrag__welle i:nth-child(3) { animation-delay: .3s; }

@keyframes oswPaVWelle {
	0%, 100% { height: 4px; }
	50% { height: 14px; }
}

@media (max-width: 700px) {
	.osw-pa-vortrag__werkzeug[data-vortrag-sprechtext] { display: none; }
}

/* ----------------------------------------------------------------- Fuss */

.osw-pa-vortrag__fuss {
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 12px 16px;
	border-top: 1px solid var(--vortrag-linie);
	background: #fff;
	z-index: 3;
}

.osw-pa-vortrag__fuss .osw-pa-btn,
.osw-pa-vortrag__fuss .osw-pa-btn-leer { min-width: 120px; justify-content: center; }

.osw-pa-vortrag__fuss button[disabled] { opacity: .35; cursor: default; }

.osw-pa-vortrag__stand {
	margin: 0;
	font-family: var(--os-font-heading);
	font-variant-numeric: tabular-nums;
	text-align: center;
	color: var(--os-black);
}

.osw-pa-vortrag__standtitel {
	display: block;
	font-family: var(--os-font-sans);
	font-size: .82rem;
	color: #6f6f6f;
}

/* ---------------------------------------------------------------- Bühne */

.osw-pa-vortrag__buehne {
	position: relative;
	min-height: 0;
	container-type: inline-size;
	container-name: buehne;
}

.osw-pa-vortrag.ist-bereit .osw-pa-vortrag__buehne { overflow: hidden; }

.osw-pa-vortrag__folie {
	display: grid;
	gap: clamp(20px, 4cqi, 56px);
	align-items: center;
	align-content: center;
	align-content: safe center;
	padding: clamp(18px, 3cqi, 44px) clamp(20px, 4.5cqi, 64px);
	font-size: clamp(1rem, 1.5cqi, 1.18rem);
	line-height: 1.5;
	color: var(--os-text, #2b2b2b);
}

.osw-pa-vortrag.ist-bereit .osw-pa-vortrag__folie {
	position: absolute;
	inset: 0;
	overflow-x: hidden;
	overflow-y: auto;
	overscroll-behavior: contain;
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
}

.osw-pa-vortrag.ist-bereit .osw-pa-vortrag__folie.ist-aktiv {
	visibility: visible;
	opacity: 1;
	pointer-events: auto;
	animation: oswPaVFolie .7s cubic-bezier(.2, .7, .2, 1) both;
}

.osw-pa-vortrag.ist-bereit .osw-pa-vortrag__folie.ist-aktiv.ist-zurueck { animation-name: oswPaVFolieZurueck; }

.osw-pa-vortrag.ist-bereit .osw-pa-vortrag__folie.ist-weg {
	visibility: visible;
	animation: oswPaVFolieWeg .45s ease both;
	z-index: 0;
}

.osw-pa-vortrag.ist-bereit .osw-pa-vortrag__folie.ist-weg.ist-zurueck { animation-name: oswPaVFolieWegZurueck; }

/* Aufbau der Folien */
.osw-pa-vortrag__folie--titel,
.osw-pa-vortrag__folie--bild,
.osw-pa-vortrag__folie--bild-rechts,
.osw-pa-vortrag__folie--blatt { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

.osw-pa-vortrag__folie--titel { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
.osw-pa-vortrag__folie--bild { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
.osw-pa-vortrag__folie--bild-rechts { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }

.osw-pa-vortrag__folie--mitte,
.osw-pa-vortrag__folie--schluss,
.osw-pa-vortrag__folie--uebung { justify-items: center; }

.osw-pa-vortrag__folie--uebung { align-content: start; }

@container buehne (max-width: 760px) {
	.osw-pa-vortrag__folie--titel,
	.osw-pa-vortrag__folie--bild,
	.osw-pa-vortrag__folie--bild-rechts,
	.osw-pa-vortrag__folie--blatt { grid-template-columns: 1fr; align-content: start; }

	.osw-pa-vortrag__folie--bild-rechts .osw-pa-vortrag__bild,
	.osw-pa-vortrag__folie--titel .osw-pa-vortrag__bild { order: -1; }
}

/* ----------------------------------------------------------------- Text */

.osw-pa-vortrag__text { min-width: 0; max-width: 62ch; }
.osw-pa-vortrag__text--breit { width: 100%; max-width: 1080px; }
.osw-pa-vortrag__text--mitte { max-width: 760px; text-align: center; }
.osw-pa-vortrag__text--uebung { width: 100%; max-width: 900px; }

.osw-pa-vortrag__text > * + * { margin-top: clamp(10px, 1.6cqi, 18px); }
.osw-pa-vortrag__text p { margin-bottom: 0; }

.osw-pa-vortrag__eyebrow {
	margin: 0;
	font-family: var(--os-font-heading);
	font-size: .72rem;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--vortrag-rot);
}

.osw-pa.osw-pa-vortrag .osw-pa-vortrag__titel {
	margin: 0;
	font-family: var(--os-font-heading);
	font-size: clamp(1.6rem, 3.6cqi, 3rem);
	line-height: 1.1;
	letter-spacing: -.018em;
	text-wrap: balance;
	color: var(--os-black);
}

.osw-pa.osw-pa-vortrag .osw-pa-vortrag__titel--gross {
	font-size: clamp(2.2rem, 6cqi, 5rem);
	line-height: 1.04;
	letter-spacing: -.022em;
}

.osw-pa-vortrag__titel em { font-style: normal; color: var(--vortrag-rot); }

.osw-pa-vortrag__lead {
	font-size: clamp(1.05rem, 1.9cqi, 1.4rem);
	line-height: 1.45;
	color: var(--os-text, #2b2b2b);
}

.osw-pa-vortrag__notiz,
.osw-pa-vortrag__tipp { font-size: .88em; color: #6f6f6f; }

.osw-pa-vortrag__knoepfe { display: flex; flex-wrap: wrap; gap: 12px; }
.osw-pa-vortrag__text--mitte .osw-pa-vortrag__knoepfe { justify-content: center; }

.osw-pa-vortrag__merksatz {
	padding: 14px 18px;
	border-left: 4px solid var(--vortrag-rot);
	background: var(--os-bg-muted, #f8f9fa);
	font-family: var(--os-font-heading);
	line-height: 1.4;
	text-align: left;
}

.osw-pa-vortrag__lea {
	position: relative;
	padding: 12px 16px;
	border: 1px solid var(--vortrag-rot);
	border-radius: 4px;
	text-align: left;
}

.osw-pa-vortrag__lea > span:first-child {
	display: block;
	margin-bottom: 2px;
	font-family: var(--os-font-heading);
	font-size: .7rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--vortrag-rot);
}

.osw-pa-vortrag__frist {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	font-family: var(--os-font-heading);
	color: var(--os-black);
}

.osw-pa-vortrag__frist span {
	padding: 4px 10px;
	border-radius: 999px;
	background: var(--vortrag-rot);
	color: #fff;
	font-size: .72rem;
	letter-spacing: .1em;
	text-transform: uppercase;
}

/* --------------------------------------------------------------- Bilder */

.osw-pa-vortrag__bild {
	position: relative;
	margin: 0;
	min-width: 0;
	border-radius: 4px;
	/* clip schneidet ab, ohne eine Scrollfläche zu bilden – so zählt die
	   Bildhöhe im Raster, und das rote Band ragt nirgends hinaus. */
	overflow: hidden;
	overflow: clip;
	background: var(--vortrag-papier);
}

.osw-pa-vortrag__bild img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1280 / 672;
	object-fit: cover;
}

.osw-pa-vortrag__bild::after {
	content: "";
	position: absolute;
	top: -10%;
	bottom: -10%;
	left: -25%;
	width: 150%;
	background: var(--vortrag-rot);
	transform: translateX(130%) skewX(var(--vortrag-schnitt));
	pointer-events: none;
}

.osw-pa-vortrag__spalte { display: grid; gap: 14px; min-width: 0; }


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

.osw-pa-vortrag__karten {
	display: grid;
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
	text-align: left;
}

.osw-pa-vortrag__karten--drei { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.osw-pa-vortrag__karten--zwei { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

.osw-pa-vortrag__karte {
	position: relative;
	padding: 18px 20px;
	border: 1px solid var(--vortrag-linie);
	border-top: 4px solid var(--vortrag-rot);
	border-radius: 4px;
	background: #fff;
}

.osw-pa-vortrag__karten--kompakt .osw-pa-vortrag__karte { padding: 12px 14px; }
.osw-pa-vortrag__karte h3 { margin: 0 0 6px; font-size: 1.05em; }
.osw-pa-vortrag__karte p { margin: 0; font-size: .95em; }

.osw-pa-vortrag__nummer {
	display: block;
	margin-bottom: 6px;
	font-family: var(--os-font-heading);
	font-size: clamp(2rem, 4cqi, 3.2rem);
	line-height: 1;
	color: var(--vortrag-rot);
}

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

.osw-pa-vortrag__liste li {
	position: relative;
	padding: 8px 0 8px 28px;
	border-bottom: 1px solid var(--vortrag-linie);
}

.osw-pa-vortrag__liste li::before {
	content: "";
	position: absolute;
	left: 2px;
	top: 1.05em;
	width: 14px;
	height: 6px;
	background: var(--vortrag-rot);
	transform: skewX(var(--vortrag-schnitt));
}

.osw-pa-vortrag__liste--eng li { padding-top: 5px; padding-bottom: 5px; }

.osw-pa-vortrag__liste--nummern { counter-reset: vortrag; }
.osw-pa-vortrag__liste--nummern li { counter-increment: vortrag; padding-left: 40px; }

.osw-pa-vortrag__liste--nummern li::before {
	content: counter(vortrag);
	top: .45em;
	width: 26px;
	height: 26px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	transform: none;
	color: #fff;
	font-family: var(--os-font-heading);
	font-size: .8rem;
}

/* Sprechblasen */
.osw-pa-vortrag__gespraech { display: grid; gap: 12px; justify-items: start; text-align: left; }

.osw-pa-vortrag__blase {
	position: relative;
	max-width: 30em;
	padding: 14px 18px;
	border-radius: 18px 18px 18px 4px;
	background: var(--os-black);
	color: #fff;
	font-family: var(--os-font-heading);
	font-size: 1.08em;
}

.osw-pa-vortrag__blase--antwort {
	justify-self: end;
	border-radius: 18px 18px 4px 18px;
	background: var(--vortrag-rot);
}

/* Wege nach der Oberstufe */
.osw-pa-vortrag__wege { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }

.osw-pa-vortrag__wege li {
	display: grid;
	grid-template-columns: 9.5em 1fr;
	align-items: baseline;
	gap: 12px;
	padding: 10px 14px;
	font-style: normal;
	border: 1px solid var(--vortrag-linie);
	border-radius: 4px;
}

.osw-pa-vortrag__wege em { font-style: normal; }

.osw-pa-vortrag__wege span {
	font-family: var(--os-font-heading);
	font-size: .72rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--vortrag-rot);
}

/* -------------------------------------------------------------- Phasen */

.osw-pa-vortrag__phasen { display: grid; gap: 14px; }

.osw-pa-vortrag__phasenleiste {
	position: relative;
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 6px;
}

.osw-pa-vortrag__phasenleiste::before {
	content: "";
	position: absolute;
	left: 8%;
	right: 8%;
	top: 21px;
	height: 3px;
	background: var(--vortrag-rot);
	transform-origin: left center;
	transform: scaleX(var(--linie, 1));
}

.osw-pa-vortrag__phase {
	position: relative;
	display: grid;
	justify-items: center;
	gap: 6px;
	padding: 0 2px 6px;
	border: 0;
	background: none;
	font: inherit;
	color: var(--os-black);
	cursor: pointer;
	text-align: center;
}

.osw-pa-vortrag__phasennr {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 3px solid var(--vortrag-rot);
	background: #fff;
	font-family: var(--os-font-heading);
	font-size: 1.05rem;
	color: var(--vortrag-rot);
	transition: background-color .2s ease, color .2s ease, transform .2s ease;
}

.osw-pa-vortrag__phasentitel { font-family: var(--os-font-heading); font-size: .82rem; line-height: 1.2; }

.osw-pa-vortrag__phase.ist-aktiv .osw-pa-vortrag__phasennr {
	background: var(--vortrag-rot);
	color: #fff;
	transform: scale(1.12);
}

@media (hover: hover) {
	.osw-pa-vortrag__phase:hover .osw-pa-vortrag__phasennr { transform: scale(1.08); }
}

.osw-pa-vortrag__phasenfeld,
.osw-pa-vortrag__feld {
	padding: 16px 20px;
	border: 1px solid var(--vortrag-linie);
	border-left: 4px solid var(--vortrag-rot);
	border-radius: 4px;
	text-align: left;
	animation: oswPaVAuf .45s cubic-bezier(.2, .7, .2, 1) both;
}

.osw-pa-vortrag__phasenunten {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, .9fr);
	gap: clamp(14px, 3cqi, 32px);
	align-items: start;
}

@container buehne (max-width: 760px) {
	.osw-pa-vortrag__phasenunten { grid-template-columns: 1fr; }
}

.osw-pa-vortrag__phasenfeld h3 { margin: 2px 0 6px; }
.osw-pa-vortrag__phasenfeld p { margin: 0 0 8px; }

.osw-pa-vortrag__wann {
	margin: 0;
	font-family: var(--os-font-heading);
	font-size: .74rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--vortrag-rot);
	font-variant-numeric: tabular-nums;
}

@container buehne (max-width: 640px) {
	.osw-pa-vortrag__phasenleiste { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 14px; }
	.osw-pa-vortrag__phasenleiste::before { display: none; }
}

/* ------------------------------------------------------ Handlungsfelder */

.osw-pa-vortrag__felder { display: grid; gap: 14px; }
.osw-pa-vortrag__reiterleiste { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.osw-pa-vortrag__reiterleiste .osw-pa-chip { cursor: pointer; font: inherit; }

.osw-pa-vortrag__feld {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	gap: clamp(14px, 3cqi, 32px);
	align-items: center;
}

.osw-pa-vortrag__feld h3 { margin: 0 0 6px; }
.osw-pa-vortrag__feld p { margin: 0 0 8px; }

@container buehne (max-width: 760px) {
	.osw-pa-vortrag__feld { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------- Schritte */

.osw-pa-vortrag__schritte {
	position: relative;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: schritt;
}

.osw-pa-vortrag__schritte::before {
	content: "";
	position: absolute;
	left: 15px;
	top: 14px;
	bottom: 14px;
	width: 2px;
	background: var(--vortrag-rot);
	transform-origin: top;
	animation: oswPaVLinie 1.4s .4s cubic-bezier(.3, .7, .2, 1) both;
	animation-play-state: paused;
}

.ist-aktiv .osw-pa-vortrag__schritte::before { animation-play-state: running; }

.osw-pa-vortrag__schritte li {
	position: relative;
	counter-increment: schritt;
	padding: 6px 0 6px 46px;
}

.osw-pa-vortrag__schritte li::before {
	content: counter(schritt);
	position: absolute;
	left: 0;
	top: 4px;
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: #fff;
	border: 2px solid var(--vortrag-rot);
	font-family: var(--os-font-heading);
	font-size: .85rem;
	color: var(--vortrag-rot);
}

.osw-pa-vortrag__schritte em { display: block; font-size: .9em; color: #6f6f6f; }
.osw-pa-vortrag__schritte--kurz li { padding-top: 3px; padding-bottom: 3px; }

/* --------------------------------------------------------------- Ampeln */

.osw-pa-vortrag__ampeln {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.osw-pa-vortrag__ampel {
	display: grid;
	justify-items: center;
	gap: 10px;
	width: 100%;
	height: 100%;
	padding: 18px 16px;
	border: 1px solid var(--vortrag-linie);
	border-radius: 4px;
	background: #fff;
	font: inherit;
	color: inherit;
	text-align: center;
	cursor: pointer;
	transition: border-color .18s ease, transform .18s ease;
}

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

.osw-pa-vortrag__licht {
	display: grid;
	gap: 6px;
	padding: 8px;
	border-radius: 14px;
	background: var(--os-black);
}

.osw-pa-vortrag__licht i {
	display: block;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: #3a3a3a;
	transition: background-color .3s ease, box-shadow .3s ease;
}

.osw-pa-vortrag__ampel.ist-offen.osw-pa-vortrag__ampel--rot .osw-pa-vortrag__licht i:nth-child(1) { background: var(--vortrag-rot); box-shadow: 0 0 14px var(--vortrag-rot); }
.osw-pa-vortrag__ampel.ist-offen.osw-pa-vortrag__ampel--gelb .osw-pa-vortrag__licht i:nth-child(2) { background: #f2b400; box-shadow: 0 0 14px #f2b400; }
.osw-pa-vortrag__ampel.ist-offen.osw-pa-vortrag__ampel--gruen .osw-pa-vortrag__licht i:nth-child(3) { background: #2fb15a; box-shadow: 0 0 14px #2fb15a; }

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

.osw-pa-vortrag__verdeckt {
	display: block;
	font-size: .95em;
	opacity: 0;
	transform: translateY(6px);
	transition: opacity .35s ease, transform .35s ease;
}

.osw-pa-vortrag__ampel:not(.ist-offen) .osw-pa-vortrag__verdeckt::before {
	content: "Tippen zum Aufdecken";
}

.osw-pa-vortrag__ampel:not(.ist-offen) .osw-pa-vortrag__verdeckt { font-size: 0; opacity: 1; transform: none; }
.osw-pa-vortrag__ampel:not(.ist-offen) .osw-pa-vortrag__verdeckt::before { font-size: .85rem; color: #6f6f6f; }
.osw-pa-vortrag__ampel.ist-offen .osw-pa-vortrag__verdeckt { opacity: 1; transform: none; }

/* ------------------------------------------------------------ Drehkarten */

.osw-pa-vortrag__drehkarten {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.osw-pa-vortrag__drehkarten--drei { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.osw-pa-vortrag__drehkarten--zwei { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

.osw-pa-vortrag__drehkarte {
	position: relative;
	display: grid;
	width: 100%;
	min-height: 112px;
	height: 100%;
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	color: inherit;
	text-align: left;
	cursor: pointer;
	perspective: 900px;
}

.osw-pa-vortrag__vorne,
.osw-pa-vortrag__hinten {
	grid-area: 1 / 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 4px;
	padding: 14px 16px;
	border-radius: 4px;
	backface-visibility: hidden;
	transition: transform .6s cubic-bezier(.3, .7, .2, 1);
	line-height: 1.35;
}

.osw-pa-vortrag__vorne {
	border: 1px dashed #b9b9b9;
	background: var(--os-bg-muted, #f8f9fa);
	font-family: var(--os-font-heading);
	font-size: 1.05em;
	color: var(--os-black);
}

.osw-pa-vortrag__hinten {
	border: 2px solid var(--vortrag-rot);
	background: #fff;
	transform: rotateY(180deg);
}

.osw-pa-vortrag__vorne small,
.osw-pa-vortrag__hinten small {
	font-family: var(--os-font-heading);
	font-size: .68rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: #6f6f6f;
}

.osw-pa-vortrag__hinten small { color: var(--vortrag-rot); }

.osw-pa-vortrag__drehkarte.ist-offen .osw-pa-vortrag__vorne { transform: rotateY(-180deg); }
.osw-pa-vortrag__drehkarte.ist-offen .osw-pa-vortrag__hinten { transform: rotateY(0); }

.osw-pa-vortrag__drehkarte.ist-lea .osw-pa-vortrag__hinten { background: var(--vortrag-rot); color: #fff; }
.osw-pa-vortrag__drehkarte.ist-lea .osw-pa-vortrag__hinten small { color: #fff; }

@media (hover: hover) {
	.osw-pa-vortrag__drehkarte:not(.ist-offen):hover .osw-pa-vortrag__vorne { border-color: var(--os-black); }
}

/* --------------------------------------------------------------- Zitat */

.osw-pa-vortrag__zitat {
	margin: 0;
	padding: 18px 20px;
	border-left: 4px solid var(--vortrag-rot);
	background: var(--os-bg-muted, #f8f9fa);
	font-family: var(--os-font-heading);
	font-size: clamp(1.05rem, 1.9cqi, 1.4rem);
	line-height: 1.35;
	color: var(--os-black);
}

.osw-pa-vortrag__zitatwer,
.osw-pa-vortrag__zielwer {
	display: block;
	margin-bottom: 6px;
	font-size: .7rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--vortrag-rot);
	font-family: var(--os-font-heading);
}

.osw-pa-vortrag__tippen { display: block; min-height: 2.7em; }

.osw-pa-vortrag__tippen.ist-am-tippen::after {
	content: "";
	display: inline-block;
	width: 2px;
	height: 1em;
	margin-left: 2px;
	vertical-align: -.12em;
	background: var(--vortrag-rot);
	animation: oswPaVBlinken .8s steps(1) infinite;
}

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

.osw-pa-vortrag__haken li { position: relative; padding: 4px 0 4px 32px; }

.osw-pa-vortrag__haken li::before {
	content: "";
	position: absolute;
	left: 4px;
	top: .5em;
	width: 8px;
	height: 15px;
	border: solid var(--vortrag-rot);
	border-width: 0 3px 3px 0;
	transform: rotate(45deg);
}

/* --------------------------------------------------------------- SMART */

.osw-pa-vortrag__smart { display: grid; gap: 12px; }

.osw-pa-vortrag__buchstaben {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 6px;
}

.osw-pa-vortrag__buchstabe {
	display: grid;
	justify-items: center;
	gap: 2px;
	padding: 8px 2px;
	border: 2px solid var(--os-black);
	border-radius: 4px;
	background: #fff;
	font: inherit;
	color: var(--os-black);
	cursor: pointer;
	transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}

.osw-pa-vortrag__buchstabe b { font-family: var(--os-font-heading); font-size: clamp(1.4rem, 3cqi, 2.2rem); line-height: 1; }
.osw-pa-vortrag__buchstabe span { font-size: .72rem; }

.osw-pa-vortrag__buchstabe[aria-pressed="true"] {
	background: var(--vortrag-rot);
	border-color: var(--vortrag-rot);
	color: #fff;
	transform: translateY(-3px);
}

.osw-pa-vortrag__ziel {
	padding: 14px 16px;
	border: 1px solid var(--vortrag-linie);
	border-radius: 4px;
	line-height: 1.55;
}

.osw-pa-vortrag__ziel [data-teil] {
	transition: background-color .3s ease, box-shadow .3s ease, color .3s ease;
	border-radius: 2px;
}

.osw-pa-vortrag__smart[data-aktiv="s"] [data-teil="s"],
.osw-pa-vortrag__smart[data-aktiv="m"] [data-teil="m"],
.osw-pa-vortrag__smart[data-aktiv="t"] [data-teil="t"] {
	background: var(--os-red-soft, #fdeced);
	box-shadow: inset 0 -3px 0 var(--vortrag-rot);
	color: var(--os-black);
}

.osw-pa-vortrag__smart[data-aktiv="a"] .osw-pa-vortrag__ziel,
.osw-pa-vortrag__smart[data-aktiv="r"] .osw-pa-vortrag__ziel { border-color: var(--vortrag-rot); }

.osw-pa-vortrag__erklaerung {
	display: none;
	margin: 0;
	padding: 10px 14px;
	border-left: 4px solid var(--vortrag-rot);
	background: var(--os-bg-muted, #f8f9fa);
	animation: oswPaVAuf .35s ease both;
}

.osw-pa-vortrag__smart[data-aktiv="s"] [data-erklaerung="s"],
.osw-pa-vortrag__smart[data-aktiv="m"] [data-erklaerung="m"],
.osw-pa-vortrag__smart[data-aktiv="a"] [data-erklaerung="a"],
.osw-pa-vortrag__smart[data-aktiv="r"] [data-erklaerung="r"],
.osw-pa-vortrag__smart[data-aktiv="t"] [data-erklaerung="t"] { display: block; }

.osw-pa-vortrag__smart:not([data-aktiv=""]) .osw-pa-vortrag__smart-hinweis { display: none; }

/* --------------------------------------------------------------- Treppe */

.osw-pa-vortrag__treppe {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	align-items: end;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
	text-align: left;
}

.osw-pa-vortrag__treppe li {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 4px;
	min-height: calc(70px + var(--stufe) * 46px);
	padding: 14px 16px;
	border-radius: 4px 4px 0 0;
	background: var(--os-black);
	color: #fff;
}

.osw-pa-vortrag__treppe li:last-child { background: var(--vortrag-rot); }

.osw-pa-vortrag__treppe span {
	font-family: var(--os-font-heading);
	font-size: .7rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	opacity: .8;
}

.osw-pa-vortrag__treppe strong { font-family: var(--os-font-heading); line-height: 1.25; }

.osw-pa-vortrag.ist-bereit .ist-aktiv .osw-pa-vortrag__treppe li[data-auftritt] { animation-name: oswPaVWachsen; transform-origin: bottom; }

.osw-pa-vortrag__verboten {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 10px;
	font-family: var(--os-font-heading);
}

.osw-pa-vortrag__verboten span {
	font-size: .7rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: #6f6f6f;
}

.osw-pa-vortrag__verboten s { text-decoration-color: var(--vortrag-rot); text-decoration-thickness: 3px; color: #6f6f6f; }

/* ---------------------------------------------------------------- Blatt */

.osw-pa-vortrag__blatt {
	position: relative;
	padding: clamp(18px, 3cqi, 30px);
	border: 1px solid #d9d9d9;
	border-radius: 4px;
	background: #fff;
	box-shadow: 0 18px 40px -24px rgba(12, 12, 14, .35);
	transform: rotate(1.2deg);
	font-size: .9em;
	text-align: left;
}

.osw-pa-vortrag__blattkopf {
	margin: 0 0 10px;
	padding-bottom: 8px;
	border-bottom: 3px solid var(--vortrag-rot);
	font-family: var(--os-font-heading);
	color: var(--os-black);
}

.osw-pa-vortrag__blatt dl { margin: 0; display: grid; gap: 8px; }
.osw-pa-vortrag__blatt dl div { display: grid; grid-template-columns: 6.5em 1fr; gap: 10px; }
.osw-pa-vortrag__blatt dt { font-family: var(--os-font-heading); font-size: .78rem; color: #6f6f6f; }
.osw-pa-vortrag__blatt dd { margin: 0; }

.osw-pa-vortrag__unterschriften {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
	margin-top: 16px;
}

.osw-pa-vortrag__unterschriften span {
	display: flex;
	flex-direction: column-reverse;
	gap: 2px;
	padding-top: 2px;
	border-top: 1px solid var(--os-black);
	font-size: .72rem;
	color: #6f6f6f;
}

.osw-pa-vortrag__unterschriften svg { width: 100%; height: 34px; overflow: visible; }

.osw-pa-vortrag__unterschriften path {
	fill: none;
	stroke: #1b3a8a;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-dasharray: 1 1;
	stroke-dashoffset: 0;
}

.ist-aktiv .osw-pa-vortrag__unterschriften path { animation: oswPaVSchreiben 1s ease-out both; }
.ist-aktiv .osw-pa-vortrag__unterschriften span:nth-child(1) path { animation-delay: 1.4s; }
.ist-aktiv .osw-pa-vortrag__unterschriften span:nth-child(2) path { animation-delay: 2.2s; }
.ist-aktiv .osw-pa-vortrag__unterschriften span:nth-child(3) path { animation-delay: 3s; }

.osw-pa-vortrag__stempel {
	position: absolute;
	right: 22px;
	bottom: 70px;
	margin: 0;
	background: rgba(255, 255, 255, .85);
	padding: 6px 14px;
	border: 3px solid var(--vortrag-rot);
	border-radius: 4px;
	font-family: var(--os-font-heading);
	font-size: 1.2rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--vortrag-rot);
	transform: rotate(-12deg);
	opacity: .9;
	pointer-events: none;
}

.ist-aktiv .osw-pa-vortrag__stempel { animation: oswPaVStempel .5s 4s cubic-bezier(.3, 1.6, .5, 1) both; }

/* Stapel der Dokumentation */
.osw-pa-vortrag__stapel {
	display: grid;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.osw-pa-vortrag__stapel li {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
	margin-left: calc(var(--lage) * 10px);
	padding: 10px 14px;
	border: 1px solid #d9d9d9;
	border-left: 4px solid var(--os-black);
	border-radius: 2px;
	background: #fff;
}

.osw-pa-vortrag__stapel li:nth-child(4) { border-left-color: var(--vortrag-rot); padding-top: 16px; padding-bottom: 16px; }
.osw-pa-vortrag__stapel span { font-size: .82em; color: #6f6f6f; text-align: right; }
.osw-pa-vortrag.ist-bereit .ist-aktiv .osw-pa-vortrag__stapel li[data-auftritt] { animation-name: oswPaVVonRechts; }

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

.osw-pa-vortrag__chips li {
	padding: 4px 12px;
	border: 1px solid var(--vortrag-linie);
	border-radius: 999px;
	font-size: .85em;
}

/* ------------------------------------------------------------- Zahlen */

.osw-pa-vortrag__zahlen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }

.osw-pa-vortrag__zahlen p {
	display: grid;
	gap: 2px;
	padding: 12px 14px;
	border: 1px solid var(--vortrag-linie);
	border-top: 4px solid var(--vortrag-rot);
	border-radius: 4px;
}

.osw-pa-vortrag__zahlen b {
	font-family: var(--os-font-heading);
	font-size: clamp(2rem, 4.4cqi, 3.4rem);
	line-height: 1;
	color: var(--vortrag-rot);
	font-variant-numeric: tabular-nums;
}

.osw-pa-vortrag__zahlen span { font-size: .88em; }

[data-vortrag-zaehler] { font-variant-numeric: tabular-nums; }

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

.osw-pa-vortrag__umschalter { display: grid; gap: 10px; }
.osw-pa-vortrag__umschaltknoepfe { display: flex; flex-wrap: wrap; gap: 8px; }
.osw-pa-vortrag__umschaltknoepfe .osw-pa-chip { cursor: pointer; font: inherit; }

.osw-pa-vortrag__eintrag {
	position: relative;
	padding: 14px 16px;
	border: 1px solid var(--vortrag-linie);
	border-left: 4px solid var(--os-gruen, #2e8b4f);
	border-radius: 4px;
	background: #fff;
	font-size: .95em;
	animation: oswPaVAuf .4s ease both;
}

.osw-pa-vortrag__eintrag p { margin: 0 0 4px; }
.osw-pa-vortrag__eintrag--schwach { border-left-color: var(--vortrag-rot); background: var(--os-bg-muted, #f8f9fa); }

.osw-pa-vortrag__eintragkopf { font-family: var(--os-font-heading); color: var(--os-black); }
.osw-pa-vortrag__urteil { color: var(--vortrag-rot); font-family: var(--os-font-heading); font-size: .9em; }

.osw-pa-vortrag__foto {
	position: absolute;
	right: 14px;
	bottom: 14px;
	display: grid;
	place-items: end start;
	width: 74px;
	height: 56px;
	padding: 4px 6px;
	border-radius: 3px;
	background: repeating-linear-gradient(-12deg, #f8f9fa 0 6px, #eeeeef 6px 12px);
	border: 1px solid var(--vortrag-linie);
	font-size: .62rem !important;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #6f6f6f;
}

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

.osw-pa-vortrag__budget,
.osw-pa-vortrag__quellen {
	padding: 14px 16px;
	border: 1px solid var(--vortrag-linie);
	border-radius: 4px;
	text-align: left;
}

.osw-pa-vortrag__budgetkopf {
	margin: 0 0 8px !important;
	font-family: var(--os-font-heading);
	font-size: .72rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--vortrag-rot);
}

.osw-pa-vortrag__budget ul,
.osw-pa-vortrag__balken {
	display: grid;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.osw-pa-vortrag__budget li,
.osw-pa-vortrag__balken li {
	position: relative;
	display: flex;
	justify-content: space-between;
	gap: 10px;
	padding: 5px 10px;
	font-size: .9em;
	z-index: 0;
}

.osw-pa-vortrag__budget li::before,
.osw-pa-vortrag__balken li::before {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: var(--anteil);
	background: var(--os-red-soft, #fdeced);
	border-left: 3px solid var(--vortrag-rot);
	z-index: -1;
	transform-origin: left;
}

.ist-aktiv .osw-pa-vortrag__budget li::before,
.ist-aktiv .osw-pa-vortrag__balken li::before { animation: oswPaVBalken 1s cubic-bezier(.3, .7, .2, 1) both; }

.ist-aktiv .osw-pa-vortrag__budget li:nth-child(2)::before,
.ist-aktiv .osw-pa-vortrag__balken li:nth-child(2)::before { animation-delay: .15s; }

.ist-aktiv .osw-pa-vortrag__budget li:nth-child(3)::before,
.ist-aktiv .osw-pa-vortrag__balken li:nth-child(3)::before { animation-delay: .3s; }

.ist-aktiv .osw-pa-vortrag__balken li:nth-child(4)::before { animation-delay: .45s; }

.osw-pa-vortrag__budget b,
.osw-pa-vortrag__balken b { font-variant-numeric: tabular-nums; }

.osw-pa-vortrag__budgetsumme {
	margin: 8px 0 0 !important;
	padding-top: 8px;
	border-top: 2px solid var(--os-black);
	text-align: right;
}

.osw-pa-vortrag__quellen ul { margin: 0; padding-left: 1.1em; }
.osw-pa-vortrag__quellen li { margin: 0 0 4px; }

/* ----------------------------------------------------------- Ausstellung */

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

.osw-pa-vortrag__ablauf li {
	display: flex;
	align-items: baseline;
	gap: 8px;
	padding: 6px 12px;
	border: 1px solid var(--vortrag-linie);
	border-radius: 999px;
	font-size: .9em;
}

.osw-pa-vortrag__ablauf b { font-family: var(--os-font-heading); color: var(--vortrag-rot); font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- Pitch */

.osw-pa-vortrag__pitch {
	display: grid;
	gap: 10px;
	padding: clamp(16px, 3cqi, 28px);
	border-radius: 4px;
	background: var(--os-black);
	color: #fff;
	text-align: left;
}

.osw-pa.osw-pa-vortrag .osw-pa-vortrag__pitch h3 { margin: 0; color: #fff; }
.osw-pa-vortrag__pitch p { margin: 0; }

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

.osw-pa-vortrag__pitchsaetze li { display: grid; grid-template-columns: 6.5em 1fr; gap: 10px; font-size: .95em; }

.osw-pa-vortrag__pitchsaetze span {
	font-family: var(--os-font-heading);
	font-size: .7rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #ff3347;
	padding-top: .25em;
}

.osw-pa-vortrag__uhr { position: relative; width: 108px; height: 108px; justify-self: center; }
.osw-pa-vortrag__uhr svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.osw-pa-vortrag__uhrgrund { fill: none; stroke: rgba(255, 255, 255, .16); stroke-width: 8; }

.osw-pa-vortrag__uhrring {
	fill: none;
	stroke: #ff3347;
	stroke-width: 8;
	stroke-linecap: round;
	stroke-dasharray: 100 100;
	stroke-dashoffset: var(--rest, 0);
}

.osw-pa-vortrag__uhrzahl {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	font-family: var(--os-font-heading);
	font-size: 2rem;
	font-variant-numeric: tabular-nums;
}

.osw-pa-vortrag__pitch .osw-pa-vortrag__notiz { color: rgba(255, 255, 255, .7); }
.osw-pa-vortrag__pitch .osw-pa-vortrag__eyebrow { color: #ff3347; }

/* ----------------------------------------------------------------- Quiz */

.osw-pa-vortrag__fragen {
	display: grid;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: frage;
}

.osw-pa-vortrag__frage {
	counter-increment: frage;
	padding: 12px 16px;
	border: 1px solid var(--vortrag-linie);
	border-left: 4px solid var(--vortrag-linie);
	border-radius: 4px;
	transition: border-color .25s ease, background-color .25s ease;
}

.osw-pa-vortrag__frage.ist-richtig { border-left-color: var(--os-gruen, #2e8b4f); }
.osw-pa-vortrag__frage.ist-falsch { border-left-color: var(--vortrag-rot); background: var(--os-red-soft, #fdeced); }

.osw-pa-vortrag__fragetext { margin: 0 0 8px; font-family: var(--os-font-heading); color: var(--os-black); }
.osw-pa-vortrag__fragetext::before { content: counter(frage) ". "; color: var(--vortrag-rot); }

.osw-pa-vortrag__antworten { display: flex; flex-wrap: wrap; gap: 8px; }
.osw-pa-vortrag__antworten .osw-pa-chip { cursor: pointer; font: inherit; text-align: left; }
.osw-pa-vortrag__antworten .osw-pa-chip[disabled] { cursor: default; }
.osw-pa-vortrag__antworten .osw-pa-chip.ist-richtig { border-color: var(--os-gruen, #2e8b4f); background: var(--os-gruen, #2e8b4f); color: #fff; }
.osw-pa-vortrag__antworten .osw-pa-chip.ist-falsch { border-color: var(--vortrag-rot); color: var(--vortrag-rot); text-decoration: line-through; }

.osw-pa-vortrag__grund { margin: 8px 0 0; font-size: .92em; animation: oswPaVAuf .35s ease both; }

.osw-pa-vortrag__quizfuss { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 14px; }
.osw-pa-vortrag__quizstand { margin: 0; font-family: var(--os-font-heading); font-size: 1.1em; color: var(--os-black); }

/* Übungen aus dem Wegweiser in der Bühne */
.osw-pa-vortrag__text--uebung .osw-pa-uebung { text-align: left; }

/* ---------------------------------------------------------- Meilensteine */

.osw-pa-vortrag__meilensteine {
	position: relative;
	display: grid;
	gap: 8px;
	margin: 0;
	padding: 0 0 0 26px;
	list-style: none;
	text-align: left;
}

.osw-pa-vortrag__meilensteine::before {
	content: "";
	position: absolute;
	left: 7px;
	top: 8px;
	bottom: 8px;
	width: 2px;
	background: var(--vortrag-rot);
}

.osw-pa-vortrag__meilensteine li {
	position: relative;
	display: grid;
	grid-template-columns: minmax(12em, 16em) 1fr;
	gap: 12px;
	align-items: baseline;
	padding: 8px 12px;
	border: 1px solid var(--vortrag-linie);
	border-radius: 4px;
	background: #fff;
}

.osw-pa-vortrag__meilensteine li::before {
	content: "";
	position: absolute;
	left: -25px;
	top: 50%;
	width: 14px;
	height: 14px;
	margin-top: -7px;
	border-radius: 50%;
	background: #fff;
	border: 3px solid var(--vortrag-rot);
}

.osw-pa-vortrag__meilensteine li:last-child::before { background: var(--vortrag-rot); }

@container buehne (max-width: 640px) {
	.osw-pa-vortrag__meilensteine li { grid-template-columns: 1fr; gap: 2px; }
}

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

.osw-pa-vortrag__uebersicht {
	position: absolute;
	inset: 0;
	z-index: 4;
	overflow-y: auto;
	padding: clamp(20px, 4cqi, 48px);
	background: #fff;
	animation: oswPaVAuf .3s ease both;
	columns: 3 260px;
	column-gap: 32px;
}

.osw-pa.osw-pa-vortrag .osw-pa-vortrag__uebersicht h2 { column-span: all; margin: 0 0 16px; }
.osw-pa.osw-pa-vortrag .osw-pa-vortrag__uebersicht h3 { margin: 0 0 6px; font-size: .95rem; color: var(--vortrag-rot); break-after: avoid; }

.osw-pa-vortrag__uebersicht ol { margin: 0 0 18px; padding: 0; list-style: none; break-inside: avoid; }

.osw-pa-vortrag__uebersicht button {
	display: flex;
	gap: 10px;
	width: 100%;
	padding: 6px 8px;
	border: 0;
	border-radius: 4px;
	background: none;
	font: inherit;
	text-align: left;
	color: var(--os-text, #2b2b2b);
	cursor: pointer;
}

.osw-pa-vortrag__uebersicht button span { min-width: 1.8em; font-family: var(--os-font-heading); color: #6f6f6f; font-variant-numeric: tabular-nums; }
.osw-pa-vortrag__uebersicht button[aria-current="true"] { background: var(--os-red-soft, #fdeced); color: var(--os-black); }

@media (hover: hover) {
	.osw-pa-vortrag__uebersicht button:hover { background: var(--os-bg-muted, #f8f9fa); }
}

/* ------------------------------------------------------------ Fokus */

.osw-pa-vortrag button:focus-visible,
.osw-pa-vortrag a:focus-visible {
	outline: 3px solid var(--vortrag-rot);
	outline-offset: 3px;
}

/* ------------------------------------------------------------- Auftritt */

.osw-pa-vortrag.ist-bereit [data-auftritt] { opacity: 0; }

.osw-pa-vortrag.ist-bereit .ist-aktiv [data-auftritt] {
	animation: oswPaVAuf .65s cubic-bezier(.2, .7, .2, 1) both;
	animation-delay: calc(var(--i, 0) * 90ms + 220ms);
}

.osw-pa-vortrag.ist-bereit .ist-aktiv .osw-pa-vortrag__bild::after {
	animation: oswPaVWisch .95s .15s cubic-bezier(.6, 0, .2, 1) both;
}

.osw-pa-vortrag.ist-bereit .ist-aktiv .osw-pa-vortrag__bild img {
	animation: oswPaVZoom 9s .15s ease-out both;
}

.osw-pa-vortrag.ist-bereit .ist-aktiv .osw-pa-vortrag__phasenleiste::before {
	animation: oswPaVLinieQuer 1.2s .5s cubic-bezier(.3, .7, .2, 1) both;
}

.osw-pa-vortrag.ist-bereit .ist-aktiv .osw-pa-vortrag__phase {
	animation: oswPaVPop .5s cubic-bezier(.3, 1.5, .5, 1) both;
	animation-delay: calc(var(--i, 0) * 160ms + 600ms);
}

.osw-pa-vortrag.ist-bereit .ist-aktiv .osw-pa-vortrag__blatt {
	animation: oswPaVBlatt .8s .2s cubic-bezier(.2, .7, .2, 1) both;
}

@keyframes oswPaVFolie {
	from { opacity: 0; transform: translateX(48px); }
	to { opacity: 1; transform: none; }
}

@keyframes oswPaVFolieZurueck {
	from { opacity: 0; transform: translateX(-48px); }
	to { opacity: 1; transform: none; }
}

@keyframes oswPaVFolieWeg {
	from { opacity: 1; transform: none; }
	to { opacity: 0; transform: translateX(-48px); }
}

@keyframes oswPaVFolieWegZurueck {
	from { opacity: 1; transform: none; }
	to { opacity: 0; transform: translateX(48px); }
}

@keyframes oswPaVAuf {
	from { opacity: 0; transform: translateY(18px); }
	to { opacity: 1; transform: none; }
}

@keyframes oswPaVVonRechts {
	from { opacity: 0; transform: translateX(60px) rotate(2deg); }
	to { opacity: 1; transform: none; }
}

@keyframes oswPaVWachsen {
	from { opacity: 0; transform: scaleY(.2); }
	to { opacity: 1; transform: none; }
}

@keyframes oswPaVWisch {
	from { transform: translateX(-12%) skewX(var(--vortrag-schnitt)); }
	to { transform: translateX(130%) skewX(var(--vortrag-schnitt)); }
}

@keyframes oswPaVZoom {
	from { transform: scale(1.09); }
	to { transform: scale(1); }
}

@keyframes oswPaVLinie {
	from { transform: scaleY(0); }
	to { transform: scaleY(1); }
}

@keyframes oswPaVLinieQuer {
	from { transform: scaleX(0); }
	to { transform: scaleX(1); }
}

@keyframes oswPaVPop {
	from { opacity: 0; transform: scale(.4); }
	to { opacity: 1; transform: none; }
}

@keyframes oswPaVBlatt {
	from { opacity: 0; transform: translateY(40px) rotate(-4deg); }
	to { opacity: 1; transform: rotate(1.2deg); }
}

@keyframes oswPaVSchreiben {
	from { stroke-dashoffset: 1; }
	to { stroke-dashoffset: 0; }
}

@keyframes oswPaVStempel {
	from { opacity: 0; transform: rotate(-12deg) scale(2.4); }
	to { opacity: .9; transform: rotate(-12deg) scale(1); }
}

@keyframes oswPaVBalken {
	from { transform: scaleX(0); }
	to { transform: scaleX(1); }
}

@keyframes oswPaVBlinken {
	50% { opacity: 0; }
}

/* --------------------------------------------------------- Kleine Geräte */

@media (max-width: 700px) {
	.osw-pa-vortrag { --vortrag-hoehe: calc(100svh - 24px); }
	.osw-pa-vortrag__kapiteltitel { display: none; }
	.osw-pa-vortrag__kapitelknopf { padding-right: 6px; }
	.osw-pa-vortrag__kapitelknopf[aria-current="step"] .osw-pa-vortrag__kapiteltitel { display: inline; }
	.osw-pa-vortrag__werkzeug[data-vortrag-uebersicht] { display: none; }
	.osw-pa-vortrag__fuss .osw-pa-btn,
	.osw-pa-vortrag__fuss .osw-pa-btn-leer { min-width: 0; padding-left: 14px; padding-right: 14px; }
	.osw-pa-vortrag__standtitel { display: none; }
	.osw-pa-vortrag__wege li { grid-template-columns: 1fr; gap: 2px; }
	.osw-pa-vortrag__treppe { grid-template-columns: 1fr; }
	.osw-pa-vortrag__treppe li { min-height: 0; border-radius: 4px; }
	.osw-pa-vortrag__blatt { transform: none; }
	.osw-pa-vortrag__blatt dl div { grid-template-columns: 1fr; gap: 0; }
	.osw-pa-vortrag__zahlen { grid-template-columns: 1fr 1fr; }
	.osw-pa-vortrag__pitchsaetze li { grid-template-columns: 1fr; gap: 0; }
	.osw-pa-vortrag__buchstabe span { display: none; }
}

/* ---------------------------------------------------- Weniger Bewegung */

@media (prefers-reduced-motion: reduce) {
	.osw-pa-vortrag *,
	.osw-pa-vortrag *::before,
	.osw-pa-vortrag *::after {
		animation-duration: .01ms !important;
		animation-delay: 0s !important;
		transition-duration: .01ms !important;
	}

	.osw-pa-vortrag.ist-bereit .osw-pa-vortrag__folie.ist-weg { display: none; }
}

/* ---------------------------------------------------------------- Druck */

@media print {
	.osw-pa-vortrag,
	.osw-pa-vortrag.ist-bereit { display: block; height: auto; border: 0; overflow: visible; }
	.osw-pa-vortrag__kopf,
	.osw-pa-vortrag__fuss,
	.osw-pa-vortrag__uebersicht,
	.osw-pa-vortrag__knoepfe,
	.osw-pa-vortrag__uhr,
	[data-vortrag-uhr] { display: none !important; }
	.osw-pa-vortrag.ist-bereit .osw-pa-vortrag__folie {
		position: static;
		visibility: visible;
		opacity: 1;
		overflow: visible;
		break-after: page;
		animation: none;
	}
	.osw-pa-vortrag.ist-bereit [data-auftritt] { opacity: 1; animation: none; }
	.osw-pa-vortrag__bild::after { display: none; }
	.osw-pa-vortrag__folie [hidden] { display: block !important; }
}

/* Unterpunkte in einer nummerierten Liste (Folie «Drei Teile») */
.osw-pa-vortrag__unterpunkt {
	display: block;
	margin-top: 6px;
	padding-left: 12px;
	border-left: 3px solid var(--vortrag-rot);
	font-size: .92em;
}