/* Radio Zoom Player (App-Shell-Variante, test-app/) – CSS.
   Mobile-first: Top-Bar (Mini-Player), Bottom-Navigation, Module als
   Vollbild-/Overlay-Anzeigen. Desktop (>= 1100px): Chat-Spalte rechts,
   Module als zentrierte Overlay-Karte ueber dem sichtbaren Player.
   Audio und Video nutzen eigene Light-DOM-UIs (nur der hlsjs-video-Motor
   kommt aus @videojs/html). */

/* ============================================================
   Design-Tokens (Radio-Zoom-Styleguide)
   ============================================================ */
:root {
	--rz-primary:  #095DA5;
	--rz-accent:   #68F3F3;
	--rz-navy:     #030C47;
	--rz-bg:       #EDF5FE;
	--rz-text:     #212121;
	--rz-card-bg:  #FFFFFF;
	--rz-card-hdr: #EAEBEC;
	--rz-header:   #27408B;
	--rz-royal:    #4169E1;
	--rz-gray:     #6C6C6C;
	--rz-light:    #F8F8F8;
	--rz-success:  #5CB85C;
	--rz-danger:   #D9534F;
	--rz-warning:  #F0AD4E;
	--rz-line:     #D9E5F3;
	--rz-link:     #095DA5;
	--rz-stage:    #030C47;
	--rz-shadow:   0 1px 2px rgba(3, 12, 71, .05), 0 6px 16px rgba(3, 12, 71, .07);
	--rz-font: "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
	--rz-radius: .75rem;
	--rz-topbar-h: 3.75rem;
	--rz-nav-h:    3.875rem;

	/* Radius-Skala (ui-test, moderne Formen statt Styleguide-.25rem;
	   Pill-Wert 50rem ist im Styleguide bereits erlaubt) */
	--rz-radius-sm:  .5rem;
	--rz-radius-lg:  1rem;
	--rz-radius-pill: 50rem;

	/* Elevation: 3 stufiger Weichschatten statt Flachschatten */
	--rz-shadow-1: 0 1px 2px rgba(3, 12, 71, .06), 0 2px 6px rgba(3, 12, 71, .06);
	--rz-shadow-2: 0 6px 18px rgba(3, 12, 71, .10);
	--rz-shadow-3: 0 16px 40px rgba(3, 12, 71, .16);
	--rz-shadow-up: 0 -4px 16px rgba(3, 12, 71, .10);

	/* Flaechen: Markenverlauf, Tints, Scrim (theme-abhaengig) */
	--rz-grad-brand: linear-gradient(135deg, var(--rz-primary), var(--rz-navy));
	--rz-tint: rgba(9, 93, 165, .09);
	--rz-accent-tint: rgba(104, 243, 243, .15);
	--rz-scrim: rgba(3, 12, 71, .55);
	--rz-btn-glow: 0 2px 8px rgba(9, 93, 165, .35);
}

