/* =========================================================================
   MODULDREI: Stylesheet der Veranstaltungs-Vorlage
   =========================================================================
   Wird nur auf Beitraegen mit dieser Vorlage geladen (siehe inc/m3-templates.php).
   Alle Regeln haengen an der Klasse .m3-event am body-Element, damit nichts
   ausserhalb der Vorlage beeinflusst wird.

   Abgeleitet aus der Blogbeitrags-Vorlage, aber nur mit dem, was diese Vorlage
   braucht: Kopfbereich, Ueberschrift, Fliesstext, Button. Bewusst keine Kopie
   der ganzen blog.css, sonst stuenden hier 400 Zeilen fuer Module, die es hier
   gar nicht gibt.

   Farben kommen aus der Theme-Palette und nicht als feste Hex-Werte. Aendert
   MODULDREI spaeter eine Hausfarbe im Customizer, zieht die Seite automatisch
   mit. Die Hex-Werte dahinter sind nur der Rueckfall, falls eine Variable
   fehlt. Sie stammen aus der Messung der Testumgebung vom 10.08.2026.

   Schriften werden hier nicht geladen. Exo und Roboto bringt das Theme bereits
   mit. Ein zweites Laden derselben Dateien waere unnoetiger Ballast.
   ========================================================================= */

.m3-event {
	/* Aktionsfarbe, Buttons */
	--m3-pink: var(--global-palette1, #d13e6f);
	/* Dunkle Baender und Fliesstext */
	--m3-dunkel: var(--global-palette3, #23394a);
	/* Farbiges Kopfband und Buttons */
	--m3-blau: var(--global-palette4, #497593);
	--m3-weiss: var(--global-palette9, #ffffff);

	--m3-schrift-titel: "Exo", "Segoe UI", Arial, sans-serif;
	--m3-schrift-text: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;

	/* Dieselbe Breite wie beim Blogbeitrag: hier steht durchgehender Lesetext
	   und stehen keine Spalten nebeneinander. 940px abzueglich der seitlichen
	   Abstaende ergeben rund 80 Zeichen pro Zeile, gut lesbar sind 60 bis 80. */
	--m3-raster: 940px;
	--m3-raster-innen: 40px;
}

/* -------------------------------------------------------------------------
   Grundgeruest
   ------------------------------------------------------------------------- */

/* Die Veranstaltung liegt direkt im Seitengeruest des Themes, ohne dessen
   Inhaltsspalte. Grund: die Standardansicht stellt den Inhalt in eine schmale
   Spalte neben einer Seitenspalte, das farbige Kopfband braucht aber die volle
   Fensterbreite. */
.m3-event .m3-beitrag {
	font-family: var(--m3-schrift-text);
	font-size: 18px;
	line-height: 1.6;
	color: var(--m3-dunkel);
	background: var(--m3-weiss);
	overflow-x: hidden;
}

.m3-event .m3-beitrag img {
	max-width: 100%;
	height: auto;
	display: block;
}

.m3-event .m3-beitrag h1,
.m3-event .m3-beitrag h2,
.m3-event .m3-beitrag h3 {
	font-family: var(--m3-schrift-titel);
	margin: 0;
}

.m3-event .m3-beitrag p {
	margin: 0 0 22px;
}

.m3-event .m3-beitrag p:last-child {
	margin-bottom: 0;
}

/* Sektions-Geruest: aussen volle Breite, innen das feste Raster */
.m3-event .section {
	width: 100%;
	padding: 40px 0;
}

.m3-event .section__inner {
	max-width: var(--m3-raster);
	margin: 0 auto;
	padding: 0 var(--m3-raster-innen);
}

/* Folgen zwei Lesemodule aufeinander, wird der Abstand nicht doppelt gezaehlt.
   Sonst klaffte zwischen einer Ueberschrift und ihrem Textblock eine Luecke von
   80 Pixeln, und die beiden saehen nicht mehr zusammengehoerig aus. */
.m3-event .section--lesen + .section--lesen {
	padding-top: 0;
}

/* Eine Ueberschrift gehoert zu dem, was unter ihr steht, und rueckt deshalb
   naeher an ihren Text. 24px, wie in den anderen Vorlagen. */
.m3-event .section--titel {
	padding-bottom: 24px;
}

/* Der Button gehoert zu dem, was ueber ihm steht, und bekommt deshalb oben
   weniger Luft als einen vollen Abstand. */
.m3-event .section--knopf {
	padding-top: 8px;
}

/* Das letzte Modul braucht unten mehr Luft, sonst klebt es an der Fusszeile. */
.m3-event .section:last-child {
	padding-bottom: 72px;
}

/* -------------------------------------------------------------------------
   Kopfbereich
   ------------------------------------------------------------------------- */

/* Ohne Beitragsbild ist der Kopf die blaue Hausfarbe. Weisse Schrift darauf
   erreicht Kontrast 4.94 und ist damit lesbar. Auf dem hellen Blau
   (palette5) waeren es nur 3.06, deshalb steht hier ausdruecklich palette4. */
.m3-event .hero {
	position: relative;
	width: 100%;
	min-height: 340px;
	background: var(--m3-blau);
	display: flex;
	align-items: flex-end;
	overflow: hidden;
}

/* Mit Bild wird das Band dunkel statt blau: die Abdunklung darueber ist auf
   den dunklen Ton abgestimmt, so wie bei Blogbeitrag und Referenz. */
.m3-event .hero--bild {
	min-height: 440px;
	background: var(--m3-dunkel);
}

.m3-event .hero__bild {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.m3-event .hero__bild img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Abdunklung ueber dem Bild. Ohne sie erreicht weisse Schrift auf hellen Fotos
   keinen ausreichenden Kontrast. Nur dort, wo wirklich ein Bild liegt: auf der
   einfarbigen Flaeche wuerde sie die Hausfarbe nur abdunkeln. */
.m3-event .hero--bild::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(35, 57, 74, .35) 0%, rgba(35, 57, 74, .82) 100%);
	z-index: 1;
}

.m3-event .hero__inhalt {
	position: relative;
	z-index: 2;
	max-width: var(--m3-raster);
	margin: 0 auto;
	padding: 48px var(--m3-raster-innen);
	width: 100%;
	color: var(--m3-weiss);
}

.m3-event .hero__titel {
	font-size: clamp(30px, 3.1vw, 52px);
	line-height: 1.1;
	font-weight: 900;
	text-transform: uppercase;
	margin: 0;
	color: var(--m3-weiss);
}

/* -------------------------------------------------------------------------
   Modul: Ueberschrift
   ------------------------------------------------------------------------- */

.m3-event .h-sektion {
	font-size: 38px;
	line-height: 1.15;
	font-weight: 900;
	text-transform: uppercase;
	margin: 0;
	color: var(--m3-dunkel);
}

/* -------------------------------------------------------------------------
   Modul: Textblock
   ------------------------------------------------------------------------- */

.m3-event .text {
	margin: 0;
}

.m3-event .text p {
	color: var(--m3-dunkel);
}

/* Zwischenueberschriften und Aufzaehlungen aus dem Editor-Feld */
.m3-event .text h3 {
	font-size: 26px;
	line-height: 1.3;
	font-weight: 700;
	margin: 8px 0 12px;
}

.m3-event .text ul,
.m3-event .text ol {
	margin: 0 0 22px;
	padding-left: 22px;
}

.m3-event .text li {
	margin-bottom: 8px;
}

.m3-event .text a {
	color: var(--m3-blau);
}

/* -------------------------------------------------------------------------
   Modul: Button
   ------------------------------------------------------------------------- */

.m3-event .btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--m3-schrift-text);
	font-size: 17px;
	line-height: 1.6;
	padding: 10px 24px;
	border-radius: 3px;
	text-decoration: none;
	background: var(--m3-blau);
	color: var(--m3-weiss);
	border: 0;
	transition: background .2s ease;
}

.m3-event .btn:hover,
.m3-event .btn:focus {
	background: var(--m3-dunkel);
	color: var(--m3-weiss);
}

.m3-event .btn--pink {
	background: var(--m3-pink);
}

.m3-event .btn--pink:hover,
.m3-event .btn--pink:focus {
	background: var(--m3-blau);
}

/* -------------------------------------------------------------------------
   Bedienung ueber die Tastatur
   -------------------------------------------------------------------------
   Das Theme entfernt die Umrandung des gerade gewaehlten Elements. Wer die
   Seite mit der Tabulatortaste bedient, sieht dann nicht, wo er steht. Diese
   Regel gilt nur innerhalb der Vorlage und nur bei Tastaturbedienung, mit der
   Maus bleibt alles wie gewohnt. */
.m3-event a:focus-visible,
.m3-event button:focus-visible {
	outline: 3px solid var(--m3-pink);
	outline-offset: 3px;
	border-radius: 2px;
}

/* -------------------------------------------------------------------------
   Kleinere Bildschirme
   ------------------------------------------------------------------------- */

@media (max-width: 1024px) {

	.m3-event .hero__titel {
		font-size: 44px;
	}

	.m3-event .h-sektion {
		font-size: 36px;
	}
}

@media (max-width: 768px) {

	.m3-event {
		--m3-raster-innen: 24px;
	}

	.m3-event .m3-beitrag {
		font-size: 17px;
	}

	.m3-event .section {
		padding: 32px 0;
	}

	.m3-event .section:last-child {
		padding-bottom: 56px;
	}

	.m3-event .hero,
	.m3-event .hero--bild {
		min-height: 300px;
	}

	.m3-event .hero__inhalt {
		padding-top: 40px;
		padding-bottom: 40px;
	}

	.m3-event .hero__titel {
		font-size: 32px;
	}

	.m3-event .h-sektion {
		font-size: 28px;
	}
}