/*
Theme Name: MC Steglitz
Theme URI: http://mc-steglitz.de/
Author: Motor-Club-Steglitz e.V.
Description: Klassisches WordPress-Theme für den Motor-Club-Steglitz e.V. Startseite mit Slider, Vorstellungsblöcken, Galerie-Slider, Partner-Laufband und Bewertungsbereich. Bewusst ohne Block-Editor gebaut, damit alle Inhalte im klassischen Editor gepflegt werden können.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 7.1
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mc-steglitz
Tags: classic, one-column, custom-menu, featured-images, threaded-comments
*/

/* ==========================================================================
   1. Farben und Grundwerte
   --mcs-blau        Akzentfarbe für Flächen (vom Verein vorgegeben)
   --mcs-blau-text   dunklere Variante derselben Farbe für Text und Links;
                     #7dcff5 hat auf Weiß nur 1,9:1 Kontrast und ist als
                     Schriftfarbe nicht lesbar
   ========================================================================== */
:root {
	--mcs-blau: #7dcff5;
	--mcs-blau-hell: #b5e4fb;
	--mcs-blau-text: #0e6f9c;
	--mcs-blau-dunkel: #0a536f;
	--mcs-dunkel: #14181c;
	--mcs-dunkel-2: #1e242a;
	--mcs-schwarz: #0b0d10;
	--mcs-text: #1d2328;
	--mcs-text-hell: #5a6670;
	--mcs-linie: #e2e8ec;
	--mcs-weiss: #ffffff;
	--mcs-grau: #f5f8fa;

	--mcs-breite: 1200px;
	--mcs-abstand: 80px;
	--mcs-radius: 4px;
	--mcs-schrift: "Helvetica Neue", Helvetica, Arial, sans-serif;
	--mcs-schrift-titel: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* ==========================================================================
   2. Zurücksetzen und Grundgerüst
   ========================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }

body {
	margin: 0;
	font-family: var(--mcs-schrift);
	font-size: 17px;
	line-height: 1.7;
	color: var(--mcs-text);
	background: var(--mcs-weiss);
	-webkit-font-smoothing: antialiased;
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

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

a:hover,
a:focus-visible { text-decoration: underline; }

h1, h2, h3, h4, h5, h6 {
	font-family: var(--mcs-schrift-titel);
	line-height: 1.2;
	margin: 0 0 0.5em;
	font-weight: 800;
	letter-spacing: -0.01em;
}

h1 { font-size: clamp(2rem, 4.2vw, 3rem); }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.4rem); }
h3 { font-size: clamp(1.3rem, 2.4vw, 1.7rem); }

p { margin: 0 0 1.2em; }

p:last-child { margin-bottom: 0; }

ul, ol { margin: 0 0 1.2em; padding-left: 1.3em; }

blockquote {
	margin: 0 0 1.2em;
	padding: 1em 1.4em;
	border-left: 4px solid var(--mcs-blau);
	background: var(--mcs-grau);
}

table { border-collapse: collapse; width: 100%; }

th, td { border: 1px solid var(--mcs-linie); padding: 0.6em 0.8em; text-align: left; }

:focus-visible {
	outline: 3px solid var(--mcs-blau-text);
	outline-offset: 2px;
}

.mcs-nur-screenreader {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0);
	white-space: nowrap; border: 0;
}

.mcs-nur-screenreader:focus {
	position: fixed !important;
	top: 10px; left: 10px;
	width: auto; height: auto;
	padding: 12px 20px; margin: 0;
	clip: auto;
	background: var(--mcs-weiss);
	color: var(--mcs-text);
	z-index: 9999;
	box-shadow: 0 4px 20px rgba(0,0,0,.25);
}

.mcs-innen {
	width: 100%;
	max-width: var(--mcs-breite);
	margin: 0 auto;
	padding-left: 24px;
	padding-right: 24px;
}

.mcs-abschnitt { padding: var(--mcs-abstand) 0; }

.mcs-obertitel {
	display: block;
	font-size: 0.9rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--mcs-blau-text);
	margin-bottom: 0.7em;
}

/* Buttons ------------------------------------------------------------------ */
.mcs-button,
.wp-block-button__link,
input[type="submit"],
button[type="submit"] {
	display: inline-block;
	padding: 15px 34px;
	background: var(--mcs-blau);
	color: var(--mcs-schwarz);
	font-weight: 800;
	font-size: 0.95rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	border: 0;
	border-radius: var(--mcs-radius);
	cursor: pointer;
	transition: background .18s ease, transform .18s ease;
}

.mcs-button:hover,
.mcs-button:focus-visible,
input[type="submit"]:hover,
button[type="submit"]:hover {
	background: var(--mcs-blau-hell);
	text-decoration: none;
	transform: translateY(-2px);
}

.mcs-button--rand {
	background: transparent;
	color: var(--mcs-weiss);
	box-shadow: inset 0 0 0 2px var(--mcs-blau);
}

.mcs-button--rand:hover { background: var(--mcs-blau); color: var(--mcs-schwarz); }

/* ==========================================================================
   3. Kopfbereich: schwarzer Balken mit Logo, darunter das blaue Menüband
   ========================================================================== */
.mcs-kopf {
	position: relative;
	z-index: 100;
}

/* Der Kopf nutzt mehr Breite als der Inhalt: Menü und Ortsclub-Siegel
   sollen nebeneinander in eine Zeile passen. */
.mcs-kopf .mcs-innen { max-width: 1420px; }

