/* ==========================================================================
   Resonanz · Gestaltung (abgeleitet aus vorschau.css · nicht von Hand ändern)
   Richtung: Hörraum aus Papier · Bibliothekskatalog, Merriweather als Stimme,
   Merriweather Sans als Bedienung, ein einziges Motiv: der Nachhall-Ring.
   ========================================================================== */

/* ---------- Schriften (lokal) ---------- */
@font-face { font-family: "Merriweather"; src: url("fonts/merriweather-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Merriweather"; src: url("fonts/merriweather-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Merriweather"; src: url("fonts/merriweather-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Merriweather"; src: url("fonts/merriweather-latin-700-italic.woff2") format("woff2"); font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Merriweather"; src: url("fonts/merriweather-latin-900-normal.woff2") format("woff2"); font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Merriweather Sans"; src: url("fonts/merriweather-sans-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Merriweather Sans"; src: url("fonts/merriweather-sans-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

/* ---------- Gestaltungs-Variablen ---------- */
:root {
  color-scheme: light;
  /* Grund */
  --papier:        #F1EBDF;
  --papier-hell:   #F8F4EC;
  --papier-tief:   #E8E0D0;
  --leiste-grund:  #EAE3D5;
  /* Schrift */
  --tinte:   #221F1A;
  --tinte-2: #463F36;
  --leise:   #6C6356;
  --hauch:   #8E8474;
  /* Linien */
  --linie:      #D6CBB6;
  --linie-fein: #E2D9C8;
  /* Akzent · Glut (Ziegel, gedämpft) */
  --glut:        #9C3F2C;
  --glut-tief:   #7E3021;
  --glut-hauch:  rgba(156, 63, 44, .11);
  --markierung:  rgba(196, 140, 60, .28);
  --auf-glut:    #FBF5EC;
  /* Cover-Schrift */
  --cover-schrift: #F5EFE3;
  /* Schatten */
  --schatten-1: 0 1px 0 rgba(60, 45, 25, .04), 0 8px 22px -14px rgba(60, 40, 20, .42);
  --schatten-2: 0 1px 0 rgba(60, 45, 25, .05), 0 22px 48px -26px rgba(60, 40, 20, .55);

  /* Schrift */
  --serif: "Merriweather", "Iowan Old Style", Georgia, serif;
  --sans:  "Merriweather Sans", "Avenir Next", "Helvetica Neue", sans-serif;

  /* Maße */
  --leiste-b: 224px;
  --detail-b: 320px;
  --player-h: 84px;
  --strip-h: 60px;
  --tab-h: 58px;
  --r-klein: 4px;
  --r: 10px;
  --r-gross: 16px;
  --rand: clamp(20px, 2.6vw, 40px);

  --uebergang: 180ms cubic-bezier(.2, .7, .2, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --papier:        #1A1815;
    --papier-hell:   #23201C;
    --papier-tief:   #13110F;
    --leiste-grund:  #161411;
    --tinte:   #EEE6D7;
    --tinte-2: #D3C9B7;
    --leise:   #A69C8B;
    --hauch:   #7F7666;
    --linie:      #3A342C;
    --linie-fein: #2B2722;
    --glut:        #DC8763;
    --glut-tief:   #E9A07F;
    --glut-hauch:  rgba(220, 135, 99, .15);
    --markierung:  rgba(214, 160, 80, .28);
    --auf-glut:    #1A1815;
    --schatten-1: 0 1px 0 rgba(0,0,0,.3), 0 10px 24px -14px rgba(0,0,0,.8);
    --schatten-2: 0 1px 0 rgba(0,0,0,.3), 0 24px 50px -24px rgba(0,0,0,.9);
  }
}

@media (min-width: 1280px) { :root { --leiste-b: 264px; --detail-b: 384px; } }
@media (min-width: 1600px) { :root { --leiste-b: 280px; --detail-b: 420px; } }

/* ---------- Grundlagen ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font: 400 15px/1.5 var(--sans);
  color: var(--tinte);
  background: var(--papier);
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}
/* Papierkorn, kaum sichtbar */
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 100; opacity: .35; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .28 0 0 0 0 .2 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark) { body::before { mix-blend-mode: screen; opacity: .12; } }

h1, h2, h3, p, ol, ul { margin: 0; }
ol, ul { padding: 0; list-style: none; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
button:disabled { cursor: not-allowed; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--glut); outline-offset: 3px; border-radius: 4px; }
[hidden] { display: none !important; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sym { width: 16px; height: 16px; flex: none; }
.zeit, .zaehler { font-variant-numeric: tabular-nums lining-nums; font-feature-settings: "tnum" 1, "lnum" 1; }

/* Etikett · Laufweite statt Kapitälchen */
.eyebrow {
  font: 700 10.5px/1.2 var(--sans);
  letter-spacing: .17em; text-transform: uppercase; color: var(--leise);
}
.eyebrow--linie { display: flex; align-items: center; gap: 14px; }
.eyebrow--linie::after { content: ""; flex: 1; height: 1px; background: var(--linie); }

/* ---------- App-Raster ---------- */
.app {
  display: grid;
  height: 100vh; height: 100dvh;
  grid-template-columns: var(--leiste-b) minmax(0, 1fr) var(--detail-b);
  grid-template-rows: minmax(0, 1fr) var(--player-h);
  grid-template-areas: "leiste inhalt detail" "player player player";
}

/* ---------- Seitenleiste ---------- */
.leiste {
  grid-area: leiste; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  background: var(--leiste-grund);
  border-right: 1px solid var(--linie);
  padding: 26px 18px 32px;
  display: flex; flex-direction: column; gap: 26px;
}
.marke { display: flex; align-items: center; gap: 10px; color: var(--tinte); text-decoration: none; margin-bottom: -20px; }
.marke__zeichen { width: 26px; height: 26px; color: var(--glut); }
.marke__wort { font: 900 21px/1 var(--serif); letter-spacing: -.01em; }
.marke__unterzeile { font: italic 400 12.5px/1.4 var(--serif); color: var(--leise); padding-left: 36px; }

.leiste__suche, .suchfeld { position: relative; display: flex; align-items: center; }
.leiste__suche .sym, .suchfeld > .sym { position: absolute; left: 11px; color: var(--leise); pointer-events: none; }
.leiste__suche input {
  width: 100%; border: 1px solid var(--linie); background: var(--papier-hell); border-radius: 999px;
  padding: 8px 12px 8px 34px; font-size: 13px; color: var(--tinte);
  transition: border-color var(--uebergang), box-shadow var(--uebergang);
}
.leiste__suche input::placeholder { color: var(--hauch); }
.leiste__suche input:focus { border-color: var(--glut); box-shadow: 0 0 0 3px var(--glut-hauch); }

.leiste__gruppe { display: flex; flex-direction: column; gap: 8px; }
.leiste__gruppe .eyebrow { padding: 0 8px; }
.leiste__liste { display: flex; flex-direction: column; gap: 1px; }
.leiste__eintrag {
  width: 100%; display: flex; align-items: center; gap: 8px; text-align: left;
  padding: 6px 8px; border-radius: 6px; font-size: 13.5px; color: var(--tinte-2);
  transition: background var(--uebergang), color var(--uebergang);
}
.leiste__eintrag:hover { background: var(--papier-tief); color: var(--tinte); }
.leiste__eintrag[aria-current="true"] { background: var(--papier-hell); color: var(--tinte); box-shadow: inset 2px 0 0 var(--glut); }
.leiste__eintrag--stark { font-weight: 700; color: var(--tinte); }
.zaehler { margin-left: auto; font-size: 11px; color: var(--hauch); }
.zaehler--neu { color: var(--glut); font-weight: 700; letter-spacing: .02em; }

/* Baum */
.baum { display: flex; flex-direction: column; gap: 1px; font-size: 13.5px; }
.baum details > summary { list-style: none; }
.baum details > summary::-webkit-details-marker { display: none; }
.baum__zeile { display: flex; align-items: center; border-radius: 6px; }
.baum__zeile:hover { background: var(--papier-tief); }
.baum__pfeil {
  width: 22px; height: 28px; display: grid; place-items: center; flex: none; color: var(--hauch); cursor: pointer;
}
.baum__pfeil svg { width: 12px; height: 12px; transition: transform var(--uebergang); }
details[open] > summary .baum__pfeil svg { transform: rotate(90deg); }
.baum__platz { width: 22px; flex: none; }
.baum__knopf {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; text-align: left;
  padding: 5px 8px 5px 2px; color: var(--tinte-2);
}
.baum__knopf span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.baum__knopf[aria-current="true"] { color: var(--tinte); font-weight: 700; }
.baum__zeile:has(.baum__knopf[aria-current="true"]) { background: var(--papier-hell); box-shadow: inset 2px 0 0 var(--glut); }
.baum__kinder { margin-left: 11px; padding-left: 4px; border-left: 1px solid var(--linie); }
.baum__ebene-0 > .baum__zeile .baum__knopf { color: var(--tinte); }

/* ---------- Inhalt ---------- */
.inhalt { grid-area: inhalt; min-width: 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 var(--rand) 56px; }
.kopfzeile {
  position: sticky; top: 0; z-index: 6; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 0 14px; margin-bottom: 8px; background: linear-gradient(var(--papier) 70%, transparent);
}
.kopfzeile__info { font-size: 12px; color: var(--hauch); letter-spacing: .02em; text-align: right; }

.ansicht { animation: auftauchen 420ms cubic-bezier(.2,.7,.2,1) both; }
.abschnittskopf { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin: 14px 0 14px; }
.abschnittskopf .eyebrow--linie { flex: 1; }
.abschnittskopf--bib { margin-top: 44px; align-items: flex-end; border-bottom: 1px solid var(--tinte); padding-bottom: 12px; }
.seitentitel { font: 900 clamp(26px, 2.6vw, 38px)/1.1 var(--serif); letter-spacing: -.015em; color: var(--tinte); }
.seitentitel .pfad-trenner { color: var(--hauch); font-weight: 400; padding: 0 .2em; }
.seitentitel__zahl { font: italic 400 14px/1 var(--serif); color: var(--leise); white-space: nowrap; }
.seitentitel__zahl span { font-style: normal; font-variant-numeric: tabular-nums; }

/* Weiterhören · Band */
.band {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(268px, 300px); gap: 14px;
  overflow-x: auto; scroll-snap-type: x mandatory; padding: 2px 2px 14px; margin: 0 -2px;
  scrollbar-width: thin; scrollbar-color: var(--linie) transparent;
}
.band__karte {
  scroll-snap-align: start; display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 14px; align-items: stretch;
  padding: 12px; text-align: left; border-radius: var(--r); background: var(--papier-hell);
  border: 1px solid var(--linie-fein); box-shadow: var(--schatten-1);
  transition: transform var(--uebergang), box-shadow var(--uebergang), border-color var(--uebergang);
}
.band__karte:hover { transform: translateY(-2px); box-shadow: var(--schatten-2); }
.band__karte[aria-pressed="true"] { border-color: var(--tinte); }
.band__text { display: flex; flex-direction: column; min-width: 0; gap: 3px; }
.band__titel { font: 700 13.5px/1.3 var(--serif); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.band__teil { font-size: 11.5px; color: var(--leise); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.band__fuss { margin-top: auto; display: flex; flex-direction: column; gap: 5px; }
.band__zeit { display: flex; justify-content: space-between; font-size: 11px; color: var(--leise); }
.band__zeit b { color: var(--tinte); font-weight: 700; }

.fortschritt { height: 3px; border-radius: 3px; background: var(--linie); overflow: hidden; }
.fortschritt > span { display: block; height: 100%; width: var(--wert, 0%); background: var(--glut); border-radius: inherit; transition: width 600ms linear; }

/* Facetten */
.facetten {
  position: sticky; top: 62px; z-index: 5; display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px;
  padding: 12px 0; margin-bottom: 18px; background: var(--papier); border-bottom: 1px solid var(--linie-fein);
}
.facetten__gruppe { display: flex; align-items: center; gap: 6px; }
.facetten__label { font: 700 10px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--hauch); margin-right: 2px; }
.facetten__wahl { display: flex; align-items: center; gap: 6px; }
.facetten__wahl select {
  appearance: none; -webkit-appearance: none; border: 1px solid var(--linie); background: var(--papier-hell);
  border-radius: 999px; padding: 5px 28px 5px 12px; font-size: 12.5px; color: var(--tinte); width: auto; max-width: 168px;
  background-image: linear-gradient(45deg, transparent 50%, var(--leise) 50%), linear-gradient(135deg, var(--leise) 50%, transparent 50%);
  background-position: calc(100% - 15px) 50%, calc(100% - 11px) 50%; background-size: 4px 4px; background-repeat: no-repeat;
}
.facetten__zurueck { font-size: 12px; color: var(--glut); text-decoration: underline; text-underline-offset: 3px; margin-left: auto; }

.chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px;
  border: 1px solid var(--linie); background: var(--papier-hell); font-size: 12.5px; color: var(--tinte-2);
  transition: background var(--uebergang), color var(--uebergang), border-color var(--uebergang);
}
.chip .sym { width: 14px; height: 14px; }
.chip:hover { border-color: var(--leise); }
.chip[aria-pressed="true"] { background: var(--tinte); border-color: var(--tinte); color: var(--papier); }

/* Raster der Kacheln */
.raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 30px 22px; }
.kachel { min-width: 0; animation: auftauchen 520ms cubic-bezier(.2,.7,.2,1) both; animation-delay: calc(var(--i, 0) * 40ms); }
.kachel__knopf { display: block; width: 100%; text-align: left; border-radius: var(--r-klein); }
.kachel__knopf .cover { transition: transform var(--uebergang), box-shadow var(--uebergang); }
.kachel__knopf:hover .cover { transform: translateY(-3px); box-shadow: var(--schatten-2); }
.kachel__knopf[aria-pressed="true"] .cover { outline: 2px solid var(--tinte); outline-offset: 4px; }
.kachel__titel { margin-top: 12px; font: 700 13.5px/1.32 var(--serif); color: var(--tinte); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.kachel__urheber { display: block; margin-top: 3px; font-size: 12px; color: var(--leise); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kachel__arten { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 4px 8px; font: 700 9.5px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--hauch); }
.kachel__arten .angehoert { color: var(--glut); }
.kachel.ist-angehoert .cover { filter: saturate(.55); }
.leer { padding: 40px 0; font: italic 400 15px/1.5 var(--serif); color: var(--leise); }

/* ---------- Cover ohne Bild ---------- */
.cover {
  --c: #4A5B63;
  position: relative; container-type: inline-size; aspect-ratio: 4 / 5; overflow: hidden;
  display: flex; flex-direction: column; justify-content: space-between; gap: 6%;
  padding: 11% 11% 12% 15%; border-radius: var(--r-klein); color: var(--cover-schrift);
  background:
    radial-gradient(circle at 92% 104%,
      transparent 0 17%, rgba(255,255,255,.10) 17% 17.6%,
      transparent 17.6% 29%, rgba(255,255,255,.075) 29% 29.5%,
      transparent 29.5% 41%, rgba(255,255,255,.05) 41% 41.4%,
      transparent 41.4% 53%, rgba(255,255,255,.03) 53% 53.3%, transparent 53.3%),
    linear-gradient(160deg, rgba(255,255,255,.07), rgba(0,0,0,.14)),
    var(--c);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05), var(--schatten-1);
}
.cover::before { content: ""; position: absolute; left: 7%; top: 0; bottom: 0; width: 1px; background: rgba(255,255,255,.14); }
.cover__urheber { font: 700 7.4cqi/1.25 var(--sans); letter-spacing: .16em; text-transform: uppercase; opacity: .78; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cover__titel { font: 700 11.2cqi/1.16 var(--serif); letter-spacing: -.005em; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; hyphens: manual; }
.cover--kurz .cover__titel { font-size: 15cqi; font-weight: 900; }
.cover__fuss { display: flex; align-items: center; gap: 4cqi; font: 700 6.4cqi/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; opacity: .7; }
.cover__fuss::before { content: ""; width: 9cqi; height: 1px; background: currentColor; }
.cover--mini { padding: 10% 10% 10% 16%; border-radius: 3px; }
.cover--mini .cover__urheber, .cover--mini .cover__fuss { display: none; }
.cover__initial { display: none; }
.cover--mini { justify-content: flex-end; }
.cover--mini .cover__titel { display: none; }
.cover--mini .cover__initial { display: block; font: 900 46cqi/.9 var(--serif); letter-spacing: -.02em; opacity: .92; }

/* ---------- Detail ---------- */
.detail {
  grid-area: detail; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  border-left: 1px solid var(--linie); background: var(--papier-hell);
  padding: 26px 26px 48px;
}
.detail__inhalt { display: flex; flex-direction: column; gap: 28px; animation: auftauchen 360ms cubic-bezier(.2,.7,.2,1) both; }
.detail .detail__zurueck, .detail .detail__schliessen { display: none; }
.detail__werkzeug { display: flex; align-items: center; justify-content: flex-end; gap: 2px; margin: -14px -12px -16px; }
.detail__werkzeug .knopf .sym { width: 14px; height: 14px; }
.detail__links, .detail__rechts { display: flex; flex-direction: column; gap: 28px; min-width: 0; }
.detail__cover { width: 100%; max-width: 300px; margin: 4px auto 0; }
.detail__cover .cover { box-shadow: var(--schatten-2); }
.detail__kopf { display: flex; flex-direction: column; gap: 6px; text-align: left; }
.detail__pfad { color: var(--glut); }
.detail__titel { font: 900 24px/1.18 var(--serif); letter-spacing: -.012em; }
.detail__urheber { font: italic 400 15px/1.4 var(--serif); color: var(--tinte-2); }
.detail__meta { font-size: 12px; color: var(--leise); }

.abschnitt { display: flex; flex-direction: column; gap: 12px; }
.abschnitt__kopf { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.abschnitt__kopf .eyebrow { flex: 1; }

.fassungen { display: flex; flex-direction: column; border-top: 1px solid var(--linie); }
.fassung { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--linie); }
.fassung > .sym { width: 18px; height: 18px; color: var(--leise); }
.fassung__text { flex: 1; min-width: 0; }
.fassung__art { font-weight: 700; font-size: 13.5px; }
.fassung__info { font-size: 12px; color: var(--leise); }

.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; white-space: nowrap;
  padding: 7px 14px; border-radius: 999px; border: 1px solid var(--linie); background: var(--papier-hell);
  font-size: 12.5px; font-weight: 700; color: var(--tinte);
  transition: background var(--uebergang), border-color var(--uebergang), color var(--uebergang);
}
.knopf:hover:not(:disabled) { border-color: var(--tinte-2); }
.knopf--voll { background: var(--tinte); border-color: var(--tinte); color: var(--papier); }
.knopf--voll:hover:not(:disabled) { background: var(--glut-tief); border-color: var(--glut-tief); color: var(--auf-glut); }
.knopf--glut { background: var(--glut); border-color: var(--glut); color: var(--auf-glut); }
.knopf--leise { background: transparent; border-color: transparent; color: var(--leise); }
.knopf--leise:hover:not(:disabled) { color: var(--tinte); border-color: var(--linie); }
.knopf--klein { padding: 6px 11px; font-size: 12px; }
.knopf:disabled { opacity: .55; }
.knopf__fussnote { font: italic 400 11.5px/1.3 var(--serif); color: var(--leise); }

.zusammenfassung { font: 400 14px/1.72 var(--serif); color: var(--tinte-2); }
.zusammenfassung h3 { font: 700 15px/1.3 var(--serif); color: var(--tinte); margin: 14px 0 6px; }
.zusammenfassung p + p { margin-top: .8em; }
.zusammenfassung ul { margin: .8em 0 0; padding-left: 1.1em; list-style: "· "; }
.zusammenfassung li { padding-left: .2em; }
.zusammenfassung[contenteditable="true"] { outline: 1px dashed var(--glut); outline-offset: 8px; border-radius: 2px; background: var(--papier); }

.leerhinweis { font: italic 400 13.5px/1.55 var(--serif); color: var(--leise); }

/* ---------- Detailspalte · Griff zum Ziehen ---------- */
.app { position: relative; }
.griff {
  position: absolute; top: 0; bottom: var(--player-h); right: calc(var(--detail-b) - 6px); width: 12px; z-index: 9;
  cursor: col-resize; touch-action: none; display: flex; justify-content: center; border-radius: 0;
}
.griff::before { content: ""; width: 1px; height: 100%; background: transparent; transition: background var(--uebergang), width var(--uebergang); }
.griff::after {
  content: ""; position: absolute; top: 50%; left: 50%; width: 4px; height: 38px; margin: -19px 0 0 -2px; border-radius: 4px;
  background: var(--linie); opacity: 0; transition: opacity var(--uebergang), background var(--uebergang);
}
.app:hover .griff::after { opacity: .9; }
.griff:hover::before, .griff:focus-visible::before, .zieht .griff::before { width: 2px; background: var(--glut); }
.griff:hover::after, .griff:focus-visible::after, .zieht .griff::after { opacity: 1; background: var(--glut); }
.griff:focus-visible { outline: none; }
.zieht, .zieht * { cursor: col-resize !important; user-select: none; -webkit-user-select: none; }
.zieht .detail, .zieht .inhalt { pointer-events: none; }

/* ---------- Detailspalte · groß (über der Mitte) ---------- */
.detail-gross .griff { display: none; }
.detail-gross .detail { grid-area: 1 / 2 / 2 / 4; z-index: 7; border-left: 0; padding-inline: clamp(24px, 4vw, 64px); animation: auftauchen 260ms cubic-bezier(.2,.7,.2,1) both; }
.detail-gross .detail__inhalt, body.fenster .detail__inhalt { max-width: 1120px; margin: 0 auto; }
@media (min-width: 1000px) {
  .detail-gross .detail__inhalt { display: grid; grid-template-columns: minmax(240px, 340px) minmax(0, 1fr); gap: 28px clamp(32px, 5vw, 80px); align-items: start; }
  .detail-gross .detail__werkzeug { grid-column: 1 / -1; }
  .detail-gross .detail__links { position: sticky; top: 0; }
  .detail-gross .detail__cover { margin: 0; }
}

/* ---------- Geschwindigkeit · Auswahl ---------- */
.tempo { position: relative; }
.tempo__liste {
  position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%); z-index: 30; min-width: 96px;
  max-height: min(340px, 60vh); overflow-y: auto; padding: 6px; border-radius: var(--r);
  background: var(--papier-hell); border: 1px solid var(--linie); box-shadow: var(--schatten-2);
  animation: aufsteigen 180ms cubic-bezier(.2,.7,.2,1) both;
}
.tempo__liste [role=option] {
  display: flex; justify-content: space-between; gap: 12px; padding: 6px 10px; border-radius: 6px; cursor: pointer;
  font: 400 13px/1.2 var(--sans); font-variant-numeric: tabular-nums; color: var(--tinte-2); white-space: nowrap;
}
.tempo__liste [role=option]:hover, .tempo__liste [role=option].ist-aktiv { background: var(--papier-tief); color: var(--tinte); }
.tempo__liste [role=option][aria-selected=true] { font-weight: 700; color: var(--glut); }
.tempo__liste [role=option][aria-selected=true]::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--glut); align-self: center; }
.tempo__liste:focus-visible { outline: 2px solid var(--glut); outline-offset: 2px; }
.tempo__liste:focus:not(:focus-visible) .ist-aktiv { background: transparent; }

/* ---------- Eigenes Fenster ---------- */
.fensterkopf { display: none; }
body.fenster .fensterkopf {
  position: sticky; top: 0; z-index: 10; display: flex; align-items: center; flex-wrap: wrap; gap: 6px 18px;
  padding: calc(12px + env(safe-area-inset-top)) clamp(16px, 4vw, 48px) 12px;
  background: var(--leiste-grund); border-bottom: 1px solid var(--linie);
}
.marke--klein { margin: 0; }
.marke--klein .marke__zeichen { width: 20px; height: 20px; }
.marke--klein .marke__wort { font-size: 16px; }
.fensterkopf__hinweis { display: flex; align-items: center; gap: 8px; font: 700 10.5px/1.2 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--leise); }
.fensterkopf__punkt { width: 7px; height: 7px; border-radius: 50%; background: var(--hauch); }
.haupt-spielt .fensterkopf__punkt { background: var(--glut); box-shadow: 0 0 0 0 var(--glut-hauch); animation: puls 2.4s ease-out infinite; }
.fensterkopf__stand { margin-left: auto; font-size: 12px; color: var(--tinte-2); max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.fenster .app { display: flex; flex-direction: column; height: auto; min-height: 100vh; }
body.fenster .fensterkopf { order: -1; }
body.fenster .leiste, body.fenster .inhalt, body.fenster .player, body.fenster .tableiste, body.fenster .buehne, body.fenster .griff, body.fenster .detail__werkzeug { display: none !important; }
body.fenster .detail {
  position: static; inset: auto; transform: none; visibility: visible; transition: none; overflow: visible;
  border: 0; padding: 32px clamp(16px, 4vw, 48px) 56px; background: var(--papier-hell); min-height: calc(100vh - 50px);
}
@media (min-width: 760px) {
  body.fenster .detail__inhalt { display: grid; grid-template-columns: minmax(220px, 300px) minmax(0, 1fr); gap: 28px clamp(28px, 5vw, 64px); align-items: start; }
  body.fenster .detail__links { position: sticky; top: 80px; }
  body.fenster .detail__cover { margin: 0; }
}

@keyframes puls { 0% { box-shadow: 0 0 0 0 rgba(156,63,44,.35); } 100% { box-shadow: 0 0 0 9px rgba(156,63,44,0); } }

/* ---------- Mittlere Breite · Detail als Fläche über dem rechten Rand ---------- */
@media (min-width: 1000px) and (max-width: 1279.98px) {
  .app { grid-template-columns: var(--leiste-b) minmax(0, 1fr); grid-template-areas: "leiste inhalt" "player player"; }
  .griff { display: none; }
  .detail {
    position: fixed; top: 0; right: 0; bottom: var(--player-h); width: min(420px, 88vw); z-index: 12;
    border-left: 1px solid var(--linie); box-shadow: -28px 0 56px -28px rgba(50, 32, 14, .5);
    transform: translateX(104%); visibility: hidden;
    transition: transform 300ms cubic-bezier(.2,.7,.2,1), visibility 0s linear 300ms;
  }
  .detail-offen .detail { transform: none; visibility: visible; transition: transform 300ms cubic-bezier(.2,.7,.2,1); }
  .detail-gross .detail { left: var(--leiste-b); width: auto; box-shadow: none; animation: none; }
  .detail .detail__schliessen { display: grid; }
}

.suchfeld { margin: 22px 0 10px; flex-wrap: wrap; gap: 6px 14px; border-bottom: 2px solid var(--tinte); padding-bottom: 6px; }
.suchfeld > .sym { left: 0; top: 14px; width: 22px; height: 22px; color: var(--tinte); }
.suchfeld input {
  flex: 1 1 260px; min-width: 0; border: 0; background: transparent; padding: 6px 0 6px 34px;
  font: italic 400 clamp(22px, 2.4vw, 30px)/1.3 var(--serif); color: var(--tinte);
}
.suchfeld input::-webkit-search-cancel-button { display: none; }
.suchfeld__hinweis { font-size: 12px; color: var(--hauch); align-self: center; }

/* ---------- Verlauf ---------- */
.verlauf__gruppe { margin-top: 28px; }
.verlauf__gruppe .eyebrow { margin-bottom: 8px; }
.verlauf__zeile { width: 100%; display: grid; grid-template-columns: 40px minmax(0,1fr) auto; gap: 14px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--linie-fein); text-align: left; }
.verlauf__zeile:hover .verlauf__titel { text-decoration: underline; text-decoration-color: var(--glut); text-underline-offset: 3px; }
.verlauf__titel { font: 700 14px/1.3 var(--serif); }
.verlauf__info { font-size: 12px; color: var(--leise); }
.verlauf__wann { font-size: 12px; color: var(--hauch); white-space: nowrap; }

/* ---------- Player ---------- */
.player {
  grid-area: player; position: relative; z-index: 20; min-width: 0;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 1.3fr) minmax(0, 1fr); align-items: center; gap: 20px;
  padding: 0 22px; background: var(--papier-hell); border-top: 1px solid var(--linie);
  box-shadow: 0 -12px 30px -24px rgba(60,40,20,.5);
}
.player__linie { display: none; }
.player__medium { display: flex; align-items: center; gap: 12px; min-width: 0; }
.player__cover { width: 50px; flex: none; border-radius: 3px; }
.player__text { min-width: 0; }
.player__titel { font: 700 13.5px/1.3 var(--serif); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.player__teil { font-size: 11.5px; color: var(--leise); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.player__mitte { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; }
.player__knoepfe { display: flex; align-items: center; gap: 18px; }
.player__zeitleiste { width: 100%; display: grid; grid-template-columns: 52px minmax(0,1fr) 52px; align-items: center; gap: 10px; }
.player__zeitleiste .zeit { font-size: 11px; color: var(--leise); text-align: right; }
.player__zeitleiste .zeit--rest { text-align: left; }
.player__rechts { display: flex; align-items: center; justify-content: flex-end; gap: 6px; min-width: 0; }

.symknopf { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; color: var(--tinte-2); transition: background var(--uebergang), color var(--uebergang); }
.symknopf svg { width: 22px; height: 22px; }
.symknopf:hover { background: var(--papier-tief); color: var(--tinte); }
.symknopf[aria-expanded="true"] { color: var(--glut); }

.abspielen {
  position: relative; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
  background: var(--tinte); color: var(--papier); transition: transform var(--uebergang), background var(--uebergang);
}
.abspielen svg { width: 20px; height: 20px; position: relative; z-index: 1; }
.abspielen:hover { transform: scale(1.05); }
.abspielen:active { transform: scale(.96); }
/* Nachhall · zwei Ringe, nur während der Wiedergabe */
.abspielen::before, .abspielen::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1px solid var(--glut); opacity: 0; pointer-events: none;
}
.spielt .abspielen::before { animation: nachhall 3.2s ease-out infinite; }
.spielt .abspielen::after { animation: nachhall 3.2s ease-out 1.6s infinite; }

.regler {
  --pos: 0%; -webkit-appearance: none; appearance: none; width: 100%; height: 18px; background: transparent; cursor: pointer; margin: 0;
}
.regler::-webkit-slider-runnable-track { height: 3px; border-radius: 3px; background: linear-gradient(to right, var(--glut) var(--pos), var(--linie) var(--pos)); }
.regler::-moz-range-track { height: 3px; border-radius: 3px; background: var(--linie); }
.regler::-moz-range-progress { height: 3px; border-radius: 3px; background: var(--glut); }
.regler::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; margin-top: -4.5px; border-radius: 50%; background: var(--tinte); border: 2px solid var(--papier-hell); box-shadow: 0 0 0 1px var(--tinte); }
.regler::-moz-range-thumb { width: 10px; height: 10px; border-radius: 50%; background: var(--tinte); border: 2px solid var(--papier-hell); }
.regler:focus-visible { outline-offset: 2px; }

