/**
 * mednaht Design – Artikel und Inhaltsseiten.
 *
 * Gilt für die Elementor-Vorlagen „Artikel" und „Inhaltsseite" (Klasse .mn-article,
 * angelegt von scripts/lib/setup-article-templates.php). Prinzip: eine schmale
 * Lesespalte für Text, Bilder und Spalten etwas breiter, viel Weißraum, klare
 * Hierarchie – Kategorie und Datum, große Überschrift, Lead, großes Bild.
 *
 * Der Inhalt kommt aus dem Block-Editor (ältere Beiträge, auch Genesis Blocks
 * ohne das Plugin) oder aus Elementor. Beides wird hier ohne Handarbeit in die
 * Lesespalte gebracht; zentrierte Absätze werden linksbündig.
 *
 * „body:not(#mn-design)" hebt die Regeln wie in design.css über die Stile von
 * Elementor-Kit und -Widgets. !important nur gegen Inline-Stile alter Blöcke.
 */

:root {
	--mn-read: 680px;
	--mn-wide: 1100px;
	--mn-gutter: 24px;
	--mn-heading: var(--mn-accent, #283583);
	--mn-subheading: #4d378a;
	--mn-link: var(--mn-accent, #283583);
	--mn-secondary: #1f99cf;
	--mn-surface: #f3f2f8;
	--mn-card-radius: 16px;
}

@media (max-width: 767px) {
	:root {
		--mn-gutter: 20px;
	}
}

/* --- Gerüst -------------------------------------------------------------- */

body:not(#mn-design) .mn-article.e-con {
	--gap: 0px;
	--row-gap: 0px;
	--column-gap: 0px;
	--padding-top: 0px;
	--padding-right: 0px;
	--padding-bottom: 0px;
	--padding-left: 0px;
	padding: 0;
	color: var(--mn-text);
	font-family: Inter, sans-serif;
}

/* Lesespalte und breite Spalte, jeweils mittig mit Rand am Handy. */
body:not(#mn-design) .mn-article :is(.mn-article__head, .mn-article__cta) {
	box-sizing: border-box;
	inline-size: 100%; /* sonst schrumpft der Kasten durch margin: auto im Flex-Container */
	max-inline-size: calc(var(--mn-read) + 2 * var(--mn-gutter));
	margin-inline: auto;
	padding-inline: var(--mn-gutter);
}

body:not(#mn-design) .mn-article :is(.mn-article__hero, .mn-article__body) {
	box-sizing: border-box;
	inline-size: 100%;
	max-inline-size: calc(var(--mn-wide) + 2 * var(--mn-gutter));
	margin-inline: auto;
	padding-inline: var(--mn-gutter);
}

/* --- Kopf ---------------------------------------------------------------- */

body:not(#mn-design) .mn-article__head.e-con {
	--gap: 0px;
	--row-gap: 0px;
	padding-block: clamp(48px, 8vw, 104px) clamp(32px, 4vw, 48px);
}

body:not(#mn-design) .mn-article-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 10px;
	margin: 0 0 20px;
	color: var(--mn-muted);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.4;
}

body:not(#mn-design) .mn-article-meta__section {
	color: var(--mn-secondary);
	font-weight: 600;
	text-decoration: none;
}

body:not(#mn-design) a.mn-article-meta__section:hover {
	color: var(--mn-accent);
}

body:not(#mn-design) .mn-article__title .elementor-heading-title {
	margin: 0;
	color: var(--mn-heading);
	font-family: "Bricolage Grotesque", sans-serif;
	font-size: clamp(36px, 5.2vw, 60px);
	font-weight: 600;
	line-height: 1.08;
	letter-spacing: -0.02em;
	text-wrap: balance;
	hyphens: auto;
	/* Kurze Wörter nie trennen („Fä-den", „Po-len"): sonst trennt jeder Browser
	   nach eigenem Wörterbuch anders. Safari kennt nur die -webkit-Angaben. */
	hyphenate-limit-chars: 10 4 4;
	-webkit-hyphenate-limit-before: 4;
	-webkit-hyphenate-limit-after: 4;
}

body:not(#mn-design) .mn-article-lead {
	margin: 24px 0 0;
	color: var(--mn-text);
	font-size: clamp(19px, 2vw, 23px);
	font-weight: 400;
	line-height: 1.5;
	text-wrap: pretty;
}

/* --- Großes Bild ----------------------------------------------------------- */

body:not(#mn-design) .mn-article__hero {
	margin-block-end: clamp(48px, 6vw, 80px);
}

body:not(#mn-design) .mn-article__hero img {
	display: block;
	inline-size: 100%;
	max-block-size: 640px;
	block-size: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: var(--mn-card-radius);
	box-shadow: none;
}

/* Seiten ohne Beitragsbild: Kopf direkt über dem Inhalt. */
body:not(#mn-design) .mn-article--page .mn-article__head.e-con {
	padding-block-end: clamp(24px, 3vw, 40px);
}

/* --- Inhalt: Lesespalte ------------------------------------------------------ */

/*
 * Inhalt aus dem Block-Editor: die Elemente stehen direkt im Widget.
 * Inhalt aus Elementor: Container (.e-con) mit Widgets darin.
 * Text läuft in der Lesespalte, Bilder, Spalten und Kästen nehmen die breite Spalte.
 */
body:not(#mn-design) .mn-article__body {
	padding-block-end: clamp(48px, 6vw, 96px);
	font-size: 18px;
	line-height: 1.7;
	overflow-wrap: break-word; /* eingefügte geschützte Leerzeichen dürfen nicht aus dem Bild laufen */
}

body:not(#mn-design) :is(.mn-article__body, .mn-article__body > .elementor-widget-container) > :not(.elementor):not(.wp-block-columns):not(.wp-block-genesis-blocks-gb-columns):not(.wp-block-media-text):not(.alignwide):not(.alignfull):not(.wp-block-gallery):not(.wp-block-table):not(.mn-toc),
body:not(#mn-design) .mn-article__body :is(.e-con, .elementor-section) :is(.elementor-widget-heading, .elementor-widget-text-editor, .elementor-widget-divider, .elementor-widget-icon-list) {
	inline-size: 100%; /* sonst schrumpft das Widget durch margin: auto im Flex-Container */
	max-inline-size: var(--mn-read);
	margin-inline: auto;
}

/* Breite Elemente aus dem Block-Editor: Spalten nur mit Bildern, reiner Text bleibt in der Lesespalte. */
body:not(#mn-design) :is(.mn-article__body, .mn-article__body > .elementor-widget-container) > :is(.wp-block-columns, .wp-block-genesis-blocks-gb-columns, .wp-block-media-text, .wp-block-gallery, .wp-block-table, .alignwide) {
	max-inline-size: var(--mn-wide);
	margin-inline: auto;
}

body:not(#mn-design) :is(.mn-article__body, .mn-article__body > .elementor-widget-container) > :is(.wp-block-columns, .wp-block-genesis-blocks-gb-columns):not(:has(img)) {
	max-inline-size: var(--mn-read);
}

/* Linksbündig, auch wo der Beitrag zentriert war. */
body:not(#mn-design) .mn-article__body :is(p, li, h2, h3, h4, h5, h6, .has-text-align-center),
body:not(#mn-design) .mn-article__body :is(.elementor-widget-text-editor, .elementor-widget-heading) {
	text-align: start;
}

/* Text. */
body:not(#mn-design) .mn-article__body :is(p, ul, ol) {
	margin-block: 0 1.15em;
	color: var(--mn-text);
	font-size: inherit;
	line-height: inherit;
}

body:not(#mn-design) .mn-article__body .elementor-widget-text-editor {
	color: var(--mn-text);
	font-family: Inter, sans-serif;
	font-size: 18px;
	font-weight: 400;
	line-height: 1.7;
}

body:not(#mn-design) .mn-article__body .elementor-widget-text-editor > :last-child,
body:not(#mn-design) .mn-article__body .elementor-widget-text-editor .elementor-widget-container > :last-child {
	margin-block-end: 0;
}

/* Initialen alter Beiträge: normaler Textanfang, passt nicht zur ruhigen Lesespalte. */
body:not(#mn-design) .mn-article__body .has-drop-cap:not(:focus)::first-letter {
	float: none;
	margin: 0;
	color: inherit;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	text-transform: none;
}

body:not(#mn-design) .mn-article__body strong {
	color: var(--mn-text);
	font-weight: 600;
}

body:not(#mn-design) .mn-article__body :is(ul, ol):not([class*="elementor"]) {
	padding-inline-start: 1.3em;
}

body:not(#mn-design) .mn-article__body li {
	margin-block-end: 0.4em;
	padding-inline-start: 0.2em;
}

body:not(#mn-design) .mn-article__body li::marker {
	color: var(--mn-secondary);
}

/* Links im Text: Blau mit ruhiger Unterstreichung. */
body:not(#mn-design) .mn-article__body :is(p, li, figcaption, td) a,
body:not(#mn-design) .mn-article__body .elementor-widget-text-editor a {
	color: var(--mn-link);
	text-decoration: underline;
	text-decoration-color: rgba(var(--mn-accent-rgb, 40, 53, 131), 0.3);
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	transition: text-decoration-color 0.2s ease;
}

body:not(#mn-design) .mn-article__body :is(p, li, figcaption, td) a:hover,
body:not(#mn-design) .mn-article__body .elementor-widget-text-editor a:hover {
	text-decoration-color: currentColor;
}

/* Zwischenüberschriften. */
body:not(#mn-design) .mn-article__body :where(h2, .elementor-widget-heading h1.elementor-heading-title) {
	margin: 2.4em 0 0.6em;
	color: var(--mn-subheading);
	font-family: "Inria Serif", serif;
	font-size: clamp(28px, 3vw, 36px);
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: 0;
	text-wrap: balance;
}

body:not(#mn-design) .mn-article__body :where(h3, h4, h5, h6) {
	margin: 2em 0 0.5em;
	color: var(--mn-heading);
	font-family: "Bricolage Grotesque", sans-serif;
	font-size: 22px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -0.005em;
}

body:not(#mn-design) .mn-article__body .elementor-widget-heading .elementor-heading-title {
	margin: 0;
}

/* Abstand gehört bei Elementor ans Widget, nicht an die Überschrift darin. */
body:not(#mn-design) .mn-article__body .elementor-widget-heading:has(h2, h1) {
	margin-block: 2.4em 0.6em;
}

body:not(#mn-design) .mn-article__body .elementor-widget-heading:has(h3, h4, h5, h6) {
	margin-block: 1.6em 0.5em;
}

/* Erste Überschrift direkt nach dem Bild: kein Extra-Abstand. */
body:not(#mn-design) :is(.mn-article__body, .mn-article__body > .elementor-widget-container) > :first-child,
body:not(#mn-design) :is(.mn-article__body, .mn-article__body > .elementor-widget-container) > .mn-toc:first-child + *,
body:not(#mn-design) .mn-article__body .e-con.e-parent:first-child > .elementor-widget-heading:first-child,
body:not(#mn-design) .mn-article__body .e-con.e-parent:first-child > .e-con-inner > .elementor-widget-heading:first-child {
	margin-block-start: 0;
}

/* --- Bilder ----------------------------------------------------------------- */

body:not(#mn-design) .mn-article__body :is(figure, .wp-block-image) {
	margin: 2.2em auto;
}

body:not(#mn-design) .mn-article__body img {
	max-inline-size: 100%;
	block-size: auto;
	border-radius: 12px;
	box-shadow: none;
}

body:not(#mn-design) .mn-article__body figcaption,
body:not(#mn-design) .mn-article__body .widget-image-caption {
	margin-block-start: 10px;
	color: var(--mn-muted);
	font-size: 14px;
	font-style: normal;
	line-height: 1.5;
	text-align: start;
}

/* Einzelbilder in der Lesespalte dürfen etwas breiter laufen. */
body:not(#mn-design) :is(.mn-article__body, .mn-article__body > .elementor-widget-container) > .wp-block-image {
	max-inline-size: 880px;
}

body:not(#mn-design) .mn-article__body .elementor-widget-image img {
	inline-size: 100%;
}

/* --- Spalten (Block-Editor, Genesis Blocks) ----------------------------------- */

body:not(#mn-design) .mn-article__body :is(.wp-block-columns, .gb-layout-column-wrap) {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
	gap: 24px 32px;
	margin: 0;
}

body:not(#mn-design) :is(.mn-article__body, .mn-article__body > .elementor-widget-container) > :is(.wp-block-columns, .wp-block-genesis-blocks-gb-columns) {
	margin-block: 2em;
}

body:not(#mn-design) .mn-article__body :is(.wp-block-columns, .wp-block-genesis-blocks-gb-columns):not(:has(img)) :is(.wp-block-column, .gb-block-layout-column) {
	font-size: 17px;
}

/* Spalten direkt unter einer Überschrift gehören zu ihr. */
body:not(#mn-design) .mn-article__body :is(h2, h3, h4) + :is(.wp-block-columns, .wp-block-genesis-blocks-gb-columns) {
	margin-block-start: 0.5em;
}

/* Leere Spalten (z. B. nur ein Abstandhalter) nehmen keinen Platz. */
body:not(#mn-design) .mn-article__body :is(.wp-block-column, .gb-block-layout-column):not(:has(img, p, ul, ol, h2, h3, h4, .gb-block-notice)) {
	display: none;
}

body:not(#mn-design) .mn-article__body :is(.wp-block-column, .gb-block-layout-column) {
	min-inline-size: 0;
	margin: 0;
	font-size: 16px;
	line-height: 1.6;
}

body:not(#mn-design) .mn-article__body :is(.wp-block-column, .gb-block-layout-column) :is(figure, .wp-block-image) {
	margin: 0 0 12px;
}

body:not(#mn-design) .mn-article__body :is(.wp-block-column, .gb-block-layout-column) img {
	inline-size: 100%;
	aspect-ratio: 3 / 2;
	object-fit: contain; /* freigestellte Grafiken nicht beschneiden */
}

body:not(#mn-design) .mn-article__body :is(.wp-block-column, .gb-block-layout-column) :is(h2, h3, h4) {
	margin-block-start: 0.4em;
	font-size: 20px;
}

body:not(#mn-design) .mn-article__body .wp-block-media-text {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 32px;
	align-items: center;
	margin-block: 2.4em;
}

@media (max-width: 767px) {
	body:not(#mn-design) .mn-article__body .wp-block-media-text {
		grid-template-columns: 1fr;
	}
}

/* Abstandhalter alter Beiträge: einheitlich statt beliebiger Höhen. */
body:not(#mn-design) .mn-article__body :is(.wp-block-spacer, .gb-block-spacer, .wp-block-genesis-blocks-gb-spacer) {
	block-size: 0 !important;
	margin: 0;
}

body:not(#mn-design) .mn-article__body .gb-block-spacer hr {
	display: none;
}

/* --- Trennlinie --------------------------------------------------------------- */

body:not(#mn-design) .mn-article__body hr,
body:not(#mn-design) .mn-article__body .wp-block-separator {
	block-size: 0;
	margin-block: 3em;
	border: 0;
	border-block-start: 1px solid var(--mn-border);
	background: none;
	opacity: 1;
}

body:not(#mn-design) .mn-article__body .elementor-widget-divider {
	--divider-color: var(--mn-border);
	--divider-border-width: 1px;
	margin-block: 2em;
}

/* --- Zitate ------------------------------------------------------------------- */

body:not(#mn-design) .mn-article__body :is(blockquote, .wp-block-quote, .wp-block-pullquote) {
	max-inline-size: var(--mn-read);
	margin: 2.6em auto;
	padding: 0 0 0 28px;
	border: 0;
	border-inline-start: 3px solid var(--mn-secondary);
	border-radius: 0;
	background: none;
	text-align: start;
}

body:not(#mn-design) .mn-article__body .wp-block-pullquote blockquote {
	margin: 0;
	padding: 0;
	border: 0;
}

body:not(#mn-design) .mn-article__body :is(blockquote, .wp-block-pullquote) p {
	margin-block-end: 0.5em;
	color: var(--mn-subheading);
	font-family: "Inria Serif", serif;
	font-size: clamp(24px, 2.6vw, 30px);
	font-style: normal;
	line-height: 1.35;
}

body:not(#mn-design) .mn-article__body :is(blockquote, .wp-block-pullquote) cite {
	display: block;
	margin-block-start: 12px;
	color: var(--mn-muted);
	font-size: 15px;
	font-style: normal;
	font-weight: 500;
}

/* --- Person: Porträt mit Praxis und Ort (scripts/lib/setup-markenbotschafter.php) --- */

body:not(#mn-design) .mn-article__body .mn-person {
	display: flex;
	align-items: center;
	gap: 18px;
	max-inline-size: var(--mn-read);
	margin-inline: auto;
}

body:not(#mn-design) .mn-article__body .mn-person img.mn-person__bild {
	flex: none;
	inline-size: 88px;
	block-size: 88px;
	border-radius: 50%;
	object-fit: cover;
}

body:not(#mn-design) .mn-article__body .mn-person .mn-person__text {
	margin: 0;
	color: var(--mn-muted);
	font-size: 16px;
	line-height: 1.5;
}

body:not(#mn-design) .mn-article__body .mn-person .mn-person__text strong {
	color: var(--mn-text);
	font-weight: 600;
}

/* Zitat direkt unter der Person: weniger Abstand als im Fließtext. */
body:not(#mn-design) .mn-article__body .mn-abschnitt:has(.mn-person) blockquote {
	margin-block: 0.6em;
}

/* --- Hinweis-Kasten (Genesis „Notice", Elementor-Hinweis) ------------------- */

body:not(#mn-design) .mn-article__body :is(.gb-block-notice, .elementor-widget-alert .elementor-alert) {
	max-inline-size: var(--mn-read);
	margin: 2em auto;
	padding: 20px 24px;
	border: 0 !important;
	border-radius: 12px;
	background: var(--mn-surface) !important;
	color: var(--mn-text) !important;
	font-size: 17px;
	text-align: start !important;
}

body:not(#mn-design) .mn-article__body .gb-notice-title {
	margin: 0 0 6px;
	padding: 0;
	background: none !important;
	color: var(--mn-subheading) !important;
	font-weight: 600;
}

body:not(#mn-design) .mn-article__body .gb-notice-text {
	padding: 0;
	border: 0;
	background: none;
}

body:not(#mn-design) .mn-article__body .gb-notice-text p {
	margin: 0;
	color: inherit;
}

/* --- Aufklapp-Elemente (Genesis „Accordion", Elementor-Akkordeon) ------------- */

body:not(#mn-design) .mn-article__body .gb-block-accordion {
	max-inline-size: var(--mn-read);
	margin: 0 auto;
	border-block-end: 1px solid var(--mn-border);
}

body:not(#mn-design) .mn-article__body .gb-block-accordion:first-of-type,
body:not(#mn-design) .mn-article__body :not(.gb-block-accordion) + .gb-block-accordion {
	margin-block-start: 2em;
	border-block-start: 1px solid var(--mn-border);
}

body:not(#mn-design) .mn-article__body .gb-block-accordion details {
	margin: 0;
}

body:not(#mn-design) .mn-article__body .gb-accordion-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 18px 0;
	background: none;
	color: var(--mn-heading);
	font-family: "Bricolage Grotesque", sans-serif;
	font-size: 19px;
	font-weight: 600;
	line-height: 1.35;
	list-style: none;
	cursor: pointer;
}

body:not(#mn-design) .mn-article__body .gb-accordion-title::-webkit-details-marker {
	display: none;
}

body:not(#mn-design) .mn-article__body .gb-accordion-title::after {
	flex: none;
	content: "+";
	color: var(--mn-secondary);
	font-family: Inter, sans-serif;
	font-size: 24px;
	font-weight: 400;
	line-height: 1;
	transition: transform 0.2s ease;
}

body:not(#mn-design) .mn-article__body details[open] > .gb-accordion-title::after {
	transform: rotate(45deg);
}

body:not(#mn-design) .mn-article__body .gb-accordion-text {
	padding: 0 0 12px;
	border: 0;
}

/* --- Tabellen ------------------------------------------------------------------ */

body:not(#mn-design) .mn-article__body table {
	inline-size: 100%;
	border-collapse: collapse;
	font-size: 16px;
}

body:not(#mn-design) .mn-article__body :is(th, td) {
	padding: 12px 16px 12px 0;
	border: 0;
	border-block-end: 1px solid var(--mn-border);
	background: none;
	text-align: start;
	vertical-align: top;
}

body:not(#mn-design) .mn-article__body th {
	color: var(--mn-heading);
	font-weight: 600;
}

/* --- Elementor-Inhalt: Container und Karten ----------------------------------- */

/* Oberste Container laufen in der breiten Spalte, ohne eigenen Seitenrand. */
body:not(#mn-design) .mn-article__body .elementor > .e-con.e-parent {
	--content-width: var(--mn-wide);
	--padding-left: 0px;
	--padding-right: 0px;
	--margin-left: 0px;
	--margin-right: 0px;
}

/* Button-Reihen in der Lesespalte. */
body:not(#mn-design) .mn-article__body .e-con:has(> .elementor-widget-button),
body:not(#mn-design) .mn-article__body .e-con:has(> .e-con-inner > .elementor-widget-button) {
	--justify-content: flex-start;
	inline-size: 100%;
	max-inline-size: var(--mn-read);
	margin-inline: auto;
	justify-content: flex-start;
}

/* Buttons im Inhalt wie im Shop: 48 px hoch, 12 px Radius, Blau. */
body:not(#mn-design) .mn-article__body .elementor-widget-button .elementor-button {
	display: inline-flex;
	align-items: center;
	min-block-size: var(--mn-height);
	padding: 0 22px;
	border: 1px solid var(--mn-accent);
	border-radius: var(--mn-radius);
	background: var(--mn-accent);
	box-shadow: none;
	color: #fff;
	font-family: Inter, sans-serif;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

body:not(#mn-design) .mn-article__body .elementor-widget-button .elementor-button:hover {
	border-color: var(--mn-accent-hover);
	background: var(--mn-accent-hover);
	color: #fff;
}

body:not(#mn-design) .mn-article__body .elementor-widget-button .elementor-button-icon svg {
	fill: currentColor;
}

/* Abstandhalter aus Elementor: maßvoll. */
body:not(#mn-design) .mn-article__body .elementor-widget-spacer .elementor-spacer-inner {
	max-block-size: 48px;
}

/* --- Abschluss: Kontakt-Kasten ------------------------------------------------- */

body:not(#mn-design) .mn-article__cta.e-con {
	--gap: 0px;
	--row-gap: 0px;
	margin-block-end: clamp(64px, 8vw, 112px);
	padding-block: 0;
}

body:not(#mn-design) .mn-article__cta > :is(.elementor-widget, .e-con),
body:not(#mn-design) .mn-article__cta .e-con-inner > :is(.elementor-widget, .e-con) {
	position: relative;
}

/* Trennlinie über dem Kasten (::before belegt Elementor für Hintergründe). */
body:not(#mn-design) .mn-article__cta > .elementor-widget-heading {
	padding-block-start: 48px;
	border-block-start: 1px solid var(--mn-border);
}

body:not(#mn-design) .mn-article__cta .elementor-heading-title {
	margin: 0 0 10px;
	color: var(--mn-heading);
	font-family: "Bricolage Grotesque", sans-serif;
	font-size: 26px;
	font-weight: 600;
	line-height: 1.25;
}

body:not(#mn-design) .mn-article__cta .elementor-widget-text-editor {
	margin-block-end: 24px;
	color: var(--mn-text);
	font-size: 17px;
	line-height: 1.6;
}

body:not(#mn-design) .mn-article__cta .elementor-widget-text-editor p {
	margin: 0;
}

body:not(#mn-design) .mn-article__buttons.e-con {
	--gap: 12px;
	--row-gap: 12px;
	--column-gap: 12px;
	--flex-wrap: wrap;
	flex-wrap: wrap;
	padding: 0;
}

/* Buttons wie im Shop: gefüllt in Blau bzw. als Kontur, 48 px hoch, 12 px Radius. */
body:not(#mn-design) .mn-article__button .elementor-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-block-size: var(--mn-height);
	padding: 0 22px;
	border: 1px solid var(--mn-accent);
	border-radius: var(--mn-radius);
	background: var(--mn-accent);
	box-shadow: none;
	color: #fff;
	font-family: Inter, sans-serif;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

body:not(#mn-design) .mn-article__button .elementor-button:hover {
	border-color: var(--mn-accent-hover);
	background: var(--mn-accent-hover);
	color: #fff;
}

body:not(#mn-design) .mn-article__button--secondary .elementor-button {
	border-color: var(--mn-border);
	background: #fff;
	color: var(--mn-accent);
	font-weight: 500;
}

body:not(#mn-design) .mn-article__button--secondary .elementor-button:hover {
	border-color: rgba(var(--mn-accent-rgb, 40, 53, 131), 0.35);
	background: var(--mn-tint);
	color: var(--mn-accent);
}

body:not(#mn-design) .mn-article__button .elementor-button:focus-visible {
	outline: 2px solid var(--mn-accent);
	outline-offset: 2px;
}

/* --- Weitere Artikel ------------------------------------------------------------ */

body:not(#mn-design) .mn-article__more.e-con {
	--gap: 0px;
	--row-gap: 0px;
	padding: clamp(56px, 7vw, 96px) var(--mn-gutter);
	background: var(--mn-surface);
}

body:not(#mn-design) .mn-article__more > * {
	box-sizing: border-box;
	inline-size: 100%;
	max-inline-size: var(--mn-wide);
	margin-inline: auto;
}

body:not(#mn-design) .mn-article__more .elementor-heading-title {
	margin: 0 0 28px;
	color: var(--mn-subheading);
	font-family: "Inria Serif", serif;
	font-size: clamp(28px, 3vw, 36px);
	font-weight: 400;
	line-height: 1.2;
}

body:not(#mn-design) .mn-article-cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (max-width: 1024px) {
	body:not(#mn-design) .mn-article-cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 640px) {
	body:not(#mn-design) .mn-article-cards {
		grid-template-columns: 1fr;
	}
}

body:not(#mn-design) .mn-article-card {
	margin: 0;
	padding: 0;
}

body:not(#mn-design) .mn-article-card__link {
	display: flex;
	flex-direction: column;
	block-size: 100%;
	overflow: hidden;
	border-radius: var(--mn-card-radius);
	background: #fff;
	color: inherit;
	text-decoration: none;
}

body:not(#mn-design) .mn-article-card__link:hover {
	box-shadow: 0 8px 24px rgba(var(--mn-accent-rgb, 40, 53, 131), 0.1);
}

body:not(#mn-design) .mn-article-card__link:focus-visible {
	outline: 2px solid var(--mn-accent);
	outline-offset: 2px;
}

body:not(#mn-design) .mn-article-card__media {
	display: block;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--mn-border);
}

body:not(#mn-design) .mn-article-card__media--empty {
	background: var(--mn-tint);
}

body:not(#mn-design) .mn-article-card__image {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	border-radius: 0;
}

body:not(#mn-design) .mn-article-card__text {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 6px;
	padding: 20px 22px 24px;
}

body:not(#mn-design) .mn-article-card__section {
	color: var(--mn-secondary);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
}

body:not(#mn-design) .mn-article-card__title {
	color: var(--mn-heading);
	font-family: "Bricolage Grotesque", sans-serif;
	font-size: 20px;
	font-weight: 600;
	line-height: 1.3;
	text-wrap: balance;
}

body:not(#mn-design) .mn-article-card__date {
	margin-block-start: auto;
	padding-block-start: 10px;
	color: var(--mn-muted);
	font-size: 14px;
}

/* --- Blog-Übersicht ([mednaht_article_archive]) ---------------------------------- */

body:not(#mn-design) .mn-archive.e-con {
	--gap: 0px;
	--row-gap: 0px;
	--padding-top: 0px;
	--padding-right: 0px;
	--padding-bottom: 0px;
	--padding-left: 0px;
	padding: 0;
	color: var(--mn-text);
	font-family: Inter, sans-serif;
}

body:not(#mn-design) .mn-archive :is(.mn-archive__head, .mn-archive__filter, .mn-archive__pick, .mn-archive__list, .mn-archive__newsletter) {
	box-sizing: border-box;
	inline-size: 100%;
	max-inline-size: calc(var(--mn-wide) + 2 * var(--mn-gutter));
	margin-inline: auto;
	padding-inline: var(--mn-gutter);
}

body:not(#mn-design) .mn-archive__head {
	padding-block: clamp(48px, 8vw, 104px) clamp(28px, 3vw, 40px);
}

body:not(#mn-design) .mn-archive__title {
	max-inline-size: var(--mn-read);
	margin: 0;
	color: var(--mn-heading);
	font-family: "Bricolage Grotesque", sans-serif;
	font-size: clamp(40px, 6vw, 72px);
	font-weight: 600;
	line-height: 1.04;
	letter-spacing: -0.02em;
}

body:not(#mn-design) .mn-archive__head .mn-article-lead {
	max-inline-size: var(--mn-read);
}

/* Kategorie-Filter als Pillen wie im Katalog; am Handy wischbar. */
body:not(#mn-design) .mn-archive__filter {
	padding-block-end: clamp(28px, 3vw, 40px);
}

body:not(#mn-design) .mn-archive__filter ul {
	display: flex;
	gap: 8px;
	margin: 0;
	padding: 0;
	overflow-x: auto;
	list-style: none;
	scrollbar-width: none;
}

body:not(#mn-design) .mn-archive__filter li {
	flex: none;
	margin: 0;
}

body:not(#mn-design) .mn-archive__pill {
	display: inline-flex;
	align-items: center;
	box-sizing: border-box;
	min-block-size: 40px;
	padding: 0 16px;
	border: 1px solid var(--mn-border);
	border-radius: 999px;
	background: #fff;
	color: var(--mn-accent);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

body:not(#mn-design) .mn-archive__pill:hover {
	border-color: rgba(var(--mn-accent-rgb, 40, 53, 131), 0.35);
	background: var(--mn-tint);
	color: var(--mn-accent);
}

body:not(#mn-design) .mn-archive__pill[aria-current] {
	border-color: var(--mn-accent);
	background: var(--mn-accent);
	color: #fff;
}

body:not(#mn-design) .mn-archive__pill:focus-visible {
	outline: 2px solid var(--mn-accent);
	outline-offset: 2px;
}

/* Liste auf hellem Grund wie „Weitere Artikel". */
body:not(#mn-design) .mn-archive .mn-archive__list {
	display: grid;
	gap: clamp(40px, 5vw, 64px);
	max-inline-size: none;
	padding-block: clamp(32px, 4vw, 56px) clamp(64px, 8vw, 112px);
	padding-inline: max(var(--mn-gutter), calc((100% - var(--mn-wide)) / 2));
	background: var(--mn-surface);
}

/* Empfehlung und Liste (Vorbild: Startseite von Slate). Bilder überall 16:9.
 * Der ganze Artikel ist klickbar: der Titel-Link legt sich über den Block. */
body:not(#mn-design) :is(.mn-blog-pick, .mn-blog-row) {
	position: relative;
}

body:not(#mn-design) .mn-blog-link {
	color: inherit;
	text-decoration: none;
}

body:not(#mn-design) .mn-blog-link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

body:not(#mn-design) .mn-blog-link:focus-visible {
	outline: none;
}

body:not(#mn-design) .mn-blog-link:focus-visible::after {
	border-radius: var(--mn-card-radius);
	outline: 2px solid var(--mn-accent);
	outline-offset: 6px;
}

body:not(#mn-design) .mn-blog-media {
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: var(--mn-card-radius);
	background: var(--mn-border);
}

body:not(#mn-design) .mn-blog-media--empty {
	background: var(--mn-tint);
}

body:not(#mn-design) .mn-blog-media__image {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	border-radius: 0;
}

body:not(#mn-design) .mn-blog-teaser {
	margin: 0;
	color: var(--mn-text);
	font-size: 17px;
	line-height: 1.55;
}

body:not(#mn-design) .mn-blog-byline {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 10px;
	margin: 0;
	color: var(--mn-muted);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.4;
}

body:not(#mn-design) .mn-blog-byline__section {
	display: inline-flex;
	align-items: center;
	min-block-size: 28px;
	margin-inline-end: 4px;
	padding: 0 12px;
	border-radius: 999px;
	background: var(--mn-tint);
	color: var(--mn-accent);
	font-size: 13px;
	font-weight: 600;
}

body:not(#mn-design) .mn-blog-byline__author {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

body:not(#mn-design) .mn-blog-byline__avatar {
	display: inline-grid;
	place-items: center;
	inline-size: 28px;
	block-size: 28px;
	border-radius: 50%;
	background: var(--mn-accent);
	color: #fff;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.02em;
}

/* Empfehlung: Titel | Anriss und Meta | Bild. */
body:not(#mn-design) .mn-archive__pick {
	padding-block-end: clamp(40px, 5vw, 72px);
}

body:not(#mn-design) .mn-blog-pick {
	display: grid;
	grid-template-columns: minmax(0, 4fr) minmax(0, 3fr) minmax(0, 5fr);
	align-items: center;
	gap: clamp(24px, 3vw, 48px);
}

body:not(#mn-design) .mn-blog-pick__title {
	margin: 0;
	color: var(--mn-heading);
	font-family: "Bricolage Grotesque", sans-serif;
	font-size: clamp(32px, 3.6vw, 48px);
	font-weight: 600;
	line-height: 1.08;
	letter-spacing: -0.02em;
	text-wrap: balance;
	hyphens: auto;
	hyphenate-limit-chars: 10 4 4;
	-webkit-hyphenate-limit-before: 4;
	-webkit-hyphenate-limit-after: 4;
}

body:not(#mn-design) .mn-blog-pick__text {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

@media (max-width: 1024px) {
	body:not(#mn-design) .mn-blog-pick {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}

	body:not(#mn-design) .mn-blog-pick__title {
		grid-column: 1 / -1;
	}
}

@media (max-width: 640px) {
	body:not(#mn-design) .mn-blog-pick {
		grid-template-columns: 1fr;
	}

	body:not(#mn-design) .mn-blog-pick .mn-blog-media {
		grid-row: 1;
	}
}

/* Liste: Bild links, Text rechts; am Handy untereinander. */
body:not(#mn-design) .mn-blog-list {
	display: grid;
	gap: clamp(40px, 5vw, 64px);
	margin: 0;
	padding: 0;
	list-style: none;
}

body:not(#mn-design) .mn-blog-item {
	margin: 0;
	padding: 0;
}

body:not(#mn-design) .mn-blog-row {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	align-items: center;
	gap: clamp(24px, 4vw, 56px);
}

body:not(#mn-design) .mn-blog-row__text {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

body:not(#mn-design) .mn-blog-row__title {
	margin: 0;
	color: var(--mn-heading);
	font-family: "Bricolage Grotesque", sans-serif;
	font-size: clamp(22px, 2.2vw, 30px);
	font-weight: 600;
	line-height: 1.18;
	letter-spacing: -0.01em;
	text-wrap: balance;
}

@media (max-width: 767px) {
	body:not(#mn-design) .mn-blog-row {
		grid-template-columns: 1fr;
		gap: 18px;
	}
}

body:not(#mn-design) :is(.mn-blog-pick, .mn-blog-row):hover :is(.mn-blog-pick__title, .mn-blog-row__title) {
	color: var(--mn-accent-hover);
}

/* Newsletter-Hinweis unter der Liste: schlicht, weiß, im Raster der Seite.
 * Markup aus mndesign_newsletter_markup() (includes/newsletter.php), Variante „hinweis";
 * die lila Kachel steht in design.css. */
body:not(#mn-design) .mn-archive__newsletter {
	padding-block: clamp(48px, 6vw, 80px) clamp(64px, 8vw, 112px);
}

body:not(#mn-design) .mn-newsletter.mn-newsletter--hinweis {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: center;
	gap: 16px clamp(24px, 4vw, 56px);
	padding: clamp(24px, 3vw, 36px);
	border: 1px solid var(--mn-border);
	border-radius: var(--mn-card-radius);
	background: #fff;
	color: var(--mn-text);
	text-align: start;
}

body:not(#mn-design) .mn-newsletter--hinweis .mn-newsletter__titel {
	max-inline-size: none;
	margin: 0 0 6px;
	color: var(--mn-heading);
	font-family: "Bricolage Grotesque", sans-serif;
	font-size: clamp(20px, 2vw, 24px);
	font-weight: 600;
	line-height: 1.25;
}

body:not(#mn-design) .mn-newsletter--hinweis .mn-newsletter__text {
	max-inline-size: none;
	margin: 0;
	color: var(--mn-muted);
	font-size: 15px;
}

body:not(#mn-design) .mn-newsletter--hinweis .mn-newsletter__form {
	max-inline-size: none;
	padding: 4px 4px 4px 16px;
	border: 1px solid var(--mn-border);
	border-radius: 12px;
	box-shadow: none;
}

body:not(#mn-design) .mn-newsletter--hinweis .mn-newsletter__form:focus-within {
	border-color: var(--mn-accent);
	box-shadow: 0 0 0 3px var(--mn-tint);
}

body:not(#mn-design) .mn-newsletter--hinweis .mn-newsletter__form button {
	block-size: 40px;
	padding: 0 18px;
	background: var(--mn-accent);
}

body:not(#mn-design) .mn-newsletter--hinweis .mn-newsletter__form button:is(:hover, :focus-visible) {
	background: var(--mn-accent-hover);
}

body:not(#mn-design) .mn-newsletter--hinweis .mn-newsletter__erfolg {
	justify-content: flex-start;
	max-inline-size: none;
	border-color: var(--mn-border);
	background: var(--mn-tint);
	color: var(--mn-text);
}

body:not(#mn-design) .mn-newsletter--hinweis .mn-newsletter__fehler {
	margin: 8px 0 0;
	color: #b3261e;
}

body:not(#mn-design) .mn-newsletter--hinweis .mn-newsletter__hinweis {
	margin: 8px 0 0;
	color: var(--mn-muted);
}

body:not(#mn-design) .mn-newsletter--hinweis .mn-newsletter__hinweis a {
	color: var(--mn-link);
}

@media (max-width: 767px) {
	body:not(#mn-design) .mn-newsletter.mn-newsletter--hinweis {
		grid-template-columns: 1fr;
		padding: 24px 20px;
		border-radius: var(--mn-card-radius);
	}

	/* design.css stellt das Formular hier untereinander – rundum gleicher Abstand. */
	body:not(#mn-design) .mn-newsletter--hinweis .mn-newsletter__form {
		padding: 4px;
	}

	body:not(#mn-design) .mn-newsletter--hinweis .mn-newsletter__form input[type="email"] {
		padding: 0 12px;
	}
}

/* Seiten: Pillen wie der Filter. */
body:not(#mn-design) .mn-archive__pages {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	padding-block-start: 16px;
}

body:not(#mn-design) .mn-archive__pages .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-inline-size: 44px;
	min-block-size: 44px;
	padding: 0 16px;
	border: 1px solid var(--mn-border);
	border-radius: 999px;
	background: #fff;
	color: var(--mn-accent);
	font-size: 14px;
	font-weight: 500;
	text-decoration: none;
}

body:not(#mn-design) .mn-archive__pages a.page-numbers:hover {
	border-color: rgba(var(--mn-accent-rgb, 40, 53, 131), 0.35);
	background: var(--mn-tint);
}

body:not(#mn-design) .mn-archive__pages .page-numbers.current {
	border-color: var(--mn-accent);
	background: var(--mn-accent);
	color: #fff;
}

body:not(#mn-design) .mn-archive__pages .page-numbers.dots {
	border-color: transparent;
	background: none;
}

body:not(#mn-design) .mn-archive__empty {
	margin: 0;
	color: var(--mn-muted);
	font-size: 17px;
}

/* --- Bewegung (assets/js/article-motion.js) ---------------------------------------
 * Nur transform und opacity, damit nichts im Layout springt. Bei „Bewegung
 * reduzieren" bleibt alles stehen.
 */

@media (prefers-reduced-motion: no-preference) {
	/* Beim Laden: Kopf gleitet hoch, das große Bild zieht sanft heran. */
	body:not(#mn-design) :is(.mn-article__head, .mn-archive__head) > * {
		animation: mn-hoch 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
	}

	body:not(#mn-design) :is(.mn-article__head, .mn-archive__head) > :nth-child(2) {
		animation-delay: 0.06s;
	}

	body:not(#mn-design) :is(.mn-article__head, .mn-archive__head) > :nth-child(3) {
		animation-delay: 0.12s;
	}

	body:not(#mn-design) .mn-article__hero img {
		animation: mn-heran 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both;
	}

	body:not(#mn-design) .mn-archive__filter,
	body:not(#mn-design) .mn-archive__pick {
		animation: mn-hoch 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.18s both;
	}

	/* Beim Scrollen: weich hereingleiten. */
	body:not(#mn-design) .mn-reveal {
		opacity: 0;
		transform: translateY(28px);
		transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1), transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
	}

	body:not(#mn-design) .mn-reveal.mn-reveal--sichtbar {
		opacity: 1;
		transform: none;
	}

	/* Karten: Bild zoomt beim Überfahren leicht, Karte hebt sich. */
	body:not(#mn-design) .mn-article-card__link {
		transition: box-shadow 0.35s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
	}

	body:not(#mn-design) .mn-article-card__link:hover {
		transform: translateY(-4px);
	}

	body:not(#mn-design) .mn-article-card__image {
		transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
	}

	body:not(#mn-design) .mn-article-card__link:hover .mn-article-card__image {
		transform: scale(1.04);
	}

	body:not(#mn-design) .mn-article-card__title {
		transition: color 0.2s ease;
	}

	body:not(#mn-design) .mn-blog-media__image {
		transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
	}

	body:not(#mn-design) :is(.mn-blog-pick, .mn-blog-row):hover .mn-blog-media__image {
		transform: scale(1.04);
	}

	body:not(#mn-design) :is(.mn-blog-pick__title, .mn-blog-row__title) {
		transition: color 0.2s ease;
	}
}

body:not(#mn-design) .mn-article-card__link:hover .mn-article-card__title {
	color: var(--mn-accent-hover);
}

@keyframes mn-hoch {
	from {
		opacity: 0;
		transform: translateY(16px);
	}
}

@keyframes mn-heran {
	from {
		opacity: 0;
		transform: scale(1.035);
	}
}

/* --- Inhaltsverzeichnis ------------------------------------------------------
 * Nur in Blog-Artikeln. Markup aus includes/article.php, Verhalten in assets/js/article-toc.js.
 * Handy und Tablet: aufklappbarer Kasten über dem Text. Ab 1200px: Liste links
 * neben dem Text, die beim Scrollen mitläuft; der Text rückt dafür nach rechts.
 * Das weiche Scrollen beim Klick macht Motion (article-toc.js).
 */

/* Abstand unter der festen Kopfleiste (90px), angemeldet zusätzlich unter der Adminleiste. */
:root {
	--mn-toc-oben: calc(var(--wp-admin--admin-bar--height, 0px) + 128px);
}

body:not(#mn-design) .mn-article__body :is(h2, h3)[id] {
	scroll-margin-block-start: var(--mn-toc-oben);
}

/* Fokus nach dem Sprung (für Screenreader), aber ohne Rahmen um die Überschrift. */
body:not(#mn-design) .mn-article__body :is(h2, h3)[tabindex="-1"]:focus {
	outline: none;
}

body:not(#mn-design) .mn-article__body .mn-toc {
	box-sizing: border-box;
	inline-size: 100%;
	max-inline-size: var(--mn-read);
	margin: 0 auto 2.4em;
	font-family: Inter, sans-serif;
}

body:not(#mn-design) .mn-toc .mn-toc__box {
	border-radius: var(--mn-card-radius);
	background: var(--mn-surface);
}

body:not(#mn-design) .mn-toc .mn-toc__title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 20px;
	color: var(--mn-heading);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.4;
	list-style: none;
	cursor: pointer;
}

body:not(#mn-design) .mn-toc .mn-toc__title::-webkit-details-marker {
	display: none;
}

/* Pfeil rechts, zeigt nach oben, wenn offen. */
body:not(#mn-design) .mn-toc .mn-toc__title::after {
	content: "";
	inline-size: 8px;
	block-size: 8px;
	margin-inline-start: 12px;
	border-block-end: 1.5px solid currentColor;
	border-inline-end: 1.5px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	transition: transform 0.2s ease;
}

body:not(#mn-design) .mn-toc .mn-toc__box[open] .mn-toc__title::after {
	transform: translateY(2px) rotate(-135deg);
}

body:not(#mn-design) .mn-article__body .mn-toc .mn-toc__list {
	margin: 0;
	padding: 0 20px 16px;
	list-style: none;
}

body:not(#mn-design) .mn-toc .mn-toc__list li {
	margin: 0;
	padding: 0;
}

body:not(#mn-design) .mn-toc .mn-toc__link {
	display: block;
	padding-block: 6px;
	color: var(--mn-muted);
	font-size: 15px;
	line-height: 1.4;
	text-decoration: none;
	hyphens: auto;
	transition: color 0.2s ease;
}

body:not(#mn-design) .mn-toc .mn-toc__link:hover,
body:not(#mn-design) .mn-toc .mn-toc__link[aria-current] {
	color: var(--mn-heading);
}

body:not(#mn-design) .mn-toc .mn-toc__link[aria-current] {
	font-weight: 500;
}

@media (min-width: 1200px) {
	body:not(#mn-design) .mn-article__body:has(> .mn-toc, > .elementor-widget-container > .mn-toc) {
		position: relative;
		padding-inline-start: calc(var(--mn-gutter) + 240px);
	}

	/* Läuft über die ganze Höhe des Texts; die Liste darin klebt oben. */
	body:not(#mn-design) .mn-article__body .mn-toc {
		position: absolute;
		inset-block: 0;
		inset-inline-start: var(--mn-gutter);
		inline-size: 200px;
		margin: 0;
	}

	body:not(#mn-design) .mn-toc .mn-toc__box {
		position: sticky;
		inset-block-start: var(--mn-toc-oben);
		max-block-size: calc(100vh - var(--mn-toc-oben) - 40px);
		overflow-y: auto;
		border-radius: 0;
		background: none;
	}

	body:not(#mn-design) .mn-toc .mn-toc__title {
		padding: 0 0 8px;
		color: var(--mn-muted);
		font-size: 12px;
		font-weight: 600;
		cursor: default;
		pointer-events: none;
	}

	body:not(#mn-design) .mn-toc .mn-toc__title::after {
		display: none;
	}

	body:not(#mn-design) .mn-article__body .mn-toc .mn-toc__list {
		padding: 0;
	}

	body:not(#mn-design) .mn-toc .mn-toc__link {
		padding-block: 5px;
		font-size: 14px;
	}
}

/* Lese-Fortschritt: dünne Linie am oberen Rand. */
body:not(#mn-design) .mn-progress {
	position: fixed;
	inset: 0 0 auto;
	z-index: 9999;
	block-size: 3px;
	background: var(--mn-secondary);
	opacity: 0;
	transform: scaleX(0);
	transform-origin: 0 50%;
	transition: opacity 0.3s ease;
	pointer-events: none;
}

body:not(#mn-design) .mn-progress.mn-progress--aktiv {
	opacity: 1;
}

body.admin-bar:not(#mn-design) .mn-progress {
	inset-block-start: var(--wp-admin--admin-bar--height, 32px);
}

------------------------------------------------------------------- */

@media (max-width: 767px) {
	body:not(#mn-design) .mn-article__body,
	body:not(#mn-design) .mn-article__body .elementor-widget-text-editor {
		font-size: 17px;
		line-height: 1.65;
	}

	body:not(#mn-design) .mn-article__hero img {
		aspect-ratio: 4 / 3;
		border-radius: 12px;
	}

	/* Nebeneinander gesetzte Elementor-Container (z. B. Karten) untereinander. */
	body:not(#mn-design) .mn-article__body :is(.e-con, .e-flexbox-base) {
		--flex-direction: column;
		--flex-wrap: wrap;
		flex-direction: column;
	}

	body:not(#mn-design) .mn-article__body :is(.e-con, .e-flexbox-base) > :is(.e-con, .e-flexbox-base) {
		--width: 100%;
		inline-size: 100%;
		max-inline-size: 100%;
	}

	body:not(#mn-design) .mn-article__buttons .elementor-widget-button,
	body:not(#mn-design) .mn-article__button .elementor-button {
		inline-size: 100%;
	}
}

/* --- Downloads (Seite „Infomaterial“, scripts/lib/setup-wissen-seiten.php) ---- */

body:not(#mn-design) .mn-article__body .mn-downloads {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
	gap: 12px;
	margin-block: 1.25em 2em;
}

body:not(#mn-design) .mn-article__body .mn-download {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 18px 20px;
	border: 1px solid var(--mn-border);
	border-radius: 16px;
	background: #fff;
}

body:not(#mn-design) .mn-article__body .mn-download__art {
	color: var(--mn-secondary);
	font-size: 12px;
	font-weight: 600;
}

body:not(#mn-design) .mn-article__body .mn-download__titel {
	margin: 0 0 8px;
	color: var(--mn-heading);
	font-family: "Bricolage Grotesque", sans-serif;
	font-size: 19px;
	font-weight: 600;
	line-height: 1.3;
}

body:not(#mn-design) .mn-article__body .mn-download__links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: auto;
}

body:not(#mn-design) .mn-article__body a.mn-download__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 14px;
	border-radius: 999px;
	background: var(--mn-surface);
	color: var(--mn-heading);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	transition: background-color 0.2s ease;
}

body:not(#mn-design) .mn-article__body a.mn-download__link:hover {
	background: #e6e4f1;
}

body:not(#mn-design) .mn-article__body .mn-download__link svg {
	flex: none;
	inline-size: 16px;
	block-size: 16px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

body:not(#mn-design) .mn-article__body .mn-download__link small {
	color: var(--mn-muted, #5b6190);
	font-size: 12px;
	font-weight: 500;
}

/* Materialien mit eigenem Produkt: Karte in der Produktfarbe (wie die Produktleiste im Katalog). */
body:not(#mn-design) .mn-article__body .mn-download--farbe {
	border-color: color-mix(in srgb, var(--mn-dl-farbe) 45%, var(--mn-border));
	background: color-mix(in srgb, var(--mn-dl-farbe) 9%, #fff);
}

body:not(#mn-design) .mn-article__body .mn-download--farbe .mn-download__art {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

body:not(#mn-design) .mn-article__body .mn-download--farbe .mn-download__art::before {
	content: "";
	inline-size: 10px;
	block-size: 10px;
	border-radius: 50%;
	background: var(--mn-dl-farbe);
	box-shadow: 0 0 0 2px #fff;
}

body:not(#mn-design) .mn-article__body .mn-download--farbe a.mn-download__link {
	background: color-mix(in srgb, var(--mn-dl-farbe) 20%, #fff);
}

body:not(#mn-design) .mn-article__body .mn-download--farbe a.mn-download__link:hover {
	background: color-mix(in srgb, var(--mn-dl-farbe) 32%, #fff);
}

body:not(#mn-design) .mn-article__body a.mn-download__produkt {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin-inline-start: auto;
	padding: 8px 4px;
	color: var(--mn-heading);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
}

body:not(#mn-design) .mn-article__body a.mn-download__produkt svg {
	inline-size: 16px;
	block-size: 16px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: transform 0.2s ease;
}

body:not(#mn-design) .mn-article__body a.mn-download__produkt:hover svg {
	transform: translateX(3px);
}

/* Kennzahlen als Kacheln in der Lesespalte (z. B. „Wer ist Atramat®",
   scripts/lib/setup-wer-ist-atramat.php): drei nebeneinander, Zahl groß.
   Elementor-Container (.mn-fakten > .mn-fakt) oder Block-Spalten. */
body:not(#mn-design) .mn-article__body :is(.wp-block-columns, .e-con).mn-fakten {
	inline-size: 100%;
	max-inline-size: var(--mn-read);
	margin-inline: auto;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
	margin-block: 32px;
}

body:not(#mn-design) .mn-article__body .mn-fakten > :is(.wp-block-column, .mn-fakt) {
	--justify-content: flex-start;
	--gap: 6px;
	--row-gap: 6px;
	justify-content: flex-start;
	margin: 0;
	padding: 20px 20px 18px;
	border: 1px solid var(--mn-border, #d9dcec);
	border-radius: 16px;
	background: linear-gradient(135deg, var(--mn-hell-1, #e5f2fa) 0%, var(--mn-hell-2, #eef0fa) 60%, var(--mn-hell-3, #f5f6fc) 100%);
}

body:not(#mn-design) .mn-article__body .mn-fakten :is(h3, h3.elementor-heading-title) {
	margin: 0 0 6px;
	color: var(--mn-accent, #283583);
	font-family: "Bricolage Grotesque", sans-serif;
	font-size: 26px;
	font-weight: 600;
	line-height: 1.15;
}

body:not(#mn-design) .mn-article__body .mn-fakten p {
	margin: 0;
	color: var(--mn-muted, #5b6190);
	font-size: 15px;
	line-height: 1.5;
}

/* Kein Abstand über der Zahl (Überschriften im Artikel haben sonst Luft nach oben). */
body:not(#mn-design) .mn-article__body .mn-fakten > :is(.wp-block-column, .mn-fakt) :is(h3, .elementor-widget-heading) {
	margin-block-start: 0;
	padding-block-start: 0;
}

@media (max-width: 767px) {
	body:not(#mn-design) .mn-article__body :is(.wp-block-columns, .e-con).mn-fakten {
		grid-template-columns: minmax(0, 1fr);
	}
}