/* Museum der guten Absichten — /warum-foerderung-scheitert
   ---------------------------------------------------------------------------
   Gliederung folgt dem Markup:
     1  Seitenrahmen            (museum.html)
     2  Hero / Titelschild      (museum.html)
     3  Fortschrittsanzeige     (museum.html)
     4  Raum, Wand, Band, Bühne (partials/museum_raum.html)
     5  Exponat & Schildchen    (partials/museum_raum.html)
     6  Exponat-SVGs            (partials/museum_exponate.html)
     7  Textspalte              (partials/museum_raum.html)
     8  Raum 5 · Karten-Paar    (partials/museum_raum.html)
     9  Nachbar-Navigation      (partials/museum_raum.html + Finale)
    10  Finale                  (museum.html)
    11  Abschluss / CTAs        (museum.html)
    12  Breitere Fenster        (600 · 760 · 900 · 1040 · 1340 · Laptop quer)

   Regeln dieser Datei:
   * Farben ausschließlich aus den --w1-*-Tokens (static/css/welle1.css).
   * Mobile-first: Basis ist 360px, jeder Breakpoint ist ein min-width-Zusatz.
   * Keine @import, keine externen Requests (strikte CSP).
   * scroll-margin-top für die Deep-Links kommt global aus style.css:129
     (`section { scroll-margin-top: calc(var(--header-h) + 12px) }`) — die
     Räume und das Finale sind <section>, hier wird nichts nachgebaut.
   * prefers-reduced-motion greift bereits dreifach (style.css:82 / :1382,
     welle1.css:163). Hier steht deshalb kein vierter Block; alle Bewegung
     dieser Datei sind reine Hover-/State-Transitions, die dort abgeräumt
     werden.
   --------------------------------------------------------------------------- */


/* ============================================================ 1 Seitenrahmen */

.mus-page {
  /* Die Seite trägt genau EINEN Schatten: den harten Versatz des
     Titelschilds. style.css:212 legt allen .btn-primary einen weichen
     Schatten unter — auf dieser Seite nicht. */
  padding-bottom: 8px;
}

.mus-page .btn-primary {
  box-shadow: none;
}


/* ======================================================= 2 Hero / Titelschild */

.mus-hero {
  padding-block: clamp(28px, 5vw, 56px) clamp(18px, 2.5vw, 26px);
  text-align: center;
}

.mus-hero-schild {
  display: inline-block;
  max-width: 100%;
  padding: 14px 22px;
  background: var(--w1-papier);
  border: 1.5px solid var(--w1-tinte);
  /* Der einzige Schatten der Seite — harter Versatz, kein Blur. */
  box-shadow: 3px 3px 0 var(--w1-sand);
}

.mus-hero-kicker {
  /* Text kommt bereits in Versalien aus den Daten — kein text-transform. */
  margin: 0 0 6px;
  font-size: clamp(10px, 0.85vw, 11.5px);
  letter-spacing: 0.2em;
  color: var(--w1-grau);
}

.mus-hero-titel {
  max-width: 18ch;
  margin: 0 auto;
  font-family: var(--serif);
  font-size: clamp(26px, 3.6vw, 44px);
  line-height: 1.2;
  /* Umbruch macht CSS, kein hartes <br> im Markup. */
  text-wrap: balance;
}

.mus-hero-intro {
  max-width: 62ch;
  margin: 18px auto 0;
  font-size: clamp(15px, 1.35vw, 19px);
  line-height: 1.6;
  color: var(--w1-grau);
}

.mus-lesezeit {
  margin: 10px 0 0;
  font-size: clamp(11px, 0.95vw, 12.5px);
  letter-spacing: 0.04em;
  color: var(--w1-grau);
}


/* ================================================== 3 Fortschrittsanzeige */
/* Inhaltsverzeichnis und Deep-Link-Liste in einem. Ohne JavaScript voll
   benutzbar; museum.js setzt ausschließlich aria-current. Bewusst NICHT
   sticky: der globale scroll-margin-top (Header + 12px) rechnet keine
   zweite klebende Leiste ein — ein sticky Band würde die Raumüberschrift
   nach dem Sprung verdecken. */

.mus-fortschritt {
  padding-bottom: 18px;
}

