/*
 * MUCBOOK Design-System
 * CMS-ADMINS, 2026-09-08
 *
 * Diese Datei enthaelt ausschliesslich das System: Farben, Typografie, Abstaende,
 * Karten, Schaltflaechen und die Angleichung der Fremdbereiche. Reparaturen an
 * einzelnen Fehlern stehen weiterhin in mucbook-fixes.css.
 *
 * Ladeordnung: Beide Dateien werden vom MU-Plugin 02-mucbook-layout-fixes.php erst
 * bei wp_head mit Prioritaet 102 ausgegeben, also nach der Customizer-Ebene des
 * Kerns (Prioritaet 101) und nach den Sabai-Stylesheets. Dadurch gewinnt hier
 * normale Spezifitaet, und !important bleibt auf die Faelle beschraenkt, in denen
 * die Gegenseite selbst !important benutzt oder JavaScript einen Inline-Stil setzt.
 *
 * Regel fuer diese Datei: Jede Regel, die !important benutzt, traegt darueber
 * einen Kommentar, der mit "uebersteuert:" beginnt und die Gegenseite benennt.
 * Pruefbar mit: jeder Fundstelle von !important geht ein solcher Kommentar
 * voraus, und es gibt keinen Kommentar ohne zugehoerige Regel.
 */

/* ==========================================================================
   1. Grundwerte
   ========================================================================== */

:root {
	/* --- Marke ---
	 * Der Ton des Logos ist #50bccd. Er traegt auf Weiss nur 2,4:1 Kontrast und
	 * eignet sich deshalb fuer Flaechen, nicht fuer Text. Fuer Text und Links
	 * gibt es ein dunkleres Geschwister mit 5,1:1.
	 * Ersetzt die bisherigen sechs Toene: 50bccd, 33cccc, 55bccc, 3cc3cf,
	 * 43B9C3 und 46BAC2.
	 */
	--mb-tuerkis:      #50bccd;
	--mb-tuerkis-dark: #3aa3b4;
	--mb-tuerkis-text: #0d7a83;
	--mb-tuerkis-hell: #eaf7f9;

	/* --- Text ---
	 * Ersetzt die bisherigen fuenf Graustufen: 666666, 303030, 444, 111, 404040.
	 */
	--mb-text:       #1f1f1f;
	--mb-text-lauf:  #3a3a3a;
	--mb-text-leise: #6a6a6a;
	--mb-linie:      rgba( 0, 0, 0, 0.12 );
	--mb-flaeche:    #f6f6f6;

	/* --- Schrift ---
	 * Zwei Familien statt fuenf. BrandonText war nie geladen, montserrat nie
	 * eingebunden, Helvetica und die Systemschrift waren Ausrutscher.
	 */
	--mb-serif: "PT Serif", Georgia, "Times New Roman", serif;
	--mb-sans:  "Raleway", "Helvetica Neue", Arial, sans-serif;

	/* --- Typo-Skala, acht Stufen ---
	 * clamp() statt Media Queries: im Bestand gibt es fuenf verschiedene
	 * Haltepunkte, und style_dynamic_responsive.css enthaelt keine einzige
	 * Groessenangabe. Mit clamp() skaliert die Skala stufenlos und ohne Bruch.
	 * Bewusst px statt rem: Bridge setzt body auf 18px, html bleibt bei 16px.
	 */
	--mb-t-display: clamp( 36px, 28px + 2.2vw, 56px );
	--mb-t-1:       clamp( 30px, 25px + 1.4vw, 40px );
	--mb-t-2:       clamp( 26px, 23px + 0.8vw, 32px );
	--mb-t-3:       clamp( 21px, 19px + 0.4vw, 24px );
	--mb-t-4:       clamp( 18px, 17px + 0.2vw, 20px );
	--mb-t-lauf:    clamp( 17px, 16px + 0.1vw, 18px );
	--mb-t-klein:   15px;
	--mb-t-meta:    13px;

	/* --- Abstandsraster, Vielfache von vier --- */
	--mb-abstand-1: 4px;
	--mb-abstand-2: 8px;
	--mb-abstand-3: 16px;
	--mb-abstand-4: 24px;
	--mb-abstand-5: 40px;
	--mb-abstand-6: 64px;
	--mb-abstand-7: 96px;
}

/* ==========================================================================
   2. Ueberschriften
   ==========================================================================
   Die Selektorlisten sind woertlich aus style_dynamic.css uebernommen. Eine
   Regel auf blosses h1 haette Spezifitaet 0,0,1 gegen 0,1,1 und wuerde
   innerhalb von .title verlieren.
   ========================================================================== */

h1, .h1, .title h1 {
	font-family: var( --mb-serif );
	font-size: var( --mb-t-1 );
	line-height: 1.15;
	font-style: normal;
	font-weight: 600;
	color: var( --mb-text );
}

/* Die kursive PT Serif ist das Erkennungsmerkmal des Auftritts und bleibt.
   Die bisherige Zeilenhoehe 1.4empx war ungueltiges CSS und wurde verworfen. */
h2, .h2, h2 a {
	font-family: var( --mb-serif );
	font-size: var( --mb-t-2 );
	line-height: 1.20;
	font-style: italic;
	font-weight: 400;
	letter-spacing: 0;
	color: var( --mb-text );
}

/* h3 war mit 34px fast so gross wie h1 und damit der Hauptgrund fuer die
   fehlende Hierarchie. Sie wird zur Rubrikzeile in der Serifenlosen. */
h3, .h3, h3 a {
	font-family: var( --mb-sans );
	font-size: var( --mb-t-3 );
	line-height: 1.30;
	font-style: normal;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var( --mb-text );
}

h4, .h4, h4 a {
	font-family: var( --mb-serif );
	font-size: var( --mb-t-4 );
	line-height: 1.35;
	font-weight: 600;
	color: var( --mb-text );
}

h5, .h5, h5 a, .q_icon_with_title .icon_text_holder h5.icon_title {
	font-family: var( --mb-serif );
	font-size: var( --mb-t-4 );
	line-height: 1.35;
	font-style: italic;
	font-weight: 400;
	color: var( --mb-text );
}

h6, .h6, h6 a {
	font-family: var( --mb-sans );
	font-size: var( --mb-t-klein );
	line-height: 1.50;
	font-style: normal;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var( --mb-text-leise );
}

/* ==========================================================================
   3. Lauftext und Verweise
   ========================================================================== */

body {
	font-family: var( --mb-sans );
	font-size: var( --mb-t-lauf );
	color: var( --mb-text-lauf );
}

p {
	font-family: var( --mb-serif );
	font-size: var( --mb-t-lauf );
	line-height: 1.60;
	color: var( --mb-text-lauf );
}

.post_text p,
.wpb_text_column p,
.post_excerpt,
.excerpt {
	font-family: var( --mb-serif );
	line-height: 1.60;
	color: var( --mb-text-lauf );
}

a {
	color: var( --mb-tuerkis-text );
}

/* uebersteuert: bridge/css/stylesheet.min.css setzt a:hover mit !important auf
   rgb(157,157,157). Auf farbigen Flaechen entsteht damit ein Kontrastproblem. */
a:hover,
a:focus {
	color: var( --mb-tuerkis-dark ) !important;
}

/* Meta-Angaben: Datum, Verfasser, Brotkrumen */
.post_infos,
.post_info,
.time,
.date,
.wp_rp_publish_date,
.mucbook-brotkrumen {
	font-family: var( --mb-sans );
	font-size: var( --mb-t-meta );
	line-height: 1.50;
	letter-spacing: 0.04em;
	color: var( --mb-text-leise );
}

/* Das Hauptmenue gehoert zur Serifenlosen, nicht zur defekten BrandonText. */
.main_menu > ul > li > a,
nav.mobile_menu ul li a,
.side_menu .widget_nav_menu ul li a {
	font-family: var( --mb-sans );
}

/* ==========================================================================
   4. Bindeglieder zu Theme- und Baukasten-Komponenten
   ==========================================================================
   Diese Komponenten bringen eigene Groessen mit, teils ueber Selektoren mit
   hoeherer Spezifitaet als eine blosse Elementregel. Elementor gibt sein
   Kit-Stylesheet mit .elementor-kit-196935 a auf jeder Seite aus, auch dort, wo
   gar kein Elementor-Inhalt steht. Bis das in einer spaeteren Etappe abgestellt
   ist, brauchen die betroffenen Stellen hier ausreichende Spezifitaet.
   ========================================================================== */

