/* assets/kopf.css - Haupttheme "Stadtkapelle Landau" 2.0.5/2.0.6 (01.10.2026)
   Kopfleiste, Menue mit Aufklapptafeln, Schublade am Smartphone und die Buttons - fuer BEIDE Themes:
   "Stadtkapelle Landau" und sein Kind "Alternative Startseite 2" (dieses benutzt seit 2.0.3 die header.php des
   Haupttheme). Bis 2.0.4 stand alles hier Folgende in der style.css des Haupttheme, die das Kind nicht laedt;
   ausgeschnitten, Wortlaut und Reihenfolge unveraendert. Geladen von inc/grundlagen.php; die style.css des
   Haupttheme haengt davon ab und kommt danach. Wunsch des Benutzers ("das ganze Menue, in weiss, die
   Funktionen und die beiden Buttons"; eine Schublade fuer beide). */

:root {
	--m-blau: #0876b8;
	--m-tief: #075d91;
	--m-dunkel: #04486f;
	--m-hell: var(--skl-hellblau);
	--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;
}

.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; }

/* ==================================================================
   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; }
/* 1.0.62 (24.09.2026): Ein Sprung zu einem Anker (#...) haelt Abstand zur
   festen Leiste. Vorher landete das Ziel oben am Fensterrand, also UNTER der
   Leiste - die Ueberschrift der angesprungenen Box war verdeckt (gemessen:
   Leiste bis 104 px, Ueberschrift bei 61 px). Betrifft jeden Anker, etwa die
   Plakat-Buttons der Repertoire-Seite. Die Leiste des Adminbereichs rechnet
   WordPress selbst dazu (scroll-padding-top am html-Element). */
[id] { scroll-margin-top: calc(var(--m-kopf-h) + 16px); }
.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); }
/* 2.0.10 (01.10.2026): Die obersten Zeilen sind niedriger - Innenabstand .55rem statt .9rem (rund 46 statt 57 px),
   damit am Smartphone alle Punkte ohne Rollen sichtbar sind. Schriftgroesse unveraendert. Wunsch des Benutzers. */
.m-schublade__zeile { display: flex; align-items: stretch; }
.m-schublade__zeile > a { flex: 1; padding: .55rem 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); }
/* Ein Menuepunkt, der fuer Angemeldete nur aufklappt (z. B. Intern): Der
   Titel ist selbst der Knopf und muss aussehen wie der Link daneben. */
.m-schublade__titelauf { flex: 1; width: auto; padding: .55rem 1rem; border-left: 0; color: var(--m-tinte); font-family: inherit; font-weight: 700; font-size: 1.05rem; text-align: left; }
.m-nav__link--nurtafel { cursor: default; }
.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; }

/* 1.0.44: Die zweite Ebene (Sinfonisches Blasorchester, Bigband) klappt
   selbst auf. Der Knopf traegt die ganze Zeile, damit man ihn am
   Smartphone sicher trifft - nicht nur den Pfeil. Die Schrift der Gruppe
   bleibt unveraendert, nur der Pfeil kommt dazu. */
.m-schublade__gruppenzeile { border-top: 1px solid var(--m-linie); }
.m-schublade__gruppenzeile:first-child { border-top: 0; }
.m-schublade__gruppenauf { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 0 1rem 0 0; border: 0; border-left: 0; background: transparent; text-align: left; cursor: pointer; }
.m-schublade__gruppenauf .m-schublade__gruppe { padding-top: .8rem; padding-bottom: .8rem; }
/* Spezifitaet mit Bedacht: .m-schublade__auf svg (Klasse + Element) ist
   staerker als eine blosse Klasse und wuerde sonst gewinnen. */
.m-schublade__auf svg.m-schublade__gruppenpfeil { flex: 0 0 auto; width: 12px; height: 8px; color: var(--m-blau); }
.m-schublade__gruppenliste { list-style: none; margin: 0; padding: 0 0 .4rem; }
.m-schublade__gruppenliste[hidden] { display: none; }
.m-schublade__fuss { display: flex; flex-wrap: wrap; gap: .6rem; padding: 1rem; }

/* 2.0.5: Was das Haupttheme ueber body erbt, das klassische Kind aber anders hat - hier fest, damit Kopf und
   Schublade in beiden gleich aussehen (im Haupttheme sind es dieselben Werte). */
.m-kopf, .m-schublade { font-family: var(--m-schrift); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
.m-kopf, .m-kopf *, .m-kopf *::before, .m-kopf *::after, .m-schublade, .m-schublade *, .m-schublade *::before, .m-schublade *::after { box-sizing: border-box; }
/* 2.0.6: :where() - die Ruecksetzung wiegt nur wie ein Element, jede Klassenregel oben gewinnt (in 2.0.5 schlug
   ".m-schublade ul" den Innenabstand von .m-schublade__unter). */
:where(.m-kopf, .m-schublade) ul, :where(.m-kopf, .m-schublade) li { margin: 0; padding: 0; }
:where(.m-kopf, .m-schublade) li::before { content: none; }
:where(.m-kopf, .m-schublade) img { max-width: 100%; height: auto; }

/* Kleinere Fenster (aus Abschnitt 9 der style.css) */
@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: 782px) { .admin-bar .m-kopf { top: 0; } }
@media (max-width: 620px) {
	.m-kopf, .m-schublade { font-size: 16px; } /* 2.0.6: wie body im Haupttheme */
	:root { --m-kopf-h: 60px; }
	.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-marke__ort--hinweis { display: block; } /* 1.0.66: TESTSYSTEM/Spielwiese bleibt sichtbar */
	.m-nav-knopf { padding: 8px 12px; }
}
@media (max-width: 420px) {
	.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 print {
	.m-kopf, .m-schublade, .m-nav-knopf { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
	.m-kopf *, .m-schublade *, .m-knopf { transition: none; animation: none; }
}