/**
 * KAWAI CA - Hoerbeispiele "Hear it for yourself.".
 *
 * Figma Frame 72: Flaeche 1280 x 528, Radius 22, #E9E9E9, 80 vom linken Rand.
 * Ueberschrift wie in "The essential facts." - 46 von links, Grossbuchstaben.
 * Titelliste 455 breit, Zeilen 46 hoch mit Radius 8, aktive Zeile schwarz.
 * Darunter der laufende Titel und der Abspieler. Rechts das Modellbild.
 */

.kwca-ad{
	font-family:Roboto,Arial,Helvetica,sans-serif;
	color:#292929;
}

.kwca-ad__inhalt{
	max-width:1328px;
	margin-inline:auto;
	padding:24px 24px 0;
}

.kwca-ad__flaeche{
	display:grid;
	grid-template-columns:1fr 1fr;
	align-items:start;
	gap:24px;
	min-height:528px;
	padding:50px 46px 40px;
	border-radius:22px;
	background:#E9E9E9;
}

/* ---------- Linke Spalte ---------- */

.kwca-ad__spalte{
	display:flex;
	flex-direction:column;
	min-width:0;
}

.kwca-ad__titel.kwca-ad__titel{
	margin:0 0 49px;
	font-size:clamp(24px,2.64vw,38px);
	line-height:1.105;
	font-weight:500;
	text-transform:uppercase;
	color:#000;
}

/* ---------- Kategorie-Auswahl ---------- */