[data-theme="dark"] {
	--rz-bg:       #070B26;
	--rz-card-bg:  #0B1440;
	--rz-card-hdr: #182765;
	--rz-text:     #EEF3FF;
	--rz-gray:     #A9B2C9;
	--rz-line:     #2A3A7A;
	--rz-link:     #6FB8F7;
	--rz-stage:    #04081F;
	--rz-light:    #16215A;
	--rz-shadow:   0 1px 2px rgba(0, 0, 0, .35), 0 6px 16px rgba(0, 0, 0, .35);

	/* Dunkle Variante der Elevation-/Flaechen-Tokens */
	--rz-shadow-1: 0 1px 2px rgba(0, 0, 0, .40), 0 2px 6px rgba(0, 0, 0, .30);
	--rz-shadow-2: 0 6px 18px rgba(0, 0, 0, .45);
	--rz-shadow-3: 0 16px 40px rgba(0, 0, 0, .55);
	--rz-shadow-up: 0 -4px 16px rgba(0, 0, 0, .45);
	--rz-grad-brand: linear-gradient(135deg, #0E7BD1, var(--rz-primary));
	--rz-tint: rgba(104, 243, 243, .10);
	--rz-accent-tint: rgba(104, 243, 243, .16);
	--rz-scrim: rgba(2, 6, 30, .66);
	--rz-btn-glow: 0 2px 8px rgba(14, 123, 209, .40);
}

/* ============================================================
   Basis
   ============================================================ */
* { box-sizing: border-box; }

[hidden] { display: none !important; }

html, body { margin: 0; padding: 0; }

/* Nativer Pull-to-Refresh (Chrome/Android-Dünnbalken) abschalten –
   der Player hat einen eigenen (nur am Dokumentanfang, Spinner). */
html, body { overscroll-behavior-y: none; }

body {
	background: var(--rz-bg);
	color: var(--rz-text);
	font-family: var(--rz-font);
	font-size: 1rem;
	line-height: 1.5;
	min-height: 100vh;
}

.container {
	width: 100%;
	margin: 0 auto;
	padding: 0 1rem;
}

a { color: var(--rz-link); }

button {
	font-family: inherit;
	font-size: 1rem;
	cursor: pointer;
}

button:focus-visible {
	outline: 2px solid var(--rz-primary);
	outline-offset: 2px;
}

/* Primär-/Sekundär-Buttons ------------------------------------------------ */
.btn-primary {
	background: var(--rz-grad-brand);
	color: #fff;
	border: none;
	border-radius: var(--rz-radius);
	padding: .4rem .9rem;
	font-weight: 600;
	transition: box-shadow .15s, transform .15s;
}

.btn-primary:hover {
	box-shadow: var(--rz-btn-glow);
	transform: translateY(-1px);
}

.btn-ghost {
	background: transparent;
	border: 1px solid var(--rz-line);
	border-radius: var(--rz-radius);
	padding: .4rem .9rem;
	color: var(--rz-text);
	font-weight: 600;
}

.btn-ghost:hover {
	background: var(--rz-tint);
	color: var(--rz-text);
}

/* ============================================================
   Top-Bar (immer sichtbar): Logo, jetzt-laeuft, Play/Stop,
   LIVE-Punkt, Format-Pill. Auf Mobilgeraeten = Mini-Player.
   ============================================================ */
.app-topbar {
	position: sticky;
	top: 0;
	z-index: 30;
	background: var(--rz-navy);
	box-shadow: var(--rz-shadow-2);
}

.topbar-inner {
	display: flex;
	align-items: center;
	gap: .6rem;
	min-height: var(--rz-topbar-h);
	padding-top: .5rem;
	padding-bottom: .5rem;
}

.brand { flex: 0 0 auto; }

.brand-logo {
	display: block;
	height: 2.25rem;
	width: auto;
	max-width: 180px;
	object-fit: contain;
}

.mini-actions {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: .5rem;
	flex: 0 0 auto;
}

.mini-fmt {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	border: 1px solid rgba(255, 255, 255, .35);
	border-radius: 999rem;
	background: transparent;
	color: #fff;
	padding: .3rem .65rem;
	font-size: .85rem;
	font-weight: 600;
	transition: background-color .15s, color .15s;
}

.mini-fmt:hover, .mini-fmt:focus-visible {
	background: rgba(255, 255, 255, .16);
	color: #fff;
}

.mini-fmt { position: relative; }

.live-dot {
	display: inline-block;
	width: .5rem;
	height: .5rem;
	border-radius: 50rem;
	background: var(--rz-gray);
	vertical-align: middle;
	flex: 0 0 auto;
}

.live-dot.is-live { background: var(--rz-accent); }
body.is-playing .mini-fmt .live-dot { background: var(--rz-accent); }

/* ============================================================
   Hauptbereich
   ============================================================ */
.app-main {
	flex: 1 1 auto;
	padding-top: 1rem;
	padding-bottom: calc(var(--rz-nav-h) + 1.5rem);
}

/* ============================================================
   Player-Karte
   ============================================================ */
.player-card {
	position: relative;
	background: var(--rz-card-bg);
	border: 1px solid var(--rz-line);
	border-radius: var(--rz-radius-lg);
	box-shadow: var(--rz-shadow-2);
	overflow: hidden;
	margin-bottom: 1rem;
}

.nowplaying-bar {
	padding: .75rem 1rem;
	border-bottom: 1px solid var(--rz-line);
	background: linear-gradient(180deg, var(--rz-tint), transparent);
}

.np-label {
	display: block;
	font-size: .75rem;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--rz-gray);
}

