/*
Theme Name: Master Percy
Theme URI: https://www.digital-sounds.ch/
Author: Inderbitzin Solutions
Description: Block-Theme fuer Master Percy. Dunkel, ruhig, Musik im Mittelpunkt. Design und System liegen im Code, Inhalte liegen in Gutenberg.
Requires at least: 6.7
Tested up to: 7.1
Requires PHP: 7.4
Version: 0.37.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: masterpercy
Tags: full-site-editing, block-theme, dark, one-column
*/

/* =========================================================
   1. Zusatz-Tokens, die keine Gutenberg-Presets sind
   ========================================================= */

:root{
  --mp-border-rest:rgba(241,239,234,.10);
  --mp-border-hover:rgba(241,239,234,.18);
  --mp-border-active:rgba(199,169,107,.32);
  --mp-focus:rgba(199,169,107,.55);
  --mp-shadow-soft:0 24px 64px -32px rgba(0,0,0,.85);
  --mp-light-horizon:radial-gradient(ellipse at 50% 100%,rgba(255,198,119,.30) 0%,rgba(219,95,72,.14) 38%,rgba(5,8,20,0) 72%);
  --mp-ease:cubic-bezier(.16,.84,.28,1);

  /* Semantische Aliase aus dem Designsystem */
  --mp-surface-inset:rgba(241,239,234,.03);
  --mp-nav-scrim:rgba(8,9,10,.72);
  --mp-overlay-scrim:linear-gradient(180deg,rgba(8,9,10,0) 0%,rgba(8,9,10,.55) 55%,rgba(8,9,10,.95) 100%);
  --mp-light-halo:radial-gradient(60% 60% at 50% 50%,rgba(216,195,154,.10) 0%,rgba(8,9,10,0) 100%);
  --mp-player-h:88px; /* wird zur Laufzeit gemessen, siehe 04-interactions.md */
  --mp-live-h:0px;    /* Hoehe des Live-Bandes, ebenfalls gemessen */

  --mp-t-fast:240ms;
  --mp-t-mid:480ms;
  --mp-t-slow:900ms;
  --mp-t-cinematic:1600ms;
}

:focus-visible{outline:1px solid var(--mp-focus);outline-offset:3px}

/* =========================================================
   2. Basis
   ========================================================= */

html{scroll-behavior:smooth}
body{
  background:var(--wp--preset--color--base);
  color:var(--wp--preset--color--text-primary);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:clip; /* niemals hidden, das setzt sticky ausser Kraft */
}

.mp-shell{
  padding-bottom:calc(var(--mp-player-h,88px) + 24px + env(safe-area-inset-bottom,0px));
}

img{max-width:100%;height:auto}
hr{border:0;border-top:1px solid var(--mp-border-rest)}

.mp-visually-hidden{
  position:absolute!important;width:1px;height:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap
}

/* Platzhalter: offene Punkte sollen auffallen, aber nicht lauter sein als der Inhalt */
.mp-placeholder{
  display:inline-block;border:1px solid var(--mp-border-rest);border-radius:2px;
  padding:4px 10px;color:var(--wp--preset--color--text-muted);
  font-size:var(--wp--preset--font-size--meta);letter-spacing:.12em;text-transform:uppercase
}

/* =========================================================
   3. Buttons und Linien
   ========================================================= */

.mp-btn{
  display:inline-flex;align-items:center;gap:10px;
  min-height:44px;padding:12px 22px;
  border:1px solid var(--mp-border-rest);border-radius:2px;
  background:transparent;color:var(--wp--preset--color--text-primary);
  font-family:var(--wp--preset--font-family--display);
  font-size:var(--wp--preset--font-size--small);
  font-weight:300;letter-spacing:.18em;text-transform:uppercase;
  cursor:pointer;transition:border-color var(--mp-t-fast) var(--mp-ease),
              color var(--mp-t-fast) var(--mp-ease),transform var(--mp-t-fast) var(--mp-ease)
}
.mp-btn:hover{border-color:var(--mp-border-active);color:var(--wp--preset--color--amber);transform:translateY(-1px)}
.mp-btn--quiet{border-color:transparent;padding-inline:0}
.mp-btn__arrow{transition:transform var(--mp-t-fast) var(--mp-ease)}
.mp-btn:hover .mp-btn__arrow{transform:translateX(4px)}

.mp-hairline{height:1px;background:var(--mp-border-rest)}

/* =========================================================
   4. Live-Overlay (siehe handoff/09-quellen-und-live-overlay.md)
   ========================================================= */

.mp-live{
  position:relative;z-index:60;
  background:linear-gradient(180deg,rgba(5,8,20,.96),rgba(8,9,10,.92));
  border-bottom:1px solid var(--mp-border-active)
}
.mp-live__bar{
  max-width:1320px;margin:0 auto;
  padding:14px var(--wp--preset--spacing--70);
  display:flex;align-items:center;gap:18px;flex-wrap:wrap
}
.mp-live__dot{
  width:8px;height:8px;border-radius:999px;flex:0 0 auto;
  background:var(--wp--preset--color--amber);
  box-shadow:0 0 0 0 rgba(255,198,119,.55);
  animation:mp-pulse 2600ms var(--mp-ease) infinite
}
@keyframes mp-pulse{
  0%{box-shadow:0 0 0 0 rgba(255,198,119,.45)}
  70%{box-shadow:0 0 0 12px rgba(255,198,119,0)}
  100%{box-shadow:0 0 0 0 rgba(255,198,119,0)}
}
.mp-live__label{
  font-family:var(--wp--preset--font-family--display);font-size:var(--wp--preset--font-size--meta);
  letter-spacing:.24em;text-transform:uppercase;color:var(--wp--preset--color--amber)
}
.mp-live__title{font-size:var(--wp--preset--font-size--small);color:var(--wp--preset--color--text-primary)}
.mp-live__note{font-size:var(--wp--preset--font-size--meta);color:var(--wp--preset--color--text-muted)}
.mp-live__spacer{flex:1 1 auto}
.mp-live__close{
  background:none;border:0;cursor:pointer;color:var(--wp--preset--color--text-muted);
  min-width:44px;min-height:44px;font-size:16px;line-height:1
}
.mp-live__close:hover{color:var(--wp--preset--color--text-primary)}
.mp-live__slot{max-width:1320px;margin:0 auto;padding:0 var(--wp--preset--spacing--70)}
.mp-live__slot:empty{display:none}
.mp-live__frame{
  position:relative;width:100%;aspect-ratio:16/9;margin-bottom:20px;
  border:1px solid var(--mp-border-rest);border-radius:6px;overflow:hidden;background:#000
}
.mp-live__frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.mp-live__countdown{
  font-variant-numeric:tabular-nums;font-size:var(--wp--preset--font-size--meta);
  letter-spacing:.14em;color:var(--wp--preset--color--peach)
}
.mp-live-flag{
  display:inline-block;width:7px;height:7px;border-radius:999px;
  background:var(--wp--preset--color--amber);margin-left:10px;vertical-align:middle
}

/* =========================================================
   5. Zwei-Klick-Rahmen, plattformunabhaengig
   ========================================================= */

.mp-embed{position:relative;border:1px solid var(--mp-border-rest);border-radius:6px;overflow:hidden;background:var(--wp--preset--color--surface)}
.mp-embed__slot:empty{display:none}
.mp-embed[data-loaded="true"] .mp-embed__invite{display:none}
.mp-embed__invite{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;cursor:pointer;background:transparent;border:0;width:100%;color:inherit}
.mp-embed__ring{width:64px;height:64px;border-radius:999px;border:1px solid var(--mp-border-active);display:grid;place-items:center;animation:mp-pulse 2600ms var(--mp-ease) infinite}
.mp-embed__hint{font-size:var(--wp--preset--font-size--meta);letter-spacing:.16em;text-transform:uppercase;color:var(--wp--preset--color--text-secondary)}
.mp-embed iframe{display:block;width:100%;border:0}

/* Quellenband */
.mp-sources{display:flex;flex-direction:column;border-top:1px solid var(--mp-border-rest)}
.mp-source{
  display:flex;align-items:center;gap:16px;min-height:56px;
  padding:10px 4px;border-bottom:1px solid var(--mp-border-rest);
  background:none;color:inherit;cursor:pointer;text-align:left;width:100%
}
.mp-source__platform{
  flex:0 0 auto;min-width:140px;font-family:var(--wp--preset--font-family--display);
  font-size:var(--wp--preset--font-size--meta);letter-spacing:.2em;text-transform:uppercase;
  color:var(--wp--preset--color--text-secondary)
}
.mp-source__label{flex:1 1 auto;font-size:var(--wp--preset--font-size--small);color:var(--wp--preset--color--text-muted)}
.mp-source__action{flex:0 0 auto;font-size:var(--wp--preset--font-size--meta);letter-spacing:.18em;text-transform:uppercase;color:var(--wp--preset--color--text-secondary)}
.mp-source:hover .mp-source__action{color:var(--wp--preset--color--amber)}
.mp-source[aria-current="true"] .mp-source__platform,
.mp-source[aria-current="true"] .mp-source__action{color:var(--wp--preset--color--amber)}
.mp-source__state{font-size:var(--wp--preset--font-size--meta);letter-spacing:.18em;text-transform:uppercase;color:var(--wp--preset--color--amber)}

/* =========================================================
   6. Contact Form 7 auf die Tokens umstellen
   Entscheidung: CF7 bleibt, weil du Felder und Empfaenger selbst pflegst.
   Kein Rot, kein Gruen. Fehler in Peach, Erfolg in Amber.
   ========================================================= */

.wpcf7{max-width:720px}
.wpcf7 form .wpcf7-response-output{
  margin:24px 0 0;padding:14px 18px;border:1px solid var(--mp-border-rest);border-radius:2px;
  font-size:var(--wp--preset--font-size--small);color:var(--wp--preset--color--peach)
}
.wpcf7 form.sent .wpcf7-response-output{border-color:var(--mp-border-active);color:var(--wp--preset--color--amber)}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output{border-color:rgba(243,203,166,.35);color:var(--wp--preset--color--peach)}

.mp-field{display:block;margin-bottom:26px}
.mp-field__label{
  display:block;margin-bottom:8px;
  font-family:var(--wp--preset--font-family--display);font-size:var(--wp--preset--font-size--meta);
  letter-spacing:.2em;text-transform:uppercase;color:var(--wp--preset--color--text-secondary)
}
.wpcf7 input[type=text],
.wpcf7 input[type=email],
.wpcf7 input[type=tel],
.wpcf7 input[type=url],
.wpcf7 select,
.wpcf7 textarea{
  width:100%;min-height:48px;padding:12px 14px;
  background:var(--wp--preset--color--surface);
  border:1px solid var(--mp-border-rest);border-radius:2px;
  color:var(--wp--preset--color--text-primary);
  font-family:var(--wp--preset--font-family--text);
  font-size:var(--wp--preset--font-size--body);line-height:1.6;
  transition:border-color var(--mp-t-fast) var(--mp-ease)
}
.wpcf7 textarea{min-height:170px;resize:vertical}
.wpcf7 input:hover,.wpcf7 textarea:hover,.wpcf7 select:hover{border-color:var(--mp-border-hover)}
.wpcf7 input:focus,.wpcf7 textarea:focus,.wpcf7 select:focus{border-color:var(--mp-border-active);outline:none}
.wpcf7 ::placeholder{color:var(--wp--preset--color--text-muted);opacity:1}

.wpcf7 .wpcf7-not-valid-tip{
  display:block;margin-top:8px;
  font-size:var(--wp--preset--font-size--meta);letter-spacing:.06em;
  color:var(--wp--preset--color--peach)
}
.wpcf7 .wpcf7-not-valid{border-color:rgba(243,203,166,.45)}

.wpcf7 input[type=submit]{
  min-height:48px;padding:12px 28px;
  background:transparent;border:1px solid var(--mp-border-rest);border-radius:2px;
  color:var(--wp--preset--color--text-primary);
  font-family:var(--wp--preset--font-family--display);font-size:var(--wp--preset--font-size--small);
  font-weight:300;letter-spacing:.18em;text-transform:uppercase;cursor:pointer;
  transition:border-color var(--mp-t-fast) var(--mp-ease),color var(--mp-t-fast) var(--mp-ease)
}
.wpcf7 input[type=submit]:hover{border-color:var(--mp-border-active);color:var(--wp--preset--color--amber)}
.wpcf7 .wpcf7-spinner{background-color:var(--wp--preset--color--gold)}
.wpcf7 .wpcf7-acceptance .wpcf7-list-item{margin:0}
.wpcf7 .wpcf7-acceptance label{display:flex;gap:12px;align-items:flex-start;font-size:var(--wp--preset--font-size--small);color:var(--wp--preset--color--text-secondary)}
.wpcf7 input[type=checkbox]{width:18px;height:18px;accent-color:#C7A96B;margin-top:3px}
.mp-honeypot{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}

/* =========================================================
   7. Bewegung aus, wenn der Besucher das so eingestellt hat
   ========================================================= */

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important
  }
}

/* =========================================================
   8. Marke: Logo und Signet
   Regeln aus assets/brand/README.md. Nur auf dunklem Grund, nicht umfaerben,
   nicht einrahmen, Seitenverhaeltnis halten, Schutzraum eine Signethoehe.
   ========================================================= */

.mp-logo{display:inline-block;line-height:0;max-width:100%}
.mp-logo__svg{display:block;width:100%;height:auto}
.mp-logo--compact{width:clamp(150px,20vw,220px)}     /* Mindestbreite 120px */
.mp-logo--horizontal{width:clamp(150px,24vw,280px)}  /* Mindestbreite 120px */
.mp-logo--stacked{width:clamp(190px,28vw,340px)}     /* Mindesthoehe 90px */
.mp-logo--mark{width:clamp(28px,4vw,56px);color:var(--wp--preset--color--amber)}
a.mp-logo{transition:opacity var(--mp-t-fast) var(--mp-ease)}
a.mp-logo:hover{opacity:.82}

.mp-mark{display:inline-block;line-height:0;color:var(--wp--preset--color--amber)}
.mp-mark svg{display:block;width:100%;height:auto}

.mp-header__inner{gap:var(--wp--preset--spacing--40)}
.mp-footer .mp-logo--stacked{margin-bottom:var(--wp--preset--spacing--20)}

/* Das Signet erscheint im Logo, im Favicon und in der Player-Einladung. Sonst nirgends. */
.mp-embed__ring .mp-mark{width:26px}

/* =========================================================
   9. Journey-Ansichten (vorlaeufig, bis die Bloecke stehen)
   ========================================================= */

.mp-eyebrow{
  font-family:var(--wp--preset--font-family--display);
  font-size:var(--wp--preset--font-size--meta);
  letter-spacing:.28em;text-transform:uppercase;
  color:var(--wp--preset--color--gold);margin:0 0 12px
}
.mp-lead{color:var(--wp--preset--color--text-secondary);max-width:62ch}

.mp-featured{margin:var(--wp--preset--spacing--60) 0}
.mp-featured__title{margin:0}
.mp-featured__subtitle{
  color:var(--wp--preset--color--text-muted);
  font-size:var(--wp--preset--font-size--small);
  letter-spacing:.14em;text-transform:uppercase;margin:8px 0 0
}
.mp-featured__grid{
  display:grid;gap:var(--wp--preset--spacing--50);
  grid-template-columns:1fr;margin-top:var(--wp--preset--spacing--40)
}
@media (min-width:900px){ .mp-featured__grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start} }
.mp-featured__cover,.mp-card__cover{display:block;width:100%;height:auto;border-radius:6px}
.mp-featured__body{display:flex;flex-direction:column;gap:var(--wp--preset--spacing--30)}

.mp-meta{
  display:flex;flex-wrap:wrap;gap:var(--wp--preset--spacing--30);
  padding:16px 0;border-top:1px solid var(--mp-border-rest);border-bottom:1px solid var(--mp-border-rest)
}
.mp-meta__cell{display:flex;flex-direction:column;gap:4px;min-width:84px}
.mp-meta__label{
  font-size:var(--wp--preset--font-size--meta);letter-spacing:.2em;text-transform:uppercase;
  color:var(--wp--preset--color--text-muted)
}
.mp-meta__value{
  font-family:var(--wp--preset--font-family--display);
  font-size:var(--wp--preset--font-size--small);color:var(--wp--preset--color--amber)
}

.mp-journeys{margin:var(--wp--preset--spacing--60) 0}
.mp-journeys__grid{
  display:grid;gap:var(--wp--preset--spacing--50);
  grid-template-columns:1fr;margin-top:var(--wp--preset--spacing--40)
}
@media (min-width:820px){ .mp-journeys__grid{grid-template-columns:repeat(2,minmax(0,1fr))} }

.mp-card{display:flex;flex-direction:column;gap:12px}
.mp-card__link{display:block;color:inherit}
.mp-card__media{overflow:hidden;border-radius:6px;border:1px solid var(--mp-border-rest)}
.mp-card__cover{transition:transform var(--mp-t-slow) var(--mp-ease)}
.mp-card__link:hover .mp-card__cover{transform:scale(1.03)}
.mp-card__title{
  margin:14px 0 0;font-size:var(--wp--preset--font-size--h3);
  transition:color var(--mp-t-fast) var(--mp-ease)
}
.mp-card__link:hover .mp-card__title{color:var(--wp--preset--color--amber)}
.mp-card__subtitle{
  margin:0;color:var(--wp--preset--color--text-muted);
  font-size:var(--wp--preset--font-size--meta);letter-spacing:.14em;text-transform:uppercase
}
.mp-card__text{margin:0;color:var(--wp--preset--color--text-secondary)}

.mp-detail{display:flex;flex-direction:column;gap:var(--wp--preset--spacing--40)}
.mp-related{margin-top:var(--wp--preset--spacing--60);border-top:1px solid var(--mp-border-rest);padding-top:var(--wp--preset--spacing--50)}

.mp-card__placeholder{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  aspect-ratio:1;background:var(--wp--preset--color--surface);color:var(--wp--preset--color--gold)
}

