/* Play-Button links, bündig mit dem RSP-Logo in der Navbar darunter */
.rsp-topbar-title .rsp-topbar-playicon-container { width: auto; flex-grow: 0; }
.rsp-topbar-title .rsp-player-icon { margin: 0; }
.rsp-topbar-moderator .uk-width-expand\@m { min-width: 0; }
.rsp-topbar-moderator #showtime, .rsp-topbar-moderator #showname, .rsp-topbar-moderator #mod_header_link1 > div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#page\#0 { font-family: 'Titillium Web'; font-weight: 600; font-size: 24px; text-transform: uppercase; color: #700040; } #player_artist { font-family: 'Titillium Web'; font-weight: 600; font-size: 36px; color: #232f3f; text-transform: uppercase; text-align: right; line-height: 1.2; } #player_title { font-family: 'Roboto'; font-weight: 500; font-size: 20px; color: #232f3f; line-height: 1.2; text-align: right; text-transform: uppercase; } #page\#1 .el-content{width:200px !important;} #page\#2 #article-31 > ul > li > a {display:none;} #page\#2 #article-31 > h1 {display:none;} #page\#3{font-size: 32px;font-weight: 600; font-family: 'Titillium Web'; text-transform: uppercase;} #page\#4 .el-item { position: relative; display: flex; flex-direction: column; height: 100%; overflow: hidden; border-radius: 16px; background: #fff; box-shadow: 0 6px 22px rgba(35, 47, 63, .09); transition: transform .3s ease, box-shadow .3s ease; } #page\#4 .el-item:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(112, 0, 64, .18); } /* Bild 16:9, Zoom beim Überfahren, Farbverlauf-Streifen unten */ #page\#4 .el-item .uk-card-media-top { position: relative; aspect-ratio: 16 / 9; overflow: hidden; } #page\#4 .el-item .uk-card-media-top a, #page\#4 .el-item .uk-card-media-top picture { display: block; height: 100%; } #page\#4 .el-item .uk-card-media-top img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; } #page\#4 .el-item:hover .uk-card-media-top img { transform: scale(1.06); } #page\#4 .el-item .uk-card-media-top::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: linear-gradient(90deg, #700040, #e6007e 55%, #fc8800); } #page\#4 .el-item .uk-card-body { display: flex; flex: 1; flex-direction: column; padding: 20px 24px 22px; } /* Datum als Überzeile */ #page\#4 .el-meta { margin: 0 !important; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #fc8800; } #page\#4 .el-title { margin-top: 6px !important; font-family: 'Titillium Web', sans-serif; font-size: 21px; font-weight: 700; line-height: 1.25; color: #232f3f !important; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; transition: color .25s ease; } #page\#4 .el-item:hover .el-title { color: #700040 !important; } #page\#4 .el-content { margin-top: 10px !important; font-size: 15px; line-height: 1.55; color: #5b6573; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* „Weiterlesen“ immer unten, ganze Karte klickbar */ #page\#4 .el-item .uk-card-body > :last-child { margin-top: auto !important; padding-top: 16px; } #page\#4 .el-link { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; color: #700040; text-decoration: none !important; } #page\#4 .el-link::after { content: "→"; transition: transform .25s ease; } #page\#4 .el-item:hover .el-link::after { transform: translateX(4px); } #page\#4 .el-link::before { content: ""; position: absolute; inset: 0; z-index: 1; } @media (max-width: 639px) { #page\#4 .el-item .uk-card-body { padding: 16px 18px 18px; } #page\#4 .el-title { font-size: 19px; } } @media (prefers-reduced-motion: reduce) { #page\#4 .el-item, #page\#4 .el-item .uk-card-media-top img, #page\#4 .el-title, #page\#4 .el-link::after { transition: none; } #page\#4 .el-item:hover { transform: none; } #page\#4 .el-item:hover .uk-card-media-top img { transform: none; } } #page\#5 .el-item { position: relative; display: flex; flex-direction: column; height: 100%; overflow: hidden; border-radius: 16px; background: #fff; box-shadow: 0 6px 22px rgba(35, 47, 63, .09); transition: transform .3s ease, box-shadow .3s ease; } #page\#5 .el-item:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(112, 0, 64, .18); } /* Bild 16:9, Zoom beim Überfahren, Farbverlauf-Streifen unten */ #page\#5 .el-item .uk-card-media-top { position: relative; aspect-ratio: 16 / 9; overflow: hidden; } #page\#5 .el-item .uk-card-media-top a, #page\#5 .el-item .uk-card-media-top picture { display: block; height: 100%; } #page\#5 .el-item .uk-card-media-top img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; } #page\#5 .el-item:hover .uk-card-media-top img { transform: scale(1.06); } #page\#5 .el-item .uk-card-media-top::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: linear-gradient(90deg, #700040, #e6007e 55%, #fc8800); } #page\#5 .el-item .uk-card-body { display: flex; flex: 1; flex-direction: column; padding: 20px 24px 22px; } /* Datum als Überzeile */ #page\#5 .el-meta { margin: 0 !important; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #fc8800; } #page\#5 .el-title { margin-top: 6px !important; font-family: 'Titillium Web', sans-serif; font-size: 21px; font-weight: 700; line-height: 1.25; color: #232f3f !important; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; transition: color .25s ease; } #page\#5 .el-item:hover .el-title { color: #700040 !important; } #page\#5 .el-content { margin-top: 10px !important; font-size: 15px; line-height: 1.55; color: #5b6573; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* „Weiterlesen“ immer unten, ganze Karte klickbar */ #page\#5 .el-item .uk-card-body > :last-child { margin-top: auto !important; padding-top: 16px; } #page\#5 .el-link { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; color: #700040; text-decoration: none !important; } #page\#5 .el-link::after { content: "→"; transition: transform .25s ease; } #page\#5 .el-item:hover .el-link::after { transform: translateX(4px); } #page\#5 .el-link::before { content: ""; position: absolute; inset: 0; z-index: 1; } @media (max-width: 639px) { #page\#5 .el-item .uk-card-body { padding: 16px 18px 18px; } #page\#5 .el-title { font-size: 19px; } } @media (prefers-reduced-motion: reduce) { #page\#5 .el-item, #page\#5 .el-item .uk-card-media-top img, #page\#5 .el-title, #page\#5 .el-link::after { transition: none; } #page\#5 .el-item:hover { transform: none; } #page\#5 .el-item:hover .uk-card-media-top img { transform: none; } } #album-tip{position:relative;overflow:hidden;padding:28px 28px 26px !important;border-radius:18px;background:linear-gradient(150deg,#700040 0%,#4b1a42 55%,#232f3f 100%) !important;box-shadow:0 14px 34px rgba(112,0,64,.28);color:#fff} #album-tip::before{content:"";position:absolute;right:-80px;top:-80px;width:240px;height:240px;border-radius:50%;background:radial-gradient(circle,rgba(252,136,0,.38) 0%,rgba(252,136,0,0) 70%);pointer-events:none} #album-tip::after{content:"";position:absolute;left:-60px;bottom:-90px;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.10) 0%,rgba(255,255,255,0) 70%);pointer-events:none} #album-tip > *{position:relative;z-index:1} #album-tip .el-title{margin-top:0 !important;color:#fff !important;font-size:30px !important;line-height:1.1;font-weight:800;letter-spacing:.01em;text-transform:none !important} #album-tip .el-title::before{content:"Unsere Empfehlung";display:block;margin-bottom:6px;font-size:12px;line-height:1.4;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#fc8800} #album-tip .el-title::after{content:"";display:block;width:44px;height:3px;margin-top:12px;border-radius:2px;background:#fc8800} #album-tip .uk-inline-clip{display:block;margin-top:20px !important;border-radius:14px;box-shadow:0 14px 30px rgba(0,0,0,.38),0 0 0 1px rgba(255,255,255,.12)} #album-tip a:hover .uk-inline-clip{box-shadow:0 18px 38px rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,.2)} #album-tip .el-image{display:block;width:100%} #album-tip .el-content{margin-top:16px !important;font-size:16px;line-height:1.55;color:rgba(255,255,255,.88)} #album-tip .el-link{float:none;display:flex;align-items:center;justify-content:center;gap:10px;width:100%;margin-top:18px;padding:0 24px;line-height:50px;border:0;border-radius:999px;background:#fc8800 !important;color:#fff !important;font-size:16px;font-weight:700;letter-spacing:.02em;text-transform:none;box-shadow:0 8px 20px rgba(252,136,0,.35);transition:transform .15s ease,box-shadow .15s ease,background-color .15s ease} #album-tip .el-link::before{content:"";width:0;height:0;border-style:solid;border-width:7px 0 7px 11px;border-color:transparent transparent transparent #fff} #album-tip .el-link:hover,#album-tip .el-link:focus{background:#ff9a1f !important;color:#fff !important;transform:translateY(-1px);box-shadow:0 12px 26px rgba(252,136,0,.45)} @media (max-width:639px){#album-tip{padding:22px 20px 20px !important}#album-tip .el-title{font-size:26px !important}}
/* Reinhören-Einheit: Play-Button und Beschriftung als zentrierte Einheit, vertikal mittig zu Interpret/Titel */
.uk-grid > .uk-width-2-5\@m:has(.rsp-listen) { display: flex; align-items: center; }
.rsp-listen { display: inline-flex; flex-direction: column; align-items: center; gap: 14px; margin-left: 10px; padding: 0; border: 0; background: none; color: #700040; font: inherit; cursor: pointer; }
.rsp-listen:focus-visible { outline: 3px solid #fc8800; outline-offset: 6px; border-radius: 16px; }
.rsp-listen-play { position: relative; display: flex; align-items: center; justify-content: center; width: 116px; height: 116px; border-radius: 50%; background: #700040; color: #fff; box-shadow: 0 8px 24px rgba(112,0,64,.35); transition: transform .25s ease, background-color .25s ease, box-shadow .25s ease; }
.rsp-listen-play::before, .rsp-listen-play::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 3px solid #fc8800; opacity: 0; animation: rsp-listen-pulse 1.4s ease-out infinite; }
.rsp-listen-play::after { animation-delay: .7s; }
.rsp-listen-play svg { margin-left: 8px; }
.rsp-listen-label { padding: 7px 20px; border-radius: 999px; background: #fff; box-shadow: 0 4px 14px rgba(35,47,63,.18); font-family: 'Titillium Web', sans-serif; font-size: 15px; font-weight: 700; line-height: 1.2; letter-spacing: 2px; text-transform: uppercase; white-space: nowrap; transition: color .25s ease, background-color .25s ease; }
.rsp-listen:hover .rsp-listen-play { transform: scale(1.06); background: #fc8800; box-shadow: 0 10px 28px rgba(252,136,0,.45); }
.rsp-listen:hover .rsp-listen-label { background: #700040; color: #fff; }
@keyframes rsp-listen-pulse { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(1.22); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .rsp-listen-play::before, .rsp-listen-play::after { animation: none; } .rsp-listen-play, .rsp-listen-label { transition: none; } }
/* Reinhören-Einheit (mobil): gleiche Gestaltung wie auf dem Desktop, zentriert */
.rsp-listen { display: inline-flex; flex-direction: column; align-items: center; gap: 14px; margin-left: 10px; padding: 0; border: 0; background: none; color: #700040; font: inherit; cursor: pointer; }
.rsp-listen:focus-visible { outline: 3px solid #fc8800; outline-offset: 6px; border-radius: 16px; }
.rsp-listen-play { position: relative; display: flex; align-items: center; justify-content: center; width: 116px; height: 116px; border-radius: 50%; background: #700040; color: #fff; box-shadow: 0 8px 24px rgba(112,0,64,.35); transition: transform .25s ease, background-color .25s ease, box-shadow .25s ease; }
.rsp-listen-play::before, .rsp-listen-play::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 3px solid #fc8800; opacity: 0; animation: rsp-listen-pulse 1.4s ease-out infinite; }
.rsp-listen-play::after { animation-delay: .7s; }
.rsp-listen-play svg { margin-left: 8px; }
.rsp-listen-label { padding: 7px 20px; border-radius: 999px; background: #fff; box-shadow: 0 4px 14px rgba(35,47,63,.18); font-family: 'Titillium Web', sans-serif; font-size: 15px; font-weight: 700; line-height: 1.2; letter-spacing: 2px; text-transform: uppercase; white-space: nowrap; transition: color .25s ease, background-color .25s ease; }
.rsp-listen:hover .rsp-listen-play { transform: scale(1.06); background: #fc8800; box-shadow: 0 10px 28px rgba(252,136,0,.45); }
.rsp-listen:hover .rsp-listen-label { background: #700040; color: #fff; }
@keyframes rsp-listen-pulse { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(1.22); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .rsp-listen-play::before, .rsp-listen-play::after { animation: none; } .rsp-listen-play, .rsp-listen-label { transition: none; } }
.rsp-listen.rsp-listen-mobile { margin: 6px auto 4px; }
/* Startseite: Musikwunsch-Banner im Stil der Kanal-Kacheln, über die volle Breite (14.10.2026) */
.rsp-wb {
	position: relative;
	display: flex;
	align-items: center;
	gap: 22px;
	min-height: 150px;
	box-sizing: border-box;
	padding: 24px 100px 24px 28px;
	overflow: hidden;
	border-radius: 14px;
	color: #fff;
	text-decoration: none;
	background: linear-gradient(120deg, #700040 0%, #a3145f 55%, #e6007e 100%);
	box-shadow: 0 4px 14px rgba(35, 47, 63, .15);
	transition: transform .25s ease, box-shadow .25s ease;
	isolation: isolate;
}
.rsp-wb:hover,
.rsp-wb:focus-visible { color: #fff; text-decoration: none; transform: translateY(-4px); box-shadow: 0 12px 28px rgba(35, 47, 63, .28); }
.rsp-wb:focus-visible { outline: 3px solid #fc8800; outline-offset: 3px; }
.rsp-wb-bg {
	position: absolute;
	z-index: -1;
	right: 70px;
	top: -40px;
	width: 220px;
	height: 220px;
	opacity: .14;
	transform: rotate(-12deg);
	transition: transform .4s ease;
}
.rsp-wb:hover .rsp-wb-bg { transform: rotate(0deg) scale(1.08); }
.rsp-wb-icon { flex: none; width: 60px; height: 60px; }
.rsp-wb-text { display: flex; flex-direction: column; gap: 4px; }
.rsp-wb-label { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 2px; opacity: .85; }
.rsp-wb-name { font-family: 'Titillium Web', sans-serif; font-size: 34px; font-weight: 700; line-height: 1.1; }
.rsp-wb-sub { font-size: 16px; opacity: .9; }
.rsp-wb-go {
	position: absolute;
	right: 28px;
	top: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	margin-top: -28px;
	border-radius: 50%;
	background: #fff;
	color: #700040;
	box-shadow: 0 3px 10px rgba(0, 0, 0, .25);
	transition: transform .25s ease, background-color .25s ease, color .25s ease;
}
.rsp-wb:hover .rsp-wb-go { transform: scale(1.12) translateX(3px); background: #fc8800; color: #fff; }
@media (min-width: 960px) and (max-width: 1279px) {
	.rsp-wb-name { font-size: 28px; }
}
@media (max-width: 959px) {
	.rsp-wb { min-height: 120px; padding: 18px 80px 18px 18px; gap: 16px; border-radius: 12px; }
	.rsp-wb-icon { width: 46px; height: 46px; }
	.rsp-wb-name { font-size: 24px; }
	.rsp-wb-sub { font-size: 14px; }
	.rsp-wb-bg { width: 160px; height: 160px; right: 40px; top: -26px; }
	.rsp-wb-go { right: 18px; width: 46px; height: 46px; margin-top: -23px; }
}
@media (max-width: 639px) {
	.rsp-wb { padding: 16px 68px 16px 16px; gap: 12px; }
	.rsp-wb-icon { width: 38px; height: 38px; }
	.rsp-wb-label { font-size: 10px; letter-spacing: 1.5px; }
	.rsp-wb-name { font-size: 20px; }
	.rsp-wb-sub { display: none; }
	.rsp-wb-go { right: 14px; width: 40px; height: 40px; margin-top: -20px; }
}
@media (prefers-reduced-motion: reduce) { .rsp-wb, .rsp-wb-bg, .rsp-wb-go { transition: none; } }
/* Kick-Tipp-Kachel links neben dem Banner: gleiche Höhe, 200px breit */
.rsp-wb-box { display: flex; align-items: stretch; gap: 8px; }
.rsp-wb-box > .rsp-wb { flex: 1 1 auto; min-width: 0; }
.rsp-kt {
	position: relative;
	flex: 0 0 200px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 6px;
	box-sizing: border-box;
	min-height: 150px;
	padding: 20px 22px;
	overflow: hidden;
	border-radius: 14px;
	color: #fff;
	text-decoration: none;
	background: linear-gradient(140deg, #1b2533 0%, #232f3f 45%, #2f4a3a 100%);
	box-shadow: 0 4px 14px rgba(35, 47, 63, .15);
	transition: transform .25s ease, box-shadow .25s ease;
	isolation: isolate;
}
.rsp-kt:hover,
.rsp-kt:focus-visible { color: #fff; text-decoration: none; transform: translateY(-4px); box-shadow: 0 12px 28px rgba(35, 47, 63, .28); }
.rsp-kt:focus-visible { outline: 3px solid #fc8800; outline-offset: 3px; }
.rsp-kt::after { content: ""; position: absolute; z-index: -1; left: 0; right: 0; bottom: 0; height: 5px; background: repeating-linear-gradient(90deg, #3fae5a 0 18px, #2f8f47 18px 36px); }
.rsp-kt-bg { position: absolute; z-index: -1; right: -34px; top: -30px; width: 130px; height: 130px; opacity: .12; transform: rotate(-12deg); transition: transform .5s ease; }
.rsp-kt:hover .rsp-kt-bg { transform: rotate(60deg) scale(1.06); }
.rsp-kt-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 2px; opacity: .8; }
.rsp-kt-name { font-family: 'Titillium Web', sans-serif; font-size: 26px; font-weight: 700; line-height: 1.05; }
.rsp-kt-sub { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: #fc8800; font-weight: 600; }
.rsp-kt:hover .rsp-kt-sub svg { transform: translateX(3px); }
.rsp-kt-sub svg { transition: transform .25s ease; }
/* mobil hat die Startseite einen eigenen Kick-Tipp-Button */
@media (max-width: 959px) { .rsp-kt { display: none; } }
@media (prefers-reduced-motion: reduce) { .rsp-kt, .rsp-kt-bg, .rsp-kt-sub svg { transition: none; } }
/* radio.de / radioplayer rechts neben der Kick-Tipp-Kachel, zusammen so hoch wie der Banner */
.rsp-rp { flex: 0 0 200px; display: flex; flex-direction: column; gap: 8px; }
.rsp-rp-btn {
	position: relative;
	flex: 1 1 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 5px;
	box-sizing: border-box;
	padding: 10px 14px;
	border-radius: 14px;
	color: #fff;
	text-decoration: none;
	background: linear-gradient(140deg, #1b2533 0%, #232f3f 60%, #34445a 100%);
	box-shadow: 0 4px 14px rgba(35, 47, 63, .15);
	transition: transform .25s ease, box-shadow .25s ease;
}
.rsp-rp-btn:hover,
.rsp-rp-btn:focus-visible { color: #fff; text-decoration: none; transform: translateY(-3px); box-shadow: 0 10px 24px rgba(35, 47, 63, .28); }
.rsp-rp-btn:focus-visible { outline: 3px solid #fc8800; outline-offset: 3px; }
.rsp-rp-label { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 1.5px; opacity: .75; transition: opacity .25s ease, color .25s ease; }
.rsp-rp-label svg { width: 10px; height: 10px; }
.rsp-rp-btn:hover .rsp-rp-label { opacity: 1; color: #fc8800; }
.rsp-rp-btn img { display: block; width: 110px; height: auto; }
@media (max-width: 959px) { .rsp-rp { display: none; } }
@media (prefers-reduced-motion: reduce) { .rsp-rp-btn, .rsp-rp-label { transition: none; } }
.rsp-channels { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 8px; }
.rsp-channels .rsp-ch { position: relative; display: flex; flex-direction: column; justify-content: flex-end; aspect-ratio: 4 / 3; padding: 18px 20px; overflow: hidden; border-radius: 14px; color: #fff; text-decoration: none; background: linear-gradient(135deg, var(--ch-a), var(--ch-b)); box-shadow: 0 4px 14px rgba(35,47,63,.15); transition: transform .25s ease, box-shadow .25s ease; isolation: isolate; }
.rsp-channels .rsp-ch:hover, .rsp-channels .rsp-ch:focus-visible { color: #fff; text-decoration: none; transform: translateY(-4px); box-shadow: 0 12px 28px rgba(35,47,63,.28); }
.rsp-channels .rsp-ch:focus-visible { outline: 3px solid #fc8800; outline-offset: 3px; }
.rsp-channels .rsp-ch-icon { position: absolute; top: 18px; left: 20px; width: 44px; height: 44px; }
.rsp-channels .rsp-ch-bg { position: absolute; z-index: -1; right: -28px; top: -22px; width: 150px; height: 150px; opacity: .14; transform: rotate(-12deg); transition: transform .4s ease; }
.rsp-channels .rsp-ch:hover .rsp-ch-bg { transform: rotate(0deg) scale(1.08); }
.rsp-channels .rsp-ch-label { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 2px; opacity: .85; }
.rsp-channels .rsp-ch-name { font-family: 'Titillium Web', sans-serif; font-size: 26px; font-weight: 700; line-height: 1.1; padding-right: 0; }
/* Fremdmarke: eigenes Logo (enthält den Namen), gleicher Rahmen */
.rsp-channels .rsp-ch-logo { background: #fff center / cover no-repeat; }
/* Kanalfarben */
.rsp-ch-frisch { --ch-a: #fc8800; --ch-b: #d81b60; }
.rsp-ch-party { --ch-a: #e6007e; --ch-b: #fc8800; }
.rsp-ch-hitmix { --ch-a: #2b1055; --ch-b: #700040; }
.rsp-ch-oldie { --ch-a: #c25b00; --ch-b: #700040; }
.rsp-ch-instrumental { --ch-a: #127c8a; --ch-b: #2d3a8c; }
.rsp-ch-kuschel { --ch-a: #ff7a9a; --ch-b: #c2185b; }
.rsp-ch-boomer { --ch-a: #6a1b9a; --ch-b: #fc8800; }
.rsp-ch-xmas { --ch-a: #0b6e4f; --ch-b: #a4161a; }
/* Desktop: alle 8 Kanäle in einer Zeile, dafür kompakte quadratische Kacheln */
@media (min-width: 960px) {
/* Kacheln 30 % und nochmals 20 % niedriger (vorher 1 / 1), ohne Play-Button (Wunsch 15.10.2026): Name unten über die volle Breite */
.rsp-channels .rsp-ch { aspect-ratio: 25 / 14; padding: 12px; border-radius: 12px; }
.rsp-channels .rsp-ch-icon { top: 12px; left: 12px; width: 26px; height: 26px; }
.rsp-channels .rsp-ch-bg { right: -20px; top: -16px; width: 100px; height: 100px; }
.rsp-channels .rsp-ch-label { font-size: 10px; letter-spacing: 1px; }
.rsp-channels .rsp-ch-name { font-size: 16px; padding-right: 0; margin-bottom: 0; hyphens: auto; }
}
@media (min-width: 960px) and (max-width: 1279px) {
.rsp-channels .rsp-ch-name { font-size: 13px; margin-bottom: 0; }
/* zu eng für das Label: zweizeilige Namen (Hitmix der Nacht) würden sonst ins Symbol rutschen */
.rsp-channels .rsp-ch-label { display: none; }
/* Kachel hier nur ~60–80px hoch: Symbol klein oben rechts, damit zweizeilige Namen links unten Platz haben */
.rsp-channels .rsp-ch { padding: 10px; }
.rsp-channels .rsp-ch-icon { top: 8px; left: auto; right: 8px; width: 20px; height: 20px; }
.rsp-channels .rsp-ch-name { line-height: 1.05; }
}
@media (max-width: 959px) {
.rsp-channels { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.rsp-channels .rsp-ch { aspect-ratio: 20 / 7; padding: 14px; border-radius: 12px; }
}
@media (max-width: 639px) {
.rsp-channels .rsp-ch { aspect-ratio: 25 / 14; }
.rsp-channels .rsp-ch-icon { top: 14px; left: 14px; width: 30px; height: 30px; }
.rsp-channels .rsp-ch-bg { width: 120px; height: 120px; }
.rsp-channels .rsp-ch-label { font-size: 10px; letter-spacing: 1.5px; }
.rsp-channels .rsp-ch-name { font-size: 17px; padding-right: 0; margin-bottom: 0; }
}
/* Abstand zur Kartenleiste darüber (Kick-Tipp/radio.de/Radioplayer/Musikwunsch) wie zwischen den Karten: 8px */
.uk-grid.uk-grid-margin:has(.rsp-channels) { margin-top: 8px; }
/* ganzer Block (Abschnitt hp07, uk-section-xsmall = 20px oben/unten) -30 % */
.uk-section:has(.rsp-channels) { padding-top: 14px; padding-bottom: 14px; }
@media (prefers-reduced-motion: reduce) { .rsp-channels .rsp-ch, .rsp-channels .rsp-ch-bg { transition: none; } }
/* Startseiten-Slider als runder Kasten wie die Kanal-Kacheln und der Musikwunsch-Banner */
.rsp-slider .uk-slideshow-items { border-radius: 14px; overflow: hidden; transform: translateZ(0); box-shadow: 0 4px 14px rgba(35, 47, 63, .15); }
.rsp-slider .uk-thumbnav img { border-radius: 8px; }
@media (max-width: 959px) { .rsp-slider .uk-slideshow-items { border-radius: 12px; } }
@media (max-width: 639px) { .rsp-slider .uk-thumbnav img { border-radius: 4px; } }
/* Abstand vom Ende des grauen Blocks (Kanal-Kacheln) bis zum Slider: 10px (Desktop und Handy) */
.rsp-slider.uk-margin { margin-top: 0; }
.uk-section:has(.rsp-slider) { padding-top: 10px; }
/* Handy: Lücke zwischen Handy-Slider und "Aktuelles" verkleinern (Abschnitt unten 40px -> 10px) */
@media (max-width: 639px) { .uk-section.uk-hidden\@s:has(.rsp-slider) { padding-bottom: 10px; } }
/* Abschnitts-Kopfzeile (Startseite): Farbbalken wie die Kanal-Kacheln, Titel, feine Linie, Link rechts */
.rsp-sh { display: flex; align-items: center; gap: 16px; margin: 30px 0 20px; }
.rsp-sh-title { position: relative; margin: 0; padding-left: 16px; font-family: 'Titillium Web', sans-serif; font-size: 30px; font-weight: 700; line-height: 1.15; color: #232f3f; }
.rsp-sh-title::before { content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; width: 5px; border-radius: 3px; background: linear-gradient(180deg, #fc8800, #700040); }
.rsp-sh-title a { color: inherit; text-decoration: none; }
.rsp-sh-title a:hover { color: #700040; }
.rsp-sh-line { flex: 1 1 auto; height: 2px; border-radius: 1px; background: linear-gradient(90deg, rgba(112, 0, 64, .35), rgba(112, 0, 64, .05)); }
.rsp-sh-more { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; padding: 7px 16px; border: 2px solid #700040; border-radius: 999px; color: #700040; font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; text-decoration: none; transition: background-color .25s ease, border-color .25s ease, color .25s ease; }
.rsp-sh-more:hover, .rsp-sh-more:focus-visible { background: #fc8800; border-color: #fc8800; color: #fff; text-decoration: none; }
.rsp-sh-more:focus-visible { outline: 3px solid #fc8800; outline-offset: 3px; }
.rsp-sh-more svg { transition: transform .25s ease; }
.rsp-sh-more:hover svg { transform: translateX(3px); }
@media (max-width: 639px) {
.rsp-sh { gap: 12px; margin: 20px 0 14px; }
.rsp-sh-title { padding-left: 13px; font-size: 24px; }
.rsp-sh-title::before { width: 4px; }
.rsp-sh-more { padding: 6px 12px; font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) { .rsp-sh-more, .rsp-sh-more svg { transition: none; } }
/* Startseite: App-Bereich (14.10.2026) */
.rsp-app {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
	align-items: center;
	gap: 40px;
	box-sizing: border-box;
	padding: 44px 48px;
	overflow: hidden;
	border-radius: 18px;
	color: #fff;
	background: linear-gradient(125deg, #232f3f 0%, #2c2340 50%, #700040 100%);
	box-shadow: 0 10px 30px rgba(35, 47, 63, .22);
	isolation: isolate;
}
.rsp-app::before { content: ""; position: absolute; z-index: -1; right: -120px; bottom: -160px; width: 520px; height: 520px; border-radius: 50%; background: radial-gradient(circle, rgba(230, 0, 126, .55) 0%, rgba(230, 0, 126, 0) 65%); }
.rsp-app-label { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px; border-radius: 999px; background: rgba(255, 255, 255, .12); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 2px; }
.rsp-app-label svg { width: 16px; height: 16px; }
.rsp-app-titel { margin: 14px 0 6px; font-family: 'Titillium Web', sans-serif; font-size: 40px; font-weight: 700; line-height: 1.1; color: #fff; }
.rsp-app-claim { margin: 0 0 14px; font-family: 'Titillium Web', sans-serif; font-size: 20px; font-weight: 600; color: #fc8800; }
.rsp-app-text { margin: 0 0 20px; font-size: 16px; line-height: 1.5; opacity: .9; max-width: 520px; }
.rsp-app-liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 18px; margin: 0 0 26px; padding: 0; list-style: none; max-width: 520px; }
.rsp-app-liste li { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; }
.rsp-app-liste span { flex: none; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 10px; background: rgba(255, 255, 255, .14); }
.rsp-app-liste svg { width: 18px; height: 18px; }
.rsp-app-stores { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.rsp-app-stores a.rsp-app-store { display: block; border-radius: 10px; transition: transform .2s ease, box-shadow .2s ease; }
.rsp-app-stores a.rsp-app-store:hover, .rsp-app-stores a.rsp-app-store:focus-visible { transform: translateY(-3px); box-shadow: 0 8px 18px rgba(0, 0, 0, .35); }
.rsp-app-stores img { display: block; width: 160px; height: auto; }
.rsp-app-mehr { display: inline-flex; align-items: center; gap: 6px; margin-left: 6px; color: #fff; font-weight: 600; text-decoration: none; opacity: .85; }
.rsp-app-mehr:hover, .rsp-app-mehr:focus-visible { color: #fc8800; text-decoration: none; opacity: 1; }
.rsp-app-mehr svg { width: 16px; height: 16px; transition: transform .2s ease; }
.rsp-app-mehr:hover svg { transform: translateX(3px); }
.rsp-app-bild { position: relative; display: flex; justify-content: center; }
.rsp-app-bild::before { content: ""; position: absolute; top: 50%; left: 50%; width: 330px; height: 330px; margin: -165px 0 0 -165px; border-radius: 50%; background: linear-gradient(135deg, rgba(252, 136, 0, .9), rgba(230, 0, 126, .9)); opacity: .85; }
.rsp-app-bild img { position: relative; display: block; width: 250px; height: auto; filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .45)); transform: rotate(-5deg); transition: transform .4s ease; }
.rsp-app:hover .rsp-app-bild img { transform: rotate(0deg) translateY(-6px); }
.rsp-app-note { position: absolute; display: flex; align-items: center; justify-content: center; width: 54px; height: 54px; border-radius: 50%; background: #fff; color: #700040; box-shadow: 0 6px 16px rgba(0, 0, 0, .3); }
.rsp-app-note svg { width: 26px; height: 26px; }
.rsp-app-note.n1 { top: 8%; left: 12%; }
.rsp-app-note.n2 { bottom: 12%; right: 10%; width: 44px; height: 44px; background: #fc8800; color: #fff; }
@media (max-width: 1199px) {
	.rsp-app { padding: 36px 32px; gap: 28px; }
	.rsp-app-titel { font-size: 34px; }
}
@media (max-width: 959px) {
	.rsp-app { grid-template-columns: 1fr; text-align: center; padding: 32px 22px; }
	.rsp-app-text, .rsp-app-liste { margin-left: auto; margin-right: auto; }
	.rsp-app-liste { text-align: left; }
	.rsp-app-stores { justify-content: center; }
	.rsp-app-bild { order: -1; }
	.rsp-app-bild::before { width: 240px; height: 240px; margin: -120px 0 0 -120px; }
	.rsp-app-bild img { width: 170px; }
	.rsp-app-titel { font-size: 30px; }
	.rsp-app-claim { font-size: 18px; }
}
@media (max-width: 479px) {
	.rsp-app-liste { grid-template-columns: 1fr; max-width: 260px; }
	.rsp-app-stores img { width: 140px; }
	.rsp-app-mehr { margin: 6px 0 0; flex-basis: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .rsp-app-bild img, .rsp-app-stores a.rsp-app-store, .rsp-app-mehr svg { transition: none; } }
#footer\#6 a {color: #232f3f !important;} #footer\#7 ul.uk-subnav { display: : flex; justify-content: center; } #footer\#7{ font-family: 'Titillium Web'; font-size: 17px !important; font-weight: 400 !important; } #footer\#8{text-align:center;}
/* Newsletter-Anmeldung im Footer (eigenes Formular statt Brevo-iframe, sendet an dasselbe Brevo-Formular; 14.10.2026) */
.rsp-nl {
	position: relative;
	box-sizing: border-box;
	max-width: 460px;
	margin: 0 auto;
	padding: 28px 26px 22px;
	overflow: hidden;
	border-radius: 16px;
	color: #fff;
	background: linear-gradient(135deg, #700040 0%, #a3145f 60%, #e6007e 100%);
	box-shadow: 0 8px 24px rgba(112, 0, 64, .22);
	isolation: isolate;
	text-align: left;
}
.rsp-nl-bg { position: absolute; z-index: -1; right: -30px; top: -26px; width: 170px; height: 170px; color: #fff; opacity: .12; transform: rotate(-14deg); }
.rsp-nl-label { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 2px; opacity: .9; }
.rsp-nl-label svg { width: 18px; height: 18px; }
.rsp-nl-titel { margin: 8px 0 6px; font-family: 'Titillium Web', sans-serif; font-size: 26px; font-weight: 700; line-height: 1.15; color: #fff; }
.rsp-nl-text { margin: 0 0 16px; font-size: 15px; line-height: 1.45; opacity: .92; }
.rsp-nl-vorteile { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 18px; padding: 0; list-style: none; }
.rsp-nl-vorteile li { padding: 3px 10px; border-radius: 999px; background: rgba(255, 255, 255, .16); font-size: 12.5px; font-weight: 600; }
.rsp-nl-feld { display: flex; gap: 6px; padding: 5px; border-radius: 999px; background: #fff; box-shadow: 0 3px 10px rgba(0, 0, 0, .15); }
.rsp-nl-feld input[type=email] { flex: 1 1 auto; min-width: 0; height: 44px; padding: 0 14px; border: 0; border-radius: 999px; background: transparent; font-size: 15px; color: #232f3f; outline: none; }
.rsp-nl-feld input[type=email]::placeholder { color: #8a8f98; }
.rsp-nl-btn { flex: none; height: 44px; padding: 0 20px; border: 0; border-radius: 999px; background: #fc8800; color: #fff; font-family: 'Titillium Web', sans-serif; font-size: 15px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; cursor: pointer; transition: background-color .2s ease, transform .2s ease; }
.rsp-nl-btn:hover, .rsp-nl-btn:focus-visible { background: #e57a00; transform: translateX(2px); }
.rsp-nl-btn:disabled { opacity: .7; cursor: wait; transform: none; }
.rsp-nl-feld:focus-within { box-shadow: 0 0 0 3px rgba(252, 136, 0, .6), 0 3px 10px rgba(0, 0, 0, .15); }
.rsp-nl-optin { display: flex; align-items: flex-start; gap: 10px; margin: 14px 2px 0; font-size: 12.5px; line-height: 1.4; cursor: pointer; }
.rsp-nl-optin input { flex: none; width: 18px; height: 18px; margin: 1px 0 0; accent-color: #fc8800; cursor: pointer; }
.rsp-nl-optin a { color: #fff; text-decoration: underline; }
.rsp-nl-hinweis { margin: 8px 2px 0; font-size: 11.5px; opacity: .75; }
.rsp-nl-meldung { display: none; margin: 12px 0 0; padding: 9px 12px; border-radius: 10px; font-size: 13.5px; font-weight: 600; }
.rsp-nl-meldung.is-fehler { display: block; background: rgba(255, 255, 255, .95); color: #a0002a; }
.rsp-nl-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.rsp-nl-ok { display: none; text-align: center; padding: 10px 0 6px; }
.rsp-nl-ok svg { width: 56px; height: 56px; margin-bottom: 6px; }
.rsp-nl.is-ok .rsp-nl-form, .rsp-nl.is-ok .rsp-nl-text, .rsp-nl.is-ok .rsp-nl-vorteile { display: none; }
.rsp-nl.is-ok .rsp-nl-ok { display: block; }
@media (max-width: 400px) {
	.rsp-nl { padding: 22px 18px 18px; }
	.rsp-nl-titel { font-size: 22px; }
	.rsp-nl-feld { flex-direction: column; border-radius: 14px; }
	.rsp-nl-btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .rsp-nl-btn { transition: none; } }
/* Voting-Hinweis rechtsbündig unter den Menüpunkten (wird per Script in die Navbar gehängt) */
.uk-navbar-container > .uk-container.rsp-vote-host { position: relative; }
.rsp-vote { position: absolute; z-index: 0; display: inline-flex; align-items: center; gap: 10px; background: linear-gradient(135deg, #e6007e, #fc8800); color: #fff; text-decoration: none; box-shadow: 0 4px 12px rgba(35,47,63,.2); overflow: hidden; isolation: isolate; transition: transform .25s ease, box-shadow .25s ease; }
.rsp-vote:hover, .rsp-vote:focus-visible { color: #fff; text-decoration: none; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(35,47,63,.3); }
.rsp-vote:focus-visible { outline: 3px solid #700040; outline-offset: 2px; }
.rsp-vote::after { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: -60%; width: 40%; background: linear-gradient(100deg, rgba(255,255,255,0), rgba(255,255,255,.35), rgba(255,255,255,0)); transform: skewX(-20deg); animation: rsp-vote-shine 5s ease-in-out 1.5s infinite; }
.rsp-vote-icon { flex: none; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: rgba(255,255,255,.2); }
.rsp-vote-icon svg { width: 17px; height: 17px; }
.rsp-vote-text { font-family: 'Titillium Web', sans-serif; font-size: 16px; font-weight: 700; line-height: 1.1; white-space: nowrap; }
.rsp-vote-go { flex: none; display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: #fff; color: #700040; transition: transform .25s ease, background-color .25s ease, color .25s ease; }
.rsp-vote-go svg { width: 14px; height: 14px; }
.rsp-vote:hover .rsp-vote-go { transform: translateX(3px); background: #700040; color: #fff; }
/* Einflug nach Seitenstart: schießt von rechts herein, federt nach und rastet ein */
@keyframes rsp-vote-in {
	0% { transform: translateX(110vw) skewX(-28deg) scaleX(1.25); filter: blur(4px); }
	55% { transform: translateX(-22px) skewX(10deg) scaleX(.94); filter: blur(0); }
	70% { transform: translateX(10px) skewX(-5deg) scaleX(1.03); }
	83% { transform: translateX(-4px) skewX(2deg) scaleX(.99); }
	93% { transform: translateX(1px) skewX(0) scaleX(1); }
	100% { transform: none; }
}
@keyframes rsp-vote-pop { 0% { transform: translateY(-50%) scale(.2); opacity: 0; } 60% { transform: translateY(-50%) scale(1.12); opacity: 1; } 80% { transform: translateY(-50%) scale(.96); } 100% { transform: translateY(-50%) scale(1); } }
.tm-header .uk-navbar-container { overflow-x: clip; }
@keyframes rsp-vote-shine { 0%, 70% { left: -60%; } 100% { left: 130%; } }
/* Desktop: als Pille im weißen Bereich unter den Menüpunkten, nichts ragt in die Grafik */
@media (min-width: 960px) {
.rsp-vote { bottom: 6px; right: 40px; padding: 4px 5px 4px 5px; border-radius: 999px; animation: rsp-vote-in .95s cubic-bezier(.2,.8,.25,1) .6s backwards; transform-origin: right center; }
.rsp-vote-text { padding-right: 2px; }
}
@media (min-width: 960px) and (max-width: 1199px) { .rsp-vote { right: 30px; } }
.rsp-vote-short { display: none; }
/* Mobil: kompakte Pille links in der Leiste, gegenüber dem Menü-Symbol */
@media (max-width: 959px) {
.rsp-vote { top: 50%; left: 15px; right: auto; transform: translateY(-50%); gap: 6px; padding: 4px 12px 4px 4px; border-radius: 999px; animation: rsp-vote-pop .6s ease-out .5s backwards; }
.rsp-vote:hover, .rsp-vote:focus-visible { transform: translateY(-50%); }
.rsp-vote-text, .rsp-vote-go { display: none; }
.rsp-vote-short { display: inline; font-family: 'Titillium Web', sans-serif; font-size: 14px; font-weight: 700; line-height: 1; white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) { .rsp-vote { animation: none !important; } .rsp-vote::after { animation: none; display: none; } .rsp-vote, .rsp-vote-go { transition: none; } }