/*
 * mm medizin + medien – Design-System
 * Tokens abgeleitet aus dem bisherigen Elementor-Kit (#10447B / #005295 / #ABDBE9).
 * Keine externen Schriften: systemnaher Stack, DSGVO-konform und ohne Ladezeit.
 */

/* ------------------------------------------------------------------ Tokens */
:root {
	--c-primary: #10447b;
	--c-primary-dark: #0b3260;
	--c-accent: #005295;
	--c-tint: #abdbe9;
	--c-tint-soft: #e7f3f8;
	--c-ink: #1d2733;
	--c-muted: #5b6673;
	--c-line: #dfe4ea;
	--c-bg: #fcfcfc;
	--c-surface: #ffffff;
	--c-footer: #eceef0;
	--c-footer-ink: #3d454f;

	/* Flächenfarben aus der Designvorlage (Buttonreihen und Textbalken). */
	--c-chip-blue: #d1e7ee;
	--c-chip-blue-hover: #bcdbe5;
	--c-chip-grey: #dbe1e4;
	--c-chip-grey-hover: #c8d0d4;
	--c-band-light: #e4f8fe;
	--c-band-tint: #cdeefa;
	--c-band-grey: #eceef0;

	--font-sans: "Inter", "Roboto", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
	--font-head: var(--font-sans);

	--fs-base: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
	--fs-lead: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
	--fs-h1: clamp(1.875rem, 1.4rem + 2.1vw, 3rem);
	--fs-h2: clamp(1.5rem, 1.25rem + 1.1vw, 2.125rem);
	--fs-h3: clamp(1.1875rem, 1.1rem + 0.45vw, 1.4375rem);
	--fs-small: 0.9375rem;

	--sp-1: 0.25rem;
	--sp-2: 0.5rem;
	--sp-3: 0.75rem;
	--sp-4: 1rem;
	--sp-5: 1.5rem;
	--sp-6: 2rem;
	--sp-7: 3rem;
	--sp-8: 4rem;
	--sp-9: 6rem;

	--w-site: 1216px;
	--w-narrow: 780px;

	--radius: 4px;
	--shadow-sm: 0 1px 2px rgba(16, 68, 123, 0.06), 0 2px 8px rgba(16, 68, 123, 0.06);
	--shadow-md: 0 6px 24px rgba(16, 68, 123, 0.1);

	--ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--dur: 220ms;
	--header-h: 84px;
}

/* -------------------------------------------------------------------- Base */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--header-h) + 1rem);
}

body {
	margin: 0;
	background: var(--c-bg);
	color: var(--c-ink);
	font-family: var(--font-sans);
	font-size: var(--fs-base);
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

img,
svg,
video,
iframe {
	max-width: 100%;
	height: auto;
	display: block;
}

a {
	color: var(--c-accent);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
	transition: color var(--dur) var(--ease);
}

a:hover,
a:focus-visible {
	color: var(--c-primary-dark);
}

:focus-visible {
	outline: 3px solid var(--c-accent);
	outline-offset: 2px;
	border-radius: 2px;
}

h1,
h2,
h3,
h4 {
	font-family: var(--font-head);
	color: var(--c-primary);
	line-height: 1.2;
	letter-spacing: -0.01em;
	margin: 0 0 var(--sp-4);
	text-wrap: balance;
	font-weight: 600;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }

p { margin: 0 0 var(--sp-4); }

hr {
	border: 0;
	border-top: 1px solid var(--c-line);
	margin: var(--sp-6) 0;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.skip-link:focus-visible {
	position: fixed;
	top: var(--sp-3);
	left: var(--sp-3);
	z-index: 1000;
	width: auto;
	height: auto;
	clip: auto;
	clip-path: none;
	padding: var(--sp-3) var(--sp-4);
	background: var(--c-primary);
	color: #fff;
	border-radius: var(--radius);
}

/* ------------------------------------------------------------------ Layout */
.container {
	width: min(100% - 2.5rem, var(--w-site));
	margin-inline: auto;
}

.container--narrow {
	max-width: var(--w-narrow);
}

.section {
	padding-block: var(--sp-7);
}

.section--space-tight { padding-block: var(--sp-5); }
.section--space-loose { padding-block: var(--sp-9); }
.section--space-none { padding-block: 0; }

.section__title {
	text-align: center;
	margin-bottom: var(--sp-6);
}

.section.is-left .section__title { text-align: left; }

/* ------------------------------------------------------------------ Topbar */
.topbar {
	background: var(--c-surface);
	border-bottom: 1px solid var(--c-line);
	font-size: var(--fs-small);
}

.topbar__inner {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: var(--sp-4);
	min-height: 34px;
}

.topbar__menu {
	display: flex;
	gap: var(--sp-4);
	list-style: none;
	margin: 0;
	padding: 0;
}

.topbar__menu a {
	color: var(--c-muted);
	text-decoration: none;
}

.topbar__social {
	display: inline-flex;
	color: var(--c-primary);
}

/* ------------------------------------------------------------------ Header */
.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: rgba(252, 252, 252, 0.94);
	backdrop-filter: saturate(160%) blur(8px);
	border-bottom: 1px solid var(--c-line);
	transition: box-shadow var(--dur) var(--ease);
}

.site-header.is-stuck {
	box-shadow: var(--shadow-sm);
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-5);
	min-height: var(--header-h);
	padding-block: var(--sp-3);
}

.brand__link {
	display: inline-block;
	text-decoration: none;
}

.brand__logo {
	max-width: min(300px, 62vw);
	height: auto;
}

