/* Zuhören -- eigenes Design ohne CSS-Framework (Vorschau 08.11.2026, von Micha abgesegnet: „Go“).
   Handy zuerst, eine Spalte. Nachtblau, Bernstein, Papier. Hell/Dunkel folgt dem Gerät (thema.js). */

@font-face { font-family: 'Nunito'; font-style: normal; font-weight: 300 900; font-display: block;
  src: url('../fonts/nunito-latin.woff2?v=1') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
                 U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Nunito'; font-style: normal; font-weight: 300 900; font-display: block;
  src: url('../fonts/nunito-latin-ext.woff2?v=1') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
                 U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --bg: #f4efe6; --bg2: #ebe3d4;
  --text: #1f2433; --text2: #5b6070; --text3: #8d909c;
  --karte: #fffcf6; --rand: rgba(31, 36, 51, .09); --feld: #ffffff; --feld-rand: rgba(31, 36, 51, .2);
  --akzent: #c7832a; --akzent-hell: #f6e7cf; --akzent-text: #1b1408; --tief: #26304d; --tief-hell: #e2e6f1;
  --knopf: var(--tief); --knopf-text: #fff;
  --gruen: #2f7a55; --gruen-hell: #e0efe6; --rot: #b8322a; --rot-hell: #f8e3e0;
  --schatten: 0 10px 30px -18px rgba(31, 36, 51, .5), 0 1px 3px rgba(31, 36, 51, .08);
  --radius: 18px; color-scheme: light;
  --frage-flaeche: var(--karte); --frage-text: var(--text); --frage-linie: var(--rand); --frage-akzent: var(--tief);
  --frage-akzent-text: #fff; --frage-radius: var(--radius); --frage-knopf-radius: 999px;
}
[data-bs-theme="dark"] {
  --bg: #12151f; --bg2: #0d1018;
  --text: #eef0f5; --text2: #b2b7c6; --text3: #7d8293;
  --karte: #1b2030; --rand: rgba(255, 255, 255, .07); --feld: #141826; --feld-rand: rgba(255, 255, 255, .16);
  --akzent: #e9a54a; --akzent-hell: #3a2d1a; --tief: #a9b8e8; --tief-hell: #232a40;
  --knopf: var(--akzent); --knopf-text: #1b1408;
  --gruen: #6cc59c; --gruen-hell: #1c3329; --rot: #f08a7e; --rot-hell: #3d2220;
  --schatten: 0 14px 34px -18px rgba(0, 0, 0, .8); color-scheme: dark;
  --frage-akzent: var(--akzent); --frage-akzent-text: #1b1408;
}