.mus-fortschritt ol {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mus-fortschritt a {
  display: block;
  /* Punkt 9px + 2 × 8px Padding = 25px Touch-Target in beide Richtungen. */
  padding: 8px;
  border-radius: 50%;
  line-height: 0;
}

.mus-fortschritt a:focus-visible {
  outline: 2px solid var(--w1-terra);
  outline-offset: 0;
}

.mus-punkt {
  display: block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--w1-step-dot);
  transition: background-color 0.18s ease, transform 0.18s ease;
}

.mus-fortschritt a:hover .mus-punkt {
  background: var(--w1-terra-dark);
}

.mus-fortschritt a[aria-current] .mus-punkt {
  background: var(--w1-terra);
  transform: scale(1.3);
}

/* Der sechste Punkt ist kein Raum, sondern das Finale: dauerhaft grün.
   Steht nach der aria-current-Regel, behält die Farbe also auch im
   aktiven Zustand — sichtbar wird der dort allein über die Skalierung. */
.mus-fortschritt-finale .mus-punkt,
.mus-fortschritt-finale:hover .mus-punkt,
.mus-fortschritt-finale[aria-current] .mus-punkt {
  background: var(--w1-gruen);
}


/* ========================================== 4 Raum, Wand, Band und Bühne */

.mus-raum {
  position: relative;
  padding-block: clamp(20px, 3vw, 34px) clamp(26px, 3.5vw, 40px);
  background: var(--mus-wand);

  /* Voreinstellung aller Wand-Variablen. Die Varianten unten setzen nur
     noch die Abweichungen — es gibt genau EIN Raum-Ruleset. */
  --mus-wand: var(--w1-creme);
  --mus-sockel: var(--w1-sand);
  --mus-sockel-rand: transparent;
  --mus-schild-rand: var(--w1-sand);
  --mus-kicker: var(--w1-terra);
  --mus-lehre-label: var(--w1-grau);
  --mus-lehre-text: var(--w1-tinte);
  --mus-linie: var(--w1-sand);
}

/* Wandvarianten setzen ausschließlich Custom Properties. */
.mus-raum--creme {
  --mus-wand: var(--w1-creme);
  --mus-sockel: var(--w1-sand);
}

.mus-raum--peach {
  --mus-wand: var(--w1-peach);
  --mus-sockel: var(--w1-papier);
  /* Wirkt erst ab 760px: dort steht der Papier-Sockel in einer
     Papier-Bühne und bräuchte ohne Kontur keine Kante. */
  --mus-sockel-rand: var(--w1-peach-rand);
  --mus-schild-rand: var(--w1-peach-rand-hell);
  --mus-kicker: var(--w1-terra-dark);
  --mus-linie: var(--w1-peach-rand);
  /* Kontrast: --w1-grau erreicht auf Peach nur 4,38:1 (AA verlangt 4,5). */
  --mus-lehre-label: var(--w1-text-grau);
}

/* Kontrast auf der Mint-Wand: Grün trägt hier nicht. Gemessen gegen #bfddd5
   liegt --w1-gruen bei 4,2:1, --w1-terra bei 3,65:1 und --w1-grau bei 4,07:1 —
   alle unter AA 4,5:1, und die Lehre ist mit 18px fett noch kein „großer Text".
   Der Raum bleibt trotzdem als der helle erkennbar: das macht die Wand, nicht
   die Schriftfarbe. Kicker wie in Raum 4 in dunklem Terracotta (4,64:1). */
.mus-raum--mint {
  --mus-wand: var(--w1-mint);
  --mus-kicker: var(--w1-terra-dark);
  --mus-lehre-label: var(--w1-text-grau);
  --mus-lehre-text: var(--w1-tinte);
}

/* Die Fußnoten-Ziffer kommt aus welle1.css in --w1-terra. Auf den beiden
   farbigen Wänden reicht das nicht (Peach 3,92:1, Mint 3,65:1). */
.mus-raum--peach .w1-fn-btn,
.mus-raum--mint .w1-fn-btn {
  color: var(--w1-terra-dark);
}

/* Deko-Randstreifen: erst ab 1340px sichtbar (siehe Abschnitt 12), weil
   erst dort neben dem 1180px-Container Platz dafür ist. */
.mus-raumband {
  display: none;
}

