/* Milonguita Bändermenü
 *
 * Nach dem Entwurf von Dieter Lettau (MENUE_01 bis MENUE_03):
 * senkrechte, halb durchsichtige Farbbänder am linken Bildrand, mittig.
 * Beim Überfahren wird das Band heller und länger. Beim Anklicken klappt
 * das Untermenü auf.
 *
 * Die Bandfarbe kommt als Zahlentripel aus dem PHP (--mlm-farbe) und
 * wird hier mit Deckkraft versehen. Der Text bleibt dadurch bei jeder
 * Deckkraft gleich gut lesbar.
 *
 * ---------------------------------------------------------------------
 * Wachsen statt verschieben
 *
 * Bis zum 10.08.2026 wanderte das Band beim Überfahren um 30 Pixel nach
 * rechts. Dieter hat gemeldet, was dabei herauskommt: am linken Rand
 * bleibt ein weisser Streifen zurück, und unter dem Menü erscheint ein
 * Rollbalken.
 *
 * Er hat gleichzeitig auf tangotanzenmachtschoen.de verwiesen, wo dieselbe
 * Idee ohne diese Nebenwirkungen umgesetzt ist. Dort lautet die Regel
 * „transform: translateX(-30px); width: 130%". Das Menü sitzt rechts, das
 * Band schiebt sich also gar nicht weg vom Rand, es wird zum Inhalt hin
 * länger. Die Kante am Bildrand steht still.
 *
 * Hier ist das gespiegelt: die linke Kante bleibt immer bei null, nur die
 * rechte Kante rückt vor. Damit ist beides erledigt, kein weisser
 * Streifen und kein Rollbalken. Und die Bewegung, die Dieter im Entwurf
 * wollte, bleibt erhalten.
 */

:root {
	--mlm-ruhe: .78;   /* Deckkraft in Ruhe */
	--mlm-wach: .96;   /* beim Überfahren, rund 20 Prozent weniger durchsichtig */

	--mlm-schub: 30px; /* so weit wächst das Band beim Überfahren nach rechts */
	--mlm-auf: 22px;   /* so weit steht ein aufgeklappter Block vor */

	/*
	 * Maße aus Dieters Parameterblatt vom 09.08.2026.
	 * Auf schmalen Bildschirmen skalieren sie mit, sonst ragt das Menü
	 * über den halben Bildschirm. Die Vorgabewerte gelten ab etwa 1400 px
	 * Fensterbreite.
	 *
	 * Zur Schriftgröße: Er notiert 36 pt / 48 px. Das passt nicht zu
	 * seinen 400 px Blockbreite. „SCHNUPPERWORKSHOP" braucht bei 48 px
	 * rund 518 px, in jeder Schrift. In seinem eigenen Entwurfsbild misst
	 * die Zeile aber nur etwa 355 px, entspricht also rund 32 px. Die
	 * 400 px sind eindeutig, deshalb richtet sich die Größe danach: der
	 * längste Punkt muss hineinpassen. Ergebnis 32 px, Unterpunkte 25 px
	 * im selben Verhältnis wie seine 48 zu 37.
	 *
	 * Die Maße stehen auf :root, nicht auf .mlm. Der Einzug des Inhalts
	 * weiter unten muss die Menübreite kennen. Stand sie nur auf .mlm, war
	 * sie dort unsichtbar, der Ersatzwert griff, und das Menü überlappte
	 * den Inhalt um knapp 60 Pixel.
	 */
	--mlm-breite:      min(400px, 30vw);
	--mlm-hoehe:       clamp(40px, 3.9vw, 55px);
	--mlm-hoehe-unter: clamp(31px, 3vw,   42px);
	--mlm-schrift:       clamp(1rem,   2vw,   32px);
	--mlm-schrift-unter: clamp(.8rem,  1.55vw, 25px);
}

.mlm {
	/*
	 * Am linken Bildrand, senkrecht mittig, auf jeder Seite. Es ist die
	 * einzige Navigation der Website, deshalb bleibt es beim Scrollen
	 * stehen: man soll nicht erst nach oben zurückmüssen, um woanders
	 * hinzukommen.
	 */
	position: fixed;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	z-index: 100;
	width: var(--mlm-breite);

	/*
	 * Kein Beschneiden und kein eigener Rollbereich.
	 *
	 * Vorher stand hier „max-height: 90vh; overflow-y: auto". Sobald ein
	 * Band breiter wurde als das Menü, machte der Browser daraus auch
	 * einen waagerechten Rollbalken, und genau den hat Dieter gesehen.
	 * Weil die Bänder nach rechts über das Menü hinauswachsen sollen,
	 * darf hier nichts beschnitten werden.
	 *
	 * Das Menü ist damit ungebremst hoch. Sechs Bänder und das längste
	 * Untermenü ergeben knapp 470 Pixel, das passt auf jeden Bildschirm.
	 * Für sehr flache Fenster steht weiter unten trotzdem eine Bremse.
	 *
	 * Ein Rollbalken für die Seite entsteht dadurch nicht: das Menü ist
	 * fest positioniert, und feste Elemente vergrößern den rollbaren
	 * Bereich der Seite nicht.
	 */
	overflow: visible;
}