.brand__name {
	font-size: 1.375rem;
	font-weight: 600;
	color: var(--c-primary);
}

.brand__tagline {
	margin: var(--sp-1) 0 0;
	font-size: 0.86rem;
	letter-spacing: 0.065em;
	text-transform: uppercase;
	color: var(--c-accent);
}

@media (max-width: 480px) {
	.brand__tagline {
		font-size: 0.8rem;
		letter-spacing: 0.05em;
	}
}

/* -------------------------------------------------------------- Navigation */
.nav__list {
	display: flex;
	align-items: center;
	gap: var(--sp-5);
	list-style: none;
	margin: 0;
	padding: 0;
}

.nav__item {
	position: relative;
}

.nav__link {
	display: inline-block;
	padding: var(--sp-2) 0;
	color: var(--c-ink);
	font-size: 0.9375rem;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
}

.nav__link::after {
	content: "";
	display: block;
	height: 2px;
	margin-top: 4px;
	background: var(--c-accent);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--dur) var(--ease);
}

.nav__item:hover > .nav__link::after,
.nav__item.is-current > .nav__link::after,
.nav__link:focus-visible::after {
	transform: scaleX(1);
}

.nav__item.is-current > .nav__link {
	color: var(--c-accent);
}

.nav__toggle {
	display: none;
	background: none;
	border: 0;
	cursor: pointer;
}

.nav__submenu {
	position: absolute;
	top: 100%;
	left: calc(var(--sp-4) * -1);
	min-width: 230px;
	margin: 0;
	padding: var(--sp-2) 0;
	list-style: none;
	background: var(--c-surface);
	border: 1px solid var(--c-line);
	border-radius: var(--radius);
	box-shadow: var(--shadow-md);
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur);
}

.nav__item--parent:hover > .nav__submenu,
.nav__item--parent:focus-within > .nav__submenu,
.nav__item--parent.is-open > .nav__submenu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.nav__submenu .nav__link {
	display: block;
	padding: var(--sp-2) var(--sp-4);
	text-transform: none;
	letter-spacing: 0;
}

.nav__submenu .nav__link::after {
	display: none;
}

.nav__submenu .nav__link:hover {
	background: var(--c-tint-soft);
}

/* Burger */
.nav-burger {
	display: none;
	align-items: center;
	gap: var(--sp-2);
	padding: var(--sp-2) var(--sp-3);
	background: none;
	border: 1px solid var(--c-line);
	border-radius: var(--radius);
	color: var(--c-primary);
	font: inherit;
	font-size: 0.8125rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	cursor: pointer;
}

.nav-burger__box {
	position: relative;
	width: 20px;
	height: 14px;
}

.nav-burger__bar,
.nav-burger__bar::before,
.nav-burger__bar::after {
	position: absolute;
	left: 0;
	width: 20px;
	height: 2px;
	background: currentColor;
	transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}

.nav-burger__bar { top: 6px; }
.nav-burger__bar::before { content: ""; top: -6px; }
.nav-burger__bar::after { content: ""; top: 6px; }

.nav-burger[aria-expanded="true"] .nav-burger__bar { background: transparent; }
.nav-burger[aria-expanded="true"] .nav-burger__bar::before { transform: translateY(6px) rotate(45deg); }
.nav-burger[aria-expanded="true"] .nav-burger__bar::after { transform: translateY(-6px) rotate(-45deg); }

/* -------------------------------------------------------------- Buttons */
.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--sp-2);
	padding: 0.7rem 1.5rem;
	border: 1px solid transparent;
	border-radius: var(--radius);
	font-size: 0.9375rem;
	font-weight: 500;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease),
		border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.button + .button { margin-left: var(--sp-3); }

.button--solid {
	background: var(--c-primary);
	color: #fff;
}

.button--solid:hover,
.button--solid:focus-visible {
	background: var(--c-primary-dark);
	color: #fff;
	transform: translateY(-1px);
}

.button--outline {
	background: transparent;
	border-color: var(--c-tint);
	color: var(--c-primary);
}

.button--outline:hover,
.button--outline:focus-visible {
	background: var(--c-tint-soft);
	border-color: var(--c-accent);
	color: var(--c-primary-dark);
}

/* ---------------------------------------------------------------- Prose */
.prose {
	font-size: var(--fs-base);
}

.prose > :last-child { margin-bottom: 0; }

.prose ul,
.prose ol {
	margin: 0 0 var(--sp-4);
	padding-left: 1.25rem;
}

.prose li { margin-bottom: var(--sp-2); }

.prose strong { color: var(--c-primary); }

.prose table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: var(--sp-5);
	font-size: var(--fs-small);
}

.prose th,
.prose td {
	padding: var(--sp-3);
	border-bottom: 1px solid var(--c-line);
	text-align: left;
	vertical-align: top;
}

.prose th {
	background: var(--c-tint-soft);
	color: var(--c-primary);
	font-weight: 600;
}

.prose img { border-radius: var(--radius); }

.prose blockquote {
	margin: 0 0 var(--sp-5);
	padding-left: var(--sp-5);
	border-left: 3px solid var(--c-tint);
	color: var(--c-muted);
	font-style: italic;
}

/* ----------------------------------------------------------------- Hero */
.section--hero {
	padding-block: 0;
	position: relative;
}

.hero__media {
	position: relative;
	overflow: hidden;
	max-height: 450px;
}

.hero__img {
	width: 100%;
	object-fit: cover;
	animation: mmeu-zoom 1200ms var(--ease) both;
	margin: 0 auto;
}