/* Bühne: mobil ein reiner Fluss-Container ohne Fläche, ab 760px die
   Papier-Karte. Bewusst KEIN overflow:hidden — das würde Fokusringe
   der Fußnoten-Buttons abschneiden. */
.mus-buehne {
  display: block;
}

.mus-kicker {
  margin: 0 0 10px;
  font-size: clamp(11px, 0.9vw, 12px);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mus-kicker);
}


/* ============================================ 5 Exponat und Schildchen */
/* Sockel und Schildchen bilden ein Objekt: der Sockel hat unten eckige
   Kanten, das Schildchen hängt bündig darunter (Extrakt Befund 15 —
   „Sockel unten eckig" statt zweier kollidierender Radien). Der Sockel
   sitzt auf dem <svg> selbst; ein Wrapper-Div gibt es im Markup nicht. */

.mus-exponat {
  --mus-ex-breite: clamp(200px, 46vw, 300px);
  --mus-sockel-pad: 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
}

.mus-exponat:not(.mus-exponat--karte) > .mus-ex {
  /* content-box: die Breite meint die Zeichnung, der Sockelrand kommt dazu. */
  box-sizing: content-box;
  width: var(--mus-ex-breite);
  padding: var(--mus-sockel-pad);
  background: var(--mus-sockel);
  border: 1px solid transparent;
  border-radius: 12px 12px 0 0;
}

.mus-schild {
  width: calc(var(--mus-ex-breite) + 2 * var(--mus-sockel-pad) - 28px);
  max-width: 100%;
  padding: 8px 12px;
  background: var(--w1-papier);
  border: 1px solid var(--mus-schild-rand);
  border-top: none;
  border-radius: 0 0 10px 10px;
  font-size: clamp(11px, 0.92vw, 11.5px);
  line-height: 1.45;
  font-style: italic;
  text-align: center;
  color: var(--w1-grau);
}

/* Variante ohne Schildchen (Raum-5-Karten): kein Sockel, nur zentriert. */
.mus-exponat--karte {
  --mus-ex-breite: clamp(180px, 40vw, 260px);
  margin-bottom: 10px;
}


/* ================================================== 6 Exponat-SVGs */
/* Je Klasse genau eine Eigenschaft — Füllung und Kontur werden im Markup
   kombiniert (class="mus-ex-hohl mus-ex-k-terra") und dürfen sich nicht
   gegenseitig überschreiben. */

.mus-ex {
  display: block;
  width: var(--mus-ex-breite, clamp(200px, 46vw, 300px));
  height: auto;
}

/* Größe je Exponat (viewBox → aspect-ratio, hält CLS bei 0) */
.mus-ex--scheck,
.mus-ex--antragsstapel,
.mus-ex--urkunde { aspect-ratio: 14 / 9; }
.mus-ex--tropf { aspect-ratio: 2 / 1; }
.mus-ex--muenze,
.mus-ex--budget-kuchen { aspect-ratio: 17 / 7; }

/* Füllung — nur fill */
.mus-ex-papier { fill: var(--w1-papier); }
.mus-ex-creme { fill: var(--w1-creme); }
.mus-ex-sand { fill: var(--w1-sand); }
.mus-ex-sand2 { fill: var(--w1-sand-sekundaer); }
.mus-ex-tinte { fill: var(--w1-tinte); }
.mus-ex-terra { fill: var(--w1-terra); }
.mus-ex-terra-dunkel { fill: var(--w1-terra-dark); }
.mus-ex-grau { fill: var(--w1-grau); }
.mus-ex-gruen { fill: var(--w1-gruen); }
.mus-ex-mint { fill: var(--w1-mint); }
.mus-ex-messing { fill: var(--w1-bernstein); }
.mus-ex-hohl { fill: none; }

/* Kontur — nur stroke */
.mus-ex-k-tinte { stroke: var(--w1-tinte); }
.mus-ex-k-grau { stroke: var(--w1-grau); }
.mus-ex-k-terra { stroke: var(--w1-terra); }
.mus-ex-k-terra-dunkel { stroke: var(--w1-terra-dark); }
.mus-ex-k-gruen { stroke: var(--w1-gruen); }

/* Sammelklasse: graue Hilfs-/Formularzeilen und Ankreuzfelder */
.mus-ex-linie {
  fill: none;
  stroke: var(--w1-grau);
}

