/**
 * KAWAI CA - Text-Bild-Baender "Feel the music breathe.".
 *
 * Figma: Abschnitt 1440 x 936. Band 1 graue Flaeche 621 links, Bild 699
 * rechts, Ueberlappung 40. Band 2 Bild 566 links, graue Flaeche 743 rechts,
 * Ueberlappung 29. Die Breiten stehen als Prozent, damit sie mitwachsen.
 */

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

.kwca-sb__inhalt{
	max-width:1328px;
	margin-inline:auto;
	padding:58px 24px 88px;
}

.kwca-sb__titel.kwca-sb__titel{
	margin:0 0 37px;
	font-size:clamp(32px,4.68vw,67px);
	line-height:1.04;
	font-weight:500;
	letter-spacing:-.005em;
	color:#000;
	text-align:center;
	text-wrap:balance;
}

/* ---------- Band ---------- */

.kwca-sb__band{
	display:flex;
	align-items:stretch;
	min-height:var(--kwca-sb-hoehe,346px);
}
.kwca-sb__band + .kwca-sb__band{margin-top:37px}

.kwca-sb__flaeche{
	display:flex;
	align-items:center;
	background:#E9E9E9;
	min-width:0;
}

/* Feste Hoehe, sonst bestimmt das Seitenverhaeltnis des Fotos die Bandhoehe. */
.kwca-sb__bild.kwca-sb__bild{
	margin:0;
	height:var(--kwca-sb-hoehe,346px);
	border-radius:20px;
	overflow:hidden;
	position:relative;
	z-index:1;
	min-width:0;
}
.kwca-sb__bild img{
	display:block;
	width:100%;height:100%;
	object-fit:cover;
}

/* Bild rechts: graue Flaeche 621, Bild 699, Ueberlappung 40 (von 1280). */
.kwca-sb__band--bild-rechts>.kwca-sb__flaeche{
	flex:0 0 48.516%;
	border-radius:22px 0 0 22px;
	padding:24px 55px 24px 48px;
}
.kwca-sb__band--bild-rechts>.kwca-sb__bild{
	flex:0 0 54.609%;
	margin-left:-3.125%;
}

/* Bild links: Bild 566, graue Flaeche 743, Ueberlappung 29. */
.kwca-sb__band--bild-links{flex-direction:row-reverse}
.kwca-sb__band--bild-links>.kwca-sb__flaeche{
	flex:0 0 58.047%;
	border-radius:0 22px 22px 0;
	padding:24px 40px 24px 85px;
}
.kwca-sb__band--bild-links>.kwca-sb__bild{
	flex:0 0 44.219%;
	margin-right:-2.266%;
}

/* ---------- Text im Band ---------- */

.kwca-sb__text{width:100%}

.kwca-sb__band-titel.kwca-sb__band-titel{
	margin:0 0 17px;
	font-size:clamp(20px,2vw,26px);
	line-height:1.155;
	font-weight:700;
	color:#292929;
	text-wrap:balance;
}

.kwca-sb__band-text.kwca-sb__band-text{
	margin:0;
	font-size:18px;
	line-height:24px;
	font-weight:400;
	color:#292929;
}

.kwca-sb__cta.kwca-sb__cta{margin:22px 0 0}
/* Zwei Knoepfe stehen nebeneinander und brechen erst um, wenn die
   Spalte zu schmal wird. */