.hero--sm .hero__img { height: clamp(160px, 24vw, 260px); }
.hero--md .hero__img { height: clamp(220px, 32vw, 420px); }
.hero--lg .hero__img { height: clamp(280px, 44vw, 620px); }

/*
 * Nachgelagerte Bühnen sind meist Screenshots mit unterschiedlichen
 * Seitenverhältnissen: nicht beschneiden, sondern zentriert in der
 * Inhaltsbreite und über die Höhe begrenzt darstellen.
 */
.hero--inline .hero__media {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--sp-2);
	width: min(100% - 2.5rem, var(--w-site));
	margin-inline: auto;
	overflow: visible;
}

.hero--inline .hero__img {
	width: auto;
	max-width: 100%;
	height: auto;
	object-fit: contain;
	border: 1px solid var(--c-line);
	border-radius: var(--radius);
	box-shadow: var(--shadow-sm);
}

.hero--inline.hero--sm .hero__img { max-height: clamp(180px, 26vw, 300px); }
.hero--inline.hero--md .hero__img { max-height: clamp(240px, 34vw, 440px); }
.hero--inline.hero--lg .hero__img { max-height: clamp(300px, 46vw, 640px); }

.hero--inline .hero__content {
	position: static;
	transform: none;
	margin-top: var(--sp-5);
	color: inherit;
	animation-name: mmeu-rise-static;
}

/* Overlay-Verlauf ergibt bei unbeschnittenen Abbildungen keinen Sinn. */
.hero--inline.hero--overlay .hero__media::after { display: none; }

.hero--inline.hero--overlay .hero__title,
.hero--inline.hero--overlay .hero__subtitle { color: inherit; }

/* Mehrere Bühnen untereinander brauchen Luft, auch bei --space-none. */
.section--hero + .section--hero {
	margin-top: var(--sp-7);
}

.section--hero.section--space-none + .section--hero.section--space-none {
	margin-top: var(--sp-6);
}

.hero--overlay .hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(16, 68, 123, 0.05), rgba(16, 68, 123, 0.5));
}

/* Bildnachweis aus der Mediathek. */
.hero__caption {
	margin: 0;
	color: var(--c-muted);
	font-size: 0.75rem;
	line-height: 1.4;
	text-align: center;
}

/* Beim randlosen Banner steht der Nachweis dezent im Bild unten rechts. */
.hero--lead .hero__caption {
	position: absolute;
	right: var(--sp-3);
	bottom: var(--sp-2);
	z-index: 2;
	max-width: 70%;
	padding: 0.1rem 0.45rem;
	border-radius: var(--radius);
	background: rgba(255, 255, 255, 0.8);
	color: var(--c-ink);
	text-align: right;
}

.hero__content {
	position: absolute;
	inset-inline: 0;
	bottom: var(--sp-6);
	left: 50%;
	transform: translateX(-50%);
	color: #fff;
	animation: mmeu-rise 700ms var(--ease) 200ms both;
}

.hero--overlay .hero__title,
.hero--overlay .hero__subtitle { color: #fff; }

.section--hero:not(.hero--overlay) .hero__content {
	position: static;
	transform: none;
	margin-top: var(--sp-6);
	color: inherit;
	animation-name: mmeu-rise-static;
}

.hero__title { margin-bottom: var(--sp-2); }

.hero__subtitle {
	margin: 0;
	font-size: var(--fs-lead);
	color: var(--c-accent);
}

.hero--overlay .hero__subtitle { color: rgba(255, 255, 255, 0.92); }

/* ------------------------------------------------------------ Bild+Text */
.media {
	display: grid;
	gap: clamp(1.5rem, 4vw, 3rem);
	align-items: start;
}

.media--ratio-1-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
.media--ratio-1-1 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.media--textonly { grid-template-columns: minmax(0, 1fr); }

/*
 * Bildposition "rechts": Die Spaltenbreiten werden mitgedreht, sonst
 * bekäme der Text die schmale Bildspalte und das Bild die breite.
 */
.media--right.media--ratio-1-2 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }

/*
 * Cover-Variante: Das Produktbild bleibt klein und steht direkt neben
 * bzw. über dem Titel – kein seitenbreites Magazincover mehr.
 */
.media--ratio-cover {
	grid-template-columns: 180px minmax(0, 1fr);
	gap: clamp(1.25rem, 3vw, 2rem);
	align-items: start;
}

.media--right.media--ratio-cover { grid-template-columns: minmax(0, 1fr) 180px; }

.media--ratio-cover .media__img {
	max-width: 180px;
	max-height: 260px;
}

@media (max-width: 720px) {
	.media--ratio-cover,
	.media--right.media--ratio-cover {
		grid-template-columns: minmax(0, 1fr);
	}

	.media--ratio-cover .media__img {
		max-width: 140px;
		max-height: 200px;
	}
}

.media--right .media__figure { order: 2; }

/* Ohne min-width: 0 sprengen breite Inhalte (Tabellen) die Grid-Spalte. */
.media__figure,
.media__body { min-width: 0; }

/* Sehr breite Tabellen (z. B. Themenplan) bleiben in der Spalte scrollbar. */
.media__body .ha-themenplan,
.media__body .prose > table {
	max-width: 100%;
	overflow-x: auto;
}

/*
 * Der Themenplan braucht die volle Breite: Solche Sektionen werden gestapelt
 * (Bild über Tabelle) statt zweispaltig dargestellt.
 */
.media:has(.ha-themenplan) {
	grid-template-columns: minmax(0, 1fr);
}

.media:has(.ha-themenplan) .media__figure { order: 0; }

.media__figure {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--sp-2);
	margin: 0;
}

