/**
 * Styling fuer die Mediathek-Frontend-Seiten (Einzelansicht + Buchstruktur-Uebersicht,
 * Phase 3). Eigenstaendiges, schlankes CSS -- die Seiten laufen ueber einen eigenen
 * Rewrite-Endpunkt ohne Theme-Einbindung (siehe class-frontend-player.php/-list.php),
 * binden also bewusst kein Theme-Stylesheet ein.
 */

:root {
	--echo-med-bg: #12161c;
	--echo-med-surface: #1b212b;
	--echo-med-surface-alt: #232b37;
	--echo-med-border: #333c49;
	--echo-med-text: #e6e9ee;
	--echo-med-text-muted: #9aa5b3;
	--echo-med-accent: #4da3ff;
	--echo-med-accent-contrast: #06131f;
	--echo-med-radius: 8px;
	/* Dezente Uebergaenge (FIM-38) -- zentral, damit alle Hover-Effekte gleich schnell wirken. */
	--echo-med-transition: 0.18s ease-out;
}

* {
	box-sizing: border-box;
}

/*
 * .screen-reader-text existiert nur im wp-admin-Stylesheet, das auf diesen eigenstaendigen
 * Frontend-Seiten (kein wp_head()/wp_footer(), siehe Klassenkommentar oben) nicht geladen wird
 * -- ohne diese Regel wuerde die Klasse hier gar nichts bewirken und Labels wie im Zugangscode-
 * Formular waeren faelschlich sichtbar statt nur fuer Screenreader.
 */
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

body.echo-med {
	margin: 0;
	background: var(--echo-med-bg);
	color: var(--echo-med-text);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	line-height: 1.5;
}

.echo-med__container {
	max-width: 960px;
	margin: 0 auto;
	padding: 1.5rem 1.25rem 3rem;
}

.echo-med__header h1 {
	margin: 0.25rem 0 0.5rem;
	font-size: 1.6rem;
}

.echo-med__subtitle {
	color: var(--echo-med-text-muted);
	margin: 0;
}

.echo-med__breadcrumb {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	align-items: baseline;
	font-size: 0.9rem;
}

/* Unterstreichung liegt immer an, ist aber transparent -- so kann sie weich einblenden. */
.echo-med__breadcrumb a {
	color: var(--echo-med-accent);
	text-decoration: underline;
	text-decoration-color: transparent;
	text-underline-offset: 0.2em;
	transition: color var(--echo-med-transition), text-decoration-color var(--echo-med-transition);
}

.echo-med__breadcrumb a:hover,
.echo-med__breadcrumb a:focus-visible {
	text-decoration-color: currentColor;
}

.echo-med__breadcrumb-path {
	color: var(--echo-med-text-muted);
}