.nowplaying-bar p {
	margin: .15rem 0 0;
	font-size: 1.15rem;
	font-weight: 500;
	min-height: 1.5rem;
}

/* ============================================================
   Buehne / Framework-Presets
   ============================================================ */
.stage { background: var(--rz-stage); position: relative; }

.html-box { width: 100%; }

/* Video: eigene Light-DOM-UI (hlsjs-video + eigene Controls), das
   Framework-Preset rendert hier nichts. Oberflaeche 16:9 im
   Buehnen-Dunkelblau; Controls als automatisch ausblendendes Overlay
   am unteren Rand (wie YouTube/Twitch). */
.html-video-box {
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
	padding: .75rem 1rem;
}

.video-stage {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	width: 100%;
}

.video-surface {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	max-height: 65vh;
	background: #000;
	border-radius: var(--rz-radius);
	box-shadow: 0 .35rem .9rem rgba(3, 12, 71, .45);
	overflow: hidden;
}

.video-surface hlsjs-video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.video-big-play {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 5rem;
	height: 5rem;
	border-radius: 50rem;
	border: 2px solid rgba(255, 255, 255, .85);
	background: rgba(3, 12, 71, .55);
	color: #fff;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background-color .15s, transform .15s;
}

.video-big-play .ic {
	width: 2.2rem;
	height: 2.2rem;
	fill: currentColor;
	margin-left: .25rem;
}

.video-big-play:hover, .video-big-play:focus-visible {
	background: var(--rz-primary);
	transform: translate(-50%, -50%) scale(1.08);
}

body.mode-video.is-playing .video-big-play { display: none; }

/* Stummer iOS-Autostart: zentrale Entstumm-Schaltflaeche, solange das
   Video gedämpft spielt. Wie der Start-Button, aber nur bei Autostart
   ohne Ton (Nutzergeste zum Entstummen). */
.video-unmute {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 5.5rem;
	height: 5.5rem;
	border-radius: 50rem;
	border: 2px solid rgba(255, 255, 255, .9);
	background: rgba(3, 12, 71, .6);
	color: #fff;
	cursor: pointer;
	display: none;
	align-items: center;
	justify-content: center;
	transition: background-color .15s, transform .15s;
	z-index: 2;
}

.video-unmute .ic {
	width: 2.6rem;
	height: 2.6rem;
	fill: currentColor;
	stroke: currentColor;
}

.video-unmute:hover, .video-unmute:focus-visible {
	background: var(--rz-primary);
	transform: translate(-50%, -50%) scale(1.08);
}

body.mode-video.is-autoplay-muted .video-unmute { display: flex; }

.video-controls {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: .45rem .55rem;
	padding: 1.1rem .8rem .55rem;
	background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .62) 55%);
	transition: opacity .25s ease, transform .25s ease;
}

.video-surface.controls-hidden .video-controls {
	opacity: 0;
	transform: translateY(100%) translateY(1px);
	pointer-events: none;
}

.video-surface:focus-within .video-controls {
	opacity: 1;
	transform: none;
	pointer-events: auto;
}

.video-controls .audio-btn {
	min-width: 2.6rem;
	height: 2.6rem;
	padding: 0 .5rem;
}

.video-controls .ic { width: 1.4rem; height: 1.4rem; }

.video-controls .vol-slider { width: 5.5rem; }

.video-controls-spacer { flex: 1; }

body.is-pip .audio-btn-pip {
	background: var(--rz-primary);
	color: #fff;
}

.quality-select {
	background: rgba(0, 0, 0, .55);
	color: #fff;
	border: 1px solid rgba(255, 255, 255, .35);
	border-radius: var(--rz-radius-sm);
	padding: .25rem .4rem;
	font-size: .85rem;
	max-width: 8rem;
}