/* Typografie im SVG */
.mus-ex-serif { font-family: var(--serif); }


/* ==================================================== 7 Textspalte */

.mus-text {
  margin-top: 16px;
}

.mus-titel {
  margin: 0 0 8px;
  font-family: var(--serif);
  font-size: clamp(22px, 2.6vw, 36px);
  line-height: 1.2;
}

.mus-zitat {
  margin: 0 0 12px;
  padding: 0;
  font-family: var(--serif);
  font-size: clamp(16px, 1.6vw, 21px);
  line-height: 1.4;
  color: var(--w1-terra-dark);
}

/* Anführungszeichen stehen im Datentext — kein Pseudoelement. */
.mus-zitat p {
  margin: 0;
}

.mus-fliess {
  margin: 0 0 14px;
  font-size: clamp(15px, 1.15vw, 16.5px);
  line-height: 1.65;
  color: var(--w1-text-grau);
}

.mus-fliess p {
  margin: 0 0 12px;
}

.mus-fliess > :last-child {
  margin-bottom: 0;
}

.mus-lehre {
  display: flex;
  gap: 8px;
  align-items: baseline;
  margin: 0;
}

.mus-lehre-label {
  flex: none;
  font-size: clamp(10px, 0.85vw, 11.5px);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mus-lehre-label);
}

.mus-lehre strong {
  font-family: var(--serif);
  font-size: clamp(15px, 1.2vw, 18px);
  font-weight: 700;
  line-height: 1.35;
  color: var(--mus-lehre-text);
}


/* ============================================== 8 Raum 5 · Karten-Paar */
/* Kein Sonderfall im Markup — auto-fit kippt ab rund 600px von selbst
   auf zwei Spalten und braucht dafür keinen Breakpoint. */

.mus-paar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  margin: 4px 0 16px;
}

.mus-karte {
  padding: 18px;
  background: var(--w1-creme);
  border-radius: 12px;
}

.mus-karte-titel {
  margin: 0 0 6px;
  font-family: var(--serif);
  font-size: clamp(18px, 1.5vw, 22px);
  line-height: 1.25;
}

.mus-karte-text {
  font-size: clamp(14.5px, 1.1vw, 16px);
  line-height: 1.55;
  color: var(--w1-text-grau);
}

.mus-karte-text p {
  margin: 0 0 10px;
}

.mus-karte-text > :last-child {
  margin-bottom: 0;
}


/* ========================================== 9 Nachbar-Navigation */
/* .mus-nachbar-pfeil wird auch vom Finale-Rücksprung genutzt und ist
   deshalb NICHT unter .mus-raum gescopet. */

.mus-nachbarn {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
  margin-top: clamp(20px, 2.6vw, 30px);
  padding-top: 14px;
  border-top: 1px solid var(--mus-linie);
}

.mus-nachbar {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 6px 0;
  font-family: var(--serif);
  font-size: clamp(14px, 1.15vw, 16px);
  /* Nicht --w1-grau: die Nachbar-Links stehen auch auf Peach (4,38:1) und
     Mint (4,07:1) und blieben dort unter AA. */
  color: var(--w1-text-grau);
  text-decoration: none;
  transition: color 0.18s ease;
}

.mus-nachbar:hover {
  color: var(--w1-terra-dark);
}

.mus-nachbar:focus-visible {
  outline: 2px solid var(--w1-terra);
  outline-offset: 3px;
}

/* Raum 1 hat kein prev — der Next-Link rückt allein nach rechts. */
.mus-nachbar--next {
  margin-left: auto;
}

.mus-nachbar-pfeil {
  flex: none;
  font-family: var(--sans);
}

.mus-nachbar-text {
  text-decoration: underline;
  text-decoration-color: var(--w1-sand);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}


/* ==================================================== 10 Finale */
/* Full Bleed wie die farbigen Wände in Raum 4 und 5 — der Inhalt bleibt
   im Container. */

.mus-finale {
  padding-block: clamp(30px, 4vw, 56px) clamp(28px, 4vw, 52px);
  margin-top: 4px;
  background: var(--w1-gruen);
  color: var(--w1-creme);
}

.mus-finale-titel {
  margin: 0 0 4px;
  font-family: var(--serif);
  font-size: clamp(24px, 2.4vw, 34px);
  line-height: 1.2;
}

