/**
 * LT Predigten Editor – Ergänzungen zur öffentlichen Darstellung.
 * Grundlage ist das Medium-Design des Veranstaltungs-Plugins (vm-frontend.css: Source Serif 4, Inter,
 * Schwarz/Grau, Lesespalte 680 px). Hier nur, was Predigten zusätzlich brauchen.
 */

.lpe-root,
.lpe-single {
	--lpe-soft: #f7f7f7;
	--lpe-radius: 8px;
}

.lpe-single svg[hidden],
.lpe-root svg[hidden] {
	display: none;
}

/* ================================================================== */
/* Einzelansicht                                                       */
/* ================================================================== */

.vm-root .lpe-part {
	color: var(--vm-text-2);
	font-weight: 400;
}

/* Sprunglinks unter der Autorenzeile */
.vm-root .lpe-jump {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.vm-root .lpe-jump__link,
.vm-root.vm-root .lpe-jump__link {
	display: inline-flex;
	align-items: center;
	padding: 6px 14px;
	border: 1px solid var(--vm-line-strong);
	border-radius: 999px;
	color: var(--vm-text);
	font-family: var(--vm-sans);
	font-size: 14px;
	line-height: 20px;
	text-decoration: none;
	transition: border-color var(--vm-ease);
}

.vm-root .lpe-jump__link:hover {
	border-color: var(--vm-text);
}

/* Video */
.vm-root .lpe-media {
	scroll-margin-top: 90px;
}

/* Blöcke untereinander: Anhören, Bibeltext, Nachlesen */
.vm-root .lpe-block {
	margin: 48px 0 0;
	scroll-margin-top: 90px;
}

.vm-root .lpe-block__title {
	margin: 0 0 16px;
	padding: 0 0 10px;
	border-bottom: 1px solid var(--vm-line);
	color: var(--vm-text);
	font-family: var(--vm-sans);
	font-size: 14px;
	font-weight: 600;
	line-height: 20px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.vm-root .lpe-block__sub {
	margin-left: 6px;
	color: var(--vm-text-2);
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
}

/* Audio-Player */
.vm-root .lpe-player {
	padding: 16px 18px;
	border-radius: var(--lpe-radius);
	background: var(--lpe-soft);
	font-family: var(--vm-sans);
}

.vm-root .lpe-player audio {
	width: 100%;
}

.vm-root .lpe-player.is-ready audio {
	display: none;
}

.vm-root .lpe-player__row {
	display: flex;
	align-items: center;
	gap: 14px;
}

.vm-root .lpe-player__play {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--vm-accent);
	color: var(--vm-accent-text);
	cursor: pointer;
	transition: transform var(--vm-ease), background-color var(--vm-ease);
}

.vm-root .lpe-player__play:hover {
	background: #000000;
}

.vm-root .lpe-player__play:active {
	transform: scale(0.96);
}

.vm-root .lpe-player__main {
	flex: 1;
	min-width: 0;
}

.vm-root .lpe-player__seek {
	width: 100%;
	margin: 0;
	accent-color: var(--vm-accent);
	cursor: pointer;
}

.vm-root .lpe-player__times {
	display: flex;
	justify-content: space-between;
	margin-top: 2px;
	color: var(--vm-text-2);
	font-size: 13px;
	font-variant-numeric: tabular-nums;
}

.vm-root .lpe-player__tools {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 12px;
}

.vm-root .lpe-player__tool {
	min-height: 34px;
	margin: 0;
	padding: 6px 12px;
	border: 1px solid var(--vm-line-strong);
	border-radius: 999px;
	background: #ffffff;
	color: var(--vm-text);
	font-family: var(--vm-sans);
	font-size: 13px;
	line-height: 1.2;
	cursor: pointer;
}

.vm-root .lpe-player__tool:hover {
	border-color: var(--vm-text);
}

.vm-root .lpe-player__resume {
	margin: 10px 0 0;
	color: var(--vm-text-2);
	font-size: 13px;
}

.vm-root .lpe-player__resume button {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: var(--vm-text);
	font: inherit;
	text-decoration: underline;
	cursor: pointer;
}

.vm-root .lpe-audio__links {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 18px;
	margin: 12px 0 0;
	font-family: var(--vm-sans);
	font-size: 14px;
	line-height: 20px;
}

.vm-root .lpe-audio__links a,
.vm-root.vm-root .lpe-audio__links a {
	color: var(--vm-text-2);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.vm-root .lpe-audio__links a:hover {
	color: var(--vm-text);
}

/* Bibeltext */
.vm-root .lpe-bibel__text {
	margin: 0;
	padding: 0 0 0 20px;
	border-left: 3px solid var(--vm-text);
	color: var(--vm-text);
	font-family: var(--vm-serif);
	font-size: var(--vm-body-size);
	font-style: italic;
	line-height: var(--vm-body-lh);
}

.vm-root .lpe-bibel__text p {
	margin: 0 0 0.8em;
}

.vm-root .lpe-bibel__text p:last-child {
	margin-bottom: 0;
}

/* Inhaltsverzeichnis */
.vm-root .lpe-toc {
	margin: 0 0 32px;
	font-family: var(--vm-sans);
	font-size: 15px;
	line-height: 1.5;
}

.vm-root .lpe-toc ol {
	margin: 0;
	padding-left: 22px;
	color: var(--vm-text-2);
}

.vm-root .lpe-toc--plain ol {
	padding-left: 0;
	list-style: none;
}

.vm-root .lpe-toc li {
	margin: 4px 0;
}

.vm-root .lpe-toc a,
.vm-root.vm-root .lpe-toc a {
	color: var(--vm-text);
	text-decoration: none;
}

.vm-root .lpe-toc a:hover {
	text-decoration: underline;
}

.vm-root .lpe-read .vm-content h2 {
	scroll-margin-top: 90px;
}

.vm-root .lpe-read__empty {
	margin: 0;
	color: var(--vm-text-2);
	font-family: var(--vm-serif);
	font-size: var(--vm-body-size);
	font-style: italic;
}

/* Serie: vorige / nächste */
.vm-root .lpe-series {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	margin: 40px 0 0;
}

.vm-root .lpe-series__link,
.vm-root.vm-root .lpe-series__link {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 16px 18px;
	border: 1px solid var(--vm-line-strong);
	border-radius: var(--lpe-radius);
	color: var(--vm-text);
	text-decoration: none;
	transition: border-color var(--vm-ease);
}

.vm-root .lpe-series__link:hover {
	border-color: var(--vm-text);
}

.vm-root .lpe-series__link--next {
	grid-column: 2;
	text-align: right;
}

.vm-root .lpe-series__dir {
	color: var(--vm-text-2);
	font-family: var(--vm-sans);
	font-size: 13px;
}

.vm-root .lpe-series__title {
	font-family: var(--vm-sans);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.35;
}

@media (max-width: 600px) {
	.vm-root .lpe-series {
		grid-template-columns: 1fr;
	}

	.vm-root .lpe-series__link--next {
		grid-column: auto;
	}

	.vm-root .lpe-live {
		font-size: 13px;
	}
}

/* ================================================================== */
/* Übersicht [lpe_predigtliste] und Karten                             */
/* ================================================================== */

.lpe-root {
	color: #242424;
	font-family: var(--vm-sans-global, "VM Inter", Inter, system-ui, sans-serif);
}

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

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

.lpe-root .lpe-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 40px;
	padding: 8px 20px;
	border: 1px solid #191919;
	border-radius: 999px;
	background: #ffffff;
	color: #191919;
	font: 500 14px/1.2 var(--vm-sans-global, "VM Inter", Inter, system-ui, sans-serif);
	text-decoration: none;
	cursor: pointer;
}

.lpe-root .lpe-btn:hover {
	background: #191919;
	color: #ffffff;
}

.lpe-root .lpe-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 12px;
	border-radius: 999px;
	background: #f2f2f2;
	color: #242424;
	font-size: 14px;
	line-height: 1.3;
	text-decoration: none;
}

