/*
Theme Name: Stadtkapelle Landau
Template: stadtkapelle-landau
Description: DAS AKTIVE THEME DER WEBSITE. Es ist ein Kind-Theme und braucht das Eltern-Theme "Stadtkapelle Landau - Alternative Startseite 2" (Ordner stadtkapelle-landau); dort liegen alle Seitenkaesten, die Plugin-Ansichten, der Menuebaum und die Startseitenfelder. Das Eltern-Theme also nie loeschen. Ab 1.0.30 heisst dieses Theme schlicht "Stadtkapelle Landau"; die Bauweise ist unveraendert. Ab 1.0.31 wertet die Vorschau beim Ueberfahren einen Anker auf eine Plakat-Grossansicht aus und zeigt dann genau dieses Plakat samt Titel und Datum, statt des ersten Plakats der Seite. In 1.0.31 blieb dabei SKL_MODERN_VERSION auf 1.0.30 stehen - die Konstante haengt als Cache-Buster an style.css und modern.js, Browser haetten die alte modern.js behalten; 1.0.32 zieht sie mit. Ab 1.0.33 blendet die Vorschau die Gutenberg-Blockmarken aus, bevor sie Titel und Datum liest - auf der Website trug die Marke dieselbe Klasse wie die Ueberschrift, der Titel kam leer zurueck und die Vorschau zeigte wieder die ganze Plakatseite. Neues Gesicht fuer die ganze Website (Spielwiese, seit 05.09.2026). Kind-Theme von "Stadtkapelle Landau": Rollen, Seitenrechte, News, Auftritte, Galerien, Plakate, Startseitenfelder und alle Plugins laufen unveraendert weiter. Neu sind Kopfleiste, Fussbereich, Startseite, Seitenrahmen, Schrift und Knoepfe in den Vereinsfarben (Blau #0876b8 / #075d91 / #679dce, Eisblau, weisse Karten) - orientiert an den Kaesten, die im September 2026 auf die Website gekommen sind (Kopfkasten, Wegweiser, Bildschau, Knoepfe im Startseiten-Stil). Die seitenbezogenen Gestaltungen des Eltern-Themes (uebernommen.css) und die Plugin-Ansichten bleiben geladen. Dazu Vorschaubilder beim Ueberfahren interner Verweise (assets/modern.js + REST skl-modern/v1/vorschau). Zurueck geht es durch Umschalten auf das Eltern-Theme. Ab 1.0.34 steht die Fusszeile nicht mehr in diesem Theme: Aufbau und Markup kommen aus dem Eltern-Theme (ab dessen Fassung 0.7.18), die Texte und Verweise aus Design -> Fusszeile. Hier bleiben nur die vier Farbvariablen --fuss-*. Damit zeigen alle vier Themes dieselbe Fusszeile, jedes in seinen Farben. Die allgemeinen .m-sozial-Regeln bleiben hier, weil die Startseite dieselben Symbole auf hellem Grund benutzt. Ab 1.0.35 kann jede Seite ihren WEGWEISER selbst mitbringen: im Editor der Kasten "Wegweiser am Seitenende" mit Ueberschrift und bis zu zehn Knoepfen. Die Weiche ist das Ankreuzfeld - ohne Haken bleibt es bei der gerechneten Liste aus den Unterseiten, mit Haken gilt die eigene. Die Felder sind mit dem vorbelegt, was die Automatik liefert. Die Werte stehen als post_meta, nicht im Seitentext, und sind damit auf allen drei Systemen gleich geschrieben (Regel 3.2). Die Rechtepruefung greift weiter: zeigt ein Ziel auf eine Seite dieser Installation, wird skl_user_can_read_page() gefragt. In 1.0.35 musste man den Haken von Hand setzen; wer nur die vorbelegten Felder aenderte, aenderte ins Leere und bekam keinen Hinweis (vom Benutzer gefunden: geloeschter Eintrag war nach dem Speichern wieder da, weil die Automatik weiterlief und die Felder erneut vorbelegt wurden). Ab 1.0.36 setzt sich der Haken selbst, sobald an einem Feld etwas geaendert wird, und sagt es auch.
Version: 1.0.36
Text Domain: stadtkapelle-landau-modern
*/

/* ==================================================================
   0. Grundwerte
   ================================================================== */
