/*
 * Designsystem Manuel Maag - Komponenten
 * Quelle: Claude Design Projekt "Designsystem Manuel Maag"
 * Farbwerte liegen in css/tokens.css.
 */

/* ---------------------------------------------------------------
   Grundlagen
   --------------------------------------------------------------- */

/* Hintergrund zusaetzlich auf html, damit der Bereich ausserhalb des
   Divi-Containers beim Ueberscrollen (Rubber-Band auf iOS) mitfaerbt.
   color-scheme faerbt Scrollbalken und native Bedienelemente passend
   zum Modus ein. */
html {
	background-color: var(--bg);
	color-scheme: light dark;
}

[data-theme="light"] { color-scheme: light; }
[data-theme="dark"]  { color-scheme: dark; }

body {
	background-color: var(--bg);
	color: var(--text);
	font-family: 'Inter', system-ui, -apple-system, sans-serif;
	font-size: var(--fs-body);
	line-height: var(--lh-body);
}

/* Waehrend des Moduswechsels alle Uebergaenge stilllegen.
   Ein Element mit transition auf einer Farbe behaelt sonst den alten Wert,
   wenn dieser aus einer Variablen stammt, die per [data-theme] am
   Wurzelelement umgeschaltet wird - der Uebergang wird nicht neu
   ausgewertet und die Farbe haengt fest. Betrifft nicht nur eigene Regeln:
   Divi setzt solche Uebergaenge auf Links, Menues und Buttons.
   main.js setzt die Klasse nur fuer die Dauer des Wechsels. */
.mm-no-transition,
.mm-no-transition *,
.mm-no-transition *::before,
.mm-no-transition *::after {
	transition: none !important;
}

#page-container,
#et-main-area {
	background-color: var(--bg);
}

/* Divi faerbt den Inhaltsbereich und jede Sektion standardmaessig weiss.
   Das ueberdeckt den Seitenhintergrund und bricht den Dunkelmodus.
   Beides wird transparent gelegt, damit --bg durchscheint; Sektionen mit
   einer im Modul gesetzten Farbe ueberschreiben das weiterhin. */
#main-content,
#content-area,
.et_pb_section {
	background-color: transparent;
}

/* Fussbereich hebt sich laut Designsystem leicht ab */
.et_pb_section.mm-footer-section {
	background-color: var(--surface-2);
}

/* Seitenleiste und Widgets */
#sidebar,
#sidebar .widget {
	color: var(--text);
}

#sidebar .widget a {
	color: var(--accent);
}

#sidebar .et_pb_widget h4,
#sidebar .widgettitle {
	color: var(--text);
	font-size: var(--fs-h4);
}

h1, h2, h3, h4, h5, h6 {
	color: var(--text);
	line-height: var(--lh-heading);
	font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

h1 { font-size: var(--fs-h1); font-weight: var(--fw-bold); }
h2 { font-size: var(--fs-h2); font-weight: var(--fw-bold); }
h3 { font-size: var(--fs-h3); font-weight: var(--fw-semi); }
h4 { font-size: var(--fs-h4); font-weight: var(--fw-semi); }

p { line-height: var(--lh-body); }

.mm-lead     { font-size: var(--fs-lead); line-height: var(--lh-body); }
.mm-small    { font-size: var(--fs-small); line-height: 1.6; color: var(--text-muted); }
.mm-muted    { color: var(--text-muted); }
.mm-eyebrow {
	display: inline-block;
	font-size: var(--fs-eyebrow);
	font-weight: var(--fw-semi);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--accent);
}

a {
	color: var(--accent);
	text-decoration: none;
}

a:hover {
	color: var(--accent-600);
	text-decoration: underline;
}

/* Hero-Überschrift größer als die Standard-H1 */
.mm-hero-title { font-size: var(--fs-hero); }

/* Sektionsabstaende - Divi-Sektionen folgen dem fluiden Raster.
   Seitliches Padding, damit Inhalte auf schmalen Viewports nicht am
   Bildschirmrand kleben. */
.et_pb_section {
	padding-top: var(--sp-section);
	padding-bottom: var(--sp-section);
	padding-left: var(--sp-gutter);
	padding-right: var(--sp-gutter);
}

.et_pb_section.mm-section--eng {
	padding-top: var(--sp-section-s);
	padding-bottom: var(--sp-section-s);
}

/* ---------------------------------------------------------------
   Barrierefreiheit: Fokus und Sprungmarke
   --------------------------------------------------------------- */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
	outline: var(--focus-width) solid var(--accent);
	outline-offset: var(--focus-offset);
}

.mm-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
	background: var(--surface);
	color: var(--text);
	border: 2px solid var(--accent);
	border-radius: 8px;
	padding: 12px 20px;
	font-weight: 600;
}

.mm-skip-link:focus {
	position: fixed;
	left: 16px;
	top: 16px;
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		transition: none !important;
		animation: none !important;
	}
}

/* ---------------------------------------------------------------
   Buttons

   Aussehen und Zeigezustand der Knopf-Module liegen in den Divi-
   Voreinstellungen "Primär", "Sekundär", "Dezent" und "Warnung"
   (Modul -> Voreinstellungen, angelegt von tools/set-presets.php).
   Umschalten im Builder: Modul oeffnen, oben die Voreinstellung waehlen.

   Hier steht nur, was daran nicht haengt: Absendeknoepfe in Formularen
   sind fuer Divi keine Knopf-Module und bekommen deshalb kein Preset.
   --------------------------------------------------------------- */

.et_pb_contact_submit,
.et_pb_newsletter_button,
.et_password_protected_form .et_submit_button,
.form-submit .et_pb_button,
button[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--tap-target);
	padding: 13px 22px;
	border-radius: var(--radius-md);
	border: none;
	background: var(--brand-brown-600);
	color: var(--on-brand);
	font-family: 'Inter', system-ui, sans-serif;
	font-size: 15px;
	font-weight: var(--fw-semi);
	line-height: 1.2;
	cursor: pointer;
	transition: background var(--transition-fast), color var(--transition-fast);
}

.et_pb_contact_submit:hover,
.et_pb_newsletter_button:hover,
.et_password_protected_form .et_submit_button:hover,
.form-submit .et_pb_button:hover,
button[type="submit"]:hover {
	background: var(--brand-brown);
	color: var(--on-brand);
	text-decoration: none;
}

button[type="submit"]:disabled,
.et_pb_contact_submit:disabled {
	background: var(--surface-2);
	color: var(--text-muted);
	border: 1.5px solid var(--border);
	cursor: not-allowed;
}

