/* =========================================================
   Musik aktiv Blöcke – Design (gleiche Werte wie die neuen Übungen)
   ========================================================= */
@font-face { font-family: Akko; font-weight: 300; font-style: normal; font-display: swap; src: url(../fonts/AkkoStd-Light.woff2) format("woff2"); }
@font-face { font-family: Akko; font-weight: 400; font-style: normal; font-display: swap; src: url(../fonts/AkkoStd-Regular.woff2) format("woff2"); }
@font-face { font-family: Akko; font-weight: 500; font-style: normal; font-display: swap; src: url(../fonts/AkkoStd-Medium.woff2) format("woff2"); }
@font-face { font-family: Akko; font-weight: 700; font-style: normal; font-display: swap; src: url(../fonts/AkkoStd-Bold.woff2) format("woff2"); }

.ma-seite, .ma-start, .ma-lehrer, .ma-auftrag, .ma-abschnitt, .ma-audio, .ma-video, .ma-video-raster, .ma-hinweis, .ma-lb, .ma-ablauf, .ma-rec, .ma-studio, .ma-werk, .ma-prompt, .ma-groove, .ma-check, .ma-uebe, .ma-hoer, .ma-timer, .ma-besch, .ma-drums, .ma-stueck, .ma-zufall, .ma-pattern, .ma-fenster, .ma-modal, .ma-reiter, .ma-vwahl, .ma-puls, .ma-quiz, .ma-fragen, .ma-lk {
	--ma-font: Akko, system-ui, -apple-system, "Segoe UI", sans-serif;
	--ma-ink: #111416;
	--ma-paper: #faf8f3;
	--ma-card: #fff;
	--ma-orange: #e8924f;
	--ma-orange-text: #b65d18;
	--ma-teal: #1f737a;
	--ma-teal-dark: #17616a;
	--ma-teal-mist: #dce3e3;
	--ma-h1-from: #e3eee7;
	--ma-h1-to: #fbebd8;
	--ma-hero-mid: #f4f5ec;
	--ma-muted: #4a5254;
	--ma-soft: #5b6466;
	--ma-prose: #2a3133;
	--ma-faint: #8a9193;
	--ma-line: rgba(17, 20, 22, .1);
	--ma-ring: rgba(17, 20, 22, .07);
	--ma-well: #f0eee7;
	--ma-hint-bg: #fff6e5;
	--ma-ok-ink: #1f4d3a;
	--ma-red: #e0473b;
	--ma-radius-sm: 6px;
	--ma-radius-10: 10px;
	--ma-radius: 14px;
	--ma-radius-lg: 18px;
	--ma-shadow: 0 1px 0 rgba(17, 20, 22, .04), 0 0 0 1px rgba(17, 20, 22, .07);
	--ma-shadow-lg: 0 28px 56px -30px rgba(17, 20, 22, .45), 0 0 0 1px rgba(17, 20, 22, .06);
	--ma-shadow-btn: 0 12px 24px -14px rgba(17, 20, 22, .6);
	--ma-ease: cubic-bezier(.2, .7, .2, 1);
	font-family: var(--ma-font);
	color: var(--ma-ink);
	-webkit-font-smoothing: antialiased;
	box-sizing: border-box;
}
.ma-seite *, .ma-seite *::before, .ma-seite *::after { box-sizing: border-box; }
.ma-ico { display: inline-block; flex: none; vertical-align: middle; }

