/**
 * KAWAI CA - Modellauswahl "Feel the difference. Choose your CA.".
 *
 * Vier Spalten auf breiten Schirmen, zwei ab Tablet, eine auf dem Handy.
 * Der Abschnitt braucht kein JavaScript.
 */

.kwca-mc{
	font-family:Roboto,Arial,Helvetica,sans-serif;
	color:#1A1A1A;
	margin-top:224px;
}

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

/* ---------- Ueberschrift ---------- */

.kwca-mc__titel.kwca-mc__titel{
	font-size:clamp(32px,4.72vw,68px);
	line-height:1.1;
	font-weight:700;
	letter-spacing:-.015em;
	color:#111;
	text-align:center;
	text-wrap:balance;
	margin:0 0 80px;
}

/* ---------- Stufenleiste ---------- */

.kwca-mc__stufen.kwca-mc__stufen{
	list-style:none;
	display:grid;
	grid-template-columns:repeat(4,1fr);
	gap:24px;
	margin:0 0 26px;
	padding:0;
	counter-reset:none;
}

.kwca-mc__stufe{
	position:relative;
	display:flex;
	flex-direction:column;
	align-items:center;
	text-align:center;
}

.kwca-mc__kreis{
	width:48px;height:48px;
	border:1px solid #7B7B7B;
	border-radius:50%;
	background:#E9E9E9;
	display:grid;place-items:center;
	font-size:15px;
	line-height:1;
	color:#1A1A1A;
}

.kwca-mc__stufe-text{
	margin-top:23px;
	font-size:14px;
	line-height:1.2;
	font-weight:700;
	letter-spacing:.04em;
	text-transform:uppercase;
	color:#1A1A1A;
}

/* Verbindungspfeil zur vorherigen Stufe. */
.kwca-mc__stufe:not(:first-child)::before{
	content:"";
	position:absolute;
	top:23px;
	left:calc(-50% + 28px);
	right:calc(50% + 52px);
	height:2px;
	background:#1A1A1A;
}

.kwca-mc__stufe:not(:first-child)::after{
	content:"";
	position:absolute;
	top:20px;
	right:calc(50% + 53.7px);
	width:8px;height:8px;
	border-top:2px solid #1A1A1A;
	border-right:2px solid #1A1A1A;
	transform:rotate(45deg);
}

/* ---------- Karten ---------- */

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

.kwca-mc__karte{
	position:relative;
	display:flex;
	flex-direction:column;
	background:#E9E9E9;
	border-radius:16px;
	padding:20px 23px;
}

.kwca-mc__name.kwca-mc__name{
	font-size:clamp(24px,2.1vw,30px);
	line-height:1.05;
	font-weight:700;
	letter-spacing:-.01em;
	color:#1A1A1A;
	margin:0;
}

.kwca-mc__sub.kwca-mc__sub{
	font-size:15px;
	line-height:1.3;
	font-weight:400;
	color:#4B4B4B;
	margin:2px 0 0;
}

.kwca-mc__media{
	margin:8px 0 34px;
	height:200px;
}
.kwca-mc__media img{
	display:block;
	width:100%;height:100%;
	object-fit:contain;
	object-position:center bottom;
}

/* ---------- Merkmale ---------- */

.kwca-mc__merkmale.kwca-mc__merkmale{
	list-style:none;
	margin:auto 0 0;
	padding:0;
	display:flex;
	flex-direction:column;
	gap:21px;
}

.kwca-mc__merkmal.kwca-mc__merkmal{
	display:grid;
	grid-template-columns:48px 1fr;
	gap:11px;
	align-items:center;
	margin:0;
}

.kwca-mc__symbol{
	--kwca-mc-cut:#000;
	width:48px;height:48px;
	border-radius:50%;
	background:#000;
	color:#fff;
	display:grid;place-items:center;
}
.kwca-mc__symbol svg{width:26px;height:auto;display:block}