.mus-finale-sub {
  margin: 0 0 18px;
  font-size: clamp(13px, 1.1vw, 16px);
  /* Mint auf Grün erreicht nur 4,2:1 — Creme liegt bei 5,27:1. */
  color: var(--w1-creme);
}

.mus-prinzipien {
  margin: 0;
  padding-left: 24px;
  /* Ein Prinzip ist jetzt Titel + Absatz — Zeilenlänge begrenzen, sonst
     läuft der Text auf dem Desktop über die angenehme Lesebreite hinaus. */
  max-width: 62ch;
  font-size: clamp(15px, 1.15vw, 16.5px);
  line-height: 1.7;
}

.mus-prinzipien li {
  break-inside: avoid;
  padding-left: 4px;
}

.mus-prinzipien li + li {
  margin-top: clamp(18px, 2.2vw, 26px);
  padding-top: clamp(18px, 2.2vw, 26px);
  /* Trennlinie wie bei .mus-finale-zurueck: Mint trägt hier keine Information,
     ist also reine Dekoration und darf unter 4,5:1 liegen. */
  border-top: 1px solid var(--w1-mint);
}

.mus-prinzipien li::marker {
  /* Die Ziffern sind Inhalt, nicht Dekoration — Creme statt Mint (5,27:1). */
  color: var(--w1-creme);
  font-family: var(--serif);
  font-weight: 700;
}

.mus-prinzip-titel {
  margin: 0 0 6px;
  font-family: var(--serif);
  font-size: clamp(16px, 1.35vw, 19px);
  line-height: 1.3;
}

.mus-prinzip-text {
  margin: 0;
}

/* Rücksprung in den Raum, aus dem das Prinzip stammt. Creme statt Mint —
   der Link ist Inhalt und muss die 4,5:1 halten. */
.mus-prinzip-raum {
  display: inline-block;
  margin-top: 8px;
  font-size: clamp(12px, 0.95vw, 13px);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--w1-creme);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Fußnoten-Ziffern im Finale. Das Fundament setzt sie in Terra — der Ton für
   die hellen Wände der Räume. Auf der grünen Wand verschwinden sie (rund
   1,3:1), deshalb hier Creme wie der Fließtext, mit Unterstreichung, damit sie
   trotz gleicher Farbe als anklickbar zu erkennen sind. Bewusst nur lokal
   überschrieben: welle1.css gehört allen drei Tools. */
.mus-finale .w1-fn-btn {
  color: var(--w1-creme);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.mus-finale-schluss {
  max-width: 62ch;
  margin: clamp(22px, 3vw, 30px) 0 0;
  font-family: var(--serif);
  font-size: clamp(15px, 1.25vw, 18px);
  line-height: 1.5;
}

/* Bewusst ein <a download>, optisch ein Umriss-Button auf Grün. */
.mus-pdf-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin-top: 20px;
  padding: 10px 18px;
  border: 1px solid var(--w1-mint);
  border-radius: 8px;
  font-size: clamp(13px, 1vw, 15px);
  font-weight: 600;
  color: var(--w1-creme);
  text-decoration: none;
  transition: background-color 0.18s ease, color 0.18s ease;
}

.mus-pdf-link:hover {
  background: var(--w1-mint);
  color: var(--w1-gruen);
}

.mus-pdf-link:focus-visible {
  outline: 2px solid var(--w1-creme);
  outline-offset: 3px;
}

.mus-finale-zurueck {
  margin-top: clamp(22px, 3vw, 32px);
  padding-top: 14px;
  /* Trennlinie auf Grün: Mint ist der einzige Ton der Palette, der hier
     sichtbar bleibt, ohne zu schreien. */
  border-top: 1px solid var(--w1-mint);
}

.mus-finale-zurueck a {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 6px 0;
  font-family: var(--serif);
  font-size: clamp(14px, 1.15vw, 16px);
  /* wie .mus-finale-sub: Mint auf Grün ist zu schwach */
  color: var(--w1-creme);
  text-decoration: underline;
  text-decoration-color: var(--w1-gruen);
  text-underline-offset: 4px;
  transition: color 0.18s ease;
}

.mus-finale-zurueck a:hover {
  color: var(--w1-creme);
}