/* Divis Pfeil-Pseudoelement stoert das Padding. Bei den Knopf-Modulen
   erledigt das die Voreinstellung ueber "Symbol anzeigen: aus", die
   Absendeknoepfe der Formulare brauchen es hier. */
.et_pb_contact_submit::after,
.et_pb_contact_submit::before,
.et_pb_newsletter_button::after,
.et_pb_newsletter_button::before {
	display: none;
}

/* ---------------------------------------------------------------
   Formulare
   --------------------------------------------------------------- */

.mm-form {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	max-width: 760px;
}

.mm-form__field {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.mm-form__field--full {
	grid-column: 1 / -1;
}

@media (max-width: 767px) {
	.mm-form { grid-template-columns: 1fr; }
}

label,
.mm-label {
	font-size: 14px;
	font-weight: 600;
	color: var(--text);
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="password"],
input[type="search"],
select,
textarea,
.et_pb_contact_form input,
.et_pb_contact_form textarea {
	padding: 12px 14px;
	min-height: var(--tap-target);
	border: 1.5px solid var(--border-strong);
	border-radius: var(--radius-sm);
	background: var(--surface);
	color: var(--text);
	font-family: 'Inter', system-ui, sans-serif;
	font-size: 15px;
}

textarea {
	resize: vertical;
	min-height: 120px;
}

input:focus,
select:focus,
textarea:focus {
	border-color: var(--accent);
}

input:disabled,
select:disabled,
textarea:disabled {
	background: var(--surface-2);
	color: var(--text-muted);
	cursor: not-allowed;
}

input[type="radio"],
input[type="checkbox"] {
	width: 20px;
	height: 20px;
	accent-color: var(--accent);
}

::placeholder { color: var(--text-muted); opacity: 1; }

fieldset {
	border: 1px solid var(--border);
	border-radius: 10px;
	padding: 14px 16px;
}

legend {
	font-size: 14px;
	font-weight: 600;
	padding: 0 4px;
}

/* Fehlerzustand: Farbe plus Text, nie Farbe allein */
.mm-field-error {
	display: block;
	font-size: 13px;
	font-weight: 600;
	color: var(--danger);
}

.mm-input-error,
input[aria-invalid="true"],
textarea[aria-invalid="true"],
select[aria-invalid="true"] {
	border-color: var(--danger);
}

/* ---------------------------------------------------------------
   Meldungen und Badges
   --------------------------------------------------------------- */

.mm-alert {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	padding: 14px 16px;
	border-radius: var(--radius-md);
	border: 1px solid var(--border);
	background: var(--surface-2);
	font-size: 15px;
	color: var(--text);
}

.mm-alert__icon {
	flex-shrink: 0;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	font-weight: 800;
	color: var(--surface);
	background: var(--info);
}

.mm-alert--info    { background: var(--info-bg);    border-color: var(--info); }
.mm-alert--success { background: var(--success-bg); border-color: var(--success); }
.mm-alert--warning { background: var(--warning-bg); border-color: var(--warning); }
.mm-alert--danger  { background: var(--danger-bg);  border-color: var(--danger); }

.mm-alert--success .mm-alert__icon { background: var(--success); }
.mm-alert--warning .mm-alert__icon { background: var(--warning); }
.mm-alert--danger  .mm-alert__icon { background: var(--danger); }

.mm-badge {
	display: inline-block;
	padding: 6px 14px;
	border-radius: var(--radius-full);
	font-size: 13px;
	font-weight: 600;
	background: var(--surface-2);
	color: var(--text);
	border: 1px solid var(--border);
}

.mm-badge--info    { background: var(--info-bg);    color: var(--info);    border-color: transparent; }
.mm-badge--success { background: var(--success-bg); color: var(--success); border-color: transparent; }
.mm-badge--warning { background: var(--warning-bg); color: var(--warning); border-color: transparent; }
.mm-badge--danger  { background: var(--danger-bg);  color: var(--danger);  border-color: transparent; }

/* ---------------------------------------------------------------
   Karten
   --------------------------------------------------------------- */

/* Kartenoptik - Flaeche, Rahmen, Rundung, Innenabstand und Schatten -
   liegt in der Divi-Voreinstellung "Karte" (Modul -> Voreinstellungen,
   angelegt von tools/set-presets.php). Hier steht nur noch, was Divi
   nicht kann; siehe weiter unten bei .et_pb_blurb.mm-card. */

.mm-card__icon {
	width: 44px;
	height: 44px;
	border-radius: 10px;
	background: var(--info-bg);
	color: var(--accent);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	font-weight: 800;
}

/* ---------------------------------------------------------------
   Kopf- und Fußbereich
   --------------------------------------------------------------- */

#main-header,
.et-l--header {
	background: var(--surface);
	border-bottom: 1px solid var(--border);
}

#main-footer,
.et-l--footer {
	background: var(--surface-2);
	border-top: 1px solid var(--border);
}

#top-menu a,
.et-menu a {
	color: var(--text);
	font-size: 15px;
	font-weight: 500;
}

#top-menu li.current-menu-item > a,
.et-menu li.current-menu-item > a {
	color: var(--text);
	font-weight: 600;
}

/* Logo - Variante folgt dem Farbmodus.
   Markup:
   <span class="mm-logo">
     <img class="mm-logo__light" src=".../img/Logo.svg" alt="Manuel Maag - Gesangspädagoge" />
     <img class="mm-logo__dark"  src=".../img/Logo_DarkVersion.svg" alt="Manuel Maag - Gesangspädagoge" />
   </span>
   Die ausgeblendete Variante wird von Screenreadern nicht vorgelesen. */

/* Hoehe unter Divi -> Design-Variablen -> "Logo-Höhe Kopfzeile" */
.mm-logo {
	display: inline-block;
	height: var(--gvid-mm-logo-hoehe, 44px);
}

/* Kein display auf dem Element-Selektor - sonst schlaegt er die
   Varianten-Klassen und beide Logos bleiben sichtbar. */
.mm-logo img {
	height: 100%;
	width: auto;
}

.mm-logo__light { display: block; }
.mm-logo__dark  { display: none; }

[data-theme="dark"] .mm-logo__light { display: none; }
[data-theme="dark"] .mm-logo__dark  { display: block; }

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .mm-logo__light { display: none; }
	:root:not([data-theme="light"]) .mm-logo__dark  { display: block; }
}

/* Startseite: Hero mit Notenlinien-Motiv laut Designsystem */

