/* Wunschkonzert — Wunschseite.
 *
 * FALLE: Das Theme von radiotell.ch faerbt angeklickte Bedienelemente tuerkis
 * und blaeht select/input auf volle Breite auf — mit !important UND IDs im
 * Selektor. Dagegen hilft nur, die eigene Wurzel-ID mehrfach zu schreiben.
 * Sieht etwas falsch aus, das hier richtig steht: zuerst das Theme verdaechtigen.
 */

.rtwk-app { width: 100%; max-width: 100%; margin: 0; font-size: 16px; line-height: 1.5; }

/* Volle Breite, auch wenn das Theme den Inhalt einschnuert. Der negative
   Rand holt die Anwendung aus einem schmalen Container heraus, ohne die
   Seite waagrecht scrollen zu lassen. */
.rtwk-app { box-sizing: border-box; }
.rtwk-app *, .rtwk-app *::before, .rtwk-app *::after { box-sizing: border-box; }
.rtwk-app h2 { margin: 0 0 .2em; }
.rtwk-app h3 { margin: 0 0 .6em; font-size: 1.15em; }

.rtwk-kopf { margin-bottom: 18px; }
.rtwk-air { color: #444; margin: .2em 0; }
/* Der einleitende Satz tritt zurueck, das Datum steht vorn — sonst
   konkurrieren beide um dieselbe Aufmerksamkeit. */
.rtwk-air-vor { font-weight: 400; color: #666; }
.rtwk-air strong { font-weight: 600; color: #444; }
@media (max-width: 520px) {
	.rtwk-air-vor { display: block; }
}
.rtwk-voll { background: #fdf3f3; border-left: 4px solid #C0272D; padding: 10px 14px; margin: .8em 0; }

.rtwk-karte { border: 1px solid #e3e3e3; border-radius: 12px; padding: 18px; background: #fff; }
.rtwk-karte-ok { border-color: #C0272D; }

.rtwk-feld { margin: 12px 0; }
.rtwk-feld label { display: block; font-weight: 600; margin-bottom: 4px; font-size: .95em; }
.rtwk-opt { font-weight: 400; color: #777; }

#rtwk-app#rtwk-app#rtwk-app .rtwk-feld input[type="text"],
#rtwk-app#rtwk-app#rtwk-app .rtwk-feld textarea {
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
	padding: 9px 11px !important;
	border: 1px solid #ccc !important;
	border-radius: 8px !important;
	font: inherit !important;
	background: #fff !important;
	color: #222 !important;
}
#rtwk-app#rtwk-app#rtwk-app .rtwk-feld input[type="text"]:focus,
#rtwk-app#rtwk-app#rtwk-app .rtwk-feld textarea:focus {
	border-color: #C0272D !important;
	outline: 2px solid rgba(192,39,45,.18) !important;
	outline-offset: 0 !important;
	background: #fff !important;
}

.rtwk-zaehler { display: block; text-align: right; font-size: .82em; color: #888; margin-top: 3px; }

#rtwk-app#rtwk-app#rtwk-app .rtwk-knopf {
	display: inline-block;
	background: #C0272D !important;
	color: #fff !important;
	border: 0 !important;
	border-radius: 8px !important;
	padding: 10px 18px !important;
	font: inherit !important;
	font-weight: 600 !important;
	cursor: pointer;
	width: auto !important;
	white-space: nowrap !important;
	line-height: 1.25 !important;
}
#rtwk-app#rtwk-app#rtwk-app .rtwk-knopf:hover { background: #9d1f24 !important; }
#rtwk-app#rtwk-app#rtwk-app .rtwk-knopf:focus { background: #9d1f24 !important; color: #fff !important; }
#rtwk-app#rtwk-app#rtwk-app .rtwk-knopf[disabled] { opacity: .6; cursor: default; }
#rtwk-app#rtwk-app#rtwk-app .rtwk-knopf.rtwk-sek {
	background: #f2f2f2 !important; color: #333 !important;
}
#rtwk-app#rtwk-app#rtwk-app .rtwk-knopf.rtwk-sek:hover { background: #e6e6e6 !important; }
#rtwk-app#rtwk-app#rtwk-app .rtwk-knopf.rtwk-klein { padding: 6px 12px !important; font-size: .9em !important; }

.rtwk-knopfzeile { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }

.rtwk-zeile { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.rtwk-zeile .rtwk-feld { flex: 1 1 180px; margin: 0; }
.rtwk-suchzeile { margin-bottom: 6px; }

.rtwk-treffer.rtwk-sucht { opacity: .45; }
.rtwk-trefferzahl { margin: 12px 0 4px; color: #888; font-size: .85em; }

.rtwk-liste { list-style: none; margin: 6px 0 0; padding: 0; }
@media (min-width: 1000px) {
	.rtwk-liste { column-count: 2; column-gap: 30px; }
	.rtwk-tr { break-inside: avoid; }
}
.rtwk-tr { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid #eee; }
.rtwk-tr-bild { position: relative; flex: 0 0 52px; width: 52px; height: 52px; }
.rtwk-tr-text { flex: 1; min-width: 0; }
.rtwk-tr-sub  { display: block; color: #555; font-size: .9em; }
.rtwk-tr-info { display: block; color: #999; font-size: .82em; }

.rtwk-cover {
	width: 52px; height: 52px; border-radius: 7px;
	object-fit: cover; display: block;
}
.rtwk-cover-leer {
	background: #f0f0f0; display: flex; align-items: center;
	justify-content: center; color: #bbb; font-size: 1.3em;
}
.rtwk-cover-gross { width: 84px; height: 84px; }

.rtwk-gewaehlt { display: flex; gap: 14px; align-items: center; margin-bottom: 12px; }
.rtwk-g-bild { position: relative; flex: 0 0 84px; }

.rtwk-namensblock { background: #fafafa; border-radius: 8px; padding: 12px 14px; margin: 14px 0; }
.rtwk-schalter { display: block; margin: 4px 0; font-size: .95em; cursor: pointer; }
.rtwk-schalter input { margin-right: 8px; }
.rtwk-vorschau { margin: 10px 0 0; font-size: .9em; color: #555; }
.rtwk-vorschau strong { color: #222; font-size: 1.05em; }

.rtwk-meldung { padding: 10px 14px; border-radius: 8px; margin: 12px 0; font-size: .95em; }
.rtwk-meldung.rtwk-fehler { background: #fdf3f3; border-left: 4px solid #C0272D; }
.rtwk-meldung.rtwk-ok { background: #f2f9f2; border-left: 4px solid #3f8c4a; }
.rtwk-meldung.rtwk-info { background: #f5f5f5; border-left: 4px solid #999; }

.rtwk-hinweis, .rtwk-leer, .rtwk-laedt { color: #777; font-size: .92em; }
.rtwk-fehler { color: #C0272D; }

.rtwk-gate { border: 1px solid #e3e3e3; border-radius: 12px; padding: 18px; background: #fff; }

.rtwk-rueckblick { margin-top: 30px; }
.rtwk-rueckblick h3 { font-size: 1.05em; }
.rtwk-rb-sendung h4 { margin: 14px 0 4px; font-size: .95em; color: #555; font-weight: 600; }
.rtwk-rb-sendung ol { margin: 0; padding-left: 1.4em; color: #555; font-size: .92em; }
.rtwk-rb-fill { color: #999; }

@media (max-width: 520px) {
	.rtwk-suchzeile { display: block; }
	.rtwk-suchzeile .rtwk-feld { margin-bottom: 10px; }
	.rtwk-knopfzeile { flex-direction: column; }
	#rtwk-app#rtwk-app#rtwk-app .rtwk-knopf { width: 100% !important; }
}




/* ── Hörprobe ────────────────────────────────────────────────────── */

#rtwk-app#rtwk-app#rtwk-app .rtwk-play {
	position: absolute;
	border: 0 !important; border-radius: 50% !important;
	background: rgba(0,0,0,.6) !important; color: #fff !important;
	padding: 0 !important; cursor: pointer;
	display: flex; align-items: center; justify-content: center;
	transition: background .15s;
}
#rtwk-app#rtwk-app#rtwk-app .rtwk-play:hover,
#rtwk-app#rtwk-app#rtwk-app .rtwk-play:focus,
#rtwk-app#rtwk-app#rtwk-app .rtwk-play.rtwk-spielt {
	background: #C0272D !important; color: #fff !important;
}
#rtwk-app#rtwk-app#rtwk-app .rtwk-play-klein {
	right: -4px; bottom: -4px;
	width: 26px !important; height: 26px; font-size: .62em !important;
}
#rtwk-app#rtwk-app#rtwk-app .rtwk-play-gross {
	right: 7px; bottom: 7px;
	width: 38px !important; height: 38px; font-size: .85em !important;
}

/* ── Würfeln ─────────────────────────────────────────────────────── */

.rtwk-wuerfelkarte { margin-bottom: 18px; background: linear-gradient(180deg, #fff 0%, #fbfbfb 100%); }

.rtwk-w-kopf {
	display: flex; align-items: center; justify-content: space-between;
	gap: 12px; flex-wrap: wrap; margin-bottom: 14px;
}
.rtwk-w-kopf h3 { margin: 0; }

#rtwk-app#rtwk-app#rtwk-app .rtwk-wuerfel { display: inline-flex; align-items: center; gap: 8px; }
.rtwk-wuerfel-auge { font-size: 1.3em; line-height: 1; display: inline-block; }
.rtwk-wuerfel.rtwk-rollt .rtwk-wuerfel-auge { animation: rtwk-roll .55s linear infinite; }

@keyframes rtwk-roll {
	0%   { transform: rotate(0deg)   scale(1); }
	50%  { transform: rotate(180deg) scale(1.2); }
	100% { transform: rotate(360deg) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
	.rtwk-wuerfel.rtwk-rollt .rtwk-wuerfel-auge { animation: none; opacity: .5; }
}

/* Fünf Kacheln nebeneinander, entsprechend kleiner.
   auto-fit statt einer festen Spaltenzahl: passt sich der Breite an und
   lässt in der letzten Reihe keine leere Spalte stehen. */
.rtwk-dice {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
	gap: 12px;
	min-height: 60px;
}
.rtwk-dice-laedt { opacity: .4; }

.rtwk-d-karte {
	display: flex; flex-direction: column; gap: 8px;
	border: 1px solid #e8e8e8; border-radius: 10px;
	padding: 10px; background: #fff;
}

.rtwk-d-bild { position: relative; width: 100%; aspect-ratio: 1 / 1; }
.rtwk-d-bild img {
	width: 100%; height: 100%; object-fit: cover;
	border-radius: 8px; display: block;
}
.rtwk-d-leer {
	display: flex; align-items: center; justify-content: center;
	width: 100%; height: 100%;
	background: #f0f0f0; border-radius: 8px;
	font-size: 2em; color: #bbb;
}

.rtwk-d-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.rtwk-d-titel  { font-size: .95em; line-height: 1.28; }
.rtwk-d-artist { color: #444; font-size: .86em; line-height: 1.3; }
.rtwk-d-info   { color: #999; font-size: .78em; }
.rtwk-d-dauer  { color: #aaa; font-size: .76em; }

#rtwk-app#rtwk-app#rtwk-app .rtwk-d-waehlen {
	width: 100% !important; margin-top: auto;
	padding: 7px 8px !important; font-size: .85em !important;
}

/* Schmale Schirme: Bild und Text nebeneinander, der Knopf darunter ueber die
   ganze Breite. Nebeneinander bricht «Diesen wuenschen» sonst mitten im Wort. */
@media (max-width: 560px) {
	.rtwk-dice { grid-template-columns: 1fr; }
	.rtwk-d-karte {
		display: grid;
		grid-template-columns: 84px 1fr;
		grid-template-areas: "bild text" "knopf knopf";
		align-items: center;
		column-gap: 12px; row-gap: 10px;
	}
	.rtwk-d-bild  { grid-area: bild; width: 84px; }
	.rtwk-d-text  { grid-area: text; }
	.rtwk-d-titel { font-size: 1em; }
	#rtwk-app#rtwk-app#rtwk-app .rtwk-d-waehlen {
		grid-area: knopf; width: 100% !important; margin: 0;
		padding: 10px 12px !important; font-size: .92em !important;
	}
}

/* Dasselbe fuer die Trefferliste. */
@media (max-width: 560px) {
	.rtwk-tr {
		display: grid;
		grid-template-columns: 52px 1fr;
		grid-template-areas: "bild text" "knopf knopf";
		align-items: center;
		column-gap: 12px; row-gap: 8px;
	}
	.rtwk-tr-bild { grid-area: bild; }
	.rtwk-tr-text { grid-area: text; }
	.rtwk-tr .rtwk-knopf { grid-area: knopf; }
	#rtwk-app#rtwk-app#rtwk-app .rtwk-tr .rtwk-knopf { width: 100% !important; }
}

/* ── Bestätigung ─────────────────────────────────────────────────── */

.rtwk-haken {
	width: 46px; height: 46px; border-radius: 50%;
	background: #C0272D; color: #fff;
	display: flex; align-items: center; justify-content: center;
	font-size: 1.5em; margin-bottom: 10px;
}
.rtwk-air-gross { font-size: 1.1em; font-weight: 600; margin: 8px 0 2px; }
.rtwk-countdown { color: #C0272D; font-weight: 600; margin: 0 0 12px; }

.rtwk-zitat {
	margin: 14px 0 4px; padding: 10px 0 10px 16px;
	border-left: 4px solid #C0272D; border-top: 0; border-right: 0; border-bottom: 0;
	font-size: 1.08em; font-style: italic; color: #333;
	background: none; quotes: "\201E" "\201C";
}
.rtwk-zitat::before { content: open-quote; }
.rtwk-zitat::after  { content: close-quote; }
.rtwk-von { margin: 0 0 12px 16px; color: #666; font-size: .9em; }

.rtwk-dabei { margin-top: 18px; }
.rtwk-dabei-liste { list-style: none; margin: 10px 0 0; padding: 0; }
.rtwk-dabei-liste li {
	display: flex; align-items: center; gap: 10px;
	padding: 7px 0; border-top: 1px solid #f0f0f0; font-size: .92em;
}
.rtwk-dabei-liste img,
.rtwk-dabei-leer {
	width: 38px; height: 38px; border-radius: 6px; object-fit: cover; flex: 0 0 38px;
}
.rtwk-dabei-leer {
	background: #f0f0f0; display: flex; align-items: center;
	justify-content: center; color: #bbb;
}


/* ── Testbetrieb ─────────────────────────────────────────────────── */

.rtwk-sandbox {
	background: #fdf6e3;
	border: 1px solid #e8d9a8;
	border-left: 4px solid #d9a520;
	border-radius: 8px;
	padding: 9px 14px;
	margin: 0 0 14px;
	font-size: .9em;
	color: #6b5310;
}