/* ministerien-wandel.css (seit 21.10.2026)
 * "Was sich bewegt hat" auf /ministerien: die dunkle Buehne mit dem Netz
 * der Haeuser, die Szene eines Wechsels, darunter die Karten der
 * Wechsel und der Weg zur naechsten Seite (/ministerien-liste). Logik: ministerien-wandel.js.
 * Feste Flaechen tragen feste Textfarben (Creme auf Dunkelgruen).
 * Pivot bekommt eigene Werte ueber html[data-marke="pivot"].
 */
.mw-kino {
  --mw-grund: #0B1D11; --mw-hell: #F9F2E4; --mw-leise: #B9C4B0; --mw-akzent: #CF744A; --mw-akzent-text: #F2B99B;
  position: relative; overflow: hidden; min-height: clamp(560px, 88vh, 940px);
  background: var(--mw-grund); color: var(--mw-hell); isolation: isolate;
}
html[data-marke="pivot"] .mw-kino { --mw-grund: #0C0B26; --mw-hell: #F4F3FF; --mw-leise: #B7B4E0; --mw-akzent: #4B46FF; --mw-akzent-text: #C9C7FF; }
.mw-kino__netz { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }

/* Ueberschrift und Zahlen: unten links, ueber dem Netz */
.mw-kino__kopf {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 0 max(24px, calc((100vw - 1180px) / 2)) 40px;
  transition: opacity .8s ease, transform .8s cubic-bezier(.2, .7, .2, 1);
}
.mw-kino__marke { margin: 0 0 6px; font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--mw-akzent-text); }
.mw-kino__titel { margin: 0; max-width: 12ch; font-family: var(--serif); font-size: clamp(2.125rem, 5vw, 3.625rem); line-height: 1.08; color: var(--mw-hell); text-wrap: balance; }
html[data-marke="pivot"] .mw-kino__titel { font-family: "Figtree", var(--sans); font-weight: 800; }
.mw-kino__dek { margin: 10px 0 0; max-width: 34rem; font-size: 1.0625rem; line-height: 1.55; color: var(--mw-leise); }
.mw-kino__zahlen { display: flex; flex-wrap: wrap; gap: 10px 34px; margin: 22px 0 0; padding: 0; list-style: none; }
.mw-kino__zahlen li { display: grid; gap: 2px; }
.mw-kino__zahlen b { font-family: var(--serif); font-size: 1.75rem; line-height: 1; color: var(--mw-hell); font-variant-numeric: tabular-nums; }
.mw-kino__zahlen span { font-size: 12.5px; color: var(--mw-leise); }
.mw-kino__knoepfe { display: flex; flex-wrap: wrap; gap: 10px; margin: 24px 0 0; }
.mw-knopf {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 10px;
  font-weight: 700; font-size: 14.5px; text-decoration: none; color: var(--mw-hell); border: 1px solid rgba(255, 255, 255, .35);
}
.mw-knopf:hover { border-color: var(--mw-hell); }
.mw-knopf--hell { background: var(--mw-hell); color: var(--mw-grund); border-color: var(--mw-hell); }
.mw-knopf--hell:hover { background: #fff; }
.mw-knopf:focus-visible, .mw-kino__direkt:focus-visible, .mw-steuer button:focus-visible { outline: 3px solid var(--mw-akzent-text); outline-offset: 2px; }
/* Fuer alle, die gleich recherchieren wollen: immer sichtbar, oben rechts */
.mw-kino__direkt {
  position: absolute; top: 18px; right: 20px; z-index: 4; display: inline-flex; align-items: center; gap: 8px; min-height: 40px;
  padding: 0 16px; border-radius: 10px; font-size: 14px; font-weight: 700; text-decoration: none;
  background: var(--mw-hell); color: var(--mw-grund); box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
}
.mw-kino__direkt:hover { background: #fff; }

/* Steuerung der Fahrt: zurueck, Pause, vor, je Station ein Strich */
.mw-steuer {
  position: absolute; z-index: 4; left: 48%; right: 24px; bottom: 18px;
  display: flex; align-items: center; gap: 8px; color: var(--mw-hell);
}
.mw-steuer__k {
  flex: none; min-width: 36px; height: 34px; padding: 0 10px; font: inherit; font-size: 15px; font-weight: 700; cursor: pointer;
  border-radius: 8px; border: 1px solid rgba(255, 255, 255, .3); background: rgba(0, 0, 0, .3); color: var(--mw-hell);
}
.mw-steuer__k:hover { border-color: var(--mw-hell); }
.mw-steuer__k--pause { min-width: 104px; font-size: 13px; }
.mw-steuer__leiste { flex: 1 1 auto; display: flex; gap: 4px; margin: 0 6px; padding: 0; list-style: none; min-width: 0; }
.mw-steuer__leiste li { flex: 1 1 0; min-width: 0; }
.mw-steuer__leiste button {
  position: relative; display: block; width: 100%; height: 22px; padding: 0; border: 0; background: none; cursor: pointer;
}
/* Der sichtbare Strich liegt mittig im groesseren Klickfeld */
.mw-steuer__leiste button::before, .mw-steuer__leiste button::after {
  content: ""; position: absolute; left: 0; top: 9px; height: 4px; border-radius: 2px;
}
.mw-steuer__leiste button::before { right: 0; background: rgba(255, 255, 255, .22); }
.mw-steuer__leiste button::after { width: calc(var(--p, 0) * 100%); background: var(--mw-akzent-text); }
.mw-steuer__leiste button.is-durch::after { width: 100%; background: var(--mw-akzent); }
.mw-steuer__leiste button:hover::before { background: rgba(255, 255, 255, .45); }
.mw-steuer__wo { flex: none; min-width: 6.5rem; text-align: right; font-family: var(--mono); font-size: 12px; font-weight: 700; color: var(--mw-leise); font-variant-numeric: tabular-nums; }

/* Die Szene: alt verblasst, neu tritt ein */
.mw-kino__szene {
  position: absolute; left: 50%; top: 56%; z-index: 2; transform: translate(-50%, -40%); width: min(640px, calc(100% - 32px));
  display: grid; justify-items: center; gap: 12px; text-align: center; opacity: 0; pointer-events: none;
  transition: opacity .45s ease, transform .6s cubic-bezier(.2, .7, .2, 1);
}
.mw-kino__szene.is-an { opacity: 1; transform: translate(-50%, -50%); }
/* Ueberblick und Plaene: die Karte unten, darueber bleibt das Netz frei */
.mw-kino__szene.is-unten { top: auto; bottom: 72px; transform: translate(-50%, 12px); }
.mw-kino__szene.is-unten.is-an { transform: translate(-50%, 0); }
/* Ruhige Flaeche hinter Bild und Text: das Netz laeuft sonst durch die Schrift */
.mw-kino__szene::before {
  content: ""; position: absolute; inset: -22px -26px; z-index: -1; border-radius: 22px;
  background: var(--mw-grund); opacity: .88; box-shadow: 0 30px 80px rgba(0, 0, 0, .5);
}
.mw-szene__wann { margin: 0; font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--mw-akzent-text); }
.mw-szene__paar { display: flex; align-items: center; justify-content: center; gap: 22px; }
.mw-szene__paar figure { margin: 0; display: grid; gap: 8px; justify-items: center; transition: opacity .7s ease, transform .8s cubic-bezier(.2, .7, .2, 1), filter .7s ease; }
.mw-szene__paar figcaption { font-family: var(--serif); font-size: 1.125rem; color: var(--mw-hell); }
.mw-szene__bild { width: 150px; height: 188px; object-fit: cover; border-radius: 14px; box-shadow: 0 18px 50px rgba(0, 0, 0, .45); }
.mw-szene__pfeil { font-size: 2rem; color: var(--mw-akzent-text); opacity: 0; transition: opacity .6s .3s; }
.mw-szene__neu { opacity: 0; transform: translateX(40px) scale(.94); }
.mw-kino__szene.is-wechsel .mw-szene__alt { opacity: .5; transform: scale(.86); filter: grayscale(1); }
.mw-kino__szene.is-wechsel .mw-szene__pfeil { opacity: 1; }
.mw-kino__szene.is-wechsel .mw-szene__neu { opacity: 1; transform: none; }
.mw-szene__satz { margin: 4px 0 0; font-size: 15px; color: var(--mw-leise); max-width: 34rem; }
.mw-szene__satz b { color: var(--mw-hell); font-weight: 600; }
.mw-szene__gross { margin: 0; font-family: var(--serif); font-size: 1.3125rem; line-height: 1.3; color: var(--mw-hell); }
.mw-plus { color: #9FDCAE; }
.mw-minus { color: #F4A99A; }
.mw-szene__liste { margin: 0; padding: 0; list-style: none; display: grid; gap: 5px; width: 100%; text-align: left; }
.mw-szene__liste li { display: grid; grid-template-columns: 4.6rem 1fr; gap: 10px; align-items: baseline; font-size: 14.5px; color: var(--mw-hell); }
.mw-szene__liste b { font-family: var(--mono); font-size: 12px; letter-spacing: .04em; color: var(--mw-akzent-text); }
.mw-szene__liste i { font-style: normal; font-size: 12.5px; color: var(--mw-leise); }
.mw-ohnebild {
  display: grid; place-items: center; background: rgba(255, 255, 255, .08); color: var(--mw-hell);
  font-family: var(--serif); font-size: 2.25rem; font-weight: 700;
}

/* ── Abschnitte darunter ─────────────────────────────────────────── */
.mw-teil { padding: 56px 0; background: #fff; }
.mw-teil--hell { background: var(--wb-hell, #F9F2E4); }
.mw-teil__kicker { margin: 0 0 6px; font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--terratext, #A04E27); }
.mw-teil__titel { margin: 0; font-family: var(--serif); font-size: 1.75rem; line-height: 1.2; color: var(--wb-tief, #003300); }
.mw-teil__dek { margin: 8px 0 22px; max-width: 41rem; color: var(--wb-leise, #626A5C); line-height: 1.55; }
html[data-marke="pivot"] .mw-teil__kicker { color: #3A35E0; }
html[data-marke="pivot"] .mw-teil__titel { font-family: "Figtree", var(--sans); font-weight: 800; color: #000; }
.mw-leer { color: var(--wb-leise, #626A5C); }

.mw-wechsel { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); gap: 14px; }
.mw-karte { border: 1px solid var(--wb-rand, #E4E1D8); border-radius: 14px; padding: 16px 18px; background: #fff; display: grid; gap: 8px; align-content: start; }
.mw-karte__wann { margin: 0; font-family: var(--mono); font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--wb-leise, #626A5C); }
.mw-karte__wann a { color: var(--wb-tief, #003300); }
.mw-karte__paar { display: flex; align-items: center; gap: 12px; }
.mw-karte__paar figure { margin: 0; display: grid; gap: 4px; justify-items: center; text-align: center; }
.mw-karte__paar figcaption { font-size: 13px; font-weight: 700; color: var(--wb-text, #191C15); max-width: 9rem; }
.mw-karte__bild { width: 84px; height: 105px; object-fit: cover; border-radius: 10px; }
.mw-karte__alt .mw-karte__bild { filter: grayscale(1); opacity: .7; }
.mw-karte__alt figcaption { color: var(--wb-leise, #626A5C); text-decoration: line-through; font-weight: 400; }
.mw-karte__pfeil { font-size: 1.4rem; color: var(--terratext, #A04E27); }
.mw-karte .mw-ohnebild { background: var(--wb-hell, #F9F2E4); color: var(--wb-tief, #003300); font-size: 1.5rem; }
.mw-karte__amt { margin: 0; font-size: 14px; color: var(--wb-text, #191C15); }
.mw-karte__anlass { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--wb-leise, #626A5C); }
.mw-karte__quelle { margin: 0; font-size: 12px; color: var(--wb-leise, #626A5C); }

.mw-weiter { padding: 48px 0 64px; background: var(--wb-hell, #F9F2E4); border-top: 1px solid var(--wb-rand, #E4E1D8); }
.mw-weiter__in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 32px; }
.mw-weiter__titel { margin: 0; font-family: var(--serif); font-size: 1.75rem; line-height: 1.2; color: var(--wb-tief, #003300); }
.mw-weiter__dek { margin: 6px 0 0; max-width: 34rem; color: var(--wb-leise, #626A5C); line-height: 1.55; }
.mw-weiter__knopf {
  display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 22px; border-radius: 10px;
  font-weight: 700; font-size: 15px; text-decoration: none; background: var(--wb-tief, #003300); color: #fff;
}
.mw-weiter__knopf:hover { background: #1F4A1F; }
.mw-weiter__knopf:focus-visible { outline: 3px solid var(--wb-tief, #003300); outline-offset: 2px; }
html[data-marke="pivot"] .mw-weiter__titel { font-family: "Figtree", var(--sans); font-weight: 800; color: #000; }
html[data-marke="pivot"] .mw-weiter__knopf { background: #4B46FF; }
html[data-marke="pivot"] .mw-weiter__knopf:hover { background: #3A35E0; }

@media (min-width: 980px) {
  .mw-kino__kopf { top: 0; bottom: auto; display: flex; flex-direction: column; justify-content: center; height: 100%; width: 44%; padding-right: 0; }
  .mw-kino__szene { left: 71%; width: min(500px, 44%); }
  .mw-kino__szene.is-unten { width: min(620px, 48%); bottom: 66px; }
  .mw-kino__szene.is-unten .mw-szene__liste { grid-template-columns: 1fr 1fr; column-gap: 20px; }
  .mw-kino__szene.is-unten .mw-szene__liste li { grid-template-columns: 3.4rem 1fr; font-size: 14px; }
}
/* Schmal: die Leinwand ist ein eigener Streifen, darunter Steuerung und Text */
@media (max-width: 979px) {
  .mw-kino { display: flex; flex-direction: column; min-height: 0; padding-top: 60px; }
  .mw-kino__netz { position: relative; inset: auto; height: 380px; flex: none; order: 1; }
  .mw-kino__szene, .mw-kino__szene.is-unten { top: 250px; bottom: auto; transform: translate(-50%, -44%); }
  .mw-kino__szene.is-an, .mw-kino__szene.is-unten.is-an { transform: translate(-50%, -50%); }
  .mw-steuer { position: static; order: 2; padding: 4px 16px 0; }
  .mw-kino__kopf { position: static; order: 3; padding: 18px 24px 36px; }
  .mw-kino__direkt { top: 12px; right: 12px; }
}
@media (max-width: 640px) {
  .mw-kino__kopf { padding: 16px 16px 28px; }
  .mw-steuer__wo { display: none; }
  .mw-steuer__k--pause { min-width: 92px; }
  .mw-szene__bild { width: 108px; height: 135px; }
  .mw-szene__paar { gap: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .mw-kino__kopf, .mw-kino__szene, .mw-szene__paar figure, .mw-szene__pfeil { transition: none; }
  .mw-steuer__leiste button::after { transition: none; }
}