/* ==========================================================================
   Resonanz · Bausteine 1a · was die Vorschau nur angedeutet hat (Anmeldung, Formulare,
   Teile, Tabellen, Schalen-Zustände, Cover mit Bild). Von Hand gepflegt.
   Gestaltung und Komponenten stehen in styles.css (abgeleitet aus vorschau.css).
   ========================================================================== */

/* Links, die in der Vorschau Knöpfe waren */
a.kachel__knopf, a.band__karte, a.verlauf__zeile, a.leiste__eintrag, a.chip, a.knopf, a.marke { color: inherit; text-decoration: none; }
a.knopf { color: var(--tinte); }
a.knopf--voll { color: var(--papier); }
.kachel__knopf[aria-current="true"] .cover { outline: 2px solid var(--tinte); outline-offset: 4px; }
.band__karte[aria-current="true"] { border-color: var(--tinte); }
.verlauf__zeile[aria-current="true"] .verlauf__titel { color: var(--glut-tief); }
.leiste__eintrag[aria-current="true"] { background: var(--papier-hell); color: var(--tinte); box-shadow: inset 2px 0 0 var(--glut); }
.chip:disabled { opacity: .45; }

/* Cover mit Bild · die Typografie bleibt darunter, bis das Bild geladen ist */
.cover__bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity var(--uebergang); }
.cover--bild .cover__bild { opacity: 1; }
.cover--bild::before, .cover--bild > span { visibility: hidden; }

/* Zustände der Schale */
.ohne-schale .app { display: block; height: auto; min-height: 100vh; }
.ohne-schale .leiste, .ohne-schale .player, .ohne-schale .tableiste, .ohne-schale .detail, .ohne-schale .griff,
.ohne-schale .kopfzeile, .ohne-schale .buehne { display: none !important; }
.ohne-schale .inhalt { overflow: visible; padding: 0 16px; }
.ohne-detail .detail, .ohne-detail .griff { display: none !important; }
@media (min-width: 1280px) {
  .ohne-detail .app { grid-template-columns: var(--leiste-b) minmax(0, 1fr); grid-template-areas: "leiste inhalt" "player player"; }
}
.detail__leer { padding: 28vh 12px 0; text-align: center; }

/* Anmeldung */
.anmeldung { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: calc(32px + env(safe-area-inset-top)) 0 32px; }
.anmeldung__karte { width: min(360px, 100%); display: flex; flex-direction: column; gap: 22px; }
.anmeldung .marke { margin: 0; justify-content: center; }
.anmeldung .marke__zeichen { width: 34px; height: 34px; }
.anmeldung .marke__wort { font-size: 30px; }
.anmeldung .marke__unterzeile { padding: 0; margin-top: -14px; text-align: center; }
.anmeldung .knopf { width: 100%; padding: 11px 16px; font-size: 14px; }

/* Formulare */
.formular { display: flex; flex-direction: column; gap: 14px; max-width: 420px; }
.feld { display: flex; flex-direction: column; gap: 6px; }
.feld__name { font: 700 10px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--hauch); }
.feld input, .feld select {
  width: 100%; border: 1px solid var(--linie); background: var(--papier-hell); border-radius: var(--r);
  padding: 10px 12px; font-size: 16px; color: var(--tinte);       /* 16 px · sonst zoomt Safari am iPhone */
  transition: border-color var(--uebergang), box-shadow var(--uebergang);
}
.feld input:focus, .feld select:focus { border-color: var(--glut); box-shadow: 0 0 0 3px var(--glut-hauch); }
.feld--zeile { flex-direction: row; align-items: center; gap: 10px; font-size: 13px; color: var(--tinte-2); }
.feld--zeile input { width: auto; }
.feld__hinweis { font: italic 400 11.5px/1.3 var(--serif); color: var(--leise); }   /* Erläuterung unter einem Feld */
.fehler { min-height: 1.4em; font: italic 400 13.5px/1.4 var(--serif); color: var(--glut); }