/*
 * Platz für das Menü schaffen, damit es nicht über dem Text liegt.
 *
 * Der Inhalt rückt um die Menübreite nach rechts, plus den Weg, den ein
 * Band im weitesten Fall vorwächst: aufgeklappter Block und Maus darüber
 * zugleich. Dahinter noch etwas Luft, damit sich Band und Text nicht
 * berühren.
 *
 * Rechts derselbe Abstand, sonst klebt der Inhalt am Fensterrand: Astra
 * zentriert den Container normalerweise, durch den linken Einzug fällt
 * diese Zentrierung weg.
 */
@media (min-width: 861px) {
	body .site-content,
	body .site-footer {
		padding-left: calc(var(--mlm-breite) + var(--mlm-auf) + var(--mlm-schub) + 1.5rem);
		padding-right: 2.5rem;
	}
}

.mlm__liste {
	list-style: none;
	margin: 0;
	padding: 0;
}

.mlm__eintrag {
	margin: 0;
	padding: 0;
}

/*
 * Ein Pixel Luft zwischen den Blöcken, so gewünscht am 10.08.2026:
 * „Zwischen den Menüblöcken sollte ein Abstand von 1 Pix. sein, quasi
 * eine Trennlinie."
 *
 * Es ist bewusst ein Abstand und keine Linie. Durch den Spalt schaut das
 * Hintergrundfoto, die Trennung passt sich damit von selbst an jede
 * Bandfarbe an. Eine gezeichnete Linie müsste eine Farbe haben, die zu
 * allen sechs Bändern passt.
 *
 * Die zweite Zeile setzt denselben Spalt vor jeden Unterpunkt, also auch
 * zwischen einem aufgeklappten Kopf und seinem ersten Unterpunkt.
 */
.mlm__eintrag + .mlm__eintrag,
.mlm__unterliste > li {
	margin-top: 1px;
}

/* ------------------------------------------------------------ Hauptband */

.mlm__band {
	display: flex;
	align-items: center;
	box-sizing: border-box;
	/*
	 * Breite ausdrücklich gesetzt, obwohl 100 Prozent ohnehin gälten.
	 * Nur so lässt sich das Wachsen beim Überfahren weich überblenden.
	 */
	width: 100%;
	min-height: var(--mlm-hoehe);
	padding: .15rem 1.2rem .15rem .9rem;
	background: rgba(var(--mlm-farbe), var(--mlm-ruhe));
	color: #fff;
	text-decoration: none;
	cursor: pointer;
	transition: width .22s ease, background-color .22s ease, text-shadow .22s ease;
}

/*
 * Astra unterstreicht Links im Inhalt und faerbt sie gruen. Hier nicht.
 *
 * Die Regel dort lautet „.ast-single-post .entry-content a" und wiegt
 * damit zwei Klassen und ein Element. Deshalb hier drei Klassen und ein
 * Element, ueber die tatsaechliche Verschachtelung des Menues. So bleibt
 * die Regel staerker, ohne dass irgendwo !important stehen muss.
 */
.mlm .mlm__eintrag a.mlm__band,
.mlm .mlm__eintrag a.mlm__band:hover,
.mlm .mlm__eintrag a.mlm__band:focus,
.mlm .mlm__eintrag a.mlm__band:visited,
.mlm .mlm__eintrag a.mlm__unterband,
.mlm .mlm__eintrag a.mlm__unterband:hover,
.mlm .mlm__eintrag a.mlm__unterband:focus,
.mlm .mlm__eintrag a.mlm__unterband:visited {
	text-decoration: none;
}

.mlm .mlm__eintrag a.mlm__band,
.mlm .mlm__eintrag a.mlm__band:hover,
.mlm .mlm__eintrag a.mlm__band:visited {
	color: #fff;
}