* { box-sizing: border-box; }
/* kein Aufblitzen beim Antippen, kein Springen durch die Bildlaufleiste (alle Apps, Micha 30.10.2026) */
html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; scrollbar-gutter: stable; }
body { margin: 0; min-height: 100dvh; font-family: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 17px; line-height: 1.5; color: var(--text); background: var(--bg);
  background-image: radial-gradient(circle at 100% 0, var(--akzent-hell) 0, transparent 40vmax),
                    radial-gradient(circle at 0 100%, var(--tief-hell) 0, transparent 45vmax);
  background-attachment: fixed; padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
body.mit-mini { padding-bottom: calc(148px + env(safe-area-inset-bottom)); }
a { color: var(--tief); }
[data-bs-theme="dark"] a { color: var(--akzent); }
h1 { font-size: 1.7rem; font-weight: 900; margin: 6px 0 12px; line-height: 1.2; }
h2 { font-size: 1.05rem; font-weight: 800; margin: 22px 0 10px; }
h2.oben { margin-top: 8px; }
p { margin: 0 0 8px; }
.seite { max-width: 720px; margin: 0 auto; padding: 4px 16px 16px; }
.leise { color: var(--text2); } .klein { font-size: .86rem; } .mitte-text { text-align: center; }
.gruen-text { color: var(--gruen); } .nowrap { white-space: nowrap; }
.ellipse { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[hidden] { display: none !important; }

/* --- Kopf --- */
.kopf { display: flex; align-items: center; justify-content: space-between; gap: 10px; max-width: 720px; margin: 0 auto;
  padding: calc(12px + env(safe-area-inset-top)) 16px 4px; }
.marke { display: flex; align-items: center; gap: 9px; font-weight: 900; font-size: 1.15rem; color: var(--text) !important; text-decoration: none; }
.marke .logo { width: 32px; height: 32px; border-radius: 10px; background: var(--tief); color: var(--akzent);
  display: grid; place-items: center; font-size: 1.05rem; }
[data-bs-theme="dark"] .marke .logo { background: #2a3352; }
.kopf-rechts { display: flex; align-items: center; gap: 6px; }
.offline { font-size: .8rem; font-weight: 800; color: var(--gruen); background: var(--gruen-hell); padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.offline.aus { color: var(--text2); background: var(--rand); }
.kopf-knopf { color: var(--text2) !important; font-size: 1.25rem; padding: 4px 8px; border-radius: 999px; text-decoration: none; }
.kopf-knopf.aktiv { color: var(--akzent) !important; }

/* --- Bausteine --- */
.karte { display: block; background: var(--karte); border: 1px solid var(--rand); border-radius: var(--radius);
  box-shadow: var(--schatten); padding: 16px; margin: 0 0 12px; color: inherit; text-decoration: none; }
a.karte { color: inherit !important; }
.knopf { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 999px; cursor: pointer;
  font: inherit; font-weight: 800; padding: 12px 20px; background: var(--knopf); color: var(--knopf-text) !important; text-decoration: none; }
.knopf.breit { width: 100%; margin: 6px 0; }
.knopf.zart { background: var(--rand); color: var(--text) !important; }
.knopf:disabled { opacity: .55; cursor: default; }
.klein-knopf { padding: 7px 14px; font-size: .9rem; margin-top: 8px; }
.knopfreihe { display: flex; flex-wrap: wrap; gap: 8px; }
.knopfreihe form { margin: 0; }
.link-knopf { background: none; border: 0; font: inherit; color: var(--text2); cursor: pointer; padding: 6px 8px; border-radius: 999px; }
.meldung { padding: 10px 14px; border-radius: 12px; margin: 8px 0 12px; font-weight: 700; }
.meldung.ok { background: var(--gruen-hell); color: var(--gruen); }
.meldung.fehler { background: var(--rot-hell); color: var(--rot); }
.meldung form { margin: 0; }
.hinweis { display: flex; gap: 10px; align-items: flex-start; font-size: .9rem; color: var(--text2); text-decoration: none; }
.hinweis > i { color: var(--gruen); font-size: 1.1rem; line-height: 1.3; }
.hinweis > span { display: flex; flex-direction: column; }
.hinweise .hinweis + .hinweis { margin-top: 10px; }
.hinweise .hinweis > i { color: var(--akzent); }
.zurueck { display: inline-flex; align-items: center; gap: 4px; color: var(--text2) !important; text-decoration: none; font-weight: 800; font-size: .9rem; }
.leer { text-align: center; padding: 26px 20px; }
.leer > i { font-size: 2.2rem; color: var(--akzent); }
.leer p { margin: 8px 0 14px; color: var(--text2); }
.leer h1 { font-size: 2.4rem; }
.titel { font-weight: 900; line-height: 1.25; }
.balken { height: 6px; border-radius: 99px; background: var(--rand); overflow: hidden; margin: 8px 0 4px; }
.balken i { display: block; height: 100%; width: 0; background: var(--akzent); border-radius: 99px; transition: width .4s; }

/* --- Cover --- */
.cover { flex: none; width: 64px; height: 88px; border-radius: 8px 12px 12px 8px; position: relative; overflow: hidden;
  color: rgba(255,255,255,.92); font-weight: 900; font-size: .62rem; line-height: 1.15; padding: 8px 7px; hyphens: auto;
  overflow-wrap: anywhere; box-shadow: inset 4px 0 0 rgba(0,0,0,.18), 0 6px 14px -8px rgba(0,0,0,.6); }
.cover.gross { width: 168px; height: 232px; font-size: 1.05rem; padding: 18px 16px; margin: 6px auto 0; border-radius: 10px 16px 16px 10px; }
.c1 { background: linear-gradient(160deg, #3a4a7a, #1f2742); } .c2 { background: linear-gradient(160deg, #a05a2c, #5e2f17); }
.c3 { background: linear-gradient(160deg, #2f6d5a, #173a30); } .c4 { background: linear-gradient(160deg, #7a3a5c, #3e1c30); }
.c5 { background: linear-gradient(160deg, #6b6f7c, #3a3d46); }

/* --- Bibliothek --- */
.weiter { display: flex; gap: 14px; align-items: center; }
.weiter .info, .eintrag .info { flex: 1; min-width: 0; }
.rund-play { flex: none; width: 52px; height: 52px; border-radius: 50%; background: var(--akzent); color: var(--akzent-text);
  font-size: 1.6rem; display: grid; place-items: center; }
.arbeit .hinweis { margin-top: 12px; }
.liste .eintrag { display: flex; gap: 14px; align-items: center; padding: 12px 0; border-top: 1px solid var(--rand); color: inherit; text-decoration: none; }
.liste .eintrag:first-child { border-top: 0; padding-top: 2px; }
.liste .eintrag:last-child { padding-bottom: 2px; }
.marke-klein { display: inline-flex; align-items: center; gap: 4px; font-size: .78rem; font-weight: 800; padding: 2px 9px; border-radius: 999px; margin: 3px 4px 0 0; }
.m-fertig { background: var(--gruen-hell); color: var(--gruen); }
.m-gehoert { background: var(--tief-hell); color: var(--tief); }
.m-arbeit { background: var(--akzent-hell); color: var(--akzent); }
.m-warte { background: var(--rand); color: var(--text2); }
.m-fehler { background: var(--rot-hell); color: var(--rot); }

/* --- Neu / Vorbereiten --- */
.ablage { display: flex; flex-direction: column; align-items: center; gap: 4px; border: 2px dashed var(--feld-rand); border-radius: var(--radius);
  padding: 28px 16px; text-align: center; background: var(--karte); cursor: pointer; margin-bottom: 14px; }
.ablage i { font-size: 2.2rem; color: var(--akzent); }
.ablage input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.ablage.laedt { opacity: .7; pointer-events: none; }
.datei { display: flex; align-items: center; gap: 12px; }
.datei .bi-file-earmark-pdf { font-size: 1.8rem; color: #c0392b; }
.datei .info { flex: 1; min-width: 0; }
.feld-titel { display: block; font-weight: 800; font-size: .86rem; color: var(--text2); margin: 4px 0 4px; }
.feld { width: 100%; font: inherit; color: var(--text); background: var(--feld); border: 1px solid var(--feld-rand); border-radius: 12px; padding: 10px 12px; }
.feld:focus { outline: 2px solid var(--akzent); outline-offset: 1px; }
.stimme { display: flex; align-items: center; gap: 12px; padding: 14px; border: 2px solid var(--rand); border-radius: 16px; margin-bottom: 10px;
  background: var(--karte); cursor: pointer; }
.stimme input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.stimme:has(input:checked) { border-color: var(--akzent); background: color-mix(in srgb, var(--akzent-hell) 55%, var(--karte)); }
.stimme .punkt { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--text3); flex: none; display: grid; place-items: center; }
.stimme input:checked + .punkt { border-color: var(--akzent); }
.stimme input:checked + .punkt::after { content: ''; width: 11px; height: 11px; border-radius: 50%; background: var(--akzent); }
.stimme input:focus-visible + .punkt { outline: 2px solid var(--akzent); outline-offset: 2px; }
.stimme .info { flex: 1; display: flex; flex-direction: column; }
.probe { flex: none; width: 42px; height: 42px; border-radius: 50%; border: 0; background: var(--rand); color: var(--text); font-size: 1.15rem;
  display: grid; place-items: center; cursor: pointer; }
.probe.spielt { background: var(--akzent); color: var(--akzent-text); }
.schalter { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--rand); cursor: pointer; }
.schalter:first-child { border-top: 0; padding-top: 0; } .schalter:last-child { padding-bottom: 0; }
.schalter > span:first-child { display: flex; flex-direction: column; }
.schalter input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.kipp { width: 46px; height: 28px; border-radius: 99px; background: var(--text3); position: relative; flex: none; transition: background .15s; }
.kipp::after { content: ''; position: absolute; left: 3px; top: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; transition: left .15s; }
.schalter input:checked + .kipp { background: var(--akzent); }
.schalter input:checked + .kipp::after { left: 21px; }
.schalter input:focus-visible + .kipp { outline: 2px solid var(--akzent); outline-offset: 2px; }
.kapitel-liste .kapitel-zeile { display: flex; align-items: center; gap: 10px; padding: 6px 0; }
.klein-feld { padding: 7px 10px; font-size: .95rem; min-width: 0; flex: 1; }
.haken { flex: none; cursor: pointer; }
.haken input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.haken span { width: 24px; height: 24px; border-radius: 7px; border: 2px solid var(--text3); display: grid; place-items: center; }
.haken input:checked + span { background: var(--akzent); border-color: var(--akzent); }
.haken input:checked + span::after { content: '✓'; color: var(--akzent-text); font-weight: 900; font-size: .85rem; }
.haken input:focus-visible + span { outline: 2px solid var(--akzent); outline-offset: 2px; }
.kapitel-zeile:has(.haken input:not(:checked)) .klein-feld { opacity: .5; text-decoration: line-through; }
.textprobe p { font-size: .95rem; color: var(--text2); }
.textprobe p.ueberschrift { font-weight: 900; color: var(--text); }

/* --- Player --- */
.player { text-align: center; }
.player > .titel { font-size: 1.3rem; margin-top: 16px; }
.arbeit-klein { text-align: left; margin-top: 14px; padding: 12px 14px; }
.zeit { display: flex; justify-content: space-between; font-size: .82rem; color: var(--text2); font-variant-numeric: tabular-nums; }
.regler { -webkit-appearance: none; appearance: none; width: 100%; height: 28px; background: transparent; margin: 14px 0 0; cursor: pointer;
  --anteil: 0%; }
.regler::-webkit-slider-runnable-track { height: 6px; border-radius: 99px;
  background: linear-gradient(to right, var(--akzent) var(--anteil), var(--rand) var(--anteil)); }
.regler::-moz-range-track { height: 6px; border-radius: 99px; background: var(--rand); }
.regler::-moz-range-progress { height: 6px; border-radius: 99px; background: var(--akzent); }
.regler::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; margin-top: -6px; border-radius: 50%; background: var(--akzent);
  box-shadow: 0 2px 6px rgba(0,0,0,.3); border: 0; }
.regler::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--akzent); border: 0; }
.steuer { display: flex; align-items: center; justify-content: center; gap: 18px; margin: 12px 0 6px; }
.steuer button { border: 0; background: none; color: var(--text); font-size: 1.7rem; position: relative; cursor: pointer; padding: 4px; }
.steuer button small { position: absolute; left: 0; right: 0; top: 50%; margin-top: -.5em; font-size: .6rem; font-weight: 900; }
.steuer .gross { width: 76px; height: 76px; border-radius: 50%; background: var(--akzent); color: var(--akzent-text); font-size: 2.4rem; display: grid; place-items: center; }
.steuer .gross.laedt i { animation: puls 1s infinite alternate; }
@keyframes puls { from { opacity: 1; } to { opacity: .4; } }
.extras { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.pille { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 999px; background: var(--rand); font: inherit;
  font-weight: 800; font-size: .88rem; color: var(--text) !important; border: 0; cursor: pointer; text-decoration: none; }
.pille.an { background: var(--akzent-hell); color: var(--akzent) !important; }
h2.links { text-align: left; }
.mitlesen { text-align: left; font-size: 1.02rem; line-height: 1.7; color: var(--text2); max-height: 46vh; overflow-y: auto; overscroll-behavior: contain; }
.mitlesen p { margin: 0 0 12px; }
.mitlesen p.ueberschrift { font-weight: 900; color: var(--text); }
.mitlesen span[data-t] { cursor: pointer; border-radius: 5px; padding: 1px 2px; }
.mitlesen span.jetzt { background: var(--akzent-hell); color: var(--text); }
.offline-karte { text-align: left; margin-top: 4px; }
.offline-karte .knopf { margin-top: 10px; }
.loeschen-form { text-align: center; margin: 12px 0; }

/* --- Kapitel --- */
.kapitel .eintrag { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid var(--rand); color: inherit; text-decoration: none; }
.kapitel .eintrag:first-child { border-top: 0; padding-top: 0; }
.kapitel .eintrag:last-child { padding-bottom: 0; }
.kapitel .nr { width: 30px; height: 30px; border-radius: 10px; background: var(--rand); display: grid; place-items: center; font-weight: 900; font-size: .85rem; flex: none; }
.kapitel .eintrag.jetzt .nr { background: var(--akzent); color: var(--akzent-text); }
.kapitel .eintrag.gehoert { color: var(--text3); }
.kapitel .eintrag.nicht-fertig { color: var(--text3); }
.kapitel .info { flex: 1; min-width: 0; }
.kapitel .dauer { font-size: .82rem; color: var(--text2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.lesezeichen { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-top: 1px solid var(--rand); }
.lesezeichen:first-child { border-top: 0; padding-top: 0; }
.lesezeichen .hinweis { flex: 1; color: var(--text); }
.lesezeichen .hinweis > i { color: var(--akzent); }
.lesezeichen form { margin: 0; }

/* --- Einstellungen --- */
.speicher-zeile { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--rand); }
.speicher-zeile:first-child { border-top: 0; }
.speicher-zeile .info { flex: 1; min-width: 0; }

/* --- Mini-Player und untere Leiste --- */
.mini { position: fixed; left: 8px; right: 8px; bottom: calc(66px + env(safe-area-inset-bottom)); max-width: 704px; margin: 0 auto;
  background: var(--tief); color: #fff; border-radius: 16px; display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 14px;
  box-shadow: 0 10px 30px -10px rgba(0,0,0,.5); overflow: hidden; z-index: 5; }
[data-bs-theme="dark"] .mini { background: #2a3352; }
.mini-info { flex: 1; min-width: 0; display: flex; flex-direction: column; color: #fff !important; text-decoration: none; }
.mini-titel { font-weight: 900; font-size: .92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-kapitel { font-size: .8rem; opacity: .8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-knopf { flex: none; width: 42px; height: 42px; border-radius: 50%; border: 0; background: var(--akzent); color: #1b1408; font-size: 1.4rem;
  display: grid; place-items: center; cursor: pointer; }
.mini-balken { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255,255,255,.15); }
.mini-balken i { display: block; height: 100%; width: 0; background: var(--akzent); }
.leiste { position: fixed; left: 0; right: 0; bottom: 0; background: var(--karte); border-top: 1px solid var(--rand); z-index: 6;
  display: flex; justify-content: space-around; padding: 8px 8px calc(8px + env(safe-area-inset-bottom)); }
.leiste a { flex: 1; text-align: center; color: var(--text3) !important; text-decoration: none; font-size: .74rem; font-weight: 800; }
.leiste a i { display: block; font-size: 1.35rem; line-height: 1.2; }
.leiste a.aktiv { color: var(--akzent) !important; }

/* --- Anmeldung, Fehler --- */
.mitte { min-height: 70dvh; display: grid; place-items: center; }
.anmelde-karte { width: min(100%, 400px); text-align: center; }
.anmelde-karte h1 { font-size: 1.8rem; }
.anmelde-symbol { width: 76px; height: 76px; margin: 6px auto 10px; display: block; border-radius: 20px; }
.anmelde-formular { text-align: left; }
.anmelde-formular label { display: block; font-weight: 800; font-size: .86rem; color: var(--text2); margin: 12px 0 4px; }
.anmelde-formular input { width: 100%; font: inherit; color: var(--text); background: var(--feld); border: 1px solid var(--feld-rand); border-radius: 12px; padding: 10px 12px; }
.anmelde-formular .knopf { margin-top: 16px; }
.trenner { display: flex; align-items: center; gap: 10px; color: var(--text3); font-size: .85rem; margin: 18px 0 4px; }
.trenner::before, .trenner::after { content: ''; flex: 1; height: 1px; background: var(--rand); }
.knopf.leise { background: var(--rand); color: var(--text) !important; }

/* --- Kurzmeldung --- */
.toast { position: fixed; left: 50%; bottom: calc(160px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 20;
  background: var(--text); color: var(--bg); padding: 10px 16px; border-radius: 999px; font-weight: 800; font-size: .9rem;
  box-shadow: 0 10px 30px -10px rgba(0,0,0,.5); max-width: calc(100% - 32px); text-align: center; transition: opacity .4s; }
.toast.weg { opacity: 0; }