/* =========================================================
   10. Hero
   Beginnt bei 0 mit padding-top, damit das Bild randlos bis an die obere
   Kante laeuft, und traegt die Platzreserve der Player-Leiste selbst.
   ========================================================= */

.mp-hero{
  position:relative;margin:0 calc(-1 * var(--wp--preset--spacing--70));
  min-height:calc(100svh - var(--mp-player-h,88px) - var(--mp-live-h,0px));
  padding:88px var(--wp--preset--spacing--70) var(--wp--preset--spacing--50);
  display:flex;flex-direction:column;justify-content:flex-end;overflow:clip
}
.mp-hero__stack{position:absolute;inset:0}
.mp-hero__slide{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity var(--mp-t-cinematic) var(--mp-ease)
}
.mp-hero__slide.is-active{opacity:1}
.mp-hero__scrim{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(5,8,20,.58) 0%,rgba(5,8,20,.06) 34%,rgba(8,9,10,.34) 58%,rgba(8,9,10,.86) 78%,rgba(8,9,10,.98) 92%,#08090A 100%)
}
.mp-hero__glow{position:absolute;inset:0;background:var(--mp-light-horizon);opacity:.45}
html[data-mp-mode="club"] .mp-hero__glow{opacity:1}

.mp-hero__inner{position:relative;max-width:1320px;margin:0 auto;width:100%;display:flex;flex-direction:column;gap:var(--wp--preset--spacing--30)}
.mp-hero__row{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--wp--preset--spacing--40);flex-wrap:wrap}
.mp-hero__title{
  margin:0;font-family:var(--wp--preset--font-family--display);font-weight:200;
  font-size:var(--wp--preset--font-size--h2);letter-spacing:.05em;text-transform:uppercase
}
.mp-hero__claim{margin:10px 0 0;color:var(--wp--preset--color--text-secondary);max-width:52ch}
.mp-hero__genres{
  margin:0;color:var(--wp--preset--color--text-muted);
  font-size:var(--wp--preset--font-size--meta);letter-spacing:.2em;text-transform:uppercase
}
.mp-hero__actions{display:flex;align-items:center;gap:var(--wp--preset--spacing--30);flex-wrap:wrap}
.mp-hero__note{margin:0;color:var(--wp--preset--color--text-muted);font-size:var(--wp--preset--font-size--meta)}

.mp-mode{
  background:none;border:0;cursor:pointer;color:var(--wp--preset--color--text-muted);
  font-family:var(--wp--preset--font-family--display);font-size:var(--wp--preset--font-size--meta);
  letter-spacing:.2em;text-transform:uppercase;min-height:44px
}
.mp-mode:hover{color:var(--wp--preset--color--amber)}

.mp-hero__dots{display:flex;align-items:center;gap:10px;margin-left:auto}
.mp-hero__dot{
  width:18px;height:1px;border:0;padding:0;cursor:pointer;background:rgba(241,239,234,.24);
  transition:width var(--mp-t-mid) var(--mp-ease),background var(--mp-t-mid) var(--mp-ease)
}
.mp-hero__dot.is-active{width:44px;background:var(--wp--preset--color--amber)}

/* Club Mode: nur Atmosphaere, niemals Inhalt */
html[data-mp-mode="club"] body{background:linear-gradient(180deg,#050814,#0B0D1A 38%,#08090A)}

/* =========================================================
   11. Listen / Watch
   ========================================================= */

.mp-doors{margin:var(--wp--preset--spacing--60) 0;scroll-margin-top:100px}
.mp-rule{display:inline-block;width:28px;height:1px;background:var(--wp--preset--color--gold);margin-right:12px;vertical-align:middle}
.mp-doors__tabs{display:flex;gap:var(--wp--preset--spacing--30);margin:var(--wp--preset--spacing--30) 0;border-bottom:1px solid var(--mp-border-rest)}
.mp-doors__tab{
  background:none;border:0;cursor:pointer;padding:12px 2px;min-height:44px;
  font-family:var(--wp--preset--font-family--display);font-size:var(--wp--preset--font-size--small);
  letter-spacing:.2em;text-transform:uppercase;color:var(--wp--preset--color--text-muted);
  border-bottom:1px solid transparent;margin-bottom:-1px
}
.mp-doors__tab[aria-selected="true"]{color:var(--wp--preset--color--amber);border-bottom-color:var(--wp--preset--color--amber)}

.mp-doors__frame{aspect-ratio:16/9;margin-bottom:var(--wp--preset--spacing--30)}
.mp-doors__frame[data-loaded="true"]{aspect-ratio:auto}
.mp-embed__brand{position:absolute;top:16px;left:16px;color:var(--wp--preset--color--gold)}
.mp-embed__ring{color:var(--wp--preset--color--amber);font-size:18px}

.mp-doors__listlabel{
  margin:0 0 8px;font-size:var(--wp--preset--font-size--meta);letter-spacing:.2em;
  text-transform:uppercase;color:var(--wp--preset--color--text-muted)
}
.mp-row{
  display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;
  min-height:56px;padding:10px 4px;background:none;border:0;border-bottom:1px solid var(--mp-border-rest);
  color:var(--wp--preset--color--text-secondary);cursor:pointer;text-align:left
}
.mp-row:hover{color:var(--wp--preset--color--text-primary)}
.mp-row.is-hidden{display:none}
.mp-row__title{font-size:var(--wp--preset--font-size--small)}
.mp-row__length{font-size:var(--wp--preset--font-size--meta);color:var(--wp--preset--color--text-muted);font-variant-numeric:tabular-nums}
.mp-row[aria-current="true"]{color:var(--wp--preset--color--amber)}
.mp-row[aria-current="true"] .mp-row__title::after{
  content:"Im Player";margin-left:12px;font-size:var(--wp--preset--font-size--meta);
  letter-spacing:.18em;text-transform:uppercase
}
.mp-doors__note{margin:16px 0 0;font-size:var(--wp--preset--font-size--meta)}
.mp-doors__consent{margin:8px 0 0;font-size:var(--wp--preset--font-size--meta);color:var(--wp--preset--color--text-muted);max-width:62ch}

/* =========================================================
   12. Global Player
   ========================================================= */

.mp-player{
  position:fixed;left:0;right:0;bottom:0;z-index:50;
  background:rgba(8,9,10,.94);backdrop-filter:blur(14px);
  border-top:1px solid var(--mp-border-rest);
  padding-bottom:env(safe-area-inset-bottom,0px)
}
.mp-player__bar{
  max-width:1320px;margin:0 auto;padding:12px var(--wp--preset--spacing--70);
  display:flex;align-items:center;gap:var(--wp--preset--spacing--30);flex-wrap:wrap
}
.mp-player__cover{width:48px;height:48px;border-radius:4px;object-fit:cover}
.mp-player__text{display:flex;flex-direction:column;gap:2px;min-width:0}
.mp-player__label{font-size:var(--wp--preset--font-size--meta);letter-spacing:.2em;text-transform:uppercase;color:var(--wp--preset--color--text-muted)}
.mp-player__title{
  font-family:var(--wp--preset--font-family--display);font-size:var(--wp--preset--font-size--small);
  letter-spacing:.06em;color:var(--wp--preset--color--text-primary);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:46vw
}
.mp-player__progress{display:flex;align-items:center;gap:12px;flex:1 1 180px;min-width:160px}
.mp-player__track{flex:1 1 auto;height:1px;background:var(--mp-border-rest)}
.mp-player__fill{display:block;height:1px;width:0;background:var(--wp--preset--color--amber)}
.mp-player__time{font-size:var(--wp--preset--font-size--meta);color:var(--wp--preset--color--text-muted);font-variant-numeric:tabular-nums}
.mp-player__play{
  width:48px;height:48px;border-radius:999px;border:1px solid var(--mp-border-active);
  background:none;color:var(--wp--preset--color--amber);cursor:pointer;font-size:14px
}
.mp-player__play:hover{background:rgba(199,169,107,.08)}
.mp-player__slot{max-width:1320px;margin:0 auto;padding:0 var(--wp--preset--spacing--70)}
.mp-player__slot iframe{width:100%;height:166px;border:0;display:block;margin-bottom:12px}

@media (max-width:640px){
  .mp-player__progress{order:5;flex-basis:100%}
  .mp-player__title{max-width:60vw}
}

/* Editor: Vorschau nicht anklickbar machen, sonst faengt der Player im Canvas an */
.mp-editor-preview{pointer-events:none}

/* =========================================================
   13. Paket 2: Genres, Archiv, About, Voices, Connect
   ========================================================= */

.mp-line{display:flex;align-items:center;gap:10px;margin:var(--wp--preset--spacing--60) 0}
.mp-line__seg{height:1px;background:var(--mp-border-rest)}
.mp-line__dot{border-radius:999px;background:var(--wp--preset--color--gold);flex:0 0 auto}

.mp-genres{margin:var(--wp--preset--spacing--60) 0}
.mp-genres__grid{
  display:grid;gap:1px;background:var(--mp-border-rest);border:1px solid var(--mp-border-rest);
  grid-template-columns:1fr;margin-top:var(--wp--preset--spacing--40)
}
@media (min-width:700px){ .mp-genres__grid{grid-template-columns:repeat(3,minmax(0,1fr))} }
.mp-genre{
  display:flex;flex-direction:column;gap:8px;min-height:96px;padding:20px;
  background:var(--wp--preset--color--base);border:0;cursor:pointer;text-align:left;
  transition:background var(--mp-t-mid) var(--mp-ease)
}
.mp-genre:hover{background:var(--wp--preset--color--surface)}
.mp-genre__name{
  font-family:var(--wp--preset--font-family--display);font-size:var(--wp--preset--font-size--small);
  letter-spacing:.16em;text-transform:uppercase;color:var(--wp--preset--color--text-primary)
}
.mp-genre__desc{font-size:var(--wp--preset--font-size--meta);color:var(--wp--preset--color--text-muted)}
.mp-genre[aria-pressed="true"]{background:var(--wp--preset--color--surface)}
.mp-genre[aria-pressed="true"] .mp-genre__name{color:var(--wp--preset--color--amber)}
.mp-genres__influences{margin-top:var(--wp--preset--spacing--30);font-size:var(--wp--preset--font-size--meta);color:var(--wp--preset--color--text-muted)}
.mp-genres__label{letter-spacing:.2em;text-transform:uppercase;margin-right:12px}

/* Filter: gedimmt statt versteckt, die Auswahl bleibt sichtbar */
.mp-journey-card{transition:opacity var(--mp-t-slow) var(--mp-ease)}
html[data-mp-genre] .mp-journey-card{opacity:.3}
html[data-mp-genre="melodic"] .mp-journey-card[data-genres~="melodic"],
html[data-mp-genre="progressive"] .mp-journey-card[data-genres~="progressive"],
html[data-mp-genre="atmospheric"] .mp-journey-card[data-genres~="atmospheric"],
html[data-mp-genre="organic"] .mp-journey-card[data-genres~="organic"],
html[data-mp-genre="deep"] .mp-journey-card[data-genres~="deep"],
html[data-mp-genre="deeptech"] .mp-journey-card[data-genres~="deeptech"]{opacity:1}

.mp-archive{margin:var(--wp--preset--spacing--60) 0}
.mp-archive__grid{display:grid;gap:var(--wp--preset--spacing--50);grid-template-columns:1fr}
@media (min-width:900px){ .mp-archive__grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} }
.mp-archive__player .mp-embed{aspect-ratio:1}
.mp-archive__player .mp-embed[data-loaded="true"]{aspect-ratio:auto}
.mp-archive__list{margin-top:var(--wp--preset--spacing--30)}
.mp-archive__row{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  padding:12px 0;border-bottom:1px solid var(--mp-border-rest)
}
.mp-archive__title{flex:1 1 200px;font-size:var(--wp--preset--font-size--small)}
.mp-archive__meta{font-size:var(--wp--preset--font-size--meta);color:var(--wp--preset--color--text-muted);font-variant-numeric:tabular-nums}
.mp-archive__links{display:flex;gap:12px}
.mp-archive__links .mp-btn{padding-block:8px}

.mp-about{margin:var(--wp--preset--spacing--60) 0}
.mp-about__grid{display:grid;gap:var(--wp--preset--spacing--50);grid-template-columns:1fr;align-items:center}
@media (min-width:900px){ .mp-about__grid{grid-template-columns:minmax(0,.8fr) minmax(0,1fr)} }
.mp-about__portrait{width:100%;height:auto;border-radius:6px;display:block}
.mp-about .mp-lead{font-size:var(--wp--preset--font-size--body-large)}

.mp-voices{margin:var(--wp--preset--spacing--60) 0}
.mp-voices__grid{display:grid;gap:var(--wp--preset--spacing--50);grid-template-columns:1fr;margin-top:var(--wp--preset--spacing--40)}
@media (min-width:820px){ .mp-voices__grid{grid-template-columns:repeat(3,minmax(0,1fr))} }
.mp-voice{margin:0}
.mp-voice__quote{
  margin:0;font-family:var(--wp--preset--font-family--signature);font-style:italic;
  font-size:var(--wp--preset--font-size--h4);line-height:1.5;color:var(--wp--preset--color--text-primary)
}
.mp-voice__by{
  margin-top:14px;font-size:var(--wp--preset--font-size--meta);letter-spacing:.16em;
  text-transform:uppercase;color:var(--wp--preset--color--gold);display:flex;flex-direction:column;gap:4px
}
.mp-voice__source{color:var(--wp--preset--color--text-muted);letter-spacing:.1em;text-transform:none}

.mp-connect{margin:var(--wp--preset--spacing--60) 0}
.mp-connect__grid{
  display:grid;gap:1px;background:var(--mp-border-rest);border:1px solid var(--mp-border-rest);
  grid-template-columns:1fr;margin-top:var(--wp--preset--spacing--40)
}
@media (min-width:700px){ .mp-connect__grid{grid-template-columns:repeat(3,minmax(0,1fr))} }
.mp-channel{
  display:flex;flex-direction:column;gap:6px;padding:20px;min-height:96px;
  background:var(--wp--preset--color--base);transition:background var(--mp-t-mid) var(--mp-ease)
}
.mp-channel:hover{background:var(--wp--preset--color--surface)}
.mp-channel__name{
  font-family:var(--wp--preset--font-family--display);font-size:var(--wp--preset--font-size--small);
  letter-spacing:.16em;text-transform:uppercase;color:var(--wp--preset--color--text-primary)
}
.mp-channel:hover .mp-channel__name{color:var(--wp--preset--color--amber)}
.mp-channel__handle,.mp-channel__meta{font-size:var(--wp--preset--font-size--meta);color:var(--wp--preset--color--text-muted)}
.mp-connect__asof,.mp-connect__mail{margin-top:var(--wp--preset--spacing--30);font-size:var(--wp--preset--font-size--meta);color:var(--wp--preset--color--text-muted)}

.mp-appreciation{margin:var(--wp--preset--spacing--60) 0;text-align:center}
.mp-appreciation__text{
  margin:0 auto;max-width:52ch;
  font-family:var(--wp--preset--font-family--signature);font-style:italic;
  font-size:var(--wp--preset--font-size--h4);color:var(--wp--preset--color--text-secondary)
}

/* =========================================================
   14. Korrekturen aus der ersten Sichtung
   ========================================================= */

/* Der Hero lief nur ueber die Contentbreite und liess schwarze Raender stehen.
   Er gehoert randlos ueber die volle Fensterbreite. */
.mp-hero{
  width:100vw;max-width:100vw;
  margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
  padding:88px var(--wp--preset--spacing--70) calc(var(--mp-player-h,88px) + var(--wp--preset--spacing--40));
  min-height:calc(100svh - var(--mp-live-h,0px))
}
.mp-hero__stack{position:absolute;inset:0;height:100%;width:100%}

/* Der fixe Header liegt ueber dem Hero und wird beim Scrollen leicht abgedunkelt. */
.mp-header{
  position:fixed;top:var(--mp-live-h,0px);left:0;right:0;z-index:70;
  transition:background var(--mp-t-mid) var(--mp-ease),border-color var(--mp-t-mid) var(--mp-ease);
  border-bottom:1px solid transparent
}
html[data-mp-scrolled="true"] .mp-header{
  background:var(--mp-nav-scrim);backdrop-filter:blur(14px);
  border-bottom-color:var(--mp-border-rest)
}
/* Seiten ohne Hero brauchen die Hoehe des Headers als Reserve. */
body:not(.home) .wp-site-blocks > main{padding-top:104px}

/* Die Playerflaechen waren vor dem Klick riesige schwarze Loecher.
   Jetzt tragen sie das Cover, abgedunkelt, und sind hoehenbegrenzt. */
.mp-embed__poster{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.28;
  filter:saturate(.85)
}
.mp-embed[data-loaded="true"] .mp-embed__poster{display:none}
.mp-doors__frame{aspect-ratio:16/9;max-height:min(58vh,520px)}
.mp-archive__player .mp-embed{aspect-ratio:1;max-height:min(58vh,480px)}
.mp-embed__invite{z-index:2}

.mp-genres__reset{margin:var(--wp--preset--spacing--30) 0 12px}
.mp-genres__reset .mp-btn{padding-inline:0}

/* =========================================================
   15. Mobile
   ========================================================= */

@media (max-width:820px){
  .mp-hero{padding-top:76px;min-height:calc(100svh - var(--mp-live-h,0px))}
  .mp-hero__row{flex-direction:column;align-items:flex-start;gap:14px}
  .mp-hero__actions{gap:14px}
  .mp-hero__dots{margin-left:0;width:100%}

  .mp-featured__grid,
  .mp-archive__grid,
  .mp-about__grid{grid-template-columns:1fr}

  .mp-doors__frame{aspect-ratio:16/9;max-height:none}
  .mp-archive__player .mp-embed{aspect-ratio:16/9;max-height:none}

  .mp-meta{gap:18px}
  .mp-meta__cell{min-width:72px}

  .mp-archive__row{align-items:flex-start;flex-direction:column;gap:8px}
  .mp-archive__links{width:100%}

  .mp-player__bar{padding:10px var(--wp--preset--spacing--70);gap:14px}
  .mp-player__cover{width:40px;height:40px}
  .mp-player__slot iframe{height:140px}

  body:not(.home) .wp-site-blocks > main{padding-top:88px}
}

/* Archivzeile: Listen und Watch gehoeren nebeneinander, nicht untereinander */
.mp-archive__links{flex-wrap:nowrap;align-items:center}
.mp-archive__links .mp-btn{white-space:nowrap}

/* =========================================================
   16. Randlos, zweiter Anlauf
   Die negative Margin wurde von der Layoutregel des Blockeditors
   ueberschrieben, die jedem Kind margin-left:auto gibt. Darum jetzt
   ueber left und transform, da kommt keine Layoutregel dazwischen.
   ========================================================= */

.mp-hero{
  position:relative;left:50%;transform:translateX(-50%);
  width:100vw;max-width:100vw;
  margin-left:0;margin-right:0
}

/* Der fixe Header sass unter der WordPress-Adminleiste. */
body.admin-bar .mp-header{top:calc(32px + var(--mp-live-h,0px))}
@media (max-width:782px){
  body.admin-bar .mp-header{top:calc(46px + var(--mp-live-h,0px))}
}
body.admin-bar .mp-hero{padding-top:120px}
@media (max-width:820px){
  body.admin-bar .mp-hero{padding-top:122px}
}

/* Der Header traegt seinen Inhalt auf derselben Breite wie der uebrige Inhalt. */
.mp-header > .wp-block-group{max-width:1320px;margin-inline:auto;width:100%}

/* =========================================================
   17. Feinschliff gegen die Vorlage
   ========================================================= */

/* Der Hero war bildschirmfüllend und schob alles Weitere unter die Kante.
   Die Vorlage zeigt ihn kompakter, der nächste Abschnitt darf anreissen. */
.mp-hero{
  min-height:clamp(520px,74svh,820px);
  padding-bottom:calc(var(--mp-player-h,88px) + var(--wp--preset--spacing--30))
}
@media (max-width:820px){
  .mp-hero{min-height:clamp(460px,68svh,640px)}
}

/* Überblendung ruhiger, mit einer Spur Bewegung im Bild. */
.mp-hero__slide{
  opacity:0;transform:scale(1.04);
  transition:opacity 2400ms var(--mp-ease),transform 9000ms linear
}
.mp-hero__slide.is-active{opacity:1;transform:scale(1)}
@media (prefers-reduced-motion:reduce){
  .mp-hero__slide{transform:none;transition:opacity 1ms}
}

/* Gleichmässiger Rhythmus zwischen den Modulen, wie im Designsystem:
   Abstände grosszügiger als bei gewöhnlichen Business-Websites. */
.mp-featured,.mp-doors,.mp-genres,.mp-journeys,.mp-archive,.mp-about,.mp-voices,.mp-connect{
  margin-block:var(--wp--preset--spacing--60);
  scroll-margin-top:110px
}
.mp-featured{margin-top:var(--wp--preset--spacing--50)}
.mp-line{margin-block:var(--wp--preset--spacing--50)}
.mp-eyebrow{margin-bottom:16px}
.mp-lead{margin-top:14px}
h2 + .mp-lead{margin-top:18px}

/* Das Dankeschön an die Interpreten trägt Gold, nicht Grau. */
.mp-appreciation{margin-block:var(--wp--preset--spacing--60) var(--wp--preset--spacing--50)}
.mp-appreciation__text{color:var(--wp--preset--color--gold)}

/* =========================================================
   18. Header nach Vorlage
   ========================================================= */

.mp-header{padding-block:18px}
.mp-header .mp-logo--compact{width:clamp(132px,15vw,178px)}
.mp-header .wp-block-navigation{gap:var(--wp--preset--spacing--30)}
.mp-header .wp-block-navigation-item__content{
  position:relative;padding-block:6px;color:var(--wp--preset--color--text-secondary)
}
.mp-header .wp-block-navigation-item__content::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--wp--preset--color--amber);transform:scaleX(0);transform-origin:left;
  transition:transform var(--mp-t-mid) var(--mp-ease)
}
.mp-header .wp-block-navigation-item__content:hover{color:var(--wp--preset--color--amber)}
.mp-header .wp-block-navigation-item__content:hover::after{transform:scaleX(1)}