.mm-hero {
	position: relative;
	overflow: hidden;
	background-color: var(--surface-2);
	border-bottom: 1px solid var(--border);
	text-align: center;
}

.mm-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: 0.35;
	background-image: repeating-linear-gradient(
		to bottom,
		transparent 0,
		transparent 22px,
		var(--border) 22px,
		var(--border) 23px
	);
	background-position: center;
	background-size: 100% 115px;
	background-repeat: no-repeat;
}

/* Inhalt ueber dem Video */
.mm-hero .et_pb_row {
	position: relative;
	z-index: 1;
}

/* Hintergrundvideo im Einstiegsbereich.
   Es haengt an Divis Sektions-Hintergrund und laesst sich im Visual Builder
   unter Sektion -> Inhalt -> Hintergrund -> Video austauschen.
   Zwei Container, weil Divi je nach Format des Layouts unterschiedlich
   ausgibt: .et_pb_section_video_bg im alten Shortcode-Format,
   .et-pb-background-video im Divi-5-Blockformat. */
.mm-hero .et_pb_section_video_bg,
.mm-hero .et-pb-background-video {
	z-index: 0;
	pointer-events: none;
}

/* WordPress bindet das Hintergrundvideo ueber mediaelement.js ein und
   bringt dafuer eine eigene Spieler-Haut mit - unter anderem einen
   deckenden dunklen Hintergrund am Container (wp-mediaelement.css,
   .mejs-container). Divis eigenes CSS blendet nur Bedienelemente,
   Vorschaubild und Ladeanzeige aus, nicht diesen Hintergrund. Weil das
   Video hier absichtlich auf sehr geringe Deckkraft gesetzt ist (siehe
   unten), schien dieser Kasten sichtbar durch - deshalb transparent. */
.mm-hero .mejs-container,
.mm-hero .mejs-mediaelement,
.mm-hero .mejs-inner,
.mm-hero .mejs-layers {
	background: transparent !important;
}

.mm-hero .et_pb_section_video_bg video,
.mm-hero .et-pb-background-video video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Bewusst sehr zurueckhaltend: Deckkraft niedrig, stark entsaettigt und
	   leicht unscharf. Die Unschaerfe nimmt dem Bild die Detailkanten und
	   laesst es optisch nach hinten treten.
	   Alle drei Werte stehen unter Divi -> Design-Variablen
	   ("Video Deckkraft", "Video Unschärfe", "Video Graustufen"). */
	opacity: var(--gvid-mm-video-deckkraft, 0.12);
	filter: grayscale( var(--gvid-mm-video-graustufen, 65%) )
	        blur( var(--gvid-mm-video-unschaerfe, 2px) );
	/* Der Weichzeichner zieht die Raender ein - minimal ueberskalieren,
	   damit keine hellen Kanten sichtbar werden. */
	transform: scale(1.03);
}

/* Ueber dem Video eine Schicht in der Flaechenfarbe, damit der Text auch
   ueber hellen Bildstellen sicher lesbar bleibt. */
.mm-hero .et_pb_section_video_bg::after,
.mm-hero .et-pb-background-video::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to bottom,
		color-mix(in srgb, var(--surface-2) 82%, transparent),
		color-mix(in srgb, var(--surface-2) 70%, transparent)
	);
}

/* Mit Video treten die Notenlinien zurueck - beides zusammen wird unruhig */
.mm-hero--video::before {
	opacity: 0.15;
}

/* Reduzierte Bewegung: Video noch weiter zuruecknehmen.
   main.js pausiert zusaetzlich die Wiedergabe. */
@media (prefers-reduced-motion: reduce) {
	.mm-hero .et_pb_section_video_bg video,
	.mm-hero .et-pb-background-video video {
		opacity: 0.05;
	}
}

.mm-hero .mm-eyebrow,
.mm-hero .mm-lead {
	text-align: center;
}

/* Die beiden Handlungsaufforderungen nebeneinander statt untereinander.
   Es sind zwei eigenstaendige Divi-Button-Module - Divi setzt Module
   untereinander und bietet dafuer keine Einstellung. Aussehen und
   Beschriftung der Knoepfe kommen aus den Voreinstellungen "Primär" und
   "Sekundär" beziehungsweise aus dem Modul selbst. */
.mm-hero-cta {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
	justify-content: center;
	margin-top: var(--sp-1);
}

.mm-hero-cta .et_pb_button_module_wrapper,
.mm-hero-cta .et_pb_module {
	margin: 0;
}

/* Angebotskarten - Divi-Blurb auf die Kartenoptik ziehen.
   Die ganze Karte ist klickbar: Der Titel-Link wird ueber ein
   Pseudoelement auf die Kartenflaeche gedehnt. Das bleibt ein einzelner
   Link im Markup - Screenreader lesen weiterhin nur den Titel vor.

   Die Ziel-URL kommt aus dem Modul (Feld "Title Link URL"), nur die
   Klickflaeche steckt hier.

   Warum nicht Divis Feld "Modul-Link-URL"? Divi baut daraus keinen Link,
   sondern haengt die Klasse et_clickable ans Modul und bindet den Klick
   per JavaScript (diviElementLinkData). Damit waere die Karte nicht mehr
   mit der Tastatur erreichbar, Screenreader wuerden keinen Link melden,
   Rechtsklick und "in neuem Tab oeffnen" entfielen und Suchmaschinen
   folgten ihr nicht. Der Titel-Link hier ist ein echtes a-Element und
   kann all das. */
.et_pb_blurb.mm-card {
	position: relative;
	height: 100%;
	cursor: pointer;
}

/* Die inneren Divi-Container sind positioniert und wuerden zum Bezugsrahmen
   der Klickflaeche - dann deckt sie nur den Textbereich ab, nicht das
   Kartenpadding. Deshalb hier zuruecksetzen.

   Der Selektor traegt .et_pb_module mit, um Divis eigene Regel
   .et_pb_blurb_0 .et_pb_blurb_content .et_pb_blurb_container zu
   uebertreffen; sie setzt position:relative und steht im Kopfbereich
   nach dieser Datei, waere bei gleicher Gewichtung also staerker. */
.et_pb_blurb.mm-card.et_pb_module .et_pb_blurb_content,
.et_pb_blurb.mm-card.et_pb_module .et_pb_blurb_content .et_pb_blurb_container {
	position: static;
}

.et_pb_blurb.mm-card .et_pb_module_header a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

