/*
 * CAV Hörspiele – App-Hülle „Hör zu & mal mit“ (Ausbaustufe 2).
 *
 * Eigenständige Vollbild-Seiten ohne Theme: Fokus-Player, App-Start, Kindermodus,
 * Elternbereich, Installationsanleitung, Offline-Seite. Ergänzt cavh-player.css
 * (Tokens/Buttons/Player/Karten kommen von dort). Mobil zuerst, Safe-Area, kein
 * horizontales Scrollen.
 */

/* =====================================================================
 * 1. Dokument
 * =================================================================== */

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

body.cavh-app-body {
	margin: 0;
	min-height: 100vh;
	min-height: 100dvh;
	background: #F4F1E9;
	overflow-x: hidden;
	-webkit-tap-highlight-color: transparent;
}

.cavh-app {
	min-height: 100vh;
	min-height: 100dvh;
	padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px));
	overflow-x: hidden;
}

.cavh-app img {
	max-width: 100%;
}

.cavh-sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.cavh-fokus {
	max-width: 1120px;
	margin: 0 auto;
	padding: 14px max(16px, env(safe-area-inset-right, 0px)) 24px max(16px, env(safe-area-inset-left, 0px));
}

/* =====================================================================
 * 2. Schmale Kopfleiste + Menü
 * =================================================================== */

.cavh-leiste {
	position: sticky;
	top: 0;
	z-index: 50;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: 52px;
	padding: calc(6px + env(safe-area-inset-top, 0px)) max(14px, env(safe-area-inset-right, 0px)) 6px max(14px, env(safe-area-inset-left, 0px));
	background: rgba(244, 241, 233, 0.92);
	-webkit-backdrop-filter: saturate(1.2) blur(10px);
	backdrop-filter: saturate(1.2) blur(10px);
	border-bottom: 1px solid var(--cavh-card-border);
}

.cavh-app .cavh-leiste__marke {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	min-height: 44px;
	min-width: 0;
	color: var(--cavh-navy);
	text-decoration: none;
}

.cavh-marke {
	display: block;
	flex: none;
	border-radius: 9px;
}

.cavh-leiste__name {
	font-family: var(--cavh-font-head);
	font-weight: 600;
	font-size: 17px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.cavh-menue {
	position: relative;
	flex: none;
}

.cavh-menue__knopf {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--cavh-white);
	border: 1px solid var(--cavh-card-border);
	color: var(--cavh-navy);
	cursor: pointer;
	list-style: none;
}

.cavh-menue__knopf::-webkit-details-marker {
	display: none;
}

.cavh-menue__knopf::marker {
	content: "";
}

.cavh-menue[open] .cavh-menue__knopf {
	background: var(--cavh-navy);
	color: var(--cavh-white);
}

.cavh-menue__liste {
	position: absolute;
	right: 0;
	top: calc(100% + 8px);
	display: flex;
	flex-direction: column;
	width: min(270px, calc(100vw - 32px));
	padding: 8px;
	background: var(--cavh-white);
	border: 1px solid var(--cavh-card-border);
	border-radius: var(--cavh-radius-md);
	box-shadow: var(--cavh-shadow-md);
}

.cavh-app .cavh-menue__liste a {
	display: flex;
	align-items: center;
	min-height: 44px;
	padding: 8px 12px;
	border-radius: 10px;
	color: var(--cavh-navy);
	font-weight: 700;
	text-decoration: none;
}

.cavh-app .cavh-menue__liste a:hover,
.cavh-app .cavh-menue__liste a:focus-visible {
	background: var(--cavh-hafer-2);
}

.cavh-app .cavh-menue__liste a.is-hervor {
	background: #FBF3E0;
	color: #6b4a0b;
}

.cavh-menue__klein {
	display: block;
	margin-top: 6px;
	padding: 8px 12px 4px;
	border-top: 1px solid var(--cavh-hafer-3);
	color: var(--cavh-meta);
	font-size: 13px;
}

.cavh-app .cavh-menue__klein a {
	display: inline;
	min-height: 0;
	padding: 0;
	font-weight: 600;
	color: var(--cavh-meta);
	text-decoration: underline;
}

/* =====================================================================
 * 3. Fokus-Player
 * =================================================================== */

.cavh-app--fokus .cavh-buehne {
	gap: 18px;
}

.cavh-app--fokus .cavh-spieler {
	padding: 18px 18px 20px;
}

.cavh-app--fokus .cavh-spieler__bild {
	width: 84px;
	height: 84px;
}

.cavh-app--fokus .cavh-spieler__bild-img {
	width: 76px;
	height: 76px;
}

.cavh-app .cavh-spieler__jetzt-titel {
	font-size: 22px;
	line-height: 1.15;
}

.cavh-app--fokus .cavh-steuerung {
	margin: 20px 0 16px;
}

.cavh-app--fokus .cavh-rund--gross,
.cavh-app--fokus .cavh-rund--gross:hover,
.cavh-app--fokus .cavh-rund--gross:focus {
	width: 104px;
	height: 104px;
}

.cavh-spieler__fuss {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 12px 16px;
	margin-top: 16px;
}

.cavh-spieler__fuss .cavh-tempo {
	margin-top: 0;
}

.cavh-liste__kopf {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 12px;
	margin-bottom: 12px;
}

.cavh-app .cavh-liste__kopf .cavh-liste__titel {
	margin: 4px 0 0;
	font-size: 21px;
}

.cavh-fokus__buch {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 26px auto 0;
	max-width: 520px;
	justify-content: center;
	color: var(--cavh-meta);
}

.cavh-fokus__cover {
	width: 44px;
	height: auto;
	border-radius: 6px;
	box-shadow: var(--cavh-shadow-sm);
}

.cavh-fokus__buchtext {
	margin: 0;
	display: flex;
	flex-direction: column;
	font-size: 14px;
	line-height: 1.3;
}

.cavh-fokus__buchtext strong {
	color: var(--cavh-navy);
	font-family: var(--cavh-font-head);
	font-weight: 600;
	font-size: 16px;
}

.cavh-fokus__reihe {
	font-size: 12.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
}

.cavh-app .cavh-claim {
	margin-top: 22px;
}

.cavh-gesperrt__cover {
	display: block;
	width: 140px;
	height: auto;
	margin: 0 auto 16px;
	border-radius: 10px;
	box-shadow: var(--cavh-shadow-md);
}

/* „Offline“-Plakette auf Karten */
.cavh-karte__offline {
	display: none;
	position: absolute;
	left: 8px;
	bottom: 8px;
	padding: 3px 8px;
	border-radius: var(--cavh-radius-pill);
	background: rgba(46, 139, 134, 0.95);
	color: var(--cavh-white);
	font-size: 11.5px;
	font-weight: 800;
	letter-spacing: .02em;
}

.cavh-karte.is-offline .cavh-karte__offline {
	display: inline-block;
}

/* =====================================================================
 * 4. „Für unterwegs laden“-Knopf
 * =================================================================== */

.cavh-app .cavh-offline-knopf {
	display: inline-flex;
	text-decoration: none;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-height: 44px;
	margin: 0;
	padding: 8px 16px;
	border: 1.5px solid rgba(46, 139, 134, 0.45);
	border-radius: var(--cavh-radius-pill);
	background: #E2F1EF;
	color: #1d5f5b;
	font-family: var(--cavh-font-body);
	font-size: 14.5px;
	font-weight: 800;
	line-height: 1.1;
	cursor: pointer;
	text-transform: none;
}