.kwca-ad__wahl{
	display:flex;
	flex-direction:column;
	gap:8px;
	max-width:455px;
	margin:0 0 18px;
}
.kwca-ad__wahl-text{
	font-size:13px;
	line-height:1.2;
	font-weight:700;
	letter-spacing:.04em;
	text-transform:uppercase;
	color:#6A6A6A;
}
/* Eigener Winkel rechts, das Feld selbst bleibt ein echtes select. */
.kwca-ad__wahl-feld{
	position:relative;
	display:block;
}
.kwca-ad__wahl-feld::after{
	content:"";
	position:absolute;
	right:20px;
	top:50%;
	width:9px;height:9px;
	border-right:2px solid #111;
	border-bottom:2px solid #111;
	transform:translateY(-70%) rotate(45deg);
	pointer-events:none;
}
.kwca-ad .kwca-ad__kategorie{
	appearance:none;
	-webkit-appearance:none;
	width:100%;
	min-height:46px;
	margin:0;
	padding:6px 48px 6px 20px;
	border:1px solid #CFCCC8;
	border-radius:8px;
	background:#fff;
	color:#292929;
	font-family:inherit;
	font-size:16px;
	line-height:1.25;
	font-weight:700;
	cursor:pointer;
}
.kwca-ad .kwca-ad__kategorie:hover{border-color:#111}
.kwca-ad .kwca-ad__kategorie:focus{outline:none;border-color:#111}
.kwca-ad .kwca-ad__kategorie:focus-visible{outline:2px solid #1A1A1A;outline-offset:2px}

/* ---------- Titelliste ---------- */

.kwca-ad__liste.kwca-ad__liste{
	list-style:none;
	margin:0;
	padding:0;
	display:flex;
	flex-direction:column;
	gap:13px;
	max-width:455px;
}
.kwca-ad__liste li{margin:0}
.kwca-ad__liste li[hidden]{display:none}

.kwca-ad__zeile{
	appearance:none;
	-webkit-appearance:none;
	display:grid;
	grid-template-columns:auto 1fr auto;
	align-items:center;
	gap:8px;
	width:100%;
	min-height:46px;
	padding:6px 26px 6px 20px;
	border:0;
	border-radius:8px;
	background:transparent;
	color:#292929;
	text-align:left;
	cursor:pointer;
	transition:background-color .15s ease, color .15s ease;
}

.kwca-ad__pfeil{
	flex:0 0 auto;
	width:10px;height:12px;
	color:currentColor;
}
.kwca-ad__pfeil svg{width:100%;height:100%;display:block}

.kwca-ad__zeile-name{
	font-size:16px;
	line-height:1.25;
	font-weight:400;
	min-width:0;
}
.kwca-ad__zeile-dauer{
	font-size:13px;
	line-height:1.25;
	font-weight:400;
	color:#8A8A8A;
	font-variant-numeric:tabular-nums;
}

/* Das Theme faerbt Knoepfe beim Ueberfahren global ein - hier steuern wir selbst. */
.kwca-ad .kwca-ad__zeile,
.kwca-ad .kwca-ad__zeile:focus,
.kwca-ad .kwca-ad__zeile:active{
	background-color:transparent;
	background-image:none;
	color:#292929;
}
.kwca-ad .kwca-ad__zeile:hover{
	background-color:rgba(0,0,0,.06);
	background-image:none;
	color:#292929;
}
.kwca-ad .kwca-ad__zeile.is-active,
.kwca-ad .kwca-ad__zeile.is-active:hover,
.kwca-ad .kwca-ad__zeile.is-active:focus,
.kwca-ad .kwca-ad__zeile.is-active:active{
	background-color:#111;
	background-image:none;
	color:#fff;
}
.kwca-ad__zeile.is-active .kwca-ad__zeile-name{font-weight:700}
.kwca-ad__zeile.is-active .kwca-ad__zeile-dauer{color:rgba(255,255,255,.7)}

.kwca-ad__zeile:focus-visible{outline:2px solid #1A1A1A;outline-offset:2px}

/* ---------- Laufender Titel ---------- */

.kwca-ad__jetzt.kwca-ad__jetzt{
	margin:70px 0 0;
	font-size:clamp(20px,2.35vw,30px);
	line-height:1.2;
	font-weight:700;
	color:#000;
}

/* ---------- Abspieler ---------- */

.kwca-ad__player{
	display:flex;
	align-items:center;
	gap:34px;
	margin-top:32px;
	padding-left:59px;
	max-width:445px;
}

.kwca-ad__play{
	appearance:none;
	-webkit-appearance:none;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	flex:0 0 auto;
	width:23px;height:26px;
	padding:0;
	border:0;
	border-radius:4px;
	background:transparent;
	color:#FE0C19;
	cursor:pointer;
}
.kwca-ad .kwca-ad__play,
.kwca-ad .kwca-ad__play:hover,
.kwca-ad .kwca-ad__play:focus,
.kwca-ad .kwca-ad__play:active{background-color:transparent;background-image:none;color:#FE0C19}
.kwca-ad__play svg{width:23px;height:26px;display:block}
.kwca-ad__play-aus{display:none}
.kwca-ad__player.is-playing .kwca-ad__play-an{display:none}
.kwca-ad__player.is-playing .kwca-ad__play-aus{display:block}
.kwca-ad__play:focus-visible{outline:2px solid #1A1A1A;outline-offset:2px}

/* Tippflaeche: unsichtbar mittig ueber dem Element, ohne Einfluss auf
   das Layout. 15px oder 23px sind mit dem Finger kaum zu treffen. */
.kwca-ad__play,
.kwca-ad__ton{position:relative}
.kwca-ad__play::after,
.kwca-ad__ton::after{
	content:"";
	position:absolute;
	left:50%;top:50%;
	width:44px;height:44px;
	transform:translate(-50%,-50%);
}

/* Fortschritt: eigener Regler, damit Tastatur und Ziehen ohne Zusatzcode gehen.
   Das Theme gibt Eingabefeldern weissen Grund, Rand und Innenabstand - hier
   mit hoeherem Gewicht zurueckgenommen, sonst liegt ein weisser Kasten um die Linie. */
.kwca-ad .kwca-ad__leiste.kwca-ad__leiste{
	background-color:transparent;
	border:0;
	border-radius:0;
	padding:0;
	box-shadow:none;
}
.kwca-ad__leiste{
	appearance:none;
	-webkit-appearance:none;
	flex:1 1 auto;
	min-width:0;
	height:16px;
	margin:0;
	padding:0;
	background:transparent;
	cursor:pointer;
	--kwca-ad-fortschritt:0%;
}
.kwca-ad__leiste::-webkit-slider-runnable-track{
	height:3px;
	border-radius:2px;
	background:linear-gradient(to right,#292929 var(--kwca-ad-fortschritt),#C4C4C4 var(--kwca-ad-fortschritt));
}
.kwca-ad__leiste::-moz-range-track{
	height:3px;
	border-radius:2px;
	background:#C4C4C4;
}
.kwca-ad__leiste::-moz-range-progress{
	height:3px;
	border-radius:2px;
	background:#292929;
}
.kwca-ad__leiste::-webkit-slider-thumb{
	-webkit-appearance:none;
	width:9px;height:9px;
	margin-top:-3px;
	border:0;
	border-radius:50%;
	background:#292929;
}
.kwca-ad__leiste::-moz-range-thumb{
	width:9px;height:9px;
	border:0;
	border-radius:50%;
	background:#292929;
}
.kwca-ad__leiste:focus-visible{outline:2px solid #1A1A1A;outline-offset:2px;border-radius:4px}

.kwca-ad__zeit{
	flex:0 0 auto;
	font-size:13px;
	line-height:1.25;
	color:#292929;
	font-variant-numeric:tabular-nums;
}

.kwca-ad__ton{
	appearance:none;
	-webkit-appearance:none;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	flex:0 0 auto;
	width:24px;height:24px;
	padding:0;
	border:0;
	border-radius:4px;
	background:transparent;
	color:#292929;
	cursor:pointer;
}
.kwca-ad .kwca-ad__ton,
.kwca-ad .kwca-ad__ton:hover,
.kwca-ad .kwca-ad__ton:focus,
.kwca-ad .kwca-ad__ton:active{background-color:transparent;background-image:none;color:#292929}
.kwca-ad__ton svg{width:21px;height:21px;display:block}
.kwca-ad__ton-aus{display:none}
.kwca-ad__ton.is-muted .kwca-ad__ton-an{display:none}
.kwca-ad__ton.is-muted .kwca-ad__ton-aus{display:block}
.kwca-ad__ton:focus-visible{outline:2px solid #1A1A1A;outline-offset:2px}

.kwca-ad__audio{display:none}

/* ---------- Kompaktmodus: Abspieler im Balken des laufenden Klangs ---------- */

.kwca-ad--kompakt .kwca-ad__liste li.is-active{
	border-radius:8px;
	background:#111;
}
/* Der Balken kommt vom li - die Zeile selbst bleibt durchsichtig. */
.kwca-ad--kompakt .kwca-ad__zeile.is-active,
.kwca-ad--kompakt .kwca-ad__zeile.is-active:hover,
.kwca-ad--kompakt .kwca-ad__zeile.is-active:focus,
.kwca-ad--kompakt .kwca-ad__zeile.is-active:active{background-color:transparent}
.kwca-ad--kompakt .kwca-ad__zeile.is-active:focus-visible{outline-color:#fff;outline-offset:-3px}

/* Die Laufzeit steht im Abspieler - in der Kopfzeile des Balkens waere sie doppelt. */
.kwca-ad--kompakt .kwca-ad__zeile.is-active .kwca-ad__zeile-dauer{visibility:hidden}
.kwca-ad--kompakt .kwca-ad__zeile.is-active{padding-bottom:2px}
.kwca-ad__steuer{padding:0 26px 16px 20px}
.kwca-ad--kompakt .kwca-ad__player{
	margin-top:2px;
	padding-left:0;
	gap:18px;
	max-width:none;
}
.kwca-ad--kompakt .kwca-ad__zeit{color:#fff}
.kwca-ad--kompakt .kwca-ad .kwca-ad__ton,
.kwca-ad--kompakt .kwca-ad__ton,
.kwca-ad--kompakt .kwca-ad__ton:hover,
.kwca-ad--kompakt .kwca-ad__ton:focus,
.kwca-ad--kompakt .kwca-ad__ton:active{color:#fff}
/* Auf Schwarz: gespielter Teil rot, Rest dunkelgrau, weisser Griff -
   so ist auf einen Blick klar, wo das Stueck steht. */
.kwca-ad--kompakt .kwca-ad__leiste::-webkit-slider-runnable-track{
	background:linear-gradient(to right,#FE0C19 var(--kwca-ad-fortschritt),rgba(255,255,255,.22) var(--kwca-ad-fortschritt));
}
.kwca-ad--kompakt .kwca-ad__leiste::-moz-range-track{background:rgba(255,255,255,.22)}
.kwca-ad--kompakt .kwca-ad__leiste::-moz-range-progress{background:#FE0C19}
.kwca-ad--kompakt .kwca-ad__leiste::-webkit-slider-thumb{width:11px;height:11px;margin-top:-4px;background:#fff}
.kwca-ad--kompakt .kwca-ad__leiste::-moz-range-thumb{width:11px;height:11px;background:#fff}
.kwca-ad--kompakt .kwca-ad__leiste:focus-visible,
.kwca-ad--kompakt .kwca-ad__play:focus-visible,
.kwca-ad--kompakt .kwca-ad__ton:focus-visible{outline-color:#fff}

/* ---------- Fassung mit Titel und Abspieler unten (CA 901 / CA 701) ----------
   Wunsch Kawai 03.09.: Abspieler schwarz wie im Kompaktmodus, der gewaehlte
   Klang hebt sich nur durch einen Rahmen ab, nicht mehr durch schwarze Fuellung. */
.kwca-ad:not(.kwca-ad--kompakt) .kwca-ad__zeile.is-active,
.kwca-ad:not(.kwca-ad--kompakt) .kwca-ad__zeile.is-active:hover,
.kwca-ad:not(.kwca-ad--kompakt) .kwca-ad__zeile.is-active:focus,
.kwca-ad:not(.kwca-ad--kompakt) .kwca-ad__zeile.is-active:active{
	background-color:transparent;
	color:#292929;
	box-shadow:inset 0 0 0 2px #111;
}
.kwca-ad:not(.kwca-ad--kompakt) .kwca-ad__zeile.is-active .kwca-ad__zeile-dauer{color:#8A8A8A}
.kwca-ad:not(.kwca-ad--kompakt) .kwca-ad__player{
	margin-top:24px;
	padding:16px 24px 16px 20px;
	gap:22px;
	border-radius:8px;
	background:#111;
}
.kwca-ad:not(.kwca-ad--kompakt) .kwca-ad__zeit{color:#fff}
.kwca-ad:not(.kwca-ad--kompakt) .kwca-ad__ton,
.kwca-ad:not(.kwca-ad--kompakt) .kwca-ad__ton:hover,
.kwca-ad:not(.kwca-ad--kompakt) .kwca-ad__ton:focus,
.kwca-ad:not(.kwca-ad--kompakt) .kwca-ad__ton:active{color:#fff}
.kwca-ad:not(.kwca-ad--kompakt) .kwca-ad__leiste::-webkit-slider-runnable-track{
	background:linear-gradient(to right,#FE0C19 var(--kwca-ad-fortschritt),rgba(255,255,255,.22) var(--kwca-ad-fortschritt));
}
.kwca-ad:not(.kwca-ad--kompakt) .kwca-ad__leiste::-moz-range-track{background:rgba(255,255,255,.22)}
.kwca-ad:not(.kwca-ad--kompakt) .kwca-ad__leiste::-moz-range-progress{background:#FE0C19}
.kwca-ad:not(.kwca-ad--kompakt) .kwca-ad__leiste::-webkit-slider-thumb{width:11px;height:11px;margin-top:-4px;background:#fff}
.kwca-ad:not(.kwca-ad--kompakt) .kwca-ad__leiste::-moz-range-thumb{width:11px;height:11px;background:#fff}
.kwca-ad:not(.kwca-ad--kompakt) .kwca-ad__leiste:focus-visible,
.kwca-ad:not(.kwca-ad--kompakt) .kwca-ad__play:focus-visible,
.kwca-ad:not(.kwca-ad--kompakt) .kwca-ad__ton:focus-visible{outline-color:#fff}

/* ---------- Modellbild ---------- */

.kwca-ad__bild.kwca-ad__bild{
	margin:9px 0 0;
	align-self:center;
	display:flex;
	align-items:center;
	justify-content:center;
	min-width:0;
}
.kwca-ad__bild img{
	display:block;
	width:422px;
	max-width:100%;
	height:auto;
}

@media (prefers-reduced-motion:reduce){
	.kwca-ad__zeile{transition:none}
}

/* ---------- Schmalere Schirme ---------- */

@media (max-width:1023px){
	.kwca-ad__inhalt{padding:20px 24px 0}
	.kwca-ad__flaeche{
		grid-template-columns:1fr;
		gap:28px;
		min-height:0;
		padding:28px 24px 32px;
	}
	.kwca-ad__bild.kwca-ad__bild{margin-top:4px}
	.kwca-ad__titel.kwca-ad__titel{margin-bottom:28px}
	.kwca-ad__liste.kwca-ad__liste,
	.kwca-ad__player{max-width:none}
	.kwca-ad__player{padding-left:0;gap:20px}
	.kwca-ad__bild img{width:auto;max-width:min(100%,422px)}
	.kwca-ad__jetzt.kwca-ad__jetzt{margin-top:30px}
}

@media (max-width:781px){
	.kwca-ad__inhalt{padding:16px 16px 0}
	.kwca-ad__flaeche{padding:24px 18px 28px}
	.kwca-ad__zeile{padding:6px 16px;gap:8px}
	.kwca-ad__player{gap:14px}
	.kwca-ad__steuer{padding:0 16px 14px 16px}
}

/* ---------- Editor ---------- */

.kwca-ad-edit{
	border:1px solid #dcdcde;border-radius:8px;padding:18px 20px;background:#E9E9E9;
	font-family:Roboto,Arial,Helvetica,sans-serif;color:#1A1A1A;
}
.kwca-ad-edit__titel{margin:0 0 12px;font-size:18px;font-weight:500;text-transform:uppercase}
.kwca-ad-edit__liste{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;font-size:13px}
.kwca-ad-edit__liste li{
	display:flex;justify-content:space-between;gap:12px;
	background:#fff;border-radius:6px;padding:8px 12px;
}
.kwca-ad-edit__fuss{margin:12px 0 0;font-size:12px;color:#4B4B4B}