/* Karten mit Logo (Chorübersicht).
   Die Chorlogos sind fuer helle Hintergruende gezeichnet und tragen
   teils eine weisse Flaeche mit. Auf der dunklen Karte saehe das nach
   aufgeklebtem Rechteck aus - deshalb bekommen sie bewusst ein helles
   Feld mit Rundung, das in beiden Farbmodi gleich aussieht. */
.et_pb_blurb.mm-card--logo .et_pb_main_blurb_image {
	margin-bottom: var(--sp-2);
}

.et_pb_blurb.mm-card--logo .et_pb_main_blurb_image img {
	padding: 12px 16px;
	border-radius: var(--radius-md);
	background-color: #ffffff;
}

/* Fokusring um die gesamte Karte statt nur um den Titel */
.et_pb_blurb.mm-card:focus-within {
	outline: var(--focus-width) solid var(--accent);
	outline-offset: var(--focus-offset);
}

.et_pb_blurb.mm-card .et_pb_module_header a:focus-visible {
	outline: none;
}

/* Groesse der Ueberschrift bleibt hier: sie ist fluid und waere als
   fester Wert in der Voreinstellung auf schmalen Bildschirmen zu gross.
   Alles andere an der Ueberschrift - Schnitt, Farbe, Zeigezustand -
   liefert die Voreinstellung. */
.et_pb_blurb.mm-card .et_pb_module_header {
	font-size: var(--fs-h3);
	padding-bottom: var(--sp-1);
}

/* Divi 5 legt den Beschreibungstext in einen Absatz. Der holt sich die
   Zeilenhoehe aus der allgemeinen p-Regel (1.7) statt sie vom Kartentext
   zu erben - dadurch stuende die Karte hoeher als vorgesehen. */
.et_pb_blurb.mm-card .et_pb_blurb_description p {
	line-height: 1.6;
}

/* Aufzaehlungen im Inhalt - Werdegang, Unterrichtsinhalte, Preismodelle.
   Verwendung: Textmodul -> Erweitert -> CSS-Klasse: mm-liste.
   Die Selektoren tragen .et_pb_text mit, weil Divi im Inhaltsbereich
   .et-l--body ul mit gleicher Gewichtung formatiert. */
.et_pb_text.mm-liste h2 {
	margin-top: var(--sp-6);
	margin-bottom: var(--sp-2);
}

.et_pb_text.mm-liste h2:first-child {
	margin-top: 0;
}

.et_pb_text.mm-liste ul {
	margin: 0 0 var(--sp-2);
	padding: 0 0 0 1.2em;
	list-style: disc;
}

.et_pb_text.mm-liste li {
	margin-bottom: var(--sp-1);
	line-height: var(--lh-body);
	padding-bottom: 0;
}

/* Der Aufzaehlungspunkt in der Akzentfarbe - er gliedert die Liste,
   ohne mit dem Text um Aufmerksamkeit zu konkurrieren. */
.et_pb_text.mm-liste li::marker {
	color: var(--accent);
}

/* Untergeordnete Punkte, etwa die Bedingungen eines Bezahlmodells */
.et_pb_text.mm-liste li > ul {
	margin: var(--sp-1) 0 0;
	padding-left: 1.2em;
	list-style: circle;
}

/* Schlagworte als Reihe von Pillen, etwa die Schwerpunkte der
   Stimmbildung. Verwendung: Textmodul -> Erweitert -> CSS-Klasse:
   mm-schlagworte, Inhalt als normale Aufzaehlung. So bleiben die
   Begriffe im Builder aenderbar und fuer Screenreader lesbar - anders
   als frueher, wo sie in einer Bildgrafik steckten. */
.et_pb_text.mm-schlagworte ul {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-1);
	margin: 0;
	padding: 0;
	list-style: none;
}

.et_pb_text.mm-schlagworte li {
	margin: 0;
	padding: 6px 14px;
	border: 1px solid var(--border);
	border-radius: var(--radius-full);
	background-color: var(--surface-2);
	color: var(--text);
	font-size: var(--fs-small);
	line-height: 1.4;
}


/* Fussbereich - Aufbau laut Designsystem */

.mm-footer__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 36px;
	max-width: 1200px;
	margin: 0 auto;
}

.mm-footer__titel {
	margin: 0 0 12px;
	font-size: var(--fs-small);
	font-weight: var(--fw-semi);
	color: var(--text);
}

/* Der doppelte Klassenselektor ist noetig: Divi setzt im Fussbereich
   .et-l--footer ul { list-style-type: disc; padding: 0 0 23px 1em }, und
   das schlaegt eine einfache Klasse. Ohne diese Regel stuenden Punkte vor
   den Eintraegen, die Liste waere um 1em eingerueckt und haette unten
   einen Absatz, der nicht zum Raster passt. */
.mm-footer .mm-footer__liste,
.mm-footer .mm-footer__liste li {
	list-style: none;
}

.mm-footer .mm-footer__liste {
	margin: 0;
	padding: 0;
}

.mm-footer__liste {
	display: flex;
	flex-direction: column;
	gap: var(--sp-1);
	font-size: var(--fs-small);
}

/* Verweise auf soziale Netzwerke - nur Symbol, ohne Beschriftung.
   Die Flaeche ist bewusst so gross wie die Mindestgroesse fuer
   Bedienelemente, damit sie auf dem Handy sicher zu treffen ist. */
.mm-footer__liste--symbole {
	flex-direction: row;
	gap: var(--sp-1);
}

.mm-social {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--tap-target);
	height: var(--tap-target);
	color: var(--text-muted);
	border-radius: var(--radius-md);
	transition: color var(--transition-fast), background-color var(--transition-fast);
}

.mm-social:hover {
	color: var(--accent);
	background-color: var(--surface);
	text-decoration: none;
}

/* Das Symbol ist etwas hoeher als breit (74:79), deshalb keine feste
   Breite und Hoehe gleich setzen - sonst wird es verzerrt. */
.mm-social__icon {
	display: block;
	width: auto;
	height: 24px;
}

/* Abschlusszeile: Copyright links, Urhebernachweis rechts.
   Unterhalb von 600px stehen beide untereinander, weil sie sonst
   umbrechen und die Zuordnung verlieren. */
.mm-footer__copyright {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: baseline;
	gap: var(--sp-1) var(--sp-3);
	max-width: 1200px;
	margin: var(--sp-4) auto 0;
	padding-top: var(--sp-3);
	border-top: 1px solid var(--border);
	font-size: var(--fs-eyebrow);
	color: var(--text-muted);
}