/* Beitragskacheln auf der Startseite und in WPBakery-Elementen */
.latest_post_holder .latest_post_title,
.latest_post_holder .latest_post_title a,
.latest_post_holder h5.latest_post_title a {
	font-family: var( --mb-serif );
	font-size: var( --mb-t-4 );
	line-height: 1.35;
	font-style: italic;
	font-weight: 400;
	color: var( --mb-text );
}

.latest_post_holder .latest_post_title a:hover {
	color: var( --mb-tuerkis-text );
}

/* Rubrikzeile ueber dem Kacheltitel */
.latest_post_holder .latest_post_text_inner h6,
.latest_post_holder .latest_post_text_inner h6 a {
	font-family: var( --mb-sans );
	font-size: var( --mb-t-meta );
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var( --mb-text-leise );
}

/* Kacheln in den Archiven */
.blog_holder article .post_text_inner h5,
.blog_holder article .post_text_inner h5 a {
	font-family: var( --mb-serif );
	font-size: var( --mb-t-4 );
	line-height: 1.35;
	font-style: italic;
	font-weight: 400;
	color: var( --mb-text );
}

.blog_holder article .post_text_inner h6,
.blog_holder article .post_text_inner h6 a {
	font-family: var( --mb-sans );
	font-size: var( --mb-t-meta );
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var( --mb-text-leise );
}

/* Ueberschriften innerhalb der WPBakery-Wrapper */
.wpb_wrapper h1, .wpb_wrapper h1 a { font-family: var( --mb-serif ); font-size: var( --mb-t-1 ); line-height: 1.15; }
.wpb_wrapper h2, .wpb_wrapper h2 a { font-family: var( --mb-serif ); font-size: var( --mb-t-2 ); line-height: 1.20; font-style: italic; }
.wpb_wrapper h3, .wpb_wrapper h3 a { font-family: var( --mb-sans );  font-size: var( --mb-t-3 ); line-height: 1.30; }
.wpb_wrapper h4, .wpb_wrapper h4 a { font-family: var( --mb-serif ); font-size: var( --mb-t-4 ); line-height: 1.35; }
.wpb_wrapper h5, .wpb_wrapper h5 a { font-family: var( --mb-serif ); font-size: var( --mb-t-4 ); line-height: 1.35; font-style: italic; }

/* Der Beitragstitel auf der Einzelseite */
.title h1,
.blog_single .post_title h2,
.blog_single .post_title h2 a {
	font-family: var( --mb-serif );
	font-size: var( --mb-t-1 );
	line-height: 1.15;
	font-style: italic;
	color: var( --mb-text );
}

/* Verweis "zum Artikel" unter den Kacheln */
.latest_post_holder .latest_post_text_inner > a,
.blog_holder article .post_text_inner > a {
	font-family: var( --mb-sans );
	font-size: var( --mb-t-meta );
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none;
	border-bottom: 1px solid currentColor;
	padding-bottom: 2px;
}

.latest_post_holder .latest_post_text_inner > a u,
.blog_holder article .post_text_inner > a u {
	text-decoration: none;
}

/* ==========================================================================
   5. Vertikaler Rhythmus
   ==========================================================================
   Alle Abstaende sind Vielfache von vier. Vorher standen im Bestand Werte wie
   22 Prozent, minus 3 Pixel und minus 50 Pixel nebeneinander.
   ========================================================================== */

.content_inner h1, .content_inner h2, .content_inner h3,
.content_inner h4, .content_inner h5, .content_inner h6 {
	margin-top: var( --mb-abstand-5 );
	margin-bottom: var( --mb-abstand-3 );
}

.content_inner h1:first-child, .content_inner h2:first-child,
.content_inner h3:first-child, .content_inner h4:first-child {
	margin-top: 0;
}

.post_text p,
.wpb_text_column p {
	margin-top: 0;
	margin-bottom: var( --mb-abstand-4 );
}

.post_text ul, .post_text ol,
.wpb_text_column ul, .wpb_text_column ol {
	margin-bottom: var( --mb-abstand-4 );
	line-height: 1.60;
}

.post_text li,
.wpb_text_column li {
	margin-bottom: var( --mb-abstand-2 );
}

.post_text blockquote,
.wpb_text_column blockquote {
	margin: var( --mb-abstand-5 ) 0;
	padding: var( --mb-abstand-4 ) 0;
	border-top: 1px solid var( --mb-linie );
	border-bottom: 1px solid var( --mb-linie );
	font-style: italic;
	color: var( --mb-text );
}

/* ==========================================================================
   6. Schaltflaechen
   ==========================================================================
   Bisher brachte jede Erweiterung ihre eigene Form mit, dazu eine globale Regel
   in der Customizer-Ebene, die jedes button-Element tuerkis faerbte und auf
   font-size x-small setzte. Diese Regel ist entfallen, hier steht der Ersatz.
   Scharfe Kanten, keine Radien, keine Akzentlinien.
   ========================================================================== */

.qbutton,
a.qbutton,
a.shop-button,
button,
input[type="submit"],
input[type="button"],
.wpcf7-submit,
.sabai .sabai-btn-primary {
	display: inline-block;
	box-sizing: border-box;
	min-height: 44px;
	padding: 12px var( --mb-abstand-4 );
	border: 1px solid var( --mb-tuerkis-text );
	border-radius: 0;
	background-color: var( --mb-tuerkis-text );
	color: #fff;
	font-family: var( --mb-sans );
	font-size: var( --mb-t-meta );
	font-weight: 600;
	line-height: 20px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	text-shadow: none;
	box-shadow: none;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

/* uebersteuert: bridge/css/stylesheet.min.css setzt a:hover mit !important. */
.qbutton:hover,
a.qbutton:hover,
a.shop-button:hover,
button:hover,
input[type="submit"]:hover,
.wpcf7-submit:hover,
.sabai .sabai-btn-primary:hover {
	background-color: var( --mb-tuerkis-dark );
	border-color: var( --mb-tuerkis-dark );
	color: #fff !important;
}

/* Zweitrangige Schaltflaeche: gleiche Form, ohne Flaeche */
.qbutton.white,
a.qbutton.white,
.sabai .sabai-btn-default {
	background-color: transparent;
	border-color: var( --mb-text );
	color: var( --mb-text );
}

/* Die Schaltflaechen im Adminbereich bleiben unberuehrt. */
#wpadminbar button,
#wpadminbar input[type="submit"],
.wp-core-ui button,
.wp-core-ui input[type="submit"] {
	min-height: 0;
	padding: revert;
	border: revert;
	background-color: revert;
	color: revert;
	font-size: revert;
	text-transform: none;
	letter-spacing: normal;
}

/* ==========================================================================
   7. Formularfelder
   ========================================================================== */

input[type="text"],
input[type="email"],
input[type="url"],
input[type="tel"],
input[type="search"],
input[type="password"],
input[type="number"],
select,
textarea,
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 textarea {
	box-sizing: border-box;
	min-height: 44px;
	padding: 10px 12px;
	border: 1px solid var( --mb-linie );
	border-radius: 0;
	background-color: #fff;
	font-family: var( --mb-sans );
	font-size: var( --mb-t-klein );
	line-height: 1.4;
	color: var( --mb-text );
}

textarea {
	min-height: 140px;
	line-height: 1.6;
}

input:focus,
select:focus,
textarea:focus {
	outline: 2px solid var( --mb-tuerkis-text );
	outline-offset: 1px;
	border-color: var( --mb-tuerkis-text );
}

label {
	font-family: var( --mb-sans );
	font-size: var( --mb-t-meta );
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var( --mb-text );
}

/* ==========================================================================
   8. Karten in den Archiven
   ==========================================================================
   Die Beitragsbilder werden in der Groesse medium ausgeliefert, die mit 300 mal
   300 registriert und nicht hart beschnitten ist. Jedes Bild hat deshalb ein
   anderes Seitenverhaeltnis, gemessen von 0,68 bis 1,50. Statt 38.085 Medien neu
   zu schneiden, uebernimmt das der Browser.
   ========================================================================== */

.blog_holder article .post_image,
.blog_holder article .post_image a,
.latest_post_holder .latest_post_image,
.latest_post_holder .latest_post_image a {
	display: block;
	overflow: hidden;
}

.blog_holder article .post_image img,
.latest_post_holder .latest_post_image img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	/* Etwas oberhalb der Mitte: bei Hochformaten liegen Gesichter im oberen
	   Drittel. Kalibrierwert, bei Bedarf zwischen 30% und 50% nachziehen. */
	object-position: center 38%;
}