.mlm__titel {
	display: block;
	font-family: var(--lm-sans, system-ui, sans-serif);
	font-size: var(--mlm-schrift);
	font-weight: 400;
	letter-spacing: .01em;
	text-transform: uppercase;
	line-height: 1.05;
	white-space: nowrap;
	text-shadow: 0 1px 6px rgba(20, 12, 2, .35);
	transition: text-shadow .22s ease;
}

/*
 * Die Seite, auf der man gerade ist, steht dauerhaft ein Stück vor.
 *
 * Diese Regel steht bewusst vor der für „Maus darüber". Beide wiegen
 * gleich viel, bei Gleichstand gewinnt die spätere. Stünde sie danach,
 * liesse sich das Band der aktuellen Seite nicht mehr aufhellen.
 */
.mlm__band.is-aktiv {
	width: calc(100% + var(--mlm-schub) / 3);
	background: rgba(var(--mlm-farbe), var(--mlm-wach));
}

/*
 * Maus darüber: heller und länger.
 *
 * Heller, nicht dunkler. Ausdrückliche Korrektur vom 10.08.2026: „Wenn
 * der Mauszeiger über das Menü fährt, dann wird die Farbe dunkler. Es
 * sollte genau andersrum sein." Das ersetzt seine frühere Angabe, die
 * Transparenz solle beim Überfahren sinken.
 */
.mlm__band:hover,
.mlm__band:focus-visible {
	width: calc(100% + var(--mlm-schub));
	background: rgba(var(--mlm-farbe-wach), var(--mlm-wach));
}

/*
 * Der Schatten wird beim Überfahren kräftiger.
 *
 * Aufhellen kostet Kontrast, und die Schrift ist weiss. Der dunklere
 * Saum hält sie auf der helleren Farbe lesbar, ohne dass die Farbe
 * selbst angetastet wird. Er sitzt auf dem Titel und nicht auf dem
 * Band: einen Schatten am Elternteil erbt die Schrift nicht, sobald das
 * Kind einen eigenen hat.
 */
.mlm__band:hover .mlm__titel,
.mlm__band:focus-visible .mlm__titel {
	text-shadow: 0 1px 7px rgba(20, 12, 2, .6);
}

.mlm__band:focus-visible {
	outline: 2px solid #fff;
	outline-offset: -3px;
}

/* ------------------------------------------------------------ Aufklappen
 *
 * summary bringt in einigen Browsern ein Dreieck mit. Das stört das
 * Bandbild, also weg damit. Der Zustand ist am aufgeklappten Untermenü
 * ohnehin abzulesen.
 */

.mlm__klapp > summary {
	list-style: none;
}

.mlm__klapp > summary::-webkit-details-marker,
.mlm__klapp > summary::marker {
	display: none;
	content: "";
}

.mlm__klapp[open] {
	display: block;
}

/*
 * Der offene Punkt steht samt seinen Unterpunkten weiter vor, so zeigt es
 * Dieters Entwurf Redesign-Milonguita-1 am Beispiel PRAKTIKA. Nicht nur
 * der Kopf, sondern der ganze Block.
 *
 * Auch hier wächst er nach rechts, statt sich zu verschieben. Sonst
 * entstünde beim Aufklappen derselbe weisse Streifen links.
 */
.mlm__klapp[open] > .mlm__band,
.mlm__klapp[open] .mlm__unterband {
	width: calc(100% + var(--mlm-auf));
}

.mlm__klapp[open] > .mlm__band {
	background: rgba(var(--mlm-farbe), var(--mlm-wach));
}

.mlm__klapp[open] .mlm__unterband.is-aktiv {
	width: calc(100% + var(--mlm-auf) + var(--mlm-schub) / 3);
}

/* Im offenen Block kommt der Weg für „Maus darüber" oben drauf. */
.mlm__klapp[open] > .mlm__band:hover,
.mlm__klapp[open] > .mlm__band:focus-visible,
.mlm__klapp[open] .mlm__unterband:hover,
.mlm__klapp[open] .mlm__unterband:focus-visible {
	width: calc(100% + var(--mlm-auf) + var(--mlm-schub));
}

.mlm__klapp[open] > .mlm__band:hover .mlm__titel,
.mlm__klapp[open] > .mlm__band:focus-visible .mlm__titel {
	text-shadow: 0 1px 7px rgba(20, 12, 2, .6);
}

.mlm__klapp[open] > .mlm__band:hover,
.mlm__klapp[open] > .mlm__band:focus-visible {
	background: rgba(var(--mlm-farbe-wach), var(--mlm-wach));
}

.mlm__klapp[open] .mlm__unterband:hover,
.mlm__klapp[open] .mlm__unterband:focus-visible {
	background: rgba(var(--mlm-farbe-unter-wach), var(--mlm-wach));
}