.mm-footer__copyright p {
	margin: 0;
}

.mm-footer .mm-small {
	color: var(--text-muted);
	margin: 0;
}

.mm-logo--klein {
	height: var(--gvid-mm-logo-hoehe-fuss, 36px);
	margin-bottom: 14px;
}

/* Kopfbereich - Divi-Menuemodul auf das Designsystem ziehen */

.mm-header {
	position: sticky;
	top: 0;
	z-index: 20;
	background: var(--surface);
	border-bottom: 1px solid var(--border);
	/* Divi setzt das Sektionspadding modulspezifisch auf 0 - hier wieder
	   seitlichen Abstand geben, damit Logo und Umschalter nicht am
	   Bildschirmrand kleben. */
	padding-left: var(--sp-gutter);
	padding-right: var(--sp-gutter);
}

/* Logo, Navigation und Umschalter auf einer Grundlinie ausrichten */
.mm-header .et_pb_column {
	display: flex;
	align-items: center;
}

.mm-header .et_pb_column:last-child {
	justify-content: flex-end;
}

.mm-header .et_pb_module {
	margin-bottom: 0;
}

/* Mobiler Kopfbereich.
   Divi stapelt die drei Spalten unterhalb von 980px untereinander, dadurch
   stehen Logo, Menueknopf und Umschalter in drei Zeilen. Hier bleiben sie
   in einer Zeile: Logo links, rechts Umschalter und Menueknopf. */
@media (max-width: 980px) {
	.mm-header .et_pb_row {
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
		gap: 12px;
	}

	.mm-header .et_pb_column {
		width: auto !important;
		margin: 0 !important;
		padding: 0 !important;
	}

	/* Logo nimmt den verbleibenden Platz, darf aber schrumpfen */
	.mm-header .et_pb_column:nth-child(1) {
		flex: 1 1 auto;
		min-width: 0;
	}

	/* Menueknopf ganz nach rechts, Umschalter davor */
	.mm-header .et_pb_column:nth-child(2) {
		flex: 0 0 auto;
		order: 3;
	}

	.mm-header .et_pb_column:nth-child(3) {
		flex: 0 0 auto;
		order: 2;
	}

	.mm-header .mm-logo {
		height: var(--gvid-mm-logo-hoehe-mobil, 36px);
	}

	/* Divis Menueknopf auf Zielgroesse bringen */
	.mm-header .et_mobile_nav_menu {
		float: none;
		margin: 0;
		display: flex;
		align-items: center;
	}

	.mm-header .mobile_menu_bar {
		display: flex;
		align-items: center;
		justify-content: center;
		width: var(--tap-target);
		height: var(--tap-target);
		padding: 0;
	}

	.mm-header .mobile_menu_bar::before {
		top: auto;
		margin: 0;
		color: var(--text);
	}

	/* Aufklappmenue unter der Kopfzeile ueber die volle Breite.
	   Ohne das haengt es in der schmalen Spalte des Menueknopfs und ist
	   nur so breit wie dieser. Bezug ist die Kopfzeile (position:sticky). */
	/* Alle Zwischenebenen entpositionieren, sonst dient die schmale Spalte
	   des Menueknopfs als Bezugsrahmen und das Menue bleibt 44px breit. */
	.mm-header .et_pb_column,
	.mm-header .et_pb_menu,
	.mm-header .et_pb_menu_inner_container,
	.mm-header .et_mobile_nav_menu {
		position: static;
	}

	.mm-header .et_pb_menu .et_mobile_menu {
		position: absolute;
		top: 100%;
		left: 0 !important;
		right: 0 !important;
		width: auto !important;
		max-height: calc(100vh - 100%);
		overflow-y: auto;
	}

	/* Divi faerbt das Aufklappmenue modulspezifisch weiss - hier auf die
	   Flaechenfarbe des Modus ziehen. */
	.mm-header .et_pb_menu .et_mobile_menu,
	.et-l--header .et_pb_menu[class*="et_pb_menu_"] .et_mobile_menu {
		background-color: var(--surface) !important;
		border-top: 2px solid var(--accent);
		box-shadow: var(--shadow-lg);
	}

	.mm-header .et_mobile_menu li a {
		color: var(--text);
		border-bottom: 1px solid var(--border);
		padding: 14px 20px;
	}

	.mm-header .et_mobile_menu li:last-child a {
		border-bottom: 0;
	}
}

/* Divi setzt die Menuefarbe modulspezifisch. Die Farbe bleibt deshalb
   bewusst aus dem Modul heraus und wird hier gesetzt, sonst waere sie
   ein fester Hexwert und im Dunkelmodus nicht lesbar. */
.mm-nav .et-menu > li > a,
.mm-nav .et_pb_menu__menu > nav > ul > li > a,
.et-l--header .et-menu > li > a {
	font-size: 15px;
	font-weight: var(--fw-medium);
	color: var(--text);
	opacity: 1;
	/* Luft nach unten, damit die Eintraege nicht auf der Trennlinie sitzen
	   und die Klickflaeche die Mindestgroesse erreicht. */
	padding-top: 12px;
	padding-bottom: 12px;
}

/* Divi setzt den Abstand zwischen den Eintraegen ueber li - hier
   vereinheitlichen, damit oben und unten gleich viel Luft bleibt. */
.mm-nav .et-menu > li,
.et-l--header .et-menu > li {
	padding-top: 0;
	padding-bottom: 0;
	margin-top: 0;
	margin-bottom: 0;
}

/* Aufklapp-Pfeil auf Texthoehe bringen.
   Divi positioniert ihn mit top:0 relativ zum Link - durch den zusaetzlichen
   Innenabstand oben stand er dadurch zu hoch. */
.et-l--header .et-menu li.menu-item-has-children > a::after,
.mm-nav .et-menu li.menu-item-has-children > a::after {
	top: 50%;
	transform: translateY(-50%);
	margin-top: 0;
	line-height: 1;
}

.mm-nav .et-menu > li.current-menu-item > a,
.mm-nav .et-menu > li.current-menu-ancestor > a,
.et-l--header .et-menu > li.current-menu-item > a {
	font-weight: var(--fw-semi);
	color: var(--accent);
}

/* Mobiles Menue des Divi-Modules */
.mm-nav .et_mobile_menu,
.et-l--header .et_mobile_menu {
	background-color: var(--surface);
	border-top-color: var(--accent);
}

.mm-nav .et_mobile_menu a,
.et-l--header .et_mobile_menu a {
	color: var(--text);
	border-bottom-color: var(--border);
}