.lpe-root .lpe-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 40px 28px;
}

.lpe-root .lpe-card {
	margin: 0;
}

.lpe-root .lpe-card__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	color: inherit;
	text-decoration: none;
}

.lpe-root .lpe-card__media {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: 4px;
	background: #f2f2f2;
}

.lpe-root .lpe-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.lpe-root .lpe-card__stelle {
	position: absolute;
	right: 8px;
	bottom: 8px;
	padding: 3px 9px;
	border-radius: 999px;
	background: rgba(25, 25, 25, 0.8);
	color: #ffffff;
	font-size: 12px;
	font-weight: 500;
	line-height: 1.3;
}

.lpe-root .lpe-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding-top: 14px;
}

.lpe-root .lpe-card__kicker {
	margin: 0 0 8px;
	color: #242424;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.lpe-root .lpe-card__title {
	margin: 0;
	color: #242424;
	font-family: var(--vm-font-heading, var(--vm-sans-global, "VM Inter", Inter, system-ui, sans-serif));
	font-size: 20px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -0.01em;
}

.lpe-root .lpe-card__link:hover .lpe-card__title {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.lpe-root .lpe-card__text {
	display: -webkit-box;
	margin: 6px 0 0;
	overflow: hidden;
	color: #6b6b6b;
	font-family: "VM Source Serif", "Source Serif 4", Georgia, serif;
	font-size: 16px;
	line-height: 1.5;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
}

.lpe-root .lpe-card__meta {
	margin: 10px 0 0;
	color: #6b6b6b;
	font-size: 13px;
	line-height: 1.4;
}

.lpe-root .lpe-card__media-icons {
	display: flex;
	gap: 6px;
	margin: 8px 0 0;
}

.lpe-root .lpe-ico {
	padding: 1px 8px;
	border-radius: 999px;
	background: #f2f2f2;
	color: #6b6b6b;
	font-size: 11px;
	line-height: 1.6;
}

.lpe-root .lpe-card--featured {
	margin-bottom: 48px;
	padding-bottom: 40px;
	border-bottom: 1px solid #f2f2f2;
}

.lpe-root .lpe-card--featured .lpe-card__link {
	display: grid;
	grid-template-columns: 1.3fr 1fr;
	align-items: center;
	gap: 32px;
}

.lpe-root .lpe-card--featured .lpe-card__body {
	padding-top: 0;
}

.lpe-root .lpe-card--featured .lpe-card__title {
	font-size: clamp(24px, 3vw, 32px);
	line-height: 1.2;
}

.lpe-root .lpe-card--featured .lpe-card__text {
	font-size: 18px;
	-webkit-line-clamp: 4;
}

/* Filter */
.lpe-list .lpe-filters {
	display: grid;
	grid-template-columns: 1.4fr repeat(4, 1fr) auto;
	gap: 10px;
	margin: 0 0 20px;
}

.lpe-list .lpe-filters input[type="search"],
.lpe-list .lpe-filters select {
	width: 100%;
	min-height: 42px;
	margin: 0;
	padding: 9px 14px;
	border: 1px solid #e5e5e5;
	border-radius: 999px;
	background-color: #ffffff;
	color: #242424;
	font: inherit;
	font-size: 15px;
	line-height: 1.2;
}

.lpe-list .lpe-filters select {
	padding-right: 34px;
	-webkit-appearance: none;
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23555' stroke-width='1.6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	text-overflow: ellipsis;
}

.lpe-list .lpe-filters input:focus,
.lpe-list .lpe-filters select:focus {
	border-color: #191919;
	outline: none;
}

.lpe-list.is-enhanced .lpe-filters__submit {
	display: none;
}

.lpe-list .lpe-list__active {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 10px;
	margin: 0 0 28px;
	color: #6b6b6b;
	font-size: 14px;
	line-height: 1.4;
}

.lpe-list .lpe-list__reset {
	color: #6b6b6b;
	text-underline-offset: 3px;
}

.lpe-list .lpe-list__empty {
	padding: 40px 0;
	color: #6b6b6b;
	font-size: 18px;
	line-height: 1.5;
	text-align: center;
}

.lpe-list.is-loading .lpe-grid,
.lpe-list.is-loading .lpe-card--featured {
	opacity: 0.45;
	transition: opacity 150ms ease;
}

.lpe-list .lpe-pager {
	margin: 44px 0 0;
	text-align: center;
}

.lpe-list .lpe-pager__pages {
	display: flex;
	justify-content: center;
	gap: 18px;
	margin: 16px 0 0;
	color: #6b6b6b;
	font-size: 14px;
	line-height: 1.4;
}

.lpe-list .lpe-pager__pages a {
	color: #242424;
}

@media (max-width: 1000px) {
	.lpe-list .lpe-filters {
		grid-template-columns: 1fr 1fr;
	}

	.lpe-list .lpe-filters__search {
		grid-column: 1 / -1;
	}
}

@media (max-width: 900px) {
	.lpe-root .lpe-card--featured .lpe-card__link {
		grid-template-columns: 1fr;
		gap: 14px;
	}
}

@media (max-width: 480px) {
	.lpe-list .lpe-filters {
		grid-template-columns: 1fr;
	}
}

@media (prefers-reduced-motion: reduce) {
	.lpe-root *,
	.vm-root .lpe-live__badge--on {
		animation: none !important;
		transition: none !important;
	}
}

/* ---------- Korrekturen nach dem Live-Test ---------- */
.vm-root.vm-root .lpe-media .vm-video__poster {
	opacity: 1;
}

.vm-root .lpe-media .vm-video__overlay {
	background: linear-gradient(to top, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0) 45%);
}

.vm-root .lpe-media .vm-video.is-playing .vm-video__overlay {
	display: none;
}

.vm-root .lpe-media .lpe-live {
	position: absolute;
	left: 16px;
	right: 16px;
	bottom: 14px;
}

.vm-root .lpe-media__note,
.vm-root.vm-root .lpe-media__note {
	margin: 8px 0 0;
	padding: 0 20px;
	color: var(--vm-text-2);
	font-family: var(--vm-sans);
	font-size: 12px;
	line-height: 1.4;
	text-align: center;
}

.vm-root .lpe-media__note a {
	color: var(--vm-text-2);
	text-decoration: underline;
}

/* Gliederungszeilen aus alten Transkripten (<p class="p1">) eng setzen */
.vm-root .lpe-read .vm-content p.p1 {
	margin-top: 0.35em;
}

.vm-root .lpe-read .vm-content p.p1 + p:not(.p1) {
	margin-top: 1.9em;
}

/* ================================================================== */
/* Kopfbereich: Hintergrund komplett unscharf (nur Farben), rechts das   */
/* Titelbild vollständig und scharf als Karte (Klick = Video).          */
/* ================================================================== */