/* Oberer, schwarzer Balken ------------------------------------------------- */
.mcs-kopf__oben {
	background: var(--mcs-schwarz);
	color: var(--mcs-weiss);
}

.mcs-kopf__oben-innen {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	min-height: 118px;
	padding: 14px 0;
}

.mcs-kopf__marke {
	display: flex;
	align-items: center;
	gap: 14px;
	color: var(--mcs-weiss);
	min-width: 0;
}

.mcs-kopf__marke:hover { text-decoration: none; }

.mcs-kopf__logo { height: 80px; width: auto; }

.mcs-kopf__schrift { display: block; min-width: 0; }

.mcs-kopf__name {
	display: block;
	font-size: 1.5rem;
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -0.01em;
	color: var(--mcs-weiss);
}

.mcs-kopf__zusatz {
	display: block;
	font-size: 0.74rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--mcs-blau);
	margin-top: 5px;
	line-height: 1.35;
}

.mcs-kopf__jahr {
	display: block;
	font-size: 0.72rem;
	font-weight: 500;
	letter-spacing: 0.06em;
	color: #93a1ab;
	margin-top: 3px;
}

/* Unteres, blaues Menüband -------------------------------------------------- */
/* Leichter Tiefeneindruck: eine hellere Kante oben, eine dunklere unten,
   dazu ein weicher Schatten nach unten. */
.mcs-kopf__band {
	background: linear-gradient(180deg, #93d8f8 0%, var(--mcs-blau) 42%, #63bee7 100%);
	color: var(--mcs-schwarz);
	box-shadow:
		inset 0 1px 0 rgba(255,255,255,.55),
		inset 0 -1px 0 rgba(10,83,111,.35),
		0 3px 8px rgba(11,13,16,.22);
	position: relative;
	z-index: 3;
}

.mcs-kopf__band-innen {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 26px;
	min-height: 96px;
}

/* Ortsclub-Siegel rechts im blauen Band. Die Marke bringt ihren weißen
   Schutzrahmen mit, deshalb kein zusätzlicher Hintergrund. */
/* Das gelbe ADAC-Feld ist genau 60 % der Logohöhe und sitzt mittig. Damit es
   den blauen Streifen (96 px) voll ausfüllt, ist das Logo 160 px hoch; die
   überstehenden 32 px oben und unten sind leere Fläche und ändern deshalb die
   Höhe des Bandes nicht. */
/*
 * Das Siegel verweist auf den ADAC-Regionalclub. Die Anordnung im blauen Band
 * hängt jetzt am Link, nicht mehr am Bild — sonst säße das Bild im Link statt
 * im Flex-Fluss und das Band veränderte seine Höhe.
 */
.mcs-kopf__siegellink {
	flex: 0 0 auto;
	display: block;
	line-height: 0;
	margin-block: -19px;
	margin-left: auto;   /* schiebt das Siegel an den rechten Rand */
	position: relative;
	z-index: 2;
}

.mcs-kopf__siegel {
	display: block;
	height: 134px;
	width: auto;
}

/* Wetter an der Strecke ------------------------------------------------------ */
.mcs-wetter {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-left: auto;
	flex: 0 0 auto;
	color: var(--mcs-weiss);
}

.mcs-wetter__symbol {
	width: 62px;
	height: 62px;
	flex: 0 0 auto;
	filter: drop-shadow(0 2px 6px rgba(0,0,0,.5));
}

.mcs-wetter__text { display: block; line-height: 1.15; }

.mcs-wetter__grad {
	display: block;
	font-size: 1.45rem;
	font-weight: 800;
	letter-spacing: -0.01em;
}

.mcs-wetter__ort {
	display: block;
	margin-top: 2px;
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--mcs-blau);
}

/* Menü --------------------------------------------------------------------- */
.mcs-menue {
	flex: 0 1 auto;
	min-width: 0;
}

.mcs-menue ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 0;
	flex-wrap: nowrap;
}

.mcs-menue li { position: relative; }

/* Leichter Trennstrich zwischen den Menüpunkten der obersten Ebene. */
.mcs-menue > ul > li + li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 1px;
	height: 17px;
	background: rgba(11,13,16,.22);
	pointer-events: none;
}

.mcs-menue a {
	display: block;
	padding: 9px 15px;
	color: var(--mcs-schwarz);
	font-size: 0.86rem;
	font-weight: 800;
	letter-spacing: 0.005em;
	white-space: nowrap;   /* Menüpunkte bleiben einzeilig */
	border-radius: var(--mcs-radius);
	transition: background .15s ease, color .15s ease;
}

.mcs-menue a:hover,
.mcs-menue a:focus-visible {
	background: rgba(11,13,16,.12);
	color: var(--mcs-schwarz);
	text-decoration: none;
}

.mcs-menue .current-menu-item > a,
.mcs-menue .current_page_item > a,
.mcs-menue .current-menu-ancestor > a {
	background: var(--mcs-schwarz);
	color: var(--mcs-weiss);
}

/* Untermenü */
.mcs-menue ul ul {
	display: block;
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 250px;
	background: var(--mcs-weiss);
	padding: 8px;
	border-top: 3px solid var(--mcs-schwarz);
	box-shadow: 0 14px 34px rgba(11,13,16,.22);
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity .15s ease, transform .15s ease, visibility .15s;
	z-index: 10;
}