/* Copyright-/Bildnachweis-Angabe aus der Mediathek. */
.media__caption,
.entry__caption {
	margin: 0;
	color: var(--c-muted);
	font-size: 0.75rem;
	line-height: 1.4;
	text-align: center;
}

.media__caption a,
.entry__caption a,
.card__credit a {
	color: inherit;
}


.media__link {
	display: block;
	max-width: 100%;
	line-height: 0;
}

/*
 * Bilder wachsen nicht mehr auf die volle Spaltenbreite: Hochformate
 * (A4-Cover) werden über die Höhe begrenzt, Querformate über die Breite.
 */
.media__img {
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: 340px;
	border: 1px solid var(--c-line);
	border-radius: var(--radius);
	box-shadow: var(--shadow-sm);
	transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

@media (max-width: 720px) {

	.media__img { max-height: 260px; }
}

.media__link:hover .media__img {
	transform: translateY(-3px);
	box-shadow: var(--shadow-md);
}

.media__title {
	font-size: var(--fs-h3);
	margin-bottom: var(--sp-2);
}

.media__subtitle {
	margin: 0 0 var(--sp-3);
	color: var(--c-accent);
	font-size: var(--fs-small);
}

.media__actions {
	margin: var(--sp-5) 0 0;
}

/* --------------------------------------------------------------- Karten */
.cards,
.downloads,
.features,
.quotes,
.team {
	list-style: none;
	margin: 0;
	padding: 0;
}

.cards {
	display: grid;
	gap: clamp(1.25rem, 3vw, 2.25rem);
}

.cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.card {
	display: flex;
	flex-direction: column;
	background: var(--c-surface);
	border: 1px solid var(--c-line);
	border-radius: var(--radius);
	overflow: hidden;
	transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.card:hover {
	transform: translateY(-3px);
	box-shadow: var(--shadow-md);
}

/*
 * Einheitliche Medienbox: Alle Karten einer Reihe sind gleich hoch, das Bild
 * behält aber immer sein echtes Seitenverhältnis. Damit funktionieren Cover
 * (A4-Hochformat), Screenshots und Querformat-Fotos nebeneinander, ohne dass
 * etwas beschnitten oder in ein festes 4:3 gezwängt wird.
 */
.card__media {
	/*
	 * Reservierter Freiraum unterhalb des Bildes für den Bildnachweis.
	 * Standard 0 – wird nur gesetzt, wenn wirklich ein Nachweis existiert
	 * (siehe :has()-Regel unten). Hier zentral justierbar.
	 */
	--card-credit-space: 0rem;

	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	height: clamp(220px, 24vw, 300px);
	padding: var(--sp-4);
	background: var(--c-tint-soft);
	border-bottom: 1px solid var(--c-line);
}

/*
 * Nur Medienboxen MIT Bildnachweis stauchen das Bild leicht. Die Box-Höhe
 * bleibt unverändert, dadurch bleiben alle Karten einer Reihe gleich hoch
 * und Karten ohne Bildquelle nutzen weiterhin die volle Fläche.
 */
.card__media:has(.card__credit) {
	--card-credit-space: 1.25rem;
}

/* Bildnachweis dezent in der Ecke der Medienbox. */
.card__credit {
	position: absolute;
	right: var(--sp-2);
	bottom: var(--sp-1, 0.25rem);
	max-width: calc(100% - var(--sp-4));
	color: var(--c-muted);
	font-size: 0.6875rem;
	line-height: 1.3;
	text-align: right;
}

.card__media > a {
	display: flex;
	align-items: center;
	justify-content: center;
	max-width: 100%;
	height: 100%;
	max-height: calc(100% - var(--card-credit-space));
	line-height: 0;
}

/* Bild ohne Link-Wrapper: identischer Freiraum nach unten. */
.card__media > .card__img {
	max-height: calc(100% - var(--card-credit-space));
}

.card__img {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: 100%;
	aspect-ratio: auto;
	object-fit: contain;
}

/* Querformate brauchen weniger Höhe als Cover im Hochformat. */
.card__media--landscape { height: clamp(180px, 19vw, 240px); }
.card__media--square { height: clamp(200px, 21vw, 260px); }

.card__body {
	display: flex;
	flex-direction: column;
	gap: var(--sp-2);
	padding: var(--sp-5);
}

.card__title {
	margin: 0;
	font-size: 1.0625rem;
}

.card__title a { text-decoration: none; }

.card__text { font-size: var(--fs-small); }

.card__actions { margin: auto 0 0; padding-top: var(--sp-3); }

/* ------------------------------------------------------------- Merkmale */
.section--features.features--tint {
	background: linear-gradient(180deg, var(--c-tint-soft), var(--c-tint));
}

.features {
	display: grid;
	gap: clamp(1.5rem, 3vw, 2.5rem);
	text-align: center;
}

.features--cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.features--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.features--cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.feature__icon {
	display: inline-flex;
	color: var(--c-primary);
	margin-bottom: var(--sp-3);
}

.feature__title {
	font-size: 1.375rem;
	font-weight: 400;
	color: var(--c-primary);
	margin-bottom: var(--sp-3);
}

.feature__text {
	font-size: var(--fs-small);
	color: var(--c-ink);
}

/* --------------------------------------------------------------- Zitate */
.quotes {
	display: grid;
	gap: clamp(1.5rem, 4vw, 3rem);
	text-align: center;
}

.quotes--cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.quotes--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.quote figure { margin: 0; }

.quote__text {
	margin: 0 0 var(--sp-3);
	color: var(--c-accent);
	font-size: var(--fs-lead);
	font-style: italic;
	line-height: 1.6;
}

.quote__text p { margin: 0; }

.quote__author {
	font-size: var(--fs-small);
	font-style: italic;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--c-muted);
}

/* ----------------------------------------------------------------- Team */
.team {
	display: grid;
	gap: var(--sp-6);
}

.member {
	display: grid;
	grid-template-columns: 160px minmax(0, 1fr);
	gap: var(--sp-5);
	align-items: start;
	padding-bottom: var(--sp-6);
	border-bottom: 1px solid var(--c-line);
}

.member:last-child { border-bottom: 0; padding-bottom: 0; }

.member__img {
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: var(--radius);
	filter: grayscale(12%);
	transition: filter var(--dur) var(--ease);
}

.member:hover .member__img { filter: grayscale(0); }

.member__credit {
	display: block;
	margin-top: var(--sp-1);
	color: var(--c-muted);
	font-size: 0.6875rem;
	line-height: 1.3;
}

.member__credit a { color: inherit; }

.member__placeholder {
	display: grid;
	place-items: center;
	aspect-ratio: 1;
	background: var(--c-tint-soft);
	border-radius: var(--radius);
	color: var(--c-tint);
}

.member__name {
	margin-bottom: var(--sp-1);
	font-size: 1.125rem;
}

.member__role {
	margin: 0 0 var(--sp-3);
	color: var(--c-accent);
	font-size: var(--fs-small);
	font-style: italic;
}

.member__text { font-size: var(--fs-small); }

/* ------------------------------------------------------------ Downloads */
.downloads {
	display: grid;
	gap: clamp(1.25rem, 3vw, 2rem);
}

.downloads--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.downloads--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.downloads--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.download__link {
	display: flex;
	flex-direction: column;
	gap: var(--sp-3);
	height: 100%;
	padding: var(--sp-4);
	background: var(--c-surface);
	border: 1px solid var(--c-line);
	border-radius: var(--radius);
	color: inherit;
	text-align: center;
	text-decoration: none;
	transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
		transform var(--dur) var(--ease);
}

.download__link:hover,
.download__link:focus-visible {
	border-color: var(--c-accent);
	box-shadow: var(--shadow-md);
	transform: translateY(-2px);
}

.download__img {
	width: 100%;
	max-width: 260px;
	margin-inline: auto;
	border: 1px solid var(--c-line);
}

.download__body {
	display: flex;
	flex-direction: column;
	gap: var(--sp-1);
	margin-top: auto;
}

.download__title {
	color: var(--c-primary);
	font-weight: 600;
}

.download__caption {
	font-size: var(--fs-small);
	color: var(--c-muted);
}

.download__hint {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--sp-2);
	margin-top: var(--sp-2);
	color: var(--c-accent);
	font-size: var(--fs-small);
}