.mm-nav .et_pb_menu__icon,
.et-l--header .et_pb_menu__icon {
	color: var(--text);
}

/* Menuemodul selbst ohne Flaeche - die Kopfzeile liefert den Hintergrund.
   Bewusst hier und nicht ueber die Moduleinstellung: Divi schreibt eine dort
   gesetzte Hintergrundfarbe auch auf das Aufklappmenue, und zwar
   modulspezifisch mit !important. Das Untermenue bliebe dann durchsichtig.

   Die Selektoren sind bewusst lang: Divi adressiert seine Module ueber
   Klassen wie .et_pb_menu_0_tb_header und schreibt sie in ein Inline-Style
   im Kopfbereich, das nach dieser Datei geladen wird. */
.et-l--header .mm-nav.et_pb_menu.et_pb_module,
.et-l--header .et_pb_menu[class*="et_pb_menu_"].et_pb_module {
	background-color: transparent !important;
}

/* Untermenue */
.et-l--header .et_pb_menu .et-menu li ul.sub-menu,
.et-l--header .et_pb_menu .nav li ul,
.mm-nav .et-menu li ul.sub-menu {
	background-color: var(--surface) !important;
	border: 1px solid var(--border);
	border-top: 2px solid var(--accent);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-lg);
	padding: var(--sp-1) 0;
	overflow: hidden;
}

.mm-nav .et-menu .sub-menu li,
.et-l--header .et-menu .sub-menu li {
	background-color: transparent;
	border: 0;
}

.mm-nav .et-menu .sub-menu a,
.et-l--header .et-menu .sub-menu a {
	color: var(--text);
	padding: 10px 20px;
	width: auto;
}

/* Beim Ueberfahren wird der Eintrag unterstrichen, nicht hinterlegt.
   Divi legt sonst eine Flaeche unter den Eintrag. */
.mm-nav .et-menu .sub-menu a:hover,
.et-l--header .et-menu .sub-menu a:hover,
.mm-nav .et-menu .sub-menu a:focus-visible,
.et-l--header .et-menu .sub-menu a:focus-visible {
	background-color: transparent;
	text-decoration: underline;
	opacity: 1;
}

/* Umschalter Hell-/Dunkelmodus - nur Symbol, ohne Beschriftung.
   Der Knopf traegt aria-label und title, main.js haelt beide aktuell. */
.mm-mode-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--tap-target);
	height: var(--tap-target);
	padding: 0;
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-full);
	background: var(--surface-2);
	color: var(--text);
	cursor: pointer;
	flex-shrink: 0;
}

.mm-mode-toggle:hover {
	border-color: var(--accent);
	color: var(--accent);
}

.mm-mode-toggle__icon {
	display: block;
	width: 22px;
	height: 22px;
}

/* Gezeigt wird das Ziel des Wechsels: im Hellmodus der Mond,
   im Dunkelmodus die Sonne. */
.mm-mode-toggle__icon--sonne { display: none; }
.mm-mode-toggle__icon--mond  { display: block; }

[data-theme="dark"] .mm-mode-toggle__icon--sonne { display: block; }
[data-theme="dark"] .mm-mode-toggle__icon--mond  { display: none; }

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .mm-mode-toggle__icon--sonne { display: block; }
	:root:not([data-theme="light"]) .mm-mode-toggle__icon--mond  { display: none; }
}

/* ---------------------------------------------------------------
   Animation "Ist Gesangsunterricht etwas für mich?"

   Ersetzt den Export aus Claude Design, der als Rahmen eingebunden war.
   Der Export war ein starres Bild von 1920x1080, das als Ganzes
   skaliert wurde - auf dem Telefon landete der Fliesstext dadurch bei
   rund 4.5px. Hier ist jeder Text ein eigenes Element mit eigener
   Groessenregel, der Block waechst mit seinem Inhalt.

   Die Szenen liegen uebereinander in einer Rasterzelle statt absolut
   positioniert: so ist der Block immer so hoch wie seine laengste
   Szene und nichts wird abgeschnitten.
   --------------------------------------------------------------- */

.mm-buehne {
	/* Hoehe des Bandes, in dem die Wellenlinie liegt. Der Block haelt
	   unten so viel Abstand frei, dass kein Text hineinragt - sonst
	   laeuft die Linie als Durchstreichung durch die Absaetze. */
	--welle-hoehe: clamp(110px, 12vw, 180px);

	position: relative;
	overflow: hidden;
	background: var(--bg);
	color: var(--text);
	padding: clamp(28px, 4vw, 64px) clamp(20px, 5vw, 96px)
	         calc(var(--welle-hoehe) + clamp(16px, 2vw, 32px));
}

/* Die Wellenlinie laeuft ueber die volle Breite, der Text nicht: er wird
   auf dieselben 1100px begrenzt wie die Divi-Reihen der Abschnitte
   darunter. Weil beides mittig sitzt, fluchten die linken Kanten. */
.mm-buehne__kopf,
.mm-buehne__szenen {
	max-width: 1100px;
	margin-left: auto;
	margin-right: auto;
}

/* Wellenlinie, unten im eigenen Band. preserveAspectRatio="none" zieht
   das viewBox darauf - bei einer abstrakten Welle faellt das nicht auf.
   Damit die Linienstaerke davon unberuehrt bleibt, haengt an den Pfaden
   vector-effect="non-scaling-stroke". */
.mm-buehne__welle {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: var(--welle-hoehe);
	pointer-events: none;
}

.mm-buehne__welle path {
	fill: none;
	stroke-linecap: round;
}

.mm-buehne__welle path:nth-of-type(1) { stroke: var(--accent);      stroke-width: 3.5; opacity: 0.9;  }
.mm-buehne__welle path:nth-of-type(2) { stroke: var(--accent);      stroke-width: 2.5; opacity: 0.4;  }
.mm-buehne__welle path:nth-of-type(3) { stroke: var(--brand-brown); stroke-width: 2;   opacity: 0.22; }

.mm-buehne__kopf {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: clamp(24px, 3vw, 56px);
}

.mm-buehne__marke {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	font-size: clamp(11px, 1vw, 15px);
	font-weight: var(--fw-bold);
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--brand-brown);
}

.mm-buehne__punkt {
	width: 10px;
	height: 10px;
	border-radius: var(--radius-full);
	background: var(--accent);
	flex-shrink: 0;
}

.mm-buehne__name {
	margin: 0;
	font-size: clamp(10px, 0.9vw, 14px);
	font-weight: var(--fw-semi);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--text-muted);
}