.vm-root .lpe-hero {
	position: relative;
	width: 100vw;
	/* volle Breite trotz Innenabstand von .vm-single (wie .vm-recs) */
	margin: -40px 0 8px calc(50% - 50vw);
	overflow: hidden;
	overflow: clip;
	background: #121212;
	color: #ffffff;
	isolation: isolate;
}

.vm-root .lpe-hero__bg {
	position: absolute;
	inset: 0;
	z-index: -2;
	/* Der unscharfe Rand darf den Kopfbereich nicht scrollbar machen */
	overflow: hidden;
}

.vm-root.vm-root .lpe-hero__blur {
	position: absolute;
	inset: -10%;
	width: 120%;
	height: 120%;
	max-width: none;
	margin: 0;
	object-fit: cover;
	filter: blur(34px) saturate(1.4);
	transform: translateZ(0);
}

.vm-root .lpe-hero__shade {
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(90deg, rgba(12, 12, 12, 0.72) 0%, rgba(12, 12, 12, 0.5) 55%, rgba(12, 12, 12, 0.35) 100%),
		linear-gradient(0deg, rgba(12, 12, 12, 0.7) 0%, rgba(12, 12, 12, 0) 45%);
}

.vm-root .lpe-hero--noimg .lpe-hero__shade {
	background: radial-gradient(120% 120% at 80% 20%, #3a3a3a 0%, #151515 60%);
}

.vm-root .lpe-hero {
	display: flex;
	flex-direction: column;
	justify-content: center;
	/* genau der sichtbare Bildschirm unter der Kopfzeile der Website (--lpe-top setzt das Skript) */
	min-height: max(460px, calc(100vh - var(--lpe-top, 80px)));
	min-height: max(460px, calc(100svh - var(--lpe-top, 80px)));
}

.vm-root .lpe-hero__more,
.vm-root.vm-root .lpe-hero__more {
	position: absolute;
	left: 50%;
	bottom: 18px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	color: rgba(255, 255, 255, 0.75);
	text-decoration: none;
	transform: translateX(-50%);
	animation: lpe-bounce 2.4s ease-in-out infinite;
}

.vm-root .lpe-hero__more:hover {
	color: #ffffff;
	background: rgba(255, 255, 255, 0.12);
}

@keyframes lpe-bounce {
	0%, 100% {
		transform: translate(-50%, 0);
	}
	50% {
		transform: translate(-50%, 6px);
	}
}

.vm-root .lpe-hero__inner {
	width: 100%;
	max-width: 1000px;
	margin: 0 auto;
	padding: 56px 40px 64px;
}

.vm-root .lpe-hero__text {
	max-width: 720px;
}

.vm-root .lpe-hero--noimg .lpe-hero__inner {
	grid-template-columns: minmax(0, 1fr);
	max-width: 900px;
}

.vm-root .lpe-hero__back {
	margin: 0 0 28px;
	font-family: var(--vm-sans);
	font-size: 14px;
}

.vm-root .lpe-hero__back a,
.vm-root.vm-root .lpe-hero__back a {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	color: rgba(255, 255, 255, 0.75);
	text-decoration: none;
}

.vm-root .lpe-hero__back a:hover {
	color: #ffffff;
}

/* Livestream: rot, leicht pulsierend */
.vm-root .lpe-live {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 16px;
	padding: 6px 14px 6px 12px;
	border-radius: 999px;
	background: #e02424;
	color: #ffffff;
	font-family: var(--vm-sans);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.2;
	box-shadow: 0 0 0 0 rgba(224, 36, 36, 0.6);
	animation: lpe-live-pulse 2s ease-out infinite;
}

.vm-root .lpe-live[hidden] {
	display: none;
}

.vm-root .lpe-live__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #ffffff;
	animation: lpe-live-dot 1s ease-in-out infinite alternate;
}

@keyframes lpe-live-pulse {
	0% {
		box-shadow: 0 0 0 0 rgba(224, 36, 36, 0.55);
	}
	70% {
		box-shadow: 0 0 0 12px rgba(224, 36, 36, 0);
	}
	100% {
		box-shadow: 0 0 0 0 rgba(224, 36, 36, 0);
	}
}

@keyframes lpe-live-dot {
	to {
		opacity: 0.35;
	}
}

.vm-root .lpe-hero__kicker {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 8px;
	margin: 0 0 14px;
	color: rgba(255, 255, 255, 0.8);
	font-family: var(--vm-sans);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.vm-root .lpe-hero__kicker a,
.vm-root.vm-root .lpe-hero__kicker a {
	color: #ffffff;
	text-decoration: none;
}

.vm-root .lpe-hero__kicker a:hover {
	text-decoration: underline;
}

.vm-root .lpe-hero__part {
	color: rgba(255, 255, 255, 0.65);
}

.vm-root .lpe-hero__title {
	margin: 0;
	color: #ffffff;
	font-family: Georgia, "Times New Roman", serif;
	font-size: clamp(36px, 5vw, 64px);
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: -0.01em;
	text-wrap: balance;
}

.vm-root .lpe-hero__lead {
	margin: 18px 0 0;
	max-width: 620px;
	color: rgba(255, 255, 255, 0.82);
	font-family: var(--vm-sans);
	font-size: 16px;
	line-height: 1.55;
	text-wrap: pretty;
}

.vm-root .lpe-hero__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 2px 8px;
	margin: 16px 0 0;
	color: rgba(255, 255, 255, 0.75);
	font-family: var(--vm-sans);
	font-size: 15px;
	line-height: 1.5;
}

.vm-root .lpe-hero__meta a,
.vm-root.vm-root .lpe-hero__meta a {
	color: #ffffff;
	text-decoration: none;
}

.vm-root .lpe-hero__meta a:hover {
	text-decoration: underline;
}

.vm-root .lpe-hero__name {
	color: #ffffff;
	font-weight: 600;
}

.vm-root .lpe-hero__date {
	color: rgba(255, 255, 255, 0.5);
	font-size: 13px;
}

.vm-root .lpe-hero__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin: 26px 0 0;
}

.vm-root .lpe-hbtn,
.vm-root.vm-root .lpe-hbtn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-width: 176px;
	min-height: 48px;
	margin: 0;
	padding: 12px 22px;
	border: 0;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.16);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	color: #ffffff;
	font-family: var(--vm-sans);
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--vm-ease), border-color var(--vm-ease), transform var(--vm-ease);
}

.vm-root .lpe-hbtn:hover {
	background: rgba(255, 255, 255, 0.26);
}

.vm-root .lpe-hbtn--primary,
.vm-root.vm-root .lpe-hbtn--primary {
	background: #ffffff;
	color: #111111;
}

.vm-root .lpe-hbtn--primary:hover {
	background: rgba(255, 255, 255, 0.85);
}

.vm-root .lpe-hbtn:active {
	transform: scale(0.98);
}

.vm-root .lpe-hero__share .vm-share__toggle {
	color: #ffffff;
}

.vm-root .lpe-hero__edit,
.vm-root.vm-root .lpe-hero__edit {
	color: rgba(255, 255, 255, 0.7);
	font-family: var(--vm-sans);
	font-size: 14px;
	text-decoration: underline;
}

/* Titelbild vollständig und scharf */
.vm-root .lpe-hero__card {
	position: relative;
	overflow: hidden;
	aspect-ratio: 16 / 9;
	border-radius: 10px;
	background: #000000;
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.vm-root.vm-root .lpe-hero__poster {
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	object-fit: cover;
}

.vm-root .lpe-hero__play {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: #111111;
	cursor: pointer;
}

.vm-root .lpe-hero__play svg {
	box-sizing: content-box;
	padding: 18px 16px 18px 20px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.92);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
	transition: transform var(--vm-ease);
}