/* ------------------------------------------------------------------ CTA */
.cta {
	text-align: left;
}

.cta__text {
	font-size: var(--fs-lead);
	color: var(--c-muted);
}

/* -------------------------------------------------------------- Trenner */
.section--separator { padding-block: var(--sp-5); }

.separator--space { padding-block: var(--sp-6); }

.separator__line {
	max-width: 120px;
	margin-inline: auto;
	border-top-color: var(--c-tint);
}

.separator__mark {
	display: flex;
	justify-content: center;
	color: var(--c-primary);
}

/* --------------------------------------------------------- Seitenkopf */
.page__title { text-align: center; }

.entry__meta,
.teaser__meta {
	color: var(--c-muted);
	font-size: var(--fs-small);
}

.entry__media { margin: 0 0 var(--sp-6); }

.entry__media img {
	display: block;
	height: auto;
	border-radius: var(--radius);
}

/*
 * Produkt-/Magazincover: klein und direkt am Titel.
 * Wird auf dem Beitrags-Header als "Cover" ausgegeben.
 */
.entry__header--cover {
	display: flex;
	align-items: flex-start;
	gap: var(--sp-5);
	flex-wrap: wrap;
}

.entry__header--cover .entry__headline {
	flex: 1 1 18rem;
	min-width: 0;
}

.entry__cover {
	flex: 0 0 auto;
	width: clamp(110px, 18vw, 180px);
	margin: 0;
}

.entry__cover img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--radius);
	box-shadow: var(--shadow-sm);
}

@media (max-width: 600px) {
	.entry__cover { width: 120px; }
}

/*
 * Blockstil "Cover klein" für Bilder im Editor.
 * Redaktion kann damit jedes Bild im Artikel auf Covergröße bringen.
 */
.prose .wp-block-image.is-style-mmeu-cover-small,
.prose figure.is-style-mmeu-cover-small {
	max-width: 180px;
	margin-inline: 0;
}

.prose .wp-block-image.is-style-mmeu-cover-small img,
.prose figure.is-style-mmeu-cover-small img {
	width: 100%;
	height: auto;
	border-radius: var(--radius);
	box-shadow: var(--shadow-sm);
}

/* ------------------------------------------------------------- Teaser */
.teaser-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: clamp(1.25rem, 3vw, 2rem);
}

.teaser {
	display: flex;
	flex-direction: column;
	background: var(--c-surface);
	border: 1px solid var(--c-line);
	border-radius: var(--radius);
	overflow: hidden;
}

.teaser__body { padding: var(--sp-5); }

.teaser__title { font-size: 1.125rem; }

.teaser__title a { text-decoration: none; }

.archive__header { margin-bottom: var(--sp-6); text-align: center; }