/* Grundzustand ist der ruhende Textblock: alle Szenen untereinander,
   alles sichtbar. So bleibt der Inhalt lesbar, wenn kein JavaScript
   laeuft - er ist auf dieser Seite die einzige Fassung dieser Absaetze.
   Die Bewegung setzt das Skript obendrauf, indem es mm-buehne--bewegt
   setzt. */
.mm-buehne__szenen {
	position: relative;
}

.mm-buehne__szene {
	display: flex;
	flex-direction: column;
	gap: clamp(10px, 1.2vw, 24px);
	margin-bottom: clamp(24px, 3vw, 48px);
}

.mm-buehne__szene:last-child { margin-bottom: 0; }

.mm-buehne__szene > * {
	margin: 0;
	text-wrap: pretty;
}

/* Bewegter Zustand: die Szenen liegen uebereinander in einer
   Rasterzelle. Der Block ist damit immer so hoch wie seine laengste
   Szene, nichts wird abgeschnitten und nichts springt beim Wechsel. */
.mm-buehne--bewegt .mm-buehne__szenen {
	display: grid;
	align-items: start;
	min-height: clamp(180px, 20vw, 320px);
}

/* Die Szenen liegen uebereinander, es darf also immer nur die vordere
   auf Klicks reagieren. Das Skript setzt beim Szenenwechsel um. */
.mm-buehne--bewegt .mm-buehne__szene {
	grid-area: 1 / 1;
	margin-bottom: 0;
	pointer-events: none;
}

/* Ausgangswerte der Bewegung. Das Skript schreibt Deckkraft und
   Verschiebung je Bild direkt an die Elemente. */
.mm-buehne--bewegt .mm-buehne__szene > * {
	opacity: 0;
	transform: translateY(34px);
}

.mm-buehne__gross {
	font-size: clamp(30px, 5vw, 76px);
	font-weight: var(--fw-bold);
	line-height: 1.1;
	letter-spacing: -0.01em;
}

/* Die Ueberschrift laeuft ueber zwei Zeilen, deren zweite abgesetzt ist.
   Als ein Element statt zweier, damit sie eine H1 sein kann. */
.mm-buehne__gross span { display: block; }

.mm-buehne__mittel {
	font-size: clamp(24px, 3.8vw, 58px);
	font-weight: var(--fw-bold);
	line-height: 1.15;
	letter-spacing: -0.01em;
}

.mm-buehne__text {
	font-size: clamp(15px, 1.8vw, 28px);
	line-height: 1.6;
	color: var(--text-muted);
	max-width: 34em;
}

.mm-buehne__kennzeichnung {
	font-size: clamp(11px, 1.1vw, 18px);
	font-weight: var(--fw-bold);
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--accent);
}

.mm-buehne__akzent { color: var(--brand-brown); }

.mm-buehne__strich {
	width: 120px;
	height: 3px;
	background: var(--accent);
	border: 0;
}

.mm-buehne__absatz {
	font-size: clamp(15px, 1.4vw, 22px);
	line-height: 1.55;
	color: var(--text-muted);
	max-width: 46em;
}

.mm-buehne__absatz--zuerst {
	font-weight: var(--fw-bold);
	color: var(--text);
}

/* Knopf am Ende der Animation. Aussehen wie die Divi-Voreinstellung
   "Primär", nur etwas mitwachsend - er steht neben deutlich groesserem
   Text als die Knoepfe im uebrigen Seiteninhalt. */
.mm-buehne__knopf {
	align-self: flex-start;
	display: inline-block;
	padding: clamp(12px, 1vw, 16px) clamp(22px, 2vw, 30px);
	border: 2px solid var(--brand-brown-600);
	border-radius: var(--radius-md);
	background: var(--brand-brown-600);
	color: var(--on-brand);
	font-size: clamp(15px, 1.2vw, 18px);
	font-weight: var(--fw-bold);
	line-height: 1.2;
	text-decoration: none;
}

.mm-buehne__knopf:hover,
.mm-buehne__knopf:focus-visible {
	background: var(--brand-brown);
	border-color: var(--brand-brown);
	color: var(--on-brand);
	text-decoration: none;
}

/* Nach WCAG 2.2.2 braucht Bewegung, die laenger als fuenf Sekunden von
   allein laeuft, eine Moeglichkeit zum Anhalten. 44px ist die kleinste
   Flaeche nach WCAG 2.5.8, --border-strong erreicht die 3:1 aus
   WCAG 1.4.11 fuer die Begrenzung eines Bedienelements. */
.mm-buehne__pause {
	display: none;
	position: absolute;
	right: clamp(12px, 2vw, 28px);
	bottom: clamp(12px, 2vw, 28px);
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-full);
	background: var(--surface);
	color: var(--text);
	cursor: pointer;
}

.mm-buehne__pause:hover {
	background: var(--surface-2);
	border-color: var(--accent);
	color: var(--accent);
}

.mm-buehne__pause svg {
	display: block;
	width: 14px;
	height: 14px;
}

/* Der Knopf gehoert zur Bewegung und erscheint mit ihr. Wer Bewegung im
   System abgewaehlt hat oder kein JavaScript nutzt, sieht den ruhenden
   Textblock - dort gibt es nichts anzuhalten. */
.mm-buehne--bewegt .mm-buehne__pause { display: inline-flex; }

.mm-buehne__pause[data-laeuft="true"]  .mm-buehne__ikon--start { display: none; }
.mm-buehne__pause[data-laeuft="false"] .mm-buehne__ikon--pause { display: none; }

/* ---------------------------------------------------------------
   Beitragsliste (Blog)

   Divi gestaltet die Karten seines Blog-Rasters ueber eigenes CSS und
   bietet dafuer keine Einstellung im Builder: Flaeche fest auf #fff,
   Rahmen auf #d8d8d8, keine Eckenrundung. Im Dunkelmodus stand damit
   fast weisse Schrift auf weisser Flaeche - rund 1,06:1.

   Alles, was der Builder kann (Schriftfarben, Datumsformat, Abstaende),
   steht weiterhin im Modul, siehe tools/set-blog.php.
   --------------------------------------------------------------- */

.mm-blog .et_pb_post {
	display: flex;
	flex-direction: column;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	/* Damit das Bild die oberen Ecken mitrundet. */
	overflow: hidden;
	padding: 0 0 24px;
}

