/**
 * KAWAI NOVUS - Aufmacher der Serienseite.
 *
 * Figma: graue Flaeche ueber die volle Breite, Inhalt 1280 mittig.
 * Augenbraue bei 165 von oben, Schlagzeile 76/1,05 zweizeilig, Einleitung
 * rechts 582 breit. Darunter zwei gleich breite Spalten mit den Instrumenten,
 * unten buendig, darunter je zwei Knoepfe 38 hoch.
 */

.kwca-nh{
	font-family:Roboto,Arial,Helvetica,sans-serif;
	color:#fff;
	background:var(--kwca-nh-grund,#8C8C8C);
}

.kwca-nh__inhalt.kwca-nh__inhalt{
	max-width:1328px;
	margin-inline:auto;
	padding:var(--kwca-nh-oben,165px) 24px 54px;
}

/*
 * Im Entwurf beginnt die graue Flaeche ganz oben, der Header schwebt darauf.
 * Der Header steht aber im Fluss vor dem Inhalt. Also ziehen wir den
 * Abschnitt um genau seine Hoehe nach oben. Der Innenabstand bleibt, wie er
 * ist - die 165 sind im Entwurf ab Seitenoberkante gemessen, nicht ab
 * Abschnittsanfang. Die Hoehe misst view.js, weil sie je nach Breite und
 * Adminleiste verschieden ist; der Ersatzwert gilt, bis das Skript laeuft.
 */
/*
 * Auf schmalen Schirmen ist der Innenabstand kleiner als der Header hoch
 * ist. Dann darf der Text nicht darunter rutschen - 24 Luft bleiben immer.
 */
.kwca-nh--unter-kopf.kwca-nh--unter-kopf .kwca-nh__inhalt.kwca-nh__inhalt{
	padding-top:max(var(--kwca-nh-oben,165px), calc(var(--kwca-kopf,116px) + 24px));
}

/* ---------- Kopfzeile ---------- */

.kwca-nh__kopf.kwca-nh__kopf{
	display:grid;
	grid-template-columns:698fr 582fr;
	align-items:start;
	margin-bottom:57px;
}

.kwca-nh__augenbraue.kwca-nh__augenbraue{
	margin:0 0 9px;
	font-size:13px;
	line-height:1.2;
	font-weight:700;
	color:#fff;
}

.kwca-nh__titel.kwca-nh__titel{
	margin:0;
	font-size:clamp(38px,5.28vw,76px);
	line-height:1.05;
	font-weight:700;
	letter-spacing:-.02em;
	color:#fff;
}

/* Im Entwurf setzt die Einleitung erst auf Hoehe der ersten Zeile der
   Schlagzeile ein, nicht schon bei der Augenbraue. */
.kwca-nh__einleitung.kwca-nh__einleitung{
	margin:70px 0 0;
	max-width:582px;
	font-size:16px;
	line-height:29px;
	font-weight:400;
	color:#F2F2F2;
}

/* ---------- Instrumente ---------- */

.kwca-nh__modelle.kwca-nh__modelle{
	list-style:none;
	margin:0;
	padding:0;
	display:grid;
	grid-template-columns:repeat(2,1fr);
	gap:24px;
	align-items:end;
}

.kwca-nh__modell.kwca-nh__modell{
	margin:0;
	display:flex;
	flex-direction:column;
	align-items:center;
}

/* Im Entwurf sind beide Instrumente gleich **breit** (rund 480) und stehen
   unten auf einer Linie - die Hoehe ergibt sich aus dem Bild. Der Bildbereich
   ist so hoch wie das groessere der beiden. */
.kwca-nh__bild.kwca-nh__bild{
	margin:0 0 40px;
	display:flex;
	align-items:flex-end;
	justify-content:center;
	height:400px;
	width:100%;
}
.kwca-nh__bild.kwca-nh__bild{position:relative;isolation:isolate}

.kwca-nh__bild.kwca-nh__bild img{
	display:block;
	position:relative;
	z-index:1;
	width:min(480px,100%);
	max-height:100%;
	height:auto;
	object-fit:contain;
}

/* Der Bodenschatten der Aufnahme ist herausgeschnitten - auf grauem Grund
   waere er ein heller Fleck statt eines Schattens. Hier kommt er als weiche
   Ellipse zurueck, damit die Instrumente nicht schweben. */
.kwca-nh__bild.kwca-nh__bild::after{
	content:"";
	position:absolute;
	z-index:0;
	left:14%;
	right:14%;
	bottom:-4px;
	height:30px;
	background:radial-gradient(ellipse at 50% 50%,
		rgba(0,0,0,.30) 0%, rgba(0,0,0,.16) 45%, rgba(0,0,0,0) 72%);
}

/* ---------- Gleiche Praesenz fuer NV6 und NV12 (Kawai, 03.09.) ----------
   Der Bildbereich ist hoeher, die Instrumente ruecken bis in die Kopfzeile
   hinauf. Das NV12 darf mit offenem Deckel 540 hoch werden; die Einleitung
   rechts wird nach unten hin kuerzer (shape-outside), damit der Deckel Platz
   hat. Die Kopfzeile liegt ueber den Bildern, deren weisser Grund also nie
   Text verdeckt. Erst ab 1280 - auf dem Tablet liefe der Text sonst ins Bild. */
/* Wunsch-Umbruch ("|" im Einleitungstext) nur am Desktop, wo der Text am Deckel entlanglaeuft. */
.kwca-nh__br{display:none}

@media (min-width:1280px){
	.kwca-nh__br{display:inline}
	.kwca-nh__kopf.kwca-nh__kopf{position:relative;z-index:2;margin-bottom:-61px}
	/* Ein Schwimmer rechts (263x145 = fuenf Zeilen): Zeilen 1-2 laufen durch,
	   ab Zeile 3 (Spitze bei 48,6 %) werden die Zeilen um je 60 px kuerzer - das ist die aus den
	   Bildpixeln gemessene Neigung des NV12-Deckels (2,06 px je px). Die Spitze
	   liegt 61 px ueber dem Absatzende, 67 px links vom Bildrand; 20 px Luft
	   sind eingerechnet. Prozent-Hoehe wuerde zu 0 aufloesen, darum fest. */
	.kwca-nh__einleitung.kwca-nh__einleitung::before{
		content:"";float:right;width:263px;height:145px;
		shape-outside:polygon(100% 0,100% 48.6%,58.2% 48.6%,0 100%,100% 100%);
	}
	.kwca-nh__modelle.kwca-nh__modelle{position:relative;z-index:1}
	.kwca-nh__bild.kwca-nh__bild{height:540px}
	.kwca-nh__modell:first-child .kwca-nh__bild img{width:min(420px,100%)}
	.kwca-nh__modell:nth-child(2) .kwca-nh__bild img{width:min(520px,100%)}
	/* Feste Absatzhoehe (fuenf Zeilen): so liegt die Deckelspitze immer an derselben
	   Stelle im Absatz, egal ob der Text vier oder fuenf Zeilen braucht. */
	.kwca-nh__einleitung.kwca-nh__einleitung{min-height:145px}
}

/* ---------- Heller Grund (Freigabe Kawai, 03.09.) ----------
   Weisse Flaeche, Text dunkel, Augenbraue rot, Freisteller mit eigenem
   Bodenschatten - die kuenstliche Schattenellipse entfaellt. */
.kwca-nh.kwca-nh--hell{color:#111}
.kwca-nh--hell .kwca-nh__augenbraue.kwca-nh__augenbraue{color:#FE0C19}
.kwca-nh--hell .kwca-nh__titel.kwca-nh__titel{color:#111}
.kwca-nh--hell .kwca-nh__einleitung.kwca-nh__einleitung{color:#292929}
.kwca-nh--hell .kwca-nh__bild.kwca-nh__bild::after{display:none}
.kwca-nh--hell .kwca-nh__knopf--hell,
.kwca-nh--hell a.kwca-nh__knopf--hell:link,
.kwca-nh--hell a.kwca-nh__knopf--hell:visited{background:#fff;color:#111;border:1px solid #111}
.kwca-nh--hell a.kwca-nh__knopf--hell:hover,
.kwca-nh--hell a.kwca-nh__knopf--hell:focus-visible{background:#F2F2F2;color:#111}
.kwca-nh--hell .kwca-nh__knopf--dunkel,
.kwca-nh--hell a.kwca-nh__knopf--dunkel:link,
.kwca-nh--hell a.kwca-nh__knopf--dunkel:visited{background:#fff;color:#111;border:1px solid #111}
.kwca-nh--hell a.kwca-nh__knopf--dunkel:hover,
.kwca-nh--hell a.kwca-nh__knopf--dunkel:focus-visible{background:#111;color:#fff}

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

.kwca-nh__knoepfe.kwca-nh__knoepfe{
	display:flex;
	align-items:center;
	justify-content:center;
	gap:18px;
	margin:0;
	flex-wrap:wrap;
}

.kwca-nh__knopf.kwca-nh__knopf{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	gap:8px;
	min-height:38px;
	padding:8px 18px;
	border-radius:6px;
	font-size:13px;
	line-height:1.2;
	font-weight:700;
	text-decoration:none;
	white-space:nowrap;
}
.kwca-nh__knopf--ohne-ziel{cursor:default}
.kwca-nh__pfeil{font-size:14px;line-height:1}
.kwca-nh__symbol{width:15px;height:15px;flex:0 0 auto}

.kwca-nh__knopf--rot{background:#FE0C19}
.kwca-nh__knopf--hell{background:#fff}
.kwca-nh__knopf--dunkel{background:#111}

/* Das Theme faerbt Links beim Ueberfahren global rot - hier steuern wir selbst. */
.kwca-nh .kwca-nh__knopf--rot,
.kwca-nh .kwca-nh__knopf--rot:link,
.kwca-nh .kwca-nh__knopf--rot:visited,
.kwca-nh .kwca-nh__knopf--rot:hover,
.kwca-nh .kwca-nh__knopf--rot:focus-visible,
.kwca-nh .kwca-nh__knopf--rot:active,
.kwca-nh .kwca-nh__knopf--dunkel,
.kwca-nh .kwca-nh__knopf--dunkel:link,
.kwca-nh .kwca-nh__knopf--dunkel:visited,
.kwca-nh .kwca-nh__knopf--dunkel:hover,
.kwca-nh .kwca-nh__knopf--dunkel:focus-visible,
.kwca-nh .kwca-nh__knopf--dunkel:active{color:#fff;text-decoration:none}

.kwca-nh .kwca-nh__knopf--hell,
.kwca-nh .kwca-nh__knopf--hell:link,
.kwca-nh .kwca-nh__knopf--hell:visited,
.kwca-nh .kwca-nh__knopf--hell:hover,
.kwca-nh .kwca-nh__knopf--hell:focus-visible,
.kwca-nh .kwca-nh__knopf--hell:active{color:#111;text-decoration:none}

a.kwca-nh__knopf--rot:hover,
a.kwca-nh__knopf--rot:focus-visible{background:#D2000C}
a.kwca-nh__knopf--hell:hover,
a.kwca-nh__knopf--hell:focus-visible{background:#EDEDED}
a.kwca-nh__knopf--dunkel:hover,
a.kwca-nh__knopf--dunkel:focus-visible{background:#000}

.kwca-nh__knopf.kwca-nh__knopf:focus-visible{outline:2px solid #fff;outline-offset:3px}

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

/* Tablet quer (1024-1279): gleiches Groessenverhaeltnis wie am Desktop,
   NV6 = 0,81 x NV12 (420/520). Ohne diese Regel wuerde die Hoehenkappung
   beide gleich hoch machen und das NV6 breiter als das NV12 wirken. */
@media (min-width:1024px) and (max-width:1279px){
	.kwca-nh__bild.kwca-nh__bild{height:470px}
	.kwca-nh__modell:first-child .kwca-nh__bild img{width:min(365px,100%)}
	.kwca-nh__modell:nth-child(2) .kwca-nh__bild img{width:min(450px,100%)}
}

@media (max-width:1023px){
	.kwca-nh__inhalt.kwca-nh__inhalt{--kwca-nh-oben:132px;padding:132px 24px 44px}
	.kwca-nh__kopf.kwca-nh__kopf{grid-template-columns:1fr;row-gap:18px;margin-bottom:36px}
	.kwca-nh__einleitung.kwca-nh__einleitung{margin-top:0;max-width:none}
	.kwca-nh__bild.kwca-nh__bild{height:260px;margin-bottom:26px}
	/* Tablet hoch: NV12 wird von der Hoehe auf ca. 250 px Breite gekappt, NV6 dazu 0,81-fach. */
	.kwca-nh__modell:first-child .kwca-nh__bild img{width:min(205px,100%)}
}

@media (max-width:700px){
	.kwca-nh__inhalt.kwca-nh__inhalt{--kwca-nh-oben:120px;padding:120px 16px 36px}
	.kwca-nh__modelle.kwca-nh__modelle{grid-template-columns:1fr;gap:44px}
	.kwca-nh__bild.kwca-nh__bild{height:210px}
	.kwca-nh__modell:first-child .kwca-nh__bild img{width:min(165px,100%)}
	.kwca-nh__knoepfe.kwca-nh__knoepfe{gap:12px}
}

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

.kwca-nh-edit{
	border-radius:10px;padding:22px 24px;background:#8C8C8C;color:#fff;
	font-family:Roboto,Arial,Helvetica,sans-serif;
}
.kwca-nh-edit__augenbraue{margin:0 0 6px;font-size:12px;font-weight:700}
.kwca-nh-edit__titel{margin:0 0 10px;font-size:26px;font-weight:700;line-height:1.1}
.kwca-nh-edit__modelle{list-style:none;margin:12px 0 0;padding:0;display:flex;gap:12px}
.kwca-nh-edit__modelle img{height:70px;width:auto;display:block}
.kwca-nh-edit__fuss{margin:12px 0 0;font-size:12px;color:#F0F0F0}