.quality-select option { background: #0f1757; color: #fff; }

.video-surface:fullscreen,
.video-surface:-webkit-full-screen {
	width: 100vw;
	height: 100vh;
	max-height: none;
	aspect-ratio: auto;
	border-radius: 0;
	background: #000;
}

.video-surface:fullscreen hlsjs-video,
.video-surface:-webkit-full-screen hlsjs-video { height: 100vh; }

.audio-btn .ic-fsexit { display: none; }
body.is-fs .audio-btn-fs { background: var(--rz-primary); color: #fff; }
body.is-fs .audio-btn-fs .ic-fs { display: none; }
body.is-fs .audio-btn-fs .ic-fsexit { display: block; }

/* Audio: eigene Controls im Light-DOM.
   Live-only: Stop statt Pause. */
.html-audio-box {
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
	padding: .75rem 1rem;
	min-height: 0;
}

.audio-stage {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 1.25rem;
	max-width: 100%;
}

.audio-visual {
	display: flex;
	align-items: flex-start;
	gap: 2rem;
}

.host-avatar,
.album-cover {
	width: 9.375rem;
	height: 9.375rem;
	border-radius: var(--rz-radius);
	object-fit: cover;
	background: var(--rz-stage);
	box-shadow: 0 8px 20px rgba(0, 0, 0, .4);
}

.audio-controls {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	justify-content: center;
	gap: .75rem;
}

.audio-btn {
	min-width: 3rem;
	height: 3rem;
	border: 1px solid rgba(255, 255, 255, .35);
	border-radius: var(--rz-radius-pill);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	color: #fff;
	cursor: pointer;
	padding: 0 .9rem;
	transition: background-color .15s, color .15s, box-shadow .15s;
}

.audio-btn:hover, .audio-btn:focus-visible {
	background: rgba(255, 255, 255, .14);
	color: #fff;
}

body.is-playing .audio-btn-playstop,
body.is-muted .audio-btn-mute {
	background: var(--rz-grad-brand);
	color: #fff;
	border-color: transparent;
	box-shadow: var(--rz-btn-glow);
}

body.is-playing .audio-btn-playstop:hover,
body.is-muted .audio-btn-mute:hover {
	background: linear-gradient(135deg, var(--rz-royal), var(--rz-navy));
	color: #fff;
}

.audio-btn .ic {
	width: 1.7rem;
	height: 1.7rem;
	fill: currentColor;
}

.audio-btn .ic-stop, .audio-btn-mute .ic-muted { display: none; }
body.is-playing .audio-btn-playstop .ic-play { display: none; }
body.is-playing .audio-btn-playstop .ic-stop { display: block; }
body.is-muted .audio-btn-mute .ic-vol { display: none; }
body.is-muted .audio-btn-mute .ic-muted { display: block; }

body.is-buffering .audio-btn-playstop .ic { display: none; }
body.is-buffering .audio-btn-playstop::before {
	content: "";
	width: 1.7rem;
	height: 1.7rem;
	border: 3px solid rgba(255, 255, 255, .35);
	border-top-color: #fff;
	border-radius: 50%;
	animation: rzspin .7s linear infinite;
}

@keyframes rzspin { to { transform: rotate(360deg); } }

.audio-vol {
	display: flex;
	align-items: center;
	gap: .5rem;
}

.vol-slider {
	width: 6.5rem;
	accent-color: var(--rz-primary);
}

.audio-live-flag {
	font-size: .7rem;
	font-weight: 600;
	letter-spacing: .12em;
	color: var(--rz-accent);
	border: 1px solid var(--rz-accent);
	border-radius: var(--rz-radius-pill);
	padding: .2rem .5rem;
	text-transform: uppercase;
}

@media (max-width: 640px) {
	.html-audio-box .host-avatar, .html-audio-box .album-cover { width: 7.5rem; height: 7.5rem; }
	.audio-stage { gap: 1rem; }
	.audio-controls { gap: .5rem; }
}

/* Nachrichten -------------------------------------------------------- */
.messages {
	margin: 0;
	padding: .25rem 1rem;
	font-size: .9rem;
	color: var(--rz-warning);
}

/* Live-Banner -------------------------------------------------------- */
.live-banner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin: 0;
	padding: .6rem 1rem;
	background: var(--rz-success);
	color: #fff;
	font-weight: 600;
}

/* ============================================================
   Stage-Layout + Chat.
   Schmal: Chat ist ein Off-Canvas-Panel (Modul "Chat").
   Breit (>= 1100px): Chat sitzt als feste Spalte rechts; der
   Chat-Button toggelt die Spalte. Das Iframe wird nie entfernt.
   ============================================================ */
.stage-layout { display: block; }

.chat-dock {
	background: var(--rz-card-bg);
	border: 1px solid var(--rz-line);
	border-radius: var(--rz-radius-lg);
	box-shadow: var(--rz-shadow-2);
	overflow: hidden;
}

.chat-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: .6rem 1rem;
	font-weight: 600;
	color: var(--rz-primary);
	border-bottom: 1px solid var(--rz-line);
	background: var(--rz-tint);
}