/* ------------------------------------------------------------ Unterband
 *
 * Eine Spur heller als das Hauptband und leicht eingerückt, wie im
 * Entwurf MENUE_02. Die Einrückung sitzt links, damit die rechte Kante
 * mit dem Hauptband bündig bleibt.
 */

.mlm__unterliste {
	list-style: none;
	margin: 0;
	padding: 0;
}

.mlm__unterband {
	display: flex;
	align-items: center;
	box-sizing: border-box;
	/* Klein geschrieben wie in Dieters Entwurf MENUE_02. Gespeichert
	 * sind die Namen richtig, damit sie im Kopfmenue und in der
	 * Menueverwaltung ordentlich aussehen. */
	text-transform: lowercase;
	width: 100%;
	min-height: var(--mlm-hoehe-unter);
	padding: .15rem 1.2rem .15rem 1.9rem;
	background: rgba(var(--mlm-farbe-unter), var(--mlm-ruhe));
	color: rgba(255, 255, 255, .95);
	font-family: var(--lm-sans, system-ui, sans-serif);
	font-size: var(--mlm-schrift-unter);
	letter-spacing: .01em;
	line-height: 1.1;
	white-space: nowrap;
	text-decoration: none;
	text-shadow: 0 1px 5px rgba(20, 12, 2, .3);
	transition: width .2s ease, background-color .2s ease, text-shadow .2s ease;
}

.mlm .mlm__eintrag a.mlm__unterband,
.mlm .mlm__eintrag a.mlm__unterband:visited {
	color: rgba(255, 255, 255, .95);
}

.mlm .mlm__eintrag a.mlm__unterband:hover,
.mlm .mlm__eintrag a.mlm__unterband:focus-visible {
	color: #fff;
}

.mlm__unterband.is-aktiv {
	width: calc(100% + var(--mlm-schub) / 3);
	background: rgba(var(--mlm-farbe-unter), var(--mlm-wach));
}

/*
 * Rückfallebene: falls ein Untermenü einmal ohne den Aufklapper
 * dargestellt wird, gilt wenigstens diese Regel.
 */
.mlm__unterband:hover,
.mlm__unterband:focus-visible {
	width: calc(100% + var(--mlm-schub));
	background: rgba(var(--mlm-farbe-unter-wach), var(--mlm-wach));
	text-shadow: 0 1px 7px rgba(20, 12, 2, .55);
}

.mlm__unterband:focus-visible {
	outline: 2px solid #fff;
	outline-offset: -3px;
}

/* ------------------------------------------------------------ Flach
 *
 * Sehr flache Fenster, etwa ein kleines Notebook mit ausgeklappter
 * Lesezeichenleiste. Die Bandhöhen richten sich sonst nur nach der
 * Fensterbreite, und dann könnte das Menü oben und unten aus dem Bild
 * ragen. Weil es die einzige Navigation ist, wäre das schlimmer als eine
 * Nummer kleiner.
 */
@media (min-width: 861px) and (max-height: 620px) {
	:root {
		--mlm-hoehe:       38px;
		--mlm-hoehe-unter: 29px;
		--mlm-schrift:       22px;
		--mlm-schrift-unter: 17px;
	}
}

/* ------------------------------------------------------------ Schmal
 *
 * Auf dem Telefon ist links neben dem Bild kein Platz. Dort steht das
 * Menü unter dem Bild und über die volle Breite. Das Vorwachsen entfällt,
 * weil es dort kein Überfahren mit der Maus gibt: beide Wege auf null,
 * damit rechnen alle Regeln oben von selbst mit voller Breite.
 */

@media (max-width: 860px) {
	.mlm {
		--mlm-schub: 0px;
		--mlm-auf: 0px;
		/* Über die volle Breite liegen die Bänder auch auf den hellen
		 * Stellen des Fotos. Dort braucht weisse Schrift mehr Deckung. */
		--mlm-ruhe: .92;
		--mlm-wach: 1;

		position: static;
		transform: none;
		width: 100%;
		max-width: none;
	}

	.mlm__band,
	.mlm__unterband {
		white-space: normal;
	}
}

/* Wer in den Systemeinstellungen weniger Bewegung wünscht, bekommt
 * die Farbänderung, aber kein Wachsen. */
@media (prefers-reduced-motion: reduce) {
	.mlm {
		--mlm-schub: 0px;
		--mlm-auf: 0px;
	}

	.mlm__band,
	.mlm__unterband {
		transition: background-color .22s ease, text-shadow .22s ease;
	}
}