.pagination {
	display: flex;
	justify-content: center;
	margin-top: var(--sp-7);
}

.pagination .nav-links {
	display: flex;
	gap: var(--sp-2);
}

.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding-inline: var(--sp-2);
	border: 1px solid var(--c-line);
	border-radius: var(--radius);
	text-decoration: none;
}

.pagination .page-numbers.current {
	background: var(--c-primary);
	border-color: var(--c-primary);
	color: #fff;
}

/* -------------------------------------------------------- Brotkrumen */
.breadcrumbs {
	padding-block: var(--sp-3);
	font-size: var(--fs-small);
	color: var(--c-muted);
	border-bottom: 1px solid var(--c-line);
}

.breadcrumbs__sep { margin-inline: var(--sp-2); }

/* ------------------------------------------------------------- Suche */
.search-form {
	display: flex;
	gap: var(--sp-2);
	margin-bottom: var(--sp-5);
}

.search-form__input {
	flex: 1;
	padding: 0.65rem var(--sp-3);
	border: 1px solid var(--c-line);
	border-radius: var(--radius);
	font: inherit;
	background: var(--c-surface);
}

/* ------------------------------------------------------------ Footer */
.site-footer {
	margin-top: var(--sp-8);
	background: var(--c-footer);
	color: var(--c-footer-ink);
	font-size: var(--fs-small);
}

.footer__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: var(--sp-6);
	padding-block: var(--sp-7);
}

