/*
 * Fließtext der Artikelseiten.
 *
 * Der Export schreibt jedem Absatz seine Styles direkt ins style-Attribut. Im
 * Block-Editor gibt es diese Attribute nicht — die Redaktion schreibt normale
 * Absätze, Überschriften, Zitate und Listen. Dieses Stylesheet bildet exakt
 * die Werte des Exports auf die Standardblöcke ab, damit ein frisch
 * geschriebener Artikel genauso aussieht wie der aus dem Design.
 *
 * Zuordnung Export -> Block:
 *   Intro-Absatz (18px, fett)          -> erster Absatz des Artikels
 *   Fließtext (16px)                   -> Absatz
 *   Zwischentitel + gelber Balken      -> Überschrift H2 (Balken als ::after)
 *   Pull-Quote (Caveat auf Sandfläche) -> Zitat
 *   Checkliste mit Häkchen-Kreisen     -> Liste
 * Tipp-Box und Polaroid-Paar sind zu eigenständig für Standardblöcke und
 * liegen als Block-Vorlagen bereit (siehe functions.php).
 */

.nv-artikel-inhalt {
	font-size: 16px;
	line-height: 1.85;
	color: #57554D;
}

.nv-artikel-inhalt > *:first-child {
	margin-top: 0;
}

.nv-artikel-inhalt p {
	font-size: 16px;
	line-height: 1.85;
	color: #57554D;
	margin: 0 0 22px;
}

/* Der Anreißer des Exports: größer, dunkler, halbfett. */
.nv-artikel-inhalt > p:first-child {
	font-size: 18px;
	line-height: 1.85;
	color: #3E4B4A;
	margin: 0 0 26px;
	font-weight: 600;
	text-wrap: pretty;
}

/* Letzter Absatz vor einem Zwischentitel bekommt im Export mehr Luft. */
.nv-artikel-inhalt p:has(+ h2) {
	margin-bottom: 40px;
}

.nv-artikel-inhalt h2 {
	font-family: 'Alfa Slab One', serif;
	font-weight: 400;
	font-size: 27px;
	line-height: 1.3;
	color: #00707D;
	margin: 0 0 6px;
}

/* Der gelbe Balken unter jedem Zwischentitel. */
.nv-artikel-inhalt h2::after {
	content: "";
	display: block;
	width: 56px;
	height: 3px;
	background: #FFC426;
	border-radius: 2px;
	margin: 6px 0 22px;
}

.nv-artikel-inhalt h3 {
	font-family: 'Alfa Slab One', serif;
	font-weight: 400;
	font-size: 21px;
	color: #00707D;
	margin: 0 0 10px;
}

.nv-artikel-inhalt a {
	color: #0AA5B4;
	font-weight: 700;
}

.nv-artikel-inhalt strong {
	color: #3E4B4A;
}

/* Pull-Quote: Sandfläche, Anführungszeichen-Grafik, Caveat. */
.nv-artikel-inhalt blockquote {
	background: #F6F2E9;
	border-radius: 14px;
	padding: 30px 34px 30px 88px;
	margin: 0 0 40px;
	border: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='27' viewBox='0 0 30 24'%3E%3Cpath d='M2 14 C2 7, 6 2, 12 2 L12 6 C9 6, 7 9, 7 12 L12 12 L12 22 L2 22 Z M18 14 C18 7, 22 2, 28 2 L28 6 C25 6, 23 9, 23 12 L28 12 L28 22 L18 22 Z' fill='%230AA5B4'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: 34px 34px;
}

.nv-artikel-inhalt blockquote p {
	font-family: Caveat, cursive;
	font-size: 28px;
	line-height: 1.4;
	color: #00707D;
	margin: 0;
	text-wrap: pretty;
}

.nv-artikel-inhalt blockquote cite {
	display: block;
	font-family: 'Nunito Sans', sans-serif;
	font-size: 13.5px;
	font-style: normal;
	color: #8A867A;
	margin-top: 10px;
}

