/*
 * App-Leiste im Lernbereich (includes/appleiste.php), gebaut wie die Leiste der medizin-lernen-Plattformen, in den Farben
 * von Mission Medizin. Breit 272 px, eingeklappt 76 px nur mit Symbolen; unter 960 px eine Kopfzeile mit Menüknopf und
 * die Leiste als Schublade.
 */

body.ma-app { --ma-al-b: 272px; }
html.ma-al-schmal body.ma-app { --ma-al-b: 76px; }

/* Inhalt rechts neben der Leiste, in sich mittig */
body.ma-app .ma-rahmen,
body.ma-app .ma-fuss { margin-left: var(--ma-al-b); transition: margin-left .2s ease; }
/* align-self: Der Rahmen ist Kind eines Flex-Körpers und schrumpfte sonst auf die Breite seines Inhalts, rechts blieb die
   halbe Seite leer (Deniz: „nicht nur die Hälfte nutzen“). */
body.ma-app .ma-rahmen { max-width: none; width: auto; align-self: stretch; box-sizing: border-box; margin-right: 0; padding: var(--mm-space-7) clamp(20px, 4vw, 56px) var(--mm-space-8); }
body.ma-app .ma-rahmen > .ma-haupt { max-width: 1180px; margin-inline: auto; }
body.ma-app .ma-haupt .ma-titel { max-width: 30ch; }

.ma-al-sym { flex: none; display: block; }

.ma-al {
	position: fixed; z-index: var(--mm-z-sticky, 100); left: 0; top: 0; bottom: 0;
	width: var(--ma-al-b); box-sizing: border-box; display: flex; flex-direction: column;
	background: var(--mm-color-surface); border-right: 1px solid var(--mm-color-border);
	transition: width .2s ease, transform .25s ease;
	font-family: "Inter", system-ui, sans-serif;
}

.ma-al-kopf { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 18px 14px 14px 18px; min-height: 72px; box-sizing: border-box; }
.ma-al-marke { display: inline-flex; align-items: center; color: var(--mm-color-ink); text-decoration: none; min-width: 0; }
.ma-al-marke svg { height: 34px; width: auto; display: block; }

.ma-al-knopf {
	display: grid; place-items: center; width: 38px; height: 38px; flex: none; padding: 0; border: 0; border-radius: 10px;
	background: transparent; color: var(--mm-color-ink-muted); cursor: pointer; transition: background .15s, color .15s;
}
.ma-al-knopf:hover { background: var(--mm-color-surface-subtle); color: var(--mm-color-ink); }
.ma-al-knopf:focus-visible, .ma-al-link:focus-visible, .ma-al-gruppe summary:focus-visible, .ma-al-kurswahl summary:focus-visible {
	outline: 2px solid var(--mm-color-brand); outline-offset: 2px;
}

