/* vodex.gg — Masterclass (Übersicht und Lektionen). Baut auf vodex.css auf; hier nur, was die Masterclass braucht.
   Gebaut von vodex/werkzeuge/masterclass-bauen.cjs. */

.mc { --buehne: #0E1014; --iris-grund: rgba(139, 133, 255, .08); --iris-rand: rgba(139, 133, 255, .32); }

/* ── Bühne: die Skizze auf dunklem Grund mit HUD-Zeile ─────────── */
.mc-buehne { position: relative; display: block; margin: 0; background: var(--buehne); border: 1px solid var(--linie); border-radius: var(--r-16); overflow: hidden; }
.mc-buehne svg, .mc-kachel-bild svg, .mc-bild svg { display: block; width: 100%; height: auto; }
/* Die HUD-Zeile steht ÜBER der Skizze, nicht auf ihr — sonst liegt sie auf den Beschriftungen der Zeichnung. */
.mc-hud { display: flex; justify-content: space-between; gap: 16px; padding: 12px 16px; border-bottom: 1px solid var(--linie); font: 500 12px/1.4 var(--mono); letter-spacing: .08em; color: var(--text-2); text-transform: uppercase; }
.mc-hud span:last-child { color: var(--iris-hell); }

/* ── Übersicht ───────────────────────────────────────────────────── */
.mc-held { padding: 64px 0 64px; }
.mc-held-raster { display: grid; grid-template-columns: 5fr 7fr; gap: 64px; align-items: center; }
.mc-held h1 { font-size: var(--t-held); }
.mc-held .einl { margin-top: 24px; max-width: 34ch; }
.mc-zahlen { margin-top: 32px; display: flex; gap: 32px; font: 400 14px/1.4 var(--mono); color: var(--text-3); }
.mc-zahlen b { display: block; font: 500 24px/1.2 var(--mono); color: var(--text); }
.mc-start { display: block; border-radius: var(--r-16); transition: transform .15s var(--kurve); }
.mc-start .mc-buehne { border-color: var(--iris-rand); box-shadow: var(--schwebt); transition: border-color .15s var(--kurve); }
.mc-start-text { display: grid; gap: 4px; margin-top: 16px; }
.mc-start-text b { font-weight: 600; font-size: var(--t-zwischen); letter-spacing: -.02em; }
.mc-start-text span { color: var(--text-2); }
.mc-start-text .mc-pfeil { margin-top: 8px; color: var(--iris-hell); font-weight: 500; }
@media (hover: hover) { .mc-start:hover .mc-buehne { border-color: var(--iris); } }
.mc-start:active { transform: scale(.99); }

.mc-kapitel-liste { padding: 32px 0 64px; }
.mc-kapitel + .mc-kapitel { margin-top: 64px; }
/* 19 Skizzen auf einer Seite: was außerhalb des Bildschirms liegt, zeichnet der Browser erst beim Hinscrollen (LCP am Handy). */
.mc-kacheln:has(> li:nth-child(4)) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mc-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 48px; }
.mc-chips a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1px solid var(--linie-2); border-radius: 999px; font-size: 14px; color: var(--text-2); transition: border-color .15s var(--kurve), color .15s var(--kurve); }
@media (hover: hover) { .mc-chips a:hover { border-color: var(--iris-rand); color: var(--text); } }
.mc-chips a:active { transform: scale(.97); }
.mc-kapitel { scroll-margin-top: 88px; }
/* Gelesene Lektionen sind leiser (nur Farben — mehr erlaubt :visited nicht). */
.mc-kachel a:visited .mc-kachel-bild { border-color: var(--iris-rand); }
.mc-kachel a:visited .mc-kachel-text b { color: var(--text-2); }
.mc-kommt a { display: flex; align-items: center; min-height: 160px; padding: 24px; border: 1px dashed var(--linie-2); border-radius: var(--r-16); }
.mc-kommt .mc-kachel-text { padding: 0; gap: 8px; }
.mc-kommt small { font: 500 12px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--iris-hell); }
.mc-kommt span:last-child { color: var(--text-2); }
.mc-kapitel-titel { display: flex; align-items: baseline; gap: 12px; padding-bottom: 16px; margin-bottom: 24px; border-bottom: 1px solid var(--linie); font-size: var(--t-zwischen); letter-spacing: -.02em; }
.mc-kapitel-titel small { font: 400 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.mc-kacheln { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 24px; }
.mc-kachel a { display: block; height: 100%; border-radius: var(--r-16); }
.mc-kachel-bild { position: relative; display: block; background: var(--buehne); border: 1px solid var(--linie); border-radius: var(--r-16); overflow: hidden; transition: border-color .15s var(--kurve); }
.mc-kachel-text { display: grid; gap: 4px; padding: 16px 4px 0; }
.mc-kachel-text b { font-weight: 600; font-size: 18px; line-height: 1.3; }
.mc-kachel-text span { font-size: 14px; line-height: 1.5; color: var(--text-2); }
@media (hover: hover) { .mc-kachel a:hover .mc-kachel-bild { border-color: var(--iris-rand); } .mc-kachel a:hover b { color: var(--iris-hell); } }
.mc-kachel a:active .mc-kachel-bild { transform: scale(.99); }

/* ── Lektion ─────────────────────────────────────────────────────── */
.mc-pfad { display: flex; align-items: center; gap: 8px; padding-top: 24px; font-size: 14px; color: var(--text-3); }
.mc-pfad a { display: inline-flex; align-items: center; min-height: 44px; color: var(--text-2); }
.mc-pfad a:hover { color: var(--text); }
.mc-pfad [aria-current] { color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mc-kopf { display: grid; grid-template-columns: 5fr 7fr; gap: 64px; align-items: center; padding: 32px 0 48px; }
.mc-dach { display: flex; gap: 12px; align-items: center; }
.mc-dach .mono { color: var(--iris-hell); }
.mc-kopf h1 { font-size: var(--t-gross); line-height: 1.04; }
.mc-kopf .einl { margin-top: 16px; max-width: 36ch; }
.mc-wer { margin-top: 24px; display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text-3); }
.mc-wer img { width: 15px; height: auto; }

.mc-kern { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 32px; align-items: baseline; padding: 32px; margin-bottom: 64px; background: var(--iris-grund); border: 1px solid var(--iris-rand); border-radius: var(--r-16); }
.mc-kern-lab { font: 500 12px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--iris-hell); }
.mc-kern p { font-size: var(--t-zwischen); line-height: 1.4; letter-spacing: -.015em; font-weight: 500; max-width: 48ch; }