.footer__title {
	margin-bottom: var(--sp-3);
	color: var(--c-footer-ink);
	font-size: 1rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.footer__menu {
	list-style: none;
	margin: 0;
	padding: 0;
}

.footer__menu li { margin-bottom: var(--sp-2); }

.footer__menu a {
	color: var(--c-footer-ink);
	text-decoration: none;
	text-transform: uppercase;
	font-size: 0.8125rem;
	letter-spacing: 0.04em;
}

.footer__menu a:hover,
.footer__menu a:focus-visible {
	color: var(--c-accent);
	text-decoration: underline;
}

.footer__bar {
	border-top: 1px solid rgba(0, 0, 0, 0.08);
	padding-block: var(--sp-4);
	text-align: center;
}

.footer__copyright {
	margin: 0;
	font-size: 0.8125rem;
	color: var(--c-muted);
}

/* ------------------------------------------------------- Zum Seitenanfang */
.to-top {
	position: fixed;
	right: var(--sp-5);
	bottom: var(--sp-5);
	z-index: 90;
	width: 44px;
	height: 44px;
	display: grid;
	place-items: center;
	background: var(--c-primary);
	border: 0;
	border-radius: 50%;
	box-shadow: var(--shadow-md);
	cursor: pointer;
	opacity: 0;
	transform: translateY(8px);
	transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.to-top.is-visible {
	opacity: 1;
	transform: translateY(0);
}

.to-top__arrow {
	width: 10px;
	height: 10px;
	border-top: 2px solid #fff;
	border-left: 2px solid #fff;
	transform: rotate(45deg) translate(2px, 2px);
}

/* ------------------------------------------------------------- 404 */
.error-404 { text-align: center; }

.error-404__code {
	font-size: clamp(3rem, 10vw, 6rem);
	font-weight: 700;
	line-height: 1;
	color: var(--c-tint);
	margin-bottom: var(--sp-3);
}

/* ------------------------------------------------------- Animationen */
[data-reveal] {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 600ms var(--ease), transform 600ms var(--ease);
}

[data-reveal].is-revealed {
	opacity: 1;
	transform: none;
}

@keyframes mmeu-rise {
	from { opacity: 0; transform: translate(-50%, 16px); }
	to { opacity: 1; transform: translate(-50%, 0); }
}

@keyframes mmeu-rise-static {
	from { opacity: 0; transform: translateY(16px); }
	to { opacity: 1; transform: none; }
}

@keyframes mmeu-zoom {
	from { transform: scale(1.04); }
	to { transform: scale(1); }
}

/* ------------------------------------------------------- Buttonreihe */

.section--buttonrow + .section--buttonrow.section--space-default {
	padding-top: var(--sp-5);
}

.buttonrow__title {
	color: var(--c-accent);
	font-size: var(--fs-h3);
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	margin: 0 0 var(--sp-5);
}

.section--buttonrow.is-center .buttonrow__title,
.section--buttonrow.is-center .buttonrow__intro {
	text-align: center;
}

.buttonrow__intro {
	margin-bottom: var(--sp-5);
}

/* Standard („automatisch“): Die Buttons stehen wie Inline-Blöcke nebeneinander,
   jeder nur so breit wie sein Text, und fließen bei Platzmangel in die nächste
   Reihe. Keine festen Spaltenbreiten. */
.buttonrow {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-3) var(--sp-4);
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Feste Spalten als Alternative: gleich breite Buttons im Raster. */
.buttonrow--cols-2,
.buttonrow--cols-3,
.buttonrow--cols-4 {
	display: grid;
}

.buttonrow--cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.buttonrow--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.buttonrow--cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Zentriert: Die Reihe wird mittig umbrochen. Bei festen Spalten rückt das
   Raster als Ganzes in die Mitte. */
.section--buttonrow.is-center .buttonrow {
	justify-content: center;
}

.buttonrow__item {
	display: flex;
}

.buttonrow__link {
	display: flex;
	/* basis:auto – sonst bemisst sich die Breite im Fließsatz an min-content
	   und der Text bräche unnötig um. */
	flex: 1 1 auto;
	align-items: center;
	justify-content: center;
	padding: 0.65rem 1.25rem;
	border: 1px solid transparent;
	border-radius: 10px;
	color: var(--c-primary);
	font-size: 0.9375rem;
	letter-spacing: 0.04em;
	line-height: 1.25;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease),
		color var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

/* Gefüllte Variante. */
.buttonrow--fill.buttonrow--blue .buttonrow__link { background: var(--c-chip-blue); }
.buttonrow--fill.buttonrow--grey .buttonrow__link { background: var(--c-chip-grey); }

.buttonrow--fill.buttonrow--blue .buttonrow__link:hover,
.buttonrow--fill.buttonrow--blue .buttonrow__link:focus-visible { background: var(--c-chip-blue-hover); }

.buttonrow--fill.buttonrow--grey .buttonrow__link:hover,
.buttonrow--fill.buttonrow--grey .buttonrow__link:focus-visible { background: var(--c-chip-grey-hover); }

/* Randvariante: weiße Fläche, farbige Kontur. */
.buttonrow--outline .buttonrow__link {
	background: var(--c-surface);
}

.buttonrow--outline.buttonrow--blue .buttonrow__link { border-color: var(--c-chip-blue-hover); }
.buttonrow--outline.buttonrow--grey .buttonrow__link { border-color: var(--c-chip-grey-hover); }

.buttonrow--outline.buttonrow--blue .buttonrow__link:hover,
.buttonrow--outline.buttonrow--blue .buttonrow__link:focus-visible {
	background: var(--c-chip-blue);
	border-color: var(--c-accent);
}

.buttonrow--outline.buttonrow--grey .buttonrow__link:hover,
.buttonrow--outline.buttonrow--grey .buttonrow__link:focus-visible {
	background: var(--c-chip-grey);
	border-color: var(--c-muted);
}

.buttonrow__link:hover,
.buttonrow__link:focus-visible {
	transform: translateY(-1px);
	box-shadow: var(--shadow-sm);
}

.buttonrow__link:focus-visible {
	outline: 2px solid var(--c-accent);
	outline-offset: 2px;
}

/* ------------------------------------------------- Trenner: Textbalken */

/*
 * Die Box läuft randabfallend über die volle Fensterbreite. Der Text sitzt
 * mittig in der Box und fluchtet links mit dem übrigen Seiteninhalt – deshalb
 * trägt die Sektion die Farbe und der innere .container die Begrenzung.
 */
.section--textband {
	display: flex;
	align-items: center;
	min-height: 140px;
}

/* Als Flex-Kind darf der Container nicht über die Box hinauswachsen. */
.section--textband > .container {
	min-width: 0;
}

.section--textband.section--space-default {
	padding-block: clamp(1.5rem, 2.5vw, 2.25rem);
}

.section--textband.textband--light { background: var(--c-band-light); }
.section--textband.textband--tint { background: var(--c-band-tint); }
.section--textband.textband--grey { background: var(--c-band-grey); }

.section--textband.textband--primary {
	background: var(--c-primary);
	color: #fff;
}

.textband__text {
	color: var(--c-accent);
	font-size: var(--fs-lead);
	font-weight: 500;
	line-height: 1.55;
	text-align: left;
}

.section--textband.textband--primary .textband__text,
.section--textband.textband--primary .textband__text a {
	color: #fff;
}

.textband__text > :first-child { margin-top: 0; }
.textband__text > :last-child { margin-bottom: 0; }

.textband__text a {
	color: inherit;
	text-decoration: underline;
}

.textband__text a:hover,
.textband__text a:focus-visible {
	text-decoration-thickness: 2px;
}

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

.entry table,
.section table {
	width: 100%;
	border-collapse: collapse;
	margin-block: var(--sp-5);
	font-size: 0.95rem;
}

.entry th,
.section th {
	text-align: left;
	vertical-align: bottom;
	padding: 10px;
	background: var(--c-primary);
	color: #fff;
	font-weight: 600;
}

.entry td,
.section td {
	vertical-align: top;
	padding: 10px;
	border-bottom: 1px solid var(--c-border);
}

/* Übernommen aus dem Additional CSS des Altthemes (Shortcode [themenplan]). */
#ht-themenplan {
	width: 100%;
	border-collapse: collapse;
}

#ht-themenplan tbody { font-size: 1.1em; }

#ht-themenplan tbody tr { background-color: #f9f9f9; }

#ht-themenplan tbody tr:nth-of-type(odd) { background-color: #f3f3f3; }

#ht-themenplan th {
	vertical-align: bottom;
	padding: 10px;
}

#ht-themenplan td {
	vertical-align: top;
	padding: 10px;
}

#ht-themenplan td.dates {
	text-align: center;
	vertical-align: middle;
}

/* Cookie-Banner des Dienstleisters über allen Theme-Ebenen halten. */
#cc-banner-wrap { z-index: 999999 !important; }

/* Tabellen auf kleinen Bildschirmen horizontal scrollbar machen. */
.table-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

/*
 * Breite Tabellen (z. B. Themenplan) passen auf dem Smartphone nicht in die
 * Spaltenbreite. Statt die Seite in die Breite zu ziehen, wird die Tabelle
 * selbst horizontal scrollbar.
 */
@media (max-width: 900px) {
	.entry table,
	.section table,
	#ht-themenplan {
		display: block;
		width: 100%;
		max-width: 100%;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
}

/* Lange Wörter (Domains, URLs, E-Mail-Adressen) dürfen die Seite nicht aufweiten. */
body {
	overflow-wrap: break-word;
}

a {
	overflow-wrap: anywhere;
}