.chat-close,
.js-screen-close {
	background: transparent;
	border: none;
	color: var(--rz-gray);
	font-size: 1.25rem;
	line-height: 1;
	width: 2rem;
	height: 2rem;
	padding: 0;
	border-radius: 50%;
	transition: background-color .15s, color .15s;
}

.chat-close:hover, .js-screen-close:hover {
	background: var(--rz-tint);
	color: var(--rz-text);
}

.chat-dock iframe {
	width: 100%;
	height: 480px;
	border: 0;
	display: block;
}

@media (max-width: 1099.98px) {
	.stage-layout { display: block; }

	body.module-channels .stage-layout,
	body.module-mail .stage-layout,
	body.module-info .stage-layout { display: none; }

	/* Chat-Panel: Off-Canvas unter der Top-Bar, ueber der Bottom-Nav */
	.chat-dock {
		position: fixed;
		left: 0;
		right: 0;
		top: var(--rz-topbar-h);
		bottom: var(--rz-nav-h);
		z-index: 35;
		display: flex;
		flex-direction: column;
		border-radius: 0;
		border-left: none;
		border-right: none;
		transform: translateX(100%);
		opacity: 0;
		pointer-events: none;
		transition: transform .22s ease, opacity .22s ease;
	}

	body.module-chat .chat-dock {
		transform: translateX(0);
		opacity: 1;
		pointer-events: auto;
	}

	.chat-dock iframe { flex: 1 1 auto; min-height: 0; }
}

@media (min-width: 1100px) {
	.stage-layout {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(17rem, min(20vw, 26rem));
		gap: 1rem;
		align-items: stretch;
	}

	/* Nur-Audio (kein Video): Chat darf doppelt so breit sein */
	body.mode-audio .stage-layout {
		grid-template-columns: minmax(0, 1fr) minmax(17rem, min(40vw, 52rem));
	}

	.stage-layout > .player-card { min-width: 0; margin-bottom: 0; display: flex; flex-direction: column; }
	.stage-layout > .chat-dock { margin-top: 0; flex: 1 1 auto; }

	/* Karte faellt durch den Grid-Stretch hoeher als ihr Inhalt –
	   Stage fuellt die Karte, Inhalt wird vertikal zentriert. */
	.stage-layout > .player-card .stage { flex: 1 1 auto; display: flex; flex-direction: column; }
	.stage-layout > .player-card .html-audio-box,
	.stage-layout > .player-card .html-video-box { flex: 1 1 auto; align-items: center; }

	.chat-dock { display: flex; flex-direction: column; }
	.chat-dock iframe { flex: 1 1 auto; min-height: 0; }

	body.chat-hidden .chat-dock { display: none; }
}

/* ============================================================
   Module (Kanäle, Studiomail, Info): Overlay-Anzeige.
   Schmal: Vollbild-Bottom-Sheet. Breit: zentrierte Karte.
   ============================================================ */
.app-screen {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 40;
	background: var(--rz-scrim);
	align-items: center;
	justify-content: center;
	padding: 1rem;
}

body.module-channels .screen-channels,
body.module-mail .screen-mail,
body.module-info .screen-info {
	display: flex;
}

.screen-panel {
	width: 100%;
	max-width: 38rem;
	max-height: calc(100vh - 2rem);
	overflow: auto;
	background: var(--rz-card-bg);
	border: 1px solid var(--rz-line);
	border-radius: var(--rz-radius-lg);
	box-shadow: var(--rz-shadow-3);
}

