/*
 * Lernbereich auf der Website. Mobil zuerst, nur Tokens var(--pe-…) aus dem Zusatz-CSS der Seite.
 * Tippflächen mindestens var(--pe-tap) (48 px).
 */
.pe-lb {
	color: var(--pe-text);
	line-height: var(--pe-lh-body);
}
.pe-lb *,
.pe-lb *::before,
.pe-lb *::after {
	box-sizing: border-box;
}
.pe-lb .pe-icon {
	flex: none;
	width: 1.25em;
	height: 1.25em;
	vertical-align: -0.2em;
}
.pe-lb-titel {
	margin: 0 0 var(--pe-space-3);
	font-size: var(--pe-fs-h2);
	line-height: var(--pe-lh-snug);
	color: var(--pe-ueberschrift);
}
.pe-lb .pe-dachzeile {
	margin: 0 0 var(--pe-space-1);
}
.pe-lb-leise {
	color: var(--pe-text-leise);
	font-size: var(--pe-fs-sm);
}
.pe-lb-karte {
	margin: 0 0 var(--pe-space-4);
	padding: var(--pe-space-4);
	background: var(--pe-flaeche);
	border: var(--pe-border-w) solid var(--pe-rand);
	border-radius: var(--pe-r-md);
}
.pe-lb-hinweis {
	max-width: var(--pe-narrow);
}
.pe-lb-satz {
	margin: 0 0 var(--pe-space-3);
	font-size: var(--pe-fs-lead);
}
.pe-lb-vorschau {
	margin: 0 0 var(--pe-space-4);
	padding: var(--pe-space-3) var(--pe-space-4);
	background: var(--pe-status-warten-flaeche);
	border-left: var(--pe-space-1) solid var(--pe-status-warten);
	border-radius: var(--pe-r-sm);
}

/* Knöpfe */
.pe-lb .pe-lb-knopf {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--pe-space-2);
	min-height: var(--pe-tap);
	padding: var(--pe-space-2) var(--pe-space-5);
	background: var(--pe-navy);
	color: var(--pe-weiss);
	border: var(--pe-border-w-strong) solid var(--pe-navy);
	border-radius: var(--pe-r-sm);
	font: inherit;
	font-weight: var(--pe-fw-bold);
	text-decoration: none;
	cursor: pointer;
}
.pe-lb .pe-lb-knopf:hover,
.pe-lb .pe-lb-knopf:focus-visible {
	background: var(--pe-navy-2);
	color: var(--pe-weiss);
}
.pe-lb .pe-lb-knopf--zweit {
	background: var(--pe-flaeche);
	color: var(--pe-navy);
}
.pe-lb .pe-lb-knopf--zweit:hover,
.pe-lb .pe-lb-knopf--zweit:focus-visible {
	background: var(--pe-flaeche-2);
	color: var(--pe-navy);
}
.pe-lb .pe-lb-knopf.is-erledigt {
	background: var(--pe-status-ok-flaeche);
	color: var(--pe-status-ok);
	border-color: var(--pe-status-ok);
}
.pe-lb .pe-lb-knopf--gross {
	width: 100%;
	min-height: calc(var(--pe-tap) * 1.25);
	font-size: var(--pe-fs-lead);
}
.pe-lb :focus-visible {
	outline: var(--pe-focus-w) solid var(--pe-fokus);
	outline-offset: var(--pe-focus-offset);
}