/* ------------------------------------------------------------ Responsive */
@media (max-width: 1024px) {
	.cards--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.features--cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.downloads--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
	:root { --header-h: 72px; }

	.nav-burger { display: inline-flex; }

	/*
	 * Logo und Menü-Knopf teilen sich auf schmalen Geräten wenig Platz.
	 * Ohne Schrumpf-Erlaubnis läuft der Knopf über den Rand hinaus.
	 */
	.site-header__inner {
		gap: var(--sp-3);
		flex-wrap: nowrap;
	}

	.brand {
		min-width: 0;
		flex: 0 1 auto;
	}

	.brand__logo {
		max-width: 100%;
	}

	.nav-burger {
		flex: 0 0 auto;
	}

	.nav {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		max-height: 0;
		overflow: hidden;
		background: var(--c-surface);
		border-bottom: 1px solid var(--c-line);
		transition: max-height 320ms var(--ease);
	}

	.nav.is-open {
		max-height: 80vh;
		overflow-y: auto;
	}

	.nav__list {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: var(--sp-2) 0;
	}

	.nav__item {
		border-bottom: 1px solid var(--c-line);
	}

	.nav__item:last-child { border-bottom: 0; }

	.nav__link {
		padding: var(--sp-4) var(--sp-5);
	}

	.nav__link::after { display: none; }

	.nav__toggle {
		display: block;
		position: absolute;
		top: 0;
		right: 0;
		width: 56px;
		height: 56px;
	}

	.nav__chevron {
		display: block;
		width: 9px;
		height: 9px;
		margin-inline: auto;
		border-right: 2px solid var(--c-primary);
		border-bottom: 2px solid var(--c-primary);
		transform: rotate(45deg);
		transition: transform var(--dur) var(--ease);
	}

	.nav__item.is-open .nav__chevron { transform: rotate(-135deg); }

	.nav__submenu {
		position: static;
		display: none;
		min-width: 0;
		border: 0;
		border-radius: 0;
		box-shadow: none;
		opacity: 1;
		visibility: visible;
		transform: none;
		background: var(--c-tint-soft);
	}

	.nav__item.is-open > .nav__submenu { display: block; }

	.media--ratio-1-2,
	.media--ratio-1-1,
	.media--right.media--ratio-1-2,
	.media--right.media--ratio-1-1 { grid-template-columns: minmax(0, 1fr); }

	.media--right .media__figure { order: 0; }

	.media__figure { max-width: 320px; }

	.quotes--cols-2,
	.quotes--cols-3 { grid-template-columns: minmax(0, 1fr); }

	.features--cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	.buttonrow--cols-4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
	.section { padding-block: var(--sp-6); }
	.section--space-loose { padding-block: var(--sp-7); }

	.topbar__menu { display: none; }

	.cards--2,
	.cards--3,
	.cards--4,
	.downloads--2,
	.downloads--3,
	.downloads--4,
	.features--cols-2,
	.features--cols-3,
	.features--cols-4 { grid-template-columns: minmax(0, 1fr); }

	/* Mobil wie gehabt: gleich breite Buttons im Raster statt Fließsatz. */
	.buttonrow {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(165px, 1fr));
	}
	.buttonrow--cols-3,
	.buttonrow--cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.buttonrow__link { padding-inline: 0.75rem; font-size: 0.875rem; }

	.section--textband { min-height: 0; }

	.member { grid-template-columns: minmax(0, 1fr); }
	.member__media { max-width: 150px; }

	.button + .button { margin: var(--sp-3) 0 0; }
	.media__actions { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-3); }
	.media__actions .button + .button { margin: 0; }

	/* Menü-Knopf kompakter, damit er nicht am Displayrand klebt. */
	.brand__logo { max-width: min(200px, 48vw); }

	.nav-burger {
		padding: var(--sp-2);
		letter-spacing: 0.05em;
		gap: var(--sp-1);
	}
}

/*
 * Bühnenbilder auf dem Smartphone über die volle Breite ausspielen statt sie
 * auf eine feste Höhe zu beschneiden – sonst ist nur der Bildausschnitt in der
 * Mitte zu sehen (z. B. 1600 × 450 Banner auf einem 390 px breiten Display).
 */
@media (max-width: 720px) {
	.hero--lead .hero__img,
	.hero--lead.hero--sm .hero__img,
	.hero--lead.hero--md .hero__img,
	.hero--lead.hero--lg .hero__img {
		width: 100%;
		height: auto;
		max-height: none;
		object-fit: contain;
	}

	.hero--inline.hero--sm .hero__img,
	.hero--inline.hero--md .hero__img,
	.hero--inline.hero--lg .hero__img {
		width: 100%;
		max-height: none;
	}

	/* Auf dem schmalen Banner ist kein Platz für überlagerten Text. */
	.hero--overlay .hero__media::after { display: none; }

	.hero--overlay .hero__content {
		position: static;
		transform: none;
		margin-top: var(--sp-5);
		color: inherit;
		animation-name: mmeu-rise-static;
	}

	.hero--overlay .hero__title { color: inherit; }
	.hero--overlay .hero__subtitle { color: var(--c-accent); }
}

/* ----------------------------------------------------------- Präferenzen */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}

	[data-reveal] { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------- Druck */
@media print {
	.site-header,
	.topbar,
	.site-footer,
	.to-top,
	.nav-burger,
	.breadcrumbs { display: none !important; }

	body { background: #fff; color: #000; font-size: 11pt; }

	.section { padding-block: 0.5cm; }

	a[href^="http"]::after {
		content: " (" attr(href) ")";
		font-size: 9pt;
		color: #555;
	}
}