.kwca-mc__merkmal-text{
	display:flex;
	flex-direction:column;
	font-size:16px;
	line-height:1.05;
	color:#1A1A1A;
}
.kwca-mc__merkmal-text strong{font-weight:700}
.kwca-mc__merkmal-text span{font-weight:400}

/* ---------- Knopf in der Karte ---------- */

.kwca-mc__cta{
	margin:32px 12px 0;
	min-height:47px;
	border:2px solid #1A1A1A;
	border-radius:8px;
	display:flex;
	align-items:center;
	justify-content:center;
	gap:10px;
	padding:6px 14px;
	font-size:15px;
	line-height:1.1;
	font-weight:700;
	letter-spacing:.02em;
	color:#1A1A1A;
	background:transparent;
	text-decoration:none;
	text-align:center;
}
.kwca-mc__cta:hover,
.kwca-mc__cta:focus-visible{background:#1A1A1A;color:#fff}

.kwca-mc__cta--voll{background:#1A1A1A;color:#fff}
/* Andersherum als die hellen Knoepfe: die wechseln auf dunkel, diese auf
   hell. So reagieren beide gleich deutlich - #1A1A1A auf #000 war praktisch
   nicht zu sehen. */
.kwca-mc__cta--voll:hover,
.kwca-mc__cta--voll:focus-visible{background:transparent;color:#1A1A1A}

/* Noch ohne Ziel: sieht aus wie der Knopf, reagiert aber nicht. */
.kwca-mc__cta--ohne-ziel{cursor:default}
.kwca-mc__cta--ohne-ziel:hover{background:transparent;color:#1A1A1A}
.kwca-mc__cta--voll.kwca-mc__cta--ohne-ziel:hover{background:#1A1A1A;color:#fff}

.kwca-mc__chevron{width:7px;height:12px;flex:0 0 auto}

/* Letztes Element unten halten, damit alle Karten gleich hoch wirken. */
.kwca-mc__karte>:last-child{margin-bottom:0}

/* ---------- Fahne ---------- */

.kwca-mc__fahne{
	position:absolute;
	top:-5px;
	right:27px;
	width:72px;
	min-height:82px;
	background:#000;
	color:#fff;
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:6px;
	padding:14px 3px 22px;
	clip-path:polygon(0 0,100% 0,100% 100%,50% 78%,0 100%);
}
/* Mit Krone: oben etwas enger, damit die Fahne gleich hoch bleibt. */
.kwca-mc__fahne--icon{padding-top:8px;gap:2px}
.kwca-mc__fahne-icon svg{width:22px;height:auto;display:block}
.kwca-mc__fahne-text{
	font-size:10px;
	line-height:1.25;
	text-transform:uppercase;
	text-align:center;
}

/* ---------- Techniklink ---------- */

.kwca-mc__specs.kwca-mc__specs{
	margin:12px 32px 0 0;
	text-align:right;
	font-size:13px;
	line-height:1.4;
	font-weight:700;
	color:#1A1A1A;
}
.kwca-mc__specs a{color:inherit;text-decoration:none}
.kwca-mc__specs a:hover{text-decoration:underline}

/* ---------- Vertrauensleiste ---------- */

.kwca-mc__vertrauen{
	display:grid;
	grid-template-columns:217fr 267fr 302fr 493fr;
	margin-top:29px;
	padding-bottom:48px;
	border-bottom:1px solid #7B7B7B;
}

.kwca-mc__punkt{
	display:flex;
	align-items:center;
	justify-content:center;
	gap:23px;
	min-height:58px;
}
.kwca-mc__punkt+.kwca-mc__punkt{border-left:1px solid #7B7B7B}

.kwca-mc__punkt-icon{
	flex:0 0 auto;
	width:46px;height:46px;
	color:#1A1A1A;
}
.kwca-mc__punkt-icon svg{width:100%;height:100%;display:block}

.kwca-mc__punkt-text{
	display:flex;
	flex-direction:column;
	font-size:14px;
	line-height:1.15;
	font-weight:700;
	letter-spacing:.01em;
	text-transform:uppercase;
	color:#1A1A1A;
}

.kwca-mc__punkt--cta{gap:18px}
.kwca-mc__punkt--cta .kwca-mc__punkt-text{
	font-size:13.5px;
	line-height:1.35;
	font-weight:400;
	letter-spacing:0;
	text-transform:none;
	max-width:235px;
}
.kwca-mc__punkt--cta .kwca-mc__punkt-text strong{font-weight:700}

.kwca-mc__dealer{
	flex:0 0 auto;
	margin-left:12px;
	min-width:148px;
	min-height:40px;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	padding:6px 16px;
	border-radius:4px;
	background:#FE0C19;
	color:#fff;
	font-size:14px;
	font-weight:700;
	line-height:1.2;
	text-decoration:none;
}
.kwca-mc__dealer:hover,
.kwca-mc__dealer:focus-visible{background:#D2000C;color:#fff}
.kwca-mc__dealer.kwca-mc__cta--ohne-ziel:hover{background:#FE0C19}

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

@media (max-width:1180px){
	.kwca-mc__vertrauen{
		grid-template-columns:repeat(3,1fr);
		row-gap:28px;
	}
	.kwca-mc__punkt--cta{
		grid-column:1 / -1;
		border-left:0;
		border-top:1px solid #7B7B7B;
		padding-top:28px;
	}
}

@media (max-width:1023px){
	.kwca-mc{margin-top:140px}
	.kwca-mc__titel.kwca-mc__titel{margin-bottom:52px}
	.kwca-mc__stufen.kwca-mc__stufen,
	.kwca-mc__karten{grid-template-columns:repeat(2,1fr)}
	.kwca-mc__stufe:nth-child(odd)::before,
	.kwca-mc__stufe:nth-child(odd)::after{display:none}
	.kwca-mc__karten{row-gap:32px}
}

@media (max-width:781px){
	.kwca-mc{margin-top:96px}
	.kwca-mc__inhalt{padding-inline:16px}
	.kwca-mc__titel.kwca-mc__titel{margin-bottom:36px}

	.kwca-mc__stufen.kwca-mc__stufen{
		grid-template-columns:1fr;
		gap:0;
		margin-bottom:32px;
	}
	.kwca-mc__stufe{
		flex-direction:row;
		align-items:center;
		gap:16px;
		text-align:left;
		padding-bottom:18px;
	}
	.kwca-mc__stufe-text{margin-top:0}
	.kwca-mc__kreis{flex:0 0 auto;width:40px;height:40px}
	/* Senkrechte Linie statt Pfeil. */
	.kwca-mc__stufe:not(:first-child)::before{
		top:-18px;left:19px;right:auto;
		width:1px;height:18px;
	}
	.kwca-mc__stufe:not(:first-child)::after{display:none}

	.kwca-mc__karten{grid-template-columns:1fr;row-gap:24px}
	.kwca-mc__media{height:180px}
	.kwca-mc__specs.kwca-mc__specs{margin-right:0;text-align:left}

	.kwca-mc__vertrauen{
		grid-template-columns:1fr;
		row-gap:22px;
		padding-bottom:32px;
	}
	.kwca-mc__punkt{justify-content:flex-start}
	.kwca-mc__punkt+.kwca-mc__punkt{border-left:0}
	.kwca-mc__punkt--cta{
		flex-wrap:wrap;
		border-top:1px solid #7B7B7B;
		padding-top:22px;
	}
	.kwca-mc__dealer{margin-left:0}
}

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

.kwca-mc-edit{
	border:1px solid #dcdcde;border-radius:8px;padding:18px 20px;background:#F7F7F7;
	font-family:Roboto,Arial,Helvetica,sans-serif;color:#1A1A1A;
}
.kwca-mc-edit__kopf{margin:0 0 14px;font-weight:700;font-size:15px}
.kwca-mc-edit__liste{
	margin:0;padding:0;list-style:none;
	display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;
}
.kwca-mc-edit__karte{
	background:#E9E9E9;border-radius:10px;padding:12px;font-size:13px;
	display:flex;flex-direction:column;gap:6px;
}
.kwca-mc-edit__karte img{width:100%;height:88px;object-fit:contain;display:block}
.kwca-mc-edit__name{font-weight:700;font-size:15px}
.kwca-mc-edit__fuss{margin:14px 0 0;font-size:12px;color:#4B4B4B}

/* ---------- Abschnitt mit Kriterienleiste (Modellorientierung) ---------- */

.kwca-mc--kriterien{margin-top:118px}
.kwca-mc--kriterien .kwca-mc__titel.kwca-mc__titel{
	line-height:1.045;
	margin-bottom:57px;
}

@media (max-width:1023px){
	.kwca-mc--kriterien{margin-top:96px}
	.kwca-mc--kriterien .kwca-mc__titel.kwca-mc__titel{margin-bottom:40px}
}
@media (max-width:781px){
	.kwca-mc--kriterien{margin-top:72px}
	.kwca-mc--kriterien .kwca-mc__titel.kwca-mc__titel{margin-bottom:30px}
}

/* ---------- Kriterienleiste ---------- */

.kwca-mc__kriterien.kwca-mc__kriterien{
	list-style:none;
	margin:0 0 33px;
	padding:16px 22px;
	background:#E9E9E9;
	border-radius:24px;
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
	gap:16px 24px;
}

.kwca-mc__kriterium{
	display:flex;
	align-items:center;
	gap:11px;
	margin:0;
	min-width:0;
}

.kwca-mc__kriterium-text{
	display:flex;
	flex-direction:column;
	font-size:15px;
	line-height:1.07;
	color:#1A1A1A;
}
.kwca-mc__kriterium-text strong{font-weight:700}
.kwca-mc__kriterium-text span{font-weight:400}

/* ---------- Aufklappbare Karte ---------- */

.kwca-mc__karte{z-index:1}
.kwca-mc__karte--klappbar{padding-bottom:8px}

.kwca-mc__mehr{
	appearance:none;
	display:flex;
	align-items:center;
	justify-content:center;
	width:100%;
	margin:14px 0 0;
	padding:6px 0;
	border:0;
	background:none;
	color:#1A1A1A;
	cursor:pointer;
	transition:opacity .2s ease;
}
.kwca-mc__pfeil-ab{
	width:16px;height:10px;display:block;
	transition:transform .3s ease;
}

/* Grundzustand: die Zusatzangaben liegen im Fluss und schieben die Karte auf.
   Das ist das Verhalten auf Touchgeraeten und auf schmalen Schirmen. */
.kwca-mc__details{
	background:#E9E9E9;
	overflow:hidden;
	max-height:0;
	padding:0;
	transition:max-height .38s ease, padding .38s ease;
}

.kwca-mc__werte.kwca-mc__werte{
	list-style:none;
	margin:0;
	padding:0;
	display:flex;
	flex-direction:column;
	gap:14px;
}

.kwca-mc__wert{
	display:grid;
	grid-template-columns:48px 1fr;
	gap:11px;
	align-items:center;
	margin:0;
}

.kwca-mc__wert-body{display:flex;flex-direction:column;gap:6px}

.kwca-mc__punkte{display:flex;align-items:center;gap:16px}

.kwca-mc__dot{
	width:9px;height:9px;
	border-radius:50%;
	border:1px solid #1A1A1A;
	background:transparent;
	flex:0 0 auto;
}
.kwca-mc__dot--voll{background:#1A1A1A}

.kwca-mc__wert-label{
	font-size:14px;
	line-height:1.1;
	color:#1A1A1A;
}

/* Geoeffnet per Klick oder Tastatur. */
.kwca-mc__karte.ist-offen .kwca-mc__details{max-height:360px;padding:16px 0 6px}
.kwca-mc__karte.ist-offen .kwca-mc__pfeil-ab{transform:rotate(180deg)}

/* Breite Schirme mit Maus: die Flaeche faehrt unter der Karte aus und
   ueberlagert den Bereich darunter, damit die Seite nicht springt. Dafuer
   haelt der Abschnitt unten so viel Platz frei wie im Entwurf vorgesehen. */
@media (hover:hover) and (pointer:fine) and (min-width:1024px){
	.kwca-mc--kriterien{padding-bottom:236px}

	.kwca-mc__details{
		position:absolute;
		left:0;right:0;top:100%;
		z-index:2;
		border-radius:0 0 16px 16px;
		padding:0 23px;
	}

	.kwca-mc__karte--klappbar:hover,
	.kwca-mc__karte--klappbar:focus-within,
	.kwca-mc__karte.ist-offen{
		z-index:3;
		border-radius:16px 16px 0 0;
	}
	.kwca-mc__karte--klappbar:hover .kwca-mc__details,
	.kwca-mc__karte--klappbar:focus-within .kwca-mc__details,
	.kwca-mc__karte.ist-offen .kwca-mc__details{max-height:360px;padding:0 23px 22px}
	.kwca-mc__karte--klappbar:hover .kwca-mc__mehr{opacity:0}
}

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

@media (max-width:1023px){
	.kwca-mc__kriterien.kwca-mc__kriterien{
		justify-content:flex-start;
		gap:18px 32px;
		border-radius:20px;
	}
	.kwca-mc__kriterium{flex:0 0 calc(50% - 16px)}
}

@media (max-width:781px){
	.kwca-mc__kriterien.kwca-mc__kriterien{
		flex-direction:column;
		padding:18px;
		border-radius:16px;
		margin-bottom:24px;
	}
	.kwca-mc__kriterium{flex:1 1 auto}
	.kwca-mc__punkte{gap:12px}
}

/* ---------- Produktseite: Einleitung und aktuelle Karte ---------- */

/* Mit Einleitung steht der Abschnitt auf einer Produktseite. Dort sitzt er
   unter einer grauen Flaeche und braucht weniger Vorlauf als auf der
   Serienseite. Im Entwurf liegen 260 px zwischen Flaeche und Ueberschrift. */
.kwca-mc--intro{margin-top:250px}

.kwca-mc--intro .kwca-mc__titel.kwca-mc__titel{margin-bottom:20px}

.kwca-mc__intro.kwca-mc__intro{
	max-width:760px;
	margin:0 auto 62px;
	font-size:21px;
	line-height:31px;
	font-weight:400;
	color:#292929;
	text-align:center;
	text-wrap:balance;
}

/* Die Karte der Seite, auf der man gerade ist. */
/* Roter Rahmen um die Karte, der Grund bleibt wie bei den anderen drei. */
.kwca-mc__karte.ist-hier{
	box-shadow:inset 0 0 0 2px #CD0510;
}

/* Statt "DISCOVER ..." steht hier der Hinweis auf die aktuelle Seite. */
.kwca-mc__cta--hier.kwca-mc__cta--hier,
.kwca-mc__cta--hier.kwca-mc__cta--hier:hover{
	border-color:#CD0510;
	background:transparent;
	color:#CD0510;
	cursor:default;
}

@media (max-width:1023px){
	.kwca-mc--intro{margin-top:120px}
	.kwca-mc__intro.kwca-mc__intro{margin-bottom:40px}
}

@media (max-width:781px){
	.kwca-mc--intro{margin-top:80px}
	.kwca-mc__intro.kwca-mc__intro{margin-bottom:30px}
}