.kwca-sb__cta--zwei.kwca-sb__cta--zwei{
	display:flex;
	flex-wrap:wrap;
	gap:10px;
}
.kwca-sb__band--bild-links .kwca-sb__cta--zwei.kwca-sb__cta--zwei{justify-content:flex-end}
.kwca-sb__band--mittig .kwca-sb__cta--zwei.kwca-sb__cta--zwei{justify-content:center}
.kwca-sb__cta a,
.kwca-sb__cta span{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	min-height:40px;
	padding:12px 24px;
	border-radius:6px;
	background:#111;
	color:#fff;
	font-size:14px;
	line-height:1.15;
	font-weight:700;
	text-decoration:none;
}
/* Das Theme faerbt Links beim Ueberfahren global rot - hier bleibt es weiss. */
.kwca-sb__cta.kwca-sb__cta a,
.kwca-sb__cta.kwca-sb__cta a:link,
.kwca-sb__cta.kwca-sb__cta a:visited,
.kwca-sb__cta.kwca-sb__cta a:hover,
.kwca-sb__cta.kwca-sb__cta a:focus,
.kwca-sb__cta.kwca-sb__cta a:focus-visible,
.kwca-sb__cta.kwca-sb__cta a:active{color:#fff;text-decoration:none}
.kwca-sb__cta a:hover,
.kwca-sb__cta a:focus-visible{background:#292929}

/* Im zweiten Band steht der Knopf im Entwurf rechts. */
.kwca-sb__band--bild-links .kwca-sb__cta.kwca-sb__cta{text-align:right}

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

@media (max-width:1023px){
	.kwca-sb__inhalt{padding:44px 24px 56px}
	.kwca-sb__titel.kwca-sb__titel{margin-bottom:28px}

	.kwca-sb__band,
	.kwca-sb__band--bild-links{
		flex-direction:column;
		min-height:0;
	}
	.kwca-sb__band>.kwca-sb__flaeche,
	.kwca-sb__band--bild-links>.kwca-sb__flaeche{
		flex:1 1 auto;
		border-radius:0 0 22px 22px;
		padding:28px 24px 30px;
	}
	.kwca-sb__band>.kwca-sb__bild,
	.kwca-sb__band--bild-links>.kwca-sb__bild{
		flex:1 1 auto;
		order:-1;
		margin:0;
		height:auto;
		border-radius:22px 22px 0 0;
		aspect-ratio:16/9;
	}
	.kwca-sb__band--bild-links .kwca-sb__cta.kwca-sb__cta{text-align:left}
}

@media (max-width:781px){
	.kwca-sb__inhalt{padding:36px 16px 44px}
	.kwca-sb__band + .kwca-sb__band{margin-top:24px}
}

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

.kwca-sb-edit{
	border:1px solid #dcdcde;border-radius:8px;padding:18px 20px;
	font-family:Roboto,Arial,Helvetica,sans-serif;color:#1A1A1A;
}
.kwca-sb-edit__titel{margin:0 0 14px;font-size:20px;font-weight:500;text-align:center}
.kwca-sb-edit__band{
	background:#E9E9E9;border-radius:10px;padding:12px 14px;margin-bottom:10px;font-size:13px;
}
.kwca-sb-edit__band strong{display:block;margin-bottom:4px;font-size:15px}
.kwca-sb-edit__fuss{margin:10px 0 0;font-size:12px;color:#4B4B4B}

/* ---------- Werbeband: NOVUS und Abschlussbanner ---------- */

/* Ueberschrift dieser Abschnitte ist im Entwurf fett und zweizeilig. */
/* Der Vorlauf steht je Abschnitt im Block - nach unten schliesst der
   Abschnitt buendig ab, den Abstand bringt der naechste mit. */
.kwca-sb--fett .kwca-sb__inhalt{
	padding-top:var(--kwca-sb-oben,158px);
	padding-bottom:0;
}

.kwca-sb--fett .kwca-sb__titel.kwca-sb__titel{
	font-weight:700;
	letter-spacing:-.015em;
	margin-bottom:75px;
}

/* Im geteilten Band steht der Fliesstext eine Stufe kleiner. */
.kwca-sb__band--haelften .kwca-sb__band-text.kwca-sb__band-text{
	font-size:16px;
	line-height:23px;
}

/* Flaeche und Bild je zur Haelfte, ohne Ueberlappung - eine geteilte
   Kachel mit gemeinsamen Aussenrundungen. */
.kwca-sb__band--haelften>.kwca-sb__flaeche,
.kwca-sb__band--haelften>.kwca-sb__bild{
	flex:0 0 50%;
	margin:0;
}
.kwca-sb__band--haelften.kwca-sb__band--bild-rechts>.kwca-sb__flaeche{
	border-radius:22px 0 0 22px;
	padding:24px 100px;
}
.kwca-sb__band--haelften.kwca-sb__band--bild-rechts>.kwca-sb__bild.kwca-sb__bild{
	border-radius:0 22px 22px 0;
}
.kwca-sb__band--haelften.kwca-sb__band--bild-links>.kwca-sb__flaeche{
	border-radius:0 22px 22px 0;
	padding:24px 100px;
}
.kwca-sb__band--haelften.kwca-sb__band--bild-links>.kwca-sb__bild.kwca-sb__bild{
	border-radius:22px 0 0 22px;
}

/* Abschlussbanner: mittig gesetzt und eine Stufe groesser als das NOVUS-Band.
   Steht bewusst nach den Regeln fuer --haelften, damit es dort gewinnt. */
.kwca-sb__band--mittig .kwca-sb__text{text-align:center}
.kwca-sb__band--mittig .kwca-sb__cta.kwca-sb__cta{text-align:center;margin-top:38px}

/* Doppelte Klasse, sonst gewinnt der 100er-Innenabstand von --haelften. */
.kwca-sb__band--haelften.kwca-sb__band--mittig>.kwca-sb__flaeche{padding-inline:67px}

.kwca-sb__band--mittig .kwca-sb__band-titel.kwca-sb__band-titel{
	font-size:clamp(28px,2.92vw,42px);
	line-height:1.14;
	margin-bottom:25px;
}
.kwca-sb__band--mittig .kwca-sb__band-text.kwca-sb__band-text{
	font-size:clamp(17px,1.53vw,22px);
	line-height:28px;
}

/* Roter Knopf wie "Find a Dealer". */
.kwca-sb__cta--rot a,
.kwca-sb__cta--rot span{background:#FE0C19}
.kwca-sb__cta--rot a:hover,
.kwca-sb__cta--rot a:focus-visible{background:#D2000C}

@media (max-width:1023px){
	.kwca-sb--fett .kwca-sb__inhalt{padding-top:80px}
	.kwca-sb__band--haelften.kwca-sb__band--mittig>.kwca-sb__flaeche{padding-inline:24px}
	.kwca-sb--fett .kwca-sb__titel.kwca-sb__titel{margin-bottom:40px}
	.kwca-sb__band--haelften>.kwca-sb__flaeche,
	.kwca-sb__band--haelften>.kwca-sb__bild{flex:1 1 auto}
	.kwca-sb__band--haelften.kwca-sb__band--bild-rechts>.kwca-sb__flaeche,
	.kwca-sb__band--haelften.kwca-sb__band--bild-links>.kwca-sb__flaeche{
		border-radius:0 0 22px 22px;
		padding:28px 24px 30px;
	}
	.kwca-sb__band--haelften.kwca-sb__band--bild-rechts>.kwca-sb__bild.kwca-sb__bild,
	.kwca-sb__band--haelften.kwca-sb__band--bild-links>.kwca-sb__bild.kwca-sb__bild{
		border-radius:22px 22px 0 0;
	}
}

@media (max-width:781px){
	.kwca-sb--fett .kwca-sb__inhalt{padding-top:56px}
	.kwca-sb--fett .kwca-sb__titel.kwca-sb__titel{margin-bottom:30px}
}