/* medien.css — Pumo Medien (Etappe 20).
 *
 * ⚠️ Alle Namen beginnen mit "medien-" und es gibt KEINE Regel auf *, html
 * oder body. Diese Datei liegt in derselben Seite wie die Karte; eine
 * globale Regel stellte ihr das Aussehen um (jump-namen-mit-vorsatz).
 *
 * ⚠️ Kein eigener Farbtopf — alle Farben kommen aus stil\base.css.
 */

/* ⚠️ DIE ZEILE, OHNE DIE EINE PRUEFUNG BLIND WIRD
   (color-hidden-braucht-eine-css-zeile). Das Merkmal hidden wirkt nur ueber
   das Stylesheet des Browsers, und jedes eigene display schlaegt es. Genau
   daran stand in Etappe 19 die Pinselstaerke sichtbar da und tat nichts,
   waehrend die Pruefung gruen meldete — sie fragte das Merkmal ab statt
   das, was man SIEHT. */
.medien-feld [hidden] { display: none !important; }

.medien-feld {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: radial-gradient(circle at 50% 42%, #24547f 0%, #16324c 62%, #0f2337 100%);
}

/* ---------------------------------------------------------- Die Kopfzeile

   Wie im Shop und in Color: Rueckweg links, Puddingstand rechts, kein
   Titel (shop-kein-titel).                                              */

.medien-kopf {
  flex: none;
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 8px 10px;
}

.medien-rundknopf {
  width: 44px; height: 44px; flex: none;
  border: 2px solid var(--holz-dunkel); border-radius: 50%;
  background: var(--holz-rand); color: #fff;
  display: grid; place-items: center; cursor: pointer;
  transition: transform .15s ease-out;
}
.medien-rundknopf:active { transform: scale(.94); }
.medien-rundknopf:focus-visible { outline: 3px solid var(--fokus); outline-offset: 2px; }
.medien-rundknopf svg { width: 22px; height: 22px; }

.medien-stand {
  display: flex; align-items: center; gap: 6px;
  background: rgba(0,0,0,.28); border-radius: 999px; padding: 6px 12px 6px 8px;
  color: #fff; font-weight: 700; font-size: 15px;
}
.medien-stand img { width: 22px; height: 22px; }

/* ------------------------------------------------------- Hören | Schauen

   ⚠️ KEIN eigener Auswahlbildschirm davor. Ein Kind soll nicht erst eine
   Tuer waehlen und dann noch einmal — die beiden Schalter stehen IMMER da,
   und der aktive sagt seine Lage ueber Form UND Farbe, nicht nur ueber
   Farbe (shop-vier-lagen-sichtbar).                                     */

.medien-wippe {
  flex: none; display: flex; gap: 8px; padding: 0 10px 8px;
}
.medien-wippe button {
  flex: 1 1 0; min-height: 48px; min-width: 0;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font: inherit; font-weight: 700; font-size: 15px;
  border: 2px solid var(--holz-dunkel); border-radius: 12px;
  background: var(--pergament); color: var(--schrift); cursor: pointer;
  transition: transform .15s ease-out;
}
.medien-wippe button:active { transform: scale(.97); }
.medien-wippe button:focus-visible { outline: 3px solid var(--fokus); outline-offset: 2px; }
.medien-wippe button svg { width: 20px; height: 20px; flex: none; }
.medien-wippe button[aria-pressed="true"] {
  background: var(--holz-dunkel); color: #fff;
  box-shadow: inset 0 3px 0 rgba(0,0,0,.25);
}

/* ------------------------------------------------------------- Das Blatt */

.medien-blatt {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  margin: 0 10px 10px;
  background: var(--pergament);
  border: 3px solid var(--holz-dunkel); border-radius: 12px;
  padding: 10px;
}

/* ------------------------------------------------------------ Das Album */

.medien-platte {
  display: flex; gap: 10px; align-items: center;
  margin-bottom: 10px;
}
.medien-platte img {
  width: 76px; height: 76px; flex: none;
  border: 2px solid var(--holz-rand); border-radius: 10px;
  object-fit: cover; background: #fff;
}
.medien-platte-text { min-width: 0; }

/* ⚠️ DIE FARBE MUSS HIER STEHEN. base.css faerbt den body WEISS, weil die
   Karte auf dunklem Grund liegt — und der Albumtitel erbte das. Beim
   ersten Hinsehen am 24.09.2026 stand "Dreamland" weiss auf Pergament und
   war praktisch unsichtbar, waehrend 369 Pruefungen gruen meldeten. Die
   Liedzeilen darunter waren in Ordnung, weil sie ihre Farbe selbst setzen.
   Das ist das zehnte Mal, dass Hinsehen etwas findet, das Messen nicht sah
   (namen-gruen-ist-hier-besonders-blind). */
.medien-platte-titel {
  font-size: 16px; font-weight: 800; line-height: 1.2;
  color: var(--schrift);
}
.medien-platte-zeile {
  font-size: 13px; color: var(--schrift-lesbar); margin-top: 3px;
  /* Ziffern in gleicher Breite — sonst springt die Zeile beim Zaehlen. */
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------- Die Lieder */

.medien-liste { display: flex; flex-direction: column; gap: 6px; }

.medien-lied {
  display: flex; align-items: center; gap: 9px;
  min-height: 52px; padding: 6px 9px;
  border: 2px solid var(--holz-rand); border-radius: 10px;
  background: #fff; cursor: pointer; font: inherit; text-align: left;
  color: var(--schrift);
  transition: transform .15s ease-out;
}
.medien-lied:active { transform: scale(.98); }
.medien-lied:focus-visible { outline: 3px solid var(--fokus); outline-offset: 2px; }

/* ⚠️ Das laufende Lied haengt NICHT nur an der Farbe: es bekommt
   zusaetzlich das Klangzeichen und fette Schrift. */
.medien-lied[aria-current="true"] {
  border-color: var(--gruen-tief); border-width: 3px;
  background: #f2f9ee;
}
.medien-lied[aria-current="true"] .medien-lied-name { font-weight: 800; }

.medien-lied-nr {
  flex: none; width: 26px; text-align: center;
  font-size: 13px; font-weight: 700; color: var(--schrift-lesbar);
  font-variant-numeric: tabular-nums;
}
.medien-lied-zeichen { flex: none; width: 20px; display: grid; place-items: center; }
.medien-lied-zeichen svg { width: 18px; height: 18px; color: var(--gruen-tief); }
.medien-lied-name {
  flex: 1 1 auto; min-width: 0;
  font-size: 14px; font-weight: 600; line-height: 1.25;
}
.medien-lied-dauer {
  flex: none; font-size: 13px; color: var(--schrift-lesbar);
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------- Die Bedienung

   Unten auf Pergament — dort, wo der Daumen hinkommt. Dieselbe Lage wie
   der Werkzeugkasten in Color.                                          */

.medien-bedienung {
  flex: none;
  background: var(--pergament);
  border-top: 3px solid var(--holz-dunkel);
  padding: 9px 10px calc(9px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: 8px;
}
.medien-bedienung-titel {
  font-size: 13px; font-weight: 700; line-height: 1.2; color: var(--schrift);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.medien-balken {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; color: var(--schrift-lesbar);
  font-variant-numeric: tabular-nums;
}
.medien-balken-spur {
  flex: 1 1 auto; height: 10px; border-radius: 999px;
  background: rgba(0,0,0,.14); overflow: hidden;
}
.medien-balken-fuell { height: 100%; width: 0; background: var(--gruen-tief); }

.medien-knopfreihe {
  display: flex; align-items: center; justify-content: center; gap: 12px;
}

.medien-spring {
  width: 52px; height: 52px; flex: none;
  display: grid; place-items: center;
  border: 2px solid var(--holz-dunkel); border-radius: 50%;
  background: #fff; color: var(--schrift); cursor: pointer;
  transition: transform .15s ease-out;
}
.medien-spring:active { transform: scale(.94); }
.medien-spring:focus-visible { outline: 3px solid var(--fokus); outline-offset: 2px; }
.medien-spring:disabled { opacity: .4; cursor: default; }
.medien-spring svg { width: 24px; height: 24px; }

/* ⚠️ Der wichtigste Knopf ist der groesste: 68 Punkte statt der geforderten
   44. Ein Vierjaehriger trifft mit dem ganzen Daumen, nicht mit der
   Fingerspitze.

   ⚠️ UND ER IST DUNKLER ALS DIE UEBRIGEN GRUENEN KNOEPFE DER APP.
   Nachgerechnet am 24.09.2026: Weiss auf --gruen (#4a9b3c) kommt auf
   3,47:1 und liegt damit unter der Lesbarkeitsgrenze von 4,5:1. Auf
   --gruen-tief (#35722a) sind es 5,85:1. Beides sind vorhandene Farben der
   App — es ist keine neue erfunden, nur die dunklere genommen.
   ⚠️ Derselbe zu helle Ton traegt SCHRIFT auf dem Fertig-Knopf in Color und
   auf dem Hauptknopf im Kontoschirm. Dort NICHT angefasst: das sind zwei
   fertige Bereiche und braucht Marcos Go (steht als offener Punkt). */
.medien-grossknopf {
  width: 68px; height: 68px; flex: none;
  display: grid; place-items: center;
  border: 3px solid #23501c; border-radius: 50%;
  background: var(--gruen-tief); color: #fff; cursor: pointer;
  box-shadow: 0 4px 0 #23501c;
  transition: transform .15s ease-out;
}
.medien-grossknopf:active { transform: translateY(3px); box-shadow: 0 1px 0 #23501c; }
.medien-grossknopf:focus-visible { outline: 3px solid var(--fokus); outline-offset: 3px; }
.medien-grossknopf svg { width: 32px; height: 32px; }

/* ------------------------------------------------------------ Die Filme */

.medien-raster { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }

/* Ab Tabletbreite drei nebeneinander. Die Bilder bleiben sonst riesig. */
@media (min-width: 700px) {
  .medien-raster { grid-template-columns: repeat(3, 1fr); }
}

.medien-film {
  position: relative;
  display: flex; flex-direction: column; gap: 5px;
  padding: 6px; border: 2px solid var(--holz-rand); border-radius: 10px;
  background: #fff; cursor: pointer; font: inherit; text-align: center;
  color: var(--schrift);
  transition: transform .15s ease-out;
}
.medien-film:active { transform: scale(.97); }
.medien-film:focus-visible { outline: 3px solid var(--fokus); outline-offset: 2px; }

.medien-film-bild { position: relative; }
.medien-film-bild img {
  width: 100%; aspect-ratio: 9 / 16; object-fit: cover;
  border-radius: 6px; background: #ddd; display: block;
}

/* Das Abspielzeichen liegt auf dem Standbild — es sagt "hier kommt ein
   Film", ohne dass man lesen koennen muss. */
.medien-film-play {
  position: absolute; inset: 0; display: grid; place-items: center;
  pointer-events: none;
}
.medien-film-play span {
  width: 42px; height: 42px; border-radius: 50%;
  background: rgba(0,0,0,.55); border: 2px solid rgba(255,255,255,.9);
  display: grid; place-items: center;
}
.medien-film-play svg { width: 20px; height: 20px; color: #fff; }

.medien-film-name {
  font-size: 12px; font-weight: 700; line-height: 1.25; min-height: 2.5em;
}

/* -------------------------------------------------- Der laufende Film */

.medien-kino {
  flex: 1 1 auto; min-height: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 0 10px 10px;
}
.medien-kino video {
  max-width: 100%; max-height: 100%;
  border: 3px solid var(--holz-dunkel); border-radius: 10px;
  background: #000; display: block;
}

/* ⚠️ Kein Bereich darf sein Dasein aus einer Bewegung beziehen
   (start-einzug-ist-nur-aussen). Hier bewegt sich nur, was schon da ist. */
@media (prefers-reduced-motion: reduce) {
  .medien-feld * { transition: none !important; animation: none !important; }
}