.vm-root .lpe-hero__play:hover svg {
	transform: scale(1.08);
}

.vm-root .lpe-hero__note {
	margin: 10px 0 0;
	color: rgba(255, 255, 255, 0.55);
	font-family: var(--vm-sans);
	font-size: 12px;
	text-align: center;
}

.vm-root .lpe-hero__note a {
	color: rgba(255, 255, 255, 0.7);
}

/* Video im Kopfbereich */
.vm-root .lpe-hero__player {
	display: none;
}

.vm-root .lpe-hero.is-playing {
	padding: 60px 20px 32px;
}

.vm-root .lpe-hero.is-playing .lpe-hero__inner {
	display: none;
}

.vm-root .lpe-hero.is-playing .lpe-hero__player {
	position: relative;
	display: block;
	width: min(100%, 1200px, calc((100vh - 180px) * 16 / 9));
	margin: 0 auto;
}

.vm-root .lpe-hero__frame {
	position: relative;
	aspect-ratio: 16 / 9;
	background: #000000;
}

.vm-root .lpe-hero__frame iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.vm-root .lpe-hero__close {
	position: absolute;
	top: -8px;
	right: -8px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #ffffff;
	color: #111111;
	cursor: pointer;
	transform: translateY(-50px);
}

.vm-root .lpe-article {
	padding-top: 16px;
}

.vm-root .lpe-article > .lpe-block:first-child {
	margin-top: 32px;
}

/* Bibeltext (vom EsraBibel-Plugin) ohne Überschrift */
.vm-root .lpe-bibel blockquote {
	margin: 0;
	padding: 0 0 0 20px;
	border-left: 3px solid var(--vm-text);
	color: var(--vm-text);
	font-family: var(--vm-serif);
	font-size: var(--vm-body-size);
	font-style: italic;
	line-height: var(--vm-body-lh);
}

.vm-root .lpe-bibel blockquote p {
	margin: 0 0 0.6em;
}

.vm-root .lpe-bibel blockquote sup {
	margin-right: 2px;
	color: var(--vm-text-2);
	font-family: var(--vm-sans);
	font-size: 0.6em;
	font-style: normal;
	font-weight: 600;
}

.vm-root .lpe-bibel cite {
	display: block;
	margin-top: 8px;
	color: var(--vm-text-2);
	font-family: var(--vm-sans);
	font-size: 14px;
	font-style: normal;
}

.vm-root .lpe-bibel cite a {
	color: var(--vm-text-2);
}

@media (max-width: 900px) {
	.vm-root .lpe-hero__inner {
		gap: 32px;
		padding: 36px 28px 44px;
	}

	.vm-root .lpe-hero__title {
		font-size: 36px;
	}
}

/* Handy: Titelbild oben, Text darunter */
@media (max-width: 720px) {
	.vm-root .lpe-hero__inner {
		gap: 14px;
		justify-content: flex-end;
		padding: 16px 20px 32px;
	}

	/* „Alle Predigten“ über dem Bild, der Rest darunter */
	.vm-root .lpe-hero__inner {
		display: flex;
		flex-direction: column;
		align-items: stretch;
	}

	.vm-root .lpe-hero__text {
		display: contents;
	}

	.vm-root .lpe-hero__back {
		order: -2;
		/* bleibt oben, der Rest sitzt unten im Kopfbereich */
		margin: 0 0 auto !important;
		padding-bottom: 24px;
	}

	.vm-root .lpe-hero__media {
		order: -1;
		margin-bottom: 4px;
	}

	.vm-root .lpe-hero__inner > .lpe-hero__text > *:not(.lpe-hero__back) {
		margin-top: 0;
	}

	.vm-root .lpe-live {
		align-self: flex-start;
		margin: 0;
	}

	.vm-root .lpe-hero__kicker {
		margin: 0;
	}

	.vm-root .lpe-hero__lead,
	.vm-root .lpe-hero__meta {
		margin: 0;
	}

	.vm-root .lpe-hero__actions {
		margin-top: 8px;
	}

	.vm-root .lpe-hero__back {
		margin-bottom: 18px;
	}

	.vm-root .lpe-hero__title {
		font-size: 34px;
	}

	.vm-root .lpe-hero__lead {
		font-size: 15px;
	}

	.vm-root .lpe-hero__actions {
		gap: 8px;
	}

	.vm-root .lpe-hbtn,
	.vm-root.vm-root .lpe-hbtn {
		flex: 1 1 0;
		min-width: 0;
		min-height: 46px;
		padding: 10px 14px;
		font-size: 15px;
	}

	.vm-root .lpe-hbtn--primary,
	.vm-root.vm-root .lpe-hbtn--primary {
		flex: 1 1 100%;
	}

	.vm-root .lpe-hero__inner {
		flex: 1;
		padding-bottom: 72px !important;
	}

	.vm-root .lpe-hero.is-playing {
		padding: 0 0 56px;
	}

	.vm-root .lpe-hero.is-playing .lpe-hero__player {
		width: 100%;
	}

	.vm-root .lpe-hero__close {
		top: auto;
		bottom: -48px;
		right: 12px;
		transform: none;
	}
}

/* ================================================================== */
/* Audio-Player als Overlay                                            */
/* Desktop: unteres Drittel, Handy: Vollbild; zugeklappt: Mini-Leiste   */
/* ================================================================== */

/* Mini-Leiste: größer, runde Ecken, ohne Bild */
.vm-root .lpe-mini {
	position: fixed;
	left: 50%;
	bottom: 18px;
	z-index: 99980;
	display: flex;
	align-items: center;
	gap: 12px;
	width: min(620px, calc(100vw - 24px));
	min-height: 72px;
	padding: 12px 12px 14px;
	overflow: hidden;
	border-radius: 24px;
	background: #191919;
	color: #ffffff;
	font-family: var(--vm-sans);
	box-shadow: 0 14px 36px rgba(0, 0, 0, 0.3);
	transform: translateX(-50%);
	animation: lpe-fade 200ms ease;
}

.vm-root .lpe-mini[hidden] {
	display: none;
}

.vm-root .lpe-mini__play {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #ffffff;
	color: #191919;
	cursor: pointer;
}

.vm-root .lpe-mini__open {
	display: flex;
	flex: 1;
	flex-direction: column;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	text-align: left;
	cursor: pointer;
}

.vm-root .lpe-mini__title {
	overflow: hidden;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.3;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.vm-root .lpe-mini__sub {
	color: rgba(255, 255, 255, 0.65);
	font-size: 13px;
	font-variant-numeric: tabular-nums;
}

.vm-root .lpe-mini__close {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.1);
	color: #ffffff;
	cursor: pointer;
}

.vm-root .lpe-mini__bar {
	position: absolute;
	left: 22px;
	right: 22px;
	bottom: 6px;
	height: 3px;
	border-radius: 2px;
	background: rgba(255, 255, 255, 0.18);
}

.vm-root .lpe-mini__bar span {
	display: block;
	width: 0;
	height: 100%;
	border-radius: 2px;
	background: #ffffff;
}

@media (max-width: 720px) {
	.vm-root .lpe-mini {
		bottom: calc(10px + env(safe-area-inset-bottom));
	}
}