.mcs-menue li:hover > ul,
.mcs-menue li:focus-within > ul {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.mcs-menue ul ul a { padding: 9px 14px; font-weight: 600; }

.mcs-menue ul ul a:hover { background: var(--mcs-blau); }

/* Menüschalter für schmale Geräte */
.mcs-menue-schalter {
	display: none;
	align-items: center;
	gap: 9px;
	background: transparent;
	color: var(--mcs-weiss);
	border: 2px solid rgba(255,255,255,.28);
	border-radius: var(--mcs-radius);
	padding: 10px 16px;
	font-size: 0.85rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	cursor: pointer;
	flex: 0 0 auto;
}

.mcs-menue-schalter__strich {
	display: block;
	width: 20px;
	height: 2px;
	background: currentColor;
	position: relative;
}

.mcs-menue-schalter__strich::before,
.mcs-menue-schalter__strich::after {
	content: "";
	position: absolute;
	left: 0;
	width: 20px;
	height: 2px;
	background: currentColor;
}

.mcs-menue-schalter__strich::before { top: -6px; }
.mcs-menue-schalter__strich::after { top: 6px; }

/* ==========================================================================
   4. Slider
   ========================================================================== */
.mcs-slider {
	position: relative;
	background: var(--mcs-schwarz);
	overflow: hidden;
}

.mcs-slider__spur { position: relative; }

.mcs-slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity .8s ease;
	pointer-events: none;
}

.mcs-slide.ist-aktiv {
	position: relative;
	opacity: 1;
	pointer-events: auto;
}

.mcs-slide__bild {
	width: 100%;
	height: clamp(420px, 68vh, 760px);
	object-fit: cover;
	filter: brightness(.62);
}

.mcs-slide__inhalt {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 40px 24px;
	color: var(--mcs-weiss);
}

.mcs-slide__logo {
	width: clamp(110px, 14vw, 170px);
	height: auto;
	margin-bottom: 26px;
	filter: drop-shadow(0 6px 18px rgba(0,0,0,.45));
}

.mcs-slide__obertitel {
	font-size: clamp(.8rem, 1.6vw, 1rem);
	font-weight: 800;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--mcs-blau);
	margin-bottom: 14px;
}

h1.mcs-slide__titel,
.mcs-slide__titel {
	font-size: clamp(2.1rem, 5.6vw, 4.2rem);
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: -0.015em;
	margin: 0 0 16px;
	text-shadow: 0 4px 24px rgba(0,0,0,.5);
	max-width: 16em;
}

.mcs-slide__text {
	font-size: clamp(1rem, 1.9vw, 1.25rem);
	max-width: 44em;
	margin: 0 auto 30px;
	text-shadow: 0 2px 14px rgba(0,0,0,.55);
}

.mcs-slide__knoepfe {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	justify-content: center;
}

.mcs-slider__pfeil {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 52px;
	height: 52px;
	display: grid;
	place-items: center;
	background: rgba(11,13,16,.55);
	color: var(--mcs-weiss);
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	font-size: 1.5rem;
	line-height: 1;
	transition: background .18s ease;
	z-index: 3;
}

.mcs-slider__pfeil:hover { background: var(--mcs-blau); color: var(--mcs-schwarz); }
.mcs-slider__pfeil--zurueck { left: 22px; }
.mcs-slider__pfeil--vor { right: 22px; }

.mcs-slider__punkte {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 26px;
	display: flex;
	justify-content: center;
	gap: 10px;
	z-index: 3;
}

.mcs-slider__punkt {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	border: 2px solid var(--mcs-weiss);
	background: transparent;
	padding: 0;
	cursor: pointer;
}

.mcs-slider__punkt.ist-aktiv { background: var(--mcs-blau); border-color: var(--mcs-blau); }

/* Notfallanzeige, wenn noch keine Slides gepflegt sind */
.mcs-slider--leer {
	min-height: 420px;
	display: grid;
	place-items: center;
	background: linear-gradient(135deg, var(--mcs-schwarz), var(--mcs-blau-dunkel));
	color: var(--mcs-weiss);
	text-align: center;
	padding: 60px 24px;
}

/* ==========================================================================
   5. Textblock mit Bild (zweispaltig)
   ========================================================================== */
.mcs-block {
	display: grid;
	grid-template-columns: 1.45fr 1fr;
	align-items: center;
	gap: clamp(28px, 4vw, 56px);
}

/* Beim zweiten Block bleibt das Bild in der schmaleren Spalte — so groß wie
   der Platzhalter, der vorher dort stand. */
.mcs-block--bild-rechts { grid-template-columns: 1.45fr 1fr; }

.mcs-block--bild-rechts .mcs-block__bild { order: 2; }

.mcs-block__bild {
	display: flex;
	align-items: center;
}

.mcs-block__bild img {
	width: 100%;
	height: auto;
	/* Vollständig sichtbar, nichts wird beschnitten. */
	object-fit: contain;
	border-radius: var(--mcs-radius);
}

/* Auf breiten Bildschirmen tritt die Grafik seitlich aus der Textspalte
   heraus und wird dadurch deutlich größer, ohne den Text zu verdrängen.
   Erst ab 1400 px: darunter ist der Seitenrand schmaler als der Versatz,
   die Grafik liefe sonst über den Bildschirmrand hinaus. */
@media (min-width: 1400px) {
	.mcs-block__bild {
		margin-left: -90px;
		width: calc(100% + 90px);
	}

	.mcs-block--bild-rechts .mcs-block__bild {
		margin-left: 0;
		margin-right: 0;
		width: 100%;
	}
}

