/* Spuren Gottes – Live-Player einer Miniatur (Lichträume)
 * Farben kommen vom Wegabschnitt der Spur: --feld, --tief, --hell, --auf (am .mp-Element gesetzt).
 * Harte Kanten, keine Schatten, keine Verläufe. */
html, body { margin: 0; height: 100%; background: #090a24; overflow: hidden; }
.mp {
  --nacht: #090a24;
  position: relative; width: 100%; height: 100%; overflow: hidden; background: var(--tief, var(--nacht));
  font-family: "Hanken Grotesk", system-ui, sans-serif; color: var(--hell);
  -webkit-tap-highlight-color: transparent;
}
.mp-viewport { position: absolute; inset: 0; overflow: hidden; cursor: pointer; }
.mp-scale { position: absolute; left: 0; top: 0; width: 1800px; height: 1200px; transform-origin: 0 0; }
.mp-stage { position: absolute; inset: 0; }
.mp-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: var(--tief, var(--nacht)); transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
.mp.is-ready.is-started .mp-poster { opacity: 0; pointer-events: none; }
/* Aufruf aus dem Bildfenster (?autoplay=1): kein Poster dazwischen, außer der Start wird verweigert */
html.mp-autoplay .mp-poster { opacity: 0; pointer-events: none; transition: none; }
.mp.is-reduced .mp-poster { opacity: 1; pointer-events: auto; cursor: pointer; }
.mp.is-midway .mp-big-label { display: none; }

/* Untertitel: schlichte Tafel im tiefen Licht des Abschnitts */
.mp-cc { position: absolute; left: 6%; right: 6%; bottom: calc(clamp(32px, 12vh, 56px) + 6px); display: flex; flex-direction: column; align-items: center;
  gap: 0.12em; pointer-events: none; font-weight: 450; font-size: clamp(12px, 3.2vw, 26px); line-height: 1.25; letter-spacing: -0.005em; text-align: center; }
.mp-cc span { background: var(--tief); color: var(--hell); padding: 0.1em 0.5em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.mp-cc.is-empty { display: none; }

/* Großer Startknopf: wie im Bildfenster der Seite ein helles Quadrat mit tiefem Dreieck */
.mp-big { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 0.7em;
  border: 0; background: none; color: var(--tief); cursor: pointer; font: inherit; padding: 0; }
.mp-big[hidden] { display: none; }
.mp-big-icon { display: grid; place-items: center; width: clamp(48px, 13vw, 80px); aspect-ratio: 1; background: var(--hell); transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1); }
.mp-big-icon::after { content: ""; margin-left: 9%; width: 0; height: 0; border-style: solid;
  border-width: calc(clamp(48px, 13vw, 80px) * 0.17) 0 calc(clamp(48px, 13vw, 80px) * 0.17) calc(clamp(48px, 13vw, 80px) * 0.27); border-color: transparent transparent transparent var(--tief); }
.mp-big-label { background: var(--hell); color: var(--tief); padding: 0.25em 0.7em; font-size: clamp(11px, 2.2vw, 15px); font-weight: 600; font-variant-numeric: tabular-nums; }
.mp-big:hover .mp-big-icon { transform: scale(1.05); }
.mp-big:focus-visible { outline: none; }
.mp-big:focus-visible .mp-big-icon { outline: 2px solid var(--hell); outline-offset: 4px; }

/* Bedienleiste: eine ruhige Fläche im tiefen Licht */
.mp-bar { position: absolute; left: 0; right: 0; bottom: 0; height: clamp(32px, 12vh, 56px); display: flex; align-items: center; gap: clamp(8px, 2vw, 18px);
  padding: 0 clamp(10px, 2.4vw, 22px); background: var(--tief); color: var(--hell); opacity: 1; transition: opacity 0.4s ease; }
.mp.is-playing:not(.is-awake) .mp-bar:not(:focus-within) { opacity: 0; }
.mp-play, .mp-ccbtn { flex: none; border: 0; background: none; color: var(--hell); cursor: pointer; padding: 0; min-width: 28px; min-height: 28px; display: grid; place-items: center; font: inherit; }
.mp-play::before { content: ""; width: 0; height: 0; border-style: solid; border-width: 8px 0 8px 13px; border-color: transparent transparent transparent var(--hell); }
.mp.is-playing .mp-play::before { width: 12px; height: 16px; border: 0; background: linear-gradient(to right, var(--hell) 0 4px, transparent 4px 8px, var(--hell) 8px 12px); }
.mp-ccbtn { font-size: clamp(11px, 1.8vw, 13px); font-weight: 600; letter-spacing: 0.04em; padding: 0 6px; border: 1.5px solid var(--hell); min-height: 22px; }
.mp-ccbtn[aria-pressed="true"] { background: var(--hell); color: var(--tief); }
.mp-time { flex: none; font-variant-numeric: tabular-nums; font-size: clamp(11px, 1.9vw, 14px); font-weight: 500; }
.mp-seek { flex: 1; min-width: 60px; appearance: none; -webkit-appearance: none; height: 28px; background: transparent; cursor: pointer; margin: 0; }
.mp-seek::-webkit-slider-runnable-track { height: 2px; background: linear-gradient(to right, var(--hell) var(--p, 0%), color-mix(in srgb, var(--hell) 30%, transparent) var(--p, 0%)); }
.mp-seek::-moz-range-track { height: 2px; background: color-mix(in srgb, var(--hell) 30%, transparent); }
.mp-seek::-moz-range-progress { height: 2px; background: var(--hell); }
.mp-seek::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; margin-top: -5px; border: 0; border-radius: 0; background: var(--hell); }
.mp-seek::-moz-range-thumb { width: 12px; height: 12px; border: 0; border-radius: 0; background: var(--hell); }
.mp button:focus-visible, .mp-seek:focus-visible { outline: 2px solid var(--hell); outline-offset: 3px; }
/* Eingebettet im Bildfenster der Seite (?eingebettet=1): Bild, Start und Bedienung gehören der Seite */
.mp.is-eingebettet .mp-big, .mp.is-eingebettet .mp-bar { display: none; }
.mp.is-eingebettet:not(.is-reduced) .mp-poster { display: none; }
.mp.is-eingebettet .mp-viewport { cursor: default; }
.mp.is-eingebettet .mp-cc { bottom: 6%; }
@media (prefers-reduced-motion: reduce) { .mp-bar, .mp-poster, .mp-big-icon { transition: none; } }