/**
 * KAWAI CA - Eckdaten "The essential facts.".
 *
 * Figma: zwei Flaechen 628 x 584 mit 24 px Abstand, Radius 22, #E9E9E9.
 * Ueberschrift 37,9 px / 42, Grossbuchstaben, 35 von oben, 46 von links.
 * Angaben: Bezeichnung 28,33 px / 30 fett, Wert darunter, 24 px Abstand.
 * Knoepfe 40 hoch, Radius 6, 508 von oben.
 */

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

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

.kwca-sp__raster{
	display:grid;
	grid-template-columns:repeat(2,1fr);
	gap:24px;
	align-items:stretch;
}

.kwca-sp__daten,
.kwca-sp__modell{
	background:#E9E9E9;
	border-radius:22px;
	min-height:584px;
}

/* ---------- Linke Flaeche ---------- */

.kwca-sp__daten{
	display:flex;
	flex-direction:column;
	padding:35px 46px 36px;
}

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

.kwca-sp__spalten{
	display:grid;
	grid-template-columns:1.56fr 1fr;
	gap:25px;
	padding-left:16px;
	flex:1 1 auto;
}

.kwca-sp__liste.kwca-sp__liste{
	list-style:none;
	margin:0;
	padding:0;
	display:flex;
	flex-direction:column;
	gap:24px;
	align-content:start;
}
.kwca-sp__liste li{margin:0}

.kwca-sp__liste strong{
	display:flex;
	align-items:center;
	gap:8px;
	font-size:clamp(20px,2vw,28px);
	line-height:30px;
	font-weight:700;
	color:#000;
}
.kwca-sp__liste span{
	display:block;
	font-size:16px;
	line-height:24px;
	font-weight:400;
	color:#292929;
}

.kwca-sp__mass-icon{
	flex:0 0 auto;
	width:16px;height:16px;
	color:#CD0510;
}
.kwca-sp__mass-icon svg{width:100%;height:100%;display:block}

/* ---------- Knoepfe ---------- */

.kwca-sp__knoepfe.kwca-sp__knoepfe{
	display:flex;
	flex-wrap:wrap;
	gap:25px;
	margin:36px 0 0;
}