/* Das Bild sitzt buendig oben und bleibt vollstaendig sichtbar. Ein
   fester Zuschnitt haette die Karten gleichmaessiger gemacht, schnitt
   aber Beitragsbilder an, die den Inhalt tragen - etwa abfotografierte
   Briefe. */
.mm-blog .et_pb_image_container {
	margin: 0 0 20px;
}

.mm-blog .et_pb_image_container img {
	display: block;
	width: 100%;
	height: auto;
}

.mm-blog .entry-title,
.mm-blog .post-meta,
.mm-blog .post-content {
	padding-left: 24px;
	padding-right: 24px;
}

/* .et_pb_post mit im Selektor, weil Divi die Groesse ueber
   ".et_grid_module > .et_pb_post h2" auf 18px setzt - eine Stufe
   staerker als zwei Klassen. */
.mm-blog .et_pb_post .entry-title {
	font-size: var(--fs-h3);
	line-height: 1.25;
	padding-bottom: 6px;
}

.mm-blog .et_pb_post .entry-title a {
	color: inherit;
	text-decoration: none;
}

.mm-blog .et_pb_post .entry-title a:hover {
	color: var(--accent);
}

.mm-blog .post-meta {
	font-size: var(--fs-small);
	padding-bottom: 12px;
}

/* Divi faerbt "mehr lesen" zusammen mit dem Anrisstext gedaempft ein,
   ueber ".et_pb_blog_0_tb_body .et_pb_post .post-content *" und mit
   !important. Das ist dasselbe Gewicht wie drei Klassen und steht im
   Dokument nach dieser Datei - daher hier eine Klasse mehr und ebenfalls
   !important. Ohne das saehe der einzige Handlungsaufruf der Karte aus
   wie Fliesstext. */
.mm-blog .et_pb_post .post-content .more-link {
	display: inline-block;
	margin-top: 12px;
	color: var(--accent) !important;
	font-weight: var(--fw-semi);
	text-decoration: none;
}

.mm-blog .et_pb_post .post-content .more-link:hover {
	color: var(--accent-600) !important;
	text-decoration: underline;
}

/* ---------------------------------------------------------------
   Seitenleiste (Beitragsseite)

   Divis Seitenleisten-Modul liefert die Widgets aus dem Bereich
   "Sidebar". Bestueckt wird der in tools/set-blog.php: Kategorien,
   Archiv und Schlagwoerter, wie auf der bisherigen Website.
   --------------------------------------------------------------- */

.mm-sidebar .et_pb_widget {
	margin-bottom: 36px;
}

.mm-sidebar .et_pb_widget:last-child {
	margin-bottom: 0;
}

.mm-sidebar .widgettitle {
	margin-bottom: 12px;
	font-size: var(--fs-h4);
	font-weight: var(--fw-semi);
	color: var(--text);
}

/* Divi setzt in Listen der Seitenleiste Aufzaehlungspunkte und einen
   Einzug. Hier sind es Verweise, keine Aufzaehlung. */
.mm-sidebar ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.mm-sidebar li {
	padding: 6px 0;
	border-bottom: 1px solid var(--border);
	list-style: none;
}

.mm-sidebar li:last-child {
	border-bottom: 0;
}

/* Divi faerbt saemtliche Verweise der Seitenleiste ueber
   ".et_pb_sidebar_0_tb_body.et_pb_widget_area a" mit !important in der
   Fliesstextfarbe des Moduls. Auf der bisherigen Website waren sie
   deshalb grau - hier folgen sie dem Designsystem und sind wie alle
   anderen Verweise der Website in der Akzentfarbe. Dafuer braucht es
   eine Klasse mehr und ebenfalls !important. */
.mm-sidebar .et_pb_widget li a,
.mm-sidebar .et_pb_widget .tagcloud a {
	color: var(--accent) !important;
	text-decoration: none;
}

.mm-sidebar .et_pb_widget li a:hover {
	color: var(--accent-600) !important;
	text-decoration: underline;
}

/* Kleiner gesetzt, weil hinter jedem Eintrag noch die Anzahl steht.
   Die Farbe bleibt bewusst die Fliesstextfarbe: Divi setzt sie ueber
   ".et_pb_sidebar_0_tb_body.et_pb_widget_area li" mit !important, und
   !important schlaegt jede Spezifitaet. Ein drittes !important nur fuer
   einen Grauton waere die Fragilitaet nicht wert - der Kontrast stimmt
   ohnehin (16,13:1 hell, 14,87:1 dunkel). */
.mm-sidebar .et_pb_widget.widget_categories li,
.mm-sidebar .et_pb_widget.widget_archive li {
	font-size: var(--fs-small);
}

/* Schlagwortwolke: Divi gibt jedem Eintrag eine eigene Schriftgroesse
   nach Haeufigkeit. Bei 112 Schlagwoertern wird das unruhig - deshalb
   einheitlich als kleine Plaketten. */
.mm-sidebar .tagcloud {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.mm-sidebar .tagcloud a {
	font-size: var(--fs-small) !important;
	padding: 4px 10px;
	border: 1px solid var(--border);
	border-radius: var(--radius-full);
	text-decoration: none;
}

.mm-sidebar .tagcloud a:hover {
	border-color: var(--accent);
	text-decoration: underline;
}

/* ---------------------------------------------------------------
   Beitragsinhalt mit eigenem Divi-Layout

   17 der 28 Beitraege wurden seinerzeit mit dem Divi-Builder gebaut und
   bringen eigene Sektionen und Reihen mit. Divi gibt seinen Reihen 80%
   Breite - in der schon auf 760px begrenzten Inhaltsspalte der
   Beitragsvorlage bleiben davon 608px, mittig gesetzt. Der Text stand
   dadurch schmaler und eingerueckt gegenueber Ueberschrift,
   Beitragsbild und Knopf.

   Zwei Klassen schlagen Divis einzelne. Der Eingriff greift nur
   innerhalb des Inhaltsmoduls; Reihen im uebrigen Seitenaufbau bleiben
   unberuehrt.
   --------------------------------------------------------------- */

.et_pb_post_content .et_pb_row {
	width: 100%;
	max-width: none;
}

/* Dieselbe Doppelung beim seitlichen Abstand: die Sektionen aus dem
   Beitrag liegen bereits in der Sektion der Vorlage, deren Abstand gilt
   schon. Ein zweiter schob den Text auf schmalen Bildschirmen um 20px
   gegenueber Ueberschrift und Beitragsbild ein. */
.et_pb_post_content .et_pb_section {
	padding-left: 0;
	padding-right: 0;
}