.mcs-block__text {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.mcs-block__platzhalter {
	width: 100%;
	min-height: 300px;
	aspect-ratio: 4 / 3;
	border-radius: var(--mcs-radius);
	background:
		repeating-linear-gradient(45deg, var(--mcs-grau) 0 18px, #eef3f7 18px 36px);
	border: 2px dashed var(--mcs-blau);
	display: grid;
	place-items: center;
	text-align: center;
	color: var(--mcs-text-hell);
	font-size: 0.92rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 24px;
}

.mcs-block__text h2 { margin-bottom: 0.55em; }

.mcs-block__aktion { margin-top: 32px; }

.mcs-abschnitt--grau { background: var(--mcs-grau); }

/* ==========================================================================
   5a. Termine
   ========================================================================== */
.mcs-termine {
	list-style: none;
	margin: 0 auto;      /* auf der Startseite mittig */
	padding: 0;
	display: grid;
	gap: 14px;
	max-width: 900px;
}

/* Auf der Terminseite stehen Überschriften und Liste links, bündig mit
   Pfad und Seitentitel. */
.page-template-page-termine .mcs-termine,
.page-template-page-termine .mcs-termine__titel { margin-left: 0; margin-right: auto; }

/* Die Überschriften stehen sonst am 1200er Rand und damit links neben der
   900 px breiten Terminliste. */
.mcs-termine__titel {
	max-width: 900px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 0.6em;
}

.mcs-termine__titel--spaeter { margin-top: 60px; }

.mcs-termin {
	display: flex;
	align-items: flex-start;
	gap: 20px;
	background: var(--mcs-weiss);
	border-radius: var(--mcs-radius);
	padding: 18px 22px;
	box-shadow: 0 2px 10px rgba(20,24,28,.07);
}

.mcs-termin__tag {
	flex: 0 0 auto;
	width: 66px;
	text-align: center;
	background: var(--mcs-blau);
	color: var(--mcs-schwarz);
	border-radius: var(--mcs-radius);
	padding: 8px 4px 6px;
	line-height: 1.1;
}

.mcs-termin__tag strong {
	display: block;
	font-size: 1.6rem;
	font-weight: 900;
}

.mcs-termin__tag span {
	display: block;
	font-size: 0.74rem;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.mcs-termin__text { display: block; }

.mcs-termin__datum {
	display: block;
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--mcs-blau-text);
	margin-bottom: 2px;
}

.mcs-termin__titel {
	display: block;
	font-size: 1.12rem;
	font-weight: 800;
	line-height: 1.3;
}

.mcs-termin__ort {
	display: block;
	font-size: 0.93rem;
	color: var(--mcs-text-hell);
	margin-top: 3px;
}

.mcs-termin__info {
	display: block;
	margin-top: 8px;
	font-size: 0.95rem;
	color: var(--mcs-text-hell);
}

.mcs-termine--vergangen .mcs-termin { opacity: .62; box-shadow: none; border: 1px solid var(--mcs-linie); }

.mcs-termine--vergangen .mcs-termin__tag { background: var(--mcs-linie); color: var(--mcs-text-hell); }

@media (max-width: 620px) {
	.mcs-termin { gap: 14px; padding: 14px 16px; }
	.mcs-termin__tag { width: 56px; }
	.mcs-termin__tag strong { font-size: 1.35rem; }
}

/* ==========================================================================
   5b. Videoabschnitt (Zwei-Klick-Lösung)
   ========================================================================== */
.mcs-abschnitt--dunkel {
	background: var(--mcs-dunkel);
	color: #d6dee4;
}

.mcs-abschnitt--dunkel h2 { color: var(--mcs-weiss); }

.mcs-abschnitt--dunkel .mcs-obertitel { color: var(--mcs-blau); }

.mcs-abschnitt--dunkel .mcs-kopfzeile p { color: #aeb9c2; }

.mcs-video {
	max-width: 960px;
	margin: 0 auto;
}

.mcs-video__start {
	position: relative;
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	background: #000;
	border-radius: var(--mcs-radius);
	overflow: hidden;
	cursor: pointer;
	aspect-ratio: 16 / 9;
	text-transform: none;
	letter-spacing: normal;
}

.mcs-video__start:hover { transform: none; }

.mcs-video__bild {
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: .82;
	transition: opacity .25s ease, transform .4s ease;
}

.mcs-video__start:hover .mcs-video__bild,
.mcs-video__start:focus-visible .mcs-video__bild { opacity: 1; transform: scale(1.02); }

.mcs-video__knopf {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 86px;
	height: 86px;
	border-radius: 50%;
	background: var(--mcs-blau);
	box-shadow: 0 8px 30px rgba(0,0,0,.45);
	transition: transform .2s ease, background .2s ease;
}

.mcs-video__knopf::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 54%;
	transform: translate(-50%, -50%);
	border-style: solid;
	border-width: 15px 0 15px 25px;
	border-color: transparent transparent transparent var(--mcs-schwarz);
}

.mcs-video__start:hover .mcs-video__knopf { transform: translate(-50%, -50%) scale(1.09); }

.mcs-video__beschriftung {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 46px 20px 18px;
	background: linear-gradient(transparent, rgba(8,10,12,.85));
	color: var(--mcs-weiss);
	font-size: 1rem;
	font-weight: 800;
	text-align: center;
}

.mcs-video__beschriftung small {
	display: block;
	margin-top: 4px;
	font-size: 0.78rem;
	font-weight: 500;
	color: #c3ced6;
}

.mcs-video iframe {
	width: 100%;
	aspect-ratio: 16 / 9;
	border: 0;
	border-radius: var(--mcs-radius);
	display: block;
}

@media (max-width: 620px) {
	.mcs-video__knopf { width: 64px; height: 64px; }
	.mcs-video__knopf::before { border-width: 11px 0 11px 19px; }
}

/* ==========================================================================
   6. Galerie-Slider
   ========================================================================== */
.mcs-kopfzeile {
	text-align: center;
	max-width: 720px;
	margin: 0 auto 52px;
}

.mcs-kopfzeile p { color: var(--mcs-text-hell); }

.mcs-karussell { position: relative; }

.mcs-karussell__spur {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: calc((100% - 2 * 26px) / 3);
	gap: 26px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	padding-bottom: 4px;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

/* Keine sichtbare Leiste: geblättert wird mit den Pfeilen. */
.mcs-karussell__spur::-webkit-scrollbar { display: none; height: 0; width: 0; }

.mcs-karte {
	scroll-snap-align: start;
	background: var(--mcs-weiss);
	border-radius: var(--mcs-radius);
	overflow: hidden;
	box-shadow: 0 3px 16px rgba(20,24,28,.10);
	display: flex;
	flex-direction: column;
	transition: transform .2s ease, box-shadow .2s ease;
}

.mcs-karte:hover { transform: translateY(-4px); box-shadow: 0 10px 30px rgba(20,24,28,.16); }

.mcs-karte__bild {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	background: var(--mcs-grau);
}

.mcs-karte__platzhalter {
	width: 100%;
	aspect-ratio: 3 / 2;
	background: repeating-linear-gradient(45deg, #e9eff4 0 14px, #f3f7fa 14px 28px);
	display: grid;
	place-items: center;
	color: var(--mcs-text-hell);
	font-size: 0.85rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.mcs-karte__inhalt { padding: 22px 24px 26px; flex: 1; display: flex; flex-direction: column; }

.mcs-karte__titel { font-size: 1.15rem; margin-bottom: 0.35em; }

.mcs-karte__titel a { color: var(--mcs-text); }

.mcs-karte__titel a:hover { color: var(--mcs-blau-text); text-decoration: none; }

.mcs-karte__meta {
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--mcs-blau-text);
	margin-bottom: 0.7em;
}

.mcs-karte__text { color: var(--mcs-text-hell); font-size: 0.95rem; margin-bottom: 1em; }

.mcs-karte__link { margin-top: auto; font-weight: 800; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.06em; }

.mcs-karussell__pfeile { display: flex; justify-content: center; gap: 12px; margin-top: 34px; }

.mcs-karussell__pfeil {
	width: 48px; height: 48px;
	border-radius: 50%;
	border: 2px solid var(--mcs-blau);
	background: transparent;
	color: var(--mcs-blau-text);
	font-size: 1.3rem;
	cursor: pointer;
	display: grid;
	place-items: center;
	transition: background .18s ease, color .18s ease;
}

.mcs-karussell__pfeil:hover { background: var(--mcs-blau); color: var(--mcs-schwarz); }

/* ==========================================================================
   7. Partner-Laufband
   ========================================================================== */
.mcs-partner { background: var(--mcs-weiss); padding: 56px 0; border-top: 1px solid var(--mcs-linie); border-bottom: 1px solid var(--mcs-linie); }

.mcs-partner__titel {
	text-align: center;
	font-size: 0.85rem;
	font-weight: 800;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--mcs-text-hell);
	margin-bottom: 34px;
}

.mcs-laufband {
	overflow: hidden;
	position: relative;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 90px, #000 calc(100% - 90px), transparent);
	mask-image: linear-gradient(90deg, transparent, #000 90px, #000 calc(100% - 90px), transparent);
}

.mcs-laufband__spur {
	display: flex;
	align-items: center;
	gap: 64px;
	width: max-content;
	animation: mcs-laufen 42s linear infinite;
}

.mcs-laufband:hover .mcs-laufband__spur,
.mcs-laufband:focus-within .mcs-laufband__spur { animation-play-state: paused; }

.mcs-laufband__eintrag {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	height: 70px;
}

.mcs-laufband__eintrag img {
	max-height: 70px;
	width: auto;
	filter: grayscale(100%);
	opacity: .72;
	transition: filter .2s ease, opacity .2s ease;
}

.mcs-laufband__eintrag:hover img,
.mcs-laufband__eintrag:focus-visible img { filter: grayscale(0); opacity: 1; }

@keyframes mcs-laufen {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
	.mcs-laufband__spur { animation: none; flex-wrap: wrap; justify-content: center; width: 100%; }
}

/* ==========================================================================
   8. Bewertungen (blauer Bereich)
   ========================================================================== */
.mcs-bewertungen {
	background: var(--mcs-blau);
	color: var(--mcs-schwarz);
	padding: var(--mcs-abstand) 0;
}

.mcs-bewertungen .mcs-obertitel { color: var(--mcs-blau-dunkel); }

.mcs-bewertungen h2 { color: var(--mcs-schwarz); }

.mcs-bewertungen__hinweis {
	background: rgba(255,255,255,.55);
	border: 2px dashed var(--mcs-blau-dunkel);
	border-radius: var(--mcs-radius);
	padding: 34px;
	text-align: center;
	font-weight: 600;
}

/* ==========================================================================
   9. Innenseiten
   ========================================================================== */
.mcs-seitenkopf {
	background: var(--mcs-dunkel);
	color: var(--mcs-weiss);
	padding: 22px 0 20px;
}

/* Auf Innenseiten laufen Pfad, Überschrift und Text auf derselben Breite wie
   der Kopfbereich — dadurch beginnen Logo, Menü, Pfad, Überschrift und Text
   an derselben linken Kante. */
.mcs-seitenkopf .mcs-innen,
.mcs-inhalt .mcs-innen { max-width: 1420px; }

/* Der Seitentitel steht im Inhalt, schwarz auf weiß — wie auf der
   Vorgängerseite. Der dunkle Streifen darüber trägt nur den Pfad. */
.mcs-inhalt__titel {
	font-size: clamp(2rem, 4.4vw, 3.1rem);
	margin: 0 0 0.6em;
	line-height: 1.1;
}

.mcs-seitenkopf h1 { margin: 0; color: var(--mcs-weiss); }

.mcs-seitenkopf__pfad { font-size: 0.85rem; color: var(--mcs-blau); margin: 0; }

.mcs-seitenkopf__pfad a { color: var(--mcs-blau); }

.mcs-inhalt { padding: var(--mcs-abstand) 0; }

/* Die Lesespalte bleibt schmal, steht aber links statt in der Mitte. */
.mcs-inhalt__innen { max-width: 900px; margin: 0 auto 0 0; }

.mcs-inhalt__innen img { border-radius: var(--mcs-radius); margin: 1.4em 0; }

/* Breite Vereinsgrafiken dürfen über die Textspalte hinauslaufen. */
.mcs-vollbreit {
	width: 100%;
	max-width: none;
	height: auto;
}

@media (min-width: 1000px) {
	.mcs-inhalt__innen .mcs-vollbreit {
		width: calc(100% + 160px);
		margin-left: -80px;
	}
}

/* Titelbilder im Hochformat (etwa Veranstaltungsplakate) sonst
   bildschirmfüllend hoch. */
.mcs-beitragsbild {
	max-height: 620px;
	width: auto;
	max-width: 100%;
	margin-inline: auto;
}

.mcs-beitragsliste { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }

.mcs-blaetterung { margin-top: 48px; display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

.mcs-blaetterung .page-numbers {
	display: inline-block;
	padding: 10px 16px;
	border: 2px solid var(--mcs-linie);
	border-radius: var(--mcs-radius);
	font-weight: 700;
}

.mcs-blaetterung .current { background: var(--mcs-blau); border-color: var(--mcs-blau); color: var(--mcs-schwarz); }

/* ==========================================================================
   8b. Videoübersicht
   ========================================================================== */
.mcs-videos {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px;
	margin: 32px 0 0;
}

/* Der Einleitungstext bleibt lesbar schmal, das Raster nutzt die volle
   Breite des Kopfbereichs. */
.page-template-page-videos .mcs-inhalt p:not(.mcs-videos__titel):not(.mcs-videos__hinweis) {
	max-width: 900px;
}

.mcs-videos .mcs-video { max-width: none; margin: 0; }

.mcs-videos__eintrag { display: flex; flex-direction: column; }

.mcs-videos__titel {
	margin: 14px 0 0;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.35;
}

/* In der Übersicht ist die Beschriftung auf dem Bild überflüssig, der Titel
   steht darunter. */
.mcs-videos .mcs-video__beschriftung { display: none; }

/* Ohne Text auf dem Bild braucht es keine Abdunklung. Mit ihr wirkten dunkle
   Bildpartien wie ein schwarzer Balken. */
.mcs-videos .mcs-video__bild { opacity: 1; }

.mcs-videos .mcs-video__start:hover .mcs-video__bild { transform: scale(1.03); }

.mcs-videos .mcs-video__knopf { width: 62px; height: 62px; }

.mcs-videos .mcs-video__knopf::before { border-width: 11px 0 11px 18px; }

.mcs-videos__hinweis {
	margin: 10px 0 0;
	font-size: 0.86rem;
	color: var(--mcs-text-hell);
}

@media (max-width: 1000px) {
	.mcs-videos { grid-template-columns: repeat(2, 1fr); gap: 24px; }
}

@media (max-width: 620px) {
	.mcs-videos { grid-template-columns: 1fr; gap: 22px; }
}

/* ==========================================================================
   8c. Sponsorenlogos auf der Partnerseite
   ========================================================================== */
.mcs-sponsoren {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 26px;
	margin: 34px 0;
	max-width: 900px;
}

.mcs-sponsor {
	margin: 0;
	padding: 24px 22px 20px;
	background: var(--mcs-weiss);
	border: 1px solid var(--mcs-linie);
	border-radius: var(--mcs-radius);
	text-align: center;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 16px;
}

.mcs-sponsor img {
	max-height: 90px;
	width: auto;
	max-width: 100%;
	margin: 0 auto;
	object-fit: contain;
	border-radius: 0;
}

.mcs-sponsor figcaption {
	font-size: 0.95rem;
	font-weight: 700;
	line-height: 1.35;
	color: var(--mcs-text);
}

.mcs-sponsor figcaption a { color: var(--mcs-blau-text); }

@media (max-width: 620px) {
	.mcs-sponsoren { grid-template-columns: 1fr 1fr; gap: 14px; }
	.mcs-sponsor { padding: 16px 12px 14px; }
	.mcs-sponsor img { max-height: 60px; }
	.mcs-sponsor figcaption { font-size: 0.82rem; }
}

/* ==========================================================================
   9a. Vorstand
   ========================================================================== */
.mcs-vorstand {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: 26px;
	margin: 32px 0 8px;
}

.mcs-vorstand__person {
	margin: 0;
	background: var(--mcs-weiss);
	border-radius: var(--mcs-radius);
	overflow: hidden;
	box-shadow: 0 2px 12px rgba(20,24,28,.10);
	transition: transform .2s ease, box-shadow .2s ease;
}

.mcs-vorstand__person:hover {
	transform: translateY(-3px);
	box-shadow: 0 10px 26px rgba(20,24,28,.16);
}

.mcs-vorstand__person img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	display: block;
	margin: 0;
	border-radius: 0;
}

.mcs-vorstand__person figcaption {
	padding: 16px 18px 18px;
	border-top: 3px solid var(--mcs-blau);
}

.mcs-vorstand__person strong {
	display: block;
	font-size: 1.1rem;
	font-weight: 800;
	line-height: 1.2;
}

.mcs-vorstand__person span {
	display: block;
	margin-top: 3px;
	font-size: 0.86rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--mcs-blau-text);
}

@media (max-width: 620px) {
	.mcs-vorstand { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px; }
	.mcs-vorstand__person figcaption { padding: 12px 14px 14px; }
	.mcs-vorstand__person strong { font-size: 1rem; }
	.mcs-vorstand__person span { font-size: 0.78rem; }
}

/* ==========================================================================
   9b. Galerie: Raster und Lichtkasten
   ========================================================================== */
.mcs-inhalt__meta {
	margin: -0.4em 0 1.6em;
	font-size: 0.92rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--mcs-blau-text);
}

.mcs-seitenkopf__meta {
	margin: 8px 0 0;
	font-size: 0.9rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--mcs-blau);
}

.mcs-galerie__zahl {
	font-size: 0.9rem;
	color: var(--mcs-text-hell);
	margin-bottom: 20px;
}

.mcs-galerie {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
	gap: 12px;
}

/*
 * Galerien, deren Vorschauen nur 384 px breit vorliegen: engere Kacheln,
 * damit das Bild nicht hochgezogen wird. Bei 1420 px Inhaltsbreite ergeben
 * sich so rund 166 px je Kachel — die Datei ist damit auch auf Bildschirmen
 * mit doppelter Pixeldichte noch mehr als doppelt so breit wie nötig.
 */
.mcs-galerie--schmal {
	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	gap: 10px;
}

.mcs-galerie__feld {
	display: block;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	border-radius: var(--mcs-radius);
	background: var(--mcs-grau);
}

.mcs-galerie__feld img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .25s ease;
}