/* Klickbare Gliederungspunkte (FIM-38): fuehren in die Liste mit aufgeklapptem Pfad. */
ol.echo-med__breadcrumb-path {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.25rem 0.4rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Trenner haengt am VORIGEN Segment, damit eine umgebrochene Zeile nicht mit "›" beginnt. Die
   zweite content-Zeile blendet ihn fuer Screenreader aus; aeltere Browser nehmen die erste. */
ol.echo-med__breadcrumb-path li:not(:last-child)::after {
	content: "›";
	content: "›" / "";
	margin-left: 0.4rem;
}

.echo-med__breadcrumb-path a {
	color: var(--echo-med-text-muted);
}

.echo-med__breadcrumb-path a:hover,
.echo-med__breadcrumb-path a:focus-visible {
	color: var(--echo-med-accent);
}

/* Einzelansicht: Player */

.echo-med__player {
	background: #000;
	border-radius: var(--echo-med-radius);
	overflow: hidden;
	margin: 1.25rem 0;
}

.echo-med__video {
	display: block;
	width: 100%;
	max-height: 70vh;
}

/* Verlaufsbalken unter dem Video (FIM-38). Die Breite setzt assets/js/player.js pro Frame per
   scaleX -- bewusst ohne transition, sonst liefe der Balken beim Loop-Neustart rueckwaerts. */
.echo-med__progress {
	height: 4px;
	background: rgba(255, 255, 255, 0.12);
}

.echo-med__progress-bar {
	height: 100%;
	background: var(--echo-med-accent);
	transform: scaleX(0);
	transform-origin: left center;
	will-change: transform;
}

/* Kopfzeile der Einzelansicht: Breadcrumb links, Abmelden rechts (Ueberschrift steht seit
   FIM-38 unter dem Video, der Float der Listenansicht wuerde hier ins Video ragen). */
.echo-med__header--single {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem 1rem;
}

.echo-med__header--single .echo-med__breadcrumb {
	flex: 1 1 auto;
	min-width: 0;
}

.echo-med__header--single .echo-med__logout {
	margin-left: auto;
}

/* hyphens:auto trennt lange deutsche Komposita sauber (lang-Attribut kommt aus
   language_attributes()); overflow-wrap bleibt als Notbremse fuer Browser ohne Trennlexikon. */
.echo-med__title {
	margin: 0 0 1.25rem;
	font-size: 1.6rem;
	line-height: 1.3;
	hyphens: auto;
	overflow-wrap: anywhere;
}

/*
 * Vor-/Zurueck-Buttons (FIM-38): gross genug fuer lange Titel (Umbruch statt einzeiligem
 * Abschneiden, max. 3 Zeilen), Pfeil als eigenes Flex-Element, das nie mitgekuerzt wird.
 */
.echo-med__prevnext {
	display: flex;
	gap: 1rem;
	margin-bottom: 1.5rem;
}

.echo-med__nav-link {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	align-items: center;
	gap: 0.9rem;
	min-height: 4.75rem;
	padding: 0.85rem 1.1rem;
	background: var(--echo-med-surface);
	border: 1px solid var(--echo-med-border);
	border-radius: var(--echo-med-radius);
	color: var(--echo-med-text);
	text-decoration: none;
	transition: border-color var(--echo-med-transition), background-color var(--echo-med-transition);
}

/* Nur echte Links reagieren -- der Platzhalter-<span> fuer "kein Nachbar" traegt dieselbe
   Basisklasse und darf beim Ueberfahren nicht aufleuchten. */
a.echo-med__nav-link:hover,
a.echo-med__nav-link:focus-visible {
	border-color: var(--echo-med-accent);
	background-color: var(--echo-med-surface-alt);
}

.echo-med__nav-link--next {
	justify-content: flex-end;
	text-align: right;
}

/* Dezenter Platzhalter, wenn es kein vorheriges/naechstes Video gibt: gleiche Groesse wie ein
   Button (haelt "Weiter" allein rechts), aber gestrichelt und gedimmt statt einer Leerstelle. */
.echo-med__nav-link--disabled {
	background: transparent;
	border-style: dashed;
	color: var(--echo-med-text-muted);
	opacity: 0.55;
	cursor: default;
}

.echo-med__nav-arrow {
	flex: 0 0 auto;
	font-size: 1.75rem;
	line-height: 1;
	color: var(--echo-med-accent);
	transition: transform var(--echo-med-transition);
}

.echo-med__nav-link--disabled .echo-med__nav-arrow {
	color: inherit;
}

/* Pfeil rueckt beim Ueberfahren leicht in Laufrichtung. */
a.echo-med__nav-link--prev:hover .echo-med__nav-arrow {
	transform: translateX(-3px);
}

a.echo-med__nav-link--next:hover .echo-med__nav-arrow {
	transform: translateX(3px);
}

.echo-med__nav-text {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	min-width: 0;
}

.echo-med__nav-label {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.1rem 0.5rem;
	color: var(--echo-med-text-muted);
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.echo-med__nav-link--next .echo-med__nav-label {
	justify-content: flex-end;
}

.echo-med__nav-number {
	color: var(--echo-med-accent);
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0;
	font-variant-numeric: tabular-nums;
}

.echo-med__nav-title {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	overflow: hidden;
	hyphens: auto;
	overflow-wrap: anywhere;
	font-size: 1rem;
	line-height: 1.35;
}

.echo-med__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
	background: var(--echo-med-surface);
	border: 1px solid var(--echo-med-border);
	border-radius: var(--echo-med-radius);
	padding: 1.25rem;
}

.echo-med__field {
	flex: 1 1 260px;
}

.echo-med__field label {
	display: block;
	margin-bottom: 0.4rem;
	color: var(--echo-med-text-muted);
	font-size: 0.85rem;
}

.echo-med__field-row {
	display: flex;
	gap: 0.5rem;
}

.echo-med__field-row input {
	flex: 1 1 auto;
	min-width: 0;
	padding: 0.5rem 0.6rem;
	background: var(--echo-med-surface-alt);
	border: 1px solid var(--echo-med-border);
	border-radius: var(--echo-med-radius);
	color: var(--echo-med-text);
}

.echo-med__qr {
	flex: 0 0 auto;
	text-align: center;
}

.echo-med__qr img {
	display: block;
	background: #fff;
	padding: 6px;
	border-radius: 4px;
	margin-bottom: 0.5rem;
}

.echo-med__btn {
	display: inline-block;
	padding: 0.5rem 0.9rem;
	background: var(--echo-med-accent);
	color: var(--echo-med-accent-contrast);
	border: none;
	border-radius: var(--echo-med-radius);
	font-size: 0.85rem;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	white-space: nowrap;
	transition: opacity var(--echo-med-transition);
}

.echo-med__btn:hover {
	opacity: 0.9;
}

/* Uebersicht / Buchstruktur-Baum */

.echo-med-tree,
.echo-med-tree ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.echo-med-tree ul {
	margin-left: 1.25rem;
	padding-left: 0.75rem;
	border-left: 1px solid var(--echo-med-border);
}

.echo-med-tree__item {
	margin: 0.3rem 0;
}

.echo-med-tree__branch > summary {
	cursor: pointer;
	padding: 0.35rem 0.5rem;
	border-radius: 6px;
	transition: background-color var(--echo-med-transition);
}

/* Aufgeklappter Inhalt blendet kurz ein, statt hart aufzuspringen (FIM-38). */
.echo-med-tree__branch[open] > ul {
	animation: echo-med-reveal 0.22s ease-out;
}

@keyframes echo-med-reveal {
	from {
		opacity: 0;
		transform: translateY(-4px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

/* Ziel eines Breadcrumb-Links aus der Einzelansicht: Pfad ist serverseitig aufgeklappt, der
   Gliederungspunkt leuchtet nach dem Laden kurz auf und blendet dann vollstaendig aus -- der
   Endzustand der Animation entspricht dem normalen Aussehen, es bleibt keine Markierung stehen. */
.echo-med-tree__item--focus {
	scroll-margin-top: 1.5rem;
}

.echo-med-tree__item--focus > .echo-med-tree__branch > summary,
.echo-med-tree__item--focus > .echo-med-tree__empty {
	animation: echo-med-focus 2.6s ease-out;
}

@keyframes echo-med-focus {
	0% {
		background-color: rgba(77, 163, 255, 0.28);
		box-shadow: inset 3px 0 0 var(--echo-med-accent);
	}
	45% {
		background-color: var(--echo-med-surface);
		box-shadow: inset 3px 0 0 var(--echo-med-accent);
	}
	100% {
		background-color: transparent;
		box-shadow: inset 3px 0 0 transparent;
	}
}

.echo-med-tree__branch > summary:hover {
	background: var(--echo-med-surface);
}

.echo-med-tree__count {
	color: var(--echo-med-text-muted);
	font-size: 0.8rem;
}

.echo-med-tree__empty {
	display: inline-block;
	padding: 0.35rem 0.5rem;
	color: var(--echo-med-text-muted);
}

.echo-med-video-list {
	list-style: none;
	margin: 0.25rem 0 0.5rem;
	padding-left: 1.5rem;
}

.echo-med-video-list--search {
	padding-left: 0;
}

.echo-med-video-list__link {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.4rem 0.3rem;
	border-radius: 6px;
	color: var(--echo-med-text);
	text-decoration: none;
	transition: background-color var(--echo-med-transition);
}

.echo-med-video-list__link:hover {
	background: var(--echo-med-surface);
}

.echo-med-video-list__link:hover .echo-med-video-list__title {
	color: var(--echo-med-accent);
}

.echo-med-video-list__thumb {
	flex: 0 0 auto;
	width: 72px;
	height: 40px;
	border-radius: 4px;
	object-fit: cover;
	background: var(--echo-med-surface-alt);
}

.echo-med-video-list__thumb--empty {
	border: 1px dashed var(--echo-med-border);
}

.echo-med-video-list__text {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.echo-med-video-list__title {
	transition: color var(--echo-med-transition);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.echo-med-video-list__breadcrumb {
	color: var(--echo-med-text-muted);
	font-size: 0.8rem;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Suche */

.echo-med__search {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	margin-top: 1rem;
}

.echo-med__search-input {
	flex: 1 1 260px;
	padding: 0.55rem 0.7rem;
	background: var(--echo-med-surface-alt);
	border: 1px solid var(--echo-med-border);
	border-radius: var(--echo-med-radius);
	color: var(--echo-med-text);
	font-size: 0.95rem;
}

.echo-med__search-clear {
	color: var(--echo-med-text-muted);
	font-size: 0.9rem;
	text-decoration: none;
	transition: color var(--echo-med-transition);
}

.echo-med__search-clear:hover {
	color: var(--echo-med-accent);
	text-decoration: underline;
}

/* Zugangscode-Gate */

.echo-med__gate-wrap {
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.5rem;
}

.echo-med__gate-card {
	width: 100%;
	max-width: 380px;
	background: var(--echo-med-surface);
	border: 1px solid var(--echo-med-border);
	border-radius: var(--echo-med-radius);
	padding: 2rem;
	text-align: center;
}

.echo-med__gate-card h1 {
	margin: 0 0 0.5rem;
	font-size: 1.3rem;
}

.echo-med__gate-error {
	color: #ff8080;
	font-size: 0.9rem;
	margin: 0.5rem 0 0;
}

/* Hinweis nach beendeter Session (FIM-43) -- bewusst neutral statt Fehlerrot: der Nutzer hat
   nichts falsch gemacht, er muss sich nur erneut anmelden. */
.echo-med__gate-notice {
	margin: 1rem 0 0;
	padding: 0.6rem 0.8rem;
	border: 1px solid var(--echo-med-border);
	border-radius: var(--echo-med-radius);
	color: var(--echo-med-text-muted);
	font-size: 0.9rem;
	text-align: left;
}

/*
 * Eingabemaske mit sichtbaren "restlichen Stellen": .echo-med__gate-mask liegt als optisch
 * identisch positionierter Zwilling HINTER dem eigentlichen <input> (transparenter
 * Hintergrund). assets/js/access-gate.js blendet darin bereits ausgefuellte Stellen aktiv aus
 * (Leerzeichen statt "X"), statt sich auf pixelgenaue Deckung durch das <input> zu verlassen --
 * das war je nach Font-Rendering nicht zuverlaessig genug und zeigte "doppelte" Zeichen.
 * white-space:pre verhindert, dass mehrere Leerzeichen in Folge zu einem kollabieren (sonst
 * wuerden die restlichen Platzhalter-Zeichen nach links rutschen statt an fester Monospace-
 * Position zu bleiben).
 */
.echo-med__gate-mask-wrap {
	position: relative;
	margin: 1.25rem 0 1rem;
	background: var(--echo-med-surface-alt);
	border: 1px solid var(--echo-med-border);
	border-radius: var(--echo-med-radius);
}

.echo-med__gate-mask,
.echo-med__gate-input {
	display: block;
	width: 100%;
	box-sizing: border-box;
	padding: 0.7rem 0.8rem;
	margin: 0;
	border: none;
	border-radius: var(--echo-med-radius);
	background: transparent;
	font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
	font-size: 1.1rem;
	letter-spacing: 0.15em;
	text-align: left;
	text-transform: uppercase;
}

.echo-med__gate-mask {
	position: absolute;
	inset: 0;
	color: var(--echo-med-text-muted);
	pointer-events: none;
	user-select: none;
	white-space: pre;
}

.echo-med__gate-input {
	position: relative;
	color: var(--echo-med-text);
}

.echo-med__gate-input:focus {
	outline: 2px solid var(--echo-med-accent);
	outline-offset: 1px;
}

.echo-med__gate-submit {
	width: 100%;
	padding: 0.7rem;
	font-size: 0.95rem;
}

/*
 * Seitenwechsel innerhalb der Mediathek (Liste <-> Video, Vor/Zurueck, Breadcrumbs) blenden
 * weich ueber (Cross-Document View Transitions, FIM-38). Browser ohne Unterstuetzung wechseln
 * wie bisher hart -- reine Verschoenerung, keine Funktion haengt daran.
 */
@media (prefers-reduced-motion: no-preference) {
	@view-transition {
		navigation: auto;
	}
}

::view-transition-old(root),
::view-transition-new(root) {
	animation-duration: 0.2s;
}

/* Wer reduzierte Bewegung eingestellt hat, bekommt keine Uebergaenge/Animationen. */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

@media (max-width: 600px) {
	.echo-med__field-row {
		flex-direction: column;
	}

	.echo-med__meta {
		padding: 1rem;
	}

	.echo-med__title {
		font-size: 1.3rem;
	}

	/* Nebeneinander blieben am Handy nur ~175px je Button -- untereinander in voller Breite
	   passen die langen Titel deutlich besser. Platzhalter ohne Nachbar werden dann unnoetig. */
	.echo-med__prevnext {
		flex-direction: column;
		gap: 0.6rem;
	}

	.echo-med__nav-link {
		flex-basis: auto;
		min-height: 0;
		padding: 0.75rem 0.9rem;
	}

	.echo-med__nav-link--disabled {
		display: none;
	}

	.echo-med__nav-arrow {
		font-size: 1.5rem;
	}
}