/* ---------- Großer Player (Bühne) ---------- */
.buehne {
  position: fixed; left: 0; right: 0; top: 0; bottom: var(--player-h); z-index: 15;
  display: flex; flex-direction: column; background: var(--papier);
  padding: 30px clamp(20px, 5vw, 80px) 0; animation: auftauchen 320ms cubic-bezier(.2,.7,.2,1) both;
}
.buehne__kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding-bottom: 18px; border-bottom: 1px solid var(--linie); }
.buehne__titel { font: 900 clamp(20px, 2.2vw, 30px)/1.2 var(--serif); margin-top: 6px; max-width: 32ch; }
.buehne__raum { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 340px); gap: clamp(24px, 4vw, 64px); }

/* ---------- Tableiste ---------- */
.tableiste { display: none; }

/* ---------- Bewegung ---------- */
@keyframes auftauchen { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes aufsteigen { from { opacity: 0; transform: translateY(6px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes nachhall { 0% { transform: scale(1); opacity: .55; } 100% { transform: scale(1.95); opacity: 0; } }
@keyframes nachklang { 0% { background: var(--glut-hauch); } 100% { background: transparent; } }

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

/* ==========================================================================
   Schmal · iPhone und Tablet hochkant (unter 1000 px)
   ========================================================================== */
@media (max-width: 999.98px) {
  .app { display: block; height: auto; min-height: 100vh; }
  .leiste { display: none; }
  .inhalt {
    overflow: visible; padding: 0 16px calc(var(--tab-h) + var(--strip-h) + env(safe-area-inset-bottom) + 28px);
  }
  .kopfzeile {
    position: static; padding: calc(16px + env(safe-area-inset-top)) 0 4px; background: none; margin: 0;
  }
  .kopfzeile::before { content: "Resonanz"; font: 900 20px/1 var(--serif); }
  
  .kopfzeile__info { font-size: 11px; text-align: right; }

  .band { grid-auto-columns: minmax(250px, 78%); margin: 0 -16px; padding: 2px 16px 14px; scroll-padding-inline: 16px; }
  .abschnittskopf--bib { margin-top: 30px; }
  .facetten {
    top: 0; flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px 18px; padding: 10px 16px; scrollbar-width: none;
  }
  .facetten::-webkit-scrollbar { display: none; }
  .facetten > * { flex: none; }
  .raster { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 24px 14px; }

  /* Medium als Vollbild */
  .detail {
    position: fixed; inset: 0 0 calc(var(--tab-h) + var(--strip-h) + env(safe-area-inset-bottom)) 0; z-index: 25;
    border: 0; padding: calc(12px + env(safe-area-inset-top)) 16px 32px;
    transform: translateX(100%); visibility: hidden;
    transition: transform 300ms cubic-bezier(.2,.7,.2,1), visibility 0s linear 300ms;
  }
  .detail-offen .detail { transform: none; visibility: visible; transition: transform 300ms cubic-bezier(.2,.7,.2,1); }
  .detail .detail__zurueck { display: inline-flex; margin-right: auto; }
  .detail__gross, .detail__fenster, .griff { display: none !important; }
  .detail__werkzeug { margin: -6px -8px -14px; }
  .detail__cover { max-width: 240px; }
  .detail__titel { font-size: 22px; }

  
  
  
  
  
  
  
  
  .suchfeld__hinweis { display: none; }

  /* Player als schmaler Streifen */
  .player {
    position: fixed; left: 0; right: 0; bottom: calc(var(--tab-h) + env(safe-area-inset-bottom)); height: var(--strip-h);
    grid-template-columns: minmax(0, 1fr) auto auto; gap: 4px; padding: 0 8px 0 10px; box-shadow: none;
  }
  .player__linie { display: block; position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: var(--linie); }
  .player__linie span { display: block; height: 100%; width: var(--pos, 0%); background: var(--glut); transition: width 600ms linear; }
  .player__cover { width: 40px; }
  .player__mitte { display: contents; }
  .player__zeitleiste, .player__knoepfe .symknopf, .player__rechts [data-tempo], .player__rechts [data-schlaf] { display: none; }
  .player__rechts { gap: 2px; }
  
  
  .abspielen { width: 38px; height: 38px; }
  
  
  

  /* Tableiste */
  .tableiste {
    display: grid; grid-template-columns: repeat(4, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    height: calc(var(--tab-h) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
    background: var(--leiste-grund); border-top: 1px solid var(--linie);
  }
  .tableiste button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font: 700 10px/1 var(--sans); letter-spacing: .06em; color: var(--leise); }
  .tableiste svg { width: 22px; height: 22px; }
  .tableiste button[aria-current="page"] { color: var(--glut); }

  /* Großer Player · füllt den Schirm, Steuerung vollständig */
  .player-gross .tableiste { display: none; }
  .player-gross .player {
    bottom: 0; height: auto; padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    grid-template-columns: minmax(0, 1fr); gap: 10px;
  }
  .player-gross .player__linie { display: none; }
  .player-gross .player__mitte { display: flex; }
  .player-gross .player__zeitleiste { display: grid; grid-template-columns: 44px minmax(0,1fr) 44px; }
  .player-gross .player__knoepfe { margin: 0; justify-self: center; gap: 26px; }
  .player-gross .player__knoepfe .symknopf { display: grid; }
  .player-gross .player__rechts { justify-content: space-between; }
  .player-gross .player__rechts [data-tempo], .player-gross .player__rechts [data-schlaf] { display: inline-flex; }
  
  
  .buehne { bottom: 0; padding: calc(18px + env(safe-area-inset-top)) 16px 210px; }
  .buehne__raum { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; gap: 8px; }
  
  
  
  
  .buehne__kopf .knopf span { display: none; }
}

@media (max-width: 420px) {
  .kopfzeile__info { display: none; }
  .band__karte { grid-template-columns: 64px minmax(0, 1fr); }
}

/* Großer Player liegt über allem, auch über dem Medium als Vollbild */
.player-gross .buehne { z-index: 35; }
.player-gross .player { z-index: 40; }
.detail:focus, .detail:focus-visible { outline: none; }