.screen-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .5rem;
	padding: .6rem 1rem;
	border-bottom: 1px solid var(--rz-line);
	position: sticky;
	top: 0;
	background: var(--rz-card-bg);
}

.screen-title {
	margin: 0;
	font-size: 1.05rem;
	font-weight: 600;
}

.screen-foot {
	display: flex;
	justify-content: flex-end;
	gap: .5rem;
	padding: .75rem 1rem;
	border-top: 1px solid var(--rz-line);
	/* Bleibt beim Scrollen immer sichtbar – der Senden-Button ist auf
	   kleinen Screens nie "aus der Reichweite". */
	position: sticky;
	bottom: 0;
	background: var(--rz-card-bg);
}

@media (max-width: 1099.98px) {
	/* Sheet liegt zwischen Kopfleiste und Bottom-Nav – ohne vh/dvh-Rechnung.
	   So ist der sticky Senden-Button immer sichtbar, auch auf iPhones
	   mit URL-Leiste. */
	.app-screen {
		align-items: stretch;
		justify-content: stretch;
		padding: 0;
		top: var(--rz-topbar-h);
		bottom: var(--rz-nav-h);
	}

	.screen-panel {
		width: 100%;
		max-width: none;
		max-height: none;
		overflow: auto;
		border-radius: 0;
		border: none;
	}

	/* Studiomail kompakter auf Telefonen, damit alles ohne viel Scrollen passt */
	#mailForm { padding: .75rem; gap: .6rem; }
}

/* Kanäle-Liste -------------------------------------------------------- */
.channel-list {
	list-style: none;
	margin: 0;
	padding: .4rem;
	display: grid;
	gap: .2rem;
}

.channel-row-btn {
	display: block;
	width: 100%;
	border: none;
	background: transparent;
	color: var(--rz-text);
	padding: .6rem .75rem;
	text-align: left;
	cursor: pointer;
	border-radius: var(--rz-radius-sm);
	transition: background-color .15s;
}

.channel-row-btn:hover { background: var(--rz-light); }
.channel-row-btn:focus-visible {
	outline: 2px solid var(--rz-primary);
	outline-offset: -2px;
}

.channel-name {
	display: flex;
	align-items: center;
	gap: .4rem;
	font-weight: 600;
}

.channel-opt {
	font-weight: 400;
	color: var(--rz-gray);
	font-size: .85rem;
}

.channel-desc {
	display: block;
	font-size: .85rem;
	color: var(--rz-gray);
}

.channel-mark {
	margin-left: auto;
	color: var(--rz-primary);
	font-weight: 700;
	display: none;
}

.channel-row.active .channel-row-btn { background: var(--rz-tint); }
.channel-row.active .channel-name { color: var(--rz-primary); }
.channel-row.active .channel-mark { display: inline; }

/* Videokanal: Lebenspunkt nur solange der Stream laeuft */
.channel-row[data-key="video"] .live-dot.is-live { background: var(--rz-accent); }

/* Videokanal offline: Klick deaktiviert (kein Setzen von mode=video) */
.channel-row[data-key="video"].is-offline .channel-row-btn {
	cursor: not-allowed;
	color: var(--rz-gray);
	opacity: .65;
}
.channel-row[data-key="video"].is-offline .channel-row-btn:hover { background: transparent; }

/* Studiomail ---------------------------------------------------------- */
#mailForm {
	display: flex;
	flex-direction: column;
	gap: .75rem;
	padding: 1rem;
}

.mail-field { display: block; }

.mail-field > span {
	display: block;
	font-size: .8rem;
	color: var(--rz-gray);
	margin-bottom: .2rem;
}

.mail-field input,
.mail-field textarea {
	width: 100%;
	padding: .5rem .6rem;
	border: 1px solid var(--rz-line);
	border-radius: var(--rz-radius-sm);
	font: inherit;
	background: var(--rz-card-bg);
	color: var(--rz-text);
	transition: border-color .15s, box-shadow .15s;
}

.mail-field input:focus,
.mail-field textarea:focus {
	outline: none;
	border-color: var(--rz-primary);
	box-shadow: 0 0 0 3px var(--rz-tint);
}

.mail-field textarea { resize: vertical; }

.mail-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.mail-feedback {
	margin: 0;
	font-size: .9rem;
	font-weight: 600;
}

.mail-feedback.is-ok { color: var(--rz-success); }
.mail-feedback.is-err { color: var(--rz-danger); }

/* Info ----------------------------------------------------------------- */
.info-links {
	display: flex;
	flex-direction: column;
	gap: .5rem;
	padding: 1rem;
}

.info-links a {
	padding: .5rem .6rem;
	border-radius: var(--rz-radius);
	text-decoration: none;
	font-weight: 600;
}

.info-links a:hover { background: var(--rz-tint); color: var(--rz-text); }

.theme-picker {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: .4rem 1rem;
	padding: .75rem 1rem;
	border-top: 1px solid var(--rz-line);
}

.theme-caption { font-size: .85rem; color: var(--rz-gray); margin-right: .25rem; }

/* ============================================================
   Sendeplan (Module): jetzt-Banner, Tagesliste.
   Der Feed listet nur moderierte Sendungen + WDH; dazwischen
   laeuft das Automatik-Musikprogramm (nicht im Kalender).
   ============================================================ */
.sched-view { padding: .6rem .75rem .75rem; }

.now-banner {
	background: var(--rz-grad-brand);
	color: #fff; border-radius: var(--rz-radius);
	padding: .8rem 1rem; margin-bottom: .6rem;
	display: flex; align-items: center; gap: 1rem;
}
.now-banner .now-label { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; opacity: .8; }
.now-label-row { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.now-repeat {
	background: var(--rz-accent-tint); border: 1px solid var(--rz-accent);
	color: var(--rz-accent); border-radius: var(--rz-radius-pill);
	font-size: .62rem; font-weight: 700; letter-spacing: .06em;
	text-transform: uppercase; padding: .05rem .5rem; line-height: 1.4;
}
/* Video-Marker (Kamera + Text): Banner-Chip + Zeilen-Badge rechts oben
   (gleiche Ecke wie .stage-badge; bei Wiederholung+Video gestapelt) */
.now-video { display: inline-flex; align-items: center; gap: .25rem; }
.now-video svg { width: .7rem; height: .7rem; fill: currentColor; }
.now-video[hidden], .sched-vid[hidden] { display: none; }
.sched-vid {
	position: absolute; top: .45rem; right: .55rem;
	display: inline-flex; align-items: center; gap: .25rem;
	background: var(--rz-accent-tint); border: 1px solid var(--rz-accent);
	color: var(--rz-accent); border-radius: var(--rz-radius-pill);
	font-size: .6rem; font-weight: 700; letter-spacing: .06em;
	text-transform: uppercase; padding: .1rem .5rem; line-height: 1.4;
	pointer-events: none;
}
.stage-row.is-repeat .sched-vid { top: 1.85rem; }
.sched-vid svg { width: .65rem; height: .65rem; fill: currentColor; }
.now-banner .now-title { font-size: 1.15rem; font-weight: 700; margin: .15rem 0 .3rem; }
.now-banner .now-time { font-size: .85rem; opacity: .9; }
.now-banner .now-pill {
	margin-left: auto; flex-shrink: 0; text-align: center;
	background: var(--rz-accent-tint); border: 1px solid var(--rz-accent);
	border-radius: var(--rz-radius); padding: .3rem .65rem; min-width: 5rem;
}
.now-banner .now-pill b { display: block; font-size: 1.05rem; color: var(--rz-accent); }
.now-banner .now-pill span { font-size: .66rem; opacity: .85; display: block; }

.stage-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.stage-row {
	position: relative;
	background: var(--rz-card-bg); border: 1px solid var(--rz-line); border-radius: var(--rz-radius-sm);
	padding: .55rem .7rem; display: grid; grid-template-columns: 4.4rem 1fr; gap: .6rem; align-items: center;
	transition: background-color .15s, border-color .15s;
}
/* Wiederholung: Eck-Badge rechts oben (Titel wird ohne "WDH" ausgegeben) */
.stage-badge {
	position: absolute; top: .45rem; right: .55rem;
	background: var(--rz-grad-brand); color: #fff;
	font-size: .6rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
	padding: .15rem .5rem; border-radius: var(--rz-radius-pill);
	box-shadow: var(--rz-shadow-1); pointer-events: none;
}
.stage-row.is-repeat > div:nth-of-type(2) { padding-right: 7.25rem; }
.stage-row.is-past { opacity: .5; }
.stage-row.is-now { border-color: var(--rz-primary); background: var(--rz-tint); box-shadow: inset 0 0 0 1px var(--rz-primary), var(--rz-shadow-1); }
.stage-row .time { font-weight: 700; color: var(--rz-primary); }
.stage-row .time small { display: block; font-weight: 400; color: var(--rz-gray); font-size: .68rem; }
.stage-row .prog { height: .35rem; background: var(--rz-line); border-radius: var(--rz-radius-pill); margin-top: .35rem; overflow: hidden; max-width: 14rem; }
.stage-row .prog i { display: block; height: 100%; background: var(--rz-grad-brand); border-radius: var(--rz-radius-pill); }
.stage-row.is-music { background: var(--rz-card-bg); border: 1px solid var(--rz-line); }
.stage-row.is-music .time { color: var(--rz-gray); font-weight: 600; }

.empty { background: var(--rz-card-bg); border: 1px dashed var(--rz-line); border-radius: var(--rz-radius); padding: 2rem 1rem; text-align: center; color: var(--rz-gray); }

/* ============================================================
   Bottom-Navigation
   ============================================================ */
.app-nav {
	position: fixed;
	display: flex;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 50;
	gap: .5rem;
	padding: .5rem .75rem calc(.5rem + env(safe-area-inset-bottom, 0px));
	background: var(--rz-card-bg);
	border-top: 1px solid var(--rz-line);
	box-shadow: var(--rz-shadow-up);
}

.app-nav-inner,
.app-nav ul {
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
}

.nav-btn {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: .15rem;
	min-height: calc(var(--rz-nav-h) - 1rem);
	background: transparent;
	border: 1px solid transparent;
	border-radius: var(--rz-radius-lg);
	color: var(--rz-gray);
	font-size: .68rem;
	font-weight: 600;
	letter-spacing: .01em;
	cursor: pointer;
	position: relative;
	transition: background-color .15s, color .15s, box-shadow .15s, transform .15s;
}

.nav-btn:hover, .nav-btn:focus-visible {
	background: var(--rz-tint);
	color: var(--rz-text);
	transform: translateY(-1px);
}

.nav-btn.active,
.nav-btn[aria-pressed="true"] {
	background: var(--rz-grad-brand);
	border-color: transparent;
	color: #fff;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), var(--rz-btn-glow);
}

.nav-label { color: inherit; }

.nav-ic {
	width: 1.35rem;
	height: 1.35rem;
	flex: 0 0 auto;
}

.nav-label {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
}

@media (min-width: 1100px) {
	.nav-btn { font-size: .75rem; }
}

.copyright {
	margin: 0;
	padding: .8rem 1rem;
	border-top: 1px solid var(--rz-line);
	font-size: .85rem;
	color: var(--rz-gray);
}

.app-version {
	margin: 0;
	padding: 0 1rem .8rem;
	font-size: .75rem;
	color: var(--rz-gray);
}

/* ============================================================
   Eigener Pull-to-Refresh (nur am Dokumentanfang, Spinner)
   ============================================================ */
.ptr-refresh {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	display: flex;
	justify-content: center;
	pointer-events: none;
	transition: opacity .15s ease;
	opacity: 0;
	z-index: 1000;
}
body.is-ptr-active .ptr-refresh {
	opacity: 1;
}
.ptr-spinner {
	width: 2rem;
	height: 2rem;
	margin-top: .6rem;
	border-radius: 50%;
	border: 3px solid var(--rz-line);
	border-top-color: var(--rz-primary);
	animation: ptr-spin .8s linear infinite;
}
@keyframes ptr-spin {
	to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
	.ptr-spinner { animation: none; border-top-color: var(--rz-gray); }
}