.mc-raster { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 64px; align-items: start; }
.mc-inhalt { position: sticky; top: 96px; }
.mc-inhalt-titel { font: 500 12px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); margin-bottom: 8px; }
.mc-inhalt ol { display: grid; }
.mc-inhalt a { display: flex; gap: 12px; align-items: baseline; min-height: 44px; padding: 12px 0; border-top: 1px solid var(--linie); font-size: 14px; line-height: 1.4; color: var(--text-2); transition: color .15s var(--kurve); }
.mc-inhalt a .mono { font-size: 12px; color: var(--text-3); }
.mc-inhalt a:hover { color: var(--text); }

.mc-text { max-width: 68ch; }
.mc-teil + .mc-teil { margin-top: 64px; padding-top: 48px; border-top: 1px solid var(--linie); }
.mc-teil { scroll-margin-top: 96px; }
.mc-teil h2 { display: flex; gap: 16px; align-items: baseline; font-size: var(--t-titel); line-height: 1.1; margin-bottom: 24px; }
.mc-nr { font: 500 14px/1 var(--mono); color: var(--iris-hell); transform: translateY(-6px); }
.mc-teil h3 { margin: 32px 0 8px; font-size: 18px; line-height: 1.4; font-weight: 600; }
.mc-teil h3 strong { font-weight: 600; }
.mc-teil h3.mc-zone { font: 500 12px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--iris-hell); margin-top: 32px; }
.mc-teil p, .mc-teil li { font-size: 18px; line-height: 1.65; color: var(--text-2); }
.mc-teil p strong, .mc-teil li strong { color: var(--text); font-weight: 600; }
.mc-teil p + p, .mc-teil ul + p, .mc-teil ol + p { margin-top: 16px; }
.mc-teil ul, .mc-teil ol { margin-top: 12px; display: grid; gap: 12px; }
.mc-teil ul li { position: relative; padding-left: 24px; }
.mc-teil ul li::before { content: ""; position: absolute; left: 4px; top: .7em; width: 6px; height: 6px; border-radius: 1px; background: var(--iris); }
.mc-teil ol { counter-reset: mc; }
.mc-teil ol li { position: relative; padding-left: 40px; counter-increment: mc; }
.mc-teil ol li::before { content: counter(mc, decimal-leading-zero); position: absolute; left: 0; top: .35em; font: 500 14px/1.4 var(--mono); color: var(--iris-hell); }
.mc-ref { color: var(--iris-hell); text-decoration: underline; text-decoration-color: var(--iris-rand); text-underline-offset: 3px; transition: text-decoration-color .15s var(--kurve); }
.mc-ref:hover { text-decoration-color: var(--iris-hell); }
.mc-bild { margin: 24px 0; background: var(--buehne); border: 1px solid var(--linie); border-radius: var(--r-16); overflow: hidden; }
.mc-bild figcaption { padding: 12px 16px; font-size: 14px; color: var(--text-3); border-top: 1px solid var(--linie); }