.kwca-sp__knopf{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	min-height:40px;
	padding:12px 24px;
	border-radius:6px;
	font-size:14px;
	line-height:1.15;
	font-weight:700;
	text-decoration:none;
}
.kwca-sp__knopf--dunkel{background:#111;color:#fff}
.kwca-sp__knopf--rot{background:#FE0C19;color:#fff}
.kwca-sp__knopf--ohne-ziel{cursor:default}

/* Das Theme faerbt Links beim Ueberfahren global rot - hier bleibt es weiss. */
.kwca-sp__knopf.kwca-sp__knopf,
.kwca-sp__knopf.kwca-sp__knopf:link,
.kwca-sp__knopf.kwca-sp__knopf:visited,
.kwca-sp__knopf.kwca-sp__knopf:hover,
.kwca-sp__knopf.kwca-sp__knopf:focus,
.kwca-sp__knopf.kwca-sp__knopf:focus-visible,
.kwca-sp__knopf.kwca-sp__knopf:active{color:#fff;text-decoration:none}
a.kwca-sp__knopf--dunkel:hover,
a.kwca-sp__knopf--dunkel:focus-visible{background:#292929}
a.kwca-sp__knopf--rot:hover,
a.kwca-sp__knopf--rot:focus-visible{background:#D2000C}

/* ---------- Rechte Flaeche ---------- */

.kwca-sp__modell{
	position:relative;
	display:flex;
	flex-direction:column;
	padding:16px 24px 24px;
}

.kwca-sp__fahne.kwca-sp__fahne{
	position:absolute;
	top:16px;
	right:16px;
	margin:0;
	padding:7px 14px;
	border-radius:4px;
	background:#E8B54A;
	color:#1A1A1A;
	font-size:13px;
	line-height:1.2;
	font-weight:700;
	letter-spacing:.04em;
	text-transform:uppercase;
}

.kwca-sp__bild.kwca-sp__bild{
	margin:0;
	flex:1 1 auto;
	display:flex;
	align-items:center;
	justify-content:center;
	min-height:0;
	padding:32px 24px 8px;
}
.kwca-sp__bild img{
	display:block;
	max-width:100%;
	max-height:100%;
	width:auto;height:auto;
	object-fit:contain;
}

.kwca-sp__fuss{
	display:flex;
	align-items:flex-end;
	justify-content:space-between;
	gap:20px;
	flex-wrap:wrap;
	padding:0 12px 4px;
}

.kwca-sp__ausfuehrung-name.kwca-sp__ausfuehrung-name{
	margin:0 0 12px;
	max-width:11ch;
	font-size:clamp(16px,1.5vw,20px);
	line-height:1.2;
	font-weight:400;
	color:#292929;
}

.kwca-sp__punkte.kwca-sp__punkte{
	list-style:none;
	margin:0;
	padding:0;
	display:flex;
	gap:9px;
}
.kwca-sp__punkte li{margin:0;display:flex}
.kwca-sp__punkte{padding-top:2px}

.kwca-sp__punkt{
	appearance:none;
	-webkit-appearance:none;
	display:block;
	width:15px;height:15px;
	padding:0;
	border-radius:50%;
	background:var(--kwca-sp-farbe,#000);
	border:1px solid rgba(0,0,0,.35);
	cursor:pointer;
	transition:transform .15s ease, box-shadow .15s ease;
}

/* Das Theme faerbt Knoepfe beim Ueberfahren global ein
   (--global-palette-btn-bg-hover). Die hinterlegte Farbe muss in jedem
   Zustand gewinnen - sonst wird der weisse Punkt beim Klicken schwarz. */
.kwca-sp .kwca-sp__punkt,
.kwca-sp .kwca-sp__punkt:hover,
.kwca-sp .kwca-sp__punkt:focus,
.kwca-sp .kwca-sp__punkt:active,
.kwca-sp .kwca-sp__punkt:focus-visible{
	background-color:var(--kwca-sp-farbe,#000);
	background-image:none;
}

.kwca-sp__punkt:hover{transform:scale(1.12)}

/* Tippflaeche: unsichtbar mittig ueber dem Element, ohne Einfluss auf
   das Layout. 15px oder 23px sind mit dem Finger kaum zu treffen. */
.kwca-sp__punkt{position:relative}
.kwca-sp__punkt::after{
	content:"";
	position:absolute;
	left:50%;top:50%;
	width:24px;height:36px;
	transform:translate(-50%,-50%);
}
.kwca-sp__punkt:focus-visible{outline:2px solid #1A1A1A;outline-offset:3px}

.kwca-sp__punkt.is-active{
	box-shadow:0 0 0 2px #E9E9E9, 0 0 0 3px rgba(0,0,0,.6);
}

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

.kwca-sp__ansicht.kwca-sp__ansicht{margin:0}

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

@media (max-width:1023px){
	.kwca-sp__inhalt{padding:48px 24px 0}
	.kwca-sp__raster{grid-template-columns:1fr;gap:20px}
	.kwca-sp__daten,
	.kwca-sp__modell{min-height:0}
	.kwca-sp__daten{padding:28px 24px 30px}
	.kwca-sp__titel.kwca-sp__titel{margin-bottom:28px}
	.kwca-sp__spalten{padding-left:0;gap:20px}
	.kwca-sp__bild.kwca-sp__bild{padding:24px 0 8px;min-height:240px}
}

@media (max-width:781px){
	.kwca-sp__inhalt{padding:36px 16px 0}
	.kwca-sp__spalten{grid-template-columns:1fr;gap:24px}
	.kwca-sp__knoepfe.kwca-sp__knoepfe{gap:12px}
	.kwca-sp__fuss{padding:0}
}

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

.kwca-sp-edit{
	border:1px solid #dcdcde;border-radius:8px;padding:18px 20px;background:#E9E9E9;
	font-family:Roboto,Arial,Helvetica,sans-serif;color:#1A1A1A;
}
.kwca-sp-edit__titel{margin:0 0 12px;font-size:18px;font-weight:500;text-transform:uppercase}
.kwca-sp-edit__liste{
	list-style:none;margin:0;padding:0;
	display:grid;grid-template-columns:repeat(2,1fr);gap:8px;font-size:13px;
}
.kwca-sp-edit__liste strong{display:block}
.kwca-sp-edit__fuss{margin:12px 0 0;font-size:12px;color:#4B4B4B}