/**
 * Postfach-Demo «Der Montagmorgen».
 *
 * Gebaut wie ein E-Mail-Programm: Titelleiste, Ordnerspalte, Nachrichtenliste,
 * Leseansicht. Farben kommen als Variablen aus dem Child-Theme; die
 * Rueckfallwerte hier sind dieselben, damit die Demo auch in einer nackten
 * Seite richtig aussieht.
 *
 * Maschinenschrift gibt es nur unter der Motorhaube und in Protokollen – dort
 * ist sie Bedeutung, ueberall sonst waere sie Dekoration.
 */

/* Die Werte gelten auch fuer das gemeinsame Fenster: Die Aktionsleiste am
   unteren Rand liegt ausserhalb von .aept, und ohne diese Zeile stuende dort
   ein weisser Knopf auf weissem Grund – var(--aept-akzent) waere nicht
   aufloesbar. Das data-Attribut setzt das Register beim Oeffnen. */
.aept,
.aefe[data-ae-fenster="postfach"] {
	--aept-akzent: var(--ae-akzent, #E71E62);
	--aept-akzent-tief: var(--ae-akzent-tief, #B3124A);
	--aept-dunkel: var(--ae-dunkel, #36474F);
	--aept-tiefe: var(--ae-tiefe, #263238);
	--aept-linie: var(--ae-linie, #CFD8DC);
	--aept-getoent: var(--ae-getoent, #ECEFF1);
	--aept-grund: var(--ae-grund, #FFFFFF);
	--aept-still: #6b7a82;
	--aept-leise: #8b979d;

	color: var(--aept-dunkel);
	font-size: 16px;
	line-height: 1.55;
	text-align: left;
}

.aept *, .aept *::before, .aept *::after { box-sizing: border-box; }

.aept-ic { width: 18px; height: 18px; flex: 0 0 auto; }

/* ==========================================================================
   Das Band ueber dem Fenster
   ========================================================================== */

.aept-band { margin-bottom: 14px; }

.aept-bandinhalt {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
	border-left: 3px solid var(--aept-akzent);
	padding: 2px 0 2px 16px;
}

.aept-bandtext { flex: 1 1 340px; }

.aept-zugnr {
	display: inline-block;
	font-size: 11px;
	letter-spacing: .12em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--aept-akzent-tief);
}

.aept-bandtext h4 { margin: 2px 0 4px; font-size: 21px; line-height: 1.2; }
.aept-bandtext p { margin: 0; color: var(--aept-still); font-size: 15px; }
.aept-bandaktion { flex: 0 0 auto; }

/* ==========================================================================
   Reifegrad-Schalter
   ========================================================================== */

.aept-reife {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	margin: 14px 0 0;
	padding-left: 19px;
}
.aept-reife-titel { font-size: 13px; font-weight: 600; }
.aept-reife-reihe { display: flex; gap: 4px; flex-wrap: wrap; }
.aept-stufe {
	border: 1px solid var(--aept-linie);
	background: var(--aept-grund);
	border-radius: 6px;
	padding: 5px 11px;
	font: inherit;
	font-size: 12.5px;
	cursor: pointer;
	color: var(--aept-dunkel);
	transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.aept-stufe:hover { border-color: var(--aept-dunkel); }
.aept-stufe--an { background: var(--aept-dunkel); color: #fff; border-color: var(--aept-dunkel); }
.aept-reife-kurz { font-size: 13px; color: var(--aept-still); flex: 1 1 200px; }

/* ==========================================================================
   Das Fenster
   ========================================================================== */

.aept-fenster {
	border: 1px solid var(--aept-linie);
	border-radius: 12px;
	overflow: hidden;
	background: var(--aept-grund);
	box-shadow: 0 18px 44px rgba(38, 50, 56, .10);
}

.aept-titelleiste {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 10px 16px;
	background: var(--aept-getoent);
	border-bottom: 1px solid var(--aept-linie);
	font-size: 13px;
}

.aept-punkte { display: flex; gap: 6px; flex: 0 0 auto; }
.aept-punkte i { width: 10px; height: 10px; border-radius: 50%; display: block; }
.aept-punkt-rot { background: #ED6A5E; }
.aept-punkt-gelb { background: #F4BF4F; }
.aept-punkt-gruen { background: #61C554; }

.aept-konto { font-weight: 600; }

.aept-suche {
	display: flex;
	align-items: center;
	gap: 7px;
	margin-left: auto;
	background: var(--aept-grund);
	border: 1px solid var(--aept-linie);
	border-radius: 6px;
	padding: 4px 12px;
	color: var(--aept-leise);
	font-size: 12.5px;
}
.aept-suche .aept-ic { width: 14px; height: 14px; }

.aept-uhrzeit { color: var(--aept-still); font-size: 12.5px; }

/* ==========================================================================
   Der Korpus: drei Spalten
   ========================================================================== */

.aept-korpus {
	display: grid;
	grid-template-columns: 208px minmax(260px, 340px) minmax(0, 1fr);
	min-height: 560px;
}

/* ---------------- Ordnerspalte ---------------- */

.aept-seitenleiste {
	border-right: 1px solid var(--aept-linie);
	padding: 14px 10px;
	background: #FAFBFC;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.aept-schreiben {
	display: flex;
	align-items: center;
	gap: 9px;
	width: 100%;
	border: 0;
	border-radius: 8px;
	background: var(--aept-akzent);
	color: #fff;
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	padding: 10px 14px;
	margin-bottom: 12px;
	cursor: pointer;
	transition: background .15s ease;
}
.aept-schreiben:hover { background: var(--aept-akzent-tief); }

.aept-ordner {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	border: 0;
	background: transparent;
	border-radius: 7px;
	padding: 8px 11px;
	font: inherit;
	font-size: 14px;
	color: var(--aept-dunkel);
	cursor: pointer;
	text-align: left;
	transition: background .15s ease;
}
.aept-ordner:hover { background: var(--aept-getoent); }
.aept-ordner .aept-ic { color: var(--aept-still); }

.aept-ordner--an { background: var(--aept-getoent); font-weight: 600; }
.aept-ordner--an .aept-ic { color: var(--aept-akzent); }

.aept-ordner--achtung .aept-ordner-name { color: var(--aept-akzent-tief); }
.aept-ordner--achtung .aept-ic { color: var(--aept-akzent); }

.aept-ordner--puls { animation: aept-puls .45s ease; }
@keyframes aept-puls {
	0% { background: var(--aept-akzent); }
	100% { background: transparent; }
}

.aept-ordner-name { flex: 1 1 auto; }

.aept-ordner-zahl {
	flex: 0 0 auto;
	min-width: 21px;
	text-align: center;
	background: var(--aept-akzent);
	color: #fff;
	border-radius: 100px;
	font-size: 11.5px;
	font-weight: 700;
	padding: 1px 6px;
}
.aept-ordner-zahl--still { background: transparent; color: var(--aept-leise); font-weight: 500; }

.aept-zettel {
	margin-top: auto;
	padding: 14px 11px 4px;
	border-top: 1px solid var(--aept-linie);
	display: flex;
	flex-direction: column;
}
.aept-zettel-zahl { font-size: 26px; font-weight: 700; color: var(--aept-akzent); line-height: 1; font-variant-numeric: tabular-nums; }
.aept-zettel-text { font-size: 12px; color: var(--aept-still); }
.aept-zettel-kosten { font-size: 11.5px; color: var(--aept-leise); margin-top: 6px; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }

/* ---------------- Nachrichtenliste ---------------- */

.aept-listenspalte {
	border-right: 1px solid var(--aept-linie);
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.aept-listenkopf {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	padding: 13px 16px;
	border-bottom: 1px solid var(--aept-linie);
}
.aept-listenkopf h5 { margin: 0; font-size: 15px; }
.aept-listenzahl { font-size: 12px; color: var(--aept-leise); }

.aept-liste { overflow-y: auto; max-height: 620px; }

.aept-zeile {
	display: flex;
	align-items: flex-start;
	gap: 11px;
	width: 100%;
	border: 0;
	border-bottom: 1px solid var(--aept-linie);
	border-left: 3px solid transparent;
	background: transparent;
	padding: 12px 14px;
	font: inherit;
	text-align: left;
	cursor: pointer;
	transition: background .15s ease;
}
.aept-zeile:hover { background: #FAFBFC; }
.aept-zeile--offen { background: var(--aept-getoent); border-left-color: var(--aept-akzent); }
.aept-zeile--ungelesen .aept-von,
.aept-zeile--ungelesen .aept-betreff { font-weight: 700; }
.aept-zeile--ungelesen .aept-avatar::after {
	content: "";
	position: absolute;
	top: -1px; right: -1px;
	width: 9px; height: 9px;
	border-radius: 50%;
	background: var(--aept-akzent);
	border: 2px solid var(--aept-grund);
}
.aept-zeile--frisch { animation: aept-frisch .55s ease; }
@keyframes aept-frisch {
	0% { background: rgba(231, 30, 98, .18); }
	100% { background: transparent; }
}

.aept-avatar {
	position: relative;
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 12.5px;
	font-weight: 700;
	color: #fff;
	letter-spacing: .02em;
}
.aept-avatar--gross { width: 42px; height: 42px; font-size: 15px; }

.aept-av--0 { background: #546E7A; }
.aept-av--1 { background: #00838F; }
.aept-av--2 { background: #6D4C41; }
.aept-av--3 { background: #4527A0; }
.aept-av--4 { background: #2E7D32; }
.aept-av--5 { background: #AD1457; }

.aept-zeilentext { flex: 1 1 auto; min-width: 0; display: block; }
.aept-zeilenkopf { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.aept-von { display: block; font-size: 13.5px; }
.aept-zeit { color: var(--aept-leise); font-size: 11.5px; flex: 0 0 auto; }

.aept-betreff,
.aept-anriss {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.aept-betreff { font-size: 13.5px; }
.aept-anriss { font-size: 12.5px; color: var(--aept-leise); }

.aept-etiketten { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }

.aept-klammer { flex: 0 0 auto; color: var(--aept-leise); }
.aept-klammer .aept-ic { width: 15px; height: 15px; }

/* ---------------- Etiketten ---------------- */

.aept-kat {
	display: inline-block;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .02em;
	padding: 2px 8px;
	border-radius: 100px;
	background: var(--aept-getoent);
	color: var(--aept-dunkel);
	white-space: nowrap;
}
.aept-kat--notfall, .aept-kat--rechtlich { background: #FDE3EC; color: #A5104A; }
.aept-kat--offerte { background: #E1EFFA; color: #17557F; }
.aept-kat--werbung, .aept-kat--unklar { background: #ECEFF1; color: #6b7a82; }
.aept-kat--lob { background: #E2F4E8; color: #1B6236; }
.aept-kat--behoerde, .aept-kat--mahnung { background: #FFF1DE; color: #8A5200; }

.aept-statustext { font-size: 11.5px; color: var(--aept-still); white-space: nowrap; }
.aept-statustext--eskaliert,
.aept-statustext--vorgelegt { color: var(--aept-akzent-tief); font-weight: 600; }

.aept-dringend {
	font-size: 10.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: #fff;
	background: var(--aept-akzent);
	border-radius: 3px;
	padding: 1px 6px;
}

/* ---------------- Leseansicht ---------------- */

.aept-lesespalte {
	padding: 22px 26px 26px;
	overflow-y: auto;
	max-height: 680px;
	min-width: 0;
}

.aept-nichts {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 100%;
	min-height: 260px;
	color: var(--aept-leise);
	gap: 10px;
	text-align: center;
}
.aept-nichts .aept-ic { width: 34px; height: 34px; opacity: .5; }
.aept-nichts p { margin: 0; font-size: 14px; }

.aept-zurueck {
	display: none;
	align-items: center;
	gap: 6px;
	border: 0;
	background: transparent;
	color: var(--aept-still);
	font: inherit;
	font-size: 13px;
	padding: 0 0 12px;
	cursor: pointer;
}

.aept-lesekopf { border-bottom: 1px solid var(--aept-linie); padding-bottom: 16px; margin-bottom: 18px; }
.aept-lesekopf h4 { margin: 0 0 14px; font-size: 20px; line-height: 1.25; }
.aept-lesevon { display: flex; align-items: center; gap: 12px; }
.aept-lesevon .aept-von { font-size: 14px; font-weight: 600; }
.aept-adresse { display: block; font-size: 12.5px; color: var(--aept-leise); }
.aept-lesevon .aept-zeit { margin-left: auto; font-size: 12.5px; }

.aept-lesetext {
	white-space: pre-wrap;
	font-size: 15px;
	line-height: 1.65;
	margin-bottom: 18px;
}

.aept-mark {
	background: rgba(231, 30, 98, .16);
	color: inherit;
	border-radius: 3px;
	padding: 0 2px;
	font-weight: 600;
}

.aept-anhangkarte {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	border: 1px solid var(--aept-linie);
	border-radius: 8px;
	padding: 9px 14px;
	margin-bottom: 20px;
}
.aept-anhangkarte .aept-ic { color: var(--aept-still); }
.aept-anhangname { display: block; font-size: 13.5px; font-weight: 600; }
.aept-anhangtyp { display: block; font-size: 11px; color: var(--aept-leise); }

/* ---------------- Zug 1: von Hand ---------------- */

/* Die Leiste, in der Sie einordnen. Sie klebt am unteren Rand der
   Leseansicht: Bei einer langen Mail stand sie sonst unter dem sichtbaren
   Bereich – man las, fand nichts zu tun und war raus. Was zu tun ist, muss
   sichtbar sein, ohne dass man danach sucht. */
.aept-handleiste {
	position: sticky;
	bottom: -22px;
	z-index: 2;
	margin-top: 18px;
	border: 1px solid var(--aept-akzent);
	border-radius: 10px;
	padding: 16px 18px;
	background: #FDF2F6;
	box-shadow: 0 -10px 24px rgba(255, 255, 255, .9);
}
.aept-frage { margin: 0 0 12px; font-weight: 600; font-size: 15px; }
.aept-wahl { display: flex; flex-wrap: wrap; gap: 7px; }

.aept-chip {
	border: 1px solid var(--aept-linie);
	background: var(--aept-grund);
	border-radius: 100px;
	padding: 7px 14px;
	font: inherit;
	font-size: 13.5px;
	cursor: pointer;
	color: var(--aept-dunkel);
	transition: border-color .15s ease, color .15s ease;
}
.aept-chip:hover { border-color: var(--aept-akzent); color: var(--aept-akzent-tief); }


/* ==========================================================================
   Die Glasbox unter der Nachricht
   ========================================================================== */

.aept-automat {
	border: 1px solid var(--aept-linie);
	border-radius: 10px;
	overflow: hidden;
}

.aept-automatkopf {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 16px;
	background: var(--aept-getoent);
	border-bottom: 1px solid var(--aept-linie);
}
.aept-automatmarke { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; }
.aept-automatmarke .aept-ic { color: var(--aept-akzent); width: 16px; height: 16px; }
.aept-dauer { font-size: 11.5px; color: var(--aept-still); font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }

.aept-automatzeile { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 14px 16px 0; }
.aept-aktiontext { margin: 8px 16px 14px; font-size: 14px; color: var(--aept-still); }

.aept-grund {
	margin: 0 16px 14px;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--aept-akzent-tief);
}

.aept-zweitanliegen {
	margin: 0 16px 14px;
	font-size: 13px;
	line-height: 1.55;
	background: var(--aept-getoent);
	border-left: 3px solid var(--aept-dunkel);
	padding: 10px 12px;
	border-radius: 0 6px 6px 0;
}

/* ---------------- Klappen ---------------- */

.aept-klappe { border-top: 1px solid var(--aept-linie); }
.aept-klappe > summary {
	cursor: pointer;
	padding: 11px 16px;
	font-size: 13.5px;
	font-weight: 600;
	list-style: none;
	display: flex;
	align-items: center;
	gap: 8px;
	transition: background .15s ease;
}
.aept-klappe > summary::-webkit-details-marker { display: none; }
.aept-klappe > summary::before {
	content: "";
	width: 0; height: 0;
	border-left: 5px solid var(--aept-akzent);
	border-top: 4px solid transparent;
	border-bottom: 4px solid transparent;
	transition: transform .18s ease;
}
.aept-klappe[open] > summary::before { transform: rotate(90deg); }
.aept-klappe > summary:hover { background: #FAFBFC; }
.aept-klappeninhalt { padding: 0 16px 16px; }

.aept-klappe--dunkel > summary { background: var(--aept-tiefe); color: #fff; }
.aept-klappe--dunkel > summary::before { border-left-color: #FF6E9C; }
.aept-klappe--dunkel > summary:hover { background: #1E282D; }
.aept-klappe--dunkel .aept-klappeninhalt { background: var(--aept-tiefe); color: #CFD8DC; padding-top: 4px; }

/* ---------------- Die Rechnung ---------------- */

.aept-rechnung { padding-top: 6px; }

.aept-punkt { margin-bottom: 14px; }
.aept-punkt-kopf { display: flex; justify-content: space-between; font-size: 13.5px; margin-bottom: 4px; }
.aept-punkt-name { font-weight: 600; }
.aept-punkt-wert { font-variant-numeric: tabular-nums; color: var(--aept-still); }
.aept-punkt--erster .aept-punkt-name { color: var(--aept-akzent-tief); }

.aept-balken { height: 5px; background: var(--aept-getoent); border-radius: 3px; overflow: hidden; }
.aept-balken-innen { height: 100%; background: var(--aept-linie); transition: width .4s ease; }
.aept-punkt--erster .aept-balken-innen { background: var(--aept-akzent); }

.aept-treffer { list-style: none; margin: 7px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 5px; }
.aept-treffer li {
	font-size: 11.5px;
	background: var(--aept-getoent);
	border-radius: 4px;
	padding: 2px 7px;
	display: inline-flex;
	gap: 5px;
	align-items: baseline;
}
.aept-treffer-wort { font-weight: 600; }
.aept-treffer-wert { color: var(--aept-akzent-tief); font-variant-numeric: tabular-nums; }
.aept-treffer-wo { color: var(--aept-leise); }

.aept-schwelle-info {
	margin: 12px 0 0;
	font-size: 13px;
	color: var(--aept-still);
	border-top: 1px solid var(--aept-linie);
	padding-top: 10px;
}

.aept-angabenliste {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 4px 16px;
	margin: 4px 0 0;
	font-size: 13.5px;
}
.aept-angabenliste dt { color: var(--aept-leise); }
.aept-angabenliste dd { margin: 0; font-weight: 600; }

/* ---------------- Antwort ---------------- */

.aept-antwort { border: 1px solid var(--aept-linie); border-radius: 8px; overflow: hidden; }
.aept-antwortkopf {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 13px;
	background: var(--aept-getoent);
	font-size: 12.5px;
	color: var(--aept-still);
}
.aept-antwortkopf .aept-ic { width: 15px; height: 15px; }
.aept-antwort-betreff { margin: 12px 14px 8px; font-weight: 700; font-size: 14px; }
.aept-mailtext {
	white-space: pre-wrap;
	font-family: inherit;
	font-size: 13.5px;
	line-height: 1.6;
	margin: 0;
	padding: 0 14px 14px;
}

.aept-grenze { padding: 4px 16px 16px; }
.aept-grenze p { margin: 0 0 10px; font-size: 13.5px; color: var(--aept-still); }

/* ---------------- Motorhaube ---------------- */

.aept-kette { display: grid; gap: 8px; padding-top: 8px; }

.aept-knoten {
	position: relative;
	border: 1px solid rgba(255, 255, 255, .13);
	border-radius: 8px;
	padding: 11px 13px;
}
.aept-knoten + .aept-knoten::before {
	content: "";
	position: absolute;
	top: -8px;
	left: 24px;
	width: 2px;
	height: 8px;
	background: var(--aept-akzent);
	opacity: .6;
}
.aept-knoten-nr { font-size: 10.5px; color: #FF6E9C; font-weight: 700; }
.aept-knoten h6 { margin: 2px 0 2px; color: #fff; font-size: 13.5px; }
.aept-knoten p { margin: 0 0 8px; font-size: 12px; color: #90A4AE; }

.aept-json {
	font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
	font-size: 11px;
	line-height: 1.5;
	margin: 0;
	padding: 9px 11px;
	background: rgba(0, 0, 0, .3);
	border-radius: 6px;
	overflow-x: auto;
	color: #B0BEC5;
	white-space: pre;
}
.aept-klappe--dunkel .aept-hinweis { color: #90A4AE; margin: 10px 0 0; }

/* ==========================================================================
   Verfassen
   ========================================================================== */

.aept-verfassenkopf {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	border-bottom: 1px solid var(--aept-linie);
	padding-bottom: 12px;
	margin-bottom: 16px;
}
.aept-verfassenkopf h5 { margin: 0; font-size: 16px; }

.aept-schliessen {
	border: 0;
	background: transparent;
	font-size: 24px;
	line-height: 1;
	color: var(--aept-leise);
	cursor: pointer;
	padding: 0 4px;
}
.aept-schliessen:hover { color: var(--aept-dunkel); }

.aept-form { display: grid; gap: 12px; }
.aept-feld { display: block; }
.aept-feld-name { display: block; font-size: 12.5px; font-weight: 600; margin-bottom: 4px; color: var(--aept-still); }
.aept-feld input, .aept-feld textarea {
	width: 100%;
	border: 1px solid var(--aept-linie);
	border-radius: 8px;
	padding: 10px 12px;
	font: inherit;
	font-size: 14.5px;
	color: var(--aept-dunkel);
	background: var(--aept-grund);
}
.aept-feld input:focus, .aept-feld textarea:focus {
	outline: 2px solid var(--aept-akzent);
	outline-offset: 1px;
	border-color: transparent;
}
.aept-feld textarea { resize: vertical; line-height: 1.6; }
.aept-verfassenleiste { display: flex; gap: 10px; align-items: center; }

.aept-vorlagen { margin: 18px 0; }
.aept-vorlagen-titel { display: block; font-size: 12.5px; color: var(--aept-still); margin-bottom: 8px; }
.aept-vorlagen-reihe { display: flex; flex-wrap: wrap; gap: 7px; }

.aept-eigenesergebnis:not(:empty) { margin-top: 20px; }
.aept-eingegangen { font-size: 14px; font-weight: 600; margin: 0 0 12px; }

/* ==========================================================================
   Werkstatt
   ========================================================================== */

.aept-werkstatt { margin-top: 26px; border-top: 1px solid var(--aept-linie); padding-top: 20px; }
.aept-werkstatt h5 { margin: 0 0 6px; font-size: 17px; }

.aept-regler { display: grid; gap: 6px; margin: 14px 0; }
.aept-regler-feld {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	gap: 4px 12px;
	font-size: 13.5px;
	margin: 12px 0;
}
.aept-regler-feld input[type="range"] { grid-column: 1 / -1; width: 100%; accent-color: var(--aept-akzent); }
.aept-regler-wert { font-weight: 700; color: var(--aept-akzent-tief); font-variant-numeric: tabular-nums; }

.aept-regelraster {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: 8px;
	margin: 16px 0;
}
.aept-regelkarte {
	border: 1px solid var(--aept-linie);
	border-radius: 8px;
	padding: 11px 12px;
}
.aept-regelkarte--aus { opacity: .45; }
.aept-regelkarte p { margin: 6px 0 0; font-size: 12.5px; color: var(--aept-still); }
.aept-regel-kopf { display: flex; align-items: center; justify-content: space-between; gap: 8px; }

.aept-schalter {
	border: 1px solid var(--aept-linie);
	background: transparent;
	border-radius: 100px;
	font: inherit;
	font-size: 10.5px;
	padding: 2px 9px;
	cursor: pointer;
	color: var(--aept-still);
}
.aept-schalter:hover { border-color: var(--aept-dunkel); }

.aept-kippe {
	background: rgba(231, 30, 98, .1);
	border-left: 3px solid var(--aept-akzent);
	padding: 10px 12px;
	border-radius: 0 6px 6px 0;
	font-size: 13.5px;
	margin: 0 0 14px;
}

/* ==========================================================================
   Bilanz
   ========================================================================== */

.aept-bilanz {
	margin-top: 18px;
	border: 1px solid var(--aept-linie);
	border-radius: 12px;
	padding: 26px 28px;
}
.aept-bilanz h4 { margin: 0 0 18px; font-size: 22px; }
.aept-bilanz h5 { margin: 22px 0 4px; font-size: 15px; }

.aept-zahlen { display: flex; flex-wrap: wrap; gap: 34px; margin-bottom: 8px; }
.aept-zahlbox { display: flex; flex-direction: column; }
.aept-zahl { font-size: 40px; font-weight: 700; color: var(--aept-akzent); line-height: 1; font-variant-numeric: tabular-nums; }
.aept-zahl-text { font-size: 13px; color: var(--aept-still); margin-top: 4px; }

.aept-ergebnis { font-size: 19px; font-weight: 700; margin: 12px 0 4px; }

.aept-cta { border-top: 1px solid var(--aept-linie); margin-top: 24px; padding-top: 18px; }
.aept-cta h5 { margin: 0 0 6px; font-size: 17px; }
.aept-cta p { margin: 0 0 4px; color: var(--aept-still); }

/* ==========================================================================
   Knoepfe und Kleinteile
   ========================================================================== */

.aept-btn {
	display: inline-block;
	border: 0;
	border-radius: 8px;
	cursor: pointer;
	font: inherit;
	font-weight: 600;
	font-size: 15px;
	padding: 11px 20px;
	text-decoration: none;
	transition: transform .12s ease, background .15s ease, opacity .12s ease;
}
.aept-btn:hover { transform: translateY(-1px); }
.aept-btn:disabled { opacity: .5; cursor: default; transform: none; }
.aept-btn--primary { background: var(--aept-akzent); color: #fff; }
.aept-btn--primary:hover { background: var(--aept-akzent-tief); }
.aept-btn--geist { background: transparent; color: var(--aept-dunkel); border: 1px solid var(--aept-linie); margin-left: 8px; }

.aept-hinweis { font-size: 12.5px; color: var(--aept-still); margin: 8px 0; }
.aept-leer { font-size: 13px; color: var(--aept-leise); font-style: italic; margin: 18px 16px; }

.aept-fuss {
	margin: 12px 0 0;
	font-size: 13px;
	color: var(--aept-still);
	border-left: 3px solid var(--aept-akzent);
	padding-left: 12px;
}

/* ==========================================================================
   Schmalere Fenster
   ========================================================================== */

@media (max-width: 1080px) {
	.aept-korpus { grid-template-columns: 170px minmax(230px, 300px) minmax(0, 1fr); }
	.aept-seitenleiste { padding: 12px 8px; }
	.aept-ordner { padding: 7px 9px; font-size: 13.5px; }
}

/* Ordner als waagrechte Leiste; Liste und Lesen wechseln sich ab – wie im
   Mailprogramm auf dem Telefon. */
@media (max-width: 860px) {
	.aept-korpus { grid-template-columns: minmax(0, 1fr); min-height: 0; }

	.aept-seitenleiste {
		flex-direction: row;
		align-items: center;
		gap: 4px;
		overflow-x: auto;
		border-right: 0;
		border-bottom: 1px solid var(--aept-linie);
		padding: 10px 12px;
	}
	/* width:100% aus der Spaltenansicht wuerde die ganze Leiste fuellen und
	   die Ordner hinausschieben. */
	.aept-schreiben { width: auto; margin-bottom: 0; flex: 0 0 auto; padding: 8px 12px; }
	.aept-schreiben span { display: none; }
	.aept-ordner { width: auto; flex: 0 0 auto; white-space: nowrap; }
	.aept-ordner-name { font-size: 13px; }
	.aept-zettel {
		margin-top: 0;
		margin-left: auto;
		border-top: 0;
		border-left: 1px solid var(--aept-linie);
		padding: 0 0 0 14px;
		flex: 0 0 auto;
	}
	.aept-zettel-kosten { display: none; }

	.aept-listenspalte { border-right: 0; border-bottom: 1px solid var(--aept-linie); }
	.aept-liste { max-height: 380px; }
	.aept-lesespalte { max-height: none; padding: 18px 16px 22px; }

	.aept-fenster--lesen .aept-listenspalte { display: none; }
	.aept-fenster--lesen .aept-zurueck { display: inline-flex; }

	/* Solange nichts gewaehlt ist, gehoert der Platz der Liste. Eine leere
	   Lesespalte mit «Waehlen Sie eine Nachricht» waere hier nur Leerraum. */
	.aept-fenster:not(.aept-fenster--lesen) .aept-lesespalte { display: none; }
	.aept-fenster:not(.aept-fenster--lesen) .aept-listenspalte { border-bottom: 0; }
}

@media (max-width: 560px) {
	.aept-bandinhalt { padding-left: 12px; }
	.aept-bandtext h4 { font-size: 19px; }
	.aept-titelleiste { gap: 8px; padding: 9px 12px; }
	.aept-konto { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 150px; }
	.aept-suche { display: none; }
	.aept-lesespalte { padding: 16px 14px 20px; }
	.aept-zahlen { gap: 22px; }
	.aept-zahl { font-size: 32px; }
	.aept-bilanz { padding: 20px 18px; }
	.aept-regelraster { grid-template-columns: 1fr 1fr; }
}

@media (prefers-reduced-motion: reduce) {
	.aept-zeile--frisch, .aept-ordner--puls { animation: none; }
	.aept-btn:hover { transform: none; }
}

/* ==========================================================================
   Zug 2: die abgeleiteten Regeln
   ========================================================================== */

.aept-regelbogen h5 { margin: 0 0 4px; font-size: 17px; }

.aept-regelbrief {
	border: 1px solid var(--aept-linie);
	border-radius: 10px;
	padding: 15px 17px;
	margin-top: 12px;
	transition: border-color .2s ease, background .2s ease;
}
.aept-regelbrief--ok { border-color: rgba(231, 30, 98, .34); background: rgba(231, 30, 98, .035); }

.aept-regelbrief .aept-regel-kopf { margin-bottom: 9px; justify-content: flex-start; gap: 10px; }
.aept-regelnr {
	font-size: 10.5px;
	letter-spacing: .1em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--aept-leise);
}

.aept-regel-satz { margin: 0 0 7px; font-size: 15px; line-height: 1.5; }
.aept-wenn, .aept-dann { font-weight: 700; color: var(--aept-akzent-tief); }

.aept-regel-aktion { margin: 0; font-size: 13px; color: var(--aept-still); }
.aept-regel-quelle { margin: 8px 0 0; font-size: 12px; color: var(--aept-leise); }
.aept-regel-ok { margin: 10px 0 0; font-size: 13px; font-weight: 600; color: #1B6236; }

.aept-regel-frage {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	margin-top: 12px;
	font-size: 13.5px;
}

.aept-btn--klein { padding: 6px 14px; font-size: 13.5px; background: var(--aept-dunkel); color: #fff; }
.aept-btn--klein:hover { background: var(--aept-tiefe); }

/* Der leere Posteingang – der Moment, auf den die Demo hinauslaeuft. */
.aept-postfachleer {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 52px 20px;
	text-align: center;
	color: var(--aept-still);
}
.aept-postfachleer .aept-ic { width: 40px; height: 40px; color: var(--aept-akzent); }
.aept-postfachleer strong { font-size: 17px; color: var(--aept-dunkel); }
.aept-postfachleer span { font-size: 13px; }

/* Die verarbeitete Zeile verlaesst die Liste sichtbar nach rechts. */
.aept-zeile--weg {
	opacity: 0;
	transform: translateX(26px);
	transition: opacity .2s ease, transform .2s ease;
}

@media (prefers-reduced-motion: reduce) {
	.aept-zeile--weg { transition: none; }
}

/* Das Suchfeld sucht wirklich – deshalb ist es ein Eingabefeld und keine
   Attrappe. */
.aept-suchfeld {
	border: 0;
	background: transparent;
	font: inherit;
	font-size: 12.5px;
	color: var(--aept-dunkel);
	width: 130px;
	padding: 0;
	outline: none;
}
.aept-suchfeld::placeholder { color: var(--aept-leise); }
.aept-suche:focus-within {
	border-color: var(--aept-akzent);
	box-shadow: 0 0 0 2px rgba(231, 30, 98, .14);
}

/* Zugnummer und der Weg zurueck an den Anfang. */
.aept-bandzeile { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }

/* Der Neustart. War eine unterstrichene Kleinschrift und damit unsichtbar –
   dabei braucht ihn dauernd, wer die Demo jemandem zeigt. */
.aept-neustart {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	border: 1px solid var(--aept-linie);
	border-radius: 100px;
	background: var(--aept-grund);
	font: inherit;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--aept-still);
	cursor: pointer;
	padding: 5px 13px 5px 10px;
	white-space: nowrap;
	transition: border-color .15s ease, color .15s ease;
}

.aept-neustart:hover { border-color: var(--aept-akzent); color: var(--aept-akzent-tief); }
.aept-neustart-zeichen { font-size: 14px; line-height: 1; }


.aept-btn--gross { padding: 12px 22px; font-size: 15.5px; }

/* ==========================================================================
   Die Uhr

   Zwei Spuren nebeneinander: Ihre Zeit und die des Automaten. Beide sind
   gemessen – die eine an Ihren Klicks, die andere am Durchlauf, den Sie
   gerade gesehen haben. Deshalb steht hier auch keine Hochrechnung; die
   gehoert in die Bilanz, wo der Besucher die Annahmen selbst stellt.
   ========================================================================== */

.aept-stoppuhr {
	display: flex;
	align-items: stretch;
	gap: 0;
	flex-wrap: wrap;
	border: 1px solid var(--aept-linie);
	border-radius: 10px;
	overflow: hidden;
	margin-bottom: 14px;
	background: var(--aept-grund, #fff);
}

.aept-stoppuhr[hidden] { display: none; }

.aept-stoppuhr-spur {
	flex: 1 1 180px;
	min-width: 0;
	display: flex;
	align-items: baseline;
	gap: 10px;
	padding: 10px 16px;
	border-right: 1px solid var(--aept-linie);
}

.aept-stoppuhr-name {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--aept-leise);
	flex: 0 0 auto;
}

.aept-stoppuhr-zeit {
	font-size: 20px;
	font-variant-numeric: tabular-nums;
	line-height: 1.1;
	margin-left: auto;
}

.aept-stoppuhr-menge {
	font-size: 12.5px;
	color: var(--aept-leise);
	flex: 0 0 auto;
	white-space: nowrap;
}

/* Die laufende Spur ist die, auf die man schauen soll. */
.aept-stoppuhr-spur--laeuft .aept-stoppuhr-zeit { color: var(--aept-akzent); }
.aept-stoppuhr-spur--laeuft .aept-stoppuhr-name::before {
	content: "";
	display: inline-block;
	width: 7px;
	height: 7px;
	margin-right: 6px;
	border-radius: 50%;
	background: var(--aept-akzent);
	animation: aept-stoppuhrpuls 1.1s ease-in-out infinite;
}

@keyframes aept-stoppuhrpuls {
	0%, 100% { opacity: 1; }
	50% { opacity: .25; }
}

.aept-stoppuhr-fazit {
	flex: 1 1 100%;
	padding: 9px 16px;
	border-top: 1px solid var(--aept-linie);
	background: var(--aept-getoent);
	font-size: 13.5px;
}

.aept-stoppuhr-fazittext { font-weight: 600; }

/* ==========================================================================
   Im Vollbild-Fenster

   Dort bekommt das Mailprogramm die ganze verbleibende Hoehe, und die Liste
   scrollt in sich statt die Seite. Ohne diese Regeln stuenden zwei
   Scrollbalken ineinander – der aeussere fuer die Buehne, der innere fuer
   die Liste –, und man wuesste nie, welcher gerade dran ist.
   ========================================================================== */

/* `height`, nicht `min-height`: Eine Mindesthoehe waere fuer die inneren
   Spalten keine Vorgabe – sie wuerden auf ihren Inhalt wachsen, und die
   Leseansicht einer langen Mail schoebe das Fenster auf ueber 2000 Pixel.
   Erst eine feste Hoehe macht aus den Spalten Flaechen, in denen gescrollt
   wird. */
.aefe-buehne.aept {
	display: flex;
	flex-direction: column;
	height: 100%;
}

/* Nur das Fenster waechst und schrumpft. Band, Uhr und Fussnote behalten
   ihre Hoehe – ohne diese Zeile quetscht der Flexraum die Uhr auf ein
   Dreizehntel ihrer Hoehe zusammen, weil flex-shrink von Haus aus 1 ist. */
.aefe-buehne.aept > .aept-band,
.aefe-buehne.aept > .aept-stoppuhr,
.aefe-buehne.aept > .aept-fuss { flex: 0 0 auto; }

.aefe-buehne.aept > .aept-fenster {
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
	flex-direction: column;
}

/* min-height: 0 hebt die 560 Pixel der Grundregel auf – sonst koennte der
   Korpus nicht schrumpfen. Die 320 sind die Untergrenze, unter der ein
   Mailprogramm keines mehr ist; darunter scrollt lieber die Buehne. */
.aefe-buehne.aept > .aept-fenster > .aept-korpus {
	flex: 1 1 auto;
	min-height: 320px;
}

/* Jede Spalte muss unter ihren Inhalt schrumpfen duerfen, sonst wandert das
   Scrollen wieder nach aussen. */
.aefe-buehne .aept-seitenleiste,
.aefe-buehne .aept-listenspalte,
.aefe-buehne .aept-lesespalte { min-height: 0; }

.aefe-buehne .aept-seitenleiste { overflow-y: auto; }

.aefe-buehne .aept-liste,
.aefe-buehne .aept-lesespalte {
	max-height: none;
	overflow-y: auto;
}

/* Der Kostenhinweis unter dem Fenster: im Vollbild nur noch eine Fussnote,
   die Aussage steht in der Bilanz. */
.aefe-buehne.aept > .aept-fuss { flex: 0 0 auto; margin-bottom: 0; }

/* Auf dem Telefon wechseln Liste und Leseansicht einander ab, und die
   Ordnerleiste liegt waagrecht. Dort ist eine feste Hoehe schaedlich: die
   Leseansicht braucht ihren Platz, und gescrollt wird die Buehne. */
@media (max-width: 860px) {
	.aefe-buehne.aept { height: auto; min-height: 100%; }
	.aefe-buehne.aept > .aept-fenster > .aept-korpus { min-height: 0; }
	.aefe-buehne .aept-seitenleiste { overflow-y: hidden; }
}

/* ==========================================================================
   Telefon: weniger, dafuer groesser
   ========================================================================== */

@media (max-width: 700px) {

	.aept-stoppuhr-spur { flex: 1 1 100%; border-right: 0; border-bottom: 1px solid var(--aept-linie); }
	.aept-stoppuhr-spur:last-of-type { border-bottom: 0; }

	/* Tippziele. Unter 44 Pixeln trifft ein Daumen daneben – und in dieser
	   Demo ist jeder Fehlgriff ein Abbruch, weil man nicht sieht, was man
	   ausgeloest hat. */
	.aept-ordner { min-height: 44px; }
	.aept-zeile { min-height: 56px; }
	.aept-kat, .aept-dringend { min-height: 38px; display: inline-flex; align-items: center; }
	.aept-btn { min-height: 44px; }
}

/* Unter 420 Pixeln entfaellt der Anriss: Absender, Betreff und Zeit genuegen,
   um zu entscheiden, was man antippt. Der Text steht ohnehin in der
   Leseansicht. */
@media (max-width: 420px) {
	.aept-anriss { display: none; }
	.aept-stoppuhr-zeit { font-size: 18px; }
}

/* ==========================================================================
   Die Spielleiste: sieben Stationen und der Punktestand

   Sie steht ganz oben und beantwortet die beiden Fragen, die man in einem
   Spiel dauernd hat: Wo bin ich, und wie steht es?
   ========================================================================== */

.aept-spielleiste {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
	margin-bottom: 14px;
}

.aept-stationen {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	gap: 0;
	flex: 1 1 320px;
	min-width: 0;
}

.aept-station {
	display: flex;
	align-items: center;
	gap: 7px;
	flex: 0 1 auto;
	min-width: 0;
	color: var(--aept-leise);
	font-size: 12.5px;
	white-space: nowrap;
}

/* Der Strich zwischen zwei Stationen. Er macht aus sieben Punkten einen Weg. */
.aept-station + .aept-station::before {
	content: "";
	width: 14px;
	height: 1px;
	background: var(--aept-linie);
	flex: 0 0 auto;
	margin: 0 7px;
}

.aept-station-punkt {
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	border: 1px solid var(--aept-linie);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 11.5px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	background: var(--aept-grund);
}

.aept-station-name {
	overflow: hidden;
	text-overflow: ellipsis;
}

.aept-station--fertig { color: var(--aept-still); }
.aept-station--fertig .aept-station-punkt {
	background: var(--aept-dunkel);
	border-color: var(--aept-dunkel);
	color: #fff;
}

.aept-station--jetzt { color: var(--aept-dunkel); font-weight: 700; }
.aept-station--jetzt .aept-station-punkt {
	background: var(--aept-akzent);
	border-color: var(--aept-akzent);
	color: #fff;
	box-shadow: 0 0 0 4px var(--ae-akzent-schimmer, rgba(231, 30, 98, .12));
}

.aept-punktekasten {
	position: relative;
	flex: 0 0 auto;
	display: flex;
	align-items: baseline;
	gap: 6px;
	padding: 5px 13px;
	border: 1px solid var(--aept-linie);
	border-radius: 100px;
	background: var(--aept-grund);
}

.aept-punktestand {
	font-size: 19px;
	font-variant-numeric: tabular-nums;
	line-height: 1;
	color: var(--aept-akzent);
}

.aept-punktestand--hoch { animation: aept-punkthoch .45s ease; }
@keyframes aept-punkthoch {
	0% { transform: scale(1); }
	40% { transform: scale(1.35); }
	100% { transform: scale(1); }
}

.aept-punktewort {
	font-size: 11px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--aept-leise);
}

/* Die Zahl, die kurz nach oben wegfliegt. */
.aept-punkteblase {
	position: absolute;
	left: 50%;
	top: -4px;
	transform: translateX(-50%);
	font-size: 14px;
	font-weight: 700;
	color: var(--aept-akzent);
	pointer-events: none;
	animation: aept-blase .9s ease forwards;
}
@keyframes aept-blase {
	0% { opacity: 0; transform: translate(-50%, 6px); }
	25% { opacity: 1; }
	100% { opacity: 0; transform: translate(-50%, -26px); }
}

/* ==========================================================================
   Der Wegweiser

   Ein Pfeil und ein kurzer Satz auf dem, was als naechstes dran ist. Liegt
   als `fixed` ueber allem – das Ziel steckt mal in der Liste, mal in der
   Leseansicht, mal in der Aktionsleiste, und jeder dieser Behaelter hat
   seinen eigenen Ueberlauf.
   ========================================================================== */

.aept-zeiger {
	position: fixed;
	z-index: 40;
	display: flex;
	flex-direction: column;
	align-items: center;
	pointer-events: none;
	transform: translateX(-50%);
}

.aept-zeiger-text {
	order: 2;
	background: var(--aept-dunkel);
	color: #fff;
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.3;
	padding: 7px 13px;
	border-radius: 7px;
	white-space: nowrap;
	max-width: 80vw;
	overflow: hidden;
	text-overflow: ellipsis;
	box-shadow: 0 6px 18px rgba(38, 50, 56, .22);
}

.aept-zeiger-pfeil {
	order: 1;
	width: 0;
	height: 0;
	border-left: 7px solid transparent;
	border-right: 7px solid transparent;
}

/* Unter dem Ziel: Spitze zeigt hinauf. */
.aept-zeiger--unten {
	margin-top: 9px;
	animation: aept-zeigerauf 1.5s ease-in-out infinite;
}
.aept-zeiger--unten .aept-zeiger-pfeil { border-bottom: 8px solid var(--aept-dunkel); }

/* Ueber dem Ziel: Spitze zeigt hinunter, Reihenfolge dreht sich. */
.aept-zeiger--oben {
	transform: translate(-50%, -100%);
	margin-top: -9px;
	animation: aept-zeigerab 1.5s ease-in-out infinite;
}
.aept-zeiger--oben .aept-zeiger-text { order: 1; }
.aept-zeiger--oben .aept-zeiger-pfeil { order: 2; border-top: 8px solid var(--aept-dunkel); }

@keyframes aept-zeigerauf {
	0%, 100% { transform: translate(-50%, 0); }
	50% { transform: translate(-50%, 5px); }
}
@keyframes aept-zeigerab {
	0%, 100% { transform: translate(-50%, -100%); }
	50% { transform: translate(-50%, calc(-100% - 5px)); }
}

/* Das Ziel selbst bekommt einen Ring – der Pfeil allein wird uebersehen,
   wenn nebenan sieben gleich aussehende Knoepfe stehen. */
.aept-blinkt {
	position: relative;
	animation: aept-ring 1.5s ease-in-out infinite;
}
@keyframes aept-ring {
	0%, 100% { box-shadow: 0 0 0 0 var(--ae-akzent-schimmer, rgba(231, 30, 98, .12)); }
	50% { box-shadow: 0 0 0 6px var(--ae-akzent-schimmer, rgba(231, 30, 98, .12)); }
}

/* ==========================================================================
   Die Rueckmeldung nach dem Einordnen
   ========================================================================== */

.aept-rueck {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	height: 100%;
	min-height: 260px;
	padding: 30px 24px;
	text-align: center;
	animation: aept-rueckauf .32s ease;
}

@keyframes aept-rueckauf {
	0% { opacity: 0; transform: scale(.96); }
	100% { opacity: 1; transform: scale(1); }
}

.aept-rueck-zeichen {
	width: 62px;
	height: 62px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 30px;
	line-height: 1;
	background: var(--aept-getoent);
	color: var(--aept-still);
}

.aept-rueck--treffer .aept-rueck-zeichen {
	background: var(--aept-akzent);
	color: #fff;
	animation: aept-treffer .5s ease;
}
@keyframes aept-treffer {
	0% { transform: scale(.4); }
	55% { transform: scale(1.18); }
	100% { transform: scale(1); }
}

.aept-rueck-text {
	margin: 0;
	font-size: 17px;
	font-weight: 600;
	max-width: 30ch;
}

.aept-rueck-serie {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--aept-akzent-tief);
	border: 1px solid var(--aept-akzent);
	border-radius: 100px;
	padding: 3px 12px;
}

/* ==========================================================================
   Der Stempel «Posteingang leer»

   Die Belohnung, auf die alles zulaeuft. Er schlaegt auf, bleibt gut zwei
   Sekunden und geht wieder – das Fenster gehoert dem Posteingang.
   ========================================================================== */

.aept-stempel {
	position: fixed;
	left: 50%;
	top: 50%;
	z-index: 50;
	transform: translate(-50%, -50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	padding: 26px 38px;
	border: 3px solid var(--aept-akzent);
	border-radius: 14px;
	background: rgba(255, 255, 255, .97);
	box-shadow: 0 24px 60px rgba(38, 50, 56, .28);
	text-align: center;
	pointer-events: none;
	animation: aept-stempelauf .42s cubic-bezier(.2, 1.5, .4, 1);
}

@keyframes aept-stempelauf {
	0% { opacity: 0; transform: translate(-50%, -50%) scale(1.7) rotate(-8deg); }
	100% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(-3deg); }
}

.aept-stempel--weg { animation: aept-stempelweg .4s ease forwards; }
@keyframes aept-stempelweg {
	100% { opacity: 0; transform: translate(-50%, -50%) scale(.9) rotate(-3deg); }
}

.aept-stempel-titel {
	font-size: clamp(22px, 4vw, 32px);
	letter-spacing: -.02em;
	color: var(--aept-akzent);
	text-transform: uppercase;
}

.aept-stempel-text { font-size: 14px; color: var(--aept-still); max-width: 34ch; }

/* ==========================================================================
   Spiel auf dem Telefon
   ========================================================================== */

@media (max-width: 700px) {
	.aept-spielleiste { gap: 10px; }

	/* Nur die Punkte, keine Namen – sieben Namen nebeneinander sind auf 390
	   Pixeln Buchstabensalat, und selbst der eine aktive wurde noch
	   abgeschnitten. Wie die Station heisst, steht ohnehin direkt darueber
	   im Band («Zug 1 · Erst einmal von Hand»). */
	.aept-station-name { display: none; }
	.aept-station + .aept-station::before { width: 10px; margin: 0 5px; }
	.aept-station-punkt { width: 20px; height: 20px; font-size: 11px; }

	.aept-stationen { flex: 1 1 auto; }
	.aept-punktekasten { padding: 4px 11px; }
	.aept-punktestand { font-size: 17px; }

	.aept-rueck { min-height: 200px; padding: 24px 18px; }
	.aept-rueck-zeichen { width: 54px; height: 54px; font-size: 26px; }
	.aept-rueck-text { font-size: 16px; }

	.aept-stempel { padding: 20px 26px; }
}

@media (prefers-reduced-motion: reduce) {
	.aept-zeiger--unten,
	.aept-zeiger--oben,
	.aept-blinkt,
	.aept-punktestand--hoch,
	.aept-rueck,
	.aept-rueck--treffer .aept-rueck-zeichen,
	.aept-stempel { animation: none; }
	.aept-zeiger--oben { transform: translate(-50%, -100%); }
	.aept-blinkt { box-shadow: 0 0 0 4px var(--ae-akzent-schimmer, rgba(231, 30, 98, .12)); }
}

/* ==========================================================================
   Die Einführung

   Drei Karten über dem Postfach, das dahinter schon steht. Man sieht also,
   was einen erwartet, während erklärt wird, was man damit tun kann – besser
   als eine Erklärung vor leerem Grund.
   ========================================================================== */

.aept-einfuehrung {
	position: fixed;
	inset: 0;
	z-index: 60;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background: rgba(38, 50, 56, .82);
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
	animation: aept-einblenden .3s ease;
}

@keyframes aept-einblenden {
	from { opacity: 0; }
	to { opacity: 1; }
}

.aept-einfuehrung--weg { animation: aept-ausblenden .3s ease forwards; }
@keyframes aept-ausblenden {
	to { opacity: 0; }
}

.aept-einfuehrung-karte {
	position: relative;
	width: min(440px, 100%);
	background: var(--aept-grund);
	border-radius: 18px;
	padding: 34px 32px 26px;
	text-align: center;
	box-shadow: 0 30px 80px rgba(38, 50, 56, .4);
}

.aept-einfuehrung-karte--auf { animation: aept-kartenauf .38s cubic-bezier(.2, 1.2, .35, 1); }
@keyframes aept-kartenauf {
	from { opacity: 0; transform: translateY(14px) scale(.97); }
	to { opacity: 1; transform: none; }
}

.aept-einfuehrung-zeichen {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 68px;
	height: 68px;
	margin-bottom: 16px;
	border-radius: 50%;
	background: var(--aept-getoent);
	font-size: 30px;
	line-height: 1;
	animation: aept-zeichenauf .5s cubic-bezier(.2, 1.4, .35, 1) .06s backwards;
}

@keyframes aept-zeichenauf {
	from { opacity: 0; transform: scale(.4) rotate(-14deg); }
	to { opacity: 1; transform: none; }
}

.aept-einfuehrung-titel {
	margin: 0 0 8px;
	font-size: 23px;
	line-height: 1.15;
}

.aept-einfuehrung-text {
	margin: 0 0 22px;
	color: var(--aept-still);
	font-size: 15.5px;
	line-height: 1.55;
}

.aept-einfuehrung-punkte {
	display: flex;
	justify-content: center;
	gap: 7px;
	margin-bottom: 20px;
}

.aept-einfuehrung-punkt {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--aept-linie);
	transition: width .25s ease, background .25s ease;
}

.aept-einfuehrung-punkt--an {
	width: 22px;
	border-radius: 100px;
	background: var(--aept-akzent);
}

.aept-einfuehrung-karte .aept-btn--gross { width: 100%; }

.aept-einfuehrung-ueberspringen {
	display: block;
	margin: 12px auto 0;
	border: 0;
	background: transparent;
	font: inherit;
	font-size: 13px;
	color: var(--aept-leise);
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.aept-einfuehrung-ueberspringen:hover { color: var(--aept-dunkel); }

/* ==========================================================================
   Zug 1: welche Mail dran ist – und welche nicht

   Vorher waren alle vierundzwanzig Mails anklickbar, aber nur drei hatten
   eine Aktion. Wer eine der übrigen öffnete, las sie und fand darunter
   nichts – und hielt das Spiel für kaputt.
   ========================================================================== */

.aept-zeile--dran {
	background: rgba(231, 30, 98, .05);
	box-shadow: inset 3px 0 0 var(--aept-akzent);
}

.aept-dran {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	background: var(--aept-akzent);
	color: #fff;
	border-radius: 100px;
	padding: 2px 9px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .04em;
}

.aept-dran::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #fff;
	animation: aept-dranpuls 1.4s ease-in-out infinite;
}

@keyframes aept-dranpuls {
	0%, 100% { opacity: 1; }
	50% { opacity: .3; }
}

/* Die übrigen treten zurück – sie sind nicht gesperrt, nur nicht dran. */
.aept-zeile--wartet { opacity: .58; }
.aept-zeile--wartet:hover,
.aept-zeile--wartet.aept-zeile--offen { opacity: 1; }

.aept-warteleiste {
	border: 1px dashed var(--aept-linie);
	border-radius: 10px;
	padding: 18px 20px;
	margin-top: 18px;
	background: var(--aept-getoent);
}

.aept-wartetext {
	margin: 0 0 12px;
	font-size: 14.5px;
	color: var(--aept-still);
}

@media (max-width: 560px) {
	.aept-einfuehrung { padding: 16px; }
	.aept-einfuehrung-karte { padding: 28px 22px 22px; }
	.aept-einfuehrung-zeichen { width: 58px; height: 58px; font-size: 26px; }
	.aept-einfuehrung-titel { font-size: 20px; }
	.aept-einfuehrung-text { font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
	.aept-einfuehrung,
	.aept-einfuehrung-karte--auf,
	.aept-einfuehrung-zeichen,
	.aept-dran::before { animation: none; }
}

/* ==========================================================================
   Im Fenster ist es eine Anwendung, keine Seite

   Vorher: eine Überschrift, ein Absatz, darunter ein Kasten mit Rand,
   Rundung und Schatten – also ein Screenshot auf einer Seite. Jetzt füllt
   das Mailprogramm den Rahmen bis an die Kante, und was drumherum nötig ist,
   liegt in schmalen Leisten darüber und darunter.
   ========================================================================== */

/* Der Fortschritt sitzt in der Kopfleiste des Fensters. */
.aept-spielleiste--kopf {
	margin: 0;
	gap: 14px;
	flex-wrap: nowrap;
	min-width: 0;
	justify-content: flex-end;
}

.aept-spielleiste--kopf .aept-stationen { flex: 0 1 auto; }
.aept-spielleiste--kopf .aept-station { font-size: 11.5px; }
.aept-spielleiste--kopf .aept-station-punkt { width: 20px; height: 20px; font-size: 11px; }
.aept-spielleiste--kopf .aept-punktekasten { padding: 4px 11px; background: transparent; }
.aept-spielleiste--kopf .aept-punktestand { font-size: 17px; }

/* Die Zugzeile: schmal, randlos, über dem Programm. */
.aept-bandleiste {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 9px clamp(12px, 2vw, 20px);
	border-bottom: 1px solid var(--aept-linie);
	background: var(--aept-grund);
}

.aept-bandleiste .aept-zugnr { flex: 0 0 auto; }

.aept-bandtitel {
	flex: 1 1 auto;
	min-width: 0;
	font-size: 15px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.aept-bandwerkzeuge {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 6px;
}

.aept-bandhilfe {
	width: 26px;
	height: 26px;
	border: 1px solid var(--aept-linie);
	border-radius: 50%;
	background: var(--aept-grund);
	font: inherit;
	font-size: 13px;
	font-weight: 700;
	color: var(--aept-still);
	cursor: pointer;
	line-height: 1;
}
.aept-bandhilfe:hover { border-color: var(--aept-akzent); color: var(--aept-akzent); }

/* Im Anwendungsmodus verliert das Mailprogramm seinen Rahmen – es IST das
   Fenster. */
.aefe-buehne--app.aept {
	display: flex;
	flex-direction: column;
	height: 100%;
	font-size: 15.5px;
}

.aefe-buehne--app .aept-band,
.aefe-buehne--app .aept-stoppuhr,
.aefe-buehne--app .aept-reife { flex: 0 0 auto; }

.aefe-buehne--app .aept-band { margin: 0; }

.aefe-buehne--app .aept-stoppuhr {
	margin: 0;
	border: 0;
	border-bottom: 1px solid var(--aept-linie);
	border-radius: 0;
	background: var(--aept-getoent);
}

.aefe-buehne--app .aept-stoppuhr-spur { padding: 7px 16px; }
.aefe-buehne--app .aept-stoppuhr-zeit { font-size: 17px; }

.aefe-buehne--app .aept-reife {
	margin: 0;
	padding: 8px clamp(12px, 2vw, 20px);
	border-bottom: 1px solid var(--aept-linie);
	background: var(--aept-getoent);
}

.aefe-buehne--app .aept-fenster {
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
	flex-direction: column;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

/* Die eigene Titelleiste des Mailprogramms bleibt – sie macht aus dem
   Bereich ein Postfach und nicht irgendein Raster. */
.aefe-buehne--app .aept-korpus {
	flex: 1 1 auto;
	min-height: 240px;
}

/* Die Bilanz am Ende ist wieder Lesestoff und bekommt ihren Rand zurück. */
.aefe-buehne--app .aept-bilanz {
	flex: 0 0 auto;
	margin: 18px clamp(12px, 2vw, 20px);
}

@media (max-width: 860px) {
	.aept-bandleiste { padding: 8px 12px; }
	.aept-bandtitel { font-size: 14px; }
}

/* Auf schmalen Schirmen hat die Kopfleiste keinen Platz für die Stationen –
   dort zählt der Punktestand, der Rest steht in der Zugzeile darunter. */
@media (max-width: 700px) {
	.aept-spielleiste--kopf .aept-stationen { display: none; }
}

/* Die Zugnummer über dem Zeichen. Als inline-Element stand sie sonst
   daneben in derselben Zeile. */
.aept-einfuehrung-marke {
	display: block;
	margin-bottom: 12px;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--aept-akzent-tief);
}