.mc-videos { margin-top: 64px; padding-top: 32px; border-top: 1px solid var(--linie); }
.mc-video { display: flex; align-items: center; gap: 16px; min-height: 56px; padding: 12px 0; border-bottom: 1px solid var(--linie); color: var(--text); font-weight: 500; }
.mc-video small { margin-left: auto; font: 400 12px/1 var(--mono); color: var(--text-3); }
.mc-play { flex: none; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--iris-rand); display: grid; place-items: center; }
.mc-play::after { content: ""; width: 0; height: 0; border-left: 9px solid var(--iris-hell); border-top: 6px solid transparent; border-bottom: 6px solid transparent; margin-left: 3px; }
@media (hover: hover) { .mc-video:hover { color: var(--iris-hell); } }

.mc-blaettern { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin: 96px 0 64px; }
.mc-blatt { display: grid; gap: 4px; padding: 24px; border: 1px solid var(--linie); border-radius: var(--r-16); transition: border-color .15s var(--kurve); }
.mc-blatt.nach { text-align: right; }
.mc-blatt small { font: 400 12px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.mc-blatt b { font-weight: 600; font-size: 18px; }
@media (hover: hover) { .mc-blatt:hover { border-color: var(--iris-rand); } }
.mc-blatt:active { transform: scale(.99); }
.mc-weiter { margin-bottom: 96px; }

/* ── Die große Skizze zeichnet sich einmal selbst (wie auf coachaxiom), fertig nach 1 s ── */
@media (prefers-reduced-motion: no-preference) {
  .mc-buehne svg [pathLength="1"] { stroke-dasharray: 1; stroke-dashoffset: 1; animation: mc-zeichnen .8s var(--kurve) .2s forwards; }
  @keyframes mc-zeichnen { to { stroke-dashoffset: 0; } }
}

/* ── Der ruhige Weg zum eigenen Report ───────────────────────────── */
.mc-weg { padding: 96px 0; border-top: 1px solid var(--linie); }
.mc-weg-raster { display: grid; grid-template-columns: 5fr 7fr; gap: 48px; align-items: start; }
.mc-weg .einl { font-size: 16px; max-width: 52ch; }
.mc-weg .aktion { margin-top: 24px; }
.mc-preiszeile { margin-top: 16px; font-size: 14px; color: var(--text-3); }

/* ── Mittlere Breite ─────────────────────────────────────────────── */
@media (max-width: 1080px) {
  .mc-held-raster, .mc-kopf { grid-template-columns: 1fr; gap: 32px; }
  .mc-kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mc-raster { grid-template-columns: 1fr; gap: 32px; }
  .mc-inhalt { position: static; }
  .mc-kern { grid-template-columns: 1fr; gap: 12px; }
}

/* ── Handy ───────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  .mc-held { padding: 32px 0 32px; }
  .mc-held h1 { font-size: var(--t-held); }
  .mc-held .einl { margin-top: 12px; }
  .mc-zahlen { margin-top: 24px; gap: 24px; }
  .mc-zahlen b { font-size: 20px; }
  .mc-buehne, .mc-kachel-bild, .mc-bild { border-radius: var(--r-8); }
  .mc-hud { padding: 8px 12px; }
  .mc-kapitel-liste { padding: 16px 0 48px; }
  .mc-kapitel + .mc-kapitel { margin-top: 48px; }
  .mc-kacheln, .mc-kacheln:has(> li:nth-child(4)) { grid-template-columns: 1fr; gap: 12px; }
  .mc-chips { margin-bottom: 32px; }
  /* Am Handy kompakt: Skizze klein links, Text rechts — sonst 19 große Kacheln untereinander. */
  .mc-kachel a { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 16px; align-items: center; }
  .mc-kachel .mc-hud, .mc-kachel svg text { display: none; }
  .mc-kachel-bild { border-radius: var(--r-8); }
  .mc-kachel-text { padding: 0; }
  .mc-kachel-text b { font-size: 16px; }
  .mc-kommt a { display: flex; min-height: 0; padding: 16px; }
  /* Nur die kleinen Beschriftungen größer (13 SVG-Einheiten wären am Handy ~9,7 px), große Zahlen bleiben. */
  .mc-buehne svg text:is([font-size="11"], [font-size="12"], [font-size="13"], [font-size="14"]) { font-size: 16px; }
  .mc-pfad { padding-top: 8px; }
  .mc-kopf { padding: 16px 0 32px; gap: 24px; }
  .mc-kopf h1 { font-size: var(--t-titel); }
  .mc-kern { background: none; border: 0; border-left: 2px solid var(--iris); border-radius: 0; padding: 4px 0 4px 16px; margin-bottom: 48px; }
  .mc-kern p { font-size: 18px; line-height: 1.5; }
  .mc-teil + .mc-teil { margin-top: 48px; padding-top: 32px; }
  .mc-teil h2 { font-size: var(--t-zwischen); gap: 12px; }
  .mc-nr { transform: translateY(-3px); }
  .mc-teil p, .mc-teil li { font-size: 16px; }
  .mc-blaettern { grid-template-columns: 1fr; gap: 12px; margin: 64px 0 48px; }
  .mc-blatt { padding: 16px; }
  .mc-blatt.nach { text-align: left; }
  .mc-weiter { margin-bottom: 64px; }
  .mc-weg { padding: 64px 0; }
  .mc-weg-raster { grid-template-columns: 1fr; gap: 16px; }
  .mc-weg .aktion { flex-direction: column; align-items: stretch; gap: 8px; }
  .mc-weg .knopf-rand { height: 52px; font-size: 16px; }
  .mc-weg .aktion .link { justify-content: center; }
}

/* Im App-Rahmen (25.10.2026, Design-Kritik): kompakter Kopf wie ein Dashboard — die erste Lektionsreihe soll im ersten
   Bildschirm stehen. Die Startkarte liegt quer: Skizze links, Text rechts. */
@media (min-width: 761px) {
  .mc-held { padding: 32px 0 24px; }
  .mc-held h1 { font-size: 48px; }
  .mc-held .einl { margin-top: 12px; font-size: 17px; }
  .mc-zahlen { margin-top: 20px; }
  .mc-held-raster { grid-template-columns: 4fr 6fr; gap: 32px; }
  .mc-start { display: grid; grid-template-columns: minmax(0, 280px) minmax(0, 1fr); gap: 24px; align-items: center; }
  .mc-start-text { margin-top: 0; }
  .mc-kapitel-liste { padding-top: 16px; }
  .mc-chips { margin-bottom: 32px; }
}