.mcs-galerie__feld:hover img,
.mcs-galerie__feld:focus-visible img { transform: scale(1.06); }

/* Lichtkasten */
.mcs-lichtkasten {
	position: fixed;
	inset: 0;
	z-index: 9000;
	background: rgba(8,10,12,.94);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 60px 20px;
}

/* Ohne diese Zeile bliebe der Kasten sichtbar: die Klasse mit display:flex
   schlaegt das hidden-Attribut aus dem Browser-Standard. */
.mcs-lichtkasten[hidden] { display: none; }

.mcs-lichtkasten__bild {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	border-radius: 2px;
	box-shadow: 0 20px 60px rgba(0,0,0,.6);
}

.mcs-lichtkasten__zu,
.mcs-lichtkasten__pfeil {
	position: absolute;
	background: rgba(255,255,255,.12);
	color: var(--mcs-weiss);
	border: 0;
	cursor: pointer;
	display: grid;
	place-items: center;
	transition: background .18s ease, color .18s ease;
}

.mcs-lichtkasten__zu {
	top: 16px;
	right: 20px;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	font-size: 1.8rem;
	line-height: 1;
}

.mcs-lichtkasten__pfeil {
	top: 50%;
	transform: translateY(-50%);
	width: 56px;
	height: 56px;
	border-radius: 50%;
	font-size: 1.9rem;
	line-height: 1;
}