.cavh-app .cavh-offline-knopf::before {
	content: "";
	width: 16px;
	height: 16px;
	flex: none;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3v12m-5-5l5 5 5-5M5 20h14' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3v12m-5-5l5 5 5-5M5 20h14' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.cavh-app .cavh-offline-knopf.is-offline {
	background: var(--cavh-white);
	border-color: var(--cavh-card-border);
	color: var(--cavh-teal);
}

.cavh-app .cavh-offline-knopf.is-offline::before,
.cavh-app .cavh-offline-knopf.is-laedt::before {
	display: none;
}

.cavh-app .cavh-offline-knopf.is-laedt {
	cursor: progress;
	opacity: .85;
}

.cavh-app .cavh-offline-knopf[disabled] {
	cursor: default;
}

.cavh-app .cavh-offline-knopf--klein {
	min-height: 40px;
	padding: 6px 14px;
	font-size: 13.5px;
}

.cavh-app .cavh-offline-knopf[hidden] {
	display: none !important;
}

/* =====================================================================
 * 5. App-Start
 * =================================================================== */

.cavh-app-kopf {
	margin: 10px 0 18px;
}

.cavh-app .cavh-app-kopf__titel {
	font-size: 30px;
	margin: 0 0 6px;
}

.cavh-app-kopf__unter {
	margin: 0;
	color: var(--cavh-ink-2);
	font-size: 16.5px;
}

.cavh-app-buecher {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 14px;
}

@media (min-width: 700px) {
	.cavh-app-buecher {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.cavh-app a.cavh-app-buch {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 12px 14px 12px 12px;
	color: var(--cavh-ink);
	text-decoration: none;
	transition: transform .2s var(--cavh-ease-bounce), box-shadow .2s ease;
}

.cavh-app a.cavh-app-buch:hover {
	transform: translateY(-2px);
	box-shadow: var(--cavh-shadow-md);
}

.cavh-app-buch__cover {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 78px;
	height: 108px;
	border-radius: 10px;
	overflow: hidden;
	background: var(--cavh-cover-bg);
}

.cavh-app-buch__cover img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cavh-app-buch__text {
	display: flex;
	flex-direction: column;
	gap: 3px;
	flex: 1 1 auto;
	min-width: 0;
}

.cavh-app-buch__reihe {
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--cavh-berry);
}

.cavh-app-buch__titel {
	font-family: var(--cavh-font-head);
	font-weight: 600;
	font-size: 20px;
	line-height: 1.15;
	color: var(--cavh-navy);
}

.cavh-app-buch__meta {
	font-size: 14px;
	color: var(--cavh-meta);
}

.cavh-app-buch__play {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: var(--cavh-navy);
	color: var(--cavh-white);
}

.cavh-app-kacheln {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 10px;
	margin-top: 26px;
}

@media (min-width: 700px) {
	.cavh-app-kacheln {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.cavh-app a.cavh-app-kachel {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 64px;
	padding: 12px 14px;
	border-radius: var(--cavh-radius-md);
	background: var(--cavh-hafer-2);
	border: 1px solid var(--cavh-card-border);
	color: var(--cavh-navy);
	text-decoration: none;
}

.cavh-app-kachel[hidden] {
	display: none !important;
}

.cavh-app-kachel strong {
	display: block;
	font-size: 16px;
}

.cavh-app-kachel small {
	display: block;
	color: var(--cavh-meta);
	font-size: 13.5px;
}

.cavh-app-kachel__icon {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 12px;
	background: var(--cavh-white);
}

.cavh-meldung .cavh-konto__bild {
	display: block;
	margin: 0 auto 10px;
}

/* =====================================================================
 * 6. Elternbereich, Formulare, Hinweise, Anleitung
 * =================================================================== */

.cavh-eltern-karte {
	padding: 20px 18px;
	margin-bottom: 16px;
}

.cavh-app .cavh-eltern-karte h2 {
	font-size: 22px;
	margin-bottom: 6px;
}

.cavh-eltern-karte p {
	margin: 0 0 12px;
	color: var(--cavh-ink-2);
}

.cavh-eltern-karte__klein {
	font-size: 14.5px;
}

.cavh-eltern-karte__aktion {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 4px 0 0;
}

.cavh-eltern-karte[hidden],
.cavh-app [data-cavh-nur-browser][hidden] {
	display: none !important;
}

.cavh-formular {
	display: flex;
	flex-direction: column;
	gap: 12px;
	align-items: flex-start;
}

.cavh-feld-reihe {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	width: 100%;
}

.cavh-feld {
	display: flex;
	flex-direction: column;
	gap: 5px;
	flex: 1 1 140px;
	min-width: 0;
	width: 100%;
	font-weight: 700;
	color: var(--cavh-navy);
	font-size: 14.5px;
}

.cavh-feld small {
	font-weight: 600;
	color: var(--cavh-meta);
}

.cavh-feld input {
	width: 100%;
	min-height: 48px;
	padding: 10px 14px;
	border: 1.5px solid rgba(140, 136, 130, 0.4);
	border-radius: 12px;
	background: var(--cavh-white);
	font-family: var(--cavh-font-body);
	font-size: 18px;
	letter-spacing: .2em;
	color: var(--cavh-ink);
}

.cavh-feld input:focus {
	outline: 3px solid rgba(42, 58, 82, 0.25);
	border-color: var(--cavh-navy);
}

.cavh-hinweis {
	margin: 0 0 16px;
	padding: 12px 16px;
	border-radius: var(--cavh-radius-md);
	font-weight: 700;
}

.cavh-hinweis--ok {
	background: #E2F1EF;
	color: #1d5f5b;
}

.cavh-hinweis--fehler {
	background: #F6E7EB;
	color: #6d2c3e;
}

.cavh-hinweis[hidden] {
	display: none !important;
}

.cavh-app .cavh-btn--klein {
	min-height: 40px;
	padding: 8px 16px;
	font-size: 14px;
}

.cavh-offline-summe {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 12px;
	margin: 6px 0 14px;
	padding: 10px 14px;
	border-radius: 12px;
	background: var(--cavh-hafer-2);
	font-weight: 700;
	color: var(--cavh-navy);
}

.cavh-offline-buch {
	margin-top: 14px;
}

.cavh-offline-buch__kopf {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding-bottom: 8px;
	border-bottom: 2px dashed var(--cavh-hafer-3);
	color: var(--cavh-navy);
}

.cavh-offline-liste {
	list-style: none;
	margin: 0;
	padding: 0;
}

.cavh-offline-zeile {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 12px;
	padding: 10px 0;
	border-bottom: 1px solid var(--cavh-hafer-3);
}

.cavh-offline-zeile__text {
	display: flex;
	flex-direction: column;
	min-width: 0;
	flex: 1 1 160px;
}

.cavh-offline-zeile__titel {
	font-weight: 700;
	color: var(--cavh-ink);
}

.cavh-offline-zeile__meta {
	font-size: 13.5px;
	color: var(--cavh-meta);
}

.cavh-eltern-links {
	text-align: center;
	color: var(--cavh-meta);
	margin: 22px 0 0;
}

.cavh-schritte {
	margin: 10px 0 0;
	padding-left: 22px;
	color: var(--cavh-ink-2);
}

.cavh-schritte li {
	margin: 0 0 8px;
}

.cavh-schritte--punkte {
	list-style: disc;
}

.cavh-schritte__icon {
	vertical-align: -4px;
	color: #1a73e8;
}

.cavh-install__kopf {
	text-align: center;
}

.cavh-install__icon {
	display: block;
	width: 88px;
	height: 88px;
	margin: 6px auto 12px;
	border-radius: 22px;
	box-shadow: var(--cavh-shadow-md);
}

.cavh-offline-gespeichert {
	list-style: none;
	margin: 0 0 18px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
	align-items: center;
}

/* =====================================================================
 * 7. Kindermodus
 * =================================================================== */

.cavh-app--kinder {
	background: #F7F4EC;
}

.cavh-kinder-kopf {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: calc(10px + env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) 10px max(16px, env(safe-area-inset-left, 0px));
	max-width: 1180px;
	margin: 0 auto;
}

.cavh-app .cavh-kinder-kopf__titel {
	flex: 1 1 auto;
	margin: 0;
	font-size: clamp(22px, 5.4vw, 34px);
}

.cavh-app a.cavh-schloss {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: var(--cavh-white);
	border: 1px solid var(--cavh-card-border);
	color: var(--cavh-meta);
	box-shadow: var(--cavh-shadow-sm);
}

.cavh-kinder-eltern {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px 14px;
	max-width: 1148px;
	margin: 0 auto 8px;
	padding: 12px 16px;
	margin-left: max(16px, env(safe-area-inset-left, 0px));
	margin-right: max(16px, env(safe-area-inset-right, 0px));
	border-radius: var(--cavh-radius-md);
	background: #FBF3E0;
	border: 1px solid rgba(217, 164, 65, 0.45);
}

@media (min-width: 1182px) {
	.cavh-kinder-eltern {
		margin-left: auto;
		margin-right: auto;
	}
}

.cavh-kinder-eltern p {
	margin: 0;
	flex: 1 1 240px;
	color: var(--cavh-ink-2);
}

.cavh-kinder-eltern form {
	margin: 0;
}

.cavh-kinder {
	max-width: 1180px;
	margin: 0 auto;
	padding: 8px max(16px, env(safe-area-inset-right, 0px)) 24px max(16px, env(safe-area-inset-left, 0px));
}

.cavh-kinder-buch {
	margin-bottom: 26px;
}

.cavh-app .cavh-kinder-buch__titel {
	font-size: 20px;
	margin: 6px 0 12px;
	color: var(--cavh-ink-2);
}

.cavh-maerchen--kinder {
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr));
	gap: 18px;
}

@media (max-width: 520px) {
	.cavh-maerchen--kinder {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
	}
}

.cavh-app .cavh-karte--kind,
.cavh-app .cavh-karte--kind:hover,
.cavh-app .cavh-karte--kind:focus {
	padding: 8px 8px 12px;
	border-width: 3px;
	border-radius: 22px;
}

.cavh-app .cavh-karte--kind .cavh-karte__titel {
	font-family: var(--cavh-font-head);
	font-weight: 600;
	font-size: 19px;
	color: var(--cavh-navy);
}

.cavh-app .cavh-karte--kind .cavh-karte__meta,
.cavh-app .cavh-karte--kind .cavh-karte__nr {
	display: none;
}

.cavh-app .cavh-karte--kind .cavh-karte__status {
	width: 44px;
	height: 44px;
	font-size: 20px;
}

/* „Läuft gerade“ nur zeigen, wenn wirklich etwas läuft. */
body.cavh-app--kinder:not(.cavh-laeuft) .cavh-karte.is-aktiv .cavh-karte__jetzt {
	display: none;
}

/* Player-Ansicht im Kindermodus: legt sich über die Kacheln. */
.cavh-kinder-player {
	position: fixed;
	inset: 0;
	z-index: 60;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	background: #F7F4EC;
	padding: calc(10px + env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) calc(24px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
}

.cavh-kinder-player[hidden] {
	display: none !important;
}

.cavh-kinder-player .cavh-spieler {
	max-width: 640px;
	margin: 0 auto;
}

.cavh-app .cavh-kinder-player .cavh-spieler__jetzt-titel {
	font-size: clamp(24px, 6vw, 32px);
}

.cavh-app .cavh-kinder-player .cavh-spieler__bild {
	width: 112px;
	height: 112px;
	border-radius: 22px;
}

.cavh-app .cavh-kinder-player .cavh-spieler__bild-img {
	width: 104px;
	height: 104px;
	border-radius: 18px;
}

.cavh-app .cavh-kinder-player .cavh-rund--gross,
.cavh-app .cavh-kinder-player .cavh-rund--gross:hover,
.cavh-app .cavh-kinder-player .cavh-rund--gross:focus {
	width: 128px;
	height: 128px;
}

.cavh-app .cavh-kinder-player .cavh-rund--sprung {
	width: 68px;
	height: 68px;
}

.cavh-app .cavh-kinder-player__zu {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 52px;
	margin: 0 auto 12px;
	padding: 8px 18px 8px 12px;
	border: 0;
	border-radius: var(--cavh-radius-pill);
	background: var(--cavh-white);
	box-shadow: var(--cavh-shadow-sm);
	color: var(--cavh-navy);
	font-family: var(--cavh-font-head);
	font-size: 18px;
	font-weight: 600;
	cursor: pointer;
}

body.cavh-spieler-offen {
	overflow: hidden;
}

/* PIN-Tastenfeld */
.cavh-pin {
	position: fixed;
	inset: 0;
	z-index: 90;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	background: rgba(42, 58, 82, 0.55);
}

.cavh-pin[hidden] {
	display: none !important;
}

.cavh-pin__karte {
	position: relative;
	width: min(340px, 100%);
	padding: 26px 22px 22px;
	border-radius: 24px;
	background: var(--cavh-white);
	box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.5);
	text-align: center;
	font-family: var(--cavh-font-body);
}

.cavh-app .cavh-pin__titel {
	font-size: 24px;
	margin: 0 0 4px;
}

.cavh-pin__text {
	margin: 0 0 14px;
	color: var(--cavh-meta);
	font-size: 14.5px;
}

.cavh-pin__zu {
	position: absolute;
	top: 8px;
	right: 8px;
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--cavh-meta);
	font-size: 28px;
	line-height: 1;
	cursor: pointer;
}

.cavh-pin__punkte {
	display: flex;
	justify-content: center;
	gap: 14px;
	margin: 6px 0 8px;
}

.cavh-pin__punkte i {
	width: 16px;
	height: 16px;
	border-radius: 50%;
	border: 2px solid var(--cavh-navy);
	transition: background .1s ease;
}

.cavh-pin__punkte i.is-voll {
	background: var(--cavh-navy);
}

.cavh-pin.is-falsch .cavh-pin__punkte {
	animation: cavh-wackeln .4s ease;
}

@keyframes cavh-wackeln {
	0%, 100% { transform: translateX(0); }
	20% { transform: translateX(-8px); }
	40% { transform: translateX(8px); }
	60% { transform: translateX(-5px); }
	80% { transform: translateX(5px); }
}

.cavh-pin__meldung {
	min-height: 22px;
	margin: 0 0 10px;
	color: #8C4A5C;
	font-weight: 700;
	font-size: 14px;
}

.cavh-pin__tasten {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
}

.cavh-app .cavh-pin__taste {
	min-height: 60px;
	border: 1.5px solid var(--cavh-card-border);
	border-radius: 18px;
	background: var(--cavh-hafer-2);
	color: var(--cavh-navy);
	font-family: var(--cavh-font-head);
	font-size: 26px;
	font-weight: 600;
	cursor: pointer;
	-webkit-user-select: none;
	user-select: none;
	touch-action: manipulation;
}

.cavh-app .cavh-pin__taste:active {
	background: var(--cavh-hafer-3);
	transform: scale(.97);
}

.cavh-app .cavh-pin__taste--loeschen {
	font-size: 22px;
}

/* =====================================================================
 * 8. Kleine Bildschirme
 * =================================================================== */

@media (max-width: 380px) {
	.cavh-leiste__name {
		font-size: 15px;
	}

	.cavh-app--fokus .cavh-rund--gross,
	.cavh-app--fokus .cavh-rund--gross:hover,
	.cavh-app--fokus .cavh-rund--gross:focus {
		width: 92px;
		height: 92px;
	}

	.cavh-app .cavh-steuerung {
		gap: 16px;
	}

	.cavh-app .cavh-app-kopf__titel {
		font-size: 26px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cavh-app *,
	.cavh-app *::before,
	.cavh-app *::after {
		animation: none !important;
		transition: none !important;
	}
}

/* =====================================================================
 * 9. Ausbaustufe 3: Start-Erklärung, Verfügbarkeit, Buch freischalten
 * =================================================================== */

.cavh-willkommen,
.cavh-verfuegbar,
.cavh-freischalten {
	max-width: 780px;
}

.cavh-willkommen__kopf {
	text-align: center;
}

.cavh-app .cavh-willkommen__titel {
	font-size: 38px;
}

.cavh-app .cavh-willkommen__h2 {
	font-size: 24px;
	margin-bottom: 14px;
}

/* --- „In 1 Minute erklärt“ --- */

.cavh-willkommen__audio {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 16px 18px;
	margin-bottom: 26px;
}

.cavh-willkommen__play {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
	border: 0;
	border-radius: 50%;
	background: var(--cavh-navy);
	color: var(--cavh-white);
	cursor: pointer;
	box-shadow: 0 12px 24px -14px rgba(42, 58, 82, 0.8);
}

.cavh-willkommen__play-pause,
.cavh-willkommen__audio.is-spielt .cavh-willkommen__play-an {
	display: none;
}

.cavh-willkommen__audio.is-spielt .cavh-willkommen__play-pause {
	display: block;
}

.cavh-willkommen__audio-text {
	min-width: 0;
	flex: 1;
}

.cavh-willkommen__audio-text strong {
	display: block;
	font-family: var(--cavh-font-head);
	font-size: 19px;
	color: var(--cavh-navy);
}

.cavh-willkommen__audio-text span {
	display: block;
	color: var(--cavh-ink-2);
	font-size: 14.5px;
	margin-bottom: 8px;
}

.cavh-willkommen__audio-text audio {
	width: 100%;
	height: 36px;
}

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

.cavh-willkommen__abschnitt {
	margin-bottom: 26px;
	text-align: center;
}

.cavh-willkommen__schritte {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}

@media (min-width: 700px) {
	.cavh-willkommen__schritte {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.cavh-willkommen__schritte li {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 14px 10px 16px;
	border-radius: var(--cavh-radius-md);
	background: var(--cavh-white);
	border: 1px solid var(--cavh-card-border);
	color: var(--cavh-navy);
	font-weight: 700;
	font-size: 15px;
	line-height: 1.3;
}

.cavh-willkommen__nr {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border: 2px solid var(--cavh-navy);
	border-radius: 50%;
	font-family: var(--cavh-font-head);
	font-size: 18px;
}

.cavh-willkommen__hinweis {
	margin: 14px auto 0;
	max-width: 560px;
	color: var(--cavh-ink-2);
}

/* --- Für Eltern --- */

.cavh-willkommen__eltern,
.cavh-fs-los {
	padding: 22px 20px;
	margin-bottom: 18px;
}

.cavh-willkommen__pille {
	display: inline-block;
	margin: 0 0 8px;
	padding: 3px 12px;
	border: 1.5px solid var(--cavh-navy);
	border-radius: var(--cavh-radius-pill);
	color: var(--cavh-navy);
	font-size: 12.5px;
	font-weight: 800;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.cavh-vorteile {
	list-style: none;
	margin: 18px 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
}

@media (min-width: 700px) {
	.cavh-vorteile {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.cavh-vorteile__punkt {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 4px;
	padding: 12px 8px;
	border-radius: var(--cavh-radius-md);
	background: var(--cavh-hafer-2);
}

.cavh-vorteile__icon {
	color: var(--cavh-navy);
}

.cavh-vorteile__punkt strong {
	color: var(--cavh-navy);
	font-size: 14.5px;
	line-height: 1.25;
}

.cavh-vorteile__punkt small {
	color: var(--cavh-meta);
	font-size: 12.5px;
	line-height: 1.3;
}

.cavh-willkommen__tipp {
	padding: 12px 14px;
	border-radius: var(--cavh-radius-md);
	background: var(--cavh-tint-honey);
}

.cavh-willkommen__knoepfe {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.cavh-garantie {
	margin: 18px 0 0;
	color: var(--cavh-meta);
	font-size: 13.5px;
	text-align: center;
}

/* --- Verfügbarkeit --- */

.cavh-verfuegbar__status {
	margin: 0 0 18px;
	padding: 24px 26px;
	border-radius: var(--cavh-radius-band);
	border: 2px solid var(--cavh-teal);
	background: var(--cavh-tint-teal);
}

.cavh-verfuegbar__status.is-eingestellt {
	border-color: var(--cavh-berry);
	background: var(--cavh-tint-berry);
}

.cavh-verfuegbar__status p {
	margin: 0;
}

.cavh-verfuegbar__label {
	font-size: 13px;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--cavh-ink-2);
}

.cavh-verfuegbar__wert {
	margin: 4px 0 !important;
	font-family: var(--cavh-font-head);
	font-size: 32px;
	font-weight: 600;
	color: var(--cavh-navy);
}

.cavh-verfuegbar__datum {
	font-size: 16px;
	color: var(--cavh-ink-2);
}

/* --- Buch freischalten --- */

.cavh-fs-schritte {
	list-style: none;
	margin: 0 0 16px;
	padding: 0;
	display: grid;
	gap: 12px;
}

.cavh-fs-schritt {
	display: flex;
	gap: 14px;
	padding: 18px 16px;
}

.cavh-fs-schritt__nr {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--cavh-navy);
	color: var(--cavh-white);
	font-family: var(--cavh-font-head);
	font-size: 19px;
}

.cavh-fs-schritt.is-erledigt .cavh-fs-schritt__nr {
	background: var(--cavh-teal);
}

.cavh-fs-schritt__inhalt {
	min-width: 0;
	flex: 1;
}

.cavh-app .cavh-fs-schritt__inhalt h2 {
	font-size: 20px;
	margin-bottom: 4px;
}

.cavh-fs-schritt__inhalt p {
	margin: 0 0 8px;
}

.cavh-fs-schritt__klein {
	color: var(--cavh-meta);
	font-size: 13.5px;
}

.cavh-fs-buch {
	display: flex;
	align-items: center;
	gap: 12px;
}

.cavh-fs-buch img {
	width: 64px;
	height: 64px;
	object-fit: cover;
	border-radius: 10px;
	background: var(--cavh-cover-bg);
}

.cavh-fs-buch span {
	color: var(--cavh-meta);
	font-size: 14px;
}

.cavh-ist-app .cavh-fs-anleitung {
	display: none;
}

/* --- Geschwistermodus --- */

.cavh-profilwahl {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0 0 16px;
}

.cavh-profilwahl__frage {
	color: var(--cavh-ink-2);
	font-weight: 700;
	font-size: 14.5px;
	margin-right: 4px;
}

.cavh-app a.cavh-profilwahl__kind {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 44px;
	padding: 6px 14px 6px 8px;
	border-radius: var(--cavh-radius-pill);
	border: 1.5px solid var(--cavh-card-border);
	background: var(--cavh-white);
	color: var(--cavh-navy);
	font-weight: 800;
	text-decoration: none;
}

.cavh-app a.cavh-profilwahl__kind.is-aktiv {
	background: var(--cavh-navy);
	border-color: var(--cavh-navy);
	color: var(--cavh-white);
}

.cavh-profilwahl__emoji {
	font-size: 22px;
	line-height: 1;
}

.cavh-profilwahl--kinder {
	justify-content: center;
}

.cavh-profilwahl--kinder .cavh-profilwahl__frage {
	width: 100%;
	text-align: center;
	font-family: var(--cavh-font-head);
	font-size: 19px;
	color: var(--cavh-navy);
}

.cavh-profilwahl--kinder a.cavh-profilwahl__kind {
	min-height: 56px;
	font-size: 18px;
	padding: 8px 18px 8px 10px;
}

.cavh-profilwahl--kinder .cavh-profilwahl__emoji {
	font-size: 30px;
}

.cavh-profil-zeile {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-bottom: 10px;
}

.cavh-profil-zeile__emoji select {
	min-height: 48px;
	padding: 6px 8px;
	border: 1.5px solid var(--cavh-card-border);
	border-radius: var(--cavh-radius-sm);
	background: var(--cavh-white);
	font-size: 22px;
}

.cavh-profil-zeile__name {
	flex: 1 1 180px;
	margin: 0 !important;
}

.cavh-profil-zeile__loeschen {
	color: var(--cavh-meta);
	font-size: 14px;
}

.cavh-app .cavh-willkommen__knoepfe a.cavh-btn-ghost {
	border-color: rgba(42, 58, 82, 0.22);
	background: var(--cavh-hafer-2);
}

/* --- Vorführung „App installieren“ (Nachbau Faktolino, 10-s-Schleife) --- */

.cavh-vf {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: 6px 0 22px;
}

.cavh-vf-wahl {
	display: inline-flex;
	gap: 6px;
	padding: 5px;
	margin-bottom: 16px;
	border-radius: var(--cavh-radius-pill);
	background: var(--cavh-hafer-3);
}

.cavh-vf-wahl button {
	appearance: none;
	border: 0;
	background: transparent;
	padding: 9px 18px;
	border-radius: var(--cavh-radius-pill);
	font-family: var(--cavh-font-body);
	font-weight: 800;
	font-size: 14px;
	color: var(--cavh-ink-2);
	cursor: pointer;
}

.cavh-vf-wahl button.is-aktiv {
	background: var(--cavh-white);
	color: var(--cavh-navy);
	box-shadow: 0 2px 8px rgba(42, 58, 82, 0.1);
}

.cavh-vf-szene {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
}

.cavh-vf-szene[hidden] {
	display: none !important;
}

.cavh-vf-handy {
	width: 232px;
	height: 466px;
	padding: 7px;
	border: 3px solid var(--cavh-navy);
	border-radius: 34px;
	background: var(--cavh-white);
}

.cavh-vf-bild {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
	border-radius: 26px;
	background: var(--cavh-white);
	font-family: var(--cavh-font-body);
	font-size: 12px;
	color: var(--cavh-ink);
}

.cavh-vf-schritt {
	position: absolute;
	inset: 0;
	opacity: 0;
}

.cavh-vf-s1 { animation: cavh-vf-s1 10s infinite; }
.cavh-vf-s2 { animation: cavh-vf-s2 10s infinite; }
.cavh-vf-s3 { animation: cavh-vf-s3 10s infinite; }
.cavh-vf-s4 { animation: cavh-vf-s4 10s infinite; }

@keyframes cavh-vf-s1 { 0%, 1% { opacity: 0; } 4%, 22% { opacity: 1; } 25%, 100% { opacity: 0; } }
@keyframes cavh-vf-s2 { 0%, 25% { opacity: 0; } 28%, 47% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes cavh-vf-s3 { 0%, 50% { opacity: 0; } 53%, 72% { opacity: 1; } 75%, 100% { opacity: 0; } }
@keyframes cavh-vf-s4 { 0%, 75% { opacity: 0; } 78%, 97% { opacity: 1; } 100% { opacity: 0; } }
@keyframes cavh-vf-puls { 0% { transform: scale(.75); opacity: .9; } 70% { transform: scale(1.5); opacity: 0; } 100% { opacity: 0; } }
@keyframes cavh-vf-plopp { 0%, 75% { transform: scale(0); opacity: 0; } 82% { transform: scale(1.18); opacity: 1; } 88%, 100% { transform: scale(1); opacity: 1; } }
@keyframes cavh-vf-d1 { 0%, 22% { opacity: 1; } 25%, 100% { opacity: .22; } }
@keyframes cavh-vf-d2 { 0%, 25% { opacity: .22; } 28%, 47% { opacity: 1; } 50%, 100% { opacity: .22; } }
@keyframes cavh-vf-d3 { 0%, 50% { opacity: .22; } 53%, 72% { opacity: 1; } 75%, 100% { opacity: .22; } }
@keyframes cavh-vf-d4 { 0%, 75% { opacity: .22; } 78%, 100% { opacity: 1; } }

.cavh-vf-spalte {
	display: flex;
	flex-direction: column;
}

.cavh-vf-voll {
	position: absolute;
	inset: 0;
}

.cavh-vf-weiss {
	background: var(--cavh-white);
}

.cavh-vf-kopf {
	padding: 13px 12px 10px;
	background: var(--cavh-navy);
	color: var(--cavh-white);
	font-weight: 800;
}

.cavh-vf-kacheln {
	flex: 1;
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-auto-rows: 62px;
	gap: 9px;
	padding: 11px;
}

.cavh-vf-kacheln i {
	border-radius: 8px;
	background: var(--cavh-tint-honey);
}

.cavh-vf-safari,
.cavh-vf-chrome {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 11px 12px;
	background: var(--cavh-hafer-2);
	color: var(--cavh-meta);
}

.cavh-vf-safari {
	border-top: 1px solid var(--cavh-card-border);
	font-size: 18px;
}

.cavh-vf-chrome {
	border-bottom: 1px solid var(--cavh-card-border);
}

.cavh-vf-safari em,
.cavh-vf-chrome em {
	flex: 1;
	font-style: normal;
	font-size: 11px;
	text-align: center;
}

.cavh-vf-chrome em {
	text-align: left;
}

.cavh-vf-ziel {
	position: relative;
	display: inline-flex;
	align-items: center;
	color: var(--cavh-honey-dark);
}

.cavh-vf-ring {
	position: absolute;
	inset: -7px;
	border: 2.5px solid var(--cavh-honey);
	border-radius: 50%;
	animation: cavh-vf-puls 1.5s infinite;
	pointer-events: none;
}

.cavh-vf-menue {
	font-size: 20px;
	line-height: 1;
}

.cavh-vf-dunkel {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, .42);
}

.cavh-vf-blatt {
	position: absolute;
	left: 7px;
	right: 7px;
	bottom: 7px;
	padding: 12px;
	border-radius: 16px;
	background: var(--cavh-white);
}

.cavh-vf-blatt__icons {
	display: flex;
	gap: 12px;
	padding: 4px 4px 12px;
	border-bottom: 1px solid var(--cavh-card-border);
}

.cavh-vf-blatt__icons i {
	width: 34px;
	height: 34px;
	border-radius: 9px;
	background: var(--cavh-hafer-3);
}

.cavh-vf-zeile {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 10px;
	font-size: 13px;
}

.cavh-vf-zeile.is-hervor,
.cavh-vf-popup .is-hervor {
	margin-top: 7px;
	border-radius: 10px;
	background: var(--cavh-tint-honey);
	font-weight: 800;
}

.cavh-vf .is-blass {
	opacity: .45;
}

.cavh-vf-dialog {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 13px;
	border-bottom: 1px solid var(--cavh-card-border);
	font-size: 11.5px;
}

.cavh-vf-dialog > span:first-child {
	color: var(--cavh-meta);
}

.cavh-vf-link {
	font-weight: 800;
}

.cavh-vf-link .cavh-vf-ring {
	inset: -7px -5px;
	border-radius: 999px;
}

.cavh-vf-app {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 18px 16px;
}

.cavh-vf-blatt .cavh-vf-app {
	padding: 4px 4px 15px;
}

.cavh-vf-app img {
	width: 48px;
	height: 48px;
	flex: none;
	border-radius: 12px;
}

.cavh-vf-app b,
.cavh-vf-app small {
	display: block;
}

.cavh-vf-app b {
	font-size: 13px;
}

.cavh-vf-app small {
	font-size: 11px;
	color: var(--cavh-meta);
}

.cavh-vf-popup {
	position: absolute;
	top: 7px;
	right: 7px;
	width: 176px;
	padding: 5px 0;
	border: 1px solid var(--cavh-card-border);
	border-radius: 12px;
	background: var(--cavh-white);
	box-shadow: 0 10px 30px -8px rgba(0, 0, 0, .25);
}

.cavh-vf-popup div {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 9px 13px;
}

.cavh-vf-popup .is-hervor {
	margin: 0;
	border-radius: 0;
	padding: 11px 13px;
}

.cavh-vf-popup .cavh-vf-ziel {
	font-size: 16px;
}

.cavh-vf-knoepfe {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 12px;
	color: var(--cavh-meta);
	font-weight: 700;
}

.cavh-vf-pille {
	padding: 8px 18px;
	border-radius: 999px;
	background: var(--cavh-honey);
	color: #3a2c07;
	font-weight: 800;
}

.cavh-vf-pille .cavh-vf-ring {
	inset: -6px;
	border-radius: 999px;
}

.cavh-vf-home {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	align-content: start;
	gap: 15px 11px;
	padding: 18px 15px;
	background: var(--cavh-hafer);
}

.cavh-vf-home > i {
	aspect-ratio: 1;
	border-radius: 13px;
	background: var(--cavh-white);
	border: 1px solid var(--cavh-card-border);
}

.cavh-vf-appicon {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	animation: cavh-vf-plopp 10s infinite;
}

.cavh-vf-appicon img {
	width: 100%;
	aspect-ratio: 1;
	border-radius: 13px;
}

.cavh-vf-appicon b {
	font-size: 11px;
	color: var(--cavh-ink-2);
}

.cavh-vf-text {
	position: relative;
	width: 240px;
	height: 40px;
}

.cavh-vf-text span {
	position: absolute;
	inset: 0 0 auto;
	opacity: 0;
	text-align: center;
	font-weight: 800;
	font-size: 14.5px;
	color: var(--cavh-navy);
}

.cavh-vf-punkte {
	display: flex;
	gap: 8px;
}

.cavh-vf-punkte i {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--cavh-honey-dark);
}

.cavh-vf-d1 { animation: cavh-vf-d1 10s infinite; }
.cavh-vf-d2 { animation: cavh-vf-d2 10s infinite; }
.cavh-vf-d3 { animation: cavh-vf-d3 10s infinite; }
.cavh-vf-d4 { animation: cavh-vf-d4 10s infinite; }

.cavh-ist-app .cavh-vf {
	display: none;
}

/* Ohne Bewegung (Systemeinstellung): Vorführung aus, die Text-Schritte darunter bleiben. */
@media (prefers-reduced-motion: reduce) {
	.cavh-vf {
		display: none;
	}
}

/* Feinschliff Vorführung (Test 2026-10-15) */
.cavh-vf-home {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.cavh-vf-appicon {
	align-items: stretch;
	text-align: center;
	min-width: 0;
}

.cavh-vf-appicon img {
	display: block;
}

.cavh-vf-dialog {
	gap: 6px;
	padding: 13px 10px;
	font-size: 10.5px;
}

.cavh-vf-dialog b {
	flex: 1;
	min-width: 0;
	text-align: center;
	line-height: 1.2;
}

.cavh-vf-dialog > span {
	white-space: nowrap;
}

.cavh-vf-safari em,
.cavh-vf-chrome em {
	min-width: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.cavh-vf-knoepfe > span {
	white-space: nowrap;
}

.cavh-vf-app > div {
	min-width: 0;
}

.cavh-vf-appicon img {
	border: 1px solid var(--cavh-card-border);
	box-shadow: 0 4px 10px -4px rgba(42, 58, 82, 0.35);
	background: var(--cavh-hafer);
}

.cavh-vf-appicon b {
	font-size: 10px;
	white-space: nowrap;
}

.cavh-vf-knoepfe {
	gap: 8px;
	font-size: 11px;
}

.cavh-vf-pille {
	padding: 8px 14px;
}

/* --- Malseiten zum Ausdrucken (Player) --- */

.cavh-malseiten {
	padding: 20px 18px;
	margin: 18px 0;
}

.cavh-app .cavh-malseiten h2 {
	font-size: 22px;
	margin-bottom: 6px;
}

.cavh-malseiten__liste {
	list-style: none;
	margin: 12px 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.cavh-seiten .cavh-pdf-knopf {
	margin-top: 14px;
}

/* =====================================================================
 * 10. Player-Seite v3 (2026-10-15, User: „lieblos“ → Gestaltung wie die CAV-Startseite:
 *     Creme, Navy-Überschriften mit Honig-Schwung, Malblatt wie Papier auf dem Tisch,
 *     zarte Pastellflächen, gekippte Blätter). Nur .cavh-player2 – Kindermodus unberührt.
 * =================================================================== */

.cavh-app .cavh-player2 {
	max-width: 1120px;
}

.cavh-player2 .cavh-buehne {
	display: block;
}

/* --- Karte --- */

.cavh-app .cavh-player2 .cavh-spieler--gross {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 20px;
	padding: 14px 14px 20px;
	border-radius: 28px;
	background: var(--cavh-white);
	background-image: none;
	border: 1px solid var(--cavh-card-border);
	box-shadow: 0 24px 50px -36px rgba(42, 58, 82, 0.45);
}

@media (min-width: 800px) {
	.cavh-app .cavh-player2 .cavh-spieler--gross {
		grid-template-columns: minmax(0, 11fr) minmax(0, 12fr);
		gap: 36px;
		padding: 18px 36px 18px 18px;
		align-items: center;
	}
}

/* --- Malblatt wie Papier auf einem farbigen Tisch --- */

.cavh-held {
	position: relative;
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 34px 28px 30px;
	border-radius: 22px;
	background: var(--cavh-tint-honey);
	overflow: hidden;
}

.cavh-held::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: radial-gradient(rgba(176, 125, 30, 0.16) 1.2px, transparent 1.3px);
	background-size: 18px 18px;
	pointer-events: none;
}

.cavh-held__blatt {
	position: relative;
	display: block;
	width: min(100%, 360px);
	aspect-ratio: 900 / 1273;
	background: var(--cavh-white);
	border-radius: 6px;
	box-shadow: 0 2px 3px rgba(42, 58, 82, 0.10), 0 18px 34px -16px rgba(42, 58, 82, 0.45);
	transform: rotate(-1.6deg);
	transition: transform .4s var(--cavh-ease);
}

.cavh-held__blatt--hinten {
	position: absolute;
	width: min(calc(100% - 56px), 360px);
	transform: rotate(3.2deg) translate(10px, 4px);
	background: #FFFDF7;
	box-shadow: 0 10px 24px -14px rgba(42, 58, 82, 0.35);
}

.cavh-held__bild {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	border-radius: 6px;
}

.cavh-held__seite {
	position: absolute;
	left: 16px;
	top: 14px;
	z-index: 2;
	padding: 5px 12px;
	border-radius: var(--cavh-radius-pill);
	background: var(--cavh-white);
	color: var(--cavh-navy);
	font-size: 13px;
	font-weight: 800;
	box-shadow: 0 6px 14px -8px rgba(42, 58, 82, 0.5);
}

.cavh-held__stift {
	position: absolute;
	right: 14px;
	bottom: 16px;
	z-index: 2;
	width: 96px;
	height: auto;
	transform: rotate(-28deg);
	filter: drop-shadow(0 4px 4px rgba(42, 58, 82, 0.25));
}

@media (max-width: 799px) {
	.cavh-held {
		padding: 30px 18px 26px;
	}

	.cavh-held__blatt {
		width: min(78%, 330px);
	}

	.cavh-held__blatt--hinten {
		width: min(calc(78% - 10px), 320px);
	}

	.cavh-held__stift {
		width: 70px;
		right: 8px;
		bottom: 12px;
	}
}

/* --- Rechte Seite: Titel, Steuerung --- */

.cavh-spieler__steuer {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 0 6px;
}

.cavh-player2 .cavh-spieler--gross .cavh-spieler__kopf {
	display: block;
	padding: 0;
	margin: 0;
	background: none;
	border: 0;
}

.cavh-player2 .cavh-spieler--gross .cavh-spieler__bild,
.cavh-player2 .cavh-spieler--gross .cavh-welle {
	display: none;
}

.cavh-app .cavh-player2 .cavh-spieler__jetzt-label {
	display: block;
	margin-bottom: 6px;
	color: var(--cavh-honey-dark);
	font-size: 12.5px;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.cavh-app .cavh-player2 .cavh-spieler__jetzt-titel {
	display: inline;
	font-family: var(--cavh-font-head);
	font-size: clamp(30px, 4.2vw, 44px);
	font-weight: 600;
	line-height: 1.08;
	color: var(--cavh-navy);
	padding-bottom: 6px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M3 8c40-6 90-7 194-3' fill='none' stroke='%23D9A441' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 100% 12px;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

.cavh-app .cavh-player2 .cavh-steuerung {
	justify-content: flex-start;
	gap: 16px;
	margin: 6px 0 0;
}

.cavh-app .cavh-player2 .cavh-rund--sprung {
	background: var(--cavh-hafer-2);
	border: 0;
	box-shadow: none;
}

.cavh-app .cavh-player2 .cavh-rund--gross {
	box-shadow: 0 0 0 6px var(--cavh-tint-honey), 0 16px 28px -16px rgba(42, 58, 82, 0.8);
}

.cavh-app .cavh-player2 .cavh-rund--gross.is-playing {
	box-shadow: 0 0 0 6px var(--cavh-honey), 0 16px 28px -16px rgba(42, 58, 82, 0.8);
}

.cavh-app .cavh-player2 .cavh-fortschritt {
	margin: 0;
}

.cavh-app .cavh-player2 .cavh-spieler__tipp {
	margin: -8px 0 0;
	padding: 0;
	background: none;
	border: 0;
	color: var(--cavh-meta);
	font-size: 14px;
	font-weight: 600;
	text-align: left;
}

/* --- Seiten als kleine Blätter --- */

.cavh-app .cavh-player2 .cavh-seiten {
	margin: 0;
	padding: 0;
	border: 0;
}

.cavh-app .cavh-player2 .cavh-seiten__titel {
	font-family: var(--cavh-font-head);
	font-size: 18px;
	font-weight: 600;
	color: var(--cavh-navy);
	margin: 0 0 4px;
}

.cavh-player2 .cavh-seiten__icon {
	color: var(--cavh-honey-dark);
}

.cavh-app .cavh-player2 .cavh-kapitel {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 12px;
	margin: 0;
	padding: 12px 2px 4px;
	overflow: visible;
}

.cavh-app .cavh-player2 .cavh-kapitel__btn,
.cavh-app .cavh-player2 .cavh-kapitel__btn:hover,
.cavh-app .cavh-player2 .cavh-kapitel__btn:focus {
	width: auto;
	min-width: 0;
	padding: 5px 5px 7px;
	gap: 5px;
	border: 2px solid transparent;
	border-radius: 10px;
	background: var(--cavh-white);
	color: var(--cavh-navy);
	font-size: 13px;
	box-shadow: 0 2px 3px rgba(42, 58, 82, 0.08), 0 10px 18px -14px rgba(42, 58, 82, 0.6);
}

.cavh-app .cavh-player2 .cavh-kapitel__btn:nth-child(odd) { transform: rotate(-1.5deg); }
.cavh-app .cavh-player2 .cavh-kapitel__btn:nth-child(even) { transform: rotate(1.5deg); }

.cavh-app .cavh-player2 .cavh-kapitel__btn:hover {
	transform: translateY(-3px) rotate(0deg);
}

.cavh-app .cavh-player2 .cavh-kapitel__bild {
	aspect-ratio: 900 / 1273;
	object-fit: cover;
	border-radius: 4px;
	background: var(--cavh-white);
}

.cavh-app .cavh-player2 .cavh-kapitel__btn.is-aktiv,
.cavh-app .cavh-player2 .cavh-kapitel__btn.is-aktiv:hover,
.cavh-app .cavh-player2 .cavh-kapitel__btn.is-aktiv:focus {
	border-color: var(--cavh-navy);
	color: var(--cavh-navy);
	box-shadow: 0 0 0 4px var(--cavh-tint-honey), 0 14px 24px -14px rgba(42, 58, 82, 0.7);
	transform: translateY(-4px) rotate(0deg);
}

.cavh-app .cavh-player2 .cavh-kapitel__btn.is-aktiv::before {
	background: var(--cavh-honey);
	color: #3a2c07;
}

.cavh-app .cavh-player2 .cavh-kapitel__btn.is-gehoert::after {
	background: var(--cavh-navy);
}

/* --- Werkzeuge: ruhige Pillengruppe --- */

.cavh-app .cavh-player2 .cavh-spieler__fuss {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-start;
	gap: 8px;
	margin: 4px 0 0;
	padding: 0;
	border: 0;
}

.cavh-app .cavh-player2 .cavh-spieler__fuss > * {
	flex: none;
	width: auto;
}

.cavh-app .cavh-player2 .cavh-tempo__label {
	display: none;
}

.cavh-app .cavh-player2 .cavh-tempo__segment {
	padding: 3px;
	background: var(--cavh-hafer-2);
	border: 1px solid var(--cavh-card-border);
}

.cavh-app .cavh-player2 .cavh-tempo__btn {
	min-height: 32px;
	padding: 4px 12px;
	font-size: 13px;
}

.cavh-app .cavh-player2 .cavh-spieler__fuss .cavh-offline-knopf,
.cavh-app .cavh-player2 a.cavh-werkzeug {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	min-height: 40px;
	padding: 6px 14px;
	border: 1px solid var(--cavh-card-border);
	border-radius: var(--cavh-radius-pill);
	background: var(--cavh-white);
	color: var(--cavh-navy);
	font-size: 14px;
	font-weight: 800;
	text-decoration: none;
	box-shadow: none;
}

.cavh-app .cavh-player2 .cavh-spieler__fuss .cavh-offline-knopf::before {
	width: 15px;
	height: 15px;
}

.cavh-app .cavh-player2 .cavh-spieler__fuss .cavh-offline-knopf[hidden],
.cavh-app .cavh-player2 a.cavh-werkzeug[hidden] {
	display: none;
}

.cavh-app .cavh-player2 a.cavh-werkzeug:hover,
.cavh-app .cavh-player2 .cavh-spieler__fuss .cavh-offline-knopf:hover {
	border-color: rgba(42, 58, 82, 0.35);
	background: var(--cavh-hafer-2);
}

.cavh-app .cavh-player2 .cavh-spieler__fuss .cavh-offline-knopf.is-offline {
	color: var(--cavh-teal);
}

/* --- Geschichtenliste --- */

.cavh-app .cavh-player2 .cavh-liste {
	margin-top: 44px;
}

.cavh-app .cavh-player2 .cavh-liste__kopf {
	align-items: flex-end;
	margin-bottom: 18px;
}

.cavh-app .cavh-player2 .cavh-liste__titel {
	font-family: var(--cavh-font-head);
	font-size: clamp(24px, 3vw, 32px);
	font-weight: 600;
	margin: 0;
}

.cavh-app .cavh-player2 .cavh-liste__titel::before {
	content: "Die Geschichten im Buch";
	display: block;
	margin-bottom: 4px;
	color: var(--cavh-honey-dark);
	font-family: var(--cavh-font-body);
	font-size: 12.5px;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.cavh-app .cavh-player2 .cavh-liste__kopf .cavh-offline-knopf {
	padding: 6px 14px;
	min-height: 40px;
	border: 1px solid var(--cavh-card-border);
	background: var(--cavh-white);
	color: var(--cavh-navy);
	font-size: 14px;
}

.cavh-app .cavh-player2 .cavh-maerchen {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
}

@media (min-width: 600px) {
	.cavh-app .cavh-player2 .cavh-maerchen {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 18px;
	}
}

@media (min-width: 960px) {
	.cavh-app .cavh-player2 .cavh-maerchen {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 22px;
	}
}

.cavh-app .cavh-player2 .cavh-karte {
	padding: 0;
	border-radius: 20px;
	border: 1px solid var(--cavh-card-border);
	background: var(--cavh-white);
	box-shadow: 0 18px 34px -30px rgba(42, 58, 82, 0.6);
	overflow: hidden;
	transition: transform .2s var(--cavh-ease), box-shadow .2s ease;
}

.cavh-app .cavh-player2 .cavh-karte:hover {
	transform: translateY(-3px);
	box-shadow: 0 22px 36px -26px rgba(42, 58, 82, 0.6);
}

.cavh-app .cavh-player2 .cavh-karte.is-aktiv {
	border: 2px solid var(--cavh-navy);
	box-shadow: 0 0 0 4px var(--cavh-tint-honey), 0 22px 36px -26px rgba(42, 58, 82, 0.6);
}

/* Pastell-Tisch hinter jedem Titelblatt (wiederholt sich alle 5) */
.cavh-app .cavh-player2 .cavh-karte__bild {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1 / 1;
	padding: 14px 20px 0;
	border-radius: 0;
	background: var(--cavh-tint-honey);
	overflow: hidden;
}

.cavh-player2 .cavh-maerchen__item:nth-child(5n+2) .cavh-karte__bild { background: var(--cavh-tint-teal); }
.cavh-player2 .cavh-maerchen__item:nth-child(5n+3) .cavh-karte__bild { background: var(--cavh-tint-berry); }
.cavh-player2 .cavh-maerchen__item:nth-child(5n+4) .cavh-karte__bild { background: var(--cavh-tint-navy); }
.cavh-player2 .cavh-maerchen__item:nth-child(5n+5) .cavh-karte__bild { background: var(--cavh-tint-green); }

.cavh-app .cavh-player2 .cavh-karte__img {
	width: 82%;
	height: auto;
	aspect-ratio: 900 / 1273;
	align-self: flex-start;
	object-fit: cover;
	object-position: top;
	border-radius: 4px 4px 0 0;
	background: var(--cavh-white);
	box-shadow: 0 10px 20px -12px rgba(42, 58, 82, 0.5);
	transform: rotate(-2deg) translateY(4px);
	transition: transform .3s var(--cavh-ease);
}

.cavh-player2 .cavh-maerchen__item:nth-child(even) .cavh-karte__img {
	transform: rotate(2deg) translateY(4px);
}

.cavh-app .cavh-player2 .cavh-karte:hover .cavh-karte__img {
	transform: rotate(0deg) translateY(0);
}

.cavh-app .cavh-player2 .cavh-karte__nr {
	top: 10px;
	left: 10px;
	width: 28px;
	height: 28px;
	font-size: 13px;
	box-shadow: 0 4px 10px -6px rgba(42, 58, 82, 0.6);
}

.cavh-app .cavh-player2 .cavh-karte__status {
	display: none;
}

.cavh-app .cavh-player2 .cavh-karte.is-fertig .cavh-karte__status {
	display: flex;
	top: 10px;
	right: 10px;
	background: var(--cavh-navy);
	color: var(--cavh-white);
}

.cavh-app .cavh-player2 .cavh-karte__jetzt {
	top: 10px;
	right: 10px;
	left: auto;
	background: var(--cavh-navy);
	color: var(--cavh-white);
}

.cavh-app .cavh-player2 .cavh-karte__kopf {
	padding: 12px 14px 4px;
}

.cavh-app .cavh-player2 .cavh-karte__titel {
	font-family: var(--cavh-font-head);
	font-size: 17px;
	font-weight: 600;
	line-height: 1.15;
}

.cavh-app .cavh-player2 .cavh-karte__meta {
	font-size: 13px;
}

.cavh-app .cavh-player2 .cavh-karte__balken {
	height: 5px;
	margin: 8px 14px 14px;
	background: var(--cavh-hafer-3);
}

.cavh-app .cavh-player2 .cavh-karte__fuellung,
.cavh-app .cavh-player2 .cavh-karte.is-fertig .cavh-karte__fuellung {
	background: var(--cavh-honey);
}

/* --- Claim-Hinweis --- */

.cavh-app .cavh-player2 .cavh-claim {
	margin-top: 36px;
	border-radius: 22px;
	background: var(--cavh-white);
	border: 1px solid var(--cavh-card-border);
	box-shadow: 0 18px 34px -30px rgba(42, 58, 82, 0.6);
}

.cavh-app .cavh-player2 .cavh-claim .cavh-btn-honey {
	background: var(--cavh-navy);
	color: var(--cavh-white) !important;
}

/* Feinschliff v3 (Test 2026-10-15, 320–390 px) */
.cavh-app .cavh-player2 .cavh-karte__jetzt {
	top: auto;
	bottom: 10px;
	left: 10px;
	right: auto;
}

.cavh-app .cavh-player2 .cavh-karte__titel {
	-webkit-hyphens: auto;
	hyphens: auto;
	overflow-wrap: break-word;
}

.cavh-app .cavh-player2 .cavh-kapitel__label {
	white-space: nowrap;
}

@media (max-width: 420px) {
	.cavh-app .cavh-player2 .cavh-kapitel {
		gap: 8px;
	}

	.cavh-app .cavh-player2 .cavh-kapitel__btn,
	.cavh-app .cavh-player2 .cavh-kapitel__btn:hover,
	.cavh-app .cavh-player2 .cavh-kapitel__btn:focus {
		font-size: 11.5px;
		padding: 4px 4px 6px;
	}

	.cavh-app .cavh-player2 .cavh-karte__titel {
		font-size: 15.5px;
	}

	.cavh-app .cavh-player2 .cavh-karte__kopf {
		padding: 10px 10px 2px;
	}

	.cavh-app .cavh-player2 .cavh-karte__balken {
		margin: 8px 10px 12px;
	}
}

@media (max-width: 360px) {
	.cavh-app .cavh-player2 .cavh-karte__titel {
		font-size: 14px;
	}
}