/* Die Titel laufen vollstaendig aus. Zuvor stand hier eine Begrenzung auf drei
   Zeilen. Sie hat bei laengeren Titeln die vierte Zeile angeschnitten stehen
   lassen, weil overflow erst an der Aussenkante der Innenabstaende schneidet.
   Die Kartenhoehen sind ohnehin nicht angeglichen, die Begrenzung hat also
   nichts gewonnen. */

.blog_holder article .post_text_inner,
.latest_post_holder .latest_post_text_inner {
	padding-top: var( --mb-abstand-3 );
}

.blog_holder article .post_text_inner h6,
.latest_post_holder .latest_post_text_inner h6 {
	margin: 0 0 var( --mb-abstand-2 );
}

.blog_holder article .post_text_inner h5,
.latest_post_holder .latest_post_title {
	margin: 0 0 var( --mb-abstand-3 );
}

.blog_holder article .post_info,
.blog_holder article .post_infos,
.latest_post_holder .post_infos {
	margin-top: var( --mb-abstand-2 );
}

/* Kacheln ohne Beitragsbild: ein Drittel des Bestands. Statt eines leeren
   Platzhalters bekommen sie eine eigene Gestalt mit einer Linie oben. */
.blog_holder article:not(.has-post-thumbnail) .post_text_inner {
	padding-top: var( --mb-abstand-5 );
	border-top: 2px solid var( --mb-text );
}


/* ==========================================================================
   9. VERANSTALTUNGSKALENDER
   The Events Calendar bringt ein eigenes Token-System mit. Die Vorgabewerte
   sind unveraendert (Blau 334aff, Helvetica, Radius 4px), tribe_customizer
   ist leer. Deshalb genuegt das Umsetzen der Tokens, um Monatsraster,
   Listenansicht, Tagesansicht, Schaltflaechen und Hinweisfelder in einem Zug
   umzustellen. Die Datei laedt nach dem Plugin, gleiche Spezifitaet gewinnt.
   ========================================================================== */

:root {
	--tec-color-accent-primary:       var( --mb-tuerkis-text );
	--tec-color-accent-primary-hover: var( --mb-tuerkis-dark );
	--tec-color-accent-primary-active: var( --mb-tuerkis-dark );
	--tec-color-accent-primary-background: var( --mb-tuerkis-hell );
	--tec-color-button-primary:        var( --mb-tuerkis-text );
	--tec-color-button-primary-hover:  var( --mb-tuerkis-dark );
	--tec-color-button-primary-active: var( --mb-tuerkis-dark );
	--tec-color-link-primary:          var( --mb-text );
	--tec-color-link-accent:           var( --mb-tuerkis-text );
	--tec-color-link-accent-hover:     var( --mb-tuerkis-dark );
	--tec-color-text-primary:          var( --mb-text );
	--tec-color-text-secondary:        var( --mb-text-lauf );
	--tec-color-text-events-title:     var( --mb-text );
	--tec-color-border-default:        var( --mb-linie );
	--tec-font-family-sans-serif:      var( --mb-sans );
	--tec-font-family-base:            var( --mb-sans );
	--tec-border-radius-default:       0;
	--tec-box-shadow-card:             none;
	--tec-box-shadow-tooltip:          0 2px 12px rgba( 0, 0, 0, 0.16 );
}

/* Der Kalender sitzt in einem eigenen Wrapper und braucht denselben
   senkrechten Rhythmus wie der uebrige Inhalt. */
.tribe-events-view {
	margin-top: var( --mb-abstand-4 );
	margin-bottom: var( --mb-abstand-5 );
}

/* Das Plugin polstert seinen Container mit 96 Pixeln oben und 160 unten. Das
   riss eine sichtbare Luecke zwischen Brotkrumen und Monatsraster. Die
   Gegenregel steht in views-skeleton.css und bringt drei Klassen mit
   (tribe-common--breakpoint-medium.tribe-events .tribe-events-l-container),
   deshalb sind hier ebenfalls drei noetig. */
.tribe-events.tribe-events-view .tribe-events-l-container {
	padding-top: 0;
	padding-bottom: var( --mb-abstand-5 );
}

/* Veranstaltungstitel folgen der Skala statt der Plugin-Vorgabe. */
.tribe-common .tribe-events-calendar-list__event-title,
.tribe-common .tribe-events-calendar-day__event-title,
.tribe-common .tribe-events-calendar-latest-past__event-title {
	font-family: var( --mb-serif );
	font-size: var( --mb-t-3 );
	font-style: italic;
	line-height: 1.3;
}

.tribe-common .tribe-events-calendar-month__header-column-title,
.tribe-common .tribe-events-calendar-month__day-date {
	font-family: var( --mb-sans );
}

/* Der Monatsname ist die Ueberschrift der Ansicht. */
.tribe-common .tribe-events-c-top-bar__datepicker-button,
.tribe-common .tribe-events-c-top-bar__datepicker-desktop {
	font-family: var( --mb-serif );
	font-size: var( --mb-t-3 );
	font-style: italic;
}

/* Scharfe Kanten an allen Bedienelementen der Ansicht. */
.tribe-common .tribe-common-c-btn,
.tribe-common .tribe-common-c-btn-border,
.tribe-common .tribe-common-form-control-text__input,
.tribe-common .tribe-events-c-search__input,
.tribe-common .tribe-events-c-top-bar__today-button,
.tribe-common .tribe-events-c-view-selector__button,
.tribe-events .tribe-events-c-subscribe-dropdown__button {
	border-radius: 0;
}

/* Die Ereignisbalken im Monatsraster tragen den Markenton. */
.tribe-common .tribe-events-calendar-month__multiday-event-bar-inner {
	background-color: var( --mb-tuerkis-hell );
}

.tribe-common .tribe-events-calendar-month__multiday-event-bar-title {
	color: var( --mb-tuerkis-text );
	font-family: var( --mb-sans );
}

/* Der laufende Tag wird ueber die Markenfarbe hervorgehoben, nicht ueber
   den blauen Vorgabewert des Plugins. */
.tribe-common .tribe-events-calendar-month__day--current .tribe-events-calendar-month__day-date {
	color: var( --mb-tuerkis-text );
}


/* Die Einzelansicht einer Veranstaltung stammt noch aus der aelteren
   Vorlagenreihe des Plugins und wird von den Tokens oben nicht erfasst. Sie
   bringt eine eigene Ueberschriftregel mit und faerbt Hinweise und Verweise im
   alten hellen Tuerkis, das auf Weiss nur 2:1 Kontrast erreicht. */
.tribe-events-single .tribe-events-single-event-title {
	font-family: var( --mb-serif );
	font-size: var( --mb-t-1 );
	font-weight: 600;
	line-height: 1.15;
	color: var( --mb-text );
}

.tribe-events-single .tribe-events-schedule h2 {
	font-size: var( --mb-t-3 );
}

.tribe-events-single .tribe-events-notices {
	color: var( --mb-text-lauf );
	font-family: var( --mb-sans );
	font-size: var( --mb-t-klein );
	background-color: var( --mb-tuerkis-hell );
	border: 0;
	padding: var( --mb-abstand-3 ) var( --mb-abstand-4 );
}

.tribe-events-single .tribe-events-notices li {
	color: var( --mb-text-lauf );
}

.tribe-events-single .tribe-events-back a,
.tribe-events-single .tribe-events-event-meta a,
.tribe-events-single #tribe-events-footer a {
	color: var( --mb-tuerkis-text );
}

.tribe-events-single .tribe-events-event-meta {
	font-family: var( --mb-sans );
	font-size: var( --mb-t-klein );
	border-color: var( --mb-linie );
	background-color: transparent;
}


/* ==========================================================================
   10. BRANCHENVERZEICHNIS
   Sabai ist vollstaendig unter .sabai gekapselt und bringt ein eigenes,
   praefigiertes Bootstrap mit: die Klassen heissen sabai-btn, sabai-panel und
   so fort, nicht btn oder panel. Angepasst wird nur die Aussenkante: Schrift,
   Farben, Schaltflaechen, Kanten und das Format der Eintragsbilder. Das
   Rastersystem bleibt unangetastet, weil Listen-, Karten- und Kartenansicht
   daran haengen. Die Bedienelemente der Google-Karte (gm-) sind ausgenommen,
   sie gehoeren dem Kartendienst.
   ========================================================================== */

.sabai {
	font-family: var( --mb-sans );
	font-size: var( --mb-t-klein );
	line-height: 1.55;
	color: var( --mb-text-lauf );
}

.sabai h1, .sabai h2, .sabai h3, .sabai h4, .sabai h5, .sabai h6 {
	font-family: var( --mb-serif );
	color: var( --mb-text );
	letter-spacing: 0;
	text-transform: none;
}

/* Der Eintragsname kam mit ueber 57 Pixeln an, weil das Theme seine
   Ueberschriftgroessen durchreicht. Hier gilt die Skala. */
.sabai h1 { font-size: var( --mb-t-2 ); line-height: 1.2; }
.sabai h2 { font-size: var( --mb-t-3 ); line-height: 1.3; }
.sabai h3 { font-size: var( --mb-t-4 ); line-height: 1.35; }
.sabai h4,
.sabai h5,
.sabai h6 { font-size: var( --mb-t-lauf ); line-height: 1.4; }

.sabai .sabai-directory-title,
.sabai .sabai-directory-title a {
	font-family: var( --mb-serif );
	font-size: var( --mb-t-3 );
	font-style: italic;
	line-height: 1.3;
	color: var( --mb-text );
}

.sabai a {
	color: var( --mb-tuerkis-text );
}

.sabai a:hover {
	color: var( --mb-tuerkis-dark );
}

/* Scharfe Kanten an Schaltflaechen, Feldern und Aufklappmenues. */
.sabai .sabai-btn,
.sabai .sabai-btn-group > .sabai-btn,
.sabai .sabai-search,
.sabai .sabai-dropdown-menu,
.sabai .sabai-panel,
.sabai .sabai-well,
.sabai .sabai-alert,
.sabai .sabai-label,
.sabai .sabai-badge,
.sabai input[type="text"],
.sabai input[type="search"],
.sabai input[type="email"],
.sabai input[type="url"],
.sabai input[type="tel"],
.sabai select,
.sabai textarea {
	border-radius: 0;
}

.sabai .sabai-btn {
	font-family: var( --mb-sans );
	font-size: var( --mb-t-meta );
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 9px 16px;
	line-height: 1.3;
	text-shadow: none;
	box-shadow: none;
}

/* uebersteuert: sabai/assets/css/main.min.css setzt saemtliche Knopffarben mit
   !important. Umgefaerbt wird nur die Suchschaltflaeche, die als einziges
   Bedienelement im Bootstrap-Blau ankam. */
.sabai .sabai-btn-primary {
	background-color: var( --mb-tuerkis-text ) !important;
	border-color: var( --mb-tuerkis-text ) !important;
	color: #ffffff !important;
}

/* uebersteuert: dieselbe Quelle, Zustand beim Ueberfahren und Klicken. */
.sabai .sabai-btn-primary:hover,
.sabai .sabai-btn-primary:focus,
.sabai .sabai-btn-primary:active,
.sabai .sabai-btn-primary.sabai-active {
	background-color: var( --mb-tuerkis-dark ) !important;
	border-color: var( --mb-tuerkis-dark ) !important;
	color: #ffffff !important;
}

/* uebersteuert: dieselbe Quelle. Die gewaehlte Ansicht, also Liste, Raster oder
   Karte, wird ueber den Markenton kenntlich statt ueber ein Grau. */
.sabai .sabai-btn-default.sabai-active,
.sabai .sabai-btn-group > .sabai-btn-default.sabai-active {
	background-color: var( --mb-tuerkis-hell ) !important;
	border-color: var( --mb-tuerkis-text ) !important;
	color: var( --mb-tuerkis-text ) !important;
}

/* Der Haken an bestaetigten Eintraegen kam in einem Waldgruen, das sonst
   nirgends auf der Seite vorkommt. */
.sabai .sabai-entity-icon-directory-claimed {
	color: var( --mb-tuerkis-text );
}

.sabai input[type="text"],
.sabai input[type="search"],
.sabai input[type="email"],
.sabai input[type="url"],
.sabai input[type="tel"],
.sabai select,
.sabai textarea {
	font-family: var( --mb-sans );
	font-size: var( --mb-t-klein );
	color: var( --mb-text );
	border: 1px solid var( --mb-linie );
	padding: 9px 12px;
	box-shadow: none;
}

.sabai input[type="text"]:focus,
.sabai input[type="search"]:focus,
.sabai select:focus,
.sabai textarea:focus {
	border-color: var( --mb-tuerkis-text );
	outline: none;
	box-shadow: none;
}

/* Eintragsbilder im selben Format wie die Karten in den Archiven. */
.sabai .sabai-directory-photos img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	object-position: center 38%;
	border-radius: 0;
	border: 0;
	padding: 0;
}

.sabai .sabai-panel,
.sabai .sabai-well {
	background-color: #ffffff;
	background-image: none;
	border-color: var( --mb-linie );
	box-shadow: none;
}

/* Der Abstand zwischen zwei Eintraegen folgt dem Raster. */
.sabai .sabai-entity-mode-summary {
	padding-bottom: var( --mb-abstand-4 );
	margin-bottom: var( --mb-abstand-4 );
	border-bottom: 1px solid var( --mb-linie );
}


/* ==========================================================================
   11. LESBARKEIT AN ZWEI STELLEN, DIE BEIM MESSEN DURCHFIELEN
   ========================================================================== */

/* Das ausklappbare Seitenmenue stand auf dem hellen Markenton mit weisser
   Schrift: 2,2 zu 1. Mit dem dunkleren Ton sind es 5,1 zu 1, und die Flaeche
   wirkt zugleich ruhiger. Der Wert kommt aus den Theme-Optionen, die hier
   nicht angefasst werden. */
.side_menu,
.side_menu #lang_sel,
.side_menu #lang_sel_click {
	background-color: var( --mb-tuerkis-text );
}

/* Das Mobilmenue faerbt seine Eintraege erst unterhalb von 1000 Pixeln
   dunkel. Im Band dazwischen, in dem die Hauptnavigation bereits fehlt,
   standen sie in einem Grau mit 3,5 zu 1. */
nav.mobile_menu ul li a,
nav.mobile_menu ul li h3,
nav.mobile_menu ul li ul li a {
	color: var( --mb-text-lauf );
}

nav.mobile_menu ul li a:hover,
nav.mobile_menu ul li.active > a {
	color: var( --mb-tuerkis-text );
}


/* ==========================================================================
   12. LETZTE AUSREISSER AUS DER SCHLUSSMESSUNG
   ========================================================================== */

/* Das Theme setzt die Grundfarbe des Fliesstextes auf 303030 und erzeugt damit
   eine fuenfte Graustufe neben den drei der Palette. */
body {
	color: var( --mb-text-lauf );
}

/* Der Teaser in den Kacheln kam mit 17,7 Pixeln an, einer aus em gerechneten
   Groesse, die in keiner Stufe der Skala vorkommt. */
p.excerpt,
.latest_post_holder p.excerpt,
.blog_holder article p.excerpt {
	font-size: var( --mb-t-lauf );
	line-height: 1.6;
	color: var( --mb-text-lauf );
}

/* Die Zeile mit Datum und Verfasserin gehoert zur Meta-Stufe. */
.post_infos,
.post_infos *,
.blog_holder article .post_info,
.latest_post_holder .post_infos {
	font-family: var( --mb-sans );
	font-size: var( --mb-t-meta );
	color: var( --mb-text-leise );
}

/* Der Verweis in die Kachel traegt im Markup ein u-Element, das die Farbe des
   umgebenden Verweises nicht erbt. */
.blog_holder article .post_text a u,
.latest_post_holder a u {
	color: inherit;
	text-decoration: none;
}


/* ==========================================================================
   13. GLOBALFARBEN DES ELEMENTOR-BAUKASTENS
   Elementor haelt vier benannte Farben, aus denen es Ueberschriften, Text,
   Schaltflaechen und Verweise speist. Sie standen auf hellem Tuerkis, Gelb,
   einem Gruengelb und einem Lachston. Daher kam die Ueberschrift der
   Anmeldung in 1,9 zu 1 und der Anmeldeknopf mit gelber Schrift auf gelbem
   Grund. Eine Regel genuegt, weil jedes Elementor-Element ueber diese vier
   Werte laeuft. Der Baukasten bleibt bedienbar, die Werte lassen sich in
   seinen Einstellungen weiter aendern.
   ========================================================================== */

.elementor-kit-196935 {
	--e-global-color-primary: var( --mb-text );
	--e-global-color-secondary: var( --mb-tuerkis-text );
	--e-global-color-text: var( --mb-text-lauf );
	--e-global-color-accent: var( --mb-tuerkis-text );
}

/* Der Anmeldeknopf des Newsletters traegt eine eigene Klasse und lief deshalb
   an der Schaltflaechenregel aus Abschnitt 6 vorbei. */
button.cr_button,
.cr_ipe_item button.cr_button {
	background-color: var( --mb-tuerkis-text );
	border: 0;
	color: #ffffff;
	font-family: var( --mb-sans );
	font-size: var( --mb-t-meta );
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 12px 24px;
	cursor: pointer;
}

button.cr_button:hover,
button.cr_button:focus {
	background-color: var( --mb-tuerkis-dark );
	color: #ffffff;
}

/* Die Kacheln der Startseite stammen aus einem anderen Element des Themes als
   die der Archive und kamen im Verhaeltnis 16 zu 9 an. Ein Format fuer alle
   Kacheln. */
.latest_post_holder .boxes_image img,
.latest_post_holder li .boxes_image img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	object-position: center 38%;
}


/* ==========================================================================
   14. BROTKRUMEN
   Die Ausgabe stammt von Yoast SEO und besteht aus verschachtelten span-
   Elementen mit einem Verweis darin. Der Verweis zog sich die Schriftgroesse
   des umgebenden Inhaltsbereichs, also 22 Pixel, waehrend der Rest der Zeile
   auf 13 stand. Deshalb wird die Groesse hier an jedes Kind vergeben, nicht
   nur an den Rahmen.
   ========================================================================== */

.mucbook-brotkrumen {
	box-sizing: border-box;
	max-width: 1100px;
	/* Oben Luft zum Kopfbereich, die Zeile klebte sonst daran. */
	margin: var( --mb-abstand-5 ) auto;
	padding: 0;
	border: 0;
	font-family: var( --mb-sans );
	font-size: var( --mb-t-meta );
	line-height: 1.5;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var( --mb-text-leise );
}

.mucbook-brotkrumen span,
.mucbook-brotkrumen a {
	font-family: var( --mb-sans );
	font-size: var( --mb-t-meta );
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: inherit;
	text-transform: inherit;
	color: var( --mb-text-leise );
	text-decoration: none;
}

.mucbook-brotkrumen a:hover,
.mucbook-brotkrumen a:focus {
	color: var( --mb-tuerkis-text );
	text-decoration: none;
	border-bottom: 1px solid currentColor;
}

/* Die aktuelle Seite ist der einzige kraeftige Punkt der Zeile. */
.mucbook-brotkrumen .breadcrumb_last {
	color: var( --mb-text );
	font-weight: 600;
}

/* Das Trennzeichen kommt als reiner Text zwischen den span-Elementen an und
   laesst sich nicht einzeln ansprechen. Der Abstand entsteht deshalb ueber die
   Laufweite der Zeile. */

/* Das Branchenverzeichnis laeuft ueber die volle Breite. Dort wuerde eine auf
   1100 Pixel zentrierte Zeile neben dem Inhalt stehen. */
body.page-id-76068 .mucbook-brotkrumen {
	max-width: none;
	padding: 0 45px;
}

@media only screen and (max-width: 1000px) {
	.mucbook-brotkrumen {
		/* Mobil steht die Zeile sonst zu dicht unter dem Kopfbereich. */
		margin-top: var( --mb-abstand-4 );
		margin-bottom: var( --mb-abstand-4 );
		padding-left: 20px;
		padding-right: 20px;
	}

	body.page-id-76068 .mucbook-brotkrumen {
		padding-left: 20px;
		padding-right: 20px;
	}
}


/* ==========================================================================
   15. FREI
   Hier stand die Angleichung der Teilen-Leiste. Das Plugin Simple Share Buttons
   Plus wurde am 2026-09-08 auf Wunsch abgeschaltet, die Regeln waren damit ohne
   Gegenstand und sind entfernt.
   ========================================================================== */

/* ==========================================================================
   16. GRUPPENZEILE IM BURGERMENUE
   Die Eintraege des Seitenmenues haengen seit dem MU-Plugin 05 unten im
   Burgermenue. Die Zeile davor trennt die Rubriken von diesem zweiten Teil und
   ist bewusst kein Verweis.
   ========================================================================== */

nav.mobile_menu ul li.mucbook-menue-gruppe {
	margin-top: var( --mb-abstand-5 );
	padding-top: 0;
	border: 0;
}

nav.mobile_menu ul li.mucbook-menue-gruppe > span {
	display: block;
	font-family: var( --mb-sans );
	font-size: var( --mb-t-meta );
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var( --mb-text-leise );
	padding: 0;
	cursor: default;
}

/* Der zweite Teil steht eine Stufe leiser als die Rubriken darueber. */
nav.mobile_menu ul li.mucbook-menue-gruppe ~ li > a {
	font-size: var( --mb-t-klein );
	font-weight: 500;
}


/* ==========================================================================
   17. SCHLAGWOERTER UNTER DEM BEITRAG
   Das Theme gibt die Schlagwoerter als Fliesstext aus: eine Ueberschrift
   "Tags:", danach Verweise, dazwischen Kommas als reine Textknoten. Bei einem
   Beitrag mit 42 Schlagwoertern ergab das einen Wortblock von 537 Pixeln Hoehe,
   der bis an die Kante lief und nicht als Liste zu erkennen war.
   Die Kommas lassen sich nicht einzeln ansprechen, weil sie kein Element sind.
   Sie verschwinden ueber die Schriftgroesse null am Behaelter, waehrend die
   Verweise darin ihre eigene Groesse bekommen.
   ========================================================================== */

.single_tags {
	margin-top: var( --mb-abstand-5 );
	padding-top: var( --mb-abstand-4 );
	border-top: 1px solid var( --mb-linie );
}

.single_tags .tags_text {
	font-size: 0;
	line-height: 0;
}

.single_tags .tags_text h5 {
	display: block;
	font-family: var( --mb-sans );
	font-size: var( --mb-t-meta );
	font-style: normal;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var( --mb-text-leise );
	margin: 0 0 var( --mb-abstand-3 );
}

.single_tags .tags_text a {
	display: inline-block;
	font-family: var( --mb-sans );
	font-size: var( --mb-t-meta );
	font-weight: 500;
	line-height: 1.3;
	color: var( --mb-text-lauf );
	border: 1px solid var( --mb-linie );
	padding: 7px 11px;
	margin: 0 6px 6px 0;
	text-decoration: none;
	transition: border-color 0.15s ease, color 0.15s ease;
	/* Ein einzelnes langes Schlagwort ohne Leerzeichen wuerde sonst ueber die
	   Spalte hinauslaufen, weil ein inline-block nicht von selbst umbricht. */
	max-width: 100%;
	overflow-wrap: anywhere;
}

.single_tags .tags_text a:hover,
.single_tags .tags_text a:focus {
	border-color: var( --mb-tuerkis-text );
	color: var( --mb-tuerkis-text );
	text-decoration: none;
}


/* ==========================================================================
   18. KOPFBEREICH UND KACHELN, ZWEITE STUFE
   Nach der ersten Runde war die Seite aufgeraeumt, aber vom Bestand kaum zu
   unterscheiden. Der Kopf nahm 195 Pixel ein, davon rund 50 als Leerlauf unter
   der Menuezeile, und die Navigation hatte keinen sichtbaren Zustand: weder
   beim Ueberfahren noch fuer die Rubrik, in der man gerade steht.
   ========================================================================== */

/* Der Kopf verliert seinen Leerlauf und bekommt eine Kante statt einer
   unbestimmten Grenze zum Inhalt. */
.page_header .header_bottom {
	border-bottom: 1px solid var( --mb-linie );
}

/* Der Kopf bestand aus drei uebereinander gestapelten Bloecken: Logo, Menue und
   darunter allein der Knopf fuer das Seitenmenue, der als rechts fliessendes
   Element nicht mehr neben das Menue passte und deshalb eine eigene Zeile von 50
   Pixeln aufmachte. Genau dieser Leerlauf liess den Kopf schwer wirken. Er wird
   zur Zeile: Lupe, Menue, Knopf nebeneinander, das Logo darueber. */
@media only screen and (min-width: 1401px) {

	.page_header:not(.sticky) .header_bottom .container_inner {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		padding-top: 18px;
		padding-bottom: 0;
	}

	.page_header:not(.sticky) .header_bottom .header_inner_left {
		flex: 0 0 100%;
		order: 1;
		margin: 0 0 6px;
		/* Das Theme gibt diesem Block im nicht klebenden Modus 100 Pixel fest
		   mit. Die Hoehe soll sich aus dem Logo ergeben. */
		height: auto;
	}

	.page_header:not(.sticky) .header_bottom .header_inner_right.left_side {
		order: 2;
		float: none;
		height: auto;
	}

	.page_header:not(.sticky) .header_bottom nav.main_menu {
		order: 3;
		/* Basis null, damit das Menue den verbleibenden Platz einnimmt und die
		   Zeile nicht umbricht. Mit Basis auto beansprucht es seine volle
		   Inhaltsbreite und schiebt den letzten Knopf in eine eigene Zeile. */
		flex: 1 1 0%;
		min-width: 0;
		float: none;
		width: auto;
		left: auto;
		margin: 0;
	}

	.page_header:not(.sticky) .header_bottom nav.main_menu > ul {
		display: flex;
		justify-content: center;
		float: none;
	}

	.page_header:not(.sticky) .header_bottom nav.main_menu > ul > li {
		float: none;
	}

	.page_header:not(.sticky) .header_bottom .header_inner_right:not(.left_side) {
		order: 4;
		float: none;
		height: auto;
	}

	.page_header:not(.sticky) .header_bottom .mobile_menu {
		order: 5;
		flex: 0 0 100%;
	}
}

/* uebersteuert: bridge/js/default.min.js setzt die Logohoehe inline. */
.page_header:not(.sticky) .q_logo a,
.page_header:not(.sticky) .q_logo img {
	height: 46px !important;
	max-height: 46px !important;
	width: auto !important;
}

.page_header:not(.sticky) .logo_wrapper {
	height: 46px;
}

/* Die Menuezeile wird zur Zeile, nicht zum Block. */
.page_header .header_bottom nav.main_menu > ul > li > a {
	height: 58px;
	line-height: 58px;
	/* Enger als die 17 Pixel des Themes, damit die neun Punkte auch dann in eine
	   Zeile passen, wenn die Zeile sich Lupe und Knopf mit ihnen teilt. */
	padding: 0 13px;
	color: var( --mb-text );
	position: relative;
	white-space: nowrap;
}

/* Der Balken unter dem Menuepunkt waechst aus der Mitte heraus. Er zeigt beim
   Ueberfahren, wohin der Verweis fuehrt, und markiert die Rubrik, in der man
   gerade steht. */
.page_header .header_bottom nav.main_menu > ul > li > a::after {
	content: "";
	position: absolute;
	left: 13px;
	right: 13px;
	bottom: 14px;
	height: 2px;
	background-color: var( --mb-tuerkis-text );
	transform: scaleX( 0 );
	transform-origin: center;
	transition: transform 0.18s ease;
}

.page_header .header_bottom nav.main_menu > ul > li > a:hover::after,
.page_header .header_bottom nav.main_menu > ul > li.current-menu-item > a::after,
.page_header .header_bottom nav.main_menu > ul > li.current-menu-ancestor > a::after,
.page_header .header_bottom nav.main_menu > ul > li.current_page_item > a::after,
.page_header .header_bottom nav.main_menu > ul > li.current-menu-parent > a::after {
	transform: scaleX( 1 );
}

.page_header .header_bottom nav.main_menu > ul > li:hover > a,
.page_header .header_bottom nav.main_menu > ul > li.current-menu-item > a,
.page_header .header_bottom nav.main_menu > ul > li.current-menu-ancestor > a {
	color: var( --mb-tuerkis-text );
}

/* Die Rubrik ueber dem Titel war ein weiteres Grau in einer Reihe von Grautoenen
   und ging unter. Sie ist jetzt der einzige farbige Punkt der Kachel. */
.blog_holder article .post_text_inner h6,
.blog_holder article .post_text_inner h6 a,
.latest_post_holder .latest_post_text_inner h6,
.latest_post_holder .latest_post_text_inner h6 a {
	font-family: var( --mb-sans );
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var( --mb-tuerkis-text );
}

/* In den Archiven gibt das Theme dasselbe h6 aus, laesst es aber leer. Es stand
   dort als 15 Pixel hohe Luecke ueber jedem Titel. */
.blog_holder article .post_text_inner h6:empty,
.latest_post_holder .latest_post_text_inner h6:empty {
	display: none;
}

/* Der Titel traegt die Kachel und darf das auch zeigen. */
.blog_holder article .post_text_inner h5,
.blog_holder article .post_text_inner h5 a,
.latest_post_holder .latest_post_title,
.latest_post_holder .latest_post_title a {
	font-size: var( --mb-t-3 );
	line-height: 1.28;
	letter-spacing: 0;
}

/* Beim Ueberfahren rueckt das Bild eine Spur naeher. Der Rahmen bleibt stehen,
   weil die Kachel bereits einen Ueberlauf verbirgt. */
.blog_holder article .post_image img,
.latest_post_holder .latest_post_image img,
.latest_post_holder .boxes_image img {
	transition: transform 0.45s ease;
	will-change: transform;
}

.blog_holder article:hover .post_image img,
.latest_post_holder li:hover .latest_post_image img,
.latest_post_holder li:hover .boxes_image img {
	transform: scale( 1.04 );
}

.blog_holder article:hover .post_text_inner h5,
.blog_holder article:hover .post_text_inner h5 a,
.latest_post_holder li:hover .latest_post_title,
.latest_post_holder li:hover .latest_post_title a {
	color: var( --mb-tuerkis-text );
}

@media ( prefers-reduced-motion: reduce ) {

	.blog_holder article .post_image img,
	.latest_post_holder .latest_post_image img,
	.latest_post_holder .boxes_image img,
	.page_header .header_bottom nav.main_menu > ul > li > a::after {
		transition: none;
	}

	.blog_holder article:hover .post_image img,
	.latest_post_holder li:hover .latest_post_image img,
	.latest_post_holder li:hover .boxes_image img {
		transform: none;
	}
}


/* ==========================================================================
   19. DER KOPF WIRD DUNKEL
   Die bisherigen Schritte haben den Kopf aufgeraeumt, aber er blieb eine weisse
   Flaeche wie zuvor. Ein dunkler Kopf ist der Bruch, den man auf den ersten
   Blick sieht, und er kostet nichts: das Logo liegt als tuerkise SVG vor und
   erreicht auf Anthrazit 6,4 zu 1, die Navigation in Weiss 17 zu 1. Eine helle
   Logovariante gibt es nicht, es wird auch keine gebraucht, alle fuenf
   Varianten des Themes zeigen ohnehin dieselbe Datei.
   ========================================================================== */

/* uebersteuert: Bridge schreibt die Hintergrundfarbe des Kopfes als Inline-Stil
   aus den Theme-Optionen in das Element. */
.page_header .header_bottom,
.page_header.sticky .header_bottom,
.page_header .header_top {
	background-color: var( --mb-text ) !important;
	border-bottom: 0;
}

/* Die Navigation steht in Weiss, der Markenton bleibt dem Zustand vorbehalten. */
.page_header .header_bottom nav.main_menu > ul > li > a {
	color: #ffffff;
}

.page_header .header_bottom nav.main_menu > ul > li:hover > a,
.page_header .header_bottom nav.main_menu > ul > li.current-menu-item > a,
.page_header .header_bottom nav.main_menu > ul > li.current-menu-ancestor > a,
.page_header .header_bottom nav.main_menu > ul > li.current-menu-parent > a,
.page_header .header_bottom nav.main_menu > ul > li.current_page_item > a {
	color: var( --mb-tuerkis );
}

.page_header .header_bottom nav.main_menu > ul > li > a::after {
	background-color: var( --mb-tuerkis );
}

/* Aufklappmenues bleiben hell, damit die Unterpunkte lesbar bleiben und sich
   die Ebene vom Balken abhebt. */
.page_header .header_bottom .drop_down .second .inner ul {
	background-color: #ffffff;
	border-top: 2px solid var( --mb-tuerkis );
}

.page_header .header_bottom .drop_down .second .inner ul li a {
	color: var( --mb-text );
}

.page_header .header_bottom .drop_down .second .inner ul li:hover > a {
	color: var( --mb-tuerkis-text );
}

/* Die Symbole der Zeile: Lupe, Burger, Knopf fuer das Seitenmenue. */
.page_header .header_bottom .side_menu_button > a,
.page_header .header_bottom .side_menu_button > a i,
.page_header .header_bottom .side_menu_button_link,
.page_header .header_bottom .mobile_menu_button > span,
.page_header .header_bottom .mobile_menu_button > span i,
.page_header .header_bottom .search_button,
.page_header .header_bottom .search_button i,
.page_header .header_bottom .popup_menu .line,
.page_header .header_bottom .popup_menu .line::after,
.page_header .header_bottom .popup_menu .line::before {
	color: #ffffff;
}

.page_header .header_bottom .side_menu_button > a:hover,
.page_header .header_bottom .side_menu_button > a:hover i,
.page_header .header_bottom .mobile_menu_button > span:hover i,
.page_header .header_bottom .search_button:hover,
.page_header .header_bottom .search_button:hover i {
	color: var( --mb-tuerkis );
}

/* Das Burgersymbol des Themes besteht teils aus Flaechen statt aus Schrift. */
.page_header .header_bottom .side_menu_button_link span,
.page_header .header_bottom .mobile_menu_button span span {
	background-color: #ffffff;
}

/* Das Burgermenue liegt im dunklen Kopf und uebernimmt dessen Grund. */
.page_header .header_bottom nav.mobile_menu,
.page_header .header_bottom nav.mobile_menu ul {
	background-color: var( --mb-text );
	border-color: rgba( 255, 255, 255, 0.16 );
}

nav.mobile_menu ul li,
nav.mobile_menu ul li ul li {
	border-color: rgba( 255, 255, 255, 0.16 );
}

nav.mobile_menu ul li a,
nav.mobile_menu ul li h3,
nav.mobile_menu ul li ul li a {
	color: #ffffff;
}

nav.mobile_menu ul li a:hover,
nav.mobile_menu ul li.active > a {
	color: var( --mb-tuerkis );
}

nav.mobile_menu ul li.mucbook-menue-gruppe > span {
	color: rgba( 255, 255, 255, 0.6 );
}

/* Auf kleinen Bildschirmen bekommt der Kopf mehr Luft. Die Zeilenhoehe von 86
   Pixeln steht in mucbook-fixes.css, Abschnitt 8, weil sie dort gegen eine
   Vorgabe des Themes mit !important durchgesetzt werden muss. Hier steht nur,
   was daraufsteht. */
@media only screen and (max-width: 1000px) {

	.page_header .header_bottom .container_inner {
		padding-top: 0;
		padding-bottom: 0;
	}

	.page_header .header_bottom .logo_wrapper .q_logo a,
	.page_header .header_bottom .logo_wrapper .q_logo img {
		/* uebersteuert: bridge/js/default.min.js setzt die Hoehe inline. */
		height: 36px !important;
		max-height: 36px !important;
	}

	/* Die Trennung gehoert an die Liste, nicht an ihre Huelle: die Huelle steht
	   auch im geschlossenen Zustand und zeigte die Linie dann unter dem Kopf. */
	.page_header .header_bottom nav.mobile_menu > ul {
		border-top: 1px solid rgba( 255, 255, 255, 0.16 );
	}

	/* Die Eintraege standen linksbuendig, die Unterpunkte zusaetzlich um 20 Pixel
	   eingerueckt. In einem Menue, das die ganze Breite einnimmt, steht die
	   Mitte besser: das Logo darueber sitzt ebenfalls mittig. */
	nav.mobile_menu ul li a,
	nav.mobile_menu ul li h3,
	nav.mobile_menu ul li ul li a,
	nav.mobile_menu ul li.mucbook-menue-gruppe > span {
		text-align: center;
	}

	nav.mobile_menu ul li ul,
	nav.mobile_menu ul li ul li {
		margin-left: 0;
		padding-left: 0;
	}

	/* Die Einrueckung war bisher das einzige Merkmal der Ebenen. Mittig
	   ausgerichtet faellt sie weg, deshalb tragen jetzt Groesse, Gewicht und Ton
	   die Hierarchie: Rubriken gross, fett und in Versalien, ihre Unterpunkte
	   eine Stufe kleiner, leichter und gedaempft. Die Unterpunkte liegen im
	   Markup zwei Ebenen tiefer, in div.second > div.inner > ul. */
	/* Die Zeilenhoehe stand fuer beide Ebenen fest auf 26 Pixeln, unabhaengig von
	   der Schriftgroesse: bei 16 Pixeln ergab das den Faktor 1,63, bei 14 schon
	   1,86. Mehrzeilige Eintraege liefen dadurch unterschiedlich weit
	   auseinander. Jetzt ist sie proportional, und die Polsterung bringt jede
	   Zeile auf eine Flaeche, die sich mit dem Daumen treffen laesst. */
	nav.mobile_menu > ul > li > a,
	nav.mobile_menu > ul > li > h3 {
		font-size: 16px;
		font-weight: 700;
		letter-spacing: 0.06em;
		text-transform: uppercase;
		color: #ffffff;
		line-height: 1.35;
		padding-top: 13px;
		padding-bottom: 13px;
	}

	/* Eine Rubrik mit Unterpunkten rueckt naeher an ihre Gruppe heran. Damit
	   liegen rund 20 Pixel zwischen Rubrik und Unterpunkt, aber rund 40 zwischen
	   zwei Rubriken: der Unterschied macht die Gliederung sichtbar, ohne dass es
	   dafuer eine Linie braucht. Browser ohne :has behalten den gleichmaessigen
	   Abstand, das ist kein Verlust. */
	nav.mobile_menu > ul > li:has( ul ) > a {
		padding-bottom: 8px;
	}

	nav.mobile_menu ul li ul li a {
		font-size: 14px;
		font-weight: 500;
		letter-spacing: 0.02em;
		text-transform: none;
		color: rgba( 255, 255, 255, 0.68 );
		line-height: 1.4;
		padding-top: 12px;
		padding-bottom: 12px;
	}

	nav.mobile_menu ul li ul li ul li a {
		font-size: 13px;
		color: rgba( 255, 255, 255, 0.55 );
	}

	nav.mobile_menu ul li ul li a:hover,
	nav.mobile_menu ul li ul li a:focus {
		color: var( --mb-tuerkis );
	}

	/* Ohne Trennlinien liest sich die Liste ruhiger: die Gliederung tragen jetzt
	   Schriftgroesse, Gewicht und Ton, dazu der Abstand zwischen den Rubriken.
	   Linien wuerden dieselbe Aussage ein zweites Mal machen. */
	nav.mobile_menu ul li,
	nav.mobile_menu ul li ul li,
	nav.mobile_menu > ul > li {
		border: 0;
	}

	/* Zwischen zwei Rubriken steht mehr Luft als zwischen einer Rubrik und ihren
	   Unterpunkten. Das haelt die Gruppen zusammen, ohne eine Linie zu brauchen. */
	nav.mobile_menu > ul > li {
		padding-top: 4px;
		padding-bottom: 10px;
	}

	nav.mobile_menu ul li .second .inner ul {
		padding-top: 0;
		padding-bottom: 10px;
	}

	/* Unter dem Kopf begann der Inhalt ohne jeden Abstand, die Brotkrumen klebten
	   unmittelbar an der dunklen Flaeche. */
	.content .content_inner {
		padding-top: var( --mb-abstand-4 );
	}

	/* Das Menue sass innerhalb der Innenabstaende des Kopfes, sein dunkler Grund
	   endete deshalb 35 Pixel vor dem Rand. Es zieht sich jetzt ueber die volle
	   Fensterbreite und holt den Abstand als eigene Polsterung zurueck. */
	.page_header .header_bottom nav.mobile_menu {
		box-sizing: border-box;
		width: 100vw;
		margin-left: calc( 50% - 50vw );
		padding-left: calc( 50vw - 50% );
		padding-right: calc( 50vw - 50% );
	}
}


/* ==========================================================================
   20. SENKRECHTE LAGE DER BEDIENELEMENTE
   Die drei Symbole im Kopf sassen nicht auf der Mitte ihrer Zeile: der Burger
   klebte am oberen Rand (Mitte bei 22 statt 43), die Lupe stand vier Pixel zu
   hoch, auf grossen Bildschirmen drei. Das Theme zentriert ueber
   display:table, was hier nicht mehr traegt, weil die Zeilenhoehen aus dem
   Design-System kommen. Die Huellen werden deshalb selbst zu Flex-Zeilen.
   ========================================================================== */

.page_header .header_bottom .side_menu_button,
.page_header .header_bottom .side_menu_button_wrapper,
.page_header .header_bottom .header_inner_right.left_side,
.page_header .header_bottom .header_inner_right:not(.left_side) {
	display: flex;
	align-items: center;
}

/* Der Burger bekommt seine Zeile nur dort, wo er auch sichtbar ist. Ohne diese
   Grenze macht das display:flex die Regel des Themes unwirksam, die ihn auf
   grossen Bildschirmen ausblendet: er stand dann unsichtbar im Fluss und gab
   dem Logoblock 100 Pixel Hoehe. */
@media only screen and (max-width: 1400px) {

	.page_header .header_bottom .mobile_menu_button {
		display: flex;
		align-items: center;
		justify-content: flex-start;
	}
}

.page_header .header_bottom .header_inner_right:not(.left_side) {
	justify-content: flex-end;
}

/* Die Symbole selbst behalten ihre Treffflaeche und sitzen darin mittig. */
.page_header .header_bottom .side_menu_button > a,
.page_header .header_bottom .side_menu_button_link {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	line-height: 1;
}


/* ==========================================================================
   21. EINGEBETTETE BEITRAEGE VON INSTAGRAM
   Instagram schreibt seinen Einbettungen min-width:326px als Inline-Stil mit,
   dazu max-width:540px. Auf einem Bildschirm von 375 Pixeln ist die Textspalte
   aber nur 270 breit: die Einbettung stand 58 Pixel weiter rechts als jeder
   Absatz darueber und darunter. Da die Vorgabe inline steht, ist hier
   !important der einzige Weg.
   ========================================================================== */

/* uebersteuert: das Skript von Instagram schreibt Breitenangaben als
   Inline-Stil in das Element. */
.instagram-media,
iframe.instagram-media,
blockquote.instagram-media,
.wpb_wrapper .instagram-media {
	min-width: 0 !important;
	max-width: 100% !important;
	width: 100% !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* Dieselbe Vorgabe gilt fuer die Huelle, die WordPress um oEmbed-Inhalte legt. */
.wp-block-embed__wrapper,
.wp-block-embed-instagram .wp-block-embed__wrapper {
	max-width: 100%;
}


/* ==========================================================================
   22. FUSSBEREICH
   Der obere Fussbereich war ein 124 Pixel hoher leerer Block: alle vier
   Spalten sind ohne Widget, das Theme gibt die Huelle trotzdem aus. Darunter
   stand eine Zeile mit zwei Verweisen. Der Inhalt kommt jetzt aus dem
   MU-Plugin 06, die Gestalt von hier. Der Grund war zwei Toene dunkler als der
   Kopf (0a0a0a gegen 1f1f1f) und wird angeglichen.
   ========================================================================== */

.footer_top_holder,
.footer_bottom_holder,
footer .footer_top,
footer .footer_bottom {
	background-color: var( --mb-text );
}

.footer_top_holder {
	border-top: 1px solid rgba( 255, 255, 255, 0.12 );
}

footer .footer_top {
	padding: var( --mb-abstand-6 ) 0 var( --mb-abstand-5 );
}

.mucbook-fuss {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr;
	gap: var( --mb-abstand-5 );
	text-align: left;
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 45px;
	box-sizing: border-box;
}

footer .mucbook-fuss .mucbook-fuss-wortmarke {
	display: block;
	font-family: var( --mb-sans );
	font-size: 28px;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var( --mb-tuerkis );
	line-height: 1;
}

footer .mucbook-fuss .mucbook-fuss-zeile {
	font-family: var( --mb-sans );
	font-size: var( --mb-t-klein );
	line-height: 1.5;
	color: rgba( 255, 255, 255, 0.6 );
	margin: var( --mb-abstand-3 ) 0 0;
	max-width: 24em;
}

footer .mucbook-fuss .mucbook-fuss-titel {
	font-family: var( --mb-sans );
	font-size: var( --mb-t-meta );
	font-weight: 600;
	font-style: normal;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba( 255, 255, 255, 0.55 );
	margin: 0 0 var( --mb-abstand-3 );
}

.mucbook-fuss-liste {
	list-style: none;
	margin: 0;
	padding: 0;
}

.mucbook-fuss-liste li {
	margin: 0 0 8px;
}

footer .mucbook-fuss .mucbook-fuss-liste a {
	font-family: var( --mb-sans );
	font-size: var( --mb-t-klein );
	line-height: 1.4;
	color: #ffffff;
	text-decoration: none;
}

footer .mucbook-fuss .mucbook-fuss-liste a:hover,
footer .mucbook-fuss .mucbook-fuss-liste a:focus {
	color: var( --mb-tuerkis );
}

/* Die Zeile ganz unten traegt Impressum und Datenschutz. */
footer .footer_bottom {
	padding: var( --mb-abstand-4 ) 0;
	border-top: 1px solid rgba( 255, 255, 255, 0.12 );
}

footer .footer_bottom,
footer .footer_bottom p,
footer .footer_bottom .textwidget {
	font-family: var( --mb-sans );
	font-size: var( --mb-t-meta );
	letter-spacing: 0.04em;
	color: rgba( 255, 255, 255, 0.55 );
}

footer .footer_bottom a {
	color: rgba( 255, 255, 255, 0.8 );
	text-decoration: none;
}

footer .footer_bottom a:hover {
	color: var( --mb-tuerkis );
}

@media only screen and (max-width: 1000px) {

	.mucbook-fuss {
		grid-template-columns: 1fr;
		gap: var( --mb-abstand-4 );
		padding: 0 20px;
		text-align: center;
	}

	footer .footer_top {
		padding: var( --mb-abstand-5 ) 0 var( --mb-abstand-4 );
	}
}


/* ==========================================================================
   23. ZURUECK NACH OBEN
   Die Theme-Option show_back_button stand auf no. Sie ist eingeschaltet, der
   Knopf bekommt hier seine Gestalt: scharfe Kanten, Markenton, und er erscheint
   erst, wenn er gebraucht wird. Die Farben aus den Theme-Optionen greifen nicht,
   weil style_dynamic.css nur beim Speichern in der Verwaltung neu entsteht.
   ========================================================================== */

#back_to_top {
	right: 24px;
	bottom: 24px;
}

#back_to_top > span {
	width: 46px;
	height: 46px;
	line-height: 46px;
	border-radius: 0;
	border: 0;
	/* Der Markenton statt Anthrazit: der Knopf schwebt sowohl ueber hellem
	   Inhalt als auch ueber dem dunklen Fussbereich und muss auf beidem zu
	   sehen sein. */
	background-color: var( --mb-tuerkis-text );
	color: #ffffff;
	transition: background-color 0.18s ease;
}

#back_to_top:hover > span {
	background-color: var( --mb-tuerkis-dark );
	color: #ffffff;
}

#back_to_top i {
	line-height: 46px;
}

@media only screen and (max-width: 1000px) {

	#back_to_top {
		right: 16px;
		bottom: 16px;
	}

	#back_to_top > span {
		width: 44px;
		height: 44px;
		line-height: 44px;
	}

	#back_to_top i {
		line-height: 44px;
	}
}


/* ==========================================================================
   24. VERANSTALTUNGSLISTE IM INHALT
   Der Kurzbefehl [ecs-list-events] stand als roher Text auf der Startseite,
   seit die zugehoerige Erweiterung bei der Ausduennung entfernt wurde. Den
   Ersatz gibt das MU-Plugin 07 aus, die Gestalt steht hier.
   ========================================================================== */

.mucbook-veranstaltungen {
	list-style: none;
	margin: var( --mb-abstand-4 ) 0 0;
	padding: 0;
}

.mucbook-veranstaltung {
	display: block;
	padding: var( --mb-abstand-3 ) 0;
	border-bottom: 1px solid var( --mb-linie );
}

.mucbook-veranstaltung:first-child {
	border-top: 1px solid var( --mb-linie );
}

.mucbook-veranstaltung-datum {
	display: block;
	font-family: var( --mb-sans );
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var( --mb-tuerkis-text );
	margin-bottom: 4px;
}

.mucbook-veranstaltung-titel {
	display: block;
	font-family: var( --mb-serif );
	font-size: var( --mb-t-4 );
	font-style: italic;
	line-height: 1.3;
	color: var( --mb-text );
	text-decoration: none;
}

.mucbook-veranstaltung-titel:hover,
.mucbook-veranstaltung-titel:focus {
	color: var( --mb-tuerkis-text );
}

.mucbook-veranstaltung-ort {
	display: block;
	font-family: var( --mb-sans );
	font-size: var( --mb-t-meta );
	color: var( --mb-text-leise );
	margin-top: 4px;
}