.mus-finale-zurueck a:focus-visible {
  outline: 2px solid var(--w1-creme);
  outline-offset: 3px;
}


/* ============================================ 11 Abschluss / CTAs */
/* Die Makros aus welle1.html bleiben unangetastet — hier steht nur, wie
   sie in DIESER Seite sitzen (kontextabhängig, nie global). */

.mus-abschluss {
  padding-block: clamp(28px, 4vw, 48px) clamp(20px, 3vw, 36px);
}

.mus-page .w1-cta {
  margin: 0 0 16px;
}

/* Der Partner-CTA führt: volle Fläche, gefüllter Button (Mint aus welle1). */
.mus-page .w1-cta--partner {
  padding: clamp(24px, 3vw, 34px) clamp(20px, 2.4vw, 30px);
}

/* Der Wirte-CTA steht bewusst zurück: ruhige Fläche, Umriss-Button. */
.mus-page .mus-cta-wirte .w1-cta {
  padding: 20px 18px;
  background: transparent;
  border: 1px solid var(--w1-sand);
}

.mus-page .mus-cta-wirte .w1-cta h2 {
  font-size: clamp(17px, 1.4vw, 21px);
}

.mus-page .mus-cta-wirte .w1-cta p {
  font-size: clamp(14.5px, 1.1vw, 16px);
}

.mus-page .mus-cta-wirte .btn-primary {
  background: transparent;
  border: 1px solid var(--w1-terra);
  color: var(--w1-terra);
}

.mus-page .mus-cta-wirte .btn-primary:hover {
  background: var(--w1-terra);
  color: var(--w1-creme);
}

.mus-page .w1-share {
  margin: 28px 0 0;
  padding-top: 24px;
  border-top: 1px solid var(--w1-sand);
}


/* =============================================== 12 Breitere Fenster */
/* Die Leiter: 600 (Karten kippen, Textspalte bekommt Maß) · 760 (Papier-
   Bühne wird sichtbar, noch einspaltig) · 900 (Prinzipien zweispaltig) ·
   1040 (Diorama zweispaltig) · 1180 (Container friert ein) · 1340
   (Deko-Randstreifen). */

/* ----------------------------------------------------------------- 600px */
@media (min-width: 600px) {
  /* Textspalte bekommt ein Maß, bleibt aber linksbündig: das Exponat ist
     das zentrierte Objekt, der Text die Spalte daneben/darunter. */
  .mus-text {
    max-width: 62ch;
  }

  .mus-exponat {
    max-width: 420px;
    margin-inline: auto;
  }

  .mus-paar {
    gap: 20px;
  }

  .mus-karte {
    padding: 22px;
  }
}

/* ----------------------------------------------------------------- 760px */
/* Ab hier wird die Bühne zur Papier-Karte — noch einspaltig: Exponat oben,
   Text darunter. Kein overflow:hidden (Fokusringe!). */
@media (min-width: 760px) {
  .mus-buehne {
    max-width: 720px;
    margin-inline: auto;
    padding: 32px 36px;
    background: var(--w1-papier);
    border: 1px solid var(--w1-sand);
    border-radius: 14px;
  }

  /* Raum 4: der Papier-Sockel stünde jetzt auf Papier und verschwände.
     Die Kontur kommt aus --mus-sockel-rand (in den neutralen Räumen
     transparent, in Raum 4 Peach-Rand). */
  .mus-exponat:not(.mus-exponat--karte) > .mus-ex {
    border-color: var(--mus-sockel-rand);
  }

  .mus-text {
    margin-top: 22px;
  }

  .mus-nachbarn {
    gap: 4px 28px;
  }
}

/* ----------------------------------------------------------------- 900px */
@media (min-width: 900px) {
  /* Bewusst KEIN zweispaltiger Satz mehr: Seit jedes Prinzip aus Titel,
     Absatz und Raum-Verweis besteht, würde der Spaltenumbruch die Blöcke
     zerreißen. Die Liste bleibt einspaltig und lesebreit begrenzt. */
}

/* ---------------------------------------------------------------- 1040px */
/* Diorama wird zweispaltig: Exponat links, Text rechts, Nachbarn über die
   volle Breite. Die Umschaltung hängt an :has() — nur Bühnen MIT direktem
   Exponat werden zum Grid, das Karten-Paar in Raum 5 bleibt einspaltig.
   Ohne :has()-Unterstützung bleibt schlicht das 760er-Layout stehen. */