:root {
	--m-blau: #0876b8;
	--m-tief: #075d91;
	--m-dunkel: #04486f;
	--m-hell: #679dce;
	--m-eis: #eaf3fb;
	--m-eis2: #dcecf8;
	--m-grund: #f5f8fb;
	--m-linie: #d8e5ef;
	--m-tinte: #203243;
	--m-grau: #4a5f72;
	--m-grau2: #7a8b9a;
	--m-gold: #f2cf22;
	--m-radius: 18px;
	--m-radius-k: 12px;
	--m-schatten: 0 8px 21px rgba(34, 73, 106, .09);
	--m-schatten2: 0 14px 32px rgba(34, 73, 106, .16);
	--m-schrift: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--m-kopf-h: 72px;
	--m-bahn: 1280px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

/* uebernommen.css setzt body{background:#F6F6F2!important;color:#3B3B3B!important};
   diese Regel ist spezifischer und gewinnt. */
html body.skl-modern {
	margin: 0;
	background: var(--m-grund) !important;
	color: var(--m-tinte) !important;
	font-family: var(--m-schrift);
	font-size: 17px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; }
a { color: var(--m-blau); }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, summary:focus-visible {
	outline: 3px solid var(--m-gold);
	outline-offset: 3px;
}
.site-width, .m-bahn { width: min(var(--m-bahn), calc(100% - 2rem)); margin-inline: auto; }
.nur-vorlesen { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.m-zum-inhalt { position: absolute; left: -999px; top: .5rem; z-index: 2000; padding: .5rem .9rem; background: #fff; color: var(--m-tief); border-radius: 999px; font-weight: 700; }
.m-zum-inhalt:focus { left: .5rem; }

/* Aus dem Eltern-Stilblatt uebernommen, das hier nicht mehr geladen wird. */
.skl-ar-tabelle td:nth-child(1), .skl-ar-tabelle td:nth-child(2) { white-space: nowrap; }
.wp-block-button.skl-musikschule-linkbutton { background: none; border-color: transparent; }
.wp-block-button.skl-musikschule-linkbutton:hover { transform: none; box-shadow: none; }
.wp-block-button.skl-musikschule-linkbutton:hover .wp-block-button__link { transform: translateY(-2px); box-shadow: 0 7px 15px rgba(8, 90, 140, .2); }

/* ==================================================================
   1. Knoepfe
   ================================================================== */
.m-knopf {
	display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
	min-height: 44px; padding: .6rem 1.25rem;
	border-radius: 999px; border: 2px solid var(--m-blau);
	background: var(--m-blau); color: #fff;
	font-family: var(--m-schrift); font-weight: 800; font-size: .97rem; line-height: 1.2; text-decoration: none;
	box-shadow: 0 7px 17px rgba(8, 118, 184, .2);
	transition: background .15s, border-color .15s, transform .15s, box-shadow .15s;
	cursor: pointer;
}
.m-knopf:hover { background: var(--m-tief); border-color: var(--m-tief); color: #fff; transform: translateY(-1px); }
.m-knopf--hell { background: #fff; color: var(--m-tief); border-color: var(--m-linie); box-shadow: var(--m-schatten); }
.m-knopf--hell:hover { background: var(--m-eis); border-color: var(--m-hell); color: var(--m-tief); }
.m-knopf--klein { min-height: 38px; padding: .4rem .95rem; font-size: .9rem; }
.m-knopf--kopf { background: #fff; color: var(--m-tief); border-color: #fff; box-shadow: none; }
.m-knopf--kopf:hover { background: var(--m-eis); border-color: var(--m-eis); color: var(--m-tief); }

/* ==================================================================
   2. Kopfleiste

   1.0.28: Die Leiste rechnet in festen PIXELN, nicht in rem. rem haengt an der
   Grundschrift des Browsers; steht die (wie auf dem Edge des Benutzers) auf 20 statt
   16 px, wuchs das Menue von 774 auf 956 px und der Vereinsname wurde abgeschnitten.
   Mit px sieht die Leiste ueberall gleich aus. Der uebrige Inhalt bleibt in rem und
   waechst weiterhin mit der eingestellten Schriftgroesse.
   ================================================================== */
.m-kopf {
	position: sticky; top: 0; z-index: 1000;
	background: linear-gradient(90deg, var(--m-tief) 0%, var(--m-blau) 100%);
	color: #fff;
	box-shadow: 0 2px 14px rgba(4, 72, 111, .22);
}
.admin-bar .m-kopf { top: 32px; }
.m-kopf--gerollt { box-shadow: 0 6px 22px rgba(4, 72, 111, .35); }
.m-kopf__zeile { display: flex; align-items: center; gap: 16px; min-height: var(--m-kopf-h); }
.m-marke { display: flex; align-items: center; gap: 11px; flex: 1 1 auto; min-width: 0; color: #fff; text-decoration: none; }
.m-marke__text { min-width: 0; }
.m-marke__zeichen { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; background: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, .18); overflow: hidden; }
.m-marke__zeichen img { width: 40px; height: 40px; object-fit: contain; }
.m-marke__name { display: block; font-weight: 800; font-size: 17px; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-marke__ort { display: block; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; opacity: .88; }

.m-nav { margin-left: auto; position: relative; }
/* 1.0.6: Menuepunkte mit Gruppentafel sind NICHT relativ - ihre Tafel haengt am rechten
   Rand der ganzen Leiste, damit sie nie links aus dem Fenster laeuft. */
.m-nav .m-nav__punkt--gruppen { position: static; } /* 1.0.7: staerker als .m-nav__punkt{position:relative} weiter unten */
.m-nav__liste { display: flex; gap: 2px; list-style: none; margin: 0; padding: 0; }
.m-nav__punkt { position: relative; }
.m-nav__link {
	display: flex; align-items: center; gap: 6px;
	padding: 9px 13px; border-radius: 999px;
	color: #fff; font-weight: 700; font-size: 15.5px; text-decoration: none; white-space: nowrap;
	transition: background .15s;
}
.m-nav__link:hover, .m-nav__punkt:focus-within > .m-nav__link { background: rgba(255, 255, 255, .16); }
.m-nav__punkt--hier > .m-nav__link { background: #fff; color: var(--m-tief); }
.m-nav__pfeil { width: 10px; height: 6px; flex: none; }

/* Aufklapptafeln */
.m-tafel {
	position: absolute; top: 100%; left: 50%; z-index: 1001;
	min-width: 260px; padding: .6rem;
	background: #fff; color: var(--m-tinte);
	border: 1px solid var(--m-linie); border-radius: 16px; box-shadow: var(--m-schatten2);
	display: none; transform: translateX(-50%);
}
/* 1.0.2: sichtbar ueber display statt opacity/transform - versteckte,
   verschobene Tafeln unter der klebenden Leiste liessen Chromes
   Bildschirmfoto (CDP) haengen; fuer Besucher aendert sich nichts. */
@keyframes m-tafel-auf { from { opacity: 0; transform: translate(-50%, 6px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes m-tafel-auf-rechts { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.m-tafel::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.m-nav__punkt:hover > .m-tafel, .m-nav__punkt:focus-within > .m-tafel { display: block; animation: m-tafel-auf .15s ease-out; }
.m-nav__punkt--rechts > .m-tafel { left: auto; right: 0; transform: none; }
.m-nav__punkt--rechts:hover > .m-tafel, .m-nav__punkt--rechts:focus-within > .m-tafel { animation-name: m-tafel-auf-rechts; }
.m-tafel__liste { list-style: none; margin: 0; padding: 0; }
.m-tafel__liste li { margin: 0; }
.m-tafel__liste a { display: block; padding: .5rem .75rem; border-radius: 10px; color: var(--m-tinte); font-weight: 600; font-size: .95rem; text-decoration: none; }
.m-tafel__liste a:hover, .m-tafel__liste a.ist-hier { background: var(--m-eis); color: var(--m-tief); }
.m-tafel__ueberblick { display: block; margin: 0 0 .4rem; padding: .55rem .75rem; border-radius: 10px; background: var(--m-eis); color: var(--m-tief); font-weight: 800; font-size: .95rem; text-decoration: none; }
.m-tafel__ueberblick:hover { background: var(--m-eis2); }
.m-tafel--gruppen {
	grid-template-columns: repeat(var(--m-spalten, 3), minmax(170px, 1fr)); gap: .3rem .9rem;
	left: auto; right: 0; width: max-content; min-width: min(620px, calc(100vw - 2rem)); max-width: min(760px, calc(100vw - 2rem)); transform: none;
}
.m-nav__punkt:hover > .m-tafel--gruppen, .m-nav__punkt:focus-within > .m-tafel--gruppen { display: grid; animation-name: m-tafel-auf-rechts; }
.m-tafel--gruppen .m-tafel__ueberblick { grid-column: 1 / -1; }
.m-tafel__gruppe { padding: .2rem 0; }
.m-tafel__gruppentitel { display: block; margin: 0 0 .25rem; padding: .45rem .75rem; border-bottom: 2px solid var(--m-eis2); color: var(--m-tief); font-weight: 800; text-decoration: none; }
.m-tafel__gruppentitel:hover { color: var(--m-blau); }

/* 1.0.11: .m-kopf__cta entfaellt - kein Knopf mehr in der Kopfleiste. */

/* Schublade (Smartphone) */
.m-nav-knopf {
	display: none; align-items: center; gap: 8px; margin-left: auto;
	min-height: 44px; padding: 8px 14px;
	border: 1px solid rgba(255, 255, 255, .55); border-radius: 999px; background: transparent;
	color: #fff; font: 700 15px var(--m-schrift); cursor: pointer;
}
.m-nav-knopf__balken { display: inline-flex; flex-direction: column; gap: 4px; }
.m-nav-knopf__balken span { display: block; width: 18px; height: 2px; border-radius: 2px; background: #fff; }
.m-schublade { position: fixed; inset: 0; z-index: 1100; display: none; overflow: auto; overscroll-behavior: contain; background: #fff; color: var(--m-tinte); }
.m-schublade[data-offen="true"] { display: block; }
body.m-schublade-offen { overflow: hidden; }
.m-schublade__kopf { position: sticky; top: 0; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .7rem 1rem; background: linear-gradient(90deg, var(--m-tief), var(--m-blau)); color: #fff; font-weight: 800; }
.m-schublade__zu { width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .2); color: #fff; font-size: 1.6rem; line-height: 1; cursor: pointer; }
.m-schublade__liste, .m-schublade__unter { list-style: none; margin: 0; padding: 0; }
.m-schublade__liste > li { border-bottom: 1px solid var(--m-linie); }
.m-schublade__zeile { display: flex; align-items: stretch; }
.m-schublade__zeile > a { flex: 1; padding: .9rem 1rem; color: var(--m-tinte); font-weight: 700; font-size: 1.05rem; text-decoration: none; }
.m-schublade__zeile > a.ist-hier { color: var(--m-blau); }
.m-schublade__auf { width: 54px; border: 0; border-left: 1px solid var(--m-linie); background: transparent; color: var(--m-blau); cursor: pointer; }
.m-schublade__auf svg { width: 14px; height: 9px; transition: transform .2s; }
.m-schublade__auf[aria-expanded="true"] svg { transform: rotate(180deg); }
.m-schublade__unter { padding: .3rem 0 .6rem; background: var(--m-grund); }
.m-schublade__unter[hidden] { display: none; }
.m-schublade__unter a { display: block; padding: .6rem 1rem .6rem 1.5rem; color: var(--m-tinte); font-size: 1rem; text-decoration: none; }
.m-schublade__unter a.ist-hier { color: var(--m-blau); font-weight: 700; }
.m-schublade__unter a.m-schublade__tief { padding-left: 2.2rem; }
.m-schublade__gruppe { display: block; padding: .7rem 1rem .2rem 1.5rem; color: var(--m-tief); font-weight: 800; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; }
.m-schublade__fuss { display: flex; flex-wrap: wrap; gap: .6rem; padding: 1rem; }

/* ==================================================================
   3. Titelband und Brotkrumen
   ================================================================== */
.m-band { background: linear-gradient(135deg, #eaf3fb 0%, #f8fbfe 62%, #dcecf8 100%); border-bottom: 1px solid var(--m-linie); }
.m-band__inhalt { padding: 1.5rem 0 1.4rem; }
.m-band--schmal .m-band__inhalt { padding: .65rem 0; }
.m-krumen { display: flex; flex-wrap: wrap; gap: .3rem .45rem; margin: 0; padding: 0; list-style: none; font-size: .82rem; font-weight: 600; color: var(--m-grau); }
.m-krumen a { color: var(--m-grau); text-decoration: none; }
.m-krumen a:hover { color: var(--m-blau); }
.m-krumen li + li::before { content: "/"; margin-right: .45rem; color: var(--m-hell); }
.m-band h1 { margin: .35rem 0 0; color: var(--m-tief); font-size: clamp(1.7rem, 3.4vw, 2.6rem); font-weight: 800; line-height: 1.12; letter-spacing: -.01em; }
.m-band__text { margin: .5rem 0 0; max-width: 46rem; color: var(--m-grau); font-size: 1.05rem; }

/* ==================================================================
   4. Inhalt
   ================================================================== */
.m-inhalt { padding: 2rem 0 3rem; }
.m-inhalt--schmal .m-artikel, .m-inhalt--schmal .m-zurueck { max-width: 52rem; margin-inline: auto; }
.m-blatt { padding: clamp(1.2rem, 3vw, 2.2rem); background: #fff; border: 1px solid var(--m-linie); border-radius: var(--m-radius); box-shadow: var(--m-schatten); }
.m-artikel > *:first-child { margin-top: 0; }
.m-artikel h1 { color: var(--m-tief); font-size: clamp(1.7rem, 3vw, 2.3rem); line-height: 1.15; }
.m-artikel h2 { margin: 1.8rem 0 .7rem; color: var(--m-tief); font-size: clamp(1.35rem, 2.4vw, 1.75rem); line-height: 1.25; }
.m-artikel h3 { margin: 1.4rem 0 .5rem; color: var(--m-tief); font-size: 1.2rem; line-height: 1.3; }
.m-artikel h4 { margin: 1.2rem 0 .4rem; color: var(--m-tinte); font-size: 1.05rem; }
.m-artikel p { margin: 0 0 1rem; }
.m-artikel ul, .m-artikel ol { margin: 0 0 1rem; padding-left: 1.4rem; }
.m-artikel li { margin: 0 0 .3rem; }
.m-artikel a { color: var(--m-blau); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.m-artikel a:hover { color: var(--m-tief); }
.m-artikel img { border-radius: var(--m-radius-k); }
.m-artikel figure { margin: 0 0 1.2rem; }
.m-artikel figcaption { margin-top: .4rem; color: var(--m-grau); font-size: .88rem; }
.m-artikel blockquote { margin: 1.2rem 0; padding: .6rem 1.2rem; border-left: 4px solid var(--m-hell); background: var(--m-eis); border-radius: 0 12px 12px 0; }
.m-artikel hr { border: 0; border-top: 1px solid var(--m-linie); margin: 1.6rem 0; }
.m-artikel .wp-block-table, .m-artikel .m-tabelle, .m-tabelle { overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; }
.m-artikel table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.m-artikel th { padding: .6rem .7rem; background: linear-gradient(90deg, var(--m-tief), var(--m-blau)); color: #fff; text-align: left; }
.m-artikel td { padding: .55rem .7rem; border-bottom: 1px solid var(--m-linie); vertical-align: top; }
.m-artikel tbody tr:nth-child(even) td { background: #f3f7fb; }
.m-artikel .wp-block-buttons { gap: .6rem; }
.m-artikel .wp-block-button__link {
	border-radius: 999px; padding: .65rem 1.2rem;
	background: var(--m-blau); color: #fff; border: 2px solid var(--m-blau);
	font-weight: 800; font-size: .96rem; text-decoration: none; box-shadow: 0 7px 17px rgba(8, 118, 184, .2);
}
.m-artikel .wp-block-button__link:hover { background: var(--m-tief); border-color: var(--m-tief); color: #fff; }
.m-artikel .is-style-outline .wp-block-button__link { background: #fff; color: var(--m-tief); border-color: var(--m-linie); box-shadow: var(--m-schatten); }
.m-artikel input[type="text"], .m-artikel input[type="email"], .m-artikel input[type="tel"], .m-artikel input[type="search"], .m-artikel input[type="number"], .m-artikel input[type="date"], .m-artikel textarea, .m-artikel select {
	width: 100%; padding: .65rem .8rem; border: 1px solid var(--m-linie); border-radius: 10px; background: #fff; font: inherit; color: var(--m-tinte);
}
.m-artikel input:focus, .m-artikel textarea:focus, .m-artikel select:focus { border-color: var(--m-hell); outline: 3px solid rgba(103, 157, 206, .35); outline-offset: 0; }
.m-artikel input[type="submit"], .m-artikel button[type="submit"] { display: inline-flex; align-items: center; min-height: 44px; padding: .6rem 1.25rem; border-radius: 999px; border: 2px solid var(--m-blau); background: var(--m-blau); color: #fff; font: 800 .97rem var(--m-schrift); cursor: pointer; }
.m-artikel .wpcf7-form p { margin-bottom: .9rem; }
.m-zurueck { margin: 1.5rem 0 0; font-weight: 700; }
.m-zurueck a { text-decoration: none; }
.m-zurueck a:hover { text-decoration: underline; }
.m-meta { display: flex; flex-wrap: wrap; gap: .6rem 1.2rem; margin: 0 0 1rem; color: var(--m-grau); font-size: .9rem; font-weight: 600; }
.m-hinweis { padding: 1rem 1.2rem; background: #fff; border: 1px solid var(--m-linie); border-left: 5px solid var(--m-hell); border-radius: 12px; }

/* Seitenumbruch-Navigation (wp_link_pages) */
.m-seiten { margin: 1.5rem 0 0; font-weight: 700; }

/* ==================================================================
   5. Karten (News, Archive, Suche)
   ================================================================== */
.m-karten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; list-style: none; margin: 0; padding: 0; }
.m-karte { display: flex; flex-direction: column; overflow: hidden; background: #fff; border: 1px solid var(--m-linie); border-radius: var(--m-radius); box-shadow: var(--m-schatten); transition: transform .18s, box-shadow .18s; }
.m-karte:hover { transform: translateY(-3px); box-shadow: var(--m-schatten2); }
.m-karte__bild { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--m-eis); }
.m-karte__bild img { display: block; width: 100%; height: 100%; object-fit: cover; }
.m-karte__bild--hoch img { object-fit: contain; }
.m-karte__ersatz { display: grid; place-items: center; height: 100%; color: var(--m-hell); font-size: 3rem; }
.m-karte__rumpf { display: flex; flex: 1; flex-direction: column; gap: .35rem; padding: 1rem 1.1rem 1.2rem; }
.m-karte__datum { margin: 0; color: var(--m-blau); font-size: .78rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.m-karte__titel { margin: 0; font-size: 1.12rem; line-height: 1.3; }
.m-karte__titel a { color: var(--m-tief); text-decoration: none; }
.m-karte__titel a:hover { color: var(--m-blau); }
.m-karte__text { margin: 0; color: var(--m-grau); font-size: .95rem; }
.m-karte__mehr { margin-top: auto; padding-top: .5rem; color: var(--m-blau); font-size: .92rem; font-weight: 700; text-decoration: none; }
.m-karte__mehr:hover { text-decoration: underline; }
.m-blaettern { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin: 2rem 0 0; }
.m-blaettern .page-numbers { display: inline-flex; align-items: center; min-height: 40px; padding: .4rem .9rem; border: 1px solid var(--m-linie); border-radius: 999px; background: #fff; color: var(--m-tief); font-weight: 700; text-decoration: none; }
.m-blaettern .page-numbers.current { background: var(--m-blau); border-color: var(--m-blau); color: #fff; }

/* ==================================================================
   6. Startseite
   ================================================================== */
.m-start-kopf { background: linear-gradient(135deg, #eaf3fb 0%, #f8fbfe 55%, #dcecf8 100%); border-bottom: 1px solid var(--m-linie); }
.m-start-kopf__raster { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(300px, .9fr); gap: 2rem; align-items: start; padding: clamp(2rem, 5vw, 3.5rem) 0; }
.m-kicker { margin: 0 0 .6rem; color: var(--m-blau); font-size: .85rem; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.m-start-kopf h1 { margin: 0 0 .8rem; color: var(--m-tief); font-size: clamp(2.2rem, 5vw, 3.6rem); font-weight: 800; line-height: 1.05; letter-spacing: -.02em; }
.m-start-kopf__lead { margin: 0 0 1.4rem; max-width: 40rem; color: var(--m-grau); font-size: clamp(1.05rem, 1.6vw, 1.22rem); }
.m-knoepfe { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0 0 1.2rem; padding: 0; list-style: none; }
.m-sozial { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.m-sozial__wort { margin-right: .3rem; color: var(--m-grau); font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.m-sozial a { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; min-height: 40px; padding: 8px; border: 1px solid var(--m-linie); border-radius: 9px; background: #fff; box-shadow: 0 4px 12px rgba(34, 73, 106, .1); text-decoration: none; transition: border-color .15s, box-shadow .15s; }
.m-sozial a:hover { border-color: var(--m-hell); box-shadow: 0 7px 16px rgba(34, 73, 106, .16); }
.m-sozial__f { display: grid; width: 24px; height: 24px; place-items: center; border-radius: 6px; background: #1877f2; color: #fff; font: 800 1.15rem/1 Arial, sans-serif; }
.m-sozial img { display: block; width: 24px; height: 24px; border-radius: 6px; object-fit: cover; }
.m-sozial svg { width: 24px; height: 24px; fill: #f00; }
.m-sozial__paypal { display: grid; width: 24px; height: 24px; place-items: center; border-radius: 6px; background: #0070ba; color: #fff; font: italic 800 1.05rem/1 Arial, sans-serif; }
/* 1.0.11: das Siegel "Seit 1928" von der alten Startseite - klein und dezent unter der Folgen-Zeile
   (Wunsch des Benutzers); Texte aus denselben Feldern wie der Kicker. */
.m-siegel { display: flex; align-items: center; justify-content: center; width: 230px; max-width: 100%; height: 104px; margin: 0 0 1.5rem; border-radius: 14px; background: linear-gradient(135deg, #7ba8d4 0%, #5b8fc6 55%, #4a80b8 100%); box-shadow: 0 6px 16px rgba(34, 73, 106, .14); } /* 1.0.23: etwas dunkler */
.m-siegel__oval { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 92%; height: 72%; padding: 0 .5rem; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .45); background: rgba(255, 255, 255, .2); color: #fff; text-align: center; line-height: 1.15; white-space: nowrap; } /* 1.0.23: breiter, kein Umbruch - in Edge stand die Unterzeile ueber */
.m-siegel__oval strong { font-family: Georgia, "Times New Roman", serif; font-size: 1.15rem; font-weight: 700; letter-spacing: .01em; }
.m-siegel__oval span { margin-top: .15rem; font-size: .66rem; font-weight: 500; letter-spacing: 0; }
/* 1.0.13: einspaltig (Smartphone, Tablet) sitzt das Siegel mittig - Wunsch des Benutzers. */
@media (max-width: 900px) { .m-siegel { width: 200px; height: 92px; margin: 0 auto 1.2rem; } }

.m-termine { padding: 1.2rem 1.2rem 1rem; background: #fff; border: 1px solid var(--m-linie); border-radius: var(--m-radius); box-shadow: var(--m-schatten); }
.m-termine__wort { margin: 0 0 .5rem; color: var(--m-blau); font-size: .8rem; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.m-termine__liste { list-style: none; margin: 0; padding: 0; }
.m-termine__liste li + li { border-top: 1px solid var(--m-linie); }
.m-termine__liste a { display: grid; grid-template-columns: 58px 1fr; gap: .8rem; align-items: center; padding: .65rem 0; color: var(--m-tinte); text-decoration: none; }
.m-termine__liste a:hover .m-termine__wer { color: var(--m-blau); }
.m-termine__datum { display: grid; place-items: center; aspect-ratio: 1; border-radius: 12px; background: linear-gradient(135deg, var(--m-blau), var(--m-hell)); color: #fff; font-size: 1.15rem; font-weight: 800; line-height: 1.05; text-align: center; }
.m-termine__datum small { display: block; font-size: .62rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.m-termine__wer { display: block; font-size: .98rem; font-weight: 700; }
.m-termine__ort { display: block; color: var(--m-grau); font-size: .85rem; }
.m-termine__mehr { display: inline-block; margin-top: .6rem; font-weight: 700; text-decoration: none; }
.m-termine__leer { margin: 0; color: var(--m-grau); }

.m-abschnitt { padding: clamp(2rem, 4vw, 3rem) 0; }
.m-abschnitt--hell { background: #fff; border-top: 1px solid var(--m-linie); border-bottom: 1px solid var(--m-linie); }
.m-abschnitt__kopf { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: .6rem 1rem; margin: 0 0 1.3rem; }
.m-abschnitt__kopf h2 { margin: 0; color: var(--m-tief); font-size: clamp(1.5rem, 3vw, 2.1rem); line-height: 1.15; }
.m-abschnitt__kopf .m-kicker { margin-bottom: .25rem; }
.m-abschnitt__mehr { display: inline-flex; gap: .6rem; flex-wrap: wrap; }
.m-abschnitt__mehr a { color: var(--m-blau); font-weight: 700; text-decoration: none; white-space: nowrap; }
.m-abschnitt__mehr a:hover { text-decoration: underline; }

.m-klang { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; list-style: none; margin: 0; padding: 0; }
.m-klang__karte { position: relative; display: block; min-height: 230px; overflow: hidden; border-radius: var(--m-radius); background: linear-gradient(135deg, var(--m-tief), var(--m-hell)); color: #fff; text-decoration: none; box-shadow: var(--m-schatten); }
.m-klang__karte img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.m-klang__karte:hover img { transform: scale(1.04); }
.m-klang__karte::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(4, 72, 111, 0) 30%, rgba(4, 72, 111, .88) 100%); }
.m-klang__text { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 1.1rem 1.2rem; }
.m-klang__name { display: block; font-size: 1.25rem; font-weight: 800; line-height: 1.2; }
.m-klang__stimmen { display: block; margin-top: .2rem; font-size: .88rem; opacity: .92; }
.m-klang__termin { display: inline-block; margin-top: .5rem; padding: .2rem .6rem; border-radius: 999px; background: rgba(255, 255, 255, .2); font-size: .8rem; font-weight: 700; }
.m-klang__note { position: absolute; right: 1rem; top: 1rem; z-index: 1; font-size: 2.2rem; opacity: .35; }

.m-mitmachen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; list-style: none; margin: 0; padding: 0; }
.m-mitmachen a { display: flex; flex-direction: column; gap: .3rem; padding: 1.4rem 1.4rem 1.3rem; border-radius: var(--m-radius); background: linear-gradient(135deg, var(--m-tief), var(--m-blau)); color: #fff; text-decoration: none; box-shadow: var(--m-schatten); transition: transform .18s, box-shadow .18s; }
.m-mitmachen a:hover { transform: translateY(-3px); box-shadow: var(--m-schatten2); }
.m-mitmachen__klein { font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .88; }
.m-mitmachen__gross { font-size: 1.35rem; font-weight: 800; line-height: 1.2; }
.m-mitmachen__gross span { margin-left: .3rem; }

/* ==================================================================
   7. Fussbereich
   ================================================================== */
/* Fussbereich - seit 1.0.34 kommt sein Aufbau aus dem Eltern-Theme
   (Block "skl-fusszeile" in assets/uebernommen.css), damit alle Themes
   dieselbe Fusszeile zeigen. Aus diesem Theme kommt nur noch die Farbe.
   Die Texte und Verweise stehen unter Design -> Fusszeile. */
.m-fuss {
	--fuss-oben: var(--m-tief);
	--fuss-unten: var(--m-dunkel);
	--fuss-text: #dbe9f5;
	--fuss-hell: #fff;
}

/* ==================================================================
   8. Vorschau beim Ueberfahren
   ================================================================== */
.m-vorschau {
	position: fixed; z-index: 1200; width: 300px; max-width: calc(100vw - 2rem);
	overflow: hidden; background: #fff; border: 1px solid var(--m-linie); border-radius: 16px; box-shadow: var(--m-schatten2);
	pointer-events: none; opacity: 0; transform: translateY(6px); transition: opacity .15s, transform .15s;
}
.m-vorschau[data-sichtbar="true"] { opacity: 1; transform: none; }
/* 1.0.5: das Bild wird eingepasst statt beschnitten - bei Portraets sah man den Kopf nicht
   (Wunsch des Benutzers). Hochformate bekommen seitlich Eisblau, Querformate fuellen die Breite. */
.m-vorschau__bild { display: block; width: 100%; height: auto; max-height: 230px; object-fit: contain; background: var(--m-eis); }
/* 1.0.5: ohne Bild kein leeres Feld - [hidden] verlor sonst gegen display:block. */
.m-vorschau__bild[hidden] { display: none; }
.m-vorschau__text { padding: .7rem .9rem .8rem; }
.m-vorschau__wort { display: block; margin: 0 0 .2rem; color: var(--m-blau); font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.m-vorschau__titel { display: block; margin: 0 0 .2rem; color: var(--m-tief); font-size: .98rem; font-weight: 800; line-height: 1.25; }
.m-vorschau__auszug { display: block; color: var(--m-grau); font-size: .85rem; line-height: 1.45; }
/* 1.0.14/1.0.15 (Versuch): Wasserzeichen - die Landavia liegt fest im Fenster unten rechts als
   hauchduenne Schicht UEBER dem Inhalt (z-index 5: ueber Text und Kaesten, unter Kopfleiste 1000,
   Tafeln, Schublade und Vorschau). Multipliziert: Text bleibt schwarz lesbar, weisse Flaechen
   bekommen den blassen blauen Abdruck, das helle Papier des Aquarells verschwindet. 1.0.14 lag es
   hinter dem Inhalt und war hinter den weissen Kaesten unsichtbar. pointer-events: none -
   Knoepfe und Links darunter bleiben klickbar. Eingeschaltet nur auf den Seiten aus
   skl_modern_wasserzeichen_seiten(). 1.0.16: brightness(1.32) macht das Papier des Aquarells
   (gemessen 196-209 von 255) weiss, sonst stand ein schwaches Rechteck ueber der Karte. */
.m-wasserzeichen { position: fixed; right: -3vw; bottom: -2vh; z-index: 5; width: min(70vh, 80vw); aspect-ratio: 2716 / 1995; background: url("assets/landavia.jpg") no-repeat center / contain; opacity: .11; mix-blend-mode: multiply; filter: brightness(1.32); pointer-events: none; } /* 1.0.18: .14 -> .11, "ein hauch dezenter" */
@media (max-width: 900px) { .m-wasserzeichen { width: 95vw; right: -10vw; bottom: 0; opacity: .1; } }
@media print { .m-wasserzeichen { display: none; } }
/* 1.0.9: Tabellenseiten (Repertoire, Gebuehrenordnung, Vorlagen) zeigen statt eines Bildes die
   erste Tabelle mit Ueberschrift und Motto - Wunsch des Benutzers: kein Plakat als Vorschau. */
.m-vorschau--tabelle { width: 380px; }
.m-vorschau--tabelle .m-vorschau__text { padding-bottom: .45rem; }
.m-vorschau__tabelle { padding: 0 .9rem .85rem; }
.m-vorschau__tabelle[hidden] { display: none; }
.m-vorschau__tabtitel { display: block; margin: 0 0 .15rem; color: var(--m-tief); font-size: .86rem; font-weight: 800; line-height: 1.3; }
.m-vorschau__tabunter { display: block; margin: 0 0 .5rem; color: var(--m-grau); font-size: .78rem; }
.m-vorschau__tabelle table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .76rem; line-height: 1.3; border: 1px solid var(--m-linie); border-radius: 8px; overflow: hidden; }
.m-vorschau__tabelle th { background: var(--m-blau); color: #fff; font-size: .6rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; text-align: left; padding: .35rem .5rem; }
.m-vorschau__tabelle td { padding: .3rem .5rem; border-top: 1px solid var(--m-linie); vertical-align: top; }
.m-vorschau__tabelle thead + tbody tr:first-child td { border-top: 0; }
.m-vorschau__tabelle tbody tr:nth-child(even) td { background: var(--m-grund); }
.m-vorschau__tabelle td:first-child { font-weight: 700; color: var(--m-tinte); }
.m-vorschau__tabelle td + td { color: var(--m-tief); }
.m-vorschau__tabmehr { display: block; margin: .4rem 0 0; color: var(--m-grau); font-size: .74rem; }
@media (hover: none) { .m-vorschau { display: none; } }

/* ==================================================================
   9. Kleinere Fenster
   ================================================================== */
@media (max-width: 1040px) {
	.m-nav { display: none; }
	.m-nav-knopf { display: inline-flex; flex: none; }
	/* 1.0.4: Nichts aus der Leiste darf die Seite verbreitern - auf dem Telefon
	   (Roboto ist breiter als Segoe UI) ragte der Menue-Knopf sonst hinaus und
	   Chrome zoomte die ganze Seite heraus. */
	.m-kopf { overflow: hidden; }
}
@media (max-width: 900px) {
	.m-karten, .m-klang, .m-mitmachen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.m-start-kopf__raster { grid-template-columns: 1fr; gap: 1.4rem; }
}
@media (max-width: 782px) { .admin-bar .m-kopf { top: 0; } }
@media (max-width: 620px) {
	:root { --m-kopf-h: 60px; }
	html body.skl-modern { font-size: 16px; }
	.m-marke__zeichen { width: 40px; height: 40px; }
	.m-marke__zeichen img { width: 34px; height: 34px; }
	.m-marke__name { font-size: 15px; }
	.m-marke__ort { display: none; }
	.m-nav-knopf { padding: 8px 12px; }
	.m-karten, .m-klang, .m-mitmachen { grid-template-columns: 1fr; }
	.m-klang__karte { min-height: 190px; }
	.m-knoepfe li { flex: 1 1 calc(50% - .6rem); }
	.m-knoepfe .m-knopf { width: 100%; padding-inline: .8rem; }
	.m-termine__liste li:nth-child(n+4) { display: none; }
	.m-blatt { padding: 1.1rem; }
	.m-inhalt { padding: 1.4rem 0 2.2rem; }
	.m-band__inhalt { padding: 1.1rem 0 1rem; }
	.m-abschnitt__kopf { align-items: start; flex-direction: column; }
}
@media (max-width: 420px) {
	.m-knoepfe li { flex-basis: 100%; }
	.m-marke__name { font-size: 14px; }
	/* Menue-Knopf nur als Symbol; das Wort bleibt fuer Vorleseprogramme. */
	.m-nav-knopf { min-width: 44px; padding: 8px 11px; }
	.m-nav-knopf__wort { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition: none !important; animation: none !important; }
}
@media print {
	.m-kopf, .m-fuss, .m-schublade, .m-vorschau, .m-nav-knopf { display: none !important; }
}

/* ==================================================================
   11. Breite Bildschirme - seit 1.0.24 keine Verkleinerung mehr.
   1.0.19 bis 1.0.22 hatten ab 1400 px alles zehn Prozent kleiner gemacht
   (Grundschrift, Bahn 1152 px, Kopfleiste 65 px); der Benutzer hat das am
   07.09.2026 komplett zurueckgenommen ("hat nicht funktioniert"). Es gilt
   wieder auf jeder Breite: Bahn 1280 px, Grundschrift 17 px, Kopf 72 px.
   ================================================================== */

/* ==================================================================
   1.0.24/1.0.25: Karte "Verein und Datenschutz" auf "Mitglied werden" (Inhalt aus der Seite
   Formulare und Infos uebernommen; der Umschlag traegt .skl-formulare-infos-seite aus
   uebernommen.css fuer Farben und Breite). 1.0.25: die drei Knoepfe am Desktop nebeneinander
   und gleich gross (Raster), unter 900 px untereinander. Die Regeln aus uebernommen.css
   (.skl-formulare-buttons: flex, Spalte, !important) werden ueber die hoehere Spezifitaet
   des Umschlags uebersteuert.
   ================================================================== */
.skl-mw-unterlagen { padding-top: 24px; }
.skl-mw-unterlagen .skl-formulare-buttons { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .9rem !important; max-width: none; }
.skl-mw-unterlagen .skl-formular-button { display: flex; width: auto; min-width: 0; }
.skl-mw-unterlagen .skl-formular-button .wp-block-button__link { flex: 1 1 auto; }
@media (max-width: 900px) {
	.skl-mw-unterlagen .skl-formulare-buttons { grid-template-columns: minmax(0, 1fr); }
}

/* ==================================================================
   1.0.26: Bildschau zum Durchklicken auf der Big-Band-Seite. Die Seite traegt
   statt des Plugin-Sliders ([skl_bigband_slider], stakald-news-und-auftritte)
   einen Galerie-Block mit der Klasse skl-sbo-gb-bildschau in einem Umschlag
   .skl-bb-bildschau. Knoepfe, Zaehler und Pfeiltasten kommen aus
   assets/bildschau.js des Eltern-Themes (0.7.9); dessen Streifen-Regeln in
   uebernommen.css gelten nur unter .skl-sbo-gb-seite - hier dieselben Werte
   fuer den Umschlag der Big-Band-Seite.
   ================================================================== */
.skl-bb-bildschau .skl-sbo-gb-bildschau { display: flex !important; flex-wrap: nowrap !important; align-items: stretch !important; gap: 0 !important; margin: 0 !important; padding: 0 !important; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; border-radius: 12px; background: #f3f7fb; -webkit-overflow-scrolling: touch; }
.skl-bb-bildschau .skl-sbo-gb-bildschau::-webkit-scrollbar { display: none; }
.skl-bb-bildschau .skl-sbo-gb-bildschau > .wp-block-image { display: block !important; flex: 0 0 100% !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; aspect-ratio: 3 / 2; max-height: 560px; scroll-snap-align: start; scroll-snap-stop: always; }
.skl-bb-bildschau .skl-sbo-gb-bildschau > .wp-block-image a { display: block; width: 100%; height: 100%; }
.skl-bb-bildschau .skl-sbo-gb-bildschau > .wp-block-image img { display: block !important; width: 100% !important; height: 100% !important; max-height: none !important; object-fit: contain !important; margin: 0 !important; border-radius: 12px; }
.skl-bb-bildschau .skl-sbo-gb-bildschau > .wp-block-image figcaption { position: absolute; left: 1rem; right: 1rem; bottom: 1rem; margin: 0; padding: .35rem .75rem; border-radius: 10px; background: rgba(255,255,255,.88); color: #334b60; font-size: .9rem; line-height: 1.45; text-align: center; }
.skl-bb-bildschau { margin: 0 0 .5rem; }