.mcs-lichtkasten__pfeil--zurueck { left: 18px; }
.mcs-lichtkasten__pfeil--vor { right: 18px; }

.mcs-lichtkasten__zu:hover,
.mcs-lichtkasten__pfeil:hover { background: var(--mcs-blau); color: var(--mcs-schwarz); }

.mcs-lichtkasten__zahl {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 18px;
	text-align: center;
	color: #cfd8df;
	font-size: 0.9rem;
	margin: 0;
}

body.mcs-kein-scrollen { overflow: hidden; }

@media (max-width: 620px) {
	.mcs-galerie { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }

	.mcs-galerie--schmal { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; }
	.mcs-lichtkasten { padding: 70px 8px; }
	.mcs-lichtkasten__pfeil { width: 44px; height: 44px; }
	.mcs-lichtkasten__pfeil--zurueck { left: 6px; }
	.mcs-lichtkasten__pfeil--vor { right: 6px; }
}

/* ==========================================================================
   10. Fußbereich
   ========================================================================== */
.mcs-fuss {
	background: var(--mcs-dunkel);
	color: #c4ced6;
	padding-top: 70px;
}

.mcs-fuss a { color: #c4ced6; }

.mcs-fuss a:hover { color: var(--mcs-blau); text-decoration: none; }

.mcs-fuss__spalten {
	display: grid;
	/* Die Streckenspalte bekommt am meisten Platz: dort stehen die
	   Öffnungszeiten, die nicht umbrechen sollen. */
	grid-template-columns: 1.15fr 0.85fr 1.35fr 0.85fr;
	gap: 40px;
	padding-bottom: 60px;
}

.mcs-fuss__logo { width: 184px; height: auto; margin-bottom: 24px; }

.mcs-fuss h2,
.mcs-fuss .widget-title,
.mcs-fuss .widgettitle {
	color: var(--mcs-weiss);
	font-size: 1rem;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	margin-bottom: 1.1em;
}

.mcs-fuss ul { list-style: none; margin: 0; padding: 0; }

.mcs-fuss li { margin-bottom: 0.6em; }

.mcs-fuss__trenner {
	height: 3px;
	background: var(--mcs-blau);
	border: 0;
	margin: 0;
}

.mcs-fuss__kontakt {
	display: flex;
	flex-wrap: wrap;
	gap: 14px 40px;
	justify-content: center;
	padding: 28px 0;
	font-size: 0.94rem;
}

.mcs-fuss__kontakt span { display: inline-flex; align-items: center; gap: 9px; }

.mcs-fuss__kontakt strong { color: var(--mcs-weiss); font-weight: 700; }

.mcs-fuss__schluss {
	background: var(--mcs-schwarz);
	padding: 20px 0;
	font-size: 0.85rem;
	color: #8895a0;
}

.mcs-fuss__kleinmenue ul {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 22px;
}

.mcs-fuss__kleinmenue li { margin: 0; }

.mcs-fuss__schluss-innen {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 26px;
	justify-content: space-between;
	align-items: center;
}

/* ==========================================================================
   11. Kommentare und Formulare
   ========================================================================== */
input[type="text"], input[type="email"], input[type="url"], input[type="search"], textarea {
	width: 100%;
	max-width: 100%;
	padding: 12px 14px;
	border: 2px solid var(--mcs-linie);
	border-radius: var(--mcs-radius);
	font-family: inherit;
	font-size: 1rem;
}

input:focus, textarea:focus { border-color: var(--mcs-blau); outline: none; }

/* ==========================================================================
   12. Schmale Geräte
   ========================================================================== */
@media (max-width: 1024px) {
	:root { --mcs-abstand: 60px; }

	.mcs-karussell__spur { grid-auto-columns: calc((100% - 26px) / 2); }

	.mcs-fuss__spalten { grid-template-columns: 1fr 1fr; gap: 36px; }

	.mcs-beitragsliste { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 860px) {
	.mcs-kopf__oben-innen { min-height: 84px; padding: 10px 0; }

	.mcs-wetter { margin-left: 0; gap: 7px; }
	.mcs-wetter__symbol { width: 44px; height: 44px; }
	.mcs-wetter__grad { font-size: 1.1rem; }
	.mcs-wetter__ort { display: none; }

	.mcs-menue-schalter { display: inline-flex; }

	.mcs-kopf__band-innen {
		flex-direction: column;
		align-items: stretch;
		min-height: 0;
		gap: 0;
	}

	.mcs-kopf .mcs-innen { max-width: var(--mcs-breite); }

	.mcs-menue {
		display: none;
		width: 100%;
	}

	.mcs-menue.ist-offen { display: block; padding: 8px 0 14px; }

	.mcs-kopf__band-innen { min-height: 0; }

	.mcs-kopf__siegellink {
		align-self: flex-start;
		margin: -8px 0;
	}

	.mcs-kopf__siegel { height: 96px; }

	.mcs-menue ul { flex-direction: column; align-items: stretch; gap: 0; flex-wrap: wrap; }

	.mcs-menue a { padding: 13px 4px; border-bottom: 1px solid rgba(11,13,16,.14); border-radius: 0; white-space: normal; }

	.mcs-menue > ul > li + li::before { display: none; }

	.mcs-kopf__siegellink { margin-left: 0; }

	.mcs-menue ul ul {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		box-shadow: none;
		border-top: 0;
		padding: 0 0 0 18px;
		background: transparent;
	}

	.mcs-menue ul ul a:hover { background: rgba(11,13,16,.12); }

	.mcs-block { grid-template-columns: 1fr; }

	.mcs-block--bild-rechts .mcs-block__bild { order: 0; }

	.mcs-block__bild { margin-left: 0; margin-right: 0; width: 100%; }

	.mcs-slider__pfeil { width: 42px; height: 42px; }
	.mcs-slider__pfeil--zurueck { left: 10px; }
	.mcs-slider__pfeil--vor { right: 10px; }
}

@media (max-width: 620px) {
	body { font-size: 16px; }

	.mcs-innen { padding-left: 18px; padding-right: 18px; }

	.mcs-wetter__symbol { width: 38px; height: 38px; }
	.mcs-wetter__grad { font-size: 1rem; }

	.mcs-kopf__logo { height: 52px; }
	.mcs-kopf__name { font-size: 1.05rem; }
	.mcs-kopf__zusatz { display: none; }
	.mcs-kopf__jahr { font-size: 0.66rem; }
	.mcs-kopf__siegel { height: 84px; margin: -10px 0; }
	.mcs-menue-schalter { padding: 9px 12px; font-size: 0.78rem; }

	.mcs-karussell__spur { grid-auto-columns: 86%; }

	.mcs-fuss__spalten { grid-template-columns: 1fr; }

	.mcs-beitragsliste { grid-template-columns: 1fr; }

	.mcs-fuss__kontakt { flex-direction: column; align-items: flex-start; gap: 12px; }
}

/* WordPress-Grundklassen --------------------------------------------------- */
.alignleft { float: left; margin: 0 1.5em 1em 0; }
.alignright { float: right; margin: 0 0 1em 1.5em; }
.aligncenter { margin-left: auto; margin-right: auto; }
.wp-caption { max-width: 100%; }
.wp-caption-text { font-size: 0.87rem; color: var(--mcs-text-hell); text-align: center; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }