/* DN Continuous 03 – Player-Dock, Hörproben-Schalter, Hinweis (Asset: /assets/continuous-player03.css).
 * Nur .dn-*-Klassen und html.dn-*-Zustände; bestehende Seitenregeln werden nicht verändert.
 * Farben wie der Bestand: Dunkel #0F0F10, Violett #5B3FA0 (Schaltfläche auf Hell), Fokusring #9777D0. Sichtprüfung nötig.
 * Symbole (Schließen, Play/Pause) sind per CSS gezeichnet (Striche/Geometrie), keine Textzeichen. */

.dn-dock-root { display: contents; }
.dn-live { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------------------------------------------------------------- Gezeichnetes Kreuz (Schließen) */
.dn-x { position: relative; display: block; width: 18px; height: 18px; flex: none; }
.dn-x::before, .dn-x::after { content: ""; position: absolute; left: 1px; right: 1px; top: 50%; height: 2px; margin-top: -1px; border-radius: 2px; background: currentColor; }
.dn-x::before { transform: rotate(45deg); }
.dn-x::after { transform: rotate(-45deg); }

/* ---------------------------------------------------------------- Dock */
.dn-dock {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 9000;
	display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(200px, 2fr) auto; align-items: center; gap: 10px 14px;
	padding: 10px max(16px, env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
	background: #0F0F10; color: #F0F0F1; border-top: 1px solid rgba(255, 255, 255, .14);
	box-shadow: 0 -8px 24px rgba(0, 0, 0, .35);
	color-scheme: dark; font: 400 14px/1.35 Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
}
.dn-dock[hidden] { display: none !important; }
.dn-dock-cover { grid-column: 1; display: block; width: 48px; height: 48px; border-radius: 6px; object-fit: cover; background: #2B2140; }
.dn-dock-cover[hidden] { display: none; }
.dn-dock-meta { grid-column: 2; display: flex; flex-direction: column; min-width: 0; }
.dn-dock-title { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dn-dock-sub { color: #D9D9DC; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dn-dock-time { color: #D9D9DC; font-variant-numeric: tabular-nums; }
.dn-dock-status { color: #F1B0A8; }
.dn-dock-status:empty { display: none; }
.dn-dock-audio { grid-column: 3; width: 100%; min-width: 0; height: 40px; }
.dn-dock-close, .dn-notice-close {
	display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 1px solid rgba(255, 255, 255, .3);
	border-radius: 50%; background: transparent; color: #fff; cursor: pointer;
}
.dn-dock-close { grid-column: 4; }
.dn-dock-close:hover, .dn-notice-close:hover { background: rgba(255, 255, 255, .12); }
.dn-dock :focus-visible, .dn-notice :focus-visible, .dn-inline-btn:focus-visible { outline: 2px solid #9777D0; outline-offset: 3px; }

@media (max-width: 700px) {
	.dn-dock { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "cover meta close" "audio audio audio"; row-gap: 6px; }
	.dn-dock-cover { grid-area: cover; }
	.dn-dock-meta { grid-area: meta; }
	.dn-dock-close { grid-area: close; }
	.dn-dock-audio { grid-area: audio; }
}

/* ---------------------------------------------------------------- Hinweis (z. B. "Absenden läuft", Ladefehler) – unabhängig vom Dock */
.dn-notice {
	position: fixed; left: max(12px, env(safe-area-inset-left, 0px)); right: max(12px, env(safe-area-inset-right, 0px));
	bottom: calc(var(--dn-dock-h, 0px) + 12px + env(safe-area-inset-bottom, 0px)); z-index: 9001;
	display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; max-width: 640px; margin: 0 auto; padding: 10px 12px;
	border-radius: 10px; background: #2B2140; color: #F0F0F1; box-shadow: 0 8px 28px rgba(0, 0, 0, .4);
	font: 400 15px/1.4 Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
}
.dn-notice[hidden] { display: none !important; }
.dn-notice-text { flex: 1 1 220px; min-width: 0; }
.dn-notice-btn { min-height: 44px; padding: 0 16px; border: 0; border-radius: 999px; background: #B89CFF; color: #060917; font: 700 14px/1 Inter, system-ui, sans-serif; cursor: pointer; }
.dn-notice-btn[hidden] { display: none; }

/* Seite bekommt unten Platz, damit Dock weder Formular-Absenden noch Footer verdeckt (Höhe per ResizeObserver). */
html.dn-dock-on body { padding-bottom: var(--dn-dock-h, 0px); }
html.dn-dock-on { scroll-padding-bottom: var(--dn-dock-h, 0px); }
html.dn-dock-on .to-top { margin-bottom: var(--dn-dock-h, 0px); }

/* ---------------------------------------------------------------- Inline-Schalter (ersetzt das native Audio-Element der Hörprobe) */
.dn-inline { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; min-width: 0; max-width: 100%; box-sizing: border-box; }
.dn-inline--block { margin: 12px 0 0; width: 100%; } /* corporate-live__player: normaler Blockfluss, kein Grid-Bereich */
.dn-inline-btn {
	display: inline-flex; align-items: center; gap: 12px; min-height: 48px; max-width: 100%; box-sizing: border-box; padding: 0 26px 0 18px; border: 0; border-radius: 999px;
	background: #5B3FA0; color: #fff; font-family: inherit; font-weight: 700; font-size: max(16px, 1rem); line-height: 1.2; text-align: left; cursor: pointer;
	transition: background-color .15s ease;
}
.dn-inline-btn:hover { background: #46307F; }
.dn-inline-btn[aria-busy="true"] { cursor: progress; }
.dn-inline-label { min-width: 0; overflow-wrap: anywhere; }
.dn-inline-icon { position: relative; width: 16px; height: 16px; flex: none; }
.dn-inline-icon::before { content: ""; position: absolute; inset: 0; background: currentColor; clip-path: polygon(15% 0, 100% 50%, 15% 100%); }
.dn-inline-btn[data-state="playing"] .dn-inline-icon::before { clip-path: none; background: linear-gradient(90deg, currentColor 0 35%, transparent 35% 65%, currentColor 65% 100%); }
.dn-inline-btn[data-state="loading"] .dn-inline-icon::before { clip-path: circle(35% at 50% 50%); opacity: .7; }
.dn-inline-time { color: #3B3550; font-variant-numeric: tabular-nums; font-size: max(14px, .9rem); }
.dn-inline-status { flex-basis: 100%; margin: 0; color: #8A1F11; font-size: max(14px, .9rem); }
.dn-inline-status:empty { display: none; }

/* ---------------------------------------------------------------- Navigation */
html.dn-nav-loading { cursor: progress; }
html.dn-nav-loading::before {
	content: ""; position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 10001; background: #B89CFF;
	transform-origin: left; animation: dn-nav-bar 1.2s cubic-bezier(.4, 0, .2, 1) infinite;
}
@keyframes dn-nav-bar { 0% { transform: scaleX(.05); } 60% { transform: scaleX(.7); } 100% { transform: scaleX(.95); opacity: .6; } }
main[data-dn-focus-target]:focus, main[data-dn-focus-target]:focus-visible, [data-dn-focus-target]:focus { outline: none; }

@media (prefers-reduced-motion: reduce) {
	.dn-inline-btn { transition: none; }
	html.dn-nav-loading::before { animation: none; transform: scaleX(.5); }
}