/* Meldung (kurz, unten mittig) */
.meldung {
  position: fixed; left: 50%; bottom: calc(var(--player-h) + 18px); transform: translateX(-50%); z-index: 60;
  max-width: calc(100vw - 32px); padding: 9px 16px; border-radius: 999px; background: var(--tinte); color: var(--papier);
  font-size: 13px; box-shadow: var(--schatten-2); animation: aufsteigen 220ms cubic-bezier(.2,.7,.2,1) both;
}

/* Seiten (Einstellungen, Verwaltung) */
.seite { display: flex; flex-direction: column; gap: 34px; padding-top: 18px; max-width: 880px; }
.seite__text { font-size: 13.5px; color: var(--tinte-2); }
.zeile-knoepfe { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.verwaltung__status { font-size: 13px; color: var(--tinte-2); }
.bereich-wahl { display: flex; flex-wrap: wrap; gap: 8px 22px; padding-top: 2px; }
.tabelle-rahmen { overflow-x: auto; }
.tabelle { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.tabelle th { text-align: left; font: 700 10px/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--hauch); padding: 8px 12px 8px 0; border-bottom: 1px solid var(--tinte); }
.tabelle td { padding: 8px 12px 8px 0; border-bottom: 1px solid var(--linie-fein); vertical-align: top; color: var(--tinte-2); }
.tabelle td.pfad { font: 400 11.5px/1.45 ui-monospace, Menlo, monospace; word-break: break-all; }

/* Baum: Gruppe „Filme“ und Hinweis bei sehr vielen Personen */
.baum__gruppe { cursor: pointer; }
.baum__mehr { display: block; padding: 4px 8px 6px 2px; }

/* Raster nachladen */
.mehr { display: flex; justify-content: center; padding-top: 28px; }

/* Teile (Detailspalte und Bühne) */
.teile { display: flex; flex-direction: column; border-top: 1px solid var(--linie); }
.teile--lang { max-height: 420px; overflow-y: auto; overscroll-behavior: contain; }
.teil { border-bottom: 1px solid var(--linie-fein); }
.teil__knopf { width: 100%; display: grid; grid-template-columns: 2.2em minmax(0, 1fr) auto; gap: 10px; align-items: baseline;
  padding: 8px 4px; text-align: left; font-size: 13px; color: var(--tinte-2); border-radius: 4px; }
.teil__knopf:hover:not(:disabled) { background: var(--papier-tief); color: var(--tinte); }
.teil__nr { font: 700 11px/1 var(--sans); color: var(--hauch); font-variant-numeric: tabular-nums; }
.teil__titel { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.teil__dauer { font-size: 11.5px; color: var(--leise); }
.teil[aria-current="true"] .teil__knopf { color: var(--tinte); font-weight: 700; box-shadow: inset 2px 0 0 var(--glut); }
.teil.ist-fehlt .teil__knopf { opacity: .45; }

/* Zusammenfassung: Editor und weitere erlaubte Tags */
.werkzeuge { display: flex; flex-wrap: wrap; gap: 6px; }
.zusammenfassung h2 { font: 700 16px/1.3 var(--serif); color: var(--tinte); margin: 16px 0 6px; }
.zusammenfassung table { border-collapse: collapse; margin: .8em 0; font-size: 13px; }
.zusammenfassung th, .zusammenfassung td { border: 1px solid var(--linie); padding: 4px 8px; text-align: left; vertical-align: top; }
.zusammenfassung[contenteditable="true"] { min-height: 8em; padding: 6px 2px; }
.schlagworte { display: flex; flex-wrap: wrap; gap: 6px; }
.beschreibung > summary { cursor: pointer; list-style: none; }
.beschreibung > summary::-webkit-details-marker { display: none; }
.beschreibung > p { margin-top: 10px; white-space: pre-line; font-size: 13px; line-height: 1.6; color: var(--tinte-2); }

/* Player ohne Medium */
.player.ist-leer .player__knoepfe, .player.ist-leer .player__zeitleiste, .player.ist-leer .player__rechts { opacity: .45; pointer-events: none; }

/* Bühne in 1a · Bild oder Cover links, Teile rechts (Mitlesen und Notizen kommen mit 1b) */
.buehne__bild { min-height: 0; display: grid; grid-template-rows: minmax(0, 1fr); place-items: center; padding: 28px 0; }
/* Video füllt die Fläche und skaliert im Seitenverhältnis · ohne feste Zeilenhöhe ragte es unter die Player-Leiste */
.buehne__bild video { width: 100%; height: 100%; object-fit: contain; background: transparent; }
.buehne__bild video:not([data-aktiv]) { display: none; }
.buehne__cover { width: min(340px, 70%); }
.buehne__cover:empty { display: none; }
.buehne__teile { min-height: 0; overflow-y: auto; padding: 28px 0 40px; display: flex; flex-direction: column; gap: 12px; }
.buehne__raum--1a:has(> .buehne__teile[hidden]) { grid-template-columns: minmax(0, 1fr); }

@media (max-width: 999.98px) {
  .meldung { bottom: calc(var(--tab-h) + var(--strip-h) + env(safe-area-inset-bottom) + 14px); }
  .buehne__raum--1a { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .buehne__bild { padding: 14px 0; }
  .buehne__cover { width: min(260px, 70vw); }
  .buehne__teile { padding: 10px 0; border-top: 1px solid var(--linie); }
  .seite { padding-top: 6px; }
}

/* Abspielen blockiert (play() ohne Geste, etwa nach „Hören“ im eigenen Fenster) · gut sichtbar über der Player-Leiste */
.player__blockiert { position: absolute; left: 50%; bottom: calc(100% + 12px); transform: translateX(-50%); z-index: 5;
  white-space: nowrap; box-shadow: 0 6px 24px rgba(0, 0, 0, .18); }

/* ---------- Ergänzungen 2026-10-20 · Lautstärke, Bild in Bild, einfache Suche (styles.css bleibt abgeleitet) ---------- */
.laut { position: relative; display: flex; align-items: center; margin-right: 4px; }
.laut__schieber { width: 78px; display: flex; align-items: center; padding: 0 8px 0 2px; }
.regler--laut { --pos: 100%; }
.symknopf.ist-stumm, .symknopf.ist-an { color: var(--glut); }
/* Trenner zwischen Ton-Werkzeugen und Tempo/Schlaf · Haarlinie wie im Papier */
.laut::after { content: ""; width: 1px; height: 18px; background: var(--linie); margin-left: 2px; }
.leiste__suche input:focus, .suchfeld input { outline: none; }
.suchfeld:focus-within { border-bottom-color: var(--glut); }
.suchfeld input::placeholder { color: var(--hauch); }

@media (min-width: 1000px) and (max-width: 1279.98px) {
  /* Lautstärke · nur der Knopf in der Leiste, Schieber steigt beim Zeigen darüber auf (wie die Tempoliste) */
  .laut::after { display: none; }
  .laut .laut__schieber {
    position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translate(-50%, 4px); z-index: 30;
    width: 148px; padding: 12px 14px; border-radius: var(--r);
    background: var(--papier-hell); border: 1px solid var(--linie); box-shadow: var(--schatten-2);
    opacity: 0; visibility: hidden; transition: opacity var(--uebergang), transform var(--uebergang), visibility 0s linear 180ms;
  }
  .laut .laut__schieber::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 12px; }   /* Brücke für den Zeiger */
  .laut:hover .laut__schieber, .laut:focus-within .laut__schieber {
    opacity: 1; visibility: visible; transform: translate(-50%, 0); transition: opacity var(--uebergang), transform var(--uebergang);
  }
}

@media (max-width: 999.98px) {
  .player__rechts .laut, .player__rechts [data-bildinbild] { display: none; }
  .player__rechts [data-bildinbild].ist-an { display: grid; }   /* Video schwebt, Bühne zu · Beenden bleibt im Streifen erreichbar */
  .player-gross .player__rechts .laut { display: flex; }
  .player-gross .player__rechts [data-bildinbild] { display: grid; }
  .player-gross .player__zeitleiste { grid-template-columns: 56px minmax(0,1fr) 56px; }   /* Restzeit über eine Stunde bricht nicht um */
  .tableiste { grid-template-columns: repeat(5, 1fr); }                                   /* fünf Tabs mit Suche */
}