/* Übersicht */
.pe-lb-kopf {
	margin-bottom: var(--pe-space-4);
}
.pe-lb-kurs {
	display: flex;
	align-items: center;
	gap: var(--pe-space-2);
	margin: 0 0 var(--pe-space-3);
	font-weight: var(--pe-fw-semibold);
}
.pe-lb-beschreibung {
	max-width: var(--pe-measure);
}
.pe-lb-termin h3 {
	display: flex;
	align-items: center;
	gap: var(--pe-space-2);
	margin: 0 0 var(--pe-space-2);
	font-size: var(--pe-fs-h4);
	color: var(--pe-ueberschrift);
}
.pe-lb-termin p {
	margin: 0 0 var(--pe-space-2);
}
.pe-lb-fortschritt {
	margin: var(--pe-space-5) 0 var(--pe-space-3);
}
.pe-lb-fortschritt p {
	margin: 0 0 var(--pe-space-1);
	font-weight: var(--pe-fw-semibold);
}
.pe-lb-fortschritt progress {
	width: 100%;
	height: var(--pe-space-2);
	accent-color: var(--pe-status-ok);
}
.pe-lb-karten {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
	gap: var(--pe-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}
.pe-lb-modulkarte {
	margin: 0;
}
.pe-lb-modulkarte__link {
	display: flex;
	flex-direction: column;
	gap: var(--pe-space-1);
	height: 100%;
	min-height: var(--pe-tap);
	padding: var(--pe-space-4);
	background: var(--pe-flaeche);
	border: var(--pe-border-w) solid var(--pe-rand);
	border-radius: var(--pe-r-md);
	color: var(--pe-text);
	text-decoration: none;
}
.pe-lb-modulkarte__link:hover,
.pe-lb-modulkarte__link:focus-visible {
	border-color: var(--pe-rand-stark);
	background: var(--pe-flaeche-2);
}
.pe-lb-modulkarte__titel {
	font-size: var(--pe-fs-h4);
	font-weight: var(--pe-fw-bold);
	line-height: var(--pe-lh-snug);
	color: var(--pe-ueberschrift);
}
.pe-lb-modulkarte__ziel {
	font-size: var(--pe-fs-sm);
	color: var(--pe-text-leise);
}
.pe-lb-erledigt-marke {
	display: inline-flex;
	align-items: center;
	gap: var(--pe-space-1);
	margin-top: auto;
	padding-top: var(--pe-space-2);
	color: var(--pe-status-ok);
	font-weight: var(--pe-fw-semibold);
	font-size: var(--pe-fs-sm);
}

/* Modulseite */
.pe-lb-raster {
	display: block;
}
.pe-lb-seitenleiste {
	display: none;
}
.pe-lb-modul {
	min-width: 0;
}
.pe-lb-zurueck {
	margin: 0 0 var(--pe-space-3);
}
.pe-lb-zurueck a,
.pe-lb-blaettern a {
	display: inline-flex;
	align-items: center;
	gap: var(--pe-space-1);
	min-height: var(--pe-tap);
	color: var(--pe-link);
}
.pe-lb-titelbild {
	margin: 0 0 var(--pe-space-4);
}
.pe-lb-titelbild img,
.pe-lb-bild img {
	display: block;
	max-width: 100%;
	height: auto;
	border-radius: var(--pe-r-md);
}
.pe-lb-lernziel,
.pe-lb-kasten {
	margin: 0 0 var(--pe-space-4);
	padding: var(--pe-space-4);
	border-radius: var(--pe-r-md);
}
.pe-lb-lernziel {
	background: var(--pe-blau-hell);
	border-left: var(--pe-space-1) solid var(--pe-blau);
}
.pe-lb-lernziel p:last-child,
.pe-lb-kasten > :last-child {
	margin-bottom: 0;
}
.pe-lb-kasten__titel {
	margin: 0 0 var(--pe-space-2);
	font-size: var(--pe-fs-text);
	font-weight: var(--pe-fw-bold);
	color: var(--pe-ueberschrift);
}
.pe-lb-merke {
	background: var(--pe-gelb-hell);
	border-left: var(--pe-space-1) solid var(--pe-gelb);
}
.pe-lb-aufgabe {
	background: var(--pe-flaeche-2);
	border-left: var(--pe-space-1) solid var(--pe-akzent);
}
.pe-lb-matrix {
	margin: 0 0 var(--pe-space-4);
}
.pe-lb-gliederung {
	margin: 0 0 var(--pe-space-5);
	background: var(--pe-flaeche);
	border: var(--pe-border-w) solid var(--pe-rand);
	border-radius: var(--pe-r-md);
}
.pe-lb-gliederung summary {
	display: flex;
	align-items: center;
	gap: var(--pe-space-2);
	min-height: var(--pe-tap);
	padding: var(--pe-space-2) var(--pe-space-4);
	font-weight: var(--pe-fw-bold);
	cursor: pointer;
}
.pe-lb-gliederung ol {
	margin: 0;
	padding: 0 var(--pe-space-4) var(--pe-space-3) var(--pe-space-7);
}
.pe-lb-gliederung li a {
	display: inline-block;
	min-height: var(--pe-tap-min);
	padding: var(--pe-space-2) 0;
	color: var(--pe-link);
}
.pe-lb-inhalt {
	max-width: var(--pe-measure);
}
.pe-lb-ueberschrift {
	scroll-margin-top: calc(var(--pe-header-h) + var(--pe-space-3));
	color: var(--pe-ueberschrift);
	line-height: var(--pe-lh-snug);
}
.pe-lb-ueberschrift--1 {
	margin: var(--pe-space-7) 0 var(--pe-space-3);
	font-size: var(--pe-fs-h3);
}
.pe-lb-ueberschrift--2 {
	margin: var(--pe-space-5) 0 var(--pe-space-2);
	font-size: var(--pe-fs-h4);
}

/* Baustein zweisprachig: untereinander, Deutsch einblendbar */
.pe-lb-zs {
	margin: 0 0 var(--pe-space-4);
}
.pe-lb-zs__alle {
	margin: 0 0 var(--pe-space-2);
	text-align: right;
}
.pe-lb-zs__zeile {
	padding: var(--pe-space-3) 0;
	border-bottom: var(--pe-border-w) solid var(--pe-linie);
}
.pe-lb-zs__en > :last-child,
.pe-lb-zs__de > :last-child {
	margin-bottom: 0;
}
.pe-lb-zs__de {
	margin-top: var(--pe-space-2);
	padding-left: var(--pe-space-3);
	border-left: var(--pe-border-w-strong) solid var(--pe-rand);
	color: var(--pe-text-leise);
}
.pe-lb-zs__knopf,
.pe-lb-zs__alle-knopf {
	min-height: var(--pe-tap);
	padding: var(--pe-space-1) var(--pe-space-3);
	background: none;
	border: var(--pe-border-w) solid var(--pe-rand);
	border-radius: var(--pe-r-sm);
	color: var(--pe-link);
	font: inherit;
	font-size: var(--pe-fs-sm);
	cursor: pointer;
}
.pe-lb-zs__knopf {
	margin-top: var(--pe-space-2);
}
.pe-lb-zs__knopf:hover,
.pe-lb-zs__alle-knopf:hover {
	background: var(--pe-flaeche-2);
}
.pe-lb-zs [hidden] {
	display: none;
}

/* Tabellen: auf dem Handy waagerecht scrollbar */
.pe-lb-tabelle {
	margin: 0 0 var(--pe-space-4);
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}
.pe-lb-tabelle table {
	min-width: 100%;
	border-collapse: collapse;
	font-size: var(--pe-fs-sm);
}
.pe-lb-tabelle th,
.pe-lb-tabelle td {
	padding: var(--pe-space-2) var(--pe-space-3);
	border: var(--pe-border-w) solid var(--pe-rand);
	text-align: left;
	vertical-align: top;
}
.pe-lb-tabelle th {
	background: var(--pe-flaeche-2);
	font-weight: var(--pe-fw-bold);
}
.pe-lb-bild {
	margin: 0 0 var(--pe-space-4);
}
.pe-lb-bild__nachweis {
	margin-top: var(--pe-space-1);
	font-size: var(--pe-fs-sm);
	color: var(--pe-text-leise);
}

/* Erledigt und Blättern */
.pe-lb-erledigt {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--pe-space-2) var(--pe-space-3);
	margin: var(--pe-space-6) 0 var(--pe-space-4);
	padding-top: var(--pe-space-4);
	border-top: var(--pe-border-w) solid var(--pe-linie);
}
.pe-lb-blaettern {
	display: flex;
	justify-content: space-between;
	gap: var(--pe-space-3);
	margin: 0 0 var(--pe-space-5);
}
.pe-lb-blaettern__weiter {
	margin-left: auto;
}

/* Desktop: Seitenleiste mit den Modulen */
@media (min-width: 60em) {
	.pe-lb-raster {
		display: grid;
		grid-template-columns: minmax(12rem, 16rem) minmax(0, 1fr);
		gap: var(--pe-space-7);
		align-items: start;
	}
	.pe-lb-seitenleiste {
		display: block;
		position: sticky;
		top: calc(var(--pe-header-h) + var(--pe-space-3));
	}
	.pe-lb-seitenleiste__titel {
		margin: 0 0 var(--pe-space-2);
		font-weight: var(--pe-fw-bold);
	}
	.pe-lb-seitenleiste ol {
		margin: 0;
		padding: 0;
		list-style: none;
	}
	.pe-lb-seitenleiste a {
		display: flex;
		align-items: center;
		gap: var(--pe-space-2);
		min-height: var(--pe-tap-min);
		padding: var(--pe-space-1) var(--pe-space-2);
		border-radius: var(--pe-r-sm);
		color: var(--pe-text);
		text-decoration: none;
	}
	.pe-lb-seitenleiste a:hover {
		background: var(--pe-flaeche-2);
	}
	.pe-lb-seitenleiste .is-aktiv a {
		background: var(--pe-flaeche-2);
		font-weight: var(--pe-fw-bold);
	}
	.pe-lb-seitenleiste__nr {
		min-width: 1.5em;
		color: var(--pe-text-leise);
	}
	.pe-lb-seitenleiste__haken {
		margin-left: auto;
		color: var(--pe-status-ok);
	}
	.pe-lb-zurueck {
		display: none;
	}
	.pe-lb .pe-lb-knopf--gross {
		width: auto;
	}
}

/* Konto: Knopf „Zum Lernbereich“ */
.pe-konto-lernbereich .pe-icon {
	width: 1.25em;
	height: 1.25em;
}
.pe-konto-lernbereich a {
	gap: var(--pe-space-2);
}