/* Checkliste: Häkchen im Kreis statt Aufzählungspunkt. */
.nv-artikel-inhalt ul {
	list-style: none;
	padding: 0;
	margin: 0 0 44px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.nv-artikel-inhalt ul li {
	position: relative;
	padding-left: 32px;
	font-size: 15px;
	line-height: 1.7;
	color: #3E4B4A;
	font-weight: 600;
}

.nv-artikel-inhalt ul li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 2px;
	width: 20px;
	height: 20px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='none' stroke='%230AA5B4' stroke-width='1.8'/%3E%3Cpath d='M8 12.5 l2.6 2.6 L16 9.5' fill='none' stroke='%230AA5B4' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
}

.nv-artikel-inhalt ol {
	padding-left: 22px;
	margin: 0 0 44px;
}

.nv-artikel-inhalt ol li {
	font-size: 15px;
	line-height: 1.7;
	color: #3E4B4A;
	margin-bottom: 14px;
}

/* Bilder im Fließtext behalten die Proportionen der Spalte. */
.nv-artikel-inhalt img {
	max-width: 100%;
	height: auto;
}

.nv-artikel-inhalt figure {
	margin: 0 0 40px;
}

.nv-artikel-inhalt figcaption {
	font-family: Caveat, cursive;
	font-size: 21px;
	color: #3E4B4A;
	text-align: center;
	padding: 10px 0 0;
}

/* ---------------------------------------------------------------------------
 * Zwei Sonderbausteine des Designs, als Block-Vorlagen einfügbar.
 * Beide bestehen absichtlich aus Standardblöcken (Gruppe, Überschrift, Absatz,
 * Spalten, Bild) — so bleibt jeder Text und jedes Bild normal bearbeitbar,
 * statt als roher HTML-Block im Editor zu liegen.
 * ------------------------------------------------------------------------ */

/* Tipp-Box */
.nv-artikel-inhalt .nv-tipp {
	background: #E9F2F1;
	border-radius: 16px;
	padding: 30px 34px;
	margin: 0 0 44px;
	position: relative;
	padding-left: 92px;
}

.nv-artikel-inhalt .nv-tipp::before {
	content: "";
	position: absolute;
	left: 34px;
	top: 30px;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background-color: #FFFDF8;
	box-shadow: 0 3px 10px rgba(8, 120, 130, 0.12);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24'%3E%3Cpath d='M12 3 a6 6 0 0 1 6 6 c0 2.5 -1.5 3.8 -2.5 5 c-0.8 1 -1 1.6 -1 3 h-5 c0 -1.4 -0.2 -2 -1 -3 c-1 -1.2 -2.5 -2.5 -2.5 -5 a6 6 0 0 1 6 -6 Z M9.5 20 h5 M10.5 22.5 h3' fill='none' stroke='%2300707D' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
}

.nv-artikel-inhalt .nv-tipp__titel {
	font-family: 'Nunito Sans', sans-serif;
	font-weight: 800;
	font-size: 16px;
	color: #00707D;
	margin: 0;
}

.nv-artikel-inhalt .nv-tipp__titel::after {
	content: none;
}

.nv-artikel-inhalt .nv-tipp__sub {
	font-family: Caveat, cursive;
	font-size: 19px;
	color: #0AA5B4;
	line-height: 1;
	margin: 0 0 12px;
}

.nv-artikel-inhalt .nv-tipp p:last-child {
	font-size: 15px;
	line-height: 1.8;
	color: #57554D;
	margin: 0;
}

/* Polaroid-Paar */
.nv-artikel-inhalt .nv-polaroids {
	display: flex;
	gap: 30px;
	justify-content: center;
	flex-wrap: wrap;
	margin: 0 0 44px;
}

.nv-artikel-inhalt .nv-polaroids figure,
.nv-artikel-inhalt .nv-polaroids .wp-block-image {
	flex: 1;
	min-width: 240px;
	max-width: 330px;
	background: #FFFDF8;
	padding: 12px 12px 14px;
	box-shadow: 0 14px 36px rgba(8, 120, 130, 0.14);
	margin: 0;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.nv-artikel-inhalt .nv-polaroids > *:first-child {
	transform: rotate(-2deg);
}

.nv-artikel-inhalt .nv-polaroids > *:last-child {
	transform: rotate(2deg);
	margin-top: 18px;
}

.nv-artikel-inhalt .nv-polaroids > *:hover {
	transform: rotate(0deg) translateY(-5px);
	box-shadow: 0 20px 44px rgba(8, 120, 130, 0.2);
}