/**
 * KAWAI NOVUS - Produktdetails mit Reitern.
 *
 * Figma (NV12): Ueberschrift rund 44, darunter vier gleich breite Reiter ueber
 * die Inhaltsbreite mit feiner Linie, der aktive rot unterstrichen. Bei den
 * Massen fuenf Kacheln 232 breit, 23 Abstand, 150 hoch.
 */

.kwca-nt{
	font-family:Roboto,Arial,Helvetica,sans-serif;
	color:#1A1A1A;
	background:var(--kwca-nt-grund,#fff);
}

.kwca-nt__inhalt.kwca-nt__inhalt{
	max-width:1328px;
	margin-inline:auto;
	padding:var(--kwca-nt-oben,66px) 24px var(--kwca-nt-unten,84px);
}

.kwca-nt__titel.kwca-nt__titel{
	margin:0 0 34px;
	font-size:clamp(26px,3.06vw,44px);
	line-height:1.16;
	font-weight:700;
	letter-spacing:-.015em;
	color:#111;
}

/* ---------- Reiterleiste ---------- */

.kwca-nt__leiste{
	display:grid;
	grid-auto-flow:column;
	grid-auto-columns:1fr;
	border-bottom:1px solid #E2E0DD;
}

.kwca-nt__reiter.kwca-nt__reiter{
	appearance:none;
	border:0;
	border-bottom:2px solid transparent;
	margin-bottom:-1px;
	background:transparent;
	padding:14px 8px;
	font-family:inherit;
	font-size:13px;
	line-height:1.3;
	font-weight:400;
	color:#6A6A6A;
	cursor:pointer;
	transition:color .2s ease, border-color .2s ease;
}

/*
 * Alle Zustaende ausdruecklich, mit doppelter Klasse: das Theme gestaltet
 * Schaltflaechen im Inhaltsbereich selbst und gewinnt sonst.
 */
.kwca-nt__reiter.kwca-nt__reiter{
	background:transparent;
	color:#6A6A6A;
	border-radius:0;
	box-shadow:none;
}

/* Der gewaehlte Reiter sieht aus wie die anderen - nur der rote Strich. */
.kwca-nt__reiter.kwca-nt__reiter.ist-aktiv{
	font-weight:700;
	color:#111;
	background:transparent;
	border-bottom-color:#FE0C19;
}

/* Nach dem Klick behaelt der Knopf den Fokus. Der darf nicht aussehen wie ein
   Ueberfahren, sonst bleibt der dunkle Grund haengen, bis man woanders klickt. */
.kwca-nt__reiter.kwca-nt__reiter:focus{
	background:transparent;
	outline:0;
	box-shadow:none;
}
.kwca-nt__reiter.kwca-nt__reiter:focus:not(.ist-aktiv){color:#6A6A6A}

/* Ein sichtbarer Rahmen nur, wenn wirklich mit der Tastatur bedient wird. */
.kwca-nt__reiter.kwca-nt__reiter:focus-visible{
	outline:2px solid #111;
	outline-offset:-2px;
}

/* Ueberfahren: dunkler Grund wie bisher, aber weisse Schrift. Muss nach den
   Fokusregeln stehen, damit es auch auf einem fokussierten Reiter greift. */
.kwca-nt__reiter.kwca-nt__reiter:hover{
	background:#2E2E2E;
	color:#fff;
	border-radius:6px;
}

/* ---------- Tafeln ---------- */

.kwca-nt__tafel.kwca-nt__tafel{padding-top:34px}

/* Ohne JavaScript stehen alle Tafeln untereinander. Erst wenn view.js die
   Klasse gesetzt hat, wird umgeschaltet - so ist der Inhalt nie unerreichbar. */
.kwca-nt.ist-bereit .kwca-nt__tafel.kwca-nt__tafel{display:none}
.kwca-nt.ist-bereit .kwca-nt__tafel.kwca-nt__tafel.ist-aktiv{display:block}

.kwca-nt__tafel-titel.kwca-nt__tafel-titel{
	margin:0 0 22px;
	font-size:20px;
	line-height:1.25;
	font-weight:700;
	color:#111;
}

/* ---------- Masse ---------- */

.kwca-nt__kacheln.kwca-nt__kacheln{
	list-style:none;
	margin:0;
	padding:0;
	display:grid;
	grid-template-columns:repeat(5,1fr);
	gap:23px;
}

.kwca-nt__kachel.kwca-nt__kachel{
	min-height:150px;
	padding:24px 22px;
	border-radius:4px;
	background:#F7F6F5;
}

/* Icon ueber der Beschriftung (Breite, Tiefe, Hoehe, Gewicht). */
.kwca-nt__kachel-icon{
	display:block;
	width:24px;height:24px;
	margin:0 0 14px;
	color:#CD0510;
}
.kwca-nt__kachel-icon svg{width:100%;height:100%;display:block}

.kwca-nt__kachel-name.kwca-nt__kachel-name{
	margin:0 0 10px;
	font-size:10px;
	line-height:1.3;
	font-weight:700;
	letter-spacing:.08em;
	text-transform:uppercase;
	color:#FE0C19;
}

.kwca-nt__kachel-wert.kwca-nt__kachel-wert{
	margin:0;
	font-size:clamp(20px,1.8vw,26px);
	line-height:1.2;
	font-weight:700;
	color:#111;
}

/* ---------- Spezifikationen ---------- */

.kwca-nt__gruppe.kwca-nt__gruppe + .kwca-nt__gruppe.kwca-nt__gruppe{margin-top:38px}

.kwca-nt__gruppen-titel.kwca-nt__gruppen-titel{
	margin:0 0 14px;
	font-family:inherit;
	letter-spacing:0;
	text-transform:none;
	font-size:17px;
	line-height:1.25;
	font-weight:700;
	color:#111;
}

.kwca-nt__tabellen-titel.kwca-nt__tabellen-titel{
	margin:22px 0 8px;
	font-family:inherit;
	font-size:13px;
	line-height:1.3;
	font-weight:700;
	letter-spacing:.04em;
	text-transform:uppercase;
	color:#6A6A6A;
}

.kwca-nt__tabelle.kwca-nt__tabelle{
	display:grid;
	grid-template-columns:minmax(0,280px) minmax(0,1fr);
	margin:0;
}

.kwca-nt__tabelle.kwca-nt__tabelle dt,
.kwca-nt__tabelle.kwca-nt__tabelle dd{
	margin:0;
	padding:11px 0;
	border-top:1px solid #EDEBE8;
	font-size:13px;
	line-height:20px;
}
.kwca-nt__tabelle.kwca-nt__tabelle dt{font-weight:700;color:#111;padding-right:20px}
.kwca-nt__tabelle.kwca-nt__tabelle dd{color:#4A4A4A}

/* ---------- Videos ---------- */

.kwca-nt__videos.kwca-nt__videos{
	list-style:none;
	margin:0;
	padding:0;
	display:grid;
	grid-template-columns:repeat(2,1fr);
	gap:28px;
}

.kwca-nt__video-knopf.kwca-nt__video-knopf{
	position:relative;
	display:flex;
	align-items:center;
	gap:14px;
	width:100%;
	aspect-ratio:16/9;
	padding:0 26px;
	border:0;
	border-radius:10px;
	background:#111;
	color:#fff;
	font-family:inherit;
	font-size:15px;
	font-weight:700;
	text-align:left;
	cursor:pointer;
	transition:background-color .2s ease;
}
.kwca-nt__video-knopf.kwca-nt__video-knopf:hover{background:#262626}

/* Mit Vorschaubild fuellt das Bild die Kachel, der Pfeil sitzt mittig darauf.
   Den Titel traegt das Bild dann meist selbst - er bleibt nur fuer
   Vorleseprogramme stehen, damit der Knopf einen Namen hat. */
.kwca-nt__video-knopf.kwca-nt__video-knopf.hat-bild{
	position:relative;
	display:block;
	padding:0;
	overflow:hidden;
	background:#111;
}

.kwca-nt__video-bild{
	display:block;
	width:100%;
	height:100%;
	object-fit:cover;
	transition:transform .3s ease;
}
.kwca-nt__video-knopf.kwca-nt__video-knopf.hat-bild:hover .kwca-nt__video-bild{transform:scale(1.03)}

.kwca-nt__video-knopf.kwca-nt__video-knopf.hat-bild .kwca-nt__video-pfeil{
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-42%,-50%);
	filter:drop-shadow(0 2px 10px rgba(0,0,0,.5));
}

/* Der Kreis hinter dem Pfeil. */
.kwca-nt__video-knopf.kwca-nt__video-knopf.hat-bild::after{
	content:"";
	position:absolute;
	top:50%;
	left:50%;
	width:66px;
	height:66px;
	margin:-33px 0 0 -33px;
	border-radius:50%;
	background:rgba(255,255,255,.92);
	transition:background-color .2s ease;
}
.kwca-nt__video-knopf.kwca-nt__video-knopf.hat-bild:hover::after{background:#fff}
.kwca-nt__video-knopf.kwca-nt__video-knopf.hat-bild .kwca-nt__video-pfeil{z-index:1}

/* Nur fuer Vorleseprogramme sichtbar. */
.kwca-nt__video-knopf.kwca-nt__video-knopf.hat-bild .kwca-nt__video-name.kwca-nt__video-name{
	position:absolute;
	width:1px;
	height:1px;
	margin:-1px;
	padding:0;
	overflow:hidden;
	clip-path:inset(50%);
	white-space:nowrap;
}

@media (prefers-reduced-motion:reduce){
	.kwca-nt__video-bild{transition:none}
	.kwca-nt__video-knopf.kwca-nt__video-knopf.hat-bild:hover .kwca-nt__video-bild{transform:none}
}

.kwca-nt__video-pfeil{
	flex:none;
	width:0;
	height:0;
	border-style:solid;
	border-width:11px 0 11px 18px;
	border-color:transparent transparent transparent #FE0C19;
}

/* Das eingesetzte Video fuellt die Kachel. */
.kwca-nt__video iframe{
	display:block;
	width:100%;
	aspect-ratio:16/9;
	border:0;
	border-radius:10px;
}

/* ---------- Dateien ---------- */

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

.kwca-nt__datei.kwca-nt__datei{
	display:flex;
	align-items:center;
	gap:16px;
	min-height:64px;
	padding:0 22px;
	border-radius:8px;
	background:#F7F6F5;
}

.kwca-nt__datei-name.kwca-nt__datei-name{
	margin:0;
	font-family:inherit;
	line-height:1.3;
	letter-spacing:0;
	text-transform:none;
	font-size:14px;
	font-weight:700;
	color:#111;
}

.kwca-nt__datei-groesse.kwca-nt__datei-groesse{
	font-size:12px;
	color:#6A6A6A;
	margin-right:auto;
}

.kwca-nt__datei-knopf.kwca-nt__datei-knopf{
	flex:none;
	display:inline-flex;
	align-items:center;
	min-height:36px;
	padding:0 18px;
	border-radius:4px;
	background:#111;
	color:#fff;
	font-size:12px;
	font-weight:700;
	text-decoration:none;
	transition:background-color .2s ease;
}
.kwca-nt__datei-knopf.kwca-nt__datei-knopf:hover{background:#333}

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

@media (max-width:1023px){
	.kwca-nt__inhalt.kwca-nt__inhalt{padding:52px 24px 62px}
	.kwca-nt__leiste{grid-auto-flow:row;grid-auto-columns:auto}
	.kwca-nt__reiter.kwca-nt__reiter{text-align:left;border-bottom:1px solid #E2E0DD;margin-bottom:0}
	.kwca-nt__reiter.kwca-nt__reiter.ist-aktiv{border-bottom-color:#FE0C19}
	.kwca-nt__kacheln.kwca-nt__kacheln{grid-template-columns:repeat(2,1fr);gap:14px}
	.kwca-nt__kachel.kwca-nt__kachel{min-height:0;padding:18px}
	/* Die Kachel nimmt hier die halbe oder die ganze Breite ein - die
	   10px der schmalen Entwurfskachel sind dafuer zu klein. */
	.kwca-nt__kachel-name.kwca-nt__kachel-name{font-size:12px}
	.kwca-nt__videos.kwca-nt__videos{grid-template-columns:1fr;gap:18px}
	.kwca-nt__tabelle.kwca-nt__tabelle{grid-template-columns:1fr}
	.kwca-nt__tabelle.kwca-nt__tabelle dt{padding-bottom:0;border-bottom:0}
	.kwca-nt__tabelle.kwca-nt__tabelle dd{padding-top:2px;border-top:0}
}

@media (max-width:600px){
	.kwca-nt__inhalt.kwca-nt__inhalt{padding:42px 16px 48px}
	.kwca-nt__kacheln.kwca-nt__kacheln{grid-template-columns:1fr}
	.kwca-nt__datei.kwca-nt__datei{flex-wrap:wrap;padding:16px 18px;min-height:0}
	.kwca-nt__datei-groesse.kwca-nt__datei-groesse{margin-right:0}
	.kwca-nt__datei-knopf.kwca-nt__datei-knopf{width:100%;justify-content:center}
	.kwca-nt__datei-knoepfe{width:100%}
	.kwca-nt .kwca-nt__datei-knopf--offen{width:auto;flex:0 0 auto}
}

/* ---------- Vorschau im Editor ---------- */

.kwca-nt-edit{
	border-radius:8px;
	padding:22px 24px;
	background:#fff;
	border:1px solid #E2E0DD;
	font-family:Roboto,Arial,Helvetica,sans-serif;
	color:#1A1A1A;
}
.kwca-nt-edit__titel{margin:0 0 14px;font-size:22px;font-weight:700}
.kwca-nt-edit__leiste{display:flex;gap:18px;border-bottom:1px solid #E2E0DD;padding-bottom:8px}
.kwca-nt-edit__leiste span{font-size:12px;color:#6A6A6A}
.kwca-nt-edit__leiste span:first-child{font-weight:700;color:#111;border-bottom:2px solid #FE0C19;padding-bottom:6px;margin-bottom:-9px}
.kwca-nt-edit__hinweis{margin:14px 0 0;font-size:12px;color:#6A6A6A}

/* ---------- Downloads: Open neben Download ---------- */

.kwca-nt__datei-knoepfe{
	display:inline-flex;
	align-items:center;
	gap:10px;
	flex:0 0 auto;
}
/* Wie im Entwurf: "Open" als schlichter Text-Link, "Download" als dunkler Knopf. */
.kwca-nt .kwca-nt__datei-knopf--offen,
.kwca-nt .kwca-nt__datei-knopf--offen:link,
.kwca-nt .kwca-nt__datei-knopf--offen:visited{
	background:transparent;
	color:#111;
	padding:0 6px;
	text-decoration:underline;
	text-underline-offset:3px;
}
.kwca-nt .kwca-nt__datei-knopf--offen:hover,
.kwca-nt .kwca-nt__datei-knopf--offen:focus-visible{background:transparent;color:#FE0C19}