/* ---------- Seite und normale Inhalte ---------- */
body .ma-seite { container-type: inline-size; container-name: maseite; display: flex; flex-direction: column; gap: 28px; font-size: 17px; line-height: 1.6; margin: 8px 0 24px; }
body .ma-seite > * { margin-top: 0 !important; margin-bottom: 0 !important; }
body .ma-seite h2, body .ma-seite h3 { font-family: var(--ma-font); color: var(--ma-ink); letter-spacing: -.01em; margin: 0; }
body .ma-seite h2 { font-size: clamp(24px, 2.4vw, 30px); font-weight: 500; line-height: 1.2; }
body .ma-seite h3 { font-size: 21px; font-weight: 600; line-height: 1.3; }
body .ma-seite p { margin: 0; color: var(--ma-prose); font-size: 17px; line-height: 1.6; }
body .ma-seite a:not(.ma-btn) { color: var(--ma-teal-dark); text-decoration: underline; text-underline-offset: 2px; }
body .ma-seite ul, body .ma-seite ol { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
body .ma-seite ul > li, body .ma-seite ol > li { position: relative; padding-left: 28px; margin: 0; color: var(--ma-prose); font-size: 17px; line-height: 1.55; }
body .ma-seite ul > li::before { content: ""; position: absolute; left: 4px; top: .55em; width: 12px; height: 9px; border-radius: 50%; background: var(--ma-orange); transform: rotate(-20deg); }
body .ma-seite ol { counter-reset: ma; }
body .ma-seite ol > li { counter-increment: ma; padding-left: 36px; }
body .ma-seite ol > li::before { content: counter(ma); position: absolute; left: 0; top: .1em; width: 24px; height: 24px; border-radius: 50%; background: var(--ma-ink); color: #fff; font-size: 13px; font-weight: 600; display: grid; place-items: center; }
body .ma-seite li strong { font-weight: 600; color: var(--ma-ink); }
body .ma-seite figure { margin: 0; }
body .ma-seite .wp-block-image img { display: block; max-width: 100%; height: auto; margin: 0 auto; border-radius: var(--ma-radius-10); }
body .ma-seite figcaption, body .ma-seite .wp-element-caption { margin-top: 10px; font-size: 14px; color: var(--ma-soft); text-align: center; }
body .ma-seite hr, body .ma-seite .wp-block-separator { border: 0; height: 1px; background: var(--ma-line); margin: 4px 0; opacity: 1; width: 100%; }
body .ma-seite .wp-block-spacer { display: none; }
body .ma-seite .has-text-align-center { text-align: center; }
body .ma-seite .wp-block-columns { gap: 20px; margin: 0; }

/* ---------- Typo-Bausteine ---------- */
.ma-eyebrow { display: inline-flex; align-items: center; gap: 10px; margin: 0; font-family: var(--ma-font); font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ma-muted); line-height: 1.3; }
.ma-eyebrow::before { content: ""; width: 12px; height: 9px; border-radius: 50%; background: var(--ma-orange); transform: rotate(-20deg); flex: none; }

/* ---------- Knöpfe ---------- */
body .ma-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 0 24px; border: 0; border-radius: var(--ma-radius-sm); font-family: var(--ma-font); font-weight: 600; font-size: 16px; line-height: 1.2; text-decoration: none; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, color .15s ease; white-space: nowrap; }
body .ma-btn:hover { transform: translateY(-1px); box-shadow: var(--ma-shadow-btn); text-decoration: none; }
body .ma-btn:focus-visible { outline: 3px solid var(--ma-orange); outline-offset: 2px; }
body .ma-btn--lg { min-height: 56px; padding: 0 28px; font-size: 17px; }
body .ma-btn--dark, body .ma-btn--dark:visited, body .ma-btn--dark:focus { background: var(--ma-ink) !important; color: #fff !important; }
body .ma-btn--dark:hover { background: #000 !important; color: #fff !important; }
body .ma-btn--dark .ma-ico { color: var(--ma-orange); }
body .ma-btn--outline, body .ma-btn--outline:visited, body .ma-btn--outline:focus { background: #fff !important; color: var(--ma-ink) !important; box-shadow: inset 0 0 0 1.5px var(--ma-ink); }
body .ma-btn--outline:hover { background: var(--ma-ink) !important; color: #fff !important; box-shadow: inset 0 0 0 1.5px var(--ma-ink), var(--ma-shadow-btn); }

/* ---------- Startkarte ---------- */
.ma-start { position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 40px; align-items: center; padding: 44px 44px 44px 48px; border-radius: var(--ma-radius-lg); background: linear-gradient(135deg, var(--ma-h1-from) 0%, var(--ma-hero-mid) 52%, var(--ma-h1-to) 100%); overflow: hidden; }
.ma-start--noimg { grid-template-columns: minmax(0, 1fr); }
.ma-start__body { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; min-width: 0; }
body .ma-start .ma-start__title { margin: 0; font-family: var(--ma-font); font-size: clamp(34px, 4.2vw, 54px); font-weight: 300; line-height: 1.05; letter-spacing: -.025em; color: var(--ma-ink); }
body .ma-start .ma-start__text { margin: 0; font-size: 19px; line-height: 1.5; color: var(--ma-prose); max-width: 36ch; }
body .ma-start .ma-start__note { margin: 2px 0 0; display: inline-flex; gap: 10px; align-items: flex-start; padding: 10px 14px; border-radius: var(--ma-radius-10); background: rgba(255, 255, 255, .7); box-shadow: inset 0 0 0 1px rgba(232, 146, 79, .45); font-size: 15px; font-weight: 500; line-height: 1.45; color: var(--ma-orange-text); max-width: 44ch; }
.ma-start__note .ma-ico { color: var(--ma-orange); margin-top: 1px; }
body .ma-start .ma-start__cta { margin: 10px 0 0; }
.ma-start__media { position: relative; }
.ma-start__media::before { content: ""; position: absolute; inset: 8% -6% -8% 8%; border-radius: var(--ma-radius-lg); background: rgba(232, 146, 79, .22); transform: rotate(3deg); }
body .ma-start .ma-start__img { position: relative; display: block; width: 100%; height: auto; max-height: 420px; object-fit: contain; background: #fff; border-radius: var(--ma-radius); box-shadow: var(--ma-shadow-lg); transform: rotate(-1.5deg); }
@media (max-width: 820px) {
	.ma-start { grid-template-columns: minmax(0, 1fr); padding: 28px 24px 30px; gap: 26px; }
	.ma-start__media { order: -1; }
	body .ma-start .ma-start__img { transform: none; }
	.ma-start__media::before { display: none; }
}

/* ---------- Lehrpersonen ---------- */
.ma-lehrer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 18px; padding: 14px 16px 14px 20px; border-radius: var(--ma-radius); background: var(--ma-teal-mist); }
.ma-lehrer__tag { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ma-teal-dark); }
.ma-lehrer .ma-btn { min-height: 44px; padding: 0 18px; font-size: 15px; }

/* ---------- Auftrag ---------- */
.ma-auftrag { padding: 30px 32px 32px; border-radius: var(--ma-radius-lg); background: var(--ma-card); box-shadow: var(--ma-shadow-lg); }
.ma-auftrag__head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.ma-auftrag__ico { width: 46px; height: 46px; border-radius: 12px; background: var(--ma-orange); color: var(--ma-ink); display: grid; place-items: center; flex: none; }
body .ma-auftrag .ma-auftrag__title { margin: 0; font-family: var(--ma-font); font-size: 28px; font-weight: 500; letter-spacing: -.01em; line-height: 1.2; color: var(--ma-ink); }
.ma-auftrag__body { display: flex; flex-direction: column; gap: 14px; }
body .ma-auftrag .ma-auftrag__body li { font-size: 18px; }
body .ma-auftrag .ma-auftrag__body li strong { font-weight: 500; }

/* ---------- Übungsabschnitt ---------- */
.ma-abschnitt { padding: 28px 32px 32px; border-radius: var(--ma-radius-lg); background: var(--ma-card); box-shadow: var(--ma-shadow); display: flex; flex-direction: column; gap: 20px; }
.ma-abschnitt__head { display: flex; flex-direction: column; gap: 8px; }
body .ma-abschnitt .ma-abschnitt__title { margin: 0; font-family: var(--ma-font); font-size: clamp(24px, 2.4vw, 30px); font-weight: 500; line-height: 1.2; letter-spacing: -.01em; color: var(--ma-ink); }
.ma-abschnitt__body { display: flex; flex-direction: column; gap: 18px; }
body .ma-abschnitt__body > * { margin: 0 !important; }
body .ma-abschnitt .wp-block-image { padding: 14px; border-radius: var(--ma-radius); background: var(--ma-paper); }
body .ma-abschnitt .wp-block-image img { border-radius: var(--ma-radius-sm); }

/* ---------- Audio ---------- */
.ma-audio { display: flex; align-items: center; gap: 16px; padding: 12px 18px 12px 12px; border-radius: 999px; background: var(--ma-well); }
.ma-audio:not(.is-ready) { border-radius: var(--ma-radius); padding: 10px; }
.ma-audio:not(.is-ready) > :not(audio) { display: none; }
.ma-audio__el { width: 100%; }
.ma-audio.is-ready .ma-audio__el { display: none; }
.ma-audio__play { width: 52px; height: 52px; border: 0; border-radius: 50%; background: var(--ma-orange); color: var(--ma-ink); display: grid; place-items: center; cursor: pointer; flex: none; padding: 0; transition: transform .15s ease, box-shadow .15s ease; }
.ma-audio__play:hover { transform: scale(1.05); box-shadow: var(--ma-shadow-btn); }
.ma-audio__play:focus-visible { outline: 3px solid var(--ma-ink); outline-offset: 2px; }
.ma-audio__play .ma-ico + .ma-ico, .ma-audio.is-playing .ma-audio__play .ma-ico:first-child { display: none; }
.ma-audio.is-playing .ma-audio__play .ma-ico + .ma-ico { display: inline-block; }
.ma-audio__main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.ma-audio__title { font-size: 16px; font-weight: 600; line-height: 1.3; color: var(--ma-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ma-audio__seek { width: 100%; height: 18px; margin: 0; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer; --p: 0%; }
.ma-audio__seek::-webkit-slider-runnable-track { height: 5px; border-radius: 3px; background: linear-gradient(90deg, var(--ma-orange) var(--p), rgba(17, 20, 22, .14) var(--p)); }
.ma-audio__seek::-moz-range-track { height: 5px; border-radius: 3px; background: rgba(17, 20, 22, .14); }
.ma-audio__seek::-moz-range-progress { height: 5px; border-radius: 3px; background: var(--ma-orange); }
.ma-audio__seek::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%; background: var(--ma-ink); margin-top: -4.5px; }
.ma-audio__seek::-moz-range-thumb { width: 14px; height: 14px; border: 0; border-radius: 50%; background: var(--ma-ink); }
.ma-audio__time { font-size: 14px; color: var(--ma-soft); font-variant-numeric: tabular-nums; flex: none; min-width: 44px; text-align: right; }

/* ---------- Video ---------- */
body .ma-video { margin: 0; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.ma-video__poster { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0; border: 0; border-radius: var(--ma-radius); overflow: hidden; background: var(--ma-ink); cursor: pointer; box-shadow: var(--ma-shadow-lg); }
body .ma-video .ma-video__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 0; transition: transform .4s var(--ma-ease), opacity .2s; }
.ma-video__poster::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(17, 20, 22, 0) 45%, rgba(17, 20, 22, .35)); transition: opacity .2s; }
.ma-video__poster:hover .ma-video__img { transform: scale(1.04); }
.ma-video__poster:focus-visible { outline: 3px solid var(--ma-orange); outline-offset: 3px; }
.ma-video__play { position: absolute; left: 50%; top: 50%; z-index: 1; width: 76px; height: 76px; margin: -38px 0 0 -38px; border-radius: 50%; background: var(--ma-orange); color: var(--ma-ink); display: grid; place-items: center; box-shadow: 0 0 0 8px rgba(255, 255, 255, .28), 0 14px 30px -12px rgba(0, 0, 0, .6); transition: transform .2s var(--ma-ease); }
.ma-video__poster:hover .ma-video__play { transform: scale(1.08); }
.ma-video--noimg .ma-video__poster { background: linear-gradient(135deg, #1f2a2d, var(--ma-ink)); }
/* eigenes Bild (z. B. Foto mit Text und Notenzeile): ganz zeigen, nicht zuschneiden */
.ma-video--bild .ma-video__poster { aspect-ratio: auto; background: #fff; box-shadow: var(--ma-shadow); padding: 0; }
body .ma-video--bild .ma-video__img { position: static; height: auto; object-fit: contain; display: block; }
.ma-video--bild .ma-video__poster::after { display: none; }
.ma-video--bild .ma-video__poster:hover .ma-video__img { transform: none; }
.ma-video--bild .ma-video__poster:hover { box-shadow: 0 0 0 2px var(--ma-orange), var(--ma-shadow-lg); }
.ma-video--bild .ma-video__play { width: 64px; height: 64px; margin: -32px 0 0 -32px; }
.ma-video__frame { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--ma-radius); overflow: hidden; background: #000; box-shadow: var(--ma-shadow-lg); }
.ma-video__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
body .ma-video .ma-video__cap { margin: 2px 0 0; font-size: 16px; font-weight: 600; line-height: 1.35; color: var(--ma-ink); text-align: left; }
.ma-video-raster { display: grid; grid-template-columns: repeat(var(--ma-cols, 2), minmax(0, 1fr)); gap: 24px 20px; }
@media (max-width: 900px) { .ma-video-raster[style*="--ma-cols:3"], .ma-video-raster[style*="--ma-cols:4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .ma-video-raster { grid-template-columns: minmax(0, 1fr) !important; } }

/* ---------- Hinweis ---------- */
.ma-hinweis { display: flex; gap: 16px; align-items: flex-start; padding: 20px 22px; border-radius: var(--ma-radius); background: var(--ma-hint-bg); }
.ma-hinweis__ico { width: 40px; height: 40px; border-radius: 50%; background: var(--ma-orange); color: var(--ma-ink); display: grid; place-items: center; flex: none; }
.ma-hinweis--info { background: var(--ma-teal-mist); }
.ma-hinweis--info .ma-hinweis__ico { background: var(--ma-teal); color: #fff; }
.ma-hinweis--fertig { background: var(--ma-h1-from); }
.ma-hinweis--fertig .ma-hinweis__ico { background: var(--ma-ok-ink); color: #fff; }
.ma-hinweis__body { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding-top: 7px; }
body .ma-hinweis .ma-hinweis__title { font-weight: 600; color: var(--ma-ink); font-size: 17px; }
body .ma-hinweis .ma-hinweis__body p { font-size: 16px; }

/* ---------- Video-Fenster (Lightbox) ---------- */
.ma-lb { position: fixed; inset: 0; z-index: 100000; display: grid; place-items: center; padding: 24px; background: rgba(17, 20, 22, .86); animation: maFade .2s ease both; }
.ma-lb[hidden] { display: none; }
.ma-lb__box { position: relative; width: min(1100px, 100%); }
.ma-lb__frame { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--ma-radius); overflow: hidden; background: #000; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .8); }
.ma-lb__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.ma-lb__close { position: absolute; right: 0; top: -54px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: #fff; color: var(--ma-ink); display: grid; place-items: center; cursor: pointer; padding: 0; }
.ma-lb__close:focus-visible { outline: 3px solid var(--ma-orange); outline-offset: 2px; }
@keyframes maFade { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Gemeinsam: Knöpfe der neuen Bausteine gegen Theme-Stile absichern ---------- */
.ma-ablauf button, .ma-rec button, .ma-studio button, .ma-werk button, .ma-prompt button { font-family: var(--ma-font); text-transform: none; letter-spacing: normal; line-height: 1.2; margin: 0; min-width: 0; min-height: 0; text-shadow: none; }
.ma-ablauf button:focus-visible, .ma-rec button:focus-visible, .ma-studio button:focus-visible, .ma-werk button:focus-visible { outline: 3px solid var(--ma-orange); outline-offset: 2px; }
.ma-rec input[type="text"], .ma-studio input[type="text"], .ma-werk textarea { font-family: var(--ma-font); box-shadow: none; min-height: 0; }

/* ---------- Ablauf mit Schritten ---------- */
.ma-ablauf { display: flex; flex-direction: column; gap: 22px; }
.ma-ablauf__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px 28px; }
.ma-ablauf__titles { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
body .ma-ablauf .ma-ablauf__title { margin: 0; font-size: clamp(26px, 2.8vw, 34px); font-weight: 500; line-height: 1.15; letter-spacing: -.015em; }
.ma-ablauf__progress { display: flex; flex-direction: column; align-items: flex-end; gap: 7px; }
.ma-ablauf__progress[hidden] { display: none; }
.ma-ablauf__count { font-size: 14px; font-weight: 600; color: var(--ma-soft); font-variant-numeric: tabular-nums; }
.ma-ablauf.is-complete .ma-ablauf__count { color: var(--ma-ok-ink); }
.ma-ablauf__bar { display: block; width: 190px; height: 6px; border-radius: 3px; background: rgba(17, 20, 22, .1); overflow: hidden; }
.ma-ablauf__bar > span { display: block; height: 100%; width: 0; border-radius: 3px; background: var(--ma-ok-ink); transition: width .45s var(--ma-ease); }
.ma-ablauf__steps { display: flex; flex-direction: column; gap: 18px; }
.ma-schritt { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 0 20px; align-items: start; }
.ma-schritt::before { content: ""; position: absolute; left: 27px; top: 64px; bottom: -14px; width: 2px; background: repeating-linear-gradient(180deg, rgba(17, 20, 22, .2) 0 6px, transparent 6px 12px); }
.ma-schritt:last-child::before { display: none; }
.ma-schritt__nr { position: relative; z-index: 1; width: 56px; height: 56px; margin-top: 4px; border-radius: 50%; background: var(--ma-ink); color: #fff; display: grid; place-items: center; font-size: 24px; font-weight: 500; box-shadow: 0 10px 22px -12px rgba(17, 20, 22, .7); transition: background-color .25s; }
.ma-schritt__nr .ma-ico { display: none; }
.ma-schritt.is-done .ma-schritt__nr { background: var(--ma-ok-ink); }
.ma-schritt.is-done .ma-schritt__num { display: none; }
.ma-schritt.is-done .ma-schritt__nr .ma-ico { display: block; animation: maIn .35s var(--ma-ease); }
.ma-schritt__card { min-width: 0; display: flex; flex-direction: column; gap: 16px; padding: 24px 28px 22px; border-radius: var(--ma-radius-lg); background: var(--ma-card); box-shadow: var(--ma-shadow-lg); transition: box-shadow .25s, background-color .25s; }
.ma-schritt.is-done .ma-schritt__card { background: #fbfcf9; box-shadow: var(--ma-shadow); }
.ma-schritt__head { display: flex; flex-direction: column; gap: 6px; }
body .ma-seite .ma-schritt__eyebrow { margin: 0; font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ma-orange-text); line-height: 1.3; }
body .ma-schritt .ma-schritt__title { margin: 0; font-size: 23px; font-weight: 600; line-height: 1.25; letter-spacing: -.01em; }
body .ma-seite .ma-schritt__meta { flex-direction: row; flex-wrap: wrap; gap: 8px; margin: 6px 0 0; }
body .ma-seite .ma-schritt__meta > li { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px 5px 9px; border-radius: 999px; background: var(--ma-well); font-size: 14px; font-weight: 500; line-height: 1.3; color: var(--ma-muted); }
body .ma-seite .ma-schritt__meta > li::before { display: none; }
.ma-schritt__meta .ma-ico { color: var(--ma-teal); }
.ma-schritt__body { display: flex; flex-direction: column; gap: 14px; }
body .ma-schritt__body > * { margin: 0 !important; }
body .ma-schritt__body li { font-size: 17px; }
body .ma-ablauf .ma-schritt__done { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px 0 12px; border: 0; border-radius: 999px; background: transparent; box-shadow: inset 0 0 0 1.5px rgba(17, 20, 22, .22); font-size: 15px; font-weight: 600; color: var(--ma-muted); cursor: pointer; transition: background-color .2s, color .2s, box-shadow .2s; }
body .ma-ablauf .ma-schritt__done:hover { box-shadow: inset 0 0 0 1.5px var(--ma-ink); color: var(--ma-ink); background: transparent; }
body .ma-ablauf .ma-schritt__done[aria-pressed="true"] { background: var(--ma-ok-ink); color: #fff; box-shadow: none; }
.ma-schritt__done[hidden] { display: none !important; }

/* ---------- Ablauf kompakt: Schrittleiste + gewählter Schritt ---------- */
.ma-ablauf--kompakt { gap: 12px; }
body .ma-ablauf--kompakt .ma-ablauf__title { font-size: clamp(22px, 2.2vw, 26px); }
.ma-ablauf--kompakt .ma-ablauf__steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.ma-ablauf--kompakt .ma-schritt { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 12px 14px; border-radius: var(--ma-radius); background: var(--ma-paper); box-shadow: inset 0 0 0 1px var(--ma-line); cursor: pointer; transition: background-color .2s, box-shadow .2s; -webkit-tap-highlight-color: transparent; }
.ma-ablauf--kompakt .ma-schritt::before { display: none; }
.ma-ablauf--kompakt .ma-schritt:hover { background: #fff; box-shadow: inset 0 0 0 1px rgba(17, 20, 22, .28); }
.ma-ablauf--kompakt .ma-schritt:focus-visible { outline: 3px solid var(--ma-orange); outline-offset: 2px; }
.ma-ablauf--kompakt .ma-schritt__nr { flex: none; width: 34px; height: 34px; margin: 0; font-size: 16px; font-weight: 600; background: #fff; color: var(--ma-ink); box-shadow: inset 0 0 0 1.5px var(--ma-ink); }
.ma-ablauf--kompakt .ma-schritt__nr .ma-ico { width: 18px; height: 18px; }
.ma-ablauf--kompakt .ma-schritt__card, .ma-ablauf--kompakt .ma-schritt.is-done .ma-schritt__card { padding: 0; gap: 2px; background: none; box-shadow: none; border-radius: 0; }
.ma-ablauf--kompakt .ma-schritt__head { gap: 3px; }
.ma-ablauf--kompakt .ma-schritt__eyebrow, .ma-ablauf--kompakt .ma-schritt__body, .ma-ablauf--kompakt .ma-schritt__done { display: none !important; }
body .ma-ablauf--kompakt .ma-schritt .ma-schritt__title { font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: 0; }
body .ma-seite .ma-ablauf--kompakt .ma-schritt .ma-schritt__meta { margin: 0; gap: 6px; }
body .ma-seite .ma-ablauf--kompakt .ma-schritt .ma-schritt__meta > li { padding: 0; background: none; font-size: 13px; color: var(--ma-soft); gap: 4px; }
body .ma-seite .ma-ablauf--kompakt .ma-schritt .ma-schritt__meta > li:first-child:not(:last-child) { display: none; }
.ma-ablauf--kompakt .ma-schritt .ma-schritt__meta .ma-ico { width: 14px; height: 14px; }
.ma-ablauf--kompakt .ma-schritt.is-active { background: var(--ma-ink); box-shadow: 0 12px 24px -16px rgba(17, 20, 22, .8); }
body .ma-ablauf--kompakt .ma-schritt.is-active .ma-schritt__title { color: #fff; }
body .ma-seite .ma-ablauf--kompakt .ma-schritt.is-active .ma-schritt__meta > li { color: rgba(255, 255, 255, .72); }
.ma-ablauf--kompakt .ma-schritt.is-active .ma-schritt__meta .ma-ico { color: var(--ma-orange); }
.ma-ablauf--kompakt .ma-schritt.is-active .ma-schritt__nr { background: var(--ma-orange); color: var(--ma-ink); box-shadow: none; }
.ma-ablauf--kompakt .ma-schritt.is-done .ma-schritt__nr { background: var(--ma-ok-ink); color: #fff; box-shadow: none; }
.ma-ablauf__detail { display: flex; flex-direction: column; gap: 12px; padding: 18px 22px 16px; border-radius: var(--ma-radius-lg); background: var(--ma-card); box-shadow: var(--ma-shadow-lg); }
.ma-ablauf__detail:empty { display: none; }
.ma-ablauf__dhead { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
body .ma-seite .ma-ablauf__dstep { width: 100%; margin: 0; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ma-orange-text); line-height: 1.3; }
body .ma-ablauf .ma-ablauf__dtitle { margin: 0; font-size: 20px; font-weight: 600; line-height: 1.25; letter-spacing: -.005em; }
body .ma-seite .ma-ablauf__dhead .ma-schritt__meta { margin: 0; gap: 6px; }
body .ma-seite .ma-ablauf__dhead .ma-schritt__meta > li { padding: 3px 10px 3px 8px; font-size: 13px; }
.ma-ablauf__dbody { display: flex; flex-direction: column; gap: 10px; animation: maIn .3s var(--ma-ease); }
body .ma-ablauf__dbody > * { margin: 0 !important; }
body .ma-seite .ma-ablauf__dbody ul { gap: 6px; }
body .ma-seite .ma-ablauf__dbody li, body .ma-seite .ma-ablauf__dbody p { font-size: 16px; line-height: 1.5; }
.ma-ablauf__dfoot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding-top: 12px; border-top: 1px solid var(--ma-line); }
body .ma-ablauf .ma-ablauf__next { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px 0 12px; border: 0; border-radius: 999px; background: var(--ma-ink); color: #fff; font-size: 14px; font-weight: 600; cursor: pointer; transition: background-color .15s; }
body .ma-ablauf .ma-ablauf__next:hover { background: #000; color: #fff; }
body .ma-ablauf .ma-ablauf__next .ma-ico { color: var(--ma-orange); }
.ma-ablauf__ok { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--ma-ok-ink); }
body .ma-ablauf .ma-ablauf__undo { min-height: 0; padding: 0; border: 0; background: none; font-size: 13px; color: var(--ma-soft); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
body .ma-ablauf .ma-ablauf__undo:hover { background: none; color: var(--ma-ink); }
.ma-ablauf--kompakt .ma-ablauf__bar { width: 140px; }

/* ---------- Datenschutz-Hinweis ---------- */
body .ma-seite .ma-privacy, .ma-privacy { display: flex; gap: 8px; align-items: flex-start; margin: 0; font-size: 13px; line-height: 1.45; color: var(--ma-soft); }
.ma-privacy .ma-ico { color: var(--ma-teal); margin-top: 1px; }

/* ---------- Audiorecorder ---------- */
.ma-rec { display: flex; flex-direction: column; gap: 14px; }
.ma-rec__deck { position: relative; display: flex; align-items: center; gap: 22px; padding: 18px 24px 18px 18px; border-radius: var(--ma-radius-lg); background: radial-gradient(120% 140% at 0% 0%, #26302f 0%, var(--ma-ink) 60%); color: #fff; overflow: hidden; }
body .ma-rec .ma-rec__btn, body .ma-studio .ma-studio__rec { cursor: pointer; border: 0; }
body .ma-rec .ma-rec__btn { flex: none; width: 76px; height: 76px; padding: 0; border-radius: 50%; background: #fff; display: grid; place-items: center; box-shadow: 0 0 0 5px rgba(255, 255, 255, .12); transition: transform .15s ease; }
body .ma-rec .ma-rec__btn:hover { transform: scale(1.05); background: #fff; }
body .ma-rec .ma-rec__btn:disabled { opacity: .4; cursor: not-allowed; transform: none; }
.ma-rec__btn-ico { display: block; width: 30px; height: 30px; border-radius: 50%; background: var(--ma-red); transition: border-radius .2s, width .2s, height .2s; }
.ma-rec.is-rec .ma-rec__btn-ico, .ma-studio.is-rec .ma-studio__rec .ma-rec__btn-ico { width: 24px; height: 24px; border-radius: 5px; }
.ma-rec.is-rec .ma-rec__btn { animation: maPulse 1.5s infinite; }
@keyframes maPulse { 0% { box-shadow: 0 0 0 0 rgba(224, 71, 59, .65); } 70% { box-shadow: 0 0 0 18px rgba(224, 71, 59, 0); } 100% { box-shadow: 0 0 0 0 rgba(224, 71, 59, 0); } }
@keyframes maBlink { 50% { opacity: .25; } }
@keyframes maIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.ma-rec__live { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.ma-rec__top, .ma-rec__bottom { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.ma-rec__title { font-size: 18px; font-weight: 600; line-height: 1.3; color: #fff; }
.ma-rec__state { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .62); }
.ma-rec.is-rec .ma-rec__state { color: #ff8f84; }
.ma-rec.is-rec .ma-rec__state::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ma-red); animation: maBlink 1s infinite; }
.ma-rec__wave { display: block; width: 100%; height: 56px; }
.ma-rec__time { font-size: 24px; font-weight: 400; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: .02em; color: #fff; }
.ma-rec__opt, .ma-studio__opt { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; line-height: 1.3; cursor: pointer; user-select: none; -webkit-user-select: none; }
.ma-rec__opt { color: rgba(255, 255, 255, .78); }
.ma-rec__opt input, .ma-studio__opt input { width: 17px; height: 17px; margin: 0; accent-color: var(--ma-orange); flex: none; }
.ma-rec__count, .ma-studio__count { position: absolute; inset: 0; z-index: 4; display: grid; place-items: center; background: rgba(17, 20, 22, .84); color: #fff; font-size: 72px; font-weight: 300; line-height: 1; }
.ma-rec__count[hidden], .ma-studio__count[hidden] { display: none; }
.ma-pop { display: block; animation: maPop .95s var(--ma-ease) both; }
@keyframes maPop { 0% { transform: scale(1.7); opacity: 0; } 22% { transform: scale(1); opacity: 1; } 100% { transform: scale(.88); opacity: .15; } }
body .ma-seite .ma-rec__unsupported, body .ma-seite .ma-studio .ma-rec__unsupported { margin: 0; padding: 12px 16px; border-radius: var(--ma-radius-10); background: #fde8e6; color: #8c1d14; font-size: 15px; }
.ma-rec__unsupported[hidden] { display: none; }

/* ---------- Mikrofon-Leiste (Gerät wählen, Pegel testen) ---------- */
.ma-micbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
body .ma-seite .ma-micbar .ma-micbar__test { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 0 14px 0 10px; border: 0; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1.5px rgba(17, 20, 22, .22); color: var(--ma-ink); font-size: 14px; font-weight: 600; cursor: pointer; }
body .ma-seite .ma-micbar .ma-micbar__test:hover { box-shadow: inset 0 0 0 1.5px var(--ma-ink); background: #fff; color: var(--ma-ink); }
body .ma-seite .ma-micbar.is-testing .ma-micbar__test { background: var(--ma-ink); color: #fff; box-shadow: none; }
body .ma-seite .ma-micbar .ma-micbar__test:disabled { opacity: .5; cursor: default; }
.ma-micbar__test .ma-ico { color: var(--ma-orange); }
.ma-micbar__meter { flex: 1 1 120px; min-width: 100px; height: 8px; border-radius: 4px; background: rgba(17, 20, 22, .1); overflow: hidden; }
.ma-micbar__meter > span { display: block; height: 100%; width: 0; border-radius: 4px; background: linear-gradient(90deg, #3aa36b 0%, #e8c14f 70%, var(--ma-red) 100%); transition: width .08s linear; }
body .ma-seite .ma-micbar__select { flex: 1 1 100%; max-width: 100%; height: 36px; margin: 0; padding: 0 10px; border: 0; border-radius: 8px; background: #fff; box-shadow: inset 0 0 0 1.5px rgba(17, 20, 22, .16); font-family: var(--ma-font); font-size: 14px; color: var(--ma-ink); }
.ma-micbar__select[hidden] { display: none !important; }
.ma-micbar__msg { flex: 1 1 100%; font-size: 14px; font-weight: 500; line-height: 1.4; color: var(--ma-soft); }
.ma-micbar__msg:empty { display: none; }
.ma-micbar__msg.is-ok { color: var(--ma-ok-ink); }
.ma-micbar__msg.is-warn { color: #9d2318; }
.ma-rec > .ma-micbar { padding: 10px 12px; border-radius: var(--ma-radius); background: var(--ma-paper); }
.ma-take__warn { display: inline-block; align-self: flex-start; margin: 0 6px; padding: 1px 8px; border-radius: 999px; background: #fde8e6; color: #9d2318; font-size: 12px; font-weight: 600; }

/* ---------- Liste der Aufnahmen ---------- */
.ma-takes { display: flex; flex-direction: column; gap: 8px; }
body .ma-seite .ma-takes__empty { display: flex; align-items: center; gap: 10px; margin: 0; padding: 14px 16px; border-radius: var(--ma-radius); background: var(--ma-paper); box-shadow: inset 0 0 0 1.5px rgba(17, 20, 22, .08); font-size: 15px; line-height: 1.45; color: var(--ma-soft); }
.ma-takes__empty[hidden] { display: none !important; }
.ma-takes__empty .ma-ico { color: var(--ma-orange); }
body .ma-seite .ma-takes__list { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
body .ma-seite .ma-takes__list > li { padding: 10px 8px 10px 10px; counter-increment: none; font-size: 15px; }
body .ma-seite .ma-takes__list > li::before { display: none; }
.ma-take { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto auto; align-items: center; gap: 4px 12px; border-radius: var(--ma-radius); background: var(--ma-card); box-shadow: var(--ma-shadow); transition: box-shadow .2s; }
.ma-take.is-new { animation: maIn .45s var(--ma-ease); }
body .ma-take .ma-take__play { width: 46px; height: 46px; padding: 0; border: 0; border-radius: 50%; background: var(--ma-orange); color: var(--ma-ink); display: grid; place-items: center; cursor: pointer; transition: transform .15s; }
body .ma-take .ma-take__play:hover { transform: scale(1.06); background: var(--ma-orange); color: var(--ma-ink); }
.ma-take__play .ma-ico + .ma-ico, .ma-take.is-playing .ma-take__play .ma-ico:first-child { display: none; }
.ma-take.is-playing .ma-take__play .ma-ico + .ma-ico { display: inline-block; }
.ma-take__main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
body .ma-take .ma-take__name { width: 100%; margin: 0; padding: 2px 6px; border: 0; border-radius: 5px; background: transparent; font-size: 15px; font-weight: 600; line-height: 1.35; color: var(--ma-ink); }
body .ma-take .ma-take__name:hover { background: var(--ma-well); }
body .ma-take .ma-take__name:focus { outline: 2px solid var(--ma-orange); outline-offset: 0; background: #fff; }
.ma-take__wave { display: block; width: 100%; height: 30px; cursor: pointer; padding: 0 6px; }
.ma-takes--pick .ma-take__wave { cursor: default; }
.ma-take__dur { font-size: 14px; color: var(--ma-soft); font-variant-numeric: tabular-nums; padding-left: 4px; }
body .ma-take .ma-take__icon { width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--ma-muted); display: grid; place-items: center; cursor: pointer; transition: background-color .15s, color .15s; }
body .ma-take .ma-take__icon:hover { background: var(--ma-well); color: var(--ma-ink); }
body .ma-take .ma-take__del.is-confirm { width: auto; padding: 0 12px; border-radius: 999px; background: #fde8e6; color: #9d2318; font-size: 13px; font-weight: 600; white-space: nowrap; }
body .ma-take .ma-take__pick { width: 26px; height: 26px; margin: 0 4px; padding: 0; border: 0; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 2px rgba(17, 20, 22, .3); cursor: pointer; transition: box-shadow .15s; }
.ma-takes--pick .ma-take { cursor: pointer; }
.ma-take.is-selected { box-shadow: 0 0 0 2px var(--ma-orange), var(--ma-shadow); }
body .ma-take.is-selected .ma-take__pick { box-shadow: inset 0 0 0 8px var(--ma-orange); }

/* ---------- Vertonungs-Studio ---------- */
.ma-studio { display: flex; flex-direction: column; gap: 18px; padding: 26px 28px 24px; border-radius: var(--ma-radius-lg); background: var(--ma-card); box-shadow: var(--ma-shadow-lg); }
.ma-studio__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px 24px; }
.ma-studio__head > div:first-child { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
body .ma-studio .ma-studio__title { margin: 0; font-size: clamp(24px, 2.4vw, 30px); font-weight: 500; line-height: 1.2; letter-spacing: -.01em; }
.ma-studio__modes { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--ma-well); }
body .ma-studio .ma-studio__mode { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 18px 0 8px; border: 0; border-radius: 999px; background: transparent; color: var(--ma-muted); font-size: 15px; font-weight: 600; cursor: pointer; transition: background-color .2s, color .2s; }
body .ma-studio .ma-studio__mode:hover { color: var(--ma-ink); background: rgba(255, 255, 255, .6); }
body .ma-studio .ma-studio__mode[aria-selected="true"] { background: var(--ma-ink); color: #fff; }
body .ma-studio .ma-studio__mode:disabled { opacity: .45; cursor: not-allowed; }
.ma-studio__mode-nr { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; background: rgba(17, 20, 22, .1); color: inherit; }
.ma-studio__mode[aria-selected="true"] .ma-studio__mode-nr { background: var(--ma-orange); color: var(--ma-ink); }
.ma-studio__grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(280px, 1fr); gap: 22px; align-items: start; }
.ma-studio__stage { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.ma-studio__screen { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--ma-radius); overflow: hidden; background: #000; box-shadow: 0 18px 40px -24px rgba(17, 20, 22, .8); }
.ma-studio__screen iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.ma-studio.is-rec .ma-studio__screen { box-shadow: 0 0 0 3px var(--ma-red), 0 18px 40px -24px rgba(17, 20, 22, .8); }
.ma-studio__cue { position: absolute; left: 14px; top: 14px; z-index: 3; display: grid; grid-template-columns: auto minmax(0, auto); grid-template-areas: "l l" "w o" "b b"; gap: 2px 10px; max-width: calc(100% - 28px); padding: 10px 16px 12px; border-radius: 12px; background: rgba(17, 20, 22, .82); color: #fff; pointer-events: none; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: 0 12px 26px -14px rgba(0, 0, 0, .8); animation: maIn .2s var(--ma-ease); }
.ma-studio__cue[hidden] { display: none; }
.ma-studio__cue.is-now { background: var(--ma-orange); color: var(--ma-ink); }
.ma-studio__cue-label { grid-area: l; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; opacity: .8; }
.ma-studio__cue-what { grid-area: w; font-size: clamp(17px, 2.2vw, 24px); font-weight: 600; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ma-studio__cue-who { grid-area: o; align-self: center; font-size: 15px; font-weight: 500; opacity: .85; white-space: nowrap; }
.ma-studio__cue-who:empty { display: none; }
.ma-studio__cue-bar { grid-area: b; display: block; height: 3px; margin-top: 6px; border-radius: 2px; background: rgba(255, 255, 255, .2); overflow: hidden; }
.ma-studio__cue-bar > span { display: block; height: 100%; background: var(--ma-orange); }
.ma-studio__cue.is-now .ma-studio__cue-bar { display: none; }
.ma-studio__badge { position: absolute; right: 14px; top: 14px; z-index: 3; display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 999px; background: var(--ma-red); color: #fff; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; pointer-events: none; }
.ma-studio__badge[hidden] { display: none; }
.ma-studio__badge-dot { width: 8px; height: 8px; border-radius: 50%; background: #fff; animation: maBlink 1s infinite; }
.ma-studio__badge-time { font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.ma-studio__timeline { padding: 8px 0 4px; }
.ma-studio__track { position: relative; height: 8px; border-radius: 4px; background: var(--ma-well); cursor: pointer; }
.ma-studio__mark { position: absolute; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--ma-orange); box-shadow: 0 0 0 2px #fff; }
.ma-studio__head-pos { position: absolute; top: -5px; bottom: -5px; left: 0; width: 3px; margin-left: -1.5px; border-radius: 2px; background: var(--ma-ink); z-index: 1; }
.ma-studio__opt { color: var(--ma-muted); align-self: flex-start; }
.ma-studio__panels { min-width: 0; }
.ma-studio__panel { display: flex; flex-direction: column; gap: 14px; padding: 20px; border-radius: var(--ma-radius); background: var(--ma-paper); }
.ma-studio__panel[hidden] { display: none; }
.ma-studio__panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
body .ma-studio .ma-studio__panel-head h3 { margin: 0; font-size: 20px; font-weight: 600; }
.ma-studio__panel-count { font-size: 14px; color: var(--ma-soft); font-variant-numeric: tabular-nums; }
body .ma-seite .ma-studio__help, body .ma-seite .ma-studio__hint { margin: 0; font-size: 15px; line-height: 1.5; color: var(--ma-muted); }
body .ma-seite .ma-studio__hint { padding: 10px 14px; border-radius: var(--ma-radius-10); background: var(--ma-hint-bg); color: var(--ma-orange-text); font-weight: 500; }
.ma-studio__hint[hidden] { display: none; }
/* Geräusche-Plan */
body .ma-seite .ma-cues { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; max-height: 340px; overflow-y: auto; }
body .ma-seite .ma-cues > li { padding: 0; counter-increment: none; font-size: 15px; }
body .ma-seite .ma-cues > li::before { display: none; }
body .ma-seite .ma-cues .ma-cues__empty { padding: 12px 14px; border-radius: var(--ma-radius-10); box-shadow: inset 0 0 0 1.5px rgba(17, 20, 22, .1); color: var(--ma-soft); }
.ma-cue { display: grid; grid-template-columns: auto auto minmax(0, 1.4fr) minmax(0, 1fr) auto; align-items: center; gap: 6px; padding: 6px; border-radius: var(--ma-radius-10); background: var(--ma-card); box-shadow: var(--ma-shadow); }
body .ma-cue .ma-cue__time { min-width: 52px; height: 34px; padding: 0 8px; border: 0; border-radius: 7px; background: var(--ma-ink); color: #fff; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; cursor: pointer; }
body .ma-cue .ma-cue__time:hover { background: #000; color: #fff; }
.ma-cue__nudge { display: inline-flex; flex-direction: column; gap: 2px; }
body .ma-cue .ma-cue__nudge button { width: 22px; height: 16px; padding: 0; border: 0; border-radius: 4px; background: var(--ma-well); color: var(--ma-muted); font-size: 13px; line-height: 1; cursor: pointer; }
body .ma-cue .ma-cue__nudge button:hover { background: var(--ma-ink); color: #fff; }
body .ma-cue input[type="text"] { width: 100%; height: 34px; margin: 0; padding: 0 8px; border: 0; border-radius: 7px; background: var(--ma-paper); font-size: 15px; color: var(--ma-ink); }
body .ma-cue input[type="text"]:focus { outline: 2px solid var(--ma-orange); outline-offset: 0; background: #fff; }
body .ma-cue .ma-cue__del { width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--ma-faint); font-size: 20px; line-height: 1; cursor: pointer; }
body .ma-cue .ma-cue__del:hover { background: #fde8e6; color: #9d2318; }
body .ma-studio .ma-studio__add { align-self: flex-start; min-height: 46px; padding: 0 20px 0 14px; font-size: 15px; }
.ma-studio__plus { width: 24px; height: 24px; border-radius: 50%; background: var(--ma-orange); color: var(--ma-ink); display: grid; place-items: center; font-size: 18px; font-weight: 600; line-height: 1; }
.ma-studio__add [data-now] { font-variant-numeric: tabular-nums; }
/* Aufnehmen */
.ma-studio__meter { height: 8px; border-radius: 4px; background: rgba(17, 20, 22, .1); overflow: hidden; }
.ma-studio__meter > span { display: block; height: 100%; width: 0; border-radius: 4px; background: linear-gradient(90deg, #3aa36b 0%, #e8c14f 70%, var(--ma-red) 100%); transition: width .08s linear; }
body .ma-studio .ma-studio__rec { display: inline-flex; align-items: center; justify-content: center; gap: 14px; min-height: 64px; padding: 0 26px 0 14px; border-radius: 999px; background: var(--ma-ink); color: #fff; font-size: 17px; font-weight: 600; transition: transform .15s, box-shadow .15s; }
body .ma-studio .ma-studio__rec:hover { transform: translateY(-1px); box-shadow: var(--ma-shadow-btn); background: var(--ma-ink); color: #fff; }
body .ma-studio .ma-studio__rec:disabled { opacity: .55; cursor: progress; transform: none; }
.ma-studio__rec .ma-rec__btn-ico { width: 36px; height: 36px; box-shadow: 0 0 0 5px rgba(255, 255, 255, .14); }
.ma-studio.is-rec .ma-studio__rec { animation: maPulse 1.5s infinite; }
/* Anschauen */
body .ma-studio .ma-studio__watch { min-height: 52px; }
body .ma-studio .ma-studio__watch:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }
body .ma-studio .ma-studio__watch.is-playing { background: var(--ma-orange) !important; color: var(--ma-ink) !important; }
body .ma-studio .ma-studio__watch.is-playing .ma-ico { color: var(--ma-ink); }
.ma-studio__mix { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 18px; }
.ma-studio__mix label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ma-soft); }
.ma-studio__mix input[type="range"] { width: 100%; margin: 0; accent-color: var(--ma-orange); }

/* Studio und Schritte schmal (Kursnavigation offen, Tablet) */
@container maseite (max-width: 860px) {
	.ma-studio__grid { grid-template-columns: minmax(0, 1fr); }
}
@container maseite (max-width: 600px) {
	.ma-studio { padding: 18px 14px 18px; border-radius: var(--ma-radius); }
	.ma-studio__modes { width: 100%; }
	body .ma-studio .ma-studio__mode { flex: 1 1 0; justify-content: center; padding: 0 8px; font-size: 14px; }
	.ma-studio__mode-nr { display: none; }
	.ma-studio__panel { padding: 14px; }
	.ma-cue { grid-template-columns: auto auto minmax(0, 1fr) auto; }
	.ma-cue__who { grid-column: 3; }
	.ma-cue .ma-cue__del { grid-column: 4; grid-row: 1; }
	.ma-schritt { grid-template-columns: 40px minmax(0, 1fr); gap: 0 12px; }
	.ma-schritt::before { left: 19px; top: 50px; }
	.ma-schritt__nr { width: 40px; height: 40px; font-size: 18px; }
	.ma-schritt__card { padding: 18px 16px; }
	body .ma-schritt .ma-schritt__title { font-size: 20px; }
	.ma-rec__deck { gap: 14px; padding: 14px; }
	body .ma-rec .ma-rec__btn { width: 62px; height: 62px; }
	.ma-take { grid-template-columns: auto minmax(0, 1fr) auto auto; }
	.ma-take__dur { display: none; }
	.ma-ablauf__progress { align-items: flex-start; }
	.ma-ablauf--kompakt .ma-ablauf__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ma-ablauf--kompakt .ma-schritt { gap: 10px; padding: 10px 12px; }
	.ma-ablauf--kompakt .ma-schritt__nr { width: 30px; height: 30px; font-size: 15px; }
	body .ma-ablauf--kompakt .ma-schritt .ma-schritt__title { font-size: 14px; }
	.ma-ablauf__detail { padding: 16px 16px 14px; }
}
@media (prefers-reduced-motion: reduce) {
	.ma-rec.is-rec .ma-rec__btn, .ma-studio.is-rec .ma-studio__rec, .ma-pop, .ma-take.is-new, .ma-studio__cue { animation: none; }
}

/* ---------- Nach Breite des Inhaltsbereichs (z. B. mit offener Kursnavigation) ---------- */
@container maseite (max-width: 700px) {
	.ma-start { grid-template-columns: minmax(0, 1fr); padding: 28px 24px 30px; gap: 24px; }
	.ma-start__media { order: -1; max-width: 460px; }
	.ma-start__media::before { display: none; }
	body .ma-start .ma-start__img { transform: none; }
	body .ma-start .ma-start__text, body .ma-start .ma-start__note { max-width: none; }
	.ma-auftrag, .ma-abschnitt { padding: 24px 22px 26px; }
}
@container maseite (max-width: 520px) {
	.ma-video-raster { grid-template-columns: minmax(0, 1fr) !important; }
	.ma-start { padding: 22px 18px 24px; }
	body .ma-start .ma-start__title { font-size: 34px; }
	.ma-auftrag, .ma-abschnitt { padding: 20px 16px 22px; border-radius: var(--ma-radius); }
	.ma-abschnitt .wp-block-image { padding: 8px; }
}

/* ---------- Kleine Bildschirme ---------- */
@media (max-width: 600px) {
	body .ma-seite { gap: 20px; }
	.ma-auftrag, .ma-abschnitt { padding: 22px 18px 24px; border-radius: var(--ma-radius); }
	body .ma-auftrag .ma-auftrag__title { font-size: 24px; }
	body .ma-auftrag .ma-auftrag__body li { font-size: 17px; }
	.ma-abschnitt .wp-block-image { padding: 8px; }
	.ma-audio { gap: 12px; padding: 10px 14px 10px 10px; }
	.ma-audio__play { width: 46px; height: 46px; }
	.ma-video__play { width: 64px; height: 64px; margin: -32px 0 0 -32px; }
}
@media (prefers-reduced-motion: reduce) {
	.ma-video__img, .ma-video__play, .ma-btn, .ma-lb { transition: none; animation: none; }
}

/* Studio: «Von vorne» neben dem Abspielknopf */
body .ma-seite .ma-studio .ma-studio__restart { align-self: center; min-height: 36px; padding: 0 14px; border: 0; border-radius: 999px; background: transparent; box-shadow: inset 0 0 0 1.5px rgba(17, 20, 22, .22); color: var(--ma-ink); font-size: 14px; font-weight: 600; cursor: pointer; }
body .ma-seite .ma-studio .ma-studio__restart:hover { box-shadow: inset 0 0 0 1.5px var(--ma-ink); background: #fff; color: var(--ma-ink); }
.ma-studio__restart[hidden] { display: none !important; }

/* ---------- Sprech-Werkstatt ---------- */
.ma-werk { display: flex; flex-direction: column; gap: 22px; padding: 26px 28px 26px; border-radius: var(--ma-radius-lg); background: var(--ma-card); box-shadow: var(--ma-shadow-lg); }
.ma-werk__head { display: flex; flex-direction: column; gap: 8px; }
body .ma-werk .ma-werk__title { margin: 0; font-size: clamp(24px, 2.4vw, 30px); font-weight: 500; line-height: 1.2; letter-spacing: -.01em; }
.ma-werk__step { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.ma-werk__label { display: flex; align-items: center; gap: 10px; }
.ma-werk__nr { width: 28px; height: 28px; flex: none; border-radius: 50%; background: var(--ma-ink); color: #fff; display: grid; place-items: center; font-size: 14px; font-weight: 600; }
body .ma-werk .ma-werk__label h3 { margin: 0; font-size: 19px; font-weight: 600; line-height: 1.3; }
.ma-werk__chars { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }
body .ma-werk .ma-werk__char { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 0; padding: 8px; border: 0; border-radius: var(--ma-radius); background: #fff; box-shadow: inset 0 0 0 1px var(--ma-line); color: var(--ma-ink); cursor: pointer; transition: box-shadow .2s, transform .15s; }
body .ma-werk .ma-werk__char:hover { background: #fff; box-shadow: inset 0 0 0 1px rgba(17, 20, 22, .3), 0 10px 20px -16px rgba(17, 20, 22, .7); transform: translateY(-1px); color: var(--ma-ink); }
/* Eigene Bilder (mit Namen im Bild) ganz zeigen, nicht zuschneiden */
body .ma-werk .ma-werk__char img { display: block; width: 100%; max-width: 124px; height: auto; aspect-ratio: auto; object-fit: contain; border-radius: 0; box-shadow: none; }
.ma-werk__noimg { display: block; width: 78px; height: 78px; border-radius: 50%; background: var(--ma-well); }
body .ma-werk .ma-werk__char[aria-checked="true"] { background: #fff; box-shadow: inset 0 0 0 3px var(--ma-orange), 0 12px 24px -16px rgba(17, 20, 22, .7); }
body .ma-werk .ma-werk__char[aria-checked="true"]::after { content: ""; position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; border-radius: 50%; background: var(--ma-orange) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111416' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 16px no-repeat; }
body .ma-werk .ma-werk__chars:has([aria-checked="true"]) .ma-werk__char[aria-checked="false"] img { opacity: .55; filter: grayscale(.4); transition: opacity .2s; }
body .ma-werk .ma-werk__char:hover img { opacity: 1 !important; filter: none !important; }
.ma-werk__char img + .ma-werk__name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* Name steht schon im Bild */
.ma-werk__name { font-size: 15px; font-weight: 600; line-height: 1.25; text-align: center; }
body .ma-seite .ma-werk__tipp { display: flex; align-items: flex-start; gap: 8px; margin: 0; padding: 10px 14px; border-radius: var(--ma-radius-10); background: var(--ma-hint-bg); font-size: 15px; line-height: 1.45; color: var(--ma-prose); animation: maIn .25s var(--ma-ease); }
.ma-werk__tipp[hidden] { display: none !important; }
.ma-werk__tipp .ma-ico { color: var(--ma-orange); margin-top: 1px; }
.ma-werk__tipp strong { font-weight: 600; color: var(--ma-ink); }
.ma-werk__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 22px; align-items: start; }
body .ma-seite .ma-werk__help { margin: 0; font-size: 15px; line-height: 1.5; color: var(--ma-muted); }
.ma-werk .ma-rec { gap: 10px; }
/* Schreibfeld */
.ma-pad { display: flex; flex-direction: column; border-radius: var(--ma-radius); background: #fffdf7; box-shadow: inset 0 0 0 1.5px rgba(17, 20, 22, .14); overflow: hidden; }
.ma-pad:focus-within { box-shadow: inset 0 0 0 2px var(--ma-orange); }
.ma-pad__head { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 14px 0; font-size: 13px; color: var(--ma-soft); }
.ma-pad__for strong { color: var(--ma-ink); font-weight: 600; }
.ma-pad__count { font-variant-numeric: tabular-nums; }
body .ma-seite .ma-pad__text { display: block; width: 100%; min-height: 210px; margin: 0; padding: 10px 14px 12px; border: 0; background: transparent; box-shadow: none; resize: vertical; font-family: var(--ma-font); font-size: 18px; line-height: 1.6; color: var(--ma-ink); outline: none; }
body .ma-seite .ma-pad__text:disabled { cursor: not-allowed; opacity: .55; }
.ma-pad__tools { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 10px 10px; border-top: 1px solid var(--ma-line); background: rgba(255, 255, 255, .7); }
body .ma-seite .ma-pad__tools button { min-height: 34px; padding: 0 12px; border: 0; border-radius: 999px; background: transparent; box-shadow: inset 0 0 0 1.5px rgba(17, 20, 22, .18); color: var(--ma-ink); font-size: 14px; font-weight: 600; cursor: pointer; }
body .ma-seite .ma-pad__tools button:hover { box-shadow: inset 0 0 0 1.5px var(--ma-ink); background: #fff; color: var(--ma-ink); }
body .ma-seite .ma-pad__tools .ma-pad__prompt { background: var(--ma-ink); color: #fff; box-shadow: none; }
body .ma-seite .ma-pad__tools .ma-pad__prompt:hover { background: #000; color: #fff; }
.ma-pad__saved { margin-left: auto; font-size: 13px; color: var(--ma-ok-ink); font-weight: 500; }
@container maseite (max-width: 860px) { .ma-werk__grid { grid-template-columns: minmax(0, 1fr); } }
@container maseite (max-width: 600px) {
	.ma-werk { padding: 18px 14px; border-radius: var(--ma-radius); }
	.ma-werk__chars { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
	body .ma-werk .ma-werk__char { padding: 4px; }
}

/* ---------- Vorlese-Ansicht (Teleprompter) ---------- */
.ma-prompt { position: fixed; inset: 0; z-index: 100001; display: flex; flex-direction: column; background: #0f1213; color: #fff; animation: maFade .2s ease both; }
.ma-prompt[hidden] { display: none; }
.ma-prompt__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 14px 20px; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.ma-prompt__who { font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ma-orange); }
.ma-prompt__state { font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .6); }
.ma-prompt.is-rec .ma-prompt__state { color: #ff8f84; }
.ma-prompt__time { font-size: 20px; font-variant-numeric: tabular-nums; }
.ma-prompt__sp { flex: 1; }
.ma-prompt button { font-family: var(--ma-font); cursor: pointer; border: 0; }
.ma-prompt__bar > button[data-z] { width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, .1); color: #fff; font-size: 15px; font-weight: 600; }
.ma-prompt__bar > button[data-z]:hover { background: rgba(255, 255, 255, .2); }
.ma-prompt__rec { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 18px 0 8px; border-radius: 999px; background: #fff; color: var(--ma-ink); font-size: 15px; font-weight: 600; }
.ma-prompt__rec .ma-rec__btn-ico { width: 28px; height: 28px; }
.ma-prompt.is-rec .ma-prompt__rec .ma-rec__btn-ico { width: 22px; height: 22px; border-radius: 5px; }
.ma-prompt.is-rec .ma-prompt__rec { animation: maPulse 1.5s infinite; }
.ma-prompt__close { width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 255, 255, .12); color: #fff; font-size: 26px; line-height: 1; }
.ma-prompt__close:hover { background: rgba(255, 255, 255, .22); }
.ma-prompt button:focus-visible { outline: 3px solid var(--ma-orange); outline-offset: 2px; }
.ma-prompt__text { flex: 1; overflow-y: auto; width: 100%; max-width: 34ch; margin: 0 auto; padding: 6vh 24px 20vh; font-size: var(--ma-prompt-size, 40px); font-weight: 400; line-height: 1.5; letter-spacing: .005em; }
.ma-prompt__text em { color: rgba(255, 255, 255, .5); }
.ma-prompt__count { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(15, 18, 19, .82); font-size: 120px; font-weight: 300; pointer-events: none; }
.ma-prompt__count[hidden] { display: none; }
@media (max-width: 600px) { .ma-prompt__bar { padding: 10px 12px; } .ma-prompt__text { padding: 4vh 18px 20vh; } }

/* ---------- Gegen Theme-Stile absichern (BuddyBoss färbt Knöpfe bei Fokus/Hover um und gibt ihnen Innenabstand) ---------- */
html body .ma-prompt .ma-prompt__close, html body .ma-prompt .ma-prompt__close:focus, html body .ma-prompt .ma-prompt__close:active { width: 44px; height: 44px; min-height: 0; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .12); color: #fff; box-shadow: none; display: grid; place-items: center; font-size: 26px; line-height: 1; }
html body .ma-prompt .ma-prompt__close:hover { background: rgba(255, 255, 255, .24); color: #fff; }
html body .ma-prompt .ma-prompt__bar > button[data-z], html body .ma-prompt .ma-prompt__bar > button[data-z]:focus, html body .ma-prompt .ma-prompt__bar > button[data-z]:active { width: 40px; height: 40px; min-height: 0; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .1); color: #fff; box-shadow: none; font-size: 15px; font-weight: 600; line-height: 1; }
html body .ma-prompt .ma-prompt__bar > button[data-z]:hover { background: rgba(255, 255, 255, .22); color: #fff; }
html body .ma-prompt .ma-prompt__rec, html body .ma-prompt .ma-prompt__rec:hover, html body .ma-prompt .ma-prompt__rec:focus, html body .ma-prompt .ma-prompt__rec:active { display: inline-flex; align-items: center; gap: 10px; height: 44px; min-height: 44px; padding: 0 18px 0 8px; border: 0; border-radius: 999px; background: #fff; color: var(--ma-ink); box-shadow: none; font-size: 15px; font-weight: 600; line-height: 1; }
html body .ma-prompt .ma-prompt__rec[hidden] { display: none; }
html body .ma-audio .ma-audio__play, html body .ma-audio .ma-audio__play:hover, html body .ma-audio .ma-audio__play:focus, html body .ma-audio .ma-audio__play:active { padding: 0; border: 0; min-height: 0; background: var(--ma-orange); color: var(--ma-ink); }
html body .ma-video .ma-video__poster, html body .ma-video .ma-video__poster:hover, html body .ma-video .ma-video__poster:focus, html body .ma-video .ma-video__poster:active { padding: 0; border: 0; min-height: 0; background: var(--ma-ink); color: #fff; }
html body .ma-video--noimg .ma-video__poster, html body .ma-video--noimg .ma-video__poster:hover, html body .ma-video--noimg .ma-video__poster:focus { background: linear-gradient(135deg, #1f2a2d, var(--ma-ink)); }
html body .ma-video--bild .ma-video__poster, html body .ma-video--bild .ma-video__poster:hover, html body .ma-video--bild .ma-video__poster:focus { background: #fff; }
html body .ma-lb .ma-lb__close, html body .ma-lb .ma-lb__close:hover, html body .ma-lb .ma-lb__close:focus, html body .ma-lb .ma-lb__close:active { padding: 0; border: 0; min-height: 0; background: #fff; color: var(--ma-ink); box-shadow: none; }
/* Text-/Schrift-Abweichungen des Themes bei Fokus verhindern */
html body :is(.ma-seite, .ma-prompt, .ma-lb) button:focus { text-decoration: none; text-transform: none; }
html body :is(.ma-seite, .ma-prompt, .ma-lb) button:focus:not(:focus-visible) { outline: none; }
.ma-prompt:focus { outline: none; }

/* ---------- Übe-Modus unter Videos ---------- */
.ma-video__frame iframe.is-mirrored, .ma-lb__frame iframe.is-mirrored { transform: scaleX(-1); }
.ma-uebe { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 10px; padding: 8px 10px; border-radius: var(--ma-radius); background: var(--ma-well); }
.ma-uebe[hidden] { display: none; }
.ma-uebe__label { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ma-muted); padding: 0 4px; }
.ma-uebe__seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: 999px; background: rgba(255, 255, 255, .7); box-shadow: inset 0 0 0 1px var(--ma-line); }
html body .ma-uebe button, html body .ma-uebe button:focus { min-height: 32px; margin: 0; padding: 0 12px; border: 0; border-radius: 999px; background: transparent; color: var(--ma-ink); box-shadow: none; font-family: var(--ma-font); font-size: 14px; font-weight: 600; line-height: 1; text-transform: none; cursor: pointer; }
html body .ma-uebe .ma-uebe__btn { background: #fff; box-shadow: inset 0 0 0 1px var(--ma-line); }
html body .ma-uebe button:hover { background: #fff; color: var(--ma-ink); box-shadow: inset 0 0 0 1.5px var(--ma-ink); }
html body .ma-uebe button[aria-pressed="true"], html body .ma-uebe .ma-uebe__btn.is-on { background: var(--ma-ink); color: #fff; box-shadow: none; }
.ma-uebe__hint { flex: 1 1 160px; font-size: 13px; color: var(--ma-soft); }
.ma-uebe__hint:empty { display: none; }
.ma-uebe--dark { margin-top: 12px; background: rgba(255, 255, 255, .1); }
.ma-uebe--dark .ma-uebe__label, .ma-uebe--dark .ma-uebe__hint { color: rgba(255, 255, 255, .75); }
.ma-uebe--dark .ma-uebe__seg { background: rgba(255, 255, 255, .12); box-shadow: none; }
html body .ma-uebe--dark button, html body .ma-uebe--dark button:focus { color: #fff; }
html body .ma-uebe--dark .ma-uebe__btn { background: rgba(255, 255, 255, .14); box-shadow: none; }
html body .ma-uebe--dark button:hover { background: rgba(255, 255, 255, .26); color: #fff; box-shadow: none; }
html body .ma-uebe--dark button[aria-pressed="true"], html body .ma-uebe--dark .ma-uebe__btn.is-on { background: var(--ma-orange); color: var(--ma-ink); }

/* ---------- Groove-Baukasten ---------- */
.ma-groove { display: flex; flex-direction: column; gap: 12px; padding: 16px 18px; border-radius: var(--ma-radius); background: #fff; box-shadow: var(--ma-shadow); }
.ma-groove__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.ma-groove__title { font-size: 17px; font-weight: 600; color: var(--ma-ink); }
.ma-groove__hint { font-size: 13px; color: var(--ma-soft); }
.ma-groove__grid { display: flex; flex-direction: column; gap: 4px; overflow-x: auto; padding-bottom: 2px; }
.ma-groove__row { display: grid; grid-template-columns: 112px repeat(var(--ma-steps, 8), minmax(30px, 1fr)); gap: 4px; align-items: stretch; min-width: 380px; }
.ma-groove__lane { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--ma-muted); }
html body .ma-groove button.ma-groove__lane, html body .ma-groove button.ma-groove__lane:focus { min-height: 34px; margin: 0; padding: 0 8px; border: 0; border-radius: 8px; background: var(--ma-paper); color: var(--ma-ink); box-shadow: none; font-family: var(--ma-font); font-size: 13px; font-weight: 600; text-transform: none; cursor: pointer; text-align: left; }
html body .ma-groove button.ma-groove__lane:hover { background: var(--ma-well); color: var(--ma-ink); }
.ma-groove__dot { width: 12px; height: 12px; border-radius: 50%; flex: none; background: var(--g-col, var(--ma-ink)); }
.ma-groove__self { margin-left: auto; padding: 1px 6px; border-radius: 999px; font-size: 11px; font-weight: 700; color: transparent; }
.ma-groove__row.is-self .ma-groove__self { color: #fff; background: var(--ma-orange-text); }
.ma-groove__row--stampfen { --g-col: #1f4d3a; }
.ma-groove__row--patschen { --g-col: #1f737a; }
.ma-groove__row--brust { --g-col: #b65d18; }
.ma-groove__row--klatschen { --g-col: #e8924f; }
.ma-groove__row--schnippen { --g-col: #8b5cc4; }
.ma-groove__row--tippen { --g-col: #c45c9a; }
.ma-groove__row--wippen { --g-col: #6b7b72; }
.ma-groove__row--silbe { --g-col: #3c3c3c; }
.ma-groove__row--silbe .ma-groove__cell i { width: 12px; height: 12px; }
.ma-groove__row--silbe .ma-groove__cell.is-accent i { width: 22px; height: 22px; background: var(--ma-orange-text, #c4621a); }
.ma-groove__cell--text.is-accent { font-weight: 800; text-decoration: underline; text-decoration-thickness: 2.5px; text-underline-offset: 4px; text-decoration-color: var(--ma-orange-text, #c4621a); }
.ma-groove__cell { position: relative; display: grid; place-items: center; min-height: 34px; border-radius: 8px; background: var(--ma-paper); font-size: 13px; font-weight: 600; color: var(--ma-soft); transition: background-color .08s; }
.ma-groove__cell.is-beat { background: var(--ma-well); }
.ma-groove__cell--count { min-height: 24px; background: none !important; font-size: 14px; color: var(--ma-ink); }
.ma-groove__cell--count:not(.is-beat) { color: var(--ma-faint); }
.ma-groove__cell i { width: 18px; height: 18px; border-radius: 50%; background: var(--g-col); box-shadow: 0 2px 6px -2px rgba(0, 0, 0, .4); transition: transform .08s; }
.ma-groove__row.is-self .ma-groove__cell i { background: transparent; box-shadow: inset 0 0 0 2.5px var(--g-col); }
.ma-groove__cell--text { min-height: 30px; padding: 0 2px; background: none !important; font-size: 13px; color: var(--ma-ink); white-space: nowrap; }
.ma-groove__row--text .ma-groove__lane { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--ma-faint); }
.ma-groove__cell.is-now { background: #fde7d3; }
.ma-groove__cell.is-now i { transform: scale(1.35); }
.ma-groove__cell--count.is-now { color: var(--ma-orange-text); }
.ma-groove__cell--text.is-now { color: var(--ma-orange-text); background: #fde7d3 !important; }
.ma-groove.is-countin .ma-groove__cell.is-now:not(.ma-groove__cell--count) { background: var(--ma-paper); }
.ma-groove.is-countin .ma-groove__cell--count.is-now { background: var(--ma-orange) !important; color: var(--ma-ink); }
.ma-groove__ctrl { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
html body .ma-groove .ma-groove__play, html body .ma-groove .ma-groove__play:focus { width: 46px; height: 46px; min-height: 0; padding: 0; border: 0; border-radius: 50%; background: var(--ma-orange); color: var(--ma-ink); display: grid; place-items: center; cursor: pointer; box-shadow: none; }
html body .ma-groove .ma-groove__play:hover { background: var(--ma-orange); transform: scale(1.05); }
.ma-groove__play .ma-ico + .ma-ico, .ma-groove.is-playing .ma-groove__play .ma-ico:first-child { display: none; }
.ma-groove.is-playing .ma-groove__play .ma-ico + .ma-ico { display: inline-block; }
.ma-groove__tempo { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--ma-muted); }
.ma-groove__tempo input { width: 140px; margin: 0; accent-color: var(--ma-orange); }
.ma-groove__tempo output { min-width: 56px; font-variant-numeric: tabular-nums; color: var(--ma-ink); }
.ma-groove__tempo output::after { content: " BPM"; font-size: 11px; color: var(--ma-soft); }
.ma-groove__opt { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--ma-muted); cursor: pointer; }
.ma-groove__opt input { width: 16px; height: 16px; margin: 0; accent-color: var(--ma-orange); }

/* ---------- Auftritts-Check ---------- */
.ma-check { display: flex; flex-direction: column; gap: 16px; padding: 26px 28px 22px; border-radius: var(--ma-radius-lg); background: var(--ma-card); box-shadow: var(--ma-shadow-lg); }
.ma-check__head { display: flex; flex-direction: column; gap: 8px; }
body .ma-check .ma-check__title { margin: 0; font-size: clamp(22px, 2.2vw, 28px); font-weight: 500; line-height: 1.2; }
body .ma-seite .ma-check__intro { margin: 0; font-size: 15px; color: var(--ma-muted); }
body .ma-seite .ma-check__list { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; counter-reset: none; }
body .ma-seite .ma-check__list > li { padding: 10px 12px 10px 14px; counter-increment: none; border-radius: var(--ma-radius-10); background: var(--ma-paper); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; font-size: 16px; }
body .ma-seite .ma-check__list > li::before { display: none; }
body .ma-seite .ma-check__list > li.is-set { background: #f3f7f1; }
.ma-check__krit { flex: 1 1 240px; color: var(--ma-ink); font-weight: 500; }
.ma-check__scale { display: inline-flex; gap: 4px; }
html body .ma-check .ma-check__scale button, html body .ma-check .ma-check__scale button:focus { display: inline-flex; flex-direction: column; align-items: center; gap: 3px; min-width: 64px; min-height: 0; margin: 0; padding: 6px 4px 4px; border: 0; border-radius: 8px; background: transparent; color: var(--ma-soft); box-shadow: none; font-family: var(--ma-font); font-size: 11px; font-weight: 600; text-transform: none; cursor: pointer; }
html body .ma-check .ma-check__scale button:hover { background: #fff; color: var(--ma-ink); }
.ma-check__dot { width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 2px rgba(17, 20, 22, .25); background: #fff; transition: background-color .15s, box-shadow .15s; }
.ma-check__scale button.is-fill .ma-check__dot { background: var(--ma-orange); box-shadow: none; }
html body .ma-check .ma-check__scale button[aria-checked="true"] { color: var(--ma-ink); }
.ma-check__note { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 600; color: var(--ma-muted); }
body .ma-seite .ma-check__note textarea { width: 100%; margin: 0; padding: 10px 12px; border: 0; border-radius: var(--ma-radius-10); background: #fffdf7; box-shadow: inset 0 0 0 1.5px rgba(17, 20, 22, .14); font-family: var(--ma-font); font-size: 16px; line-height: 1.5; color: var(--ma-ink); resize: vertical; }
body .ma-seite .ma-check__note textarea:focus { outline: none; box-shadow: inset 0 0 0 2px var(--ma-orange); }
.ma-check__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.ma-check__sum { flex: 1 1 200px; font-size: 14px; font-weight: 600; color: var(--ma-ok-ink); }
html body .ma-check .ma-check__foot button, html body .ma-check .ma-check__foot button:focus { min-height: 36px; margin: 0; padding: 0 14px; border: 0; border-radius: 999px; background: #fff; color: var(--ma-ink); box-shadow: inset 0 0 0 1.5px rgba(17, 20, 22, .2); font-family: var(--ma-font); font-size: 14px; font-weight: 600; text-transform: none; cursor: pointer; }
html body .ma-check .ma-check__foot .ma-check__print { background: var(--ma-ink); color: #fff; box-shadow: none; }
html body .ma-check .ma-check__foot button.is-confirm { background: #fde8e6; color: #9d2318; box-shadow: none; }
@container maseite (max-width: 600px) {
	.ma-check { padding: 18px 14px; }
	html body .ma-check .ma-check__scale button { min-width: 54px; }
	.ma-groove { padding: 12px; }
}

/* ---------- Gemeinsame Knopf-Absicherung der neuen Bausteine ---------- */
html body :is(.ma-hoer, .ma-timer, .ma-besch, .ma-drums) button { margin: 0; min-height: 0; border: 0; font-family: var(--ma-font); text-transform: none; letter-spacing: normal; line-height: 1.2; cursor: pointer; text-shadow: none; }
html body :is(.ma-hoer, .ma-timer, .ma-besch) .ma-pill, html body :is(.ma-hoer__foot, .ma-timer__ctrl, .ma-besch__foot) button, html body :is(.ma-hoer__foot, .ma-timer__ctrl, .ma-besch__foot) button:focus { min-height: 36px; padding: 0 14px; border-radius: 999px; background: #fff; color: var(--ma-ink); box-shadow: inset 0 0 0 1.5px rgba(17, 20, 22, .2); font-size: 14px; font-weight: 600; }
html body :is(.ma-hoer__foot, .ma-timer__ctrl, .ma-besch__foot) button:hover { background: #fff; color: var(--ma-ink); box-shadow: inset 0 0 0 1.5px var(--ma-ink); }
html body :is(.ma-hoer__foot, .ma-besch__foot) button.is-confirm { background: #fde8e6; color: #9d2318; box-shadow: none; }

/* ---------- Hör-Raster ---------- */
.ma-hoer { display: flex; flex-direction: column; gap: 14px; padding: 24px 26px 20px; border-radius: var(--ma-radius-lg); background: var(--ma-card); box-shadow: var(--ma-shadow-lg); }
.ma-hoer__head { display: flex; flex-direction: column; gap: 8px; }
body .ma-hoer .ma-hoer__title { margin: 0; font-size: clamp(22px, 2.2vw, 28px); font-weight: 500; }
.ma-hoer__player { display: flex; align-items: center; gap: 14px; padding: 10px 16px 10px 10px; border-radius: 999px; background: var(--ma-well); }
html body .ma-hoer .ma-hoer__play, html body .ma-hoer .ma-hoer__play:focus { width: 50px; height: 50px; flex: none; padding: 0; border-radius: 50%; background: var(--ma-orange); color: var(--ma-ink); display: grid; place-items: center; box-shadow: none; }
.ma-hoer__play .ma-ico + .ma-ico, .ma-hoer.is-playing .ma-hoer__play .ma-ico:first-child { display: none; }
.ma-hoer.is-playing .ma-hoer__play .ma-ico + .ma-ico { display: inline-block; }
.ma-hoer__track { position: relative; flex: 1; height: 26px; cursor: pointer; }
.ma-hoer__bar { position: absolute; left: 0; right: 0; top: 10px; height: 6px; border-radius: 3px; background: rgba(17, 20, 22, .14); overflow: hidden; }
.ma-hoer__fill { display: block; height: 100%; width: 0; background: var(--ma-orange); }
.ma-hoer__ticks i { position: absolute; top: 5px; width: 2px; height: 16px; margin-left: -1px; border-radius: 1px; background: rgba(17, 20, 22, .35); }
.ma-hoer__time { flex: none; font-size: 14px; color: var(--ma-soft); font-variant-numeric: tabular-nums; }
.ma-hoer audio { display: none; }
body .ma-seite .ma-hoer__now { margin: 0; min-height: 1.4em; font-size: 15px; font-weight: 600; color: var(--ma-orange-text); }
body .ma-seite .ma-hoer__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 6px 10px; margin: 0; padding: 0; counter-reset: none; }
body .ma-seite .ma-hoer__list > li { display: flex; align-items: center; gap: 8px; padding: 4px; counter-increment: none; border-radius: 10px; background: var(--ma-paper); transition: background-color .2s, box-shadow .2s; }
body .ma-seite .ma-hoer__list > li::before { display: none; }
body .ma-seite .ma-hoer__list > li.is-now { background: #fde7d3; box-shadow: inset 0 0 0 2px var(--ma-orange); }
html body .ma-hoer .ma-hoer__nr, html body .ma-hoer .ma-hoer__nr:focus { display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-width: 52px; height: 36px; padding: 0 8px; border-radius: 8px; background: var(--ma-ink); color: #fff; font-size: 14px; font-weight: 600; box-shadow: none; }
html body .ma-hoer .ma-hoer__nr .ma-ico { color: var(--ma-orange); }
html body .ma-hoer .ma-hoer__nr:hover { background: #000; color: #fff; }
body .ma-seite .ma-hoer__note { flex: 1; min-width: 0; height: 36px; margin: 0; padding: 0 10px; border: 0; border-radius: 8px; background: #fff; box-shadow: inset 0 0 0 1px var(--ma-line); font-family: var(--ma-font); font-size: 15px; color: var(--ma-ink); }
body .ma-seite .ma-hoer__note:focus { outline: none; box-shadow: inset 0 0 0 2px var(--ma-orange); }
.ma-hoer__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }
.ma-hoer__saved { margin-right: auto; font-size: 13px; font-weight: 600; color: var(--ma-ok-ink); }

/* ---------- Klassen-Timer ---------- */
.ma-timer { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 14px 24px; padding: 20px 24px; border-radius: var(--ma-radius-lg); background: linear-gradient(135deg, var(--ma-h1-from), var(--ma-h1-to)); --p: 0%; }
.ma-timer__info { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
body .ma-seite .ma-timer__title { margin: 0; font-size: 19px; font-weight: 600; color: var(--ma-ink); }
.ma-timer__clock { position: relative; grid-row: span 2; width: 150px; height: 150px; display: grid; place-items: center; }
.ma-timer__ring { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(var(--ma-orange) var(--p), rgba(255, 255, 255, .85) 0); }
.ma-timer__ring > span { position: absolute; inset: 10px; border-radius: 50%; background: #fff; }
.ma-timer__time { position: relative; z-index: 1; font-size: 38px; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--ma-ink); }
.ma-timer.is-last .ma-timer__time { color: var(--ma-orange-text); }
.ma-timer.is-done .ma-timer__ring { background: var(--ma-ok-ink); animation: maBlink 1s 4; }
.ma-timer__ctrl { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ma-timer__presets { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 3px; border-radius: 999px; background: rgba(255, 255, 255, .65); }
html body .ma-timer .ma-timer__presets button, html body .ma-timer .ma-timer__presets button:focus { min-height: 32px; padding: 0 12px; border-radius: 999px; background: transparent; color: var(--ma-ink); box-shadow: none; font-size: 13px; font-weight: 600; }
html body .ma-timer .ma-timer__presets button[aria-pressed="true"] { background: var(--ma-ink); color: #fff; }
html body .ma-timer .ma-timer__ctrl .ma-timer__go, html body .ma-timer .ma-timer__ctrl .ma-timer__go:focus { display: inline-flex; align-items: center; gap: 6px; background: var(--ma-ink); color: #fff; box-shadow: none; }
html body .ma-timer .ma-timer__ctrl .ma-timer__go .ma-ico { color: var(--ma-orange); }
.ma-timer:fullscreen, .ma-timer.is-big { position: fixed; inset: 0; z-index: 100002; display: flex; flex-direction: column; justify-content: center; gap: 4vh; border-radius: 0; }
.ma-timer:fullscreen .ma-timer__clock, .ma-timer.is-big .ma-timer__clock { width: min(60vh, 80vw); height: min(60vh, 80vw); }
.ma-timer:fullscreen .ma-timer__time, .ma-timer.is-big .ma-timer__time { font-size: min(18vh, 22vw); }
.ma-timer:fullscreen .ma-timer__info, .ma-timer.is-big .ma-timer__info { align-items: center; text-align: center; }
.ma-timer:fullscreen .ma-timer__title { font-size: 4vh; }
@container maseite (max-width: 600px) { .ma-timer { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; } .ma-timer__clock { grid-row: auto; } .ma-timer__ctrl { justify-content: center; } }

/* ---------- Beschriften ---------- */
.ma-besch { display: flex; flex-direction: column; gap: 14px; padding: 24px 26px 20px; border-radius: var(--ma-radius-lg); background: var(--ma-card); box-shadow: var(--ma-shadow-lg); }
.ma-besch__head { display: flex; flex-direction: column; gap: 8px; }
body .ma-besch .ma-besch__title { margin: 0; font-size: clamp(22px, 2.2vw, 28px); font-weight: 500; }
body .ma-seite .ma-besch__hint { margin: 0; font-size: 15px; color: var(--ma-muted); }
.ma-besch__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 18px; align-items: start; }
body .ma-besch .ma-besch__fig { margin: 0; padding: 10px; border-radius: var(--ma-radius); background: var(--ma-paper); position: sticky; top: 90px; }
body .ma-besch .ma-besch__img { display: block; width: 100%; height: auto; border-radius: 8px; }
.ma-besch__work { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.ma-besch__bank { display: flex; flex-wrap: wrap; gap: 6px; min-height: 46px; padding: 8px; border-radius: var(--ma-radius-10); background: var(--ma-well); }
.ma-besch__bank.is-empty::after { content: "Alle Begriffe sind verteilt – jetzt prüfen!"; align-self: center; font-size: 14px; color: var(--ma-soft); padding: 4px; }
html body .ma-besch .ma-besch__chip, html body .ma-besch .ma-besch__chip:focus { padding: 7px 12px; border-radius: 999px; background: #fff; color: var(--ma-ink); box-shadow: 0 1px 0 rgba(17,20,22,.08), inset 0 0 0 1.5px rgba(17, 20, 22, .18); font-size: 14px; font-weight: 600; cursor: grab; touch-action: manipulation; }
html body .ma-besch .ma-besch__chip:hover { box-shadow: inset 0 0 0 1.5px var(--ma-ink); background: #fff; color: var(--ma-ink); }
html body .ma-besch .ma-besch__chip.is-sel { background: var(--ma-ink); color: #fff; box-shadow: 0 0 0 3px var(--ma-orange); }
.ma-besch__chip.is-drag { opacity: .4; }
body .ma-seite .ma-besch__slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px 8px; margin: 0; padding: 0; counter-reset: none; }
body .ma-seite .ma-besch__slots > li { display: flex; align-items: center; gap: 8px; padding: 0; counter-increment: none; }
body .ma-seite .ma-besch__slots > li::before { display: none; }
.ma-besch__nr { width: 30px; height: 30px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--ma-ink); color: #fff; font-size: 14px; font-weight: 600; }
.ma-besch__drop { flex: 1; min-height: 40px; display: flex; align-items: center; padding: 3px; border-radius: 10px; box-shadow: inset 0 0 0 1.5px rgba(17, 20, 22, .18); background: #fff; cursor: pointer; transition: box-shadow .15s, background-color .15s; }
.ma-besch__drop:empty::after { content: "…"; padding-left: 10px; color: var(--ma-faint); }
.ma-besch__drop.is-over, .ma-besch__drop:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--ma-orange); background: #fff8f0; }
.ma-besch__drop.is-right { box-shadow: inset 0 0 0 2px #3aa36b; background: #f0f8f3; }
.ma-besch__drop.is-wrong { box-shadow: inset 0 0 0 2px #d6493b; background: #fdf0ee; }
.ma-besch__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ma-besch__res { flex: 1 1 200px; font-size: 15px; font-weight: 600; color: var(--ma-ink); }
.ma-besch.is-solved .ma-besch__res { color: var(--ma-ok-ink); }
html body .ma-besch .ma-besch__foot .ma-besch__check { background: var(--ma-ink); color: #fff; box-shadow: none; }
@container maseite (max-width: 760px) { .ma-besch__grid { grid-template-columns: minmax(0, 1fr); } body .ma-besch .ma-besch__fig { position: static; } }
@container maseite (max-width: 600px) { .ma-besch, .ma-hoer { padding: 18px 14px; } }

/* ---------- Schlagzeug-Pads ---------- */
.ma-drums { display: flex; flex-direction: column; gap: 12px; padding: 20px; border-radius: var(--ma-radius-lg); background: radial-gradient(120% 140% at 0% 0%, #26302f 0%, var(--ma-ink) 60%); color: #fff; }
.ma-drums .ma-eyebrow { color: rgba(255, 255, 255, .75); }
body .ma-seite .ma-drums__hint { margin: 0; font-size: 14px; color: rgba(255, 255, 255, .7); }
.ma-drums__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
html body .ma-drums .ma-drums__pad, html body .ma-drums .ma-drums__pad:focus { position: relative; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; min-height: 92px; padding: 10px 12px; border-radius: 14px; background: var(--d-col, #2c3638); color: #fff; box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .25); font-size: 15px; font-weight: 600; text-align: left; touch-action: manipulation; user-select: none; -webkit-user-select: none; transition: transform .06s, filter .06s; }
html body .ma-drums .ma-drums__pad:hover { filter: brightness(1.12); background: var(--d-col, #2c3638); color: #fff; }
.ma-drums__pad--becken { --d-col: #8a6d1d; }
.ma-drums__pad--tom { --d-col: #1f737a; }
.ma-drums__pad--snare { --d-col: #5b6466; }
.ma-drums__pad--bass { --d-col: #b65d18; }
.ma-drums__pad--andere { --d-col: #6a4c93; }
.ma-drums__pad--wide { grid-column: span 4; min-height: 70px; }
.ma-drums__pad kbd { position: absolute; right: 8px; bottom: 8px; padding: 1px 6px; border-radius: 4px; background: rgba(0, 0, 0, .3); color: rgba(255, 255, 255, .8); font: 600 12px/1.4 var(--ma-font); }
.ma-drums__pad.is-hit { animation: maHit .18s ease-out; }
@keyframes maHit { 0% { transform: scale(.95); filter: brightness(1.6); } 100% { transform: none; filter: none; } }
@container maseite (max-width: 600px) { .ma-drums__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ma-drums__pad--wide { grid-column: span 2; } .ma-drums__pad kbd { display: none; } }

/* ---------- Knöpfe (Pillen) für Groove, Stück, Zufall ---------- */
html body .ma-pill, html body .ma-pill:focus, html body .ma-groove button.ma-groove__btn, html body .ma-groove button.ma-groove__btn:focus, html body button.ma-groove__gross, html body button.ma-groove__gross:focus { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; margin: 0; padding: 0 14px; border: 0; border-radius: 999px; background: #fff; color: var(--ma-ink); box-shadow: inset 0 0 0 1.5px rgba(17, 20, 22, .2); font-family: var(--ma-font); font-size: 14px; font-weight: 600; line-height: 1; text-transform: none; letter-spacing: 0; cursor: pointer; white-space: nowrap; }
html body .ma-pill:hover, html body .ma-groove button.ma-groove__btn:hover, html body button.ma-groove__gross:hover { background: #fff; color: var(--ma-ink); box-shadow: inset 0 0 0 1.5px var(--ma-ink); }
html body .ma-pill--dark, html body .ma-pill--dark:focus, html body .ma-groove button.ma-groove__btn[aria-pressed="true"] { background: var(--ma-ink); color: #fff; box-shadow: none; }
html body .ma-pill--dark:hover { background: #2b3034; color: #fff; box-shadow: none; }
html body .ma-pill.is-confirm { background: #fde8e6; color: #9d2318; box-shadow: none; }
html body button.ma-groove__gross { min-height: 32px; padding: 0 12px; font-size: 13px; margin-left: auto; align-self: center; }

/* ---------- Groove: Merksatz verbergen, Vollbild (Beamer) ---------- */
.ma-groove.is-verdeckt .ma-groove__cell--text { color: transparent !important; text-decoration: none !important; }
.ma-groove.is-verdeckt .ma-groove__cell--text:not(:empty)::after { content: "?"; position: absolute; inset: 0; display: grid; place-items: center; color: var(--ma-faint); }
.ma-groove.is-verdeckt .ma-groove__row--silbe .ma-groove__cell i { visibility: hidden; }
html.ma-gross-offen { overflow: hidden; }
.ma-groove.is-gross, .ma-stueck.is-gross { position: fixed; inset: 0; z-index: 100000; width: 100%; max-width: none; height: 100%; margin: 0; overflow: auto; padding: clamp(16px, 3vw, 48px); border-radius: 0; background: #fff; box-shadow: none; }
.ma-groove:fullscreen, .ma-stueck:fullscreen { background: #fff; }
.ma-groove.is-gross { justify-content: center; gap: 2.4vh; }
.ma-groove.is-gross .ma-groove__title { font-size: clamp(22px, 3vw, 44px); }
.ma-groove.is-gross .ma-groove__hint { display: none; }
.ma-groove.is-gross .ma-groove__row { grid-template-columns: clamp(110px, 14vw, 230px) repeat(var(--ma-steps, 8), minmax(0, 1fr)); gap: .8vw; min-width: 0; }
.ma-groove.is-gross .ma-groove__cell { min-height: clamp(44px, 9vh, 110px); border-radius: 14px; }
.ma-groove.is-gross .ma-groove__cell--count { min-height: clamp(30px, 6vh, 70px); font-size: clamp(18px, 3vw, 46px); }
.ma-groove.is-gross .ma-groove__cell i { width: clamp(22px, 4.6vh, 56px); height: clamp(22px, 4.6vh, 56px); }
.ma-groove.is-gross .ma-groove__row--silbe .ma-groove__cell i { width: clamp(12px, 2.4vh, 28px); height: clamp(12px, 2.4vh, 28px); }
.ma-groove.is-gross .ma-groove__row--silbe .ma-groove__cell.is-accent i { width: clamp(26px, 5.4vh, 64px); height: clamp(26px, 5.4vh, 64px); }
.ma-groove.is-gross .ma-groove__lane, html body .ma-groove.is-gross button.ma-groove__lane { min-height: clamp(44px, 9vh, 110px); font-size: clamp(14px, 1.8vw, 26px); }
.ma-groove.is-gross .ma-groove__cell--text { min-height: clamp(40px, 8vh, 96px); font-size: clamp(18px, 3vw, 46px); }
.ma-groove.is-gross .ma-groove__ctrl { justify-content: center; }

/* ---------- Stück-Player / Stück-Baukasten ---------- */
.ma-stueck { display: flex; flex-direction: column; gap: 14px; padding: 20px; border-radius: var(--ma-radius); background: #fff; box-shadow: var(--ma-shadow); font-family: var(--ma-font); color: var(--ma-ink); }
.ma-stueck__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
html body .ma-stueck .ma-stueck__title { margin: 2px 0 0; font-family: var(--ma-font); font-size: 22px; font-weight: 600; line-height: 1.25; color: var(--ma-ink); }
html body .ma-stueck .ma-stueck__intro { margin: 6px 0 0; font-size: 15px; line-height: 1.5; color: var(--ma-soft); max-width: 70ch; }
.ma-stueck__app { display: flex; flex-direction: column; gap: 12px; }
.ma-stueck.is-ready .ma-stueck__noscript { display: none; }
.ma-stueck__ctrl { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.ma-stueck__tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-left: auto; }
.ma-stueck__saved { font-size: 13px; color: var(--ma-soft); }
.ma-stueck__zeit { display: flex; flex-direction: column; gap: 8px; }
.ma-stueck__reihe { display: flex; align-items: stretch; gap: 8px; }
html body .ma-stueck button.ma-stueck__name, html body .ma-stueck button.ma-stueck__name:focus { flex: none; width: 112px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 4px; margin: 0; padding: 6px 10px; border: 0; border-radius: 10px; background: var(--ma-paper); color: var(--ma-ink); box-shadow: none; font-family: var(--ma-font); font-size: 13px; font-weight: 700; line-height: 1.2; text-transform: none; text-align: left; cursor: pointer; }
.ma-stueck__name em { font-style: normal; font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 999px; background: #fff; color: var(--ma-muted); }
.ma-stueck__name[aria-pressed="true"] em { background: var(--ma-orange-text); color: #fff; }
.ma-stueck__chips { flex: 1 1 auto; min-width: 0; display: flex; gap: 6px; overflow-x: auto; padding: 4px 4px 8px; scroll-behavior: smooth; }
html body .ma-stueck button.ma-stueck__chip, html body .ma-stueck button.ma-stueck__chip:focus { flex: none; min-width: 60px; min-height: 54px; margin: 0; padding: 6px 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border: 0; border-radius: 10px; background: var(--ma-paper); color: var(--ma-ink); box-shadow: inset 0 0 0 1px rgba(17, 20, 22, .08); font-family: var(--ma-font); font-size: 13px; font-weight: 600; line-height: 1.1; text-transform: none; cursor: pointer; transition: transform .12s, box-shadow .12s; }
.ma-stueck__chip b { font-size: 12px; font-weight: 700; color: var(--ma-muted); }
.ma-stueck__chip span { font-size: 18px; font-weight: 700; }
html body .ma-stueck button.ma-stueck__chip.t-rand { background: #eaefc4; }
html body .ma-stueck button.ma-stueck__chip.t-ch { background: #fbdcc2; }
html body .ma-stueck button.ma-stueck__chip.t-v { background: #e0e0f4; }
html body .ma-stueck button.ma-stueck__chip.t-pause { background: #eeeeee; }
html body .ma-stueck button.ma-stueck__chip:hover { box-shadow: inset 0 0 0 1.5px var(--ma-ink); }
html body .ma-stueck button.ma-stueck__chip.is-sel { box-shadow: 0 0 0 3px var(--ma-orange); }
html body .ma-stueck button.ma-stueck__chip.is-now { box-shadow: 0 0 0 3px var(--ma-ink); transform: translateY(-2px); }
html body .ma-stueck button.ma-stueck__plus, html body .ma-stueck button.ma-stueck__plus:focus { background: #fff; box-shadow: inset 0 0 0 1.5px rgba(17, 20, 22, .25); color: var(--ma-muted); }
html body .ma-stueck button.ma-stueck__plus span { font-size: 14px; }
html body .ma-stueck .ma-stueck__status { margin: 0; font-size: 15px; line-height: 1.45; color: var(--ma-ink); }
.ma-stueck__status span { color: var(--ma-soft); }
.ma-stueck__jetzt { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 12px; }
.ma-stueck__mini { padding: 10px 12px 12px; border-radius: 12px; background: var(--ma-paper); min-width: 0; }
html body .ma-stueck .ma-stueck__mini-head { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: 14px; line-height: 1.3; }
.ma-stueck__mini-head span { padding: 2px 8px; border-radius: 999px; background: #fff; font-size: 12px; font-weight: 700; color: var(--ma-muted); }
.ma-stueck .ma-groove__cell { background: #fff; }
.ma-stueck .ma-groove__cell.is-beat { background: var(--ma-well); }
.ma-stueck .ma-groove__cell.is-now, .ma-stueck .ma-groove__cell--text.is-now { background: #fde7d3 !important; }
.ma-stueck .ma-groove__cell--count, .ma-stueck .ma-groove__cell--text { background: none !important; }
.ma-stueck.is-countin .ma-groove__cell.is-now:not(.ma-groove__cell--count) { background: #fff !important; }
.ma-stueck.is-countin .ma-groove__cell--count.is-now { background: var(--ma-orange) !important; color: var(--ma-ink); }
.ma-stueck__edit { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; border-radius: 12px; background: var(--ma-paper); box-shadow: inset 0 0 0 2px var(--ma-orange); }
.ma-stueck__edit[hidden] { display: none; }
html body .ma-stueck .ma-stueck__edit-head { margin: 0; font-size: 15px; }
.ma-stueck__edit-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.ma-stueck__edit-row > span { width: 72px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ma-muted); }
.ma-stueck__seg { display: flex; flex-wrap: wrap; gap: 5px; }
html body .ma-stueck .ma-stueck__seg button, html body .ma-stueck .ma-stueck__seg button:focus { min-width: 40px; min-height: 36px; margin: 0; padding: 0 12px; border: 0; border-radius: 999px; background: #fff; color: var(--ma-ink); box-shadow: inset 0 0 0 1.5px rgba(17, 20, 22, .18); font-family: var(--ma-font); font-size: 14px; font-weight: 700; line-height: 1; text-transform: none; cursor: pointer; }
html body .ma-stueck .ma-stueck__seg button:hover { background: #fff; color: var(--ma-ink); box-shadow: inset 0 0 0 1.5px var(--ma-ink); }
html body .ma-stueck .ma-stueck__seg button[aria-pressed="true"] { background: var(--ma-ink); color: #fff; box-shadow: none; }
.ma-stueck__edit-act { display: flex; flex-wrap: wrap; gap: 8px; }
.ma-stueck__eigen { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 12px; box-shadow: inset 0 0 0 1.5px rgba(17, 20, 22, .1); }
.ma-stueck__eigen-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 10px; }
html body .ma-stueck .ma-stueck__eigen-hint { margin: 4px 0 0; font-size: 14px; line-height: 1.45; color: var(--ma-soft); max-width: 60ch; }
.ma-stueck__eigen-btns { display: flex; gap: 8px; }
html body .ma-stueck button.ma-stueck__tap, html body .ma-stueck button.ma-stueck__tap:focus { min-height: 38px; margin: 0; padding: 0; border: 0; border-radius: 8px; background: #fff; box-shadow: inset 0 0 0 1px rgba(17, 20, 22, .08); cursor: pointer; }
html body .ma-stueck button.ma-stueck__tap.is-beat { background: var(--ma-well); }
html body .ma-stueck button.ma-stueck__tap:hover { background: #fde7d3; }
html body .ma-stueck button.ma-stueck__tap.is-now { background: #fde7d3; }
html body .ma-stueck input.ma-stueck__silbe { width: 100%; height: 32px; margin: 0; padding: 0 2px; border: 0; border-radius: 7px; background: #fff; box-shadow: inset 0 0 0 1px rgba(17, 20, 22, .15); font-family: var(--ma-font); font-size: 13px; font-weight: 600; text-align: center; color: var(--ma-ink); }
.ma-stueck.is-gross .ma-stueck__chip span { font-size: clamp(18px, 2.2vw, 30px); }
.ma-stueck.is-gross .ma-stueck__status { font-size: clamp(16px, 1.8vw, 26px); }
.ma-stueck.is-gross .ma-groove__cell { min-height: clamp(38px, 6.5vh, 80px); font-size: clamp(14px, 2vw, 30px); }
.ma-stueck.is-gross .ma-groove__cell i { width: clamp(18px, 3.6vh, 44px); height: clamp(18px, 3.6vh, 44px); }
.ma-stueck.is-gross .ma-groove__row { grid-template-columns: clamp(96px, 10vw, 170px) repeat(var(--ma-steps, 8), minmax(0, 1fr)); min-width: 0; }
@media (max-width: 600px) {
	.ma-stueck { padding: 16px 14px; }
	html body .ma-stueck button.ma-stueck__name { width: 80px; padding: 6px 8px; font-size: 12px; }
	.ma-stueck__tools { margin-left: 0; }
}

/* ---------- Auswendig-Training (Zufall) ---------- */
.ma-zufall { display: flex; flex-direction: column; gap: 14px; padding: 20px; border-radius: var(--ma-radius); background: #fff; box-shadow: var(--ma-shadow); font-family: var(--ma-font); color: var(--ma-ink); }
html body .ma-zufall .ma-zufall__title { margin: 2px 0 0; font-family: var(--ma-font); font-size: 22px; font-weight: 600; line-height: 1.25; color: var(--ma-ink); }
html body .ma-zufall .ma-zufall__intro { margin: 6px 0 0; font-size: 15px; line-height: 1.5; color: var(--ma-soft); max-width: 70ch; }
.ma-zufall__ctrl { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.ma-zufall__count { font-size: 13px; color: var(--ma-soft); margin-left: 4px; }
.ma-zufall__items { display: flex; flex-direction: column; gap: 12px; }
.ma-zufall .ma-groove { padding: 14px; background: var(--ma-paper); box-shadow: none; }
.ma-zufall .ma-groove[hidden] { display: none; }
.ma-zufall.is-ready .ma-groove__cell { background: #fff; }
.ma-zufall.is-ready .ma-groove__cell.is-beat { background: var(--ma-well); }
.ma-zufall.is-ready .ma-groove__cell--count, .ma-zufall.is-ready .ma-groove__cell--text { background: none !important; }
.ma-uebe--audio { margin-top: 8px; }
html body .ma-stueck .ma-groove__play, html body .ma-stueck .ma-groove__play:focus { width: 46px; height: 46px; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 50%; background: var(--ma-orange); color: var(--ma-ink); display: grid; place-items: center; cursor: pointer; box-shadow: none; }
html body .ma-stueck .ma-groove__play:hover { background: var(--ma-orange); color: var(--ma-ink); transform: scale(1.05); }
.ma-stueck.is-playing .ma-groove__play .ma-ico:first-child { display: none; }
.ma-stueck.is-playing .ma-groove__play .ma-ico + .ma-ico { display: inline-block; }
.ma-zufall [data-verdeckt] { display: none !important; }
/* Groove-Raster auf schmalen Handys ohne seitliches Scrollen */
@media (max-width: 480px) {
	.ma-groove { padding: 14px 12px; }
	.ma-groove:not(.is-gross) .ma-groove__row, .ma-stueck:not(.is-gross) .ma-groove__row { grid-template-columns: 66px repeat(var(--ma-steps, 8), minmax(0, 1fr)); gap: 3px; min-width: 0; }
	.ma-groove:not(.is-gross) .ma-groove__lane, html body .ma-groove:not(.is-gross) button.ma-groove__lane, .ma-stueck:not(.is-gross) .ma-groove__lane { gap: 4px; padding: 0 4px; font-size: 11px; letter-spacing: 0; }
	.ma-groove:not(.is-gross) .ma-groove__dot, .ma-stueck:not(.is-gross) .ma-groove__dot { width: 7px; height: 7px; }
	.ma-groove:not(.is-gross) .ma-groove__self { display: none; }
	.ma-groove:not(.is-gross) .ma-groove__cell, .ma-stueck:not(.is-gross) .ma-groove__cell { min-height: 30px; border-radius: 6px; }
	.ma-groove:not(.is-gross) .ma-groove__cell i, .ma-stueck:not(.is-gross) .ma-groove__cell i { width: 14px; height: 14px; }
	.ma-groove:not(.is-gross) .ma-groove__cell--text, .ma-stueck:not(.is-gross) .ma-groove__cell--text { font-size: 10.5px; overflow: visible; }
	.ma-groove:not(.is-gross) .ma-groove__row--text .ma-groove__lane, .ma-stueck:not(.is-gross) .ma-groove__row--text .ma-groove__lane { font-size: 9px; }
	.ma-groove__hint { display: none; }
	.ma-stueck__mini { padding: 8px; }
	.ma-groove__row.is-self .ma-groove__lane { box-shadow: inset 3px 0 0 var(--ma-orange-text); }
}

/* ---------- Pattern-Studio (C3.2) ---------- */
.ma-pattern { --v-akk: #1f737a; --v-mel: #e8924f; --v-bass: #1f4d3a; display: flex; flex-direction: column; gap: 16px; padding: 22px; border-radius: var(--ma-radius); background: #fff; box-shadow: var(--ma-shadow); font-family: var(--ma-font); color: var(--ma-ink); }
.ma-pattern__head { display: flex; align-items: center; gap: 16px; }
.ma-pattern__nr { flex: none; display: grid; place-items: center; min-width: 58px; height: 58px; padding: 0 10px; border-radius: 16px; background: var(--v-akk); color: #fff; font-size: 28px; font-weight: 800; letter-spacing: -.02em; }
html body .ma-pattern .ma-pattern__title { margin: 2px 0 0; font-family: var(--ma-font); font-size: 26px; font-weight: 700; line-height: 1.2; letter-spacing: .01em; color: var(--ma-ink); }
html body .ma-pattern .ma-pattern__sub { margin: 4px 0 0; font-size: 15px; line-height: 1.45; color: var(--ma-soft); }
.ma-pattern__tabs { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 14px; background: var(--ma-well); align-self: flex-start; }
html body .ma-pattern__tabs button, html body .ma-pattern__tabs button:focus { min-height: 40px; margin: 0; padding: 0 16px; border: 0; border-radius: 10px; background: transparent; color: var(--ma-muted); box-shadow: none; font-family: var(--ma-font); font-size: 15px; font-weight: 700; line-height: 1; text-transform: none; cursor: pointer; }
html body .ma-pattern__tabs button:hover { background: rgba(255, 255, 255, .6); color: var(--ma-ink); }
html body .ma-pattern__tabs button[aria-selected="true"] { background: #fff; color: var(--ma-ink); box-shadow: 0 1px 3px rgba(17, 20, 22, .14); }
.ma-pattern__panel { display: flex; flex-direction: column; gap: 12px; }
.ma-pattern__panel[hidden] { display: none; }
.ma-pattern__wahl { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; }
.ma-pattern__seg { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.ma-pattern__seg > span { margin-right: 4px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ma-muted); }
html body .ma-pattern__seg button, html body .ma-pattern__seg button:focus { min-height: 38px; margin: 0; padding: 0 14px; border: 0; border-radius: 999px; background: #fff; color: var(--ma-ink); box-shadow: inset 0 0 0 1.5px rgba(17, 20, 22, .16); font-family: var(--ma-font); font-size: 14px; font-weight: 700; line-height: 1; text-transform: none; cursor: pointer; }
html body .ma-pattern__seg button small { font-size: 11px; font-weight: 600; opacity: .7; margin-left: 2px; }
html body .ma-pattern__seg button:hover { background: #fff; color: var(--ma-ink); box-shadow: inset 0 0 0 1.5px var(--ma-ink); }
html body .ma-pattern__seg button[aria-pressed="true"] { background: var(--ma-ink); color: #fff; box-shadow: none; }
.ma-pattern__video { position: relative; }
html body .ma-pattern__poster, html body .ma-pattern__poster:focus { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; margin: 0; padding: 0; border: 0; border-radius: var(--ma-radius); overflow: hidden; background: #1c2224; box-shadow: var(--ma-shadow-lg); cursor: pointer; }
.ma-pattern__poster img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
html body .ma-pattern .ma-pattern__tip { margin: 0; font-size: 14px; line-height: 1.45; color: var(--ma-soft); }
.ma-pattern__noten { margin: 0; padding: 14px; border-radius: var(--ma-radius); background: var(--ma-paper); }
.ma-pattern__noten img { display: block; width: 100%; max-width: 760px; height: auto; margin: 0 auto; border-radius: 8px; }

/* Band zum Mitspielen */
.ma-band { display: flex; flex-direction: column; gap: 12px; }
.ma-band__ctrl { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
html body .ma-band .ma-groove__play, html body .ma-band .ma-groove__play:focus { width: 46px; height: 46px; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 50%; background: var(--ma-orange); color: var(--ma-ink); display: grid; place-items: center; cursor: pointer; box-shadow: none; }
html body .ma-band .ma-groove__play:hover { background: var(--ma-orange); color: var(--ma-ink); transform: scale(1.05); }
.ma-band.is-playing .ma-groove__play .ma-ico:first-child { display: none; }
.ma-band.is-playing .ma-groove__play .ma-ico + .ma-ico { display: inline-block; }
html body .ma-band .ma-band__hint { margin: 0; font-size: 14px; color: var(--ma-soft); }
.ma-band__grid { display: flex; flex-direction: column; gap: 4px; }
.ma-band__row { display: grid; grid-template-columns: 118px repeat(16, minmax(0, 1fr)); gap: 3px; align-items: stretch; }
.ma-band__row > * { grid-row: 1; }
.ma-band__lane { grid-column: 1; display: flex; flex-direction: column; justify-content: center; font-size: 12px; font-weight: 700; color: var(--ma-muted); }
html body .ma-band button.ma-band__lane, html body .ma-band button.ma-band__lane:focus { min-height: 44px; margin: 0; padding: 4px 10px; border: 0; border-radius: 10px; background: var(--ma-paper); color: var(--ma-ink); box-shadow: inset 4px 0 0 var(--v-col); font-family: var(--ma-font); text-align: left; text-transform: none; line-height: 1.2; cursor: pointer; align-items: flex-start; }
html body .ma-band button.ma-band__lane:hover { background: var(--ma-well); color: var(--ma-ink); }
.ma-band__lane b { font-size: 14px; }
.ma-band__lane em { font-style: normal; font-size: 11px; font-weight: 700; color: var(--ma-soft); }
.ma-band__row.is-self .ma-band__lane em { color: #fff; background: var(--ma-orange-text); padding: 1px 7px; border-radius: 999px; }
.ma-band__row--akk { --v-col: var(--v-akk); }
.ma-band__row--mel { --v-col: var(--v-mel); }
.ma-band__row--bass { --v-col: var(--v-bass); }
.ma-band__cell { min-height: 44px; border-radius: 6px; background: var(--ma-paper); }
.ma-band__cell.is-beat { background: var(--ma-well); }
.ma-band__cell.is-takt { box-shadow: -3px 0 0 #fff, -5px 0 0 rgba(17, 20, 22, .18); }
.ma-band__cell.is-now { background: #fde7d3; }
.ma-band__row--count .ma-band__cell { min-height: 22px; background: none; display: grid; place-items: center; font-size: 13px; font-weight: 700; color: var(--ma-faint); }
.ma-band__row--count .ma-band__cell.is-beat { color: var(--ma-ink); }
.ma-band__row--count .ma-band__cell.is-now { color: var(--ma-orange-text); background: none; }
.ma-band.is-countin .ma-band__row--count .ma-band__cell { color: var(--ma-faint); }
.ma-band__ev { z-index: 1; display: flex; align-items: center; justify-content: center; gap: 4px; margin: 4px 1px; padding: 0 4px; border-radius: 8px; background: var(--v-col); color: #fff; font-size: 13px; font-weight: 700; line-height: 1; white-space: nowrap; overflow: hidden; transition: transform .08s, box-shadow .08s; }
.ma-band__row--mel .ma-band__ev { color: var(--ma-ink); }
.ma-band__ev small { font-size: 10px; font-weight: 600; opacity: .75; }
.ma-band__ev.is-on { box-shadow: 0 0 0 2.5px var(--ma-ink); transform: scaleY(1.08); }
.ma-band__row.is-self .ma-band__ev { background: #fff; color: var(--ma-ink); box-shadow: inset 0 0 0 2px var(--v-col); }
.ma-band__row.is-self .ma-band__ev.is-on { background: var(--v-col); color: #fff; }
.ma-band__instr { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-start; }
.ma-band__piano { position: relative; flex: 1 1 360px; max-width: 520px; height: 150px; }
html body .ma-taste, html body .ma-taste:focus { position: absolute; top: 0; left: calc(var(--i) * 100% / var(--n)); width: calc(100% / var(--n) - 3px); height: 100%; margin: 0; padding: 0 0 8px; border: 0; border-radius: 0 0 8px 8px; background: #fff; box-shadow: inset 0 0 0 1.5px rgba(17, 20, 22, .2), 0 2px 0 rgba(17, 20, 22, .12); color: var(--ma-faint); font-family: var(--ma-font); font-size: 12px; font-weight: 700; display: flex; align-items: flex-end; justify-content: center; cursor: pointer; text-transform: none; }
html body .ma-taste--s, html body .ma-taste--s:focus { z-index: 2; left: calc(var(--i) * 100% / var(--n) - 100% / var(--n) * .32); width: calc(100% / var(--n) * .62); height: 60%; border-radius: 0 0 6px 6px; background: #1d2326; box-shadow: none; }
html body .ma-taste:hover { background: #f4f2ec; color: var(--ma-faint); }
html body .ma-taste--s:hover { background: #333a3e; }
html body .ma-taste.is-im { color: var(--ma-ink); }
html body .ma-taste.is-im::before { content: ""; position: absolute; left: 50%; bottom: 30px; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: rgba(17, 20, 22, .18); }
html body .ma-taste.is-on.is-akk { background: #cfe6e8; box-shadow: inset 0 0 0 2px var(--v-akk); }
html body .ma-taste.is-on.is-akk::before { background: var(--v-akk); }
html body .ma-taste.is-on.is-mel { background: #fde1c9; box-shadow: inset 0 0 0 2px var(--v-mel); }
html body .ma-taste.is-on.is-mel::before { background: var(--v-mel); width: 14px; height: 14px; margin-left: -7px; }
html body .ma-taste.is-druck { background: #fde7d3; }
.ma-band__griff { flex: 1 1 300px; max-width: 420px; display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: 12px; background: #3a2a1d; }
.ma-griff__bund, .ma-griff__saite { display: grid; grid-template-columns: 22px repeat(6, 1fr); align-items: center; }
.ma-griff__bund span { font-size: 10px; font-weight: 700; color: rgba(255, 255, 255, .55); text-align: center; }
.ma-griff__saite b { font-size: 12px; color: rgba(255, 255, 255, .8); }
html body .ma-griff__pos, html body .ma-griff__pos:focus { position: relative; height: 30px; margin: 0; padding: 0; border: 0; border-right: 2px solid #b9a27a; border-radius: 0; background: linear-gradient(transparent 46%, #d9d2c4 46%, #d9d2c4 58%, transparent 58%); box-shadow: none; cursor: pointer; }
html body .ma-griff__pos[data-bund="0"] { border-right: 5px solid #efe6d2; }
.ma-griff__pos i { position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 10px; font-weight: 800; color: transparent; }
.ma-griff__pos.is-im i { background: rgba(255, 255, 255, .25); color: #fff; }
.ma-griff__pos.is-on i { background: var(--ma-orange); color: var(--ma-ink); transform: scale(1.15); }
.ma-griff__pos.is-druck i { background: #fff; color: var(--ma-ink); }
.ma-band__folge { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 12px; background: var(--ma-paper); }
.ma-band__chips { display: flex; flex-wrap: wrap; gap: 6px; min-height: 52px; align-items: center; }
html body .ma-band__chip, html body .ma-band__chip:focus { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 72px; min-height: 52px; margin: 0; padding: 4px 14px; border: 0; border-radius: 12px; background: #fff; color: var(--ma-ink); box-shadow: inset 0 0 0 1.5px rgba(17, 20, 22, .14); font-family: var(--ma-font); text-transform: none; cursor: pointer; line-height: 1.15; }
.ma-band__chip b { font-size: 20px; }
.ma-band__chip span { font-size: 11px; font-weight: 600; color: var(--ma-soft); }
.ma-band__chip i { position: absolute; top: 2px; right: 6px; font-style: normal; font-size: 13px; color: var(--ma-faint); }
html body .ma-band__chip:hover { box-shadow: inset 0 0 0 1.5px #9d2318; }
html body .ma-band__chip.is-now { background: var(--v-akk); color: #fff; box-shadow: none; }
.ma-band__chip.is-now span, .ma-band__chip.is-now i { color: rgba(255, 255, 255, .8); }
.ma-band__add { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; color: var(--ma-muted); }
.ma-band__leer { font-size: 14px; color: var(--ma-soft); }

/* Lernstand */
.ma-pcheck { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: 12px; background: var(--ma-paper); }
html body .ma-pcheck .ma-pcheck__label { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ma-muted); }
.ma-pcheck__rows { display: flex; flex-direction: column; gap: 6px; }
.ma-pcheck__row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.ma-pcheck__row > b { min-width: 86px; font-size: 15px; }
html body .ma-pcheck__chip, html body .ma-pcheck__chip:focus { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; margin: 0; padding: 0 14px 0 10px; border: 0; border-radius: 999px; background: #fff; color: var(--ma-ink); box-shadow: inset 0 0 0 1.5px rgba(17, 20, 22, .16); font-family: var(--ma-font); font-size: 14px; font-weight: 700; text-transform: none; cursor: pointer; }
html body .ma-pcheck__chip:hover { background: #fff; color: var(--ma-ink); box-shadow: inset 0 0 0 1.5px var(--ma-ink); }
.ma-pcheck__box { width: 18px; height: 18px; border-radius: 5px; box-shadow: inset 0 0 0 2px rgba(17, 20, 22, .3); display: grid; place-items: center; }
html body .ma-pcheck__chip[aria-pressed="true"] { background: #e3f1e6; box-shadow: inset 0 0 0 1.5px #2f7d4a; }
.ma-pcheck__chip[aria-pressed="true"] .ma-pcheck__box { background: #2f7d4a; box-shadow: none; }
.ma-pcheck__chip[aria-pressed="true"] .ma-pcheck__box::after { content: ""; width: 5px; height: 9px; margin-top: -2px; border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.ma-pcheck__stand { font-size: 13px; font-weight: 600; color: var(--ma-soft); }
.ma-pcheck__row.is-ok .ma-pcheck__stand { color: #2f7d4a; }
html body .ma-pcheck .ma-pcheck__sum { margin: 2px 0 0; font-size: 15px; }
.ma-pattern--check { gap: 12px; }
@media (max-width: 600px) {
	.ma-pattern { padding: 16px 14px; }
	.ma-pattern__nr { min-width: 46px; height: 46px; font-size: 22px; border-radius: 12px; }
	html body .ma-pattern .ma-pattern__title { font-size: 21px; }
	.ma-band__row { grid-template-columns: 70px repeat(16, minmax(0, 1fr)); gap: 2px; }
	html body .ma-band button.ma-band__lane { padding: 4px 6px; }
	.ma-band__lane b { font-size: 12px; }
	.ma-band__lane em { font-size: 9.5px; }
	.ma-band__ev { font-size: 10px; padding: 0 1px; }
	.ma-band__ev small { display: none; }
	.ma-band__cell { min-height: 38px; }
	.ma-band__row--count .ma-band__cell { font-size: 10px; }
	.ma-band__piano { height: 120px; }
}

/* ---------- Fenster-Karte + Dialog ---------- */
.ma-fenster { position: relative; display: flex; align-items: center; gap: 16px; padding: 16px 18px; border-radius: var(--ma-radius); background: #fff; box-shadow: var(--ma-shadow); font-family: var(--ma-font); color: var(--ma-ink); }
.ma-fenster__ico { flex: none; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 15px; background: #fde8e6; color: #b42318; }
.ma-fenster--mic .ma-fenster__ico { background: #fde7d3; color: var(--ma-orange-text); }
.ma-fenster--check .ma-fenster__ico { background: #e3f1e6; color: #2f7d4a; }
.ma-fenster--film .ma-fenster__ico { background: #dcecee; color: #1f737a; }
.ma-fenster__txt { flex: 1 1 auto; min-width: 0; }
html body .ma-fenster .ma-eyebrow { margin: 0; }
html body .ma-fenster .ma-fenster__title { margin: 2px 0 0; font-family: var(--ma-font); font-size: 18px; font-weight: 700; line-height: 1.25; color: var(--ma-ink); }
html body .ma-fenster .ma-fenster__text { margin: 3px 0 0; font-size: 14px; line-height: 1.45; color: var(--ma-soft); }
html body .ma-fenster .ma-fenster__open { flex: none; min-height: 44px; padding: 0 18px; font-size: 15px; }
.ma-fenster__store { position: absolute; left: -10000px; top: 0; width: min(1080px, 94vw); visibility: hidden; pointer-events: none; }
.ma-fenster + .ma-fenster { margin-top: -6px; }
html.ma-modal-offen, html.ma-modal-offen body { overflow: hidden; }
.ma-modal { position: fixed; inset: 0; z-index: 100001; display: flex; align-items: center; justify-content: center; padding: 2vh 2vw; background: rgba(17, 20, 22, .62); font-family: var(--ma-font); color: var(--ma-ink); animation: maModalIn .18s ease-out; }
.ma-modal[hidden] { display: none; }
@keyframes maModalIn { from { opacity: 0; } to { opacity: 1; } }
.ma-modal__panel { display: flex; flex-direction: column; width: min(1120px, 100%); max-height: 96vh; border-radius: 18px; background: #fff; overflow: hidden; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .5); }
.ma-modal--doc .ma-modal__panel { height: 96vh; }
.ma-modal__head { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px 12px 20px; border-bottom: 1px solid var(--ma-line); }
.ma-modal__title { font-size: 17px; font-weight: 700; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ma-modal__body { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 18px; background: var(--ma-paper); }
.ma-modal--doc .ma-modal__body { padding: 10px; background: #fff; }
body .ma-seite.ma-modal__seite { margin: 0; gap: 14px; }
.ma-modal__body video { display: block; width: 100%; height: auto; border-radius: 12px; background: #000; }
.ma-modal__body .wp-block-video { margin: 0; }
@media (max-width: 600px) {
	.ma-fenster { flex-wrap: wrap; gap: 12px; padding: 14px; }
	.ma-fenster__ico { width: 46px; height: 46px; border-radius: 13px; }
	.ma-fenster__txt { flex-basis: calc(100% - 60px); }
	html body .ma-fenster .ma-fenster__open { width: 100%; justify-content: center; }
	.ma-modal { padding: 0; }
	.ma-modal__panel { width: 100%; height: 100%; max-height: none; border-radius: 0; }
	.ma-modal__body { padding: 12px; }
}

/* ---------- Groove: tiefe Töne, Perkussion ---------- */
.ma-groove__cell.is-tief i { transform: translateY(7px) scale(.82); filter: brightness(.62); }
.ma-groove__cell.is-tief.is-now i { transform: translateY(7px) scale(1.05); }
.ma-groove__row--cabasa { --g-col: #c9a227; }
.ma-groove__row--schellenring { --g-col: #b8860b; }
.ma-groove__row--congas { --g-col: #a0522d; }
.ma-groove__row--bongos { --g-col: #cd6a3a; }
.ma-groove__row--djembe { --g-col: #6b4226; }
.ma-groove__row--claves { --g-col: #8b5cc4; }
.ma-groove__row--cowbell { --g-col: #5b6466; }
.ma-groove__row--guiro { --g-col: #2f7d4a; }
.ma-groove__row--reiben { --g-col: #8f8fd6; }
.ma-groove__row--hihat { --g-col: #c9a227; }
.ma-groove__row--snare { --g-col: #e8924f; }
.ma-groove__row--bassdrum { --g-col: #1f4d3a; }

/* ---------- Reiter ---------- */
.ma-reiter { display: flex; flex-direction: column; gap: 14px; font-family: var(--ma-font); }
.ma-reiter__panel { display: flex; flex-direction: column; gap: 14px; }
.ma-reiter__panel[hidden] { display: none; }
.ma-reiter__panel .wp-block-image { margin: 0; padding: 14px; border-radius: var(--ma-radius); background: var(--ma-paper); text-align: center; }
.ma-reiter__panel .wp-block-image img { max-width: 100%; height: auto; }

/* ---------- Videowahl ---------- */
.ma-vwahl { display: flex; flex-direction: column; gap: 12px; padding: 18px; border-radius: var(--ma-radius); background: #fff; box-shadow: var(--ma-shadow); font-family: var(--ma-font); }
html body .ma-vwahl .ma-vwahl__title { margin: 0; font-family: var(--ma-font); font-size: 19px; font-weight: 700; color: var(--ma-ink); }

/* ---------- Puls-Trainer ---------- */
.ma-puls { display: flex; flex-direction: column; gap: 14px; padding: 20px; border-radius: var(--ma-radius); background: #fff; box-shadow: var(--ma-shadow); font-family: var(--ma-font); color: var(--ma-ink); }
html body .ma-puls .ma-puls__title { margin: 2px 0 0; font-family: var(--ma-font); font-size: 22px; font-weight: 700; color: var(--ma-ink); }
.ma-puls__app { display: flex; flex-direction: column; gap: 14px; }
.ma-puls__player { display: flex; align-items: center; gap: 14px; padding: 10px 16px 10px 10px; border-radius: 999px; background: var(--ma-well); }
html body .ma-puls .ma-puls__play, html body .ma-puls .ma-puls__play:focus { flex: none; width: 46px; height: 46px; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 50%; background: var(--ma-orange); color: var(--ma-ink); display: grid; place-items: center; box-shadow: none; cursor: pointer; }
.ma-puls__play .ma-ico + .ma-ico, .ma-puls__app.is-playing .ma-puls__play .ma-ico:first-child { display: none; }
.ma-puls__app.is-playing .ma-puls__play .ma-ico + .ma-ico { display: inline-block; }
.ma-puls__track { flex: 1; height: 8px; border-radius: 4px; background: rgba(17, 20, 22, .12); cursor: pointer; overflow: hidden; }
.ma-puls__fill { height: 100%; width: 0; background: var(--ma-orange); }
.ma-puls__time { min-width: 42px; font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ma-puls__ab { display: flex; flex-wrap: wrap; gap: 6px; }
html body .ma-puls__ab .ma-pill.is-on { background: var(--ma-ink); color: #fff; box-shadow: none; }
.ma-puls__pads { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
html body .ma-puls__pad, html body .ma-puls__pad:focus { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 120px; margin: 0; padding: 12px; border: 0; border-radius: 20px; background: #1f737a; color: #fff; box-shadow: 0 6px 0 #145056; font-family: var(--ma-font); font-size: 24px; font-weight: 800; text-transform: none; cursor: pointer; user-select: none; -webkit-user-select: none; touch-action: manipulation; transition: transform .06s, box-shadow .06s; }
html body .ma-puls__pad small { font-size: 13px; font-weight: 600; opacity: .8; }
html body .ma-puls__pad--b, html body .ma-puls__pad--b:focus { background: var(--ma-orange); color: var(--ma-ink); box-shadow: 0 6px 0 #b8682b; }
html body .ma-puls__pad:hover { background: #1f737a; color: #fff; }
html body .ma-puls__pad--b:hover { background: var(--ma-orange); color: var(--ma-ink); }
html body .ma-puls__pad.is-hit { transform: translateY(5px); box-shadow: 0 1px 0 #145056; }
html body .ma-puls__pad--b.is-hit { box-shadow: 0 1px 0 #b8682b; }
.ma-puls__spur { display: flex; align-items: center; gap: 6px; min-height: 26px; padding: 0 4px; overflow: hidden; }
.ma-puls__spur i { flex: none; width: 12px; height: 12px; border-radius: 50%; background: #1f737a; animation: maPop .2s ease-out; }
.ma-puls__spur i.is-b { width: 20px; height: 20px; background: var(--ma-orange); }
@keyframes maPop { from { transform: scale(.3); } to { transform: scale(1); } }
.ma-puls__werte { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.ma-puls__werte > div { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: 14px; background: var(--ma-paper); }
.ma-puls__werte span { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ma-muted); }
.ma-puls__werte b { font-size: 20px; line-height: 1.2; }
.ma-puls__meter { display: block; height: 6px; border-radius: 3px; background: rgba(17, 20, 22, .1); overflow: hidden; }
.ma-puls__meter > i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #e8924f, #2f7d4a); transition: width .3s; }
.ma-puls__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.ma-puls__hint { font-size: 14px; color: var(--ma-soft); }
.ma-puls__res { padding: 12px 14px; border-radius: 14px; box-shadow: inset 0 0 0 1.5px var(--ma-line); }
html body .ma-puls__res p { margin: 0 0 6px; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ma-muted); }
html body .ma-puls__res ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
html body .ma-puls__res li { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 15px; margin: 0; }
.ma-puls__res li b { min-width: 110px; }
.ma-puls__res li span { color: var(--ma-soft); }

/* ---------- Hörquiz ---------- */
.ma-quiz { display: flex; flex-direction: column; gap: 14px; padding: 20px; border-radius: var(--ma-radius); background: #fff; box-shadow: var(--ma-shadow); font-family: var(--ma-font); color: var(--ma-ink); }
html body .ma-quiz .ma-quiz__title { margin: 2px 0 0; font-family: var(--ma-font); font-size: 22px; font-weight: 700; color: var(--ma-ink); }
html body .ma-quiz .ma-quiz__intro { margin: 6px 0 0; font-size: 15px; color: var(--ma-soft); }
.ma-quiz__app { display: flex; flex-direction: column; gap: 14px; }
html body .ma-quiz .ma-quiz__step { margin: 0; font-size: 15px; font-weight: 700; }
.ma-quiz__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
html body .ma-quiz__k, html body .ma-quiz__k:focus { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 96px; margin: 0; padding: 10px; border: 0; border-radius: 16px; background: var(--ma-paper); color: var(--ma-ink); box-shadow: inset 0 0 0 1.5px rgba(17, 20, 22, .1); font-family: var(--ma-font); text-transform: none; cursor: pointer; transition: transform .1s, background-color .15s; }
html body .ma-quiz__k:hover { background: #fff; color: var(--ma-ink); box-shadow: inset 0 0 0 2px var(--ma-ink); }
html body .ma-quiz__k b { font-size: 16px; font-weight: 700; }
.ma-quiz__sym { font-size: 30px; line-height: 1; font-weight: 800; }
.ma-quiz__ico { font-size: 22px; color: var(--ma-orange-text); }
html body .ma-quiz__k.is-on { transform: scale(.96); background: #fde7d3; }
html body .ma-quiz__k.is-ok { background: #e3f1e6; box-shadow: inset 0 0 0 2.5px #2f7d4a; }
html body .ma-quiz__k.is-falsch { background: #fde8e6; box-shadow: inset 0 0 0 2.5px #b42318; }
.ma-quiz__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.ma-quiz__best { font-size: 14px; color: var(--ma-soft); }
.ma-quiz__bar { position: relative; display: flex; justify-content: space-between; padding-bottom: 8px; font-size: 14px; font-weight: 700; }
.ma-quiz__bar i { position: absolute; left: 0; bottom: 0; height: 5px; width: var(--p); border-radius: 3px; background: var(--ma-orange); transition: width .3s; }
.ma-quiz__play { display: flex; align-items: center; gap: 14px; font-size: 16px; font-weight: 600; }
html body .ma-quiz__hoer, html body .ma-quiz__hoer:focus { flex: none; width: 72px; height: 72px; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 50%; background: var(--ma-orange); color: var(--ma-ink); display: grid; place-items: center; box-shadow: 0 0 0 8px #fde7d3; cursor: pointer; }
html body .ma-quiz__hoer:hover { background: var(--ma-orange); color: var(--ma-ink); transform: scale(1.04); }
html body .ma-quiz .ma-quiz__fb { margin: 0; min-height: 24px; font-size: 16px; font-weight: 700; }
.ma-quiz__fb.is-ok { color: #2f7d4a; }
.ma-quiz__fb.is-falsch { color: #b42318; }
.ma-quiz__end { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 22px; border-radius: 16px; background: var(--ma-paper); text-align: center; }
.ma-quiz__end b { font-size: 34px; }
.ma-quiz__end span { font-size: 16px; color: var(--ma-soft); }

/* ---------- Fragen ---------- */
.ma-fragen { display: flex; flex-direction: column; gap: 12px; padding: 20px; border-radius: var(--ma-radius); background: #fff; box-shadow: var(--ma-shadow); font-family: var(--ma-font); color: var(--ma-ink); }
html body .ma-fragen .ma-fragen__title { margin: 2px 0 0; font-family: var(--ma-font); font-size: 20px; font-weight: 700; color: var(--ma-ink); }
html body .ma-fragen .ma-fragen__list { margin: 0; padding: 0 0 0 22px; display: flex; flex-direction: column; gap: 14px; }
html body .ma-fragen li label { display: block; margin-bottom: 6px; font-size: 16px; font-weight: 600; }
html body .ma-fragen textarea { width: 100%; min-height: 76px; margin: 0; padding: 10px 12px; border: 0; border-radius: 12px; background: var(--ma-paper); box-shadow: inset 0 0 0 1.5px rgba(17, 20, 22, .14); font-family: var(--ma-font); font-size: 16px; line-height: 1.5; color: var(--ma-ink); resize: vertical; }
html body .ma-fragen textarea:focus { outline: none; box-shadow: inset 0 0 0 2px var(--ma-orange); }
.ma-fragen__foot { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.ma-fragen__saved { font-size: 13px; color: var(--ma-soft); }
html body .ma-fragen .ma-fragen__hint { margin: 0; font-size: 13px; color: var(--ma-soft); }
@media (max-width: 600px) {
	.ma-puls, .ma-quiz, .ma-fragen, .ma-vwahl { padding: 16px 14px; }
	.ma-puls__werte { grid-template-columns: 1fr; }
	html body .ma-puls__pad { min-height: 104px; font-size: 20px; }
	.ma-quiz__grid { grid-template-columns: repeat(2, 1fr); }
}
.ma-groove__name { white-space: nowrap; }
.ma-groove__row:not(.is-self) .ma-groove__self { display: none; }
.ma-puls__res li::before, .ma-puls__res li::marker { content: none; display: none; }
.ma-groove__legende { font-size: 12px; color: var(--ma-soft); }

/* Groove mit Taktwechsel / vielen Schritten */
.ma-groove__cell.is-takt::before { content: ""; position: absolute; left: -3.5px; top: -3px; bottom: -3px; width: 2px; border-radius: 1px; background: rgba(17, 20, 22, .3); }
.ma-groove.is-lang .ma-groove__row { grid-template-columns: 104px repeat(var(--ma-steps), minmax(0, 1fr)); min-width: calc(104px + var(--ma-steps) * 19px); gap: 3px; }
.ma-groove.is-lang .ma-groove__cell--text { font-size: 11.5px; letter-spacing: -.01em; }
.ma-groove.is-lang .ma-groove__cell i { width: 15px; height: 15px; }
@media (max-width: 480px) {
	.ma-groove.is-lang:not(.is-gross) .ma-groove__row { grid-template-columns: 66px repeat(var(--ma-steps), minmax(20px, 1fr)); min-width: calc(66px + var(--ma-steps) * 23px); }
}
/* Vollbild-Knopf bleibt beim Antippen rechts (Fokus-Stil darf die Ausrichtung nicht zurücksetzen) */
html body .ma-groove__head button.ma-groove__gross, html body .ma-groove__head button.ma-groove__gross:focus, html body .ma-groove__head button.ma-groove__gross:hover, html body .ma-groove__head button.ma-groove__gross:active { margin: 0 0 0 auto; align-self: center; min-height: 32px; padding: 0 12px; font-size: 13px; }
html body .ma-stueck__head button.ma-groove__gross, html body .ma-stueck__head button.ma-groove__gross:focus, html body .ma-stueck__head button.ma-groove__gross:hover, html body .ma-stueck__head button.ma-groove__gross:active { margin: 0 0 0 auto; min-height: 32px; padding: 0 12px; font-size: 13px; }

/* =========================================================
   Reiter «Ziele & LP21» (Lernkompass) – v1.7
   ========================================================= */
.ma-lk *, .ma-lk *::before, .ma-lk *::after, .ma-lk-modal * { box-sizing: border-box; }
.ma-lk { display: grid; gap: 26px; margin: 4px 0 8px; font-size: 16px; line-height: 1.5; color: var(--ma-prose); --ma-ok: #2f7d55; --ma-ok-mist: #e0f0e6; --ma-mid: #b7791f; --ma-mid-mist: #fbf0d9; --ma-teal-soft: #dcecec; }
html body .ma-lk h2, html body .ma-lk h3, html body .ma-lk h4 { margin: 0; font-family: var(--ma-font); color: var(--ma-ink); letter-spacing: 0; text-transform: none; line-height: 1.2; }
html body .ma-lk p { margin: 0; }
html body .ma-lk ol, html body .ma-lk ul { margin: 0; padding: 0; list-style: none; }
html body .ma-lk button, html body .ma-lk button:focus, html body .ma-lk button:hover { font-family: var(--ma-font); text-transform: none; letter-spacing: 0; line-height: 1.3; min-height: 0; margin: 0; }
.ma-lk :focus-visible { outline: 2px solid var(--ma-teal); outline-offset: 2px; }

/* Kopf */
.ma-lk__hero { display: grid; grid-template-columns: minmax(0, 1fr) 200px; gap: 24px; align-items: center; padding: 24px 26px; border-radius: var(--ma-radius-lg); background: linear-gradient(120deg, var(--ma-h1-from), var(--ma-h1-to)); }
.ma-lk__hero-txt { display: grid; gap: 10px; min-width: 0; justify-items: start; }
.ma-lk__code { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: .04em; background: var(--ma-ink); color: #fff; padding: 4px 11px; border-radius: 999px; }
html body .ma-lk .ma-lk__titel { font-size: 28px; font-weight: 700; text-wrap: balance; }
.ma-lk__sum { font-size: 17px; color: var(--ma-prose); max-width: 56ch; }
html body .ma-lk .ma-lk__meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.ma-lk__chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 10px; border-radius: 999px; background: #fff; box-shadow: var(--ma-shadow); font-size: 13.5px; font-weight: 600; color: var(--ma-ink); }
.ma-lk__chip svg { flex: none; color: var(--ma-teal); }
.ma-lk__niveau { display: inline-flex; align-items: flex-end; gap: 3px; }
.ma-lk__niveau i { width: 5px; border-radius: 2px; background: rgba(17, 20, 22, .14); }
.ma-lk__niveau i:nth-child(1) { height: 6px; } .ma-lk__niveau i:nth-child(2) { height: 9px; } .ma-lk__niveau i:nth-child(3) { height: 12px; } .ma-lk__niveau i:nth-child(4) { height: 15px; } .ma-lk__niveau i:nth-child(5) { height: 18px; }
.ma-lk__niveau i.is-on { background: var(--ma-orange); }
.ma-lk__rad { width: 200px; height: 200px; max-width: 100%; }
.ma-lk__rad path { fill: rgba(255, 255, 255, .72); }
.ma-lk__rad path.is-on { fill: var(--ma-teal); }
.ma-lk__rad text { font-family: var(--ma-font); font-size: 10.5px; font-weight: 700; fill: var(--ma-faint); text-anchor: middle; dominant-baseline: middle; }
.ma-lk__rad text.is-on { fill: #fff; }
.ma-lk__rad .ma-lk__rad-k { font-size: 11px; letter-spacing: .1em; }
.ma-lk__rad .ma-lk__rad-n { font-size: 20px; font-weight: 800; fill: var(--ma-ink); }

/* Blöcke */
.ma-lk__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.ma-lk__blk { display: grid; gap: 14px; min-width: 0; }
.ma-lk__blk-h { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 6px 12px; }
html body .ma-lk .ma-lk__blk-h h3 { font-size: 19px; font-weight: 700; }
.ma-lk__blk-h > span { font-size: 13px; color: var(--ma-faint); }

/* Ziele */
.ma-lk__fort { display: grid; gap: 6px; }
.ma-lk__bar { display: flex; height: 8px; border-radius: 999px; background: var(--ma-well); overflow: hidden; }
.ma-lk__bar i { display: block; width: 0; height: 100%; transition: width .4s var(--ma-ease); }
.ma-lk__bar .b2 { background: var(--ma-ok); } .ma-lk__bar .b1 { background: var(--ma-mid); }
.ma-lk__fort-t { font-size: 13.5px; color: var(--ma-muted); }
html body .ma-lk .ma-lk__ziele { display: grid; gap: 10px; }
.ma-lk__ziel { display: grid; gap: 12px; padding: 14px 16px; border-radius: var(--ma-radius); background: #fff; box-shadow: var(--ma-shadow); }
html body .ma-lk .ma-lk__ziel-t { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; align-items: start; font-size: 15.5px; font-weight: 600; line-height: 1.4; color: var(--ma-ink); }
.ma-lk__ziel-n { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--ma-teal-soft); color: var(--ma-teal-dark); font-size: 14px; font-weight: 800; transition: background .2s, color .2s; }
.ma-lk__ziel[data-s="2"] .ma-lk__ziel-n { background: var(--ma-ok); color: #fff; font-size: 0; }
.ma-lk__ziel[data-s="2"] .ma-lk__ziel-n::before { content: "✓"; font-size: 15px; }
.ma-lk__self { display: flex; flex-wrap: wrap; gap: 6px; padding-left: 42px; }
html body .ma-lk .ma-lk__self button { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border: 1px solid var(--ma-line); border-radius: 999px; background: transparent; box-shadow: none; color: var(--ma-muted); font-size: 13px; font-weight: 600; cursor: pointer; }
.ma-lk__self button i { width: 10px; height: 10px; border-radius: 50%; border: 2px solid currentColor; }
.ma-lk__self button[data-v="1"] i { background: linear-gradient(90deg, currentColor 50%, transparent 50%); }
.ma-lk__self button[data-v="2"] i { background: currentColor; }
html body .ma-lk .ma-lk__self button[aria-pressed="true"][data-v="0"] { background: var(--ma-well); border-color: transparent; color: var(--ma-ink); }
html body .ma-lk .ma-lk__self button[aria-pressed="true"][data-v="1"] { background: var(--ma-mid-mist); border-color: transparent; color: var(--ma-mid); }
html body .ma-lk .ma-lk__self button[aria-pressed="true"][data-v="2"] { background: var(--ma-ok-mist); border-color: transparent; color: var(--ma-ok); }
html body .ma-lk .ma-lk__ziel-lp { display: flex; flex-wrap: wrap; gap: 6px; padding-left: 42px; }
.ma-lk__ziel-lp span { padding: 2px 8px; border-radius: 6px; background: var(--ma-teal-soft); color: var(--ma-teal-dark); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }

/* LP21-Karten */
.ma-lk__lp { display: grid; gap: 10px; }
html body .ma-lk button.ma-lk__karte { display: grid; gap: 8px; width: 100%; padding: 14px 16px; border: 0; border-radius: var(--ma-radius); background: #fff; box-shadow: var(--ma-shadow); color: var(--ma-prose); text-align: left; cursor: pointer; transition: transform .2s var(--ma-ease), box-shadow .2s; }
html body .ma-lk button.ma-lk__karte:hover { transform: translateY(-2px); box-shadow: var(--ma-shadow-lg); background: #fff; }
.ma-lk__karte-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ma-lk__ref { padding: 3px 9px; border-radius: 6px; background: var(--ma-teal); color: #fff; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.ma-lk__bereich { font-size: 12.5px; font-weight: 700; color: var(--ma-muted); }
.ma-lk__ga { padding: 2px 8px; border-radius: 999px; background: #fde7d3; color: var(--ma-orange-text); font-size: 11.5px; font-weight: 700; }
.ma-lk__karte-t { font-size: 14.5px; line-height: 1.45; }
.ma-lk__karte-f { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 12.5px; color: var(--ma-faint); }
.ma-lk__karte-f b { display: inline-flex; align-items: center; gap: 4px; color: var(--ma-teal-dark); }
.ma-lk__leer { color: var(--ma-faint); font-size: 14px; }

/* Lernweg */
html body .ma-lk .ma-lk__weg { display: flex; flex-wrap: wrap; gap: 8px; }
html body .ma-lk .ma-lk__weg-x { display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px 6px 6px; border: 0; border-radius: 999px; background: #fff; box-shadow: var(--ma-shadow); color: var(--ma-ink); font-size: 14px; font-weight: 600; text-decoration: none; cursor: pointer; }
html body .ma-lk .ma-lk__weg-x:hover { box-shadow: inset 0 0 0 1.5px var(--ma-ink); color: var(--ma-ink); background: #fff; }
.ma-lk__weg-i { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #fde7d3; color: var(--ma-orange-text); font-style: normal; }
.ma-lk__weg-x.is-ok .ma-lk__weg-i { background: var(--ma-ok); color: #fff; }

/* Material */
.ma-lk__dls { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
html body .ma-lk .ma-lk__dl { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--ma-radius); background: #fff; box-shadow: var(--ma-shadow); color: var(--ma-ink); text-decoration: none; }
html body .ma-lk a.ma-lk__dl:hover { box-shadow: inset 0 0 0 1.5px var(--ma-ink); }
.ma-lk__dl > i { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 11px; background: var(--ma-teal-soft); color: var(--ma-teal-dark); }
.ma-lk__dl-t { display: grid; gap: 4px; min-width: 0; flex: 1; }
.ma-lk__dl-t b { font-size: 14.5px; }
.ma-lk__dl-t small { font-size: 12px; color: var(--ma-faint); }
.ma-lk__dl audio { width: 100%; height: 36px; }

/* Lehrpersonen */
.ma-lk__lehrer { display: grid; gap: 16px; padding: 22px 24px; border-radius: var(--ma-radius-lg); background: var(--ma-ink); color: #d9dedd; }
html body .ma-lk .ma-lk__lehrer h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; color: #fff; font-size: 19px; }
html body .ma-lk .ma-lk__lehrer h3 svg { color: var(--ma-orange); }
.ma-lk__tag { padding: 3px 9px; border-radius: 999px; background: var(--ma-orange); color: var(--ma-ink); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.ma-lk__acts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
html body .ma-lk button.ma-lk__act { display: grid; gap: 5px; justify-items: start; padding: 14px; border: 1px solid rgba(255, 255, 255, .16); border-radius: var(--ma-radius); background: rgba(255, 255, 255, .05); box-shadow: none; color: #fff; text-align: left; cursor: pointer; }
html body .ma-lk button.ma-lk__act:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.ma-lk__act svg { width: 22px; height: 22px; color: var(--ma-orange); }
.ma-lk__act b { font-size: 15px; }
.ma-lk__act span { font-size: 13px; color: #b9c1c0; }
.ma-lk__toast { min-height: 1.2em; font-size: 13px; color: #9fd8b6; }
.ma-lk__raster-w { overflow-x: auto; }
.ma-lk__raster { width: 100%; border-collapse: collapse; font-size: 14px; }
html body .ma-lk .ma-lk__raster th { padding: 6px 8px; border: 0; background: none; color: #9aa4a3; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-align: left; text-transform: uppercase; }
html body .ma-lk .ma-lk__raster td { padding: 8px; border: 0; border-top: 1px solid rgba(255, 255, 255, .1); background: none; color: #e6eae9; vertical-align: middle; }
.ma-lk__raster td:first-child { min-width: 220px; }
html body .ma-lk .ma-lk__raster button { width: 32px; height: 32px; padding: 0; border: 1px solid rgba(255, 255, 255, .22); border-radius: 8px; background: transparent; box-shadow: none; color: #fff; font-size: 13px; font-weight: 700; cursor: pointer; }
html body .ma-lk .ma-lk__raster button[aria-pressed="true"] { border-color: var(--ma-orange); background: var(--ma-orange); color: var(--ma-ink); }
.ma-lk__hinweis { display: grid; gap: 8px; padding: 12px 16px; border-left: 3px solid var(--ma-orange); border-radius: 0 10px 10px 0; background: rgba(232, 146, 79, .12); font-size: 14.5px; }
html body .ma-lk .ma-lk__hinweis h4 { color: #fff; font-size: 15px; }
.ma-lk__hinweis a { color: #f3b07a; }
.ma-lk__hinweis img { max-width: 100%; height: auto; border-radius: 8px; background: #fff; }
.ma-lk__hinweis ul { padding-left: 18px !important; list-style: disc !important; }
.ma-lk__note { font-size: 12.5px; color: #9aa4a3; }
.ma-lk__note a { color: #f3b07a; }
.ma-lk__fuss { font-size: 12px; color: var(--ma-faint); letter-spacing: .04em; }

/* Detail-Fenster und Beamer */
.ma-lk-modal .ma-modal__panel { width: min(620px, 100%); }
.ma-lk-det { display: grid; gap: 6px; font-size: 15px; line-height: 1.5; color: var(--ma-prose); }
.ma-lk-det p { margin: 0; }
.ma-lk-det__top { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 4px !important; }
.ma-lk-det__t { font-size: 18px; font-weight: 600; color: var(--ma-ink); margin-bottom: 8px !important; }
.ma-lk-det__k { margin-top: 10px !important; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ma-faint); }
.ma-lk-det ul { margin: 0; padding-left: 18px; }
.ma-lk-det__auch { display: flex; flex-wrap: wrap; gap: 6px; }
.ma-lk-det__auch a { padding: 4px 10px; border-radius: 8px; background: var(--ma-well); color: var(--ma-ink); font-size: 13px; text-decoration: none; }
.ma-lk-det__auch a b { margin-right: 4px; }
.ma-lk-det__auch a:hover { background: var(--ma-teal-mist); }
.ma-lk-det__ex a { color: var(--ma-teal-dark); font-weight: 600; }
.ma-lk-modal--beamer .ma-modal__panel { width: 100%; height: 96vh; }
.ma-lk-modal--beamer .ma-modal__body { padding: 0; background: none; }
.ma-lk-beamer { display: grid; align-content: center; gap: 4.5vh; min-height: 100%; padding: 6vh 7vw; background: linear-gradient(130deg, #17616a, #0f3f45 60%, #3a2a1c); color: #faf8f3; font-family: var(--ma-font); }
.ma-lk-beamer__eb { margin: 0; color: #f3b07a; font-size: clamp(14px, 1.6vw, 22px); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
html body .ma-lk-beamer h2 { margin: 0; color: #fff; font-family: var(--ma-font); font-size: clamp(30px, 4.6vw, 70px); font-weight: 700; line-height: 1.1; }
html body .ma-lk-beamer ol { display: grid; gap: 2.4vh; margin: 0; padding: 0; list-style: none; counter-reset: b; }
html body .ma-lk-beamer li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2vw; align-items: baseline; margin: 0; color: #fff; font-size: clamp(18px, 2.5vw, 40px); font-weight: 600; line-height: 1.25; counter-increment: b; }
.ma-lk-beamer li::before { content: counter(b); color: #f3b07a; font-variant-numeric: tabular-nums; }
.ma-lk-beamer__lp { margin: 0; color: #b9d6d3; font-size: clamp(12px, 1.3vw, 18px); letter-spacing: .04em; }
.ma-lk-modal--beamer :fullscreen, .ma-lk-modal--beamer .ma-modal__panel:fullscreen { width: 100%; height: 100%; max-height: none; border-radius: 0; }

/* Kurs-Matrix */
.ma-lk--matrix { gap: 16px; }
.ma-lk__mx-w { overflow-x: auto; padding-bottom: 4px; }
.ma-lk__mx { border-collapse: separate; border-spacing: 4px; font-size: 13px; }
html body .ma-lk .ma-lk__mx th, html body .ma-lk .ma-lk__mx td { border: 0; background: none; }
html body .ma-lk .ma-lk__mx thead th { height: 52px; padding: 0 2px 4px; font-size: 12px; font-weight: 700; text-align: left; white-space: nowrap; writing-mode: vertical-rl; transform: rotate(180deg); }
.ma-lk__mx thead a { color: var(--ma-ink); text-decoration: none; }
.ma-lk__mx thead a:hover { color: var(--ma-teal); }
html body .ma-lk .ma-lk__mx tbody th { padding: 0 12px 0 0; color: var(--ma-ink); font-weight: 700; text-align: left; white-space: nowrap; }
.ma-lk__mx tbody th small { display: block; color: var(--ma-faint); font-size: 11.5px; font-weight: 500; }
html body .ma-lk .ma-lk__mx td { width: 28px; min-width: 28px; height: 28px; padding: 0; border-radius: 7px; background: var(--ma-well); color: #fff; font-size: 11px; font-weight: 700; text-align: center; }
html body .ma-lk .ma-lk__mx td.is-on { background: var(--ma-teal); }
html body .ma-lk .ma-lk__mx td.is-leer { background: transparent; box-shadow: inset 0 0 0 1.5px var(--ma-orange); }
html body .ma-lk .ma-lk__mx td.ma-lk__mx-sum { background: none; color: var(--ma-ink); font-size: 13px; }
.ma-lk__mx-liste summary { cursor: pointer; font-weight: 700; color: var(--ma-ink); }
html body .ma-lk .ma-lk__mx-liste ul { display: grid; gap: 8px; margin-top: 12px; }
.ma-lk__mx-liste li { display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: 4px 10px; align-items: baseline; padding: 10px 12px; border-radius: 10px; background: #fff; box-shadow: var(--ma-shadow); font-size: 14px; }
.ma-lk__mx-liste li .ma-lk__ga:empty { display: none; }
.ma-lk__mx-t { grid-column: 3; }
.ma-lk__mx-l { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; }
.ma-lk__mx-l a { padding: 2px 8px; border-radius: 6px; background: var(--ma-teal-soft); color: var(--ma-teal-dark); font-size: 12.5px; font-weight: 700; text-decoration: none; }

/* meldo-LP21-Aufklappfeld nicht doppelt zeigen, wenn der Reiter aktiv ist */
body.ma-lk-on .ml-komp-panel { display: none !important; }

@media (max-width: 860px) {
	.ma-lk__grid { grid-template-columns: minmax(0, 1fr); }
	.ma-lk__hero { grid-template-columns: minmax(0, 1fr); }
	.ma-lk__rad { justify-self: center; width: 180px; height: 180px; }
	.ma-lk__acts { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 480px) {
	.ma-lk__hero { padding: 18px; }
	html body .ma-lk .ma-lk__titel { font-size: 23px; }
	.ma-lk__self, html body .ma-lk .ma-lk__ziel-lp { padding-left: 0; }
	.ma-lk__lehrer { padding: 18px 16px; }
	.ma-lk__mx-liste li { grid-template-columns: auto minmax(0, 1fr); }
	.ma-lk__mx-t { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) { .ma-lk *, .ma-lk-modal * { transition: none !important; animation: none !important; } }

/* ---- v1.8: Meldo-Design für «Ziele & Infos» in den Meldo-Kursen ---- */
.ma-lk__kurs { font-size: 14px; color: var(--ma-muted); }
html body .ma-lk .ma-lk__ziele .ma-lk__leer { padding: 14px 16px; border-radius: var(--ma-radius); border: 1.5px dashed var(--ma-line); background: transparent; color: var(--ma-muted); font-size: 14.5px; }
.ma-lk__acts { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
html body .ma-lk a.ma-lk__act { display: grid; gap: 5px; justify-items: start; padding: 14px; border: 1px solid rgba(255, 255, 255, .16); border-radius: var(--ma-radius); background: rgba(255, 255, 255, .05); color: #fff; text-decoration: none; }
html body .ma-lk a.ma-lk__act:hover { background: rgba(255, 255, 255, .12); color: #fff; }
html body .ma-lk .ma-lk__mx td.is-on.is-ga { background: var(--ma-orange); }
.ma-lk__mx--stufen tbody th small { max-width: 300px; white-space: normal; }
html body .ma-lk .ma-lk__mx--stufen tbody th { white-space: normal; min-width: 220px; }
.ma-lk--meldo {
	--ma-font: "Funnel Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
	--ma-ink: #1e2132;
	--ma-prose: #3b3f4a;
	--ma-muted: #5c5f63;
	--ma-faint: #8a8f95;
	--ma-teal: #008f89;
	--ma-teal-dark: #00706b;
	--ma-teal-mist: #e3f4f3;
	--ma-teal-soft: #e3f4f3;
	--ma-orange: #95c11f;
	--ma-orange-text: #6d9010;
	--ma-h1-from: #e3f4f3;
	--ma-h1-to: #f0f7df;
	--ma-well: #f1f4f5;
	--ma-ok: #7aa015;
	--ma-ok-mist: #f0f7df;
	--ma-line: #e8ebed;
	--ma-radius: 16px;
	--ma-radius-lg: 20px;
	--ma-shadow: 0 2px 10px rgba(43, 43, 43, .05), 0 0 0 1px #e8ebed;
}
html body .ma-lk--meldo h2, html body .ma-lk--meldo h3, html body .ma-lk--meldo h4, .ma-lk--meldo .ma-lk__code, .ma-lk--meldo .ma-lk__ref, .ma-lk--meldo .ma-lk__ziel-n, .ma-lk--meldo .ma-lk__tag, .ma-lk--meldo .ma-lk__act b { font-family: Quicksand, var(--ma-font); }
.ma-lk--meldo .ma-lk__hero { background: radial-gradient(120% 140% at 0% 0%, #e3f4f3, transparent 60%), radial-gradient(120% 140% at 100% 100%, #f0f7df, transparent 60%), #fff; box-shadow: 0 0 0 1px #e8ebed; }
.ma-lk--meldo .ma-lk__code { background: var(--ma-teal); }
.ma-lk--meldo .ma-lk__ziel { border-left: 4px solid #95c11f; }
.ma-lk--meldo .ma-lk__ziel-n { background: #f0f7df; color: #6d9010; }
.ma-lk--meldo .ma-lk__rad .ma-lk__rad-k { fill: #6d9010; }
.ma-lk--meldo .ma-lk__ga { background: #f0f7df; color: #6d9010; }
.ma-lk--meldo .ma-lk__ga::before { content: "★ "; }
.ma-lk--meldo .ma-lk__weg-i { background: #e3f4f3; color: #00706b; border-radius: 12px; }
.ma-lk--meldo .ma-lk__lehrer { background: #1e2132; }
.ma-lk--meldo .ma-lk__tag { background: #95c11f; color: #1e2132; }
.ma-lk--meldo .ma-lk__act svg, html body .ma-lk--meldo .ma-lk__lehrer h3 svg { color: #95c11f; }
.ma-lk--meldo .ma-lk__toast { color: #c5e27a; }
.ma-lk--meldo .ma-lk__hinweis { border-left-color: #95c11f; background: rgba(149, 193, 31, .12); }
.ma-lk--meldo .ma-lk__hinweis a, .ma-lk--meldo .ma-lk__note a { color: #c5e27a; }
.ma-lk__grid--eins { grid-template-columns: minmax(0, 1fr); }
.ma-lk__hero:not(:has(.ma-lk__rad)) { grid-template-columns: minmax(0, 1fr); }

/* ---- v1.8.5: Kurs-Landkarte kompakt, Kopfzeile und erste Spalte fix, Fadenkreuz ---- */
.ma-lk--matrix { --mx-bg: #fff; --mx-cell: 22px; }
html body .ma-lk .ma-lk__mx-kpi { display: flex; flex-wrap: wrap; gap: 8px; }
.ma-lk__mx-kpi li { padding: 6px 12px; border-radius: 999px; background: #fff; box-shadow: var(--ma-shadow); font-size: 13.5px; color: var(--ma-muted); }
.ma-lk__mx-kpi li b { color: var(--ma-ink); font-size: 15px; margin-right: 3px; }
.ma-lk__mx-kpi li.is-warn b { color: var(--ma-orange-text); }
.ma-lk__mx-bereiche { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.ma-lk__mx-bereiche span { display: grid; grid-template-columns: 1fr auto; gap: 4px 8px; align-items: center; padding: 8px 10px; border-radius: 12px; background: #fff; box-shadow: var(--ma-shadow); font-size: 12.5px; color: var(--ma-faint); }
.ma-lk__mx-bereiche span b { color: var(--ma-muted); font-weight: 700; }
.ma-lk__mx-bereiche span.is-on b { color: var(--ma-ink); }
.ma-lk__mx-bereiche span i { grid-column: 1 / -1; grid-row: 2; height: 6px; border-radius: 999px; background: linear-gradient(90deg, var(--ma-teal) var(--w), var(--ma-well) var(--w)); }
.ma-lk__mx-bereiche span em { font-style: normal; font-weight: 700; color: var(--ma-ink); }
.ma-lk__mx-hilfe { font-size: 12.5px; color: var(--ma-faint); }
html body .ma-lk .ma-lk__mx-w { max-height: min(72vh, 760px); overflow: auto; padding: 0; border-radius: var(--ma-radius); background: var(--mx-bg); box-shadow: var(--ma-shadow); overscroll-behavior: contain; }
html body .ma-lk .ma-lk__mx { border-collapse: separate; border-spacing: 0; font-size: 13px; }
html body .ma-lk .ma-lk__mx th, html body .ma-lk .ma-lk__mx td { border: 0; padding: 0; background: var(--mx-bg); }
/* Kopfzeile */
html body .ma-lk .ma-lk__mx thead th { position: sticky; top: 0; z-index: 2; height: 92px; padding: 6px 0 8px; vertical-align: bottom; writing-mode: initial; transform: none; box-shadow: inset 0 -1px 0 var(--ma-line); }
.ma-lk__mx thead th a { display: flex; align-items: flex-end; justify-content: center; height: 100%; text-decoration: none; color: var(--ma-ink); }
.ma-lk__mx thead th a span { writing-mode: vertical-rl; transform: rotate(180deg); max-height: 82px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 700; }
.ma-lk__mx thead th:last-child { font-weight: 700; color: var(--ma-ink); text-align: center; }
/* erste Spalte */
html body .ma-lk .ma-lk__mx tbody th, html body .ma-lk .ma-lk__mx thead th.ma-lk__mx-ecke { position: sticky; left: 0; z-index: 1; width: 250px; min-width: 250px; max-width: 250px; padding: 4px 12px 4px 14px; text-align: left; white-space: normal; box-shadow: inset -1px 0 0 var(--ma-line); }
html body .ma-lk .ma-lk__mx thead th.ma-lk__mx-ecke { z-index: 3; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ma-faint); box-shadow: inset -1px 0 0 var(--ma-line), inset 0 -1px 0 var(--ma-line); }
.ma-lk__mx tbody th .ma-lk__mx-code { display: block; font-size: 12.5px; font-weight: 700; color: var(--ma-ink); line-height: 1.3; }
.ma-lk__mx-star { font-style: normal; color: var(--ma-orange); }
.ma-lk__mx tbody th .ma-lk__mx-kurz { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 400; color: var(--ma-faint); line-height: 1.35; }
/* Bereichs-Gruppen */
html body .ma-lk .ma-lk__mx tr.ma-lk__mx-grp th { position: static; width: auto; max-width: none; padding: 12px 0 4px; background: var(--mx-bg); box-shadow: none; }
.ma-lk__mx tr.ma-lk__mx-grp th span { position: sticky; left: 14px; display: inline-block; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ma-teal-dark); }
/* Felder */
html body .ma-lk .ma-lk__mx td { width: calc(var(--mx-cell) + 8px); min-width: calc(var(--mx-cell) + 8px); height: 38px; text-align: center; vertical-align: middle; border-radius: 0; color: #fff; font-size: 11px; font-weight: 700; }
html body .ma-lk .ma-lk__mx td::before { content: ""; display: block; width: var(--mx-cell); height: var(--mx-cell); margin: 0 auto; border-radius: 6px; background: var(--ma-well); }
html body .ma-lk .ma-lk__mx td.is-on, html body .ma-lk .ma-lk__mx td.is-leer { background: var(--mx-bg); box-shadow: none; }
html body .ma-lk .ma-lk__mx td.is-on::before { background: var(--ma-teal); }
html body .ma-lk .ma-lk__mx td.is-on.is-ga::before { background: var(--ma-orange); }
html body .ma-lk .ma-lk__mx td.is-leer::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--ma-orange); opacity: .55; }
html body .ma-lk .ma-lk__mx:not(.ma-lk__mx--stufen) td.is-on { position: relative; }
html body .ma-lk .ma-lk__mx:not(.ma-lk__mx--stufen) td.is-on::after { content: attr(data-n); }
html body .ma-lk .ma-lk__mx td.ma-lk__mx-sum { width: 40px; min-width: 40px; color: var(--ma-ink); font-size: 13px; }
html body .ma-lk .ma-lk__mx td.ma-lk__mx-sum::before { display: none; }
/* Fadenkreuz */
html body .ma-lk .ma-lk__mx tr.is-hl > th, html body .ma-lk .ma-lk__mx tr.is-hl > td, html body .ma-lk .ma-lk__mx .is-hl-col { background: var(--ma-teal-soft, #dcecec); }
html body .ma-lk .ma-lk__mx thead th.is-hl-col a { color: var(--ma-teal-dark); }
.ma-lk__mx-leg { display: flex; flex-wrap: wrap; gap: 16px; font-size: 12.5px; color: var(--ma-muted); }
.ma-lk__mx-leg i { display: inline-block; width: 14px; height: 14px; margin-right: 6px; border-radius: 4px; vertical-align: -2px; background: var(--ma-well); }
.ma-lk__mx-leg i.is-on { background: var(--ma-teal); } .ma-lk__mx-leg i.is-ga { background: var(--ma-orange); }
.ma-lk__mx-leg i.is-leer { background: transparent; box-shadow: inset 0 0 0 1.5px var(--ma-orange); }
.ma-lk--meldo.ma-lk--matrix .ma-lk__mx-grp th span { color: #00706b; }
@media (max-width: 860px) { .ma-lk__mx-bereiche { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 600px) {
	html body .ma-lk .ma-lk__mx tbody th, html body .ma-lk .ma-lk__mx thead th.ma-lk__mx-ecke { width: 150px; min-width: 150px; max-width: 150px; }
	.ma-lk__mx-bereiche { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
html body .ma-lk .ma-lk__mx td.is-on.is-ga, html body .ma-lk .ma-lk__mx td.is-on, html body .ma-lk .ma-lk__mx td.is-leer { background: var(--mx-bg); box-shadow: none; }
html body .ma-lk .ma-lk__mx tr.is-hl > td.is-on, html body .ma-lk .ma-lk__mx tr.is-hl > td.is-leer, html body .ma-lk .ma-lk__mx td.is-on.is-hl-col, html body .ma-lk .ma-lk__mx td.is-leer.is-hl-col { background: var(--ma-teal-soft, #dcecec); }

/* ---- v1.8.7: Landkarte – Texte vollständig lesbar ---- */
.ma-lk__mx-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.ma-lk__mx-seg { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: 999px; background: var(--ma-teal-soft, #dcecec); }
.ma-lk__mx-seg > span { padding: 0 8px 0 10px; font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ma-teal-dark); }
html body .ma-lk .ma-lk__mx-seg button, html body .ma-lk .ma-lk__mx-seg button:focus, html body .ma-lk .ma-lk__mx-seg button:hover { min-height: 0; margin: 0; padding: 6px 14px; border: 0; border-radius: 999px; background: transparent; box-shadow: none; color: var(--ma-teal-dark); font-size: 13px; font-weight: 700; line-height: 1.2; cursor: pointer; }
html body .ma-lk .ma-lk__mx-seg button[aria-pressed="true"] { background: var(--ma-teal); color: #fff; }
.ma-lk__mx-info { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 4px 12px; align-items: baseline; min-height: 54px; padding: 12px 16px; border-radius: var(--ma-radius); background: #fff; box-shadow: var(--ma-shadow); font-size: 14px; line-height: 1.45; color: var(--ma-prose); }
.ma-lk__mx-info b { color: var(--ma-ink); white-space: nowrap; }
.ma-lk__mx-info em { font-style: normal; font-size: 12.5px; font-weight: 700; color: var(--ma-teal-dark); white-space: nowrap; }
.ma-lk__mx-info-leer { grid-column: 1 / -1; color: var(--ma-faint); font-size: 13px; }
html body .ma-lk button.ma-lk__mx-zeile, html body .ma-lk button.ma-lk__mx-zeile:focus, html body .ma-lk button.ma-lk__mx-zeile:hover { display: block; width: 100%; min-height: 0; margin: 0; padding: 0; border: 0; background: transparent; box-shadow: none; color: inherit; text-align: left; font: inherit; line-height: inherit; cursor: pointer; }
html body .ma-lk button.ma-lk__mx-zeile:hover .ma-lk__mx-code { color: var(--ma-teal-dark); text-decoration: underline; text-underline-offset: 2px; }
html body .ma-lk button.ma-lk__mx-zeile:focus-visible { outline: 2px solid var(--ma-teal); outline-offset: 2px; border-radius: 6px; }
/* Vollständig: breitere erste Spalte, Text umbrechen */
html body .ma-lk .ma-lk__mx-w.is-voll .ma-lk__mx tbody th, html body .ma-lk .ma-lk__mx-w.is-voll .ma-lk__mx thead th.ma-lk__mx-ecke { width: 380px; min-width: 380px; max-width: 380px; padding-top: 8px; padding-bottom: 8px; }
.ma-lk__mx-w.is-voll .ma-lk__mx tbody th .ma-lk__mx-kurz { white-space: normal; overflow: visible; color: var(--ma-muted); font-size: 12.5px; line-height: 1.45; }
html body .ma-lk .ma-lk__mx-w.is-voll .ma-lk__mx td { height: auto; }
.ma-lk-det__liste { display: grid; gap: 4px; margin: 4px 0 0; padding-left: 18px; }
.ma-lk-det__liste a { color: var(--ma-teal-dark); font-weight: 600; }
@media (max-width: 600px) {
	html body .ma-lk .ma-lk__mx-w.is-voll .ma-lk__mx tbody th, html body .ma-lk .ma-lk__mx-w.is-voll .ma-lk__mx thead th.ma-lk__mx-ecke { width: 220px; min-width: 220px; max-width: 220px; }
	.ma-lk__mx-info { grid-template-columns: minmax(0, 1fr); }
}

/* ---- v1.9.0: Ruhiges Zwei-Zonen-Layout (Lektion) und Kurs-Reiter ---- */
.ma-lk--ruhig { gap: 20px; }
.ma-lk--ruhig .ma-lk__sum { max-width: 72ch; font-size: 16px; color: var(--ma-muted); }
.ma-lk__leiste { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
html body .ma-lk .ma-lk__leiste .ma-lk__meta { margin: 0; gap: 6px 8px; }
.ma-lk--ruhig .ma-lk__chip { padding: 5px 11px 5px 9px; background: var(--ma-well); box-shadow: none; font-size: 13px; }
.ma-lk--ruhig .ma-lk__chip svg { width: 15px; height: 15px; }
.ma-lk--ruhig .ma-lk__niveau i { width: 3px; }
html body .ma-lk a.ma-lk__weiter { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; padding: 8px 15px; border-radius: 999px; background: var(--ma-teal); color: #fff; font-size: 14px; font-weight: 700; text-decoration: none; }
html body .ma-lk a.ma-lk__weiter:hover { background: var(--ma-teal-dark); color: #fff; }
.ma-lk__weiter svg { width: 16px; height: 16px; }
/* Lehrpersonen-Leiste */
.ma-lk__lp-leiste { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 14px; background: var(--ma-ink); color: #fff; }
.ma-lk__lp-leiste > b { display: inline-flex; align-items: center; gap: 8px; margin-right: 6px; font-size: 14px; }
.ma-lk__lp-leiste > b svg { width: 18px; height: 18px; color: var(--ma-orange); }
html body .ma-lk .ma-lk__lp-leiste button, html body .ma-lk .ma-lk__lp-leiste a { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border: 1px solid rgba(255, 255, 255, .18); border-radius: 999px; background: rgba(255, 255, 255, .06); box-shadow: none; color: #fff; font-size: 13px; font-weight: 600; text-decoration: none; cursor: pointer; }
html body .ma-lk .ma-lk__lp-leiste button:hover, html body .ma-lk .ma-lk__lp-leiste a:hover { background: rgba(255, 255, 255, .14); color: #fff; }
.ma-lk__lp-leiste button svg, .ma-lk__lp-leiste a svg { width: 15px; height: 15px; color: var(--ma-orange); }
.ma-lk__lp-leiste .ma-lk__toast { margin-left: 4px; min-height: 0; }
/* Zonen */
.ma-lk__zonen { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 28px; align-items: start; }
.ma-lk__zonen--eins { grid-template-columns: minmax(0, 1fr); }
.ma-lk__haupt { display: grid; gap: 24px; min-width: 0; }
.ma-lk__seite { display: grid; gap: 18px; min-width: 0; }
.ma-lk--ruhig .ma-lk__blk { gap: 10px; }
html body .ma-lk.ma-lk--ruhig .ma-lk__blk-h h3 { font-size: 18px; }
/* Ziele als Liste mit kompakter Ampel */
html body .ma-lk.ma-lk--ruhig .ma-lk__ziele { gap: 0; border-radius: var(--ma-radius); background: #fff; box-shadow: var(--ma-shadow); overflow: hidden; }
.ma-lk--ruhig .ma-lk__ziel { grid-template-columns: 26px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 16px; border-radius: 0; background: transparent; box-shadow: none; border-top: 1px solid var(--ma-line); border-left: 0; }
.ma-lk--ruhig .ma-lk__ziel:first-child { border-top: 0; }
.ma-lk--ruhig .ma-lk__ziel-n { width: 26px; height: 26px; font-size: 13px; }
html body .ma-lk.ma-lk--ruhig .ma-lk__ziel-t { display: grid; gap: 6px; grid-template-columns: none; font-size: 15px; font-weight: 500; line-height: 1.45; }
html body .ma-lk.ma-lk--ruhig .ma-lk__ziel-lp { padding-left: 0; gap: 4px; }
.ma-lk--ruhig .ma-lk__ziel-lp span { font-size: 11px; padding: 1px 6px; }
html body .ma-lk .ma-lk__ampel { display: inline-flex; flex-wrap: nowrap; gap: 2px; padding: 3px; border-radius: 999px; background: var(--ma-well); }
html body .ma-lk .ma-lk__ampel button { display: grid; place-items: center; width: 30px; height: 26px; padding: 0; border: 0; border-radius: 999px; background: transparent; box-shadow: none; color: var(--ma-faint); cursor: pointer; }
html body .ma-lk .ma-lk__ampel button:hover { background: rgba(255, 255, 255, .7); }
.ma-lk__ampel button i { width: 10px; height: 10px; border-radius: 50%; border: 2px solid currentColor; }
html body .ma-lk .ma-lk__ampel button[aria-pressed="true"][data-v="0"] { background: #fff; box-shadow: 0 0 0 1px var(--ma-line); color: var(--ma-ink); }
html body .ma-lk .ma-lk__ampel button[aria-pressed="true"][data-v="1"] { background: var(--ma-mid-mist); color: var(--ma-mid); }
html body .ma-lk .ma-lk__ampel button[aria-pressed="true"][data-v="2"] { background: var(--ma-ok-mist); color: var(--ma-ok); }
.ma-lk__ampel-hilfe { font-size: 12.5px; color: var(--ma-faint); }
/* Seitenleiste */
.ma-lk__box { display: grid; gap: 10px; padding: 14px 16px; border-radius: var(--ma-radius); background: #fff; box-shadow: var(--ma-shadow); }
html body .ma-lk .ma-lk__box h3 { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 15px; font-weight: 700; }
.ma-lk__box h3 small { font-family: var(--ma-font); font-size: 12px; font-weight: 500; color: var(--ma-faint); }
.ma-lk__box-fuss { font-size: 11.5px; color: var(--ma-faint); }
.ma-lk__mini-rad { flex: none; width: 26px; height: 26px; }
.ma-lk__mini-rad path { fill: var(--ma-well); stroke: #fff; stroke-width: 1; }
.ma-lk__mini-rad path.is-on { fill: var(--ma-teal); }
.ma-lk__lp-liste { display: grid; gap: 6px; }
html body .ma-lk .ma-lk__lp-liste button.ma-lk__karte { display: grid; gap: 2px; padding: 8px 10px; border-radius: 10px; background: var(--ma-well); box-shadow: none; transform: none; }
html body .ma-lk .ma-lk__lp-liste button.ma-lk__karte:hover { background: var(--ma-teal-soft); box-shadow: none; transform: none; }
.ma-lk__lp-liste .ma-lk__karte b { font-size: 13px; font-weight: 700; color: var(--ma-teal-dark); font-variant-numeric: tabular-nums; }
.ma-lk__lp-liste .ma-lk__karte span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 13px; line-height: 1.4; color: var(--ma-prose); }
.ma-lk__wegbar { display: block; height: 6px; border-radius: 999px; background: var(--ma-well); overflow: hidden; }
.ma-lk__wegbar i { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--ma-ok); transition: width .4s var(--ma-ease); }
html body .ma-lk .ma-lk__schritte { display: grid; gap: 1px; }
.ma-lk__schritte li { margin: 0; }
html body .ma-lk .ma-lk__schritte a, html body .ma-lk .ma-lk__schritte button { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 10px; align-items: center; width: 100%; padding: 5px 4px; border: 0; border-radius: 8px; background: transparent; box-shadow: none; color: var(--ma-prose); font-size: 13.5px; font-weight: 500; text-align: left; text-decoration: none; cursor: pointer; }
html body .ma-lk .ma-lk__schritte a:hover, html body .ma-lk .ma-lk__schritte button:hover { background: var(--ma-well); color: var(--ma-ink); }
.ma-lk__schritte i { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--ma-line); }
.ma-lk__schritte li.is-ok i { border-color: var(--ma-ok); background: var(--ma-ok); }
html body .ma-lk .ma-lk__schritte li.is-next a, html body .ma-lk .ma-lk__schritte li.is-next button { font-weight: 700; color: var(--ma-ink); }
.ma-lk__schritte li.is-next i { border-color: var(--ma-teal); }
.ma-lk--ruhig .ma-lk__dls { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
/* Kurs-Reiter */
html body .ma-lk .ma-lk__lek { border-radius: var(--ma-radius); background: #fff; box-shadow: var(--ma-shadow); overflow: hidden; }
.ma-lk__lek > li { margin: 0; }
.ma-lk__lek > li + li { border-top: 1px solid var(--ma-line); }
.ma-lk__lek summary { display: grid; grid-template-columns: 48px minmax(0, 1fr) 120px 18px; gap: 12px; align-items: center; padding: 11px 16px; list-style: none; cursor: pointer; }
.ma-lk__lek summary::-webkit-details-marker { display: none; }
.ma-lk__lek summary::after { content: ""; justify-self: center; width: 8px; height: 8px; border-right: 2px solid var(--ma-faint); border-bottom: 2px solid var(--ma-faint); transform: rotate(45deg); transition: transform .2s; }
.ma-lk__lek details[open] summary::after { transform: rotate(-135deg); }
.ma-lk__lek summary:hover { background: var(--ma-well); }
.ma-lk__lek-code { padding: 3px 0; border-radius: 8px; background: var(--ma-teal); color: #fff; font-size: 12.5px; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; }
.ma-lk__lek-code.is-leer { background: var(--ma-well); min-height: 22px; }
.ma-lk__lek-t { font-size: 14.5px; font-weight: 600; color: var(--ma-ink); line-height: 1.35; }
.ma-lk__lek-t small { display: block; font-size: 12.5px; font-weight: 500; color: var(--ma-faint); }
.ma-lk__lek-st { display: grid; gap: 4px; font-size: 12px; color: var(--ma-muted); }
.ma-lk__lek-st .ma-lk__wegbar { height: 5px; }
.ma-lk__lek details.is-fertig .ma-lk__lek-code { background: var(--ma-ok); }
html body .ma-lk .ma-lk__lek ol { display: grid; gap: 6px; margin: 0; padding: 0 16px 10px 76px; list-style: decimal; font-size: 14px; color: var(--ma-prose); }
.ma-lk__lek ol li { margin: 0; }
html body .ma-lk a.ma-lk__lek-link { display: inline-flex; align-items: center; gap: 6px; margin: 0 16px 14px 76px; color: var(--ma-teal-dark); font-size: 13.5px; font-weight: 700; text-decoration: none; }
.ma-lk__lek-link svg { width: 14px; height: 14px; }
.ma-lk__grp { margin-top: 6px !important; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ma-teal-dark); }
.ma-lk__grp:first-child { margin-top: 0 !important; }
.ma-lk--kurs + .ma-lk--matrix { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--ma-line); }
/* Fenster: Raster und Hinweise */
.ma-lk-rasterfenster { display: grid; gap: 12px; }
.ma-lk-rasterfenster .ma-lk__raster { width: 100%; border-collapse: collapse; font-size: 14px; }
html body .ma-lk-rasterfenster .ma-lk__raster th { padding: 6px 8px; border: 0; background: none; color: var(--ma-faint); font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-align: center; text-transform: uppercase; }
html body .ma-lk-rasterfenster .ma-lk__raster th:first-child { text-align: left; }
html body .ma-lk-rasterfenster .ma-lk__raster td { padding: 8px; border: 0; border-top: 1px solid var(--ma-line); background: none; color: var(--ma-prose); text-align: center; vertical-align: middle; }
html body .ma-lk-rasterfenster .ma-lk__raster td:first-child { min-width: 200px; text-align: left; }
html body .ma-lk-rasterfenster .ma-lk__raster button { width: 34px; height: 34px; min-height: 0; margin: 0; padding: 0; border: 1px solid var(--ma-line); border-radius: 9px; background: #fff; box-shadow: none; color: var(--ma-faint); font-size: 15px; cursor: pointer; }
html body .ma-lk-rasterfenster .ma-lk__raster button[aria-pressed="true"] { border-color: var(--ma-teal); background: var(--ma-teal); color: #fff; }
.ma-lk-rasterfenster__fuss { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0; }
.ma-lk-rasterfenster .ma-lk__toast { color: var(--ma-ok, #2f7d55); }
.ma-lk-hinw { display: grid; gap: 10px; font-size: 15px; line-height: 1.55; }
.ma-lk-hinw img { max-width: 100%; height: auto; border-radius: 8px; }
.ma-lk-hinw ul { padding-left: 18px; list-style: disc; }
/* Meldo */
.ma-lk--meldo .ma-lk__lp-leiste { background: #1e2132; }
.ma-lk--meldo .ma-lk__lp-leiste > b svg, .ma-lk--meldo .ma-lk__lp-leiste button svg, .ma-lk--meldo .ma-lk__lp-leiste a svg { color: #95c11f; }
.ma-lk--meldo.ma-lk--ruhig .ma-lk__ziel { border-left: 0; }
.ma-lk--meldo .ma-lk__wegbar i { background: #95c11f; }
.ma-lk--meldo .ma-lk__schritte li.is-ok i { border-color: #95c11f; background: #95c11f; }
.ma-lk--meldo .ma-lk__lek details.is-fertig .ma-lk__lek-code { background: #7aa015; }
html body .ma-lk--meldo .ma-lk__box h3, .ma-lk--meldo .ma-lk__lek-code, .ma-lk--meldo .ma-lk__lp-liste .ma-lk__karte b, html body .ma-lk--meldo a.ma-lk__weiter, .ma-lk--meldo .ma-lk__lp-leiste > b { font-family: Quicksand, var(--ma-font); }
/* Schmal */
@media (max-width: 860px) {
	.ma-lk__zonen { grid-template-columns: minmax(0, 1fr); }
	html body .ma-lk a.ma-lk__weiter { margin-left: 0; }
}
@media (max-width: 560px) {
	.ma-lk--ruhig .ma-lk__ziel { grid-template-columns: 26px minmax(0, 1fr); padding: 12px; }
	html body .ma-lk .ma-lk__ziel .ma-lk__ampel { grid-column: 2; justify-self: start; }
	.ma-lk__lek summary { grid-template-columns: 44px minmax(0, 1fr) 18px; padding: 11px 12px; }
	.ma-lk__lek-st { grid-column: 2; grid-row: 2; }
	html body .ma-lk .ma-lk__lek ol { padding-left: 34px; padding-right: 12px; }
	html body .ma-lk a.ma-lk__lek-link { margin-left: 12px; }
	.ma-lk__lp-leiste > b { width: 100%; }
}
/* v1.9.0: Spaltenbreite nach verfügbarem Platz (Kursseite mit Seitenleiste ist schmal) */
.ma-lk--ruhig { container-type: inline-size; }
.ma-lk__zonen { grid-template-columns: minmax(0, 1fr) minmax(250px, 300px); }
.ma-lk__lek-code.is-leer { background: transparent; }
@container (max-width: 780px) {
	.ma-lk__zonen { grid-template-columns: minmax(0, 1fr); }
	.ma-lk__seite { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); align-items: start; }
}
@container (max-width: 520px) {
	.ma-lk--ruhig .ma-lk__ziel { grid-template-columns: 26px minmax(0, 1fr); padding: 12px; }
	html body .ma-lk .ma-lk__ziel .ma-lk__ampel { grid-column: 2; justify-self: start; }
	.ma-lk__lek summary { grid-template-columns: 44px minmax(0, 1fr) 18px; padding: 11px 12px; }
	.ma-lk__lek-st { grid-column: 2; grid-row: 2; }
	html body .ma-lk .ma-lk__lek ol { padding-left: 34px; padding-right: 12px; }
	html body .ma-lk a.ma-lk__lek-link { margin-left: 12px; }
}
.ma-lk-rasterfenster__hilfe { margin: 0; font-size: 14px; color: var(--ma-muted); }
/* v1.9.4: Fenster (Beamer, Details, Raster, Hinweise) auf Meldo-Kursen im Meldo-Design */
.ma-modal.ma-lk--meldo .ma-modal__title, html body .ma-modal.ma-lk--meldo .ma-pill { font-family: Quicksand, var(--ma-font); }
.ma-modal.ma-lk--meldo .ma-modal__body { background: #f4f6f6; }
.ma-lk-beamer.ma-lk--meldo { background: radial-gradient(90% 120% at 100% 100%, rgba(149, 193, 31, .28), transparent 60%), linear-gradient(130deg, #008f89, #00706b 45%, #1e2132); color: #fff; font-family: "Funnel Sans", var(--ma-font); }
.ma-lk-beamer.ma-lk--meldo .ma-lk-beamer__eb { color: #c5e27a; font-family: Quicksand, var(--ma-font); }
html body .ma-lk-beamer.ma-lk--meldo h2 { font-family: Quicksand, var(--ma-font); }
html body .ma-lk-beamer.ma-lk--meldo li { font-family: "Funnel Sans", var(--ma-font); font-weight: 600; }
.ma-lk-beamer.ma-lk--meldo li::before { color: #95c11f; font-family: Quicksand, var(--ma-font); font-weight: 700; }
.ma-lk-beamer.ma-lk--meldo .ma-lk-beamer__lp { color: #bfe3e1; }
.ma-lk--meldo .ma-lk-det__t, .ma-lk--meldo .ma-lk-det__k { font-family: Quicksand, var(--ma-font); }
.ma-lk--meldo .ma-lk-det__k { color: #00706b; }
.ma-lk--meldo .ma-lk__ref { background: #008f89; }
html body .ma-lk--meldo .ma-lk-rasterfenster .ma-lk__raster button[aria-pressed="true"] { border-color: #95c11f; background: #95c11f; color: #1e2132; }

/* v1.9.5: Blöcke im Meldo-Reiter (z. B. Fenster-Karten) und ihre Fenster ebenfalls im Meldo-Design */
.ma-lk--meldo :is(.ma-seite, .ma-start, .ma-lehrer, .ma-auftrag, .ma-abschnitt, .ma-audio, .ma-video, .ma-video-raster, .ma-hinweis, .ma-lb, .ma-ablauf, .ma-rec, .ma-studio, .ma-werk, .ma-prompt, .ma-groove, .ma-check, .ma-uebe, .ma-hoer, .ma-timer, .ma-besch, .ma-drums, .ma-stueck, .ma-zufall, .ma-pattern, .ma-fenster, .ma-modal, .ma-reiter, .ma-vwahl, .ma-puls, .ma-quiz, .ma-fragen) {
	--ma-font: "Funnel Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
	--ma-ink: #1e2132;
	--ma-prose: #3b3f4a;
	--ma-muted: #5c5f63;
	--ma-faint: #8a8f95;
	--ma-teal: #008f89;
	--ma-teal-dark: #00706b;
	--ma-teal-mist: #e3f4f3;
	--ma-teal-soft: #e3f4f3;
	--ma-orange: #95c11f;
	--ma-orange-text: #6d9010;
	--ma-h1-from: #e3f4f3;
	--ma-h1-to: #f0f7df;
	--ma-well: #f1f4f5;
	--ma-ok: #7aa015;
	--ma-ok-mist: #f0f7df;
	--ma-line: #e8ebed;
	--ma-radius: 16px;
	--ma-radius-lg: 20px;
	--ma-shadow: 0 2px 10px rgba(43, 43, 43, .05), 0 0 0 1px #e8ebed;
}
.ma-lk--meldo .ma-fenster__ico { background: #e3f4f3; color: #00706b; }
.ma-lk--meldo .ma-fenster--mic .ma-fenster__ico { background: #f0f7df; color: #6d9010; }
html body .ma-lk--meldo .ma-fenster .ma-fenster__title, .ma-lk--meldo .ma-eyebrow { font-family: Quicksand, var(--ma-font); }
html body .ma-lk--meldo .ma-fenster .ma-fenster__open { background: #008f89; color: #fff; font-family: Quicksand, var(--ma-font); }
html body .ma-lk--meldo .ma-fenster .ma-fenster__open:hover { background: #00706b; color: #fff; box-shadow: none; }
html body .ma-lk--meldo :is(h1, h2, h3, h4) { font-family: Quicksand, var(--ma-font); }