@media (min-width: 1040px) {
  .mus-buehne {
    max-width: 1000px;
    padding: 40px 48px;
  }

  .mus-buehne:has(> .mus-exponat) {
    display: grid;
    grid-template-columns: 380px 1fr;
    grid-template-rows: auto 1fr auto;
    column-gap: 44px;
  }

  .mus-buehne:has(> .mus-exponat) > .mus-kicker {
    grid-column: 2;
    grid-row: 1;
    align-self: end;
  }

  .mus-buehne:has(> .mus-exponat) > .mus-exponat {
    grid-column: 1;
    grid-row: 1 / 3;
    align-self: center;
  }

  .mus-buehne:has(> .mus-exponat) > .mus-text {
    grid-column: 2;
    grid-row: 2;
    max-width: 480px;
    margin-top: 0;
    margin-inline: 0;
  }

  .mus-buehne:has(> .mus-exponat) > .mus-nachbarn {
    grid-column: 1 / -1;
    grid-row: 3;
  }

  .mus-titel {
    margin-bottom: 14px;
  }

  .mus-zitat {
    margin-bottom: 14px;
  }

  .mus-fliess {
    margin-bottom: 16px;
  }

  .mus-lehre {
    gap: 10px;
  }

  /* Prev/Next auf einer Zeile. */
  .mus-nachbarn {
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: baseline;
  }

  .mus-nachbar {
    white-space: nowrap;
  }

  .mus-finale .container > * {
    max-width: 900px;
  }
}

/* ---------------------------------------------------------------- 1340px */
/* Erst hier ist neben dem 1180px-Container Platz für den Randstreifen. */
@media (min-width: 1340px) {
  .mus-raumband {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    /* Physische Eigenschaften, KEINE logischen: writing-mode vertical-rl
       dreht die Block-Achse des Elements — inset-block landete sonst
       links/rechts statt oben/unten. */
    top: 34px;
    bottom: 34px;
    left: max(0px, calc((100% - var(--container)) / 2 - 56px));
    width: 56px;
    opacity: 0.55;
    writing-mode: vertical-rl;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.34em;
    color: var(--w1-grau);
  }
}

/* ------------------------------------------- Laptop im Querformat */
/* Flache Fenster: die Bühne darf nicht die ganze Höhe fressen. */
@media (min-width: 1040px) and (max-height: 620px) {
  .mus-buehne {
    padding: 28px 40px;
  }
}

/* =========================================================================
   Deep-Link-Ziele — Korrektur der Sprungmarke
   =========================================================================
   style.css:130 setzt global `scroll-margin-top: calc(var(--header-h) + 12px)`
   und rechnet dabei mit `--header-h: 62px`. Das stimmt nur, solange der Header
   einzeilig bleibt: `.site-header .container` ist `flex-wrap: wrap`, die
   Navigation rutscht bei schmalen und bei mittleren Breiten in eine zweite
   Zeile. Gemessen: rund 99px bei 360px, 95px zwischen 760 und 900px, 63px
   dazwischen und ab 1000px. Ohne Korrektur landen alle sechs Anker auf dem
   Handy hinter dem Header und der Raum-Kicker ist angeschnitten.

   Hier nur für die Sprungziele dieser Seite geradegezogen. Die eigentliche
   Ursache sitzt in style.css und betrifft jeden Anker der Website (auch
   /wissen) — das gehört in einem eigenen Schritt gefixt, nicht mitten in
   der Parallelphase der drei Tool-Sessions.
   Werte mit ein paar Pixeln Luft, damit ein Umbruch mehr nicht sofort
   wieder hinter den Header führt. */

.mus-raum,
.mus-finale {
  scroll-margin-top: 116px;
}

@media (min-width: 420px) {
  .mus-raum,
  .mus-finale {
    scroll-margin-top: 79px;
  }
}

@media (min-width: 720px) {
  .mus-raum,
  .mus-finale {
    scroll-margin-top: 112px;
  }
}

@media (min-width: 1000px) {
  .mus-raum,
  .mus-finale {
    scroll-margin-top: 79px;
  }
}