/* Mobiles Menü: Vollbild, dunkel, grosse Ziele */
.wp-block-navigation__responsive-container.is-menu-open{
  background:rgba(5,8,20,.98);padding:var(--wp--preset--spacing--50) var(--wp--preset--spacing--70)
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content{
  font-family:var(--wp--preset--font-family--display);
  font-size:var(--wp--preset--font-size--h3);font-weight:200;
  letter-spacing:.12em;text-transform:uppercase;padding-block:14px
}
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close{color:var(--wp--preset--color--text-primary);min-width:44px;min-height:44px}

/* =========================================================
   19. Footer nach Vorlage
   ========================================================= */

.mp-footer{
  border-top:1px solid var(--mp-border-rest);
  padding-block:var(--wp--preset--spacing--60) var(--wp--preset--spacing--50);
  margin-top:var(--wp--preset--spacing--60)
}
.mp-footer__inner{
  max-width:1320px;margin-inline:auto;padding-inline:var(--wp--preset--spacing--70);
  display:flex;flex-direction:column;align-items:center;gap:var(--wp--preset--spacing--30);
  text-align:center
}
.mp-footer .mp-logo--stacked{width:clamp(180px,24vw,260px)}
.mp-footer__nav,.mp-footer__channels,.mp-footer__legal{
  display:flex;flex-wrap:wrap;justify-content:center;gap:var(--wp--preset--spacing--30)
}
.mp-footer__nav a,.mp-footer__channels a,.mp-footer__legal a,.mp-footer__consent{
  font-family:var(--wp--preset--font-family--display);
  font-size:var(--wp--preset--font-size--meta);letter-spacing:.2em;text-transform:uppercase;
  color:var(--wp--preset--color--text-secondary);background:none;border:0;cursor:pointer;
  min-height:44px;display:inline-flex;align-items:center
}
.mp-footer__nav a:hover,.mp-footer__channels a:hover,.mp-footer__legal a:hover,.mp-footer__consent:hover{
  color:var(--wp--preset--color--amber)
}
.mp-footer__legal{border-top:1px solid var(--mp-border-rest);padding-top:var(--wp--preset--spacing--30);width:100%}
.mp-footer__copy{margin:0;font-size:var(--wp--preset--font-size--meta);color:var(--wp--preset--color--text-muted)}

/* Der eingeklappte SoundCloud-Widget wird nicht ausgeblendet, sondern nur
   aus dem Blick genommen. display:none wuerde die Wiedergabe abwuergen. */
.mp-player[data-open="false"] .mp-player__slot{
  position:absolute;left:-9999px;width:1px;height:1px;
  overflow:hidden;opacity:0;pointer-events:none
}
.mp-player[data-open="true"] .mp-player__slot{position:static;width:auto;height:auto;opacity:1;pointer-events:auto}

/* =========================================================
   20. Header, Hero-Unterzeile, Footer und Formular nach Vorlage
   ========================================================= */

.mp-header__inner{
  width:100%;max-width:none;
  padding-inline:var(--wp--preset--spacing--70);
  gap:var(--wp--preset--spacing--40)
}
.mp-header .mp-logo--compact{width:clamp(150px,16vw,196px)}
.mp-header__right{gap:var(--wp--preset--spacing--40);align-items:center}

.mp-lang{display:inline-flex;align-items:center;gap:8px}
.mp-lang__item{
  font-family:var(--wp--preset--font-family--display);font-size:var(--wp--preset--font-size--meta);
  letter-spacing:.2em;color:var(--wp--preset--color--text-muted)
}
.mp-lang__item.is-current{color:var(--wp--preset--color--amber)}
.mp-lang__sep{color:var(--wp--preset--color--line)}

/* Hero: Kleinzeile und Titel auf einer Linie, Regler rechts */
.mp-hero__lockup{display:flex;align-items:baseline;gap:var(--wp--preset--spacing--30);flex-wrap:wrap;margin:0}
.mp-hero__lockup .mp-eyebrow{margin:0}
.mp-hero__title{
  font-family:var(--wp--preset--font-family--display);font-weight:200;
  font-size:var(--wp--preset--font-size--h3);letter-spacing:.08em;text-transform:uppercase
}
.mp-hero__actions{gap:var(--wp--preset--spacing--30)}
.mp-hero__right{display:flex;align-items:center;gap:var(--wp--preset--spacing--40);margin-left:auto}
.mp-hero__note{
  font-size:var(--wp--preset--font-size--meta);letter-spacing:.14em;text-transform:uppercase;
  color:var(--wp--preset--color--text-muted)
}

/* Studio | Club als Schalterpaar, nicht als Textzeile */
.mp-mode{display:inline-flex;border:1px solid var(--mp-border-rest);border-radius:2px;overflow:hidden}
.mp-mode__opt{
  background:none;border:0;cursor:pointer;min-height:40px;padding:8px 18px;
  font-family:var(--wp--preset--font-family--display);font-size:var(--wp--preset--font-size--meta);
  letter-spacing:.2em;text-transform:uppercase;color:var(--wp--preset--color--text-muted);
  transition:color var(--mp-t-fast) var(--mp-ease),background var(--mp-t-fast) var(--mp-ease)
}
.mp-mode__opt[aria-pressed="true"]{background:rgba(199,169,107,.14);color:var(--wp--preset--color--amber)}
.mp-mode__opt:hover{color:var(--wp--preset--color--text-primary)}

/* Footer zweispaltig wie in der Vorlage */
.mp-footer__inner{align-items:stretch;text-align:left;gap:var(--wp--preset--spacing--40)}
.mp-footer__top{
  display:flex;justify-content:space-between;align-items:flex-end;
  gap:var(--wp--preset--spacing--40);flex-wrap:wrap
}
.mp-footer .mp-logo--horizontal{width:clamp(200px,24vw,300px)}
.mp-footer__tagline{
  margin:10px 0 0;font-size:var(--wp--preset--font-size--meta);letter-spacing:.22em;
  text-transform:uppercase;color:var(--wp--preset--color--text-muted)
}
.mp-footer__links{display:flex;align-items:center;flex-wrap:wrap;gap:var(--wp--preset--spacing--30)}
.mp-footer__links a,.mp-footer__consent{
  font-family:var(--wp--preset--font-family--display);font-size:var(--wp--preset--font-size--meta);
  letter-spacing:.2em;text-transform:uppercase;color:var(--wp--preset--color--text-secondary);
  background:none;border:0;cursor:pointer;min-height:44px;display:inline-flex;align-items:center
}
.mp-footer__links a:hover,.mp-footer__consent:hover{color:var(--wp--preset--color--amber)}
.mp-footer__bottom{
  display:flex;justify-content:space-between;align-items:flex-end;gap:var(--wp--preset--spacing--40);
  border-top:1px solid var(--mp-border-rest);padding-top:var(--wp--preset--spacing--30);flex-wrap:wrap
}
.mp-footer__clause{margin:0;max-width:56ch;font-size:var(--wp--preset--font-size--meta);color:var(--wp--preset--color--text-muted);line-height:1.7}
.mp-footer__copy{margin:0;font-size:var(--wp--preset--font-size--meta);letter-spacing:.16em;color:var(--wp--preset--color--text-muted)}

/* Formular im Connect-Bereich */
.mp-contact{margin-top:var(--wp--preset--spacing--60);max-width:720px}
.mp-contact__title{margin:0 0 var(--wp--preset--spacing--30);font-size:var(--wp--preset--font-size--h3)}

@media (max-width:820px){
  .mp-hero__right{margin-left:0;width:100%;justify-content:space-between}
  .mp-footer__top,.mp-footer__bottom{flex-direction:column;align-items:flex-start}
}

/* =========================================================
   21. Masse direkt aus dem Prototyp
   Jede Sektion laeuft randlos und traegt ihre eigene Innenabstaende,
   genau wie in "Master Percy - Website.dc.html". Der Inhalt darin ist
   auf 1320px begrenzt. Damit stimmt der Rhythmus ohne Nachmessen.
   ========================================================= */

.mp-hero,.mp-featured,.mp-doors,.mp-genres,.mp-journeys,.mp-archive,
.mp-about,.mp-voices,.mp-connect,.mp-appreciation,.mp-line,.mp-footer{
  position:relative;left:50%;transform:translateX(-50%);
  width:100vw;max-width:100vw;margin:0
}
.mp-featured > *,.mp-doors > *,.mp-genres > *,.mp-journeys > *,.mp-archive > *,
.mp-about > *,.mp-voices > *,.mp-connect > *,.mp-appreciation > *,.mp-line > *{
  max-width:1320px;margin-inline:auto
}

.mp-featured{padding:clamp(80px,11vw,164px) clamp(20px,5vw,64px) clamp(64px,8vw,112px)}
.mp-doors{padding:clamp(72px,9vw,128px) clamp(20px,5vw,64px)}
.mp-genres{
  padding:clamp(72px,9vw,128px) clamp(20px,5vw,64px);
  background:linear-gradient(180deg,#08090A 0%,#0D0F11 40%,#08090A 100%)
}
.mp-journeys{padding:clamp(72px,9vw,140px) clamp(20px,5vw,64px)}
.mp-archive{padding:clamp(72px,9vw,128px) clamp(20px,5vw,64px)}
.mp-about{padding:clamp(72px,9vw,140px) clamp(20px,5vw,64px);background:#0D0F11}
.mp-voices{padding:clamp(72px,9vw,128px) clamp(20px,5vw,64px)}
.mp-connect{
  padding:clamp(72px,9vw,140px) clamp(20px,5vw,64px);
  border-top:1px solid rgba(241,239,234,.10)
}
.mp-appreciation{padding:clamp(56px,7vw,96px) clamp(20px,5vw,64px)}
.mp-line{padding:0 clamp(20px,5vw,64px)}
.mp-footer{
  padding:clamp(80px,10vw,160px) clamp(20px,5vw,64px);
  background:radial-gradient(ellipse at 50% 120%,rgba(255,198,119,.10) 0%,rgba(8,9,10,0) 62%);
  border-top:1px solid rgba(241,239,234,.10);margin-top:0
}
.mp-footer__inner{padding-inline:0}

/* Hero exakt nach Prototyp */
.mp-hero{
  padding:88px 0 0;min-height:calc(100svh - var(--mp-player-h,88px));
  display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden
}
body.admin-bar .mp-hero{padding-top:120px}
.mp-hero__glow{
  position:absolute;left:50%;bottom:-38%;top:auto;right:auto;
  width:150%;max-width:1800px;aspect-ratio:2/1;transform:translateX(-50%);
  background:radial-gradient(ellipse at 50% 100%,rgba(255,198,119,.30) 0%,rgba(219,95,72,.14) 38%,rgba(5,8,20,0) 72%);
  opacity:.45;pointer-events:none
}
.mp-hero__inner{
  position:relative;width:100%;max-width:1320px;margin:0 auto;
  padding:0 clamp(20px,5vw,64px) clamp(28px,4vw,48px);
  display:flex;flex-direction:column;gap:clamp(20px,2.5vw,30px)
}
.mp-hero__row{
  display:flex;flex-wrap:wrap;gap:clamp(16px,3vw,40px);
  align-items:baseline;justify-content:space-between
}
.mp-hero__lockup{display:flex;align-items:center;gap:16px}
.mp-hero__lockup .mp-eyebrow{
  display:flex;align-items:center;gap:16px;margin:0;
  font-size:.73rem;letter-spacing:.34em;text-transform:uppercase;color:#FFC677;white-space:nowrap
}
.mp-hero__lockup .mp-rule{
  width:clamp(24px,4vw,56px);height:1px;margin:0;
  background:linear-gradient(90deg,rgba(255,198,119,0),rgba(255,198,119,.8))
}
.mp-hero__title{
  font-family:'Sora',sans-serif;font-weight:300;
  font-size:clamp(.9rem,1.5vw,1.1rem);letter-spacing:.16em;text-transform:uppercase;color:#F1EFEA
}
.mp-hero__genres{
  margin:0;font-size:.73rem;letter-spacing:.3em;text-transform:uppercase;color:#F3CBA6
}
.mp-hero__actions{display:flex;flex-wrap:wrap;gap:clamp(16px,2vw,28px);align-items:center}
.mp-hero__actions .mp-btn{min-width:150px;min-height:46px;justify-content:center}
.mp-hero__right{
  display:flex;align-items:center;gap:14px;margin-left:auto;
  border:1px solid rgba(241,239,234,.10);padding:6px
}
.mp-mode{border:0;padding:0;gap:0}
.mp-mode__opt{
  font-family:'Manrope',sans-serif;font-size:.73rem;letter-spacing:.26em;
  padding:8px 16px;min-height:auto;transition:all 480ms ease
}
.mp-hero__note{
  flex-basis:100%;margin:0;font-size:.73rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--wp--preset--color--text-muted);transition:color 900ms ease
}
.mp-hero__dots{display:flex;gap:14px;align-items:center;margin-left:0}
.mp-hero__dot{height:2px;width:18px;background:rgba(241,239,234,.24);transition:all 900ms var(--mp-ease)}
.mp-hero__dot.is-active{width:44px;background:#FFC677}

@media (max-width:820px){
  .mp-hero__right{margin-left:0}
  .mp-hero__actions .mp-btn{min-width:132px}
}

/* =========================================================
   22. Die Werte des Designsystems, direkt uebernommen
   Quelle: _ds/tokens/*.css und die Komponenten im _ds_bundle.
   Ab hier gilt: was hier steht, stammt aus dem System, nicht aus
   meiner Schaetzung.
   ========================================================= */

:root{
  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;
  --space-6:32px;--space-7:48px;--space-8:64px;--space-9:96px;--space-10:128px;--space-11:180px;
  --section-y:clamp(96px,12vw,180px);
  --section-y-tight:clamp(64px,8vw,112px);
  --gutter:clamp(20px,5vw,64px);
  --content-max:1320px;--content-narrow:720px;--measure:62ch;

  --display-xl-size:clamp(2.75rem,7vw,5.5rem);--display-xl-lh:1.04;--display-xl-ls:.14em;
  --display-lg-size:clamp(2rem,4.4vw,3.5rem);--display-lg-lh:1.1;--display-lg-ls:.10em;
  --display-md-size:clamp(1.5rem,2.6vw,2.25rem);--display-md-lh:1.16;--display-md-ls:.06em;
  --eyebrow-size:.75rem;--eyebrow-ls:.34em;--eyebrow-weight:500;
  --meta-size:.75rem;--meta-lh:1.3;--meta-ls:.18em;--meta-weight:500;
  --body-lg-size:1.125rem;--body-lg-lh:1.7;
  --hover-lift:-1px;
}

/* SectionHeading */
.mp-eyebrow{
  display:inline-flex;align-items:center;gap:14px;margin:0;
  font-family:var(--wp--preset--font-family--text);
  font-size:var(--eyebrow-size);letter-spacing:var(--eyebrow-ls);font-weight:var(--eyebrow-weight);
  text-transform:uppercase;color:var(--wp--preset--color--gold);white-space:nowrap
}
.mp-rule{width:28px;height:1px;margin:0;background:var(--mp-border-active)}
.mp-featured h2,.mp-doors h2,.mp-genres h2,.mp-journeys h2,.mp-archive h2,
.mp-about h2,.mp-voices h2,.mp-connect h2,.mp-related h2{
  margin:0;font-family:var(--wp--preset--font-family--display);
  font-size:var(--display-lg-size);line-height:var(--display-lg-lh);
  letter-spacing:var(--display-lg-ls);font-weight:300;text-transform:uppercase;
  color:var(--wp--preset--color--text-primary)
}
.mp-lead{
  margin:0;max-width:var(--measure);
  font-size:var(--body-lg-size);line-height:var(--body-lg-lh);
  color:var(--wp--preset--color--text-secondary)
}
/* Kopfzeilen sind eine Spalte mit 24px Abstand, nicht lose Absaetze */
.mp-featured__body > .mp-eyebrow,.mp-doors > .mp-eyebrow,.mp-genres > .mp-eyebrow,
.mp-journeys > .mp-eyebrow,.mp-voices > .mp-eyebrow,.mp-connect > .mp-eyebrow,
.mp-about__body > .mp-eyebrow,.mp-archive__body > .mp-eyebrow{margin-bottom:var(--space-5)}
.mp-doors h2 + .mp-lead,.mp-genres h2 + .mp-lead,.mp-journeys h2 + .mp-lead,
.mp-connect h2 + .mp-lead,.mp-voices h2 + .mp-lead,.mp-archive__body h2 + .mp-lead{margin-top:var(--space-5)}

/* MetaTag */
.mp-meta{
  display:flex;flex-wrap:wrap;gap:var(--space-4) var(--space-6);
  padding:0;border:0
}
.mp-metatag{
  display:inline-flex;align-items:baseline;gap:8px;
  font-family:var(--wp--preset--font-family--text);
  font-size:var(--meta-size);line-height:var(--meta-lh);letter-spacing:var(--meta-ls);
  font-weight:var(--meta-weight);text-transform:uppercase;color:var(--wp--preset--color--text-muted)
}
.mp-metatag__label{color:var(--wp--preset--color--text-muted)}
.mp-metatag__value{color:var(--wp--preset--color--text-secondary)}
.mp-metatag.is-accent .mp-metatag__value{color:var(--wp--preset--color--gold)}

/* Button */
.mp-btn{
  display:inline-flex;align-items:center;gap:12px;
  font-family:var(--wp--preset--font-family--text);
  font-size:.75rem;font-weight:500;letter-spacing:.24em;text-transform:uppercase;line-height:1;
  padding:14px 26px;min-height:auto;border:1px solid var(--mp-border-rest);border-radius:2px;
  color:var(--wp--preset--color--text-secondary);background:transparent
}
.mp-btn:hover{
  color:var(--wp--preset--color--text-primary);border-color:var(--mp-border-hover);
  transform:translateY(var(--hover-lift))
}
.mp-btn--quiet{border:0;padding:6px 0;font-size:.6875rem;letter-spacing:.22em}
.mp-btn--quiet:hover{color:var(--wp--preset--color--gold);transform:none}

/* FeaturedMix */
.mp-featured__grid{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:clamp(32px,5vw,80px);align-items:center;margin-top:0
}
.mp-featured__body{display:flex;flex-direction:column;gap:var(--space-6)}
.mp-featured__body::after{content:none}
.mp-featured__title{
  font-size:var(--display-lg-size);line-height:var(--display-lg-lh);
  letter-spacing:var(--display-lg-ls);font-weight:300;text-transform:uppercase;margin:0
}
.mp-featured__subtitle{
  margin:0;font-size:var(--meta-size);letter-spacing:var(--meta-ls);font-weight:500;
  text-transform:uppercase;color:var(--wp--preset--color--text-muted)
}
.mp-featured__actions{display:flex;flex-wrap:wrap;gap:var(--space-5);align-items:center;margin-top:var(--space-2)}
.mp-featured__cover{border-radius:6px}

/* MixCard */
.mp-journeys__grid{gap:clamp(32px,5vw,80px) clamp(24px,3vw,48px);margin-top:var(--space-8)}
.mp-card{gap:var(--space-5)}
.mp-card__title{
  margin:0;font-size:var(--display-md-size);line-height:var(--display-md-lh);
  letter-spacing:var(--display-md-ls);font-weight:400;text-transform:uppercase;
  color:var(--wp--preset--color--text-secondary);
  transition:color var(--mp-t-mid) var(--mp-ease)
}
.mp-card__link:hover .mp-card__title{color:var(--wp--preset--color--text-primary)}
.mp-card__media{border-radius:6px;border:1px solid var(--mp-border-rest)}
.mp-card__subtitle{
  margin:0;font-size:var(--meta-size);letter-spacing:var(--meta-ls);font-weight:500;
  text-transform:uppercase;color:var(--wp--preset--color--text-muted)
}
.mp-card__text{margin:0;max-width:46ch;color:var(--wp--preset--color--text-secondary)}
.mp-card::after{content:"";display:block;height:1px;background:var(--mp-border-rest);order:-1}
.mp-card .mp-meta{gap:var(--space-5)}

/* ListenerVoice */
.mp-voice{display:flex;flex-direction:column;gap:var(--space-5);max-width:var(--measure)}
.mp-voice::before{content:"";width:32px;height:1px;background:var(--mp-border-active)}
.mp-voice__quote{
  margin:0;font-family:var(--wp--preset--font-family--display);font-weight:300;font-style:normal;
  font-size:clamp(1.25rem,2.2vw,1.875rem);line-height:1.45;letter-spacing:.01em;
  color:var(--wp--preset--color--text-primary)
}
.mp-voice__by{
  margin:0;display:flex;flex-wrap:wrap;gap:8px;
  font-size:var(--meta-size);letter-spacing:var(--meta-ls);font-weight:500;
  text-transform:uppercase;color:var(--wp--preset--color--gold)
}

/* =========================================================
   23. Korrektur: randlos ohne Versatz
   Die Sektionen bleiben im normalen Fluss, nur ihr Hintergrund
   laeuft ueber die volle Breite. Vorher habe ich die Sektionen
   selbst verschoben, dabei sind die Titel nach links aus dem Bild
   gewandert.
   ========================================================= */

.mp-featured,.mp-doors,.mp-genres,.mp-journeys,.mp-archive,
.mp-about,.mp-voices,.mp-connect,.mp-appreciation,.mp-line{
  position:relative;left:auto;transform:none;width:auto;max-width:none;
  padding-inline:0;margin-inline:auto
}
.mp-featured > *,.mp-doors > *,.mp-genres > *,.mp-journeys > *,.mp-archive > *,
.mp-about > *,.mp-voices > *,.mp-connect > *,.mp-appreciation > *,.mp-line > *{
  max-width:none;margin-inline:0
}
.mp-genres::before,.mp-about::before,.mp-connect::before{
  content:"";position:absolute;inset-block:0;left:calc(50% - 50vw);
  width:100vw;z-index:-1;pointer-events:none
}
.mp-genres::before{background:linear-gradient(180deg,#08090A 0%,#0D0F11 40%,#08090A 100%)}
.mp-about::before{background:#0D0F11}
.mp-connect::before{border-top:1px solid rgba(241,239,234,.10)}
.mp-connect{border-top:0}

.mp-footer{
  position:relative;left:calc(50% - 50vw);width:100vw;max-width:100vw;transform:none
}

/* Hero: Hoehe folgt dem Fenster, laesst aber immer den naechsten
   Abschnitt anreissen und wird auf sehr hohen Schirmen nicht endlos. */
.mp-hero{
  min-height:clamp(480px, calc(100svh - var(--mp-player-h,88px) - 96px), 880px);
  padding:88px 0 clamp(28px,4vw,48px)
}
@media (max-width:820px){
  .mp-hero{min-height:clamp(440px, calc(100svh - var(--mp-player-h,88px) - 72px), 720px)}
}

/* =========================================================
   24. Listener Voices als Folge, nicht als Raster
   ========================================================= */

.mp-voices__grid{
  display:flex;flex-direction:column;gap:clamp(40px,5vw,72px);
  margin-top:var(--space-8);max-width:var(--content-narrow)
}
.mp-voice{gap:var(--space-4)}
.mp-voice__quote{font-size:clamp(1.15rem,1.8vw,1.5rem);line-height:1.55}
.mp-voice__by{gap:14px;color:var(--wp--preset--color--text-muted)}
.mp-voice__by .mp-voice__source{color:var(--wp--preset--color--text-muted)}
.mp-voice__by{align-items:baseline}

/* =========================================================
   25. Connect: Text links, Kanaele rechts
   ========================================================= */

.mp-connect__grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(32px,5vw,80px);align-items:start
}
@media (max-width:900px){ .mp-connect__grid{grid-template-columns:1fr} }
.mp-connect__intro{display:flex;flex-direction:column;gap:var(--space-5)}
.mp-connect__note{
  margin:0;max-width:46ch;font-size:var(--wp--preset--font-size--small);
  color:var(--wp--preset--color--text-muted)
}
.mp-connect__tier{
  margin:0 0 var(--space-4);font-size:var(--meta-size);letter-spacing:var(--meta-ls);
  font-weight:500;text-transform:uppercase;color:var(--wp--preset--color--text-muted)
}
.mp-connect__lists{display:flex;flex-direction:column;gap:var(--space-7)}
.mp-channels{display:flex;flex-direction:column;background:none;border:0;gap:0}
.mp-channel{
  display:flex;align-items:baseline;gap:var(--space-4);padding:18px 0;
  border-bottom:1px solid var(--mp-border-rest);background:none;min-height:auto
}
.mp-channel__handle{
  flex:1 1 auto;font-family:var(--wp--preset--font-family--text);
  font-size:var(--meta-size);letter-spacing:var(--meta-ls);font-weight:500;
  text-transform:uppercase;color:var(--wp--preset--color--text-primary)
}
.mp-channel__meta{
  font-size:var(--meta-size);letter-spacing:var(--meta-ls);text-transform:uppercase;
  color:var(--wp--preset--color--text-muted)
}
.mp-channel__count{display:flex;flex-direction:column;align-items:flex-end;gap:2px;margin-left:auto}
.mp-channel__count strong{
  font-family:var(--wp--preset--font-family--display);font-weight:300;
  font-size:clamp(1.1rem,1.6vw,1.4rem);color:var(--wp--preset--color--amber)
}
.mp-channel__count span{
  font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--wp--preset--color--text-muted)
}
.mp-channel--row .mp-channel__name{
  flex:1 1 auto;font-size:var(--meta-size);letter-spacing:var(--meta-ls);font-weight:500;
  text-transform:uppercase;color:var(--wp--preset--color--text-primary)
}
.mp-channel__note{
  margin-left:auto;display:inline-flex;align-items:center;gap:12px;text-align:right;
  font-size:var(--wp--preset--font-size--small);color:var(--wp--preset--color--text-muted)
}
.mp-channel:hover .mp-channel__handle,.mp-channel:hover .mp-channel__name{color:var(--wp--preset--color--amber)}
.mp-connect__asof{
  margin:0;font-size:var(--meta-size);letter-spacing:var(--meta-ls);text-transform:uppercase;
  color:var(--wp--preset--color--text-muted)
}
.mp-connect__mail a{font-size:var(--wp--preset--font-size--small)}

/* =========================================================
   26. Footer: Logo mit Tagline links, Links rechts
   ========================================================= */

.mp-footer__inner{max-width:1320px;margin-inline:auto;text-align:left;align-items:stretch}
.mp-footer__brand{display:flex;flex-direction:column;gap:10px}
.mp-footer .mp-logo--compact{width:clamp(190px,22vw,260px)}
.mp-footer__tagline{margin:0;letter-spacing:.24em}
.mp-footer__links{margin-left:auto}

/* =========================================================
   27. Sektionen 1:1 nach der Designvorlage
   Quelle: Standalone-Export, Abschnitte 01 bis 11, und die
   Komponenten Artwork, SectionHeading, MetaTag, Button, MixCard,
   PlatformStat, ListenerVoice aus dem Design-System-Bundle.
   ========================================================= */

/* --- gemeinsame Bausteine --- */

.mp-featured__inner,.mp-doors__inner,.mp-genres__inner,.mp-journeys__inner,
.mp-connect__grid,.mp-about__grid,.mp-voices__inner,.mp-appreciation__inner,.mp-footer__inner{
  max-width:1320px;margin:0 auto;width:100%
}

.mp-heading{
  display:flex;flex-direction:column;gap:var(--space-5);
  align-items:flex-start;max-width:var(--content-narrow)
}
.mp-eyebrow--plain{gap:0}
.mp-eyebrow--plain .mp-rule{display:none}
.mp-eyebrow--plain{font-size:.7rem;letter-spacing:.34em;color:#FFC677}
.mp-hairline{display:block;height:1px;background:var(--mp-border-rest)}
.mp-link-gold{
  font-size:.73rem;letter-spacing:.24em;text-transform:uppercase;color:#FFC677
}
.mp-link-gold:hover{color:#F3CBA6}

/* Artwork mit Hover, Radius und Vignette */
.mp-artwork{
  position:relative;display:block;overflow:hidden;border-radius:8px;
  background:var(--wp--preset--color--surface);border:1px solid var(--mp-border-rest)
}
.mp-artwork__img{
  display:block;width:100%;height:100%;object-fit:cover;
  transform:scale(1);transition:transform 1600ms var(--mp-ease)
}
.mp-artwork:hover .mp-artwork__img,
.mp-card:hover .mp-artwork__img{transform:scale(1.04)}
.mp-artwork__vignette{
  position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 120% at 50% 50%,rgba(8,9,10,0) 42%,rgba(8,9,10,.55) 100%)
}

/* Button, Grössen sm und md */
.mp-btn--sm{font-size:.6875rem;letter-spacing:.22em;padding:10px 16px}
.mp-btn--text{border:0;padding:6px 0}
.mp-btn--text:hover{color:#FFC677;transform:none}
.mp-btn__arrow{flex:none;transition:transform 480ms var(--mp-ease)}
.mp-btn:hover .mp-btn__arrow{transform:translateX(4px)}

/* --- 02 Featured Journey --- */

.mp-featured__grid{align-items:center;gap:clamp(32px,5vw,80px)}
.mp-featured__media{aspect-ratio:1/1}
.mp-featured__body{display:flex;flex-direction:column;gap:var(--space-6)}
.mp-featured__actions{
  display:flex;flex-wrap:wrap;gap:24px;align-items:center;margin-top:clamp(28px,4vw,44px)
}
.mp-featured__tracks{
  font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:#777A7C
}

/* --- 03 Listen / Watch --- */

.mp-doors__inner{display:flex;flex-direction:column;gap:clamp(36px,5vw,64px)}
.mp-doors__tabs{margin:0;gap:clamp(20px,3vw,36px)}
.mp-doors__frame{
  position:relative;aspect-ratio:16/10;max-height:560px;border-radius:8px;overflow:hidden
}
.mp-embed__invite{
  position:absolute;inset:0;z-index:3;display:block;padding:clamp(16px,2vw,28px);
  background:transparent;border:0;cursor:pointer
}
.mp-embed__mark{position:absolute;left:clamp(16px,2vw,28px);top:clamp(16px,2vw,28px);color:#FFC677}
.mp-embed__platform{
  position:absolute;right:clamp(16px,2vw,28px);top:clamp(16px,2vw,28px);
  display:flex;flex-direction:column;gap:10px;align-items:flex-end
}
.mp-embed__platformmark{height:clamp(16px,1.8vw,22px);width:auto;opacity:.95;filter:drop-shadow(0 2px 12px rgba(0,0,0,.7))}
.mp-embed__hint{
  font-size:.72rem;letter-spacing:.3em;text-transform:uppercase;color:#FFC677;
  animation:mp-beat 2600ms ease-in-out infinite
}
@keyframes mp-beat{0%,100%{opacity:.55}50%{opacity:1}}
.mp-embed__ring{display:none}

.mp-doors__listlabel{
  display:block;margin-bottom:14px;
  font-size:.73rem;letter-spacing:.3em;text-transform:uppercase;color:#777A7C
}
.mp-rows{display:flex;flex-direction:column}
.mp-row{
  display:flex;flex-wrap:wrap;gap:10px 18px;align-items:baseline;justify-content:space-between;
  width:100%;text-align:left;min-height:56px;padding:15px 0;
  border:0;border-bottom:1px solid rgba(241,239,234,.08);background:transparent;cursor:pointer
}
.mp-row:hover{border-bottom-color:rgba(199,169,107,.32)}
.mp-row__left{display:flex;gap:16px;align-items:baseline;flex:1 1 220px;min-width:0}
.mp-row__num{font-size:.73rem;letter-spacing:.14em;color:#777A7C;width:26px;flex-shrink:0}
.mp-row__title{
  flex:1;font-family:var(--wp--preset--font-family--text);
  font-size:.95rem;line-height:1.5;color:var(--wp--preset--color--text-secondary)
}
.mp-row:hover .mp-row__title{color:var(--wp--preset--color--text-primary)}
.mp-row__right{display:flex;gap:16px;align-items:baseline;flex-shrink:0}
.mp-row__now{
  display:none;font-size:.73rem;letter-spacing:.2em;text-transform:uppercase;color:#FFC677
}
.mp-row[aria-current="true"] .mp-row__now{display:inline}
.mp-row[aria-current="true"] .mp-row__num,
.mp-row[aria-current="true"] .mp-row__title{color:#FFC677}
.mp-row__length{
  font-size:.73rem;letter-spacing:.16em;text-transform:uppercase;color:#777A7C;white-space:nowrap
}
.mp-row::after{content:none}
.mp-more{
  display:flex;align-items:center;justify-content:space-between;gap:20px;width:100%;
  min-height:56px;padding:0;border:0;background:transparent;color:#B9B8B3;cursor:pointer;
  font-family:var(--wp--preset--font-family--text);
  font-size:.73rem;letter-spacing:.22em;text-transform:uppercase
}
.mp-more:hover{color:#F1EFEA}
.mp-more__sign{color:#FFC677;font-size:.9rem}
.mp-doors__profile{
  display:inline-block;margin-top:8px;
  font-size:.73rem;letter-spacing:.22em;text-transform:uppercase
}
.mp-doors__note{margin:0;font-size:.82rem;line-height:1.75;color:#B9B8B3;max-width:74ch}
.mp-doors__consent{display:none}

/* --- 04 Genre Spectrum --- */

.mp-genres__inner{display:flex;flex-direction:column;gap:clamp(32px,4vw,56px)}
.mp-genres__grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));
  gap:1px;background:rgba(241,239,234,.10);border:0;margin:0
}
.mp-genre{
  text-align:left;cursor:pointer;background:#08090A;border:0;
  padding:clamp(24px,3vw,40px);display:flex;flex-direction:column;gap:14px;min-height:180px;
  transition:background 480ms ease,opacity 480ms ease
}
.mp-genre:hover{background:#181B1E}
.mp-genre__num{font-size:.73rem;letter-spacing:.3em;text-transform:uppercase;color:#777A7C}
.mp-genre__name{
  font-family:var(--wp--preset--font-family--display);font-weight:300;
  font-size:clamp(1.05rem,1.6vw,1.35rem);letter-spacing:.08em;text-transform:uppercase;
  line-height:1.2;color:var(--wp--preset--color--text-primary)
}
.mp-genre__desc{font-size:.9rem;line-height:1.7;color:#777A7C}
.mp-genre[aria-pressed="true"]{background:#181B1E}
.mp-genre[aria-pressed="true"] .mp-genre__num,
.mp-genre[aria-pressed="true"] .mp-genre__name{color:#FFC677}
html[data-mp-genre] .mp-genre[aria-pressed="false"]{opacity:.45}
.mp-genres__foot{
  display:flex;flex-wrap:wrap;gap:clamp(16px,3vw,40px);align-items:baseline;justify-content:space-between
}
.mp-genres__influences{display:flex;flex-wrap:wrap;gap:10px 22px;align-items:baseline}
.mp-genres__label{font-size:.73rem;letter-spacing:.3em;text-transform:uppercase;color:#777A7C}
.mp-genres__inf{font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:#777A7C}

/* --- 05 Music Journeys --- */

.mp-journeys__inner{display:flex;flex-direction:column;gap:clamp(48px,6vw,88px)}
.mp-journeys__grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));
  gap:clamp(32px,4vw,72px);margin:0
}
.mp-journey-card{display:flex;flex-direction:column;gap:20px;transition:opacity 900ms ease}
.mp-card{display:flex;flex-direction:column;gap:var(--space-5)}
.mp-card__media{aspect-ratio:1/1}
.mp-card__body{display:flex;flex-direction:column;gap:var(--space-4)}
.mp-card__head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-4)}
.mp-card__title a{color:inherit}
.mp-card:hover .mp-card__title{color:var(--wp--preset--color--text-primary)}
.mp-card:hover .mp-metatag.is-genre .mp-metatag__value{color:#FFC677}
.mp-card__actions{display:flex;flex-wrap:wrap;gap:clamp(16px,2vw,28px);align-items:center}
.mp-card__links{
  display:flex;flex-wrap:wrap;gap:24px;border-top:1px solid rgba(241,239,234,.08);
  padding-top:16px;font-size:.73rem;letter-spacing:.22em;text-transform:uppercase
}

/* --- 07 About --- */

.mp-about__grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));
  gap:clamp(40px,6vw,96px);align-items:center
}
.mp-about__media{aspect-ratio:4/5}
.mp-about__body{display:flex;flex-direction:column;gap:clamp(20px,2.5vw,32px)}
.mp-about__title{
  margin:0;font-family:var(--wp--preset--font-family--display);font-weight:200;
  font-size:clamp(1.6rem,3.4vw,2.75rem);line-height:1.16;letter-spacing:.04em;
  text-transform:uppercase;color:#F1EFEA
}
.mp-about__text{
  margin:0;max-width:56ch;font-size:clamp(1rem,1.3vw,1.0625rem);line-height:1.75;color:#B9B8B3
}
.mp-about__meta{
  display:flex;flex-wrap:wrap;gap:24px;
  font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:#777A7C
}

/* --- 08 Listener Voices --- */

.mp-voices__inner{
  max-width:1100px;display:flex;flex-direction:column;gap:clamp(40px,5vw,72px)
}
.mp-voice{display:flex;flex-direction:column;gap:var(--space-5);max-width:var(--measure);margin:0}
.mp-voice::before{content:none}
.mp-voice__rule{width:32px;height:1px;background:var(--mp-border-active)}
.mp-voice__quote{
  margin:0;font-family:var(--wp--preset--font-family--display);font-weight:300;font-style:normal;
  font-size:clamp(1.25rem,2.2vw,1.875rem);line-height:1.45;letter-spacing:.01em;color:#F1EFEA
}
.mp-voice__by{
  margin:0;display:flex;flex-wrap:wrap;gap:14px;align-items:baseline;
  font-size:.73rem;letter-spacing:.2em;text-transform:uppercase
}
.mp-voice__author{color:#FFC677}
.mp-voice__source{color:#777A7C}

/* --- 09 Connect --- */

.mp-connect__grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));
  gap:clamp(40px,6vw,96px);align-items:start
}
.mp-connect__intro{display:flex;flex-direction:column;gap:24px}
.mp-connect__note{margin:0;max-width:44ch;font-size:.8rem;line-height:1.7;color:#777A7C}
.mp-connect__lists{display:flex;flex-direction:column;gap:clamp(28px,3vw,44px)}
.mp-connect__group{display:flex;flex-direction:column;gap:12px}
.mp-connect__tier{font-size:.73rem;letter-spacing:.3em;text-transform:uppercase;color:#777A7C;margin:0}
.mp-connect__tier.is-primary{color:#FFC677}
.mp-stat{
  display:flex;align-items:center;gap:var(--space-5);min-height:56px;padding:16px 0;
  border-top:1px solid var(--mp-border-rest);background:none;
  transition:border-color 480ms var(--mp-ease),transform 480ms var(--mp-ease)
}
.mp-stat:hover{border-top-color:var(--mp-border-active);transform:translateX(2px)}
.mp-stat__mark{height:20px;width:auto;flex:none;opacity:.86}
.mp-stat:hover .mp-stat__mark{opacity:1}
.mp-stat__text{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1 1 auto}
.mp-stat__handle{
  font-size:.75rem;letter-spacing:.2em;text-transform:uppercase;line-height:1.35;
  color:var(--wp--preset--color--text-secondary)
}
.mp-stat:hover .mp-stat__handle{color:#FFC677}
.mp-stat__meta{font-size:.75rem;letter-spacing:.18em;text-transform:uppercase;color:#777A7C}
.mp-stat__count{display:flex;flex-direction:column;align-items:flex-end;gap:2px;margin-left:auto;text-align:right}
.mp-stat__num{
  font-family:var(--wp--preset--font-family--display);font-weight:300;
  font-size:clamp(1.1rem,1.6vw,1.4rem);color:#F1EFEA
}
.mp-stat__label{font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:#777A7C}
.mp-srow{
  display:flex;gap:16px;align-items:baseline;justify-content:space-between;padding:16px 0;
  border-bottom:1px solid var(--mp-border-rest);color:#B9B8B3
}
.mp-srow:hover{color:#F1EFEA}
.mp-srow__name{font-size:.73rem;letter-spacing:.22em;text-transform:uppercase}
.mp-srow__note{display:inline-flex;align-items:center;gap:12px;font-size:.75rem;color:#777A7C;text-align:right}
.mp-connect__asof{font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:#777A7C}

/* --- 10 Artist Appreciation --- */

.mp-appreciation{
  padding:clamp(80px,10vw,160px) clamp(20px,5vw,64px);text-align:center;
  background:radial-gradient(ellipse at 50% 120%,rgba(255,198,119,.10) 0%,rgba(8,9,10,0) 62%)
}
.mp-appreciation__inner{
  max-width:900px;display:flex;flex-direction:column;gap:clamp(28px,4vw,44px);align-items:center
}
.mp-appreciation__rule{
  width:56px;height:1px;
  background:linear-gradient(90deg,rgba(255,198,119,0),rgba(255,198,119,.7),rgba(255,198,119,0))
}
.mp-appreciation__text{
  margin:0;font-family:var(--wp--preset--font-family--signature);font-style:italic;font-weight:300;
  font-size:clamp(1.35rem,3.2vw,2.4rem);line-height:1.4;color:#F3CBA6
}
.mp-appreciation__sig{
  font-family:var(--wp--preset--font-family--display);
  font-size:.7rem;letter-spacing:.34em;text-transform:uppercase;color:#927B55
}

/* --- 11 Footer --- */

.mp-footer{
  border-top:1px solid var(--mp-border-rest);background:none;
  padding:clamp(48px,6vw,72px) clamp(20px,5vw,64px) clamp(36px,4vw,48px)
}
.mp-footer__inner{display:flex;flex-direction:column;gap:clamp(32px,4vw,48px)}
.mp-footer__top{
  display:flex;flex-wrap:wrap;gap:clamp(28px,4vw,64px);justify-content:space-between;align-items:flex-end
}
.mp-footer__brand{display:flex;flex-direction:column;gap:12px}
.mp-footer__tagline{
  font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;color:#777A7C
}
.mp-footer__links{
  display:flex;flex-wrap:wrap;gap:clamp(18px,2.5vw,32px);align-items:center;margin-left:auto
}
.mp-footer__links a,.mp-footer__consent{
  font-family:var(--wp--preset--font-family--text);
  font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:#777A7C;min-height:auto
}
.mp-footer__links a:hover,.mp-footer__consent:hover{color:#C7A96B}
.mp-footer__bottom{
  display:flex;flex-wrap:wrap;gap:clamp(20px,3vw,48px);justify-content:space-between;align-items:baseline;
  border-top:1px solid rgba(241,239,234,.06);padding-top:clamp(20px,3vw,32px)
}
.mp-footer__clause{margin:0;max-width:70ch;font-size:.82rem;line-height:1.75;color:#B9B8B3}
.mp-footer__copy{font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:#777A7C;white-space:nowrap}

/* --- Global Player --- */

.mp-player{
  background:rgba(13,15,17,.94);border-top:1px solid rgba(255,198,119,.22);z-index:70
}
.mp-player__bar{padding:10px clamp(14px,3vw,28px);gap:clamp(12px,2vw,24px)}
.mp-player__label{font-size:.73rem;letter-spacing:.3em;color:#777A7C}
.mp-player__title{
  font-family:var(--wp--preset--font-family--display);font-weight:300;
  font-size:clamp(.88rem,1.3vw,1rem);letter-spacing:.06em
}

@media (max-width:820px){
  .mp-featured__grid,.mp-about__grid,.mp-connect__grid{grid-template-columns:1fr}
  .mp-doors__frame{aspect-ratio:16/9;max-height:none}
  .mp-footer__links{margin-left:0}
}

/* =========================================================
   28. Nachbesserungen
   ========================================================= */

/* Connect: der Kasten kam von einer alten Regel, die dem Raster
   Hintergrund und Rahmen gab. Das Designsystem zeigt nur Haarlinien. */
.mp-connect__grid{background:none;border:0;gap:clamp(40px,6vw,96px)}
.mp-connect__lists .mp-channels{background:none;border:0}
.mp-connect .mp-channel{background:none;border:0;padding:0;min-height:auto}

/* Player: vor dem Klick 16:10 als Vorschau, nach dem Laden das echte
   Format. Der Rahmen schnitt das Video sonst oben und unten ab. */
.mp-doors__frame[data-loaded="true"]{aspect-ratio:auto;max-height:none;border-radius:8px}
.mp-doors__frame[data-loaded="true"] .mp-embed__slot{display:block}
.mp-doors__frame iframe{display:block;width:100%;border:0}

/* =========================================================
   29. Navigation aus dem Theme
   ========================================================= */

.mp-nav__list{
  display:flex;align-items:center;gap:clamp(20px,2.4vw,36px);
  list-style:none;margin:0;padding:0
}
.mp-nav__list a{
  position:relative;display:inline-block;padding:6px 0;
  font-family:var(--wp--preset--font-family--text);
  font-size:.73rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--wp--preset--color--text-secondary)
}
.mp-nav__list a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:#FFC677;
  transform:scaleX(0);transform-origin:left;transition:transform 480ms var(--mp-ease)
}
.mp-nav__list a:hover{color:#FFC677}
.mp-nav__list a:hover::after{transform:scaleX(1)}

.mp-nav__burger{
  display:none;width:44px;height:44px;padding:0;border:0;background:none;cursor:pointer;
  position:relative;z-index:90
}
.mp-nav__burger span{
  position:absolute;left:11px;width:22px;height:1px;background:var(--wp--preset--color--text-primary);
  transition:transform 480ms var(--mp-ease),opacity 240ms var(--mp-ease)
}
.mp-nav__burger span:first-child{top:19px}
.mp-nav__burger span:last-child{top:25px}
.mp-nav[data-open="true"] .mp-nav__burger span:first-child{transform:translateY(3px) rotate(45deg)}
.mp-nav[data-open="true"] .mp-nav__burger span:last-child{transform:translateY(-3px) rotate(-45deg)}

@media (max-width:820px){
  .mp-nav__burger{display:block}
  .mp-nav__list{
    position:fixed;inset:0;z-index:80;
    flex-direction:column;justify-content:center;align-items:center;gap:var(--space-7);
    background:rgba(5,8,20,.98);
    opacity:0;pointer-events:none;transition:opacity 480ms var(--mp-ease)
  }
  .mp-nav[data-open="true"] .mp-nav__list{opacity:1;pointer-events:auto}
  .mp-nav__list a{
    font-family:var(--wp--preset--font-family--display);font-weight:200;
    font-size:clamp(1.6rem,7vw,2.4rem);letter-spacing:.12em;color:var(--wp--preset--color--text-primary)
  }
}

/* =========================================================
   30. Header-Wortmarke und Nachbesserungen
   ========================================================= */

.mp-lockup{display:inline-flex;align-items:center;gap:14px;color:inherit}
.mp-lockup__mark{
  height:clamp(26px,2.6vw,34px);width:auto;display:block;
  transition:opacity 480ms var(--mp-ease)
}
.mp-lockup__word{
  font-family:var(--wp--preset--font-family--display);font-weight:300;
  font-size:clamp(.78rem,1.1vw,.95rem);letter-spacing:.32em;text-transform:uppercase;
  color:var(--wp--preset--color--text-primary);white-space:nowrap
}
a.mp-lockup:hover .mp-lockup__mark{opacity:.82}
a.mp-lockup:hover .mp-lockup__word{color:#FFC677}

.mp-lang__item.is-off{color:#4E5254;cursor:default}

/* Vorschau des Players im Format der Vorlage */
.mp-doors__frame{aspect-ratio:16/9;max-height:none}

/* Der Header traegt die Marke links, Navigation und Sprache rechts */
.mp-header__right{gap:clamp(20px,3vw,44px)}

@media (max-width:820px){
  .mp-lockup__word{letter-spacing:.24em}
  .mp-header__right{gap:16px}
}

/* =========================================================
   31. Header ausgewogen, Hamburger, Player-Puls
   ========================================================= */

/* Der Header lief noch in der Contentbreite. Die Marke gehoert an den
   linken Rand, Navigation und Sprache an den rechten. */
.mp-header > .wp-block-group{max-width:none;margin-inline:0;width:100%}
.mp-header__inner{
  display:flex;align-items:center;justify-content:space-between;
  width:100%;padding-inline:var(--gutter);gap:var(--space-6)
}
.mp-header__right{display:flex;align-items:center;gap:clamp(20px,3vw,44px)}
.mp-nav{display:flex;align-items:center}
.mp-nav__list{align-items:center}
.mp-lang{line-height:1}

/* Hamburger: zwei Striche, die sich zum Kreuz drehen */
.mp-nav__burger{
  width:44px;height:44px;border:0;background:none;cursor:pointer;position:relative;z-index:90
}
.mp-nav__burger span{
  position:absolute;left:10px;width:24px;height:1px;border-radius:1px;
  background:var(--wp--preset--color--text-primary);
  transition:transform 480ms var(--mp-ease),width 480ms var(--mp-ease),background 240ms var(--mp-ease)
}
.mp-nav__burger span:first-child{top:18px}
.mp-nav__burger span:last-child{top:26px;width:16px}
.mp-nav__burger:hover span{background:#FFC677}
.mp-nav[data-open="true"] .mp-nav__burger span:first-child{transform:translateY(4px) rotate(45deg);background:#FFC677}
.mp-nav[data-open="true"] .mp-nav__burger span:last-child{transform:translateY(-4px) rotate(-45deg);width:24px;background:#FFC677}

/* Der Global Player zeigt, dass er laeuft: ruhiger Puls auf dem Cover
   und eine Linie, die atmet. Kein Blinken, das waere zu laut. */
.mp-player__cover{position:relative;transition:box-shadow 900ms var(--mp-ease)}
.mp-player[data-playing="true"] .mp-player__cover{
  box-shadow:0 0 0 1px rgba(255,198,119,.55);
  animation:mp-cover-pulse 2600ms var(--mp-ease) infinite
}
@keyframes mp-cover-pulse{
  0%,100%{box-shadow:0 0 0 1px rgba(255,198,119,.5),0 0 0 0 rgba(255,198,119,.28)}
  55%{box-shadow:0 0 0 1px rgba(255,198,119,.8),0 0 0 10px rgba(255,198,119,0)}
}
.mp-player[data-playing="true"] .mp-player__label{color:#FFC677}
.mp-player[data-playing="true"] .mp-player__play{
  border-color:var(--mp-border-active);color:#FFC677;background:rgba(199,169,107,.10)
}
@media (prefers-reduced-motion:reduce){
  .mp-player[data-playing="true"] .mp-player__cover{animation:none}
}

/* =========================================================
   32. Rechtsseiten nach Vorlage
   Quelle: prototype/Impressum.dc.html und Datenschutz.dc.html
   ========================================================= */

.mp-page{padding:clamp(48px,7vw,104px) clamp(20px,5vw,64px) clamp(64px,8vw,120px)}
body.admin-bar .mp-page{padding-top:clamp(80px,8vw,136px)}

.mp-legal-page .mp-page__title{display:none}
.mp-legal-page .mp-page > *,
.mp-legal-page .mp-page .wp-block-post-content > *{
  max-width:880px;margin-inline:auto
}

.mp-legal__head{display:flex;flex-direction:column;gap:16px;margin-bottom:clamp(32px,4vw,56px)}
.mp-legal__title{
  margin:0;font-family:var(--wp--preset--font-family--display);font-weight:200;
  font-size:clamp(1.9rem,4.6vw,3.25rem);line-height:1.1;letter-spacing:.06em;
  text-transform:uppercase;color:var(--wp--preset--color--text-primary)
}
.mp-legal__meta{
  font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:#777A7C
}

/* Die Abschnitte kommen als Kernbloecke aus dem Import. Jede Ueberschrift
   beginnt einen Abschnitt, darum traegt sie die Linie und den Abstand. */
.mp-legal-page .wp-block-post-content h2{
  margin:clamp(32px,4vw,56px) 0 0;padding-top:clamp(24px,3vw,36px);
  border-top:1px solid var(--mp-border-rest);
  font-family:var(--wp--preset--font-family--display);font-weight:300;
  font-size:clamp(1.05rem,1.8vw,1.35rem);letter-spacing:.1em;text-transform:uppercase;
  color:var(--wp--preset--color--text-primary)
}
.mp-legal-page .wp-block-post-content h2 + p{margin-top:14px}
.mp-legal-page .wp-block-post-content p{
  margin:14px auto 0;max-width:62ch;font-size:1rem;line-height:1.75;
  color:var(--wp--preset--color--text-secondary)
}
.mp-legal-page .wp-block-post-content ul{
  display:flex;flex-wrap:wrap;gap:10px 28px;list-style:none;
  margin:14px auto 0;padding:4px 0;max-width:880px
}
.mp-legal-page .wp-block-post-content li{
  position:relative;padding-left:14px;
  font-size:.9rem;line-height:1.7;color:var(--wp--preset--color--text-secondary)
}
.mp-legal-page .wp-block-post-content li::before{
  content:"·";position:absolute;left:0;color:var(--wp--preset--color--gold)
}
.mp-legal-page .wp-block-post-content a{color:var(--wp--preset--color--text-secondary)}
.mp-legal-page .wp-block-post-content a:hover{color:var(--wp--preset--color--gold)}

/* =========================================================
   33. Mobile und Tablet nach der Designvorlage
   Haltepunkte des Systems: --bp-tablet 900px, --bp-mobile 600px,
   Navigation wechselt bei 820px. Die Werte stammen aus
   tokens/spacing.css und dem Kopfbereich der Vorlage.
   ========================================================= */

/* --- Navigation: Wechsel bei 820px --- */

.mp-menu{display:none}
.mp-nav__burger{display:none}

@media (max-width:820px){
  .mp-nav__list{display:none}
  .mp-header__right > .mp-lang{display:none}
  .mp-nav__burger{display:grid;place-items:center}

  .mp-header__inner{padding:14px clamp(16px,4vw,24px)}
  .mp-lockup__mark{height:28px}
  .mp-lockup__word{font-size:.78rem;letter-spacing:.26em}

  /* Der Knopf traegt einen Rahmen, wie in der Vorlage */
  .mp-nav__burger{
    width:48px;height:48px;border:1px solid rgba(241,239,234,.14);border-radius:2px;
    background:transparent;padding:0
  }
  .mp-nav__burger span{left:12px;width:24px}
  .mp-nav__burger span:first-child{top:21px}
  .mp-nav__burger span:last-child{top:27px;width:16px}
  .mp-nav[data-open="true"] .mp-nav__burger span:first-child{transform:translateY(3px) rotate(45deg)}
  .mp-nav[data-open="true"] .mp-nav__burger span:last-child{transform:translateY(-3px) rotate(-45deg);width:24px}

  .mp-menu{
    position:fixed;inset:0;z-index:59;display:flex;flex-direction:column;justify-content:center;
    gap:clamp(24px,5vh,44px);
    padding:96px clamp(24px,6vw,48px) calc(var(--mp-player-h,88px) + 32px);
    background:rgba(5,8,20,.97);backdrop-filter:blur(18px);
    opacity:0;pointer-events:none;transition:opacity 480ms var(--mp-ease)
  }
  .mp-menu[data-open="true"]{opacity:1;pointer-events:auto}
  .mp-menu__item{
    font-family:var(--wp--preset--font-family--display);font-weight:200;
    font-size:clamp(1.75rem,8vw,2.75rem);letter-spacing:.1em;text-transform:uppercase;
    color:var(--wp--preset--color--text-primary)
  }
  .mp-menu__item:hover{color:#FFC677}
  .mp-menu__foot{
    display:flex;flex-wrap:wrap;gap:20px;align-items:center;
    border-top:1px solid rgba(241,239,234,.10);padding-top:clamp(20px,4vh,32px)
  }
  .mp-menu__foot a{font-size:.73rem;letter-spacing:.22em;text-transform:uppercase}
}

/* --- Tablet: eine Spalte ab 900px, wo zwei zu eng werden --- */

@media (max-width:900px){
  .mp-featured__grid,.mp-about__grid,.mp-connect__grid,.mp-archive__grid{grid-template-columns:1fr}
  .mp-featured__media,.mp-about__media{max-width:520px}
  .mp-journeys__grid{gap:clamp(40px,6vw,64px)}
  .mp-voices__inner{max-width:none}
}

/* --- Mobile: 600px und darunter --- */

@media (max-width:600px){
  .mp-hero{padding-top:76px;min-height:clamp(440px,calc(100svh - var(--mp-player-h,88px) - 64px),700px)}
  .mp-hero__row{flex-direction:column;align-items:flex-start;gap:12px}
  .mp-hero__lockup{flex-wrap:wrap;gap:10px}
  .mp-hero__lockup .mp-eyebrow{white-space:normal}
  .mp-hero__genres{font-size:.68rem;letter-spacing:.22em}
  .mp-hero__actions{gap:14px}
  .mp-hero__actions .mp-btn{min-width:0;flex:1 1 132px;justify-content:center}
  .mp-hero__right{width:100%;justify-content:space-between;margin-left:0}
  .mp-hero__dots{gap:10px}
  .mp-hero__dot{width:14px}
  .mp-hero__dot.is-active{width:32px}

  .mp-featured__actions{gap:16px}
  .mp-featured__tracks{flex-basis:100%}

  .mp-doors__frame{aspect-ratio:16/9;border-radius:6px}
  .mp-embed__hint{font-size:.64rem;letter-spacing:.22em}
  .mp-row{padding:14px 0;gap:6px 12px}
  .mp-row__left{flex:1 1 100%}
  .mp-row__right{width:100%;justify-content:space-between}
  .mp-row__num{width:22px}

  .mp-genres__grid{grid-template-columns:1fr}
  .mp-genre{min-height:0;padding:22px clamp(18px,5vw,24px)}
  .mp-genres__foot{flex-direction:column;align-items:flex-start;gap:20px}

  .mp-card__head{flex-direction:column;align-items:flex-start;gap:8px}
  .mp-card__links{gap:14px 20px}

  .mp-about__media{max-width:none}
  .mp-about__meta{gap:14px}

  .mp-stat{gap:16px}
  .mp-stat__num{font-size:1.1rem}
  .mp-srow{flex-wrap:wrap;gap:6px}
  .mp-srow__note{margin-left:0;text-align:left;width:100%}

  .mp-footer__top,.mp-footer__bottom{flex-direction:column;align-items:flex-start;gap:24px}
  .mp-footer__links{margin-left:0;gap:16px}

  .mp-legal-page .wp-block-post-content ul{flex-direction:column;gap:8px}

  /* Die Player-Leiste bleibt bedienbar: Titel, Knopf, Fortschritt darunter */
  .mp-player__bar{gap:12px}
  .mp-player__cover{width:44px;height:44px}
  .mp-player__title{max-width:52vw}
  .mp-player__progress{order:5;flex-basis:100%;min-width:0}
  .mp-player__play{width:44px;height:44px}
  .mp-player__slot iframe{height:120px}
}

/* Sehr schmale Geraete: der Player darf die halbe Seite nicht schlucken */
@media (max-width:380px){
  .mp-player__bar{padding:8px 14px}
  .mp-player__title{max-width:44vw;font-size:.82rem}
  .mp-btn{padding:12px 18px}
}

/* =========================================================
   34. Mobile, zweiter Durchgang
   Geprueft an echten Geraeteaufnahmen, nicht am Gerätemodus des
   Browsers. Die Punkte hier kamen alle aus dem Praxistest.
   ========================================================= */

@media (max-width:820px){

  /* Der Kopf war doppelt gepolstert: aussen 18px, innen 14px.
     Dazu lief der Sprachumschalter aus dem Bild. */
  .mp-header{padding-block:0;background:rgba(8,9,10,.55);backdrop-filter:blur(10px)}
  html[data-mp-scrolled="true"] .mp-header{background:rgba(8,9,10,.92)}
  .mp-header__inner{padding:12px clamp(16px,4vw,24px);gap:12px}
  .mp-header__right{gap:0;margin-left:auto}
  .mp-header__right .mp-lang,
  .mp-header__right p:has(.mp-lang){display:none}
  .mp-header p{margin:0}

  /* Der Hamburger: drei Striche im Rahmen, beim Oeffnen ein goldenes Kreuz. */
  .mp-nav__burger{
    display:grid;place-items:center;width:46px;height:46px;
    border:1px solid rgba(241,239,234,.18);border-radius:2px;background:transparent;position:relative
  }
  .mp-nav__burger span{
    position:absolute;left:13px;width:20px;height:1.5px;border-radius:2px;
    background:var(--wp--preset--color--text-primary);
    transition:transform 480ms var(--mp-ease),opacity 240ms var(--mp-ease),
               width 480ms var(--mp-ease),background 240ms var(--mp-ease)
  }
  .mp-nav__burger span:nth-child(1){top:16px}
  .mp-nav__burger span:nth-child(2){top:22px;width:14px}
  .mp-nav__burger span:nth-child(3){top:28px}

  .mp-nav[data-open="true"] .mp-nav__burger{border-color:var(--mp-border-active)}
  .mp-nav[data-open="true"] .mp-nav__burger span{background:#FFC677}
  .mp-nav[data-open="true"] .mp-nav__burger span:nth-child(1){top:22px;transform:rotate(45deg)}
  .mp-nav[data-open="true"] .mp-nav__burger span:nth-child(2){opacity:0;width:0}
  .mp-nav[data-open="true"] .mp-nav__burger span:nth-child(3){top:22px;transform:rotate(-45deg)}

  /* Das offene Menue liegt ueber dem Kopf, der Knopf bleibt bedienbar. */
  .mp-menu{z-index:59}
  .mp-header{z-index:70}
  .mp-menu__foot .mp-lang{display:inline-flex}
}

@media (max-width:600px){

  /* Hero: das Bildmotiv traegt die Wortmarke selbst. Darum unten mehr
     Dunkelheit, damit unsere Zeilen nicht in der Grafik liegen. */
  .mp-hero{min-height:calc(100svh - var(--mp-player-h,88px) - 24px);padding-top:72px}
  .mp-hero__slide{object-position:50% 38%}
  .mp-hero__scrim{
    background:linear-gradient(180deg,rgba(5,8,20,.55) 0%,rgba(5,8,20,.05) 26%,
      rgba(8,9,10,.42) 54%,rgba(8,9,10,.88) 74%,rgba(8,9,10,.99) 90%,#08090A 100%)
  }
  .mp-hero__inner{gap:18px;padding-bottom:20px}

  /* Studio und Club waren nicht zu treffen: der Regler teilte sich die
     Zeile mit den Strichen und wurde auf wenige Pixel gequetscht. */
  .mp-hero__right{
    flex-direction:column;align-items:stretch;gap:14px;width:100%;
    border:0;padding:0
  }
  .mp-mode{width:100%;border:1px solid rgba(241,239,234,.14);padding:4px}
  .mp-mode__opt{flex:1 1 0;min-height:44px;padding:10px 12px;text-align:center}
  .mp-hero__dots{justify-content:flex-start;gap:12px}

  /* Archiv: flex:1 1 200px wird in einer Spalte zur Hoehe von 200px.
     Das waren die grossen Luecken zwischen den Zeilen. */
  .mp-archive__row{flex-direction:column;align-items:flex-start;gap:8px;padding:14px 0}
  .mp-archive__title{flex:0 0 auto;width:100%}
  .mp-archive__meta{flex:0 0 auto}
  .mp-archive__links{width:100%;gap:20px}
  .mp-archive__links .mp-btn{padding-block:6px}

  /* Dieselbe Falle an den uebrigen Stellen gleich mit entschaerft. */
  .mp-row__left{flex:0 0 auto;width:100%}
  .mp-stat__text{flex:0 0 auto}
  .mp-player__progress{flex:0 0 auto;width:100%}
  .mp-player__text{flex:1 1 auto;min-width:0}
}

/* =========================================================
   35. Bedienqualitaet auf Touch-Geraeten
   ========================================================= */

@media (hover:none){
  /* Auf dem Handy gibt es kein Ueberfahren. Hover-Zustaende, die dort
     haengenbleiben, werden zu Fehlzustaenden. */
  .mp-artwork:hover .mp-artwork__img,
  .mp-card:hover .mp-artwork__img{transform:none}
  .mp-btn:hover{transform:none}
  .mp-stat:hover{transform:none}

  /* Dafuer eine kurze Rueckmeldung beim Antippen. */
  .mp-btn:active,.mp-row:active,.mp-genre:active,.mp-stat:active,
  .mp-srow:active,.mp-menu__item:active{opacity:.72}
}

html{-webkit-text-size-adjust:100%}
body{-webkit-tap-highlight-color:rgba(255,198,119,.14);overscroll-behavior-y:none}

/* Jedes Ziel mindestens 44 Pixel hoch, das ist die Untergrenze fuer den Daumen. */
.mp-row,.mp-more,.mp-genre,.mp-stat,.mp-srow,.mp-doors__tab,
.mp-nav__list a,.mp-menu__item,.mp-footer__links a,.mp-footer__consent,
.mp-lang__item,.mp-card__links a,.mp-doors__profile{min-height:44px}
.mp-lang__item,.mp-card__links a,.mp-doors__profile,.mp-footer__links a{
  display:inline-flex;align-items:center
}

/* Kein seitliches Wegrutschen durch zu lange Zeilen. */
.mp-row__title,.mp-card__title,.mp-stat__handle,.mp-srow__name{overflow-wrap:anywhere}

/* Der sichere Bereich unten: iPhones mit Streifen schneiden sonst ab. */
.mp-player__bar{padding-bottom:max(10px,env(safe-area-inset-bottom,0px))}
.mp-menu{padding-bottom:calc(var(--mp-player-h,88px) + 32px + env(safe-area-inset-bottom,0px))}

/* Formularfelder nie unter 16px, sonst zoomt iOS beim Antippen hinein. */
@media (max-width:820px){
  .wpcf7 input,.wpcf7 textarea,.wpcf7 select{font-size:16px}
}

/* Sprungziele: der feste Kopf ist auf dem Handy niedriger. */
@media (max-width:820px){
  .mp-featured,.mp-doors,.mp-genres,.mp-journeys,.mp-archive,
  .mp-about,.mp-voices,.mp-connect{scroll-margin-top:78px}
}

/* =========================================================
   36. Korrektur: die Seite war breiter als das Fenster
   Ursache: der Blockeditor legt links und rechts eine Polsterung auf
   die gesamte Seite (Root Padding). Meine randlosen Sektionen haben
   mit 100vw und einer Verschiebung um die halbe Breite gerechnet.
   Diese halbe Polsterung kam oben drauf, und die Seite wurde ein Stueck
   breiter als das Fenster. Auf dem Desktop faellt das kaum auf, auf dem
   Handy schneidet es rechts alles ab und laesst die Leiste hinauslaufen.

   Loesung: keine Polsterung auf Seitenebene. Jede Sektion bringt ihren
   eigenen Rand mit, so wie in der Designvorlage.
   ========================================================= */

html,body{max-width:100%;overflow-x:clip}

body .wp-site-blocks{padding-left:0;padding-right:0}
body .wp-site-blocks > *{margin-inline:0}

/* Keine Verschiebung mehr, keine 100vw-Rechnung. */
.mp-hero,.mp-footer{
  position:relative;left:auto;right:auto;transform:none;
  width:auto;max-width:none;margin-inline:0
}

/* Jede Sektion traegt ihren Rand selbst: clamp(20px,5vw,64px). */
.mp-featured,.mp-doors,.mp-genres,.mp-journeys,.mp-archive,
.mp-about,.mp-voices,.mp-connect,.mp-appreciation,.mp-line{
  padding-inline:var(--gutter)
}
.mp-hero{padding-inline:0}
.mp-hero__inner{padding-inline:var(--gutter)}
.mp-footer{padding-inline:var(--gutter)}

/* Die flaechigen Hintergruende bleiben randlos, sie liegen hinter dem Inhalt. */
.mp-genres::before,.mp-about::before,.mp-connect::before{
  left:calc(50% - 50vw);width:100vw
}

/* Feste Elemente richten sich am Fenster aus, nicht am Inhalt. */
.mp-player,.mp-menu,.mp-header{left:0;right:0;width:auto;max-width:100%}
.mp-header__inner,.mp-player__bar,.mp-footer__inner{max-width:1320px;margin-inline:auto}

/* Bilder und Einbettungen brechen nie aus. */
img,iframe,video{max-width:100%}
.mp-embed,.mp-doors__frame{max-width:100%}

/* =========================================================
   37. Der Hauptbereich gibt keine Breite mehr vor
   Die Sektionen laufen ueber die volle Breite und begrenzen ihren
   Inhalt selbst auf 1320px. Vorher hat der Hauptbereich sie auf
   1320px eingesperrt, und der Hero stand als Kasten in der Mitte.
   ========================================================= */

.mp-main{max-width:none;width:100%;margin:0}
.mp-main > *{max-width:none;margin-inline:0}

/* Journey-Detail und normale Seiten brauchen weiterhin eine Textbreite. */
.mp-journey__head{
  max-width:1320px;margin-inline:auto;padding:0 var(--gutter);
  display:flex;flex-direction:column;gap:var(--space-6)
}
.mp-journey{padding-top:clamp(96px,10vw,140px);padding-bottom:clamp(48px,6vw,96px)}
.mp-journey .wp-block-post-featured-image{max-width:560px}
.mp-journey .wp-block-post-title{margin:0}

.mp-page{max-width:none}
.mp-page > *{max-width:1320px;margin-inline:auto}

/* =========================================================
   38. Archiv: Inhalt wieder auf Contentbreite, Spalten getauscht
   Das Raster stand nicht in der Liste der Sektionen, die ihren Inhalt
   auf 1320px begrenzen. Darum lief es ueber die volle Fensterbreite
   und die beiden Spalten standen weit auseinander.
   ========================================================= */

.mp-archive__grid,.mp-journeys__grid,.mp-voices__grid,.mp-genres__grid{
  max-width:1320px;margin-inline:auto
}
.mp-archive__grid{align-items:start;gap:clamp(40px,5vw,80px)}

/* Text links, Player rechts. */
@media (min-width:901px){
  .mp-archive__grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .mp-archive__body{order:1}
  .mp-archive__player{order:2}
}
@media (max-width:900px){
  .mp-archive__body{order:1}
  .mp-archive__player{order:2}
}

/* =========================================================
   39. Mobiles Menue: Ueberlauf behoben, mehr Einstiege
   Ein zentrierter Flexbereich, dessen Inhalt hoeher ist als das Fenster,
   schiebt den Anfang nach oben aus dem Bild, und dorthin kann man nicht
   scrollen. Deshalb jetzt ein innerer Block mit automatischem Rand: er
   zentriert, solange Platz ist, und laesst sonst scrollen.
   ========================================================= */

@media (max-width:820px){
  .mp-menu{
    display:flex;flex-direction:column;justify-content:flex-start;
    overflow-y:auto;-webkit-overflow-scrolling:touch;
    padding:0;gap:0
  }
  .mp-menu__inner{
    width:100%;margin:auto 0;display:flex;flex-direction:column;
    gap:clamp(14px,2.4vh,24px);
    padding:calc(72px + env(safe-area-inset-top,0px)) clamp(24px,6vw,48px)
            calc(var(--mp-player-h,88px) + 28px + env(safe-area-inset-bottom,0px))
  }

  .mp-menu__item{
    display:flex;align-items:baseline;gap:16px;
    padding-block:6px;border-bottom:1px solid rgba(241,239,234,.07);
    opacity:0;transform:translateY(10px);
    transition:opacity 520ms var(--mp-ease),transform 520ms var(--mp-ease),color 240ms var(--mp-ease)
  }
  .mp-menu[data-open="true"] .mp-menu__item{
    opacity:1;transform:none;transition-delay:calc(90ms + var(--mp-i) * 55ms)
  }
  .mp-menu__num{
    flex:none;width:26px;font-family:var(--wp--preset--font-family--text);
    font-size:.7rem;letter-spacing:.2em;color:var(--wp--preset--color--gold)
  }
  .mp-menu__label{
    flex:1 1 auto;font-family:var(--wp--preset--font-family--display);font-weight:200;
    font-size:clamp(1.5rem,6.4vw,2.25rem);letter-spacing:.08em;text-transform:uppercase;
    color:var(--wp--preset--color--text-primary);line-height:1.15
  }
  .mp-menu__arrow{flex:none;color:var(--wp--preset--color--text-muted);font-size:1rem}
  .mp-menu__item:active .mp-menu__label,
  .mp-menu__item:active .mp-menu__arrow{color:#FFC677}

  .mp-menu__foot{
    display:flex;flex-wrap:wrap;gap:18px;align-items:center;margin-top:10px;
    border-top:1px solid rgba(241,239,234,.10);padding-top:clamp(16px,3vh,28px);
    opacity:0;transition:opacity 520ms var(--mp-ease) 380ms
  }
  .mp-menu[data-open="true"] .mp-menu__foot{opacity:1}
  .mp-menu__foot a{font-size:.73rem;letter-spacing:.22em;text-transform:uppercase;color:#777A7C}
}

/* Sehr niedrige Fenster, etwa quer gehaltene Handys */
@media (max-width:820px) and (max-height:520px){
  .mp-menu__label{font-size:1.25rem}
  .mp-menu__inner{gap:8px;padding-top:64px}
}

@media (prefers-reduced-motion:reduce){
  .mp-menu__item{opacity:1;transform:none;transition:none}
  .mp-menu__foot{opacity:1;transition:none}
}

/* =========================================================
   40. Kopf, Hero, Knoepfe, laufender Player, Genre-Auswahl
   ========================================================= */

/* Kopfleiste flacher, und alles auf einer Grundlinie.
   Vorher sass DE|EN tiefer als die Menuepunkte. */
.mp-header__inner{padding-block:10px;align-items:center}
.mp-header .mp-nav__list a{padding-block:4px;line-height:1}
.mp-lang{display:inline-flex;align-items:center;gap:8px;line-height:1}
.mp-lang__item{line-height:1;padding-block:4px}
.mp-header__right{align-items:center}
.mp-lockup__mark{height:clamp(24px,2.2vw,30px)}

/* Hero: Bild etwas tiefer ansetzen, damit der Kreis oben ganz bleibt,
   und darunter Luft lassen, statt hart an die naechste Sektion zu stossen. */
.mp-hero__slide{object-position:50% 32%}
.mp-hero{
  min-height:clamp(480px,calc(100svh - var(--mp-player-h,88px) - 120px),820px);
  padding-bottom:clamp(48px,7vh,96px)
}
@media (min-width:1200px){
  .mp-hero__slide{object-position:50% 28%}
}

/* Listen und Watch deutlicher: gefuellter Rahmen, goldene Kante beim Ueberfahren. */
.mp-hero__actions .mp-btn,.mp-featured__actions .mp-btn:not(.mp-btn--text){
  background:rgba(241,239,234,.04);
  border-color:rgba(241,239,234,.22);
  color:var(--wp--preset--color--text-primary);
  letter-spacing:.26em
}
.mp-hero__actions .mp-btn:hover,.mp-featured__actions .mp-btn:not(.mp-btn--text):hover{
  background:rgba(199,169,107,.14);border-color:var(--mp-border-active);color:#FFC677
}

/* Der laufende Player wird sichtbar begleitet. */
.mp-embed[data-playing="true"]{border-color:var(--mp-border-active)}
.mp-embed[data-playing="true"]::after{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,rgba(255,198,119,0),rgba(255,198,119,.9),rgba(255,198,119,0));
  animation:mp-scan 2600ms var(--mp-ease) infinite
}
@keyframes mp-scan{0%{opacity:.25}50%{opacity:1}100%{opacity:.25}}
.mp-row[aria-current="true"] .mp-row__now::before{
  content:"";display:inline-block;width:6px;height:6px;border-radius:999px;
  background:#FFC677;margin-right:8px;vertical-align:middle;
  animation:mp-beat 2600ms ease-in-out infinite
}
@media (prefers-reduced-motion:reduce){
  .mp-embed[data-playing="true"]::after,.mp-row[aria-current="true"] .mp-row__now::before{animation:none}
}

/* Genres: Mehrfachauswahl. Die Karten werden gedimmt, nicht versteckt. */
.mp-journey-card[data-mp-dim="true"]{opacity:.28}
.mp-journey-card[data-mp-dim="false"]{opacity:1}
html[data-mp-genre] .mp-journey-card{opacity:1}
.mp-genre[aria-pressed="true"]{background:#181B1E;box-shadow:inset 2px 0 0 #FFC677}
.mp-genres__foot .mp-btn{border-color:var(--mp-border-rest)}

/* Archiv: der Player sitzt eine Spur tiefer als die Ueberschrift daneben. */
@media (min-width:901px){
  .mp-archive__player{margin-top:20px}
}

/* =========================================================
   41. Der Versatz im Kopf
   WordPress legt um die Ausgabe eines Kurzbefehls einen Absatz.
   Dessen Standardabstand hat Logo und Sprachumschalter gegen die
   Navigation verschoben. Auf dem Handy war das schon aufgehoben,
   auf dem Desktop nicht.
   ========================================================= */

.mp-header p,
.mp-header__inner > p,
.mp-header__right > p{
  margin:0;padding:0;display:flex;align-items:center;line-height:1
}
.mp-header__inner,.mp-header__right{align-items:center}
.mp-nav,.mp-nav__list,.mp-nav__list li{display:flex;align-items:center}
.mp-nav__list li{line-height:1}

/* =========================================================
   42. Navigation und Sprache in einer Zeile
   Der Sprachumschalter steckt jetzt im selben Element wie die
   Navigation. Damit kann WordPress keinen Absatz mehr dazwischen
   legen, und die Grundlinie stimmt ohne Gegenregeln.
   ========================================================= */

.mp-navbar{
  display:flex;align-items:center;gap:clamp(20px,3vw,44px);line-height:1
}
.mp-navbar .mp-nav__list a,.mp-navbar .mp-lang__item{
  display:inline-flex;align-items:center;line-height:1;padding-block:4px;
  font-size:.73rem;letter-spacing:.24em;text-transform:uppercase
}
.mp-navbar .mp-lang{gap:8px}

/* =========================================================
   43. Archiv: Deckblatt wie bei Listen und Watch
   ========================================================= */

.mp-archive__frame{aspect-ratio:16/9;max-height:min(58vh,520px);border-radius:8px}
.mp-archive__frame[data-loaded="true"]{aspect-ratio:auto;max-height:none}

.mp-embed__invite--pair{
  position:absolute;inset:0;z-index:3;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:clamp(16px,2.4vw,28px);padding:clamp(16px,2vw,28px);cursor:default
}
.mp-embed__invite--pair .mp-embed__mark{
  position:static;color:#FFC677;opacity:.9
}
.mp-embed__doors{display:flex;gap:clamp(16px,2.4vw,32px);flex-wrap:wrap;justify-content:center}
.mp-door{
  display:flex;flex-direction:column;align-items:center;gap:10px;
  min-width:120px;min-height:96px;padding:16px 20px;cursor:pointer;
  background:rgba(8,9,10,.55);border:1px solid rgba(241,239,234,.14);border-radius:4px;
  transition:border-color 480ms var(--mp-ease),background 480ms var(--mp-ease),transform 480ms var(--mp-ease)
}
.mp-door:hover{border-color:var(--mp-border-active);background:rgba(8,9,10,.75);transform:translateY(-2px)}
.mp-door__mark{height:22px;width:auto;opacity:.95}
.mp-door__label{
  font-family:var(--wp--preset--font-family--text);
  font-size:.73rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--wp--preset--color--text-secondary)
}
.mp-door:hover .mp-door__label{color:#FFC677}
.mp-embed__invite--pair .mp-embed__hint{
  font-size:.72rem;letter-spacing:.3em;text-transform:uppercase;color:#FFC677;text-align:center
}
.mp-embed[data-loaded="true"] .mp-embed__invite--pair{display:none}

@media (max-width:600px){
  .mp-door{min-width:104px;min-height:84px;padding:12px 14px}
  .mp-door__mark{height:18px}
}

/* =========================================================
   44. Archiv-Rahmen im selben Format wie Watch
   Eine aeltere Regel hielt das Feld quadratisch und war spezifischer
   als die neue. Deshalb lag das Deckblatt im 16:9 auf einem Quadrat.
   ========================================================= */

.mp-archive__player .mp-embed,
.mp-archive__player .mp-archive__frame{
  aspect-ratio:16/9;max-height:min(58vh,520px);border-radius:8px;overflow:hidden
}
.mp-archive__player .mp-embed[data-loaded="true"]{aspect-ratio:auto;max-height:none}
.mp-archive__player .mp-embed__poster{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover
}

/* Listener Voices: die Liste ist ein eigener Block, damit die Auswahl
   ohne Einfluss auf die Ueberschrift geordnet werden kann. */
.mp-voices__list{display:flex;flex-direction:column;gap:clamp(40px,5vw,72px)}
.mp-voices__list .mp-voice[hidden]{display:none}

/* =========================================================
   45. Mobile, dritter Durchgang
   Alles in Medienabfragen. Am Desktop aendert sich nichts.
   ========================================================= */

@media (max-width:820px){

  /* Die Leiste verhaelt sich wie am Desktop: oben durchsichtig, beim
     Scrollen abgedunkelt. Das Bild laeuft darunter hindurch. */
  .mp-header{background:transparent;backdrop-filter:none}
  html[data-mp-scrolled="true"] .mp-header{
    background:rgba(8,9,10,.88);backdrop-filter:blur(12px)
  }

  /* Das Menue liegt jetzt am Dokumentende und deckt alles ab,
     auch die Leiste. */
  .mp-menu{z-index:95}
  .mp-nav__burger{position:relative;z-index:96}

  /* Der Hero beginnt ganz oben, das Motiv reicht unter die Leiste. */
  .mp-hero{padding-top:0}
  .mp-hero__inner{padding-top:0}
}

@media (max-width:600px){

  /* Mehr Ruhe: das Motiv traegt die Wortmarke, unsere Zeilen brauchen
     darunter eine eigene dunkle Zone. */
  .mp-hero{
    min-height:calc(100svh - var(--mp-player-h,88px));
    padding-bottom:clamp(24px,4vh,40px)
  }
  .mp-hero__slide{object-position:50% 30%}
  .mp-hero__scrim{
    background:linear-gradient(180deg,
      rgba(5,8,20,.42) 0%,rgba(5,8,20,.02) 22%,
      rgba(8,9,10,.30) 46%,rgba(8,9,10,.82) 66%,
      rgba(8,9,10,.97) 82%,#08090A 100%)
  }
  .mp-hero__inner{gap:16px}

  .mp-hero__lockup{gap:8px}
  .mp-hero__lockup .mp-eyebrow{font-size:.64rem;letter-spacing:.26em}
  .mp-hero__title{font-size:1.05rem;letter-spacing:.12em}
  .mp-hero__genres{font-size:.62rem;letter-spacing:.18em;line-height:1.9}

  /* Zwei gleich breite Knoepfe, kein Ausbrechen nach rechts.
     Vorher konnten sie durch flex-basis breiter werden als der Platz. */
  .mp-hero__actions{
    display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%;align-items:stretch
  }
  .mp-hero__actions .mp-btn{
    width:100%;min-width:0;justify-content:center;padding:13px 10px;
    font-size:.66rem;letter-spacing:.2em;
    background:rgba(241,239,234,.03);border-color:rgba(241,239,234,.16)
  }
  .mp-hero__actions .mp-btn__arrow{display:none}

  .mp-hero__right{grid-column:1 / -1;width:100%;margin:0;gap:12px}
  .mp-mode{display:grid;grid-template-columns:1fr 1fr;width:100%;padding:3px}
  .mp-mode__opt{min-height:42px;font-size:.66rem;letter-spacing:.2em}
  .mp-hero__note{font-size:.62rem;letter-spacing:.14em;line-height:1.7}
  .mp-hero__dots{gap:10px}
}

/* =========================================================
   46. Mobiles Menue mit Kopfzeile, Hero-Knoepfe, Modus-Regler
   Alles in Medienabfragen. Am Desktop aendert sich nichts.
   ========================================================= */

@media (max-width:820px){

  /* Kopfzeile im Menue: Marke links, Kreuz rechts. Damit bleibt sichtbar,
     wo man ist, und der Weg zurueck ist da, wo er hingehoert. */
  .mp-menu__bar{
    position:sticky;top:0;z-index:2;
    display:flex;align-items:center;justify-content:space-between;
    padding:12px clamp(24px,6vw,48px) 12px;
    padding-top:calc(12px + env(safe-area-inset-top,0px))
  }
  .mp-menu__bar .mp-lockup__mark{height:26px}
  .mp-menu__bar .mp-lockup__word{font-size:.74rem;letter-spacing:.26em}

  .mp-menu__close{
    position:relative;width:46px;height:46px;flex:none;cursor:pointer;
    background:transparent;border:1px solid var(--mp-border-active);border-radius:2px;
    animation:mp-close-breathe 2600ms var(--mp-ease) infinite
  }
  .mp-menu__close span{
    position:absolute;left:12px;top:22px;width:22px;height:1.5px;border-radius:2px;
    background:#FFC677
  }
  .mp-menu__close span:first-child{transform:rotate(45deg)}
  .mp-menu__close span:last-child{transform:rotate(-45deg)}
  .mp-menu__close:active{background:rgba(199,169,107,.14)}

  @keyframes mp-close-breathe{
    0%,100%{box-shadow:0 0 0 0 rgba(255,198,119,.28);border-color:rgba(199,169,107,.32)}
    55%{box-shadow:0 0 0 8px rgba(255,198,119,0);border-color:rgba(255,198,119,.85)}
  }

  /* Der Hamburger verschwindet, solange das Menue offen ist:
     zwei Schliessen-Wege nebeneinander verwirren. */
  .mp-nav[data-open="true"] .mp-nav__burger{opacity:0;pointer-events:none}

  .mp-menu__inner{padding-top:clamp(24px,6vh,56px);margin:auto 0}
}

@media (max-width:600px){

  /* Listen und Watch: ruhiger Rahmen, dafuer ein wanderndes Leuchten.
     Erst Listen, dann Watch, im 7-Sekunden-Takt. Das zeigt ohne Worte,
     dass hier etwas zu holen ist. */
  .mp-hero__actions .mp-btn{
    position:relative;overflow:hidden;
    background:rgba(241,239,234,.02);border-color:rgba(241,239,234,.14);
    color:var(--wp--preset--color--text-secondary);
    animation:mp-door-breathe 7000ms var(--mp-ease) infinite
  }
  .mp-hero__actions .mp-btn:nth-of-type(2){animation-delay:3500ms}
  .mp-hero__actions .mp-btn:active{background:rgba(199,169,107,.16);color:#FFC677}

  @keyframes mp-door-breathe{
    0%,72%,100%{border-color:rgba(241,239,234,.14);color:#B9B8B3;background:rgba(241,239,234,.02)}
    22%{border-color:rgba(255,198,119,.55);color:#FFC677;background:rgba(199,169,107,.10)}
    44%{border-color:rgba(241,239,234,.14);color:#B9B8B3;background:rgba(241,239,234,.02)}
  }

  /* Studio und Club sind ein Umschalter, kein Hauptweg. Also kleiner,
     rechtsbuendig und ohne den Anspruch eines Knopfes. */
  .mp-hero__right{
    display:flex;flex-direction:column;align-items:flex-end;gap:8px;width:100%
  }
  .mp-mode{
    display:inline-flex;width:auto;padding:2px;
    border-color:rgba(241,239,234,.10);background:rgba(8,9,10,.35)
  }
  .mp-mode__opt{
    min-height:32px;padding:6px 12px;font-size:.6rem;letter-spacing:.18em
  }
  .mp-mode__opt[aria-pressed="false"]{color:#777A7C}
  .mp-hero__dots{align-self:flex-start;order:-1}
  .mp-hero__note{font-size:.6rem;opacity:.85}

  @media (prefers-reduced-motion:reduce){
    .mp-hero__actions .mp-btn{animation:none}
    .mp-menu__close{animation:none}
  }
}

/* =========================================================
   47. Der fehlende Rand rechts
   Die Innenpolsterung des Hero-Inhalts kam zur Breite dazu, statt
   hineingerechnet zu werden. Links sah man den Rand, rechts lief der
   Inhalt aus dem Bild. Am Desktop faellt das nicht auf, weil die
   Contentbreite begrenzt ist und der Platz reicht.
   ========================================================= */

@media (max-width:820px){
  .mp-hero,.mp-hero__inner,.mp-hero__row,.mp-hero__actions,.mp-hero__right,
  .mp-hero__lockup,.mp-mode,.mp-hero__actions .mp-btn,.mp-mode__opt,
  .mp-menu,.mp-menu__inner,.mp-menu__bar{
    box-sizing:border-box;max-width:100%
  }
  .mp-hero__inner{width:100%}
  .mp-hero__actions,.mp-hero__right{min-width:0}
  .mp-hero__actions .mp-btn,.mp-mode__opt{min-width:0}
}

@media (max-width:600px){
  /* Der Text rueckt naeher an die untere Kante, damit er nicht in der
     Grafik des Motivs liegt. */
  .mp-hero__inner{
    gap:14px;padding-bottom:clamp(14px,2.4vh,24px)
  }
  .mp-hero{padding-bottom:clamp(14px,2.4vh,24px)}
  .mp-hero__lockup{margin-bottom:2px}

  /* Knoepfe etwas flacher und schmaler gesetzt. */
  .mp-hero__actions{gap:10px}
  .mp-hero__actions .mp-btn{padding:12px 8px;font-size:.64rem;letter-spacing:.18em}

  /* Der Modusregler bleibt klein und innerhalb des Randes. */
  .mp-hero__right{padding-right:0}
  .mp-mode{align-self:flex-end}
}

/* =========================================================
   48. Hero-Textblock tiefer, Platzhalter gegen das Nachruecken
   ========================================================= */

@media (max-width:600px){
  /* Der Block mit Featured Journey, Titel, Genres und Knoepfen rutscht
     rund 15px nach unten. Mehr Hero-Motiv bleibt sichtbar. */
  .mp-hero__inner{padding-bottom:clamp(2px,0.6vh,8px)}
  .mp-hero{padding-bottom:clamp(2px,0.6vh,8px)}
}

/* Die Platzreservierung fuer noch nicht geladene Bilder haette den Desktop
   beruehrt. Sie ist hier bewusst nicht drin. Das Nachruecken faengt jetzt
   das Skript ab, indem es die Zielposition zweimal nachrechnet. */

/* =========================================================
   49. Footer auf dem Handy kompakter
   ========================================================= */

@media (max-width:600px){
  .mp-footer{
    padding:clamp(28px,5vw,40px) var(--gutter) calc(clamp(20px,4vw,28px) + env(safe-area-inset-bottom,0px))
  }
  .mp-footer__inner{gap:18px}

  .mp-footer__top{gap:14px}
  .mp-footer__brand{gap:6px}
  .mp-footer .mp-logo--compact{width:clamp(150px,44vw,190px)}
  .mp-footer__tagline{font-size:.62rem;letter-spacing:.18em;line-height:1.5}

  /* Die Links stehen als ein Block beieinander, nicht in drei Zeilen
     mit jeweils voller Zielhoehe. */
  .mp-footer__links{
    display:flex;flex-wrap:wrap;gap:8px 16px;margin:0;align-items:center
  }
  .mp-footer__links a,.mp-footer__consent{
    min-height:32px;font-size:.62rem;letter-spacing:.16em;padding:0
  }
  .mp-footer__links .mp-lang{gap:6px;margin-left:auto}
  .mp-footer__links .mp-lang__item{min-height:32px;font-size:.62rem}

  .mp-footer__bottom{gap:10px;padding-top:14px}
  .mp-footer__clause{font-size:.68rem;line-height:1.6;max-width:none}
  .mp-footer__copy{font-size:.62rem;letter-spacing:.14em}
}

/* =========================================================
   50. Desktop-Feinschliff
   Alles in @media (min-width:821px), damit die Mobilansicht
   unberuehrt bleibt.
   ========================================================= */

@media (min-width:821px){

  /* Der Hinweis sitzt rechts unter dem Regler, der zweite Teil atmet. */
  .mp-hero__inner{position:relative}
  .mp-hero__note{
    flex-basis:auto;margin-left:auto;text-align:right;max-width:34ch;
    display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end;align-items:baseline
  }
  .mp-hero__note-main{color:var(--wp--preset--color--text-muted)}
  .mp-hero__note-live{
    color:#FFC677;animation:mp-note-breathe 3200ms var(--mp-ease) infinite
  }
  @keyframes mp-note-breathe{
    0%,100%{opacity:.45}
    50%{opacity:1}
  }

  /* Listen und Watch atmen, solange kein Player laeuft. Sobald etwas
     spielt, hoert das auf: dann ist die Aufforderung erledigt. */
  .mp-hero__actions .mp-btn,
  .mp-featured__actions .mp-btn:not(.mp-btn--text),
  .mp-door-btn{
    animation:mp-door-breathe-d 7000ms var(--mp-ease) infinite
  }
  .mp-hero__actions .mp-btn:nth-of-type(2),
  .mp-featured__actions .mp-btn--text,
  .mp-door-btn.mp-btn--text{animation-delay:3500ms}

  html[data-mp-playing="true"] .mp-hero__actions .mp-btn,
  html[data-mp-playing="true"] .mp-featured__actions .mp-btn,
  html[data-mp-playing="true"] .mp-door-btn{animation:none}

  @keyframes mp-door-breathe-d{
    0%,72%,100%{border-color:var(--mp-border-rest);color:var(--wp--preset--color--text-secondary)}
    22%{border-color:rgba(255,198,119,.5);color:#FFC677}
    44%{border-color:var(--mp-border-rest);color:var(--wp--preset--color--text-secondary)}
  }
  .mp-btn--text.mp-door-btn{border-color:transparent}
  @keyframes mp-door-breathe-text{
    0%,72%,100%{color:var(--wp--preset--color--text-secondary)}
    22%{color:#FFC677}
  }
  .mp-btn--text.mp-door-btn{animation-name:mp-door-breathe-text}

  /* Archivzeile: Listen im Rahmen, Watch als Text, beide mit Pfeil. */
  .mp-archive__links{gap:18px;align-items:center}
  .mp-archive__links .mp-btn--sm{padding:9px 16px}
  .mp-archive__links .mp-btn--text{padding:9px 2px}
}

/* Besucherzeile im Footer, sehr zurueckhaltend. */
.mp-visitors{
  display:inline-flex;align-items:center;flex-wrap:wrap;gap:8px;
  font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--wp--preset--color--text-muted)
}
.mp-visitors__dot{
  width:6px;height:6px;border-radius:999px;background:#FFC677;
  animation:mp-beat 2600ms ease-in-out infinite
}
.mp-visitors__online,.mp-visitors__total{
  font-family:var(--wp--preset--font-family--display);
  color:var(--wp--preset--color--text-secondary);letter-spacing:.1em
}
.mp-visitors__sep{color:var(--wp--preset--color--line)}

@media (prefers-reduced-motion:reduce){
  .mp-visitors__dot,.mp-hero__note-live{animation:none}
}

/* =========================================================
   51. Tablets, Hochformat
   Gemessene Breiten: iPad mini 744, Galaxy Tab 800, iPad 9 810,
   iPad Air 4/5 und iPad 10 820, iPad Pro 11 834, Pixel Tablet 840,
   iPad Pro 12.9 1024.

   Alles bis 820 landete bisher im Handy-Layout, also auch ein 10,9-Zoll-
   iPad. Dieses Band korrigiert das: Handy-Werte gelten weiterhin bis 699,
   darueber bis 1024 gilt eine eigene, ruhigere Fassung.
   ========================================================= */

@media (min-width:700px) and (max-width:1024px){

  /* --- Hero --- */

  .mp-hero{
    min-height:min(calc(100svh - var(--mp-player-h,88px) - 64px), 980px);
    padding-bottom:clamp(32px,4vh,56px)
  }
  .mp-hero__slide{object-position:50% 34%}
  .mp-hero__inner{gap:clamp(20px,2.6vh,32px);padding-inline:clamp(32px,5vw,56px)}
  .mp-hero__row{align-items:baseline}
  .mp-hero__lockup{gap:18px}
  .mp-hero__lockup .mp-eyebrow{font-size:.72rem;letter-spacing:.3em}
  .mp-hero__title{font-size:1.35rem;letter-spacing:.14em}
  .mp-hero__genres{font-size:.7rem;letter-spacing:.26em}

  /* Knoepfe in Desktop-Groesse, nicht in Handy-Groesse. */
  .mp-hero__actions{
    display:flex;flex-wrap:wrap;gap:20px;align-items:center;width:auto
  }
  .mp-hero__actions .mp-btn{
    flex:0 0 auto;width:auto;min-width:170px;padding:14px 26px;
    font-size:.73rem;letter-spacing:.24em
  }
  .mp-hero__actions .mp-btn__arrow{display:inline-block}

  .mp-hero__right{
    flex-direction:row;align-items:center;justify-content:flex-end;
    width:auto;margin-left:auto;gap:24px
  }
  .mp-mode{display:inline-flex;width:auto;padding:4px;background:transparent}
  .mp-mode__opt{min-height:38px;padding:8px 18px;font-size:.68rem}
  .mp-hero__dots{order:0;align-self:auto}
  .mp-hero__note{
    flex-basis:100%;text-align:right;margin-left:auto;max-width:42ch;
    display:flex;justify-content:flex-end;gap:6px;flex-wrap:wrap;font-size:.68rem
  }
  .mp-hero__note-live{color:#FFC677}

  /* --- Module: eine Spalte, aber mit Mass --- */

  .mp-featured__grid,.mp-about__grid,.mp-connect__grid,.mp-archive__grid{
    grid-template-columns:1fr;gap:clamp(28px,4vw,48px);justify-items:start
  }
  .mp-featured__media,.mp-about__media{width:100%;max-width:min(560px,72%)}
  .mp-archive__player{width:100%;max-width:640px;margin-top:0}
  .mp-archive__body{width:100%}
  .mp-doors__frame{max-height:min(46vh,460px)}

  /* Zwei Karten nebeneinander, das traegt die Breite gut. */
  .mp-journeys__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,4vw,48px)}
  .mp-genres__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mp-voices__inner{max-width:720px}

  /* --- Kopf und Fuss --- */

  .mp-header__inner{padding:14px clamp(28px,4vw,48px)}
  .mp-lockup__mark{height:30px}
  .mp-lockup__word{font-size:.84rem;letter-spacing:.3em}

  .mp-footer{padding:clamp(48px,6vw,72px) clamp(28px,5vw,56px) clamp(28px,4vw,40px)}
  .mp-footer__top{flex-direction:row;align-items:flex-end;gap:32px}
  .mp-footer__links{margin-left:auto;gap:20px}
  .mp-footer__bottom{flex-direction:row;align-items:baseline;gap:32px}
  .mp-footer__clause{max-width:62ch}

  /* --- Sektionsrhythmus etwas straffer als am Desktop --- */

  .mp-featured{padding:clamp(64px,8vw,104px) var(--gutter) clamp(48px,6vw,80px)}
  .mp-doors,.mp-genres,.mp-archive,.mp-voices{padding-block:clamp(56px,7vw,96px)}
  .mp-journeys,.mp-about,.mp-connect{padding-block:clamp(64px,8vw,104px)}
}

/* Das mobile Menue bleibt bis 820 aktiv. Auf Tablets in diesem Bereich
   bekommt es mehr Luft, die Handy-Werte wirken dort gedraengt. */
@media (min-width:700px) and (max-width:820px){
  .mp-menu__inner{
    padding:clamp(96px,12vh,140px) clamp(48px,8vw,96px)
            calc(var(--mp-player-h,88px) + 40px);
    gap:clamp(18px,2.6vh,30px);max-width:720px;margin-inline:auto
  }
  .mp-menu__label{font-size:clamp(2rem,4.4vw,2.6rem)}
  .mp-menu__bar{padding-inline:clamp(28px,4vw,48px)}
}

/* =========================================================
   52. Tablet: was aus dem Handybereich durchschlug
   Drei Regeln aus dem Band bis 820px galten auch auf dem Tablet und
   waren dort falsch. Dazu die fehlenden Animationen.
   ========================================================= */

@media (min-width:700px) and (max-width:1024px){

  /* Die Archivzeile stand in einer Spalte. Der Titel traegt flex:1 1 200px,
     und in einer Spalte wird aus der Grundbreite eine Grundhoehe von 200px.
     Das waren die Luecken von mehreren hundert Pixeln. */
  .mp-archive__row{
    flex-direction:row;align-items:center;flex-wrap:wrap;gap:16px;padding:14px 0
  }
  .mp-archive__title{flex:1 1 auto;width:auto;min-width:0}
  .mp-archive__meta{flex:0 0 auto}
  .mp-archive__links{width:auto;margin-left:auto;gap:18px;flex-wrap:nowrap}

  /* Dieselbe Falle bei den Listenzeilen und den Kanaelen. */
  .mp-row{flex-wrap:nowrap;align-items:baseline;gap:18px}
  .mp-row__left{flex:1 1 auto;width:auto;min-width:0}
  .mp-row__right{width:auto;flex:0 0 auto}
  .mp-stat__text{flex:1 1 auto}
  .mp-srow{flex-wrap:nowrap}
  .mp-srow__note{width:auto;margin-left:auto;text-align:right}

  /* Studio und Club: eigene Zeile unter den Knoepfen, nichts ueberlappt. */
  .mp-hero__actions{width:100%;row-gap:18px}
  .mp-hero__right{
    flex:1 1 100%;flex-wrap:wrap;justify-content:flex-end;
    align-items:center;gap:20px;margin-left:0;width:auto;
    border:1px solid rgba(241,239,234,.10);padding:6px 10px
  }
  .mp-mode{flex:0 0 auto;border:0;padding:0}
  .mp-mode__opt{white-space:nowrap;padding:8px 20px}
  .mp-hero__dots{flex:0 0 auto;margin-right:auto;padding-left:6px}

  /* Die Aufforderung atmet auch hier, solange nichts laeuft. */
  .mp-hero__actions .mp-btn,
  .mp-featured__actions .mp-btn:not(.mp-btn--text),
  .mp-door-btn{animation:mp-door-breathe-d 7000ms var(--mp-ease) infinite}
  .mp-hero__actions .mp-btn:nth-of-type(2),
  .mp-featured__actions .mp-btn--text,
  .mp-door-btn.mp-btn--text{animation-delay:3500ms}
  .mp-btn--text.mp-door-btn{animation-name:mp-door-breathe-text;border-color:transparent}

  html[data-mp-playing="true"] .mp-hero__actions .mp-btn,
  html[data-mp-playing="true"] .mp-featured__actions .mp-btn,
  html[data-mp-playing="true"] .mp-door-btn{animation:none}
}

@media (prefers-reduced-motion:reduce){
  .mp-hero__actions .mp-btn,.mp-featured__actions .mp-btn,.mp-door-btn{animation:none}
}

/* =========================================================
   53. Tablet: Hero-Textblock tiefer
   Wie schon auf dem Handy: der Block rueckt nach unten, damit mehr
   vom Motiv sichtbar bleibt. Rund 50px, aufgeteilt auf die beiden
   Polsterungen, die ihn bisher nach oben gedrueckt haben.
   ========================================================= */

@media (min-width:700px) and (max-width:1024px){
  .mp-hero{padding-bottom:clamp(6px,1vh,12px)}
  .mp-hero__inner{padding-bottom:clamp(4px,0.8vh,10px)}
}