/* Kurswahl unter dem Logo */
.ma-al-kurswahl, .ma-al-kursname { margin: 0 12px 10px; }
.ma-al-kurswahl summary, .ma-al-kursname {
	display: flex; align-items: center; gap: 10px; list-style: none; cursor: pointer;
	padding: 10px 12px; border: 1px solid var(--mm-color-border); border-radius: 11px; background: var(--mm-color-surface-paper, #FDF9F4);
	color: var(--mm-color-ink); font-size: .92rem; font-weight: 600; line-height: 1.25;
}
.ma-al-kursname { cursor: default; }
.ma-al-kurswahl summary::-webkit-details-marker { display: none; }
.ma-al-kurswahl summary .ma-al-text { flex: 1; min-width: 0; }
.ma-al-kurswahl summary > .ma-al-sym:last-child { width: 16px; height: 16px; transform: rotate(90deg); transition: transform .2s; color: var(--mm-color-ink-muted); }
.ma-al-kurswahl[open] summary > .ma-al-sym:last-child { transform: rotate(-90deg); }
.ma-al-kurswahl summary .ma-al-sym:first-child, .ma-al-kursname .ma-al-sym { color: var(--mm-color-brand); }
.ma-al-kurswahl ul { list-style: none; margin: 6px 0 0; padding: 6px; border: 1px solid var(--mm-color-border); border-radius: 11px; background: var(--mm-color-surface); display: grid; gap: 2px; }
.ma-al-kurswahl ul a { display: block; padding: 8px 10px; border-radius: 8px; color: var(--mm-color-ink); text-decoration: none; font-size: .9rem; }
.ma-al-kurswahl ul a:hover { background: var(--mm-color-surface-subtle); }
.ma-al-kurswahl ul a[aria-current="true"] { font-weight: 600; color: var(--mm-color-brand-strong, #AB2800); }

/* Navigation */
.ma-al-nav { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 4px 12px 16px; scrollbar-width: thin; }
.ma-al-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.ma-al-oben { margin-bottom: 14px; }
.ma-al-link {
	position: relative; display: flex; align-items: center; gap: 12px; width: 100%; box-sizing: border-box;
	padding: 9px 12px; border: 0; border-radius: 11px; background: transparent; cursor: pointer; text-align: left;
	color: var(--mm-color-ink) !important; text-decoration: none !important; font: inherit; font-size: .92rem; font-weight: 500; line-height: 1.25;
	transition: background .15s, color .15s;
}
.ma-al-link .ma-al-sym { color: var(--mm-color-ink-muted); transition: color .15s; }
.ma-al-link .ma-al-text { flex: 1; min-width: 0; }
.ma-al-link:hover { background: var(--mm-color-surface-subtle); }
.ma-al-link:hover .ma-al-sym { color: var(--mm-color-ink); }
.ma-al-link.aktiv { background: var(--mm-color-brand-wash, #FFF4F2); font-weight: 600; }
.ma-al-link.aktiv .ma-al-sym { color: var(--mm-color-brand); }
.ma-al-link.aktiv::before { content: ""; position: absolute; left: -12px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--mm-color-brand); }
.ist-erledigt > .ma-al-link .ma-al-text::after { content: " ✓"; color: var(--mm-color-success, #246E3A); font-weight: 600; }

.ma-al-gruppe { margin: 0 0 10px; }
.ma-al-gruppe summary {
	display: flex; align-items: center; justify-content: space-between; gap: 8px; list-style: none; cursor: pointer;
	padding: 7px 12px; border-radius: 8px; color: var(--mm-color-ink-muted); font-size: .7rem; font-weight: 600;
	letter-spacing: .1em; text-transform: uppercase; line-height: 1.3; user-select: none;
}
.ma-al-gruppe summary::-webkit-details-marker { display: none; }
.ma-al-gruppe summary:hover { color: var(--mm-color-ink); }
.ma-al-gruppe summary .ma-al-sym { width: 16px; height: 16px; transform: rotate(90deg); transition: transform .2s; }
.ma-al-gruppe:not([open]) summary .ma-al-sym { transform: rotate(0deg); }
.ma-al-gruppe[data-aktiv] summary { color: var(--mm-color-ink); }

/* Konto unten */
.ma-al-fuss { border-top: 1px solid var(--mm-color-border); padding: 10px 12px 14px; display: grid; gap: 2px; }
.ma-al-person .ma-al-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ma-al-person > .ma-al-sym:last-child { width: 16px; height: 16px; transform: rotate(-90deg); transition: transform .2s; }
.ma-al-person[aria-expanded="true"] > .ma-al-sym:last-child { transform: rotate(90deg); }
.ma-al-person.enthaelt-aktiv > .ma-al-sym:first-child { color: var(--mm-color-brand); }
.ma-al-konto { order: -1; padding-bottom: 6px; }
.ma-al-konto[hidden] { display: none; }
.ma-al-konto .ma-al-link { font-size: .88rem; }
.ma-al-abmelden { color: var(--mm-color-ink-secondary) !important; }

/* Eingeklappt: nur Symbole; den Namen zeigt der Browser als Tooltip (title, gesetzt in appleiste.js) */
html.ma-al-schmal body.ma-app .ma-al .ma-al-text { display: none; }
html.ma-al-schmal body.ma-app .ma-al-kopf { flex-direction: column; padding: 16px 8px 10px; gap: 10px; }
html.ma-al-schmal body.ma-app .ma-al-kopf .ma-al-marke { display: none; }
html.ma-al-schmal body.ma-app .ma-al-nav { padding: 4px 10px 16px; }
html.ma-al-schmal body.ma-app .ma-al-link,
html.ma-al-schmal body.ma-app .ma-al-kurswahl summary,
html.ma-al-schmal body.ma-app .ma-al-kursname { justify-content: center; padding: 9px 0; }
html.ma-al-schmal body.ma-app .ma-al-kurswahl summary > .ma-al-sym:last-child { display: none; }
html.ma-al-schmal body.ma-app .ma-al-kurswahl, html.ma-al-schmal body.ma-app .ma-al-kursname { margin: 0 10px 10px; }
html.ma-al-schmal body.ma-app .ma-al-link.aktiv::before { left: -10px; }
html.ma-al-schmal body.ma-app .ma-al-gruppe summary { padding: 0; height: 1px; margin: 8px 6px 10px; background: var(--mm-color-border); cursor: default; }
html.ma-al-schmal body.ma-app .ma-al-gruppe summary .ma-al-sym { display: none; }
html.ma-al-schmal body.ma-app .ma-al-gruppe:not([open]) > .ma-al-liste { display: grid; }
html.ma-al-schmal body.ma-app .ma-al-gruppe:not([open])::details-content { content-visibility: visible; height: auto; }
html.ma-al-schmal body.ma-app .ma-al-person > .ma-al-sym:last-child { display: none; }


/* Handy und Tablet: Kopfzeile mit Menüknopf, Leiste als Schublade */
.ma-al-mobilkopf, .ma-al-schleier { display: none; }
@media (max-width: 959px) {
	body.ma-app { --ma-al-b: 0px; }
	html.ma-al-schmal body.ma-app { --ma-al-b: 0px; }
	.ma-al-mobilkopf {
		display: flex; align-items: center; gap: 10px; position: sticky; top: 0; z-index: var(--mm-z-sticky, 100);
		padding: 10px 14px; background: var(--mm-color-surface); border-bottom: 1px solid var(--mm-color-border);
	}
	.ma-al-mobilkopf .ma-al-marke svg { height: 30px; }
	.ma-al { width: 288px; transform: translateX(-100%); box-shadow: none; z-index: var(--mm-z-modal, 300); }
	html.ma-al-offen .ma-al { transform: none; box-shadow: 0 10px 40px rgba(35, 47, 63, .18); }
	html.ma-al-offen .ma-al-schleier:not([hidden]) { display: block; position: fixed; inset: 0; z-index: var(--mm-z-overlay, 200); background: rgba(35, 47, 63, .35); }
	.ma-al [data-ma-al-umschalten] { display: none; }
	html.ma-al-schmal body.ma-app .ma-al .ma-al-text { display: inline; }
	body.ma-app .ma-rahmen { padding: var(--mm-space-6) var(--mm-space-5) var(--mm-space-8); }
}
@media (prefers-reduced-motion: reduce) {
	.ma-al, body.ma-app .ma-rahmen, body.ma-app .ma-fuss { transition: none; }
}


/* Gäste: unten Kostenfrei testen und Anmelden statt des Konto-Menüs */
.ma-al-gast { gap: 6px; }
.ma-al-gast .ma-knopf { display: block; text-align: center; }
html.ma-al-schmal body.ma-app .ma-al-gast .ma-knopf { display: none; }

/* Nur mit sichtbarer WordPress-Werkzeugleiste nach unten rücken. Die Variable allein reicht nicht: die Blockbibliothek setzt
   sie auch für Gäste, dann stand die Handy-Kopfzeile mitten im Text. */
body.ma-app.admin-bar .ma-al { top: 32px; }
body.ma-app.admin-bar .ma-al-mobilkopf { top: 32px; }
@media (max-width: 782px) {
	body.ma-app.admin-bar .ma-al, body.ma-app.admin-bar .ma-al-mobilkopf { top: 46px; }
}
@media (max-width: 600px) {
	body.ma-app.admin-bar .ma-al-mobilkopf { top: 0; }
}

/* Logo mit fester Breite: auf der Numerus-apertus-Lektion fehlte es in Edge. Ein fremdes svg{max-width:100%} drückte das
   schrumpfbare Flex-Element auf null. */
.ma-al-marke { flex: none; min-width: 154px; }
.ma-al-marke svg { width: 154px !important; max-width: none !important; height: 34px !important; }
.ma-al-mobilkopf .ma-al-marke { min-width: 136px; }
.ma-al-mobilkopf .ma-al-marke svg { width: 136px !important; height: 30px !important; }