@media (prefers-reduced-motion: reduce) {
	.vm-root .lpe-hero__more,
	.vm-root .lpe-live,
	.vm-root .lpe-live__dot,
	.vm-root .lpe-audio__sheet,
	.vm-root .lpe-audio__backdrop {
		animation: none !important;
	}
}


/* ---------- Audio-Overlay (nach dem Entwurf: Karte von unten) ---------- */
.vm-root .lpe-audio {
	position: fixed;
	inset: 0;
	z-index: 99990;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	font-family: var(--vm-sans);
}

.vm-root .lpe-audio[hidden] {
	display: none;
}

.vm-root .lpe-audio__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.45);
	animation: lpe-fade 200ms ease;
}

.vm-root .lpe-audio__sheet {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
	align-items: center;
	gap: 40px;
	width: 100%;
	max-width: 1100px;
	max-height: calc(100vh - 40px);
	padding: 40px 48px 32px;
	overflow-y: auto;
	border-radius: 22px 22px 0 0;
	background: #ffffff;
	color: #191919;
	box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.2);
	animation: lpe-up 280ms cubic-bezier(0.2, 0.8, 0.2, 1);
	touch-action: pan-y;
}

.vm-root .lpe-audio__sheet.is-dragging {
	transition: none;
	animation: none;
}

.vm-root .lpe-audio__sheet.is-returning {
	transition: transform 200ms ease;
}

@keyframes lpe-up {
	from {
		transform: translateY(100%);
	}
}

@keyframes lpe-fade {
	from {
		opacity: 0;
	}
}

.vm-root .lpe-audio__grab {
	position: absolute;
	top: 0;
	left: 50%;
	width: 120px;
	height: 28px;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	cursor: grab;
	transform: translateX(-50%);
	touch-action: none;
}

.vm-root .lpe-audio__grab span {
	display: block;
	width: 44px;
	height: 5px;
	margin: 10px auto 0;
	border-radius: 3px;
	background: #d4d4d4;
}

.vm-root .lpe-audio__cover {
	position: relative;
	display: flex;
	align-items: center;
	width: 100%;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: 16px;
	background: #222222;
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.22);
	touch-action: none;
}

/* Fläche über/unter dem 16:9-Bild mit demselben Bild, unscharf, auffüllen */
.vm-root.vm-root .lpe-audio__cover-fill {
	position: absolute;
	inset: -12%;
	width: 124%;
	height: 124%;
	max-width: none;
	margin: 0;
	object-fit: cover;
	filter: blur(28px) brightness(0.8) saturate(1.2);
}

.vm-root.vm-root .lpe-audio__cover-img {
	position: relative;
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	margin: 0;
	object-fit: cover;
	/* weicher Übergang oben und unten in den unscharfen Rand */
	-webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
	mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
}

.vm-root .lpe-audio__body {
	min-width: 0;
	text-align: center;
}

/* Werkzeugzeile */
.vm-root .lpe-audio__tools {
	display: flex;
	justify-content: space-around;
	align-items: center;
	max-width: 360px;
	margin: 0 auto 18px;
}

.vm-root .lpe-audio__tool,
.vm-root.vm-root .lpe-audio__tool {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	min-width: 44px;
	height: 40px;
	margin: 0;
	padding: 0 8px;
	border: 0;
	border-radius: 999px;
	background: none;
	color: #444444;
	font-family: var(--vm-sans);
	font-size: 17px;
	font-weight: 700;
	text-decoration: none;
	cursor: pointer;
}

.vm-root .lpe-audio__tool:hover {
	background: #f2f2f2;
	color: #191919;
}

.vm-root .lpe-audio__tool.is-on {
	color: #191919;
	background: #f2f2f2;
}

.vm-root .lpe-audio__sleep-label {
	font-size: 12px;
	font-weight: 700;
}

.vm-root .lpe-audio__sleep-label:empty {
	display: none;
}

.vm-root .lpe-audio__title {
	margin: 0;
	font-size: 24px;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.01em;
	text-wrap: balance;
}

.vm-root .lpe-audio__sub {
	margin: 4px 0 0;
	color: #8a8a8a;
	font-size: 16px;
}

/* Fortschritt: Zeiten über dem Balken wie im Entwurf */
.vm-root .lpe-audio__progress {
	margin: 20px 0 0;
}

.vm-root .lpe-audio__times {
	display: flex;
	justify-content: space-between;
	margin-bottom: 4px;
	color: #8a8a8a;
	font-size: 13px;
	font-variant-numeric: tabular-nums;
}

.vm-root .lpe-audio__seek {
	--lpe-p: 0%;
	width: 100%;
	height: 18px;
	margin: 0;
	background: transparent;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.vm-root .lpe-audio__seek::-webkit-slider-runnable-track {
	height: 4px;
	border-radius: 2px;
	background: linear-gradient(90deg, #191919 var(--lpe-p), #e3e3e3 var(--lpe-p));
}

.vm-root .lpe-audio__seek::-moz-range-track {
	height: 4px;
	border-radius: 2px;
	background: #e3e3e3;
}

.vm-root .lpe-audio__seek::-moz-range-progress {
	height: 4px;
	border-radius: 2px;
	background: #191919;
}

.vm-root .lpe-audio__seek::-webkit-slider-thumb {
	width: 14px;
	height: 14px;
	margin-top: -5px;
	border: 0;
	border-radius: 50%;
	background: #191919;
	-webkit-appearance: none;
	appearance: none;
}

.vm-root .lpe-audio__seek::-moz-range-thumb {
	width: 14px;
	height: 14px;
	border: 0;
	border-radius: 50%;
	background: #191919;
}

/* Steuerung: ⏮ ↺15 ▶ 30↻ ⏭ */
.vm-root .lpe-audio__controls {
	display: flex;
	align-items: center;
	justify-content: space-between;
	max-width: 380px;
	margin: 18px auto 0;
}

.vm-root .lpe-audio__btn,
.vm-root.vm-root .lpe-audio__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: none;
	color: #555555;
	text-decoration: none;
	cursor: pointer;
}

.vm-root .lpe-audio__btn:hover {
	background: #f2f2f2;
	color: #191919;
}

.vm-root .lpe-audio__btn.is-disabled {
	opacity: 0.25;
	pointer-events: none;
}

.vm-root .lpe-audio__play {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 76px;
	height: 76px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #191919;
	color: #ffffff;
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25);
	cursor: pointer;
	transition: transform var(--vm-ease);
}

.vm-root .lpe-audio__play:active {
	transform: scale(0.95);
}

.vm-root .lpe-audio__resume {
	margin: 12px 0 0;
	color: #8a8a8a;
	font-size: 13px;
}

.vm-root .lpe-audio__resume[hidden] {
	display: none;
}

.vm-root .lpe-audio__resume button {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: #191919;
	font: inherit;
	text-decoration: underline;
	cursor: pointer;
}

/* Chip unten wie „Kapitel“ im Entwurf */
.vm-root .lpe-audio__chip {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	max-width: 380px;
	margin: 20px auto 0;
	padding: 14px 18px;
	border: 0;
	border-radius: 14px;
	background: #f4f4f4;
	color: #191919;
	font-family: var(--vm-sans);
	font-size: 15px;
	font-weight: 500;
	text-align: left;
	cursor: pointer;
}

.vm-root .lpe-audio__chip:hover {
	background: #ececec;
}

.vm-root .lpe-audio__abo {
	margin: 14px 0 0;
	color: #8a8a8a;
	font-size: 13px;
}

.vm-root .lpe-audio__abo a,
.vm-root.vm-root .lpe-audio__abo a {
	margin-left: 8px;
	color: #191919;
	white-space: nowrap;
	text-underline-offset: 3px;
}

/* Handy: Karte beginnt unter dem oberen Rand, Inhalt untereinander */
@media (max-width: 720px) {
	.vm-root .lpe-audio__sheet {
		display: flex;
		flex-direction: column;
		gap: 0;
		height: calc(100% - 5vh - env(safe-area-inset-top));
		max-height: none;
		padding: 30px 24px calc(16px + env(safe-area-inset-bottom));
		border-radius: 24px 24px 0 0;
	}

	/* Bild füllt den Raum oben, die Bedienung sitzt unten im Daumenbereich */
	.vm-root .lpe-audio__cover {
		flex: none;
		width: min(100%, 42vh);
		margin: auto;
	}

	.vm-root .lpe-audio__body {
		flex: none;
	}

	.vm-root .lpe-audio__tools {
		margin-bottom: 8px;
	}

	.vm-root .lpe-audio__progress {
		margin-top: 14px;
	}

	.vm-root .lpe-audio__controls {
		margin-top: 10px;
	}

	.vm-root .lpe-audio__play {
		width: 70px;
		height: 70px;
	}

	.vm-root .lpe-audio__body {
		display: flex;
		flex: none;
		flex-direction: column;
		width: 100%;
	}

	.vm-root .lpe-audio__tools {
		width: 100%;
		max-width: none;
	}

	.vm-root .lpe-audio__title {
		font-size: 22px;
	}

	.vm-root .lpe-audio__controls {
		width: 100%;
		max-width: none;
	}

	.vm-root .lpe-audio__chip {
		max-width: none;
		margin-top: 14px;
		padding: 12px 16px;
	}

	.vm-root .lpe-audio__abo {
		margin-top: 10px;
	}
}



/* Video unter dem Kopfbereich */
.vm-root.vm-root .lpe-article > .lpe-media:first-child {
	margin-top: 16px;
}

.vm-root .lpe-hbtn svg {
	flex: none;
}

@media (max-width: 720px) {
	.vm-root .lpe-hero__edit {
		flex-basis: 100%;
		text-align: center;
	}
}

/* ---------- Knöpfe im Kopfbereich: Apple-Stil, weiß, alle gleichwertig ---------- */
.vm-root .lpe-hbtn,
.vm-root.vm-root .lpe-hbtn,
.vm-root .lpe-hbtn--primary,
.vm-root.vm-root .lpe-hbtn--primary {
	min-height: 50px;
	padding: 12px 26px;
	border: 1.5px solid rgba(255, 255, 255, 0.9);
	border-radius: 999px;
	background: transparent;
	color: #ffffff;
	font-size: 17px;
	font-weight: 500;
	letter-spacing: -0.01em;
	text-shadow: none;
	box-shadow: none;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	transition: background-color 150ms ease, color 150ms ease, transform 150ms ease;
}

.vm-root .lpe-hbtn:hover,
.vm-root .lpe-hbtn--primary:hover {
	background: #ffffff;
	color: #111111;
}

.vm-root .lpe-hbtn:active {
	transform: scale(0.97);
}

.vm-root .lpe-hero__share .vm-share__toggle {
	width: 50px;
	height: 50px;
	border: 1.5px solid rgba(255, 255, 255, 0.9);
	border-radius: 50%;
	background: transparent;
	color: #ffffff;
}

.vm-root .lpe-hero__share .vm-share__toggle:hover {
	background: #ffffff;
	color: #111111;
}

/* Handy: alle drei gleich breit nebeneinander */
@media (max-width: 720px) {
	.vm-root .lpe-hbtn--primary,
	.vm-root.vm-root .lpe-hbtn--primary {
		flex: 1 1 0;
	}

	.vm-root .lpe-hbtn,
	.vm-root.vm-root .lpe-hbtn {
		padding: 10px 8px;
		font-size: 15px;
	}
}

@media (max-width: 720px) {
	.vm-root .lpe-hero__actions {
		flex-wrap: wrap;
	}

	.vm-root .lpe-hbtn,
	.vm-root.vm-root .lpe-hbtn,
	.vm-root .lpe-hbtn--primary,
	.vm-root.vm-root .lpe-hbtn--primary {
		flex: 1 1 0;
		min-width: 0;
		padding: 10px 6px;
		font-size: 14px;
		white-space: nowrap;
	}

	/* Teilen und Bearbeiten in eine zweite Zeile */
	.vm-root .lpe-hero__share {
		order: 5;
	}

	.vm-root .lpe-hero__share .vm-share__toggle {
		width: 44px;
		height: 44px;
	}

	.vm-root .lpe-hero__edit {
		order: 6;
		flex-basis: auto;
		margin-left: 8px;
	}

	.vm-root .lpe-hero__actions::after {
		content: "";
		order: 4;
		flex-basis: 100%;
	}
}

/* ---------- Knöpfe: weiß ausgefüllt, alle gleich ---------- */
.vm-root .lpe-hbtn,
.vm-root.vm-root .lpe-hbtn,
.vm-root .lpe-hbtn--primary,
.vm-root.vm-root .lpe-hbtn--primary {
	border-color: #ffffff;
	background: #ffffff;
	color: #111111;
	font-weight: 600;
}

.vm-root .lpe-hbtn:hover,
.vm-root .lpe-hbtn--primary:hover {
	border-color: rgba(255, 255, 255, 0.85);
	background: rgba(255, 255, 255, 0.85);
	color: #111111;
}

.vm-root .lpe-hero__share .vm-share__toggle {
	border-color: #ffffff;
	background: #ffffff;
	color: #111111;
}

.vm-root .lpe-hero__share .vm-share__toggle:hover {
	background: rgba(255, 255, 255, 0.85);
}

@media (min-width: 721px) {
	.vm-root .lpe-hbtn,
	.vm-root.vm-root .lpe-hbtn {
		min-width: 140px;
	}
}

/* ---------- Abgerundete Ecken: Video wie die Vorschaubilder ---------- */
.vm-root .lpe-media .vm-video,
.vm-root .lpe-root .lpe-card__media,
.lpe-root .lpe-card__media,
.vm-root .vm-rec__image {
	overflow: hidden;
	border-radius: 12px;
}

@media (max-width: 727px) {
	/* Auf dem Handy mit Rand, damit die Rundung sichtbar ist */
	.vm-root figure.vm-fig--wide.lpe-media {
		width: calc(100vw - 32px);
		margin-left: calc(50% - (100vw - 32px) / 2);
	}
}

@media (max-width: 720px) {
	.vm-root .lpe-hero__title {
		font-size: clamp(40px, 11vw, 48px);
		line-height: 1.08;
	}
}

/* ---------- Bibeltext: ab 6 Zeilen eingeklappt mit Verlauf ---------- */
.vm-root .lpe-bibel {
	position: relative;
}

.vm-root .lpe-bibel.is-folded .lpe-bibel__inner {
	max-height: var(--lpe-fold-h, 11em);
	overflow: hidden;
	-webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
	mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
}

.vm-root .lpe-fold__toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin: 4px auto 0;
	padding: 0;
	border: 1px solid var(--vm-line-strong);
	border-radius: 50%;
	background: #ffffff;
	color: var(--vm-text);
	cursor: pointer;
	transition: transform 200ms ease, border-color 150ms ease;
}

.vm-root .lpe-fold__toggle[hidden] {
	display: none;
}

.vm-root .lpe-fold__toggle:hover {
	border-color: var(--vm-text);
}

.vm-root .lpe-fold__toggle[aria-expanded="true"] svg {
	transform: rotate(180deg);
}

/* ---------- Trenner „···“ statt Überschrift vor dem Transkript ---------- */
.vm-root .lpe-dots {
	height: auto;
	margin: 8px 0 32px;
	border: 0;
	background: none;
	text-align: center;
}

.vm-root .lpe-dots::before {
	content: "···";
	color: var(--vm-text-2);
	font-family: var(--vm-serif);
	font-size: 28px;
	letter-spacing: 0.6em;
}

/* ================================================================== */
/* Lesen                                                               */
/* ================================================================== */

/* Aufklappbarer Text (der ganze Text steht im HTML – auch für Google) */
.vm-root .lpe-textfold.is-folded .vm-content {
	max-height: var(--lpe-textfold-h, 1100px);
	overflow: hidden;
	-webkit-mask-image: linear-gradient(180deg, #000 70%, transparent 100%);
	mask-image: linear-gradient(180deg, #000 70%, transparent 100%);
}

.vm-root .lpe-textfold__more {
	margin: 8px 0 0;
	text-align: center;
}

.vm-root .lpe-textfold__more[hidden] {
	display: none;
}

.vm-root.vm-root .lpe-textfold__btn,
.vm-root.vm-root .lpe-textfold__btn:is(:hover, :focus, :active) {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 12px 24px;
	border: 1px solid var(--vm-text);
	border-radius: 999px;
	background: #ffffff;
	color: var(--vm-text);
	font-family: var(--vm-sans);
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
}

.vm-root.vm-root .lpe-textfold__btn:hover {
	background: var(--vm-text);
	color: #ffffff;
}

/* Link zu einem Abschnitt (# neben der Überschrift) */
.vm-root .lpe-read .vm-content h2 {
	position: relative;
}

.vm-root.vm-root .lpe-anchor,
.vm-root.vm-root .lpe-anchor:is(:hover, :focus, :active) {
	display: inline-block;
	margin: 0 0 0 10px;
	padding: 0 6px;
	border: 0;
	border-radius: 6px;
	background: none;
	color: var(--vm-text-2);
	font-family: var(--vm-sans);
	font-size: 0.75em;
	font-weight: 500;
	line-height: 1.4;
	vertical-align: middle;
	opacity: 0;
	cursor: pointer;
	transition: opacity 150ms ease;
}

.vm-root .lpe-read .vm-content h2:hover .lpe-anchor,
.vm-root.vm-root .lpe-anchor:focus-visible,
.vm-root.vm-root .lpe-anchor.is-copied {
	opacity: 1;
}

.vm-root.vm-root .lpe-anchor:hover {
	background: var(--vm-pill-bg);
	color: var(--vm-text);
}

/* Handy/Tablet: kein Überfahren mit der Maus – „#“ ausblenden (Teilen geht über das Teilen-Menü) */
@media (hover: none) {
	.vm-root.vm-root .lpe-anchor,
	.vm-root.vm-root .lpe-anchor:is(:hover, :focus, :active) {
		display: none;
	}
}

/* Kapitel-Leiste rechts (Desktop, wie bei Medium) */
.vm-root .lpe-rail {
	position: fixed;
	top: 50%;
	right: max(24px, calc((100vw - 1100px) / 2 - 40px));
	z-index: 50;
	display: flex;
	gap: 0;
	max-height: 70vh;
	opacity: 0;
	pointer-events: none;
	transform: translateY(-50%);
	transition: opacity 200ms ease;
}

.vm-root .lpe-rail.is-visible {
	opacity: 1;
	pointer-events: auto;
}

.vm-root .lpe-rail__track {
	position: absolute;
	top: 6px;
	bottom: 6px;
	right: 5px;
	width: 2px;
	border-radius: 1px;
	background: var(--vm-line-strong);
}

.vm-root .lpe-rail__fill {
	display: block;
	width: 100%;
	height: 0;
	border-radius: 1px;
	background: var(--vm-text);
}

.vm-root .lpe-rail__list {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 22px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.vm-root .lpe-rail__dot,
.vm-root.vm-root .lpe-rail__dot {
	position: relative;
	display: block;
	width: 12px;
	height: 12px;
	border: 2px solid var(--vm-line-strong);
	border-radius: 50%;
	background: #ffffff;
	text-decoration: none;
	transition: border-color 150ms ease, background-color 150ms ease, transform 150ms ease;
}

.vm-root .lpe-rail__dot.is-done {
	border-color: var(--vm-text);
	background: var(--vm-text);
}

.vm-root .lpe-rail__dot.is-active {
	border-color: var(--vm-text);
	background: #ffffff;
	transform: scale(1.3);
}

.vm-root .lpe-rail__label {
	position: absolute;
	top: 50%;
	right: 22px;
	max-width: 260px;
	padding: 6px 10px;
	border-radius: 8px;
	background: #191919;
	color: #ffffff;
	font-family: var(--vm-sans);
	font-size: 13px;
	line-height: 1.3;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	opacity: 0;
	pointer-events: none;
	transform: translate(4px, -50%);
	transition: opacity 150ms ease, transform 150ms ease;
}

.vm-root .lpe-rail__dot:hover .lpe-rail__label,
.vm-root .lpe-rail__dot:focus-visible .lpe-rail__label,
.vm-root .lpe-rail__dot.is-active .lpe-rail__label {
	opacity: 1;
	transform: translate(0, -50%);
}

/* Aktives Label nur beim Überfahren der Leiste zeigen, sonst ruhig */
.vm-root .lpe-rail:not(:hover) .lpe-rail__dot.is-active:not(:focus-visible) .lpe-rail__label {
	opacity: 0;
}

/* Fortschritt oben und Abschnitt-Knopf unten (Handy/Tablet) */
.vm-root .lpe-progress {
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	z-index: 60;
	height: 3px;
	background: rgba(0, 0, 0, 0.06);
	opacity: 0;
	pointer-events: none;
	transition: opacity 200ms ease;
}

.vm-root .lpe-progress span {
	display: block;
	width: 0;
	height: 100%;
	background: var(--vm-text);
}

.vm-root.vm-root .lpe-section-chip,
.vm-root.vm-root .lpe-section-chip:is(:hover, :focus, :active) {
	position: fixed;
	left: 50%;
	bottom: calc(16px + env(safe-area-inset-bottom));
	z-index: 55;
	max-width: calc(100vw - 32px);
	margin: 0;
	padding: 10px 16px;
	overflow: hidden;
	border: 0;
	border-radius: 999px;
	background: rgba(25, 25, 25, 0.92);
	color: #ffffff;
	font-family: var(--vm-sans);
	font-size: 13px;
	font-weight: 500;
	white-space: nowrap;
	text-overflow: ellipsis;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
	cursor: pointer;
	transform: translateX(-50%);
}

.vm-root .lpe-section-chip[hidden] {
	display: none;
}

html.lpe-has-mini .vm-root .lpe-section-chip {
	bottom: calc(100px + env(safe-area-inset-bottom));
}

@media (min-width: 1180px) {
	.vm-root .lpe-progress,
	.vm-root .lpe-section-chip {
		display: none !important;
	}
}

@media (max-width: 1179px) {
	.vm-root .lpe-rail {
		display: none;
	}

	.vm-root .lpe-progress.is-visible {
		opacity: 1;
	}
}

/* Weiterlesen an der letzten Stelle */
.vm-root .lpe-resume {
	position: fixed;
	left: 50%;
	bottom: calc(18px + env(safe-area-inset-bottom));
	z-index: 70;
	display: flex;
	align-items: center;
	gap: 10px;
	max-width: calc(100vw - 24px);
	padding: 10px 10px 10px 18px;
	border-radius: 18px;
	background: #191919;
	color: #ffffff;
	font-family: var(--vm-sans);
	font-size: 14px;
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3);
	opacity: 0;
	transform: translate(-50%, 20px);
	transition: opacity 250ms ease, transform 250ms ease;
}

.vm-root .lpe-resume.is-in {
	opacity: 1;
	transform: translate(-50%, 0);
}

.vm-root .lpe-resume span {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.vm-root.vm-root .lpe-resume button,
.vm-root.vm-root .lpe-resume button:is(:hover, :focus, :active) {
	flex: none;
	margin: 0;
	padding: 8px 14px;
	border: 0;
	border-radius: 999px;
	background: #ffffff;
	color: #191919;
	font: 600 14px/1 var(--vm-sans);
	cursor: pointer;
}

.vm-root.vm-root .lpe-resume [data-x],
.vm-root.vm-root .lpe-resume [data-x]:is(:hover, :focus, :active) {
	padding: 6px 10px;
	background: rgba(255, 255, 255, 0.12);
	color: #ffffff;
	font-size: 18px;
}

/* Teilen-Menü schwebend (per JS positioniert): nicht vom Kopfbereich abgeschnitten, über der festen Kopfzeile */
.vm-root .vm-share__menu.is-floating {
	position: fixed;
	right: auto;
	bottom: auto;
	z-index: 1000;
	border-radius: 12px;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
}

.vm-root .vm-share__menu.is-floating::before {
	right: auto;
	left: var(--vm-arrow, 20px);
}

.vm-root .vm-share__menu.is-floating.is-up::before {
	top: auto;
	bottom: -7px;
	transform: rotate(225deg);
}

/* Suchergebnisse: Treffer markieren; „Neuere“ nur ohne JavaScript (sonst lädt „Weitere“ nach) */
.lpe-root .lpe-card mark {
	padding: 0 0.08em;
	border-radius: 2px;
	background: rgba(255, 214, 0, 0.45);
	color: inherit;
}

.lpe-list.is-enhanced .lpe-pager__pages {
	display: none;
}

/* Abstand der Übersicht zum Footer */
.lpe-root.lpe-list {
	padding-bottom: 96px;
}

@media (max-width: 720px) {
	.lpe-root.lpe-list {
		padding-bottom: 64px;
	}
}

/* Hinweis „Link kopiert“ im Audio-Player */
.vm-root .lpe-audio__copied,
.lpe-audio__copied {
	margin: 4px 0 0;
	font-family: var(--vm-sans, Inter, system-ui, sans-serif);
	font-size: 13px;
	color: #6b6b6b;
}

/* Teilen-Menü offen: Kopfbereich (eigene Ebene) über das Video heben */
.vm-root .lpe-hero.is-share-open {
	z-index: 1000;
}

/* Handy: Safari (iOS) blendet die Adressleiste unten über die Seite – Knöpfe im Kopfbereich darüber halten */
@media (max-width: 720px) {
	/* Safari (iOS) zählt den Bereich unter der schwebenden Leiste mit – Kopfbereich deshalb kürzer,
	   die Knöpfe enden deutlich über der Leiste und das Video darunter schaut herein */
	.vm-root .lpe-hero {
		min-height: max(420px, calc(100vh - var(--lpe-top, 80px) - 110px));
		min-height: max(420px, calc(100svh - var(--lpe-top, 80px) - 110px));
	}

	.vm-root .lpe-hero__inner {
		padding-bottom: 36px;
	}

	.vm-root .lpe-hero__more,
	.vm-root.vm-root .lpe-hero__more {
		display: none;
	}

	/* Datum in eigener Zeile, ohne hängenden Punkt davor */
	.vm-root .lpe-hero__dot:has(+ span .lpe-hero__date) {
		display: none;
	}

	.vm-root .lpe-hero__meta > span:has(> .lpe-hero__date) {
		flex-basis: 100%;
	}
}

/* Handy: Player genau so hoch wie der sichtbare Bereich, ohne Scrollen – das Bild passt sich der freien Höhe an */
@media (max-width: 720px) {
	.vm-root .lpe-audio {
		top: auto;
		height: 100vh;
		height: 100dvh;
	}

	.vm-root .lpe-audio__sheet {
		overflow: hidden;
		padding-bottom: calc(28px + env(safe-area-inset-bottom));
	}

	.vm-root .lpe-audio__cover {
		flex: 1 1 0;
		min-height: 0;
		width: auto;
		max-width: 100%;
		/* quadratisch: nie höher als die verfügbare Breite (Seitenabstand 2 × 24 px) */
		max-height: min(42vh, calc(100vw - 48px));
		aspect-ratio: 1 / 1;
		margin: 4px auto 14px;
	}
}

/* Übersicht am Handy: Filter hinter „Filter“-Knopf */
.lpe-list .lpe-filters__toggle {
	display: none;
}

@media (max-width: 720px) {
	.lpe-list .lpe-filters.has-toggle {
		grid-template-columns: 1fr auto;
	}

	.lpe-list .lpe-filters.has-toggle .lpe-filters__search {
		grid-column: 1;
	}

	.lpe-list .lpe-filters.has-toggle .lpe-filters__field {
		grid-column: 1 / -1;
	}

	.lpe-list .lpe-filters.is-collapsed .lpe-filters__field {
		display: none;
	}

	.lpe-list .lpe-filters__toggle,
	.lpe-list .lpe-filters__toggle:hover,
	.lpe-list .lpe-filters__toggle:focus {
		display: inline-flex;
		align-items: center;
		min-height: 42px;
		margin: 0;
		padding: 0 18px;
		border: 1px solid #e5e5e5;
		border-radius: 999px;
		background: #ffffff;
		color: #242424;
		font: inherit;
		font-size: 15px;
		font-weight: 600;
		cursor: pointer;
	}

	.lpe-list .lpe-filters__toggle[aria-expanded="true"] {
		border-color: #191919;
	}
}

/* Einleitungstext der Übersicht (Elementor-Element mit Klasse „lpe-intro“): am Handy eingeklappt */
.lpe-intro.lpe-intro--folded {
	max-height: var(--lpe-intro-h, 12em);
	overflow: hidden;
	-webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - var(--lpe-intro-fade, 2.4em)), transparent);
	mask-image: linear-gradient(to bottom, #000 calc(100% - var(--lpe-intro-fade, 2.4em)), transparent);
}

body .lpe-intro__more.lpe-intro__more,
body .lpe-intro__more.lpe-intro__more:hover,
body .lpe-intro__more.lpe-intro__more:focus {
	display: inline-flex;
	margin: 4px 0 18px;
	padding: 6px 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	font-size: 15px;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

/* iOS zoomt bei Eingabefeldern unter 16 px hinein (und nicht wieder heraus) */
@media (max-width: 720px) {
	.lpe-list .lpe-filters input[type="search"],
	.lpe-list .lpe-filters select,
	.vm-root input,
	.vm-root select,
	.vm-root textarea {
		font-size: max(16px, 1em);
	}
}