:root {
  --night: #040c0f;
  --emerald: #0f4a3e;
  --gold: #c9a24a;
  --gold-l: #ecd593;
  --gold-d: #8c6a24;
  --paper: #f6ecd3;
  --paper-d: #e7d4a8;
  --ink: #2a2116;
  --ink-soft: #6c5638;
  --sajda: #8e2f23;
  --pw: 420px;
  --ph: 600px;
  --cols: 2;
  --fs: 1;
  --top: 72px;
  --bottom: 76px;
  --serif: 'EB Garamond', Georgia, 'Times New Roman', serif;
  --display: 'Cormorant Garamond', 'EB Garamond', Georgia, serif;
  --arabic: 'Amiri', 'Scheherazade New', 'Traditional Arabic', 'Geeza Pro', serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--night);
  color: #efe3c2;
  font-family: var(--serif);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
button { font: inherit; color: inherit; }
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---------- Himmel / Hintergrund ---------- */
.sky {
  position: fixed; inset: 0; z-index: 0;
  background:
    radial-gradient(ellipse 70% 55% at 50% 45%, rgba(22, 96, 80, .55), transparent 70%),
    radial-gradient(ellipse 60% 40% at 50% 115%, rgba(201, 162, 74, .16), transparent 70%),
    linear-gradient(#071a1d, #030a0c);
}
.sky::before {
  content: ""; position: absolute; inset: 0; opacity: .085;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E%3Cg fill='none' stroke='%23e8cf8a' stroke-width='1'%3E%3Crect x='30' y='30' width='36' height='36'/%3E%3Crect x='30' y='30' width='36' height='36' transform='rotate(45 48 48)'/%3E%3Ccircle cx='48' cy='48' r='9'/%3E%3Cpath d='M0 0L30 30M96 0L66 30M0 96L30 66M96 96L66 66M48 0v22M48 96V74M0 48h22M96 48H74'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 96px;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 25%, transparent 78%);
          mask-image: radial-gradient(ellipse at center, #000 25%, transparent 78%);
}
#stars { position: absolute; inset: 0; width: 100%; height: 100%; }

/* ---------- Kopfleiste ---------- */
.bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 14px;
  padding: calc(10px + env(safe-area-inset-top, 0px)) 16px 10px;
  background: linear-gradient(rgba(3, 10, 12, .9), rgba(3, 10, 12, .45));
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(201, 162, 74, .2);
}
.brand { display: flex; flex-direction: column; align-items: center; line-height: 1; pointer-events: none; }
.brand-ar {
  font: 700 1.45rem/1.3 var(--arabic);
  background: linear-gradient(180deg, #f8e8b4, #c99a3c 60%, #9a7428);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.brand-de { font: 600 .7rem/1 var(--display); letter-spacing: .32em; text-transform: uppercase; color: rgba(236, 213, 147, .7); }
.controls { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; justify-content: flex-end; }
.seg { display: flex; gap: 6px; }

.btn, .chip {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  font: 600 .95rem/1 var(--display); letter-spacing: .03em;
  color: var(--gold-l);
  background: rgba(201, 162, 74, .08);
  border: 1px solid rgba(201, 162, 74, .38);
  border-radius: 999px; padding: 8px 14px; min-height: 36px; cursor: pointer;
  transition: background .25s, box-shadow .25s, color .25s, transform .15s;
}
.btn:hover, .chip:hover { background: rgba(201, 162, 74, .18); }
.btn:active, .chip:active { transform: scale(.96); }
.btn:focus-visible, .chip:focus-visible, .arrow:focus-visible, .ti:focus-visible { outline: 2px solid var(--gold-l); outline-offset: 2px; }
.btn.sq { padding: 8px 11px; min-width: 38px; }
.btn small { font-size: .8em; margin-left: 1px; }
.chip-ar { font: 700 1rem/1 var(--arabic); }
.chip[aria-pressed="true"] {
  color: #1d1609;
  background: linear-gradient(180deg, #f0d993, #b88f3a);
  border-color: #f6e3a8;
  box-shadow: 0 0 18px rgba(232, 207, 138, .35), inset 0 1px 0 rgba(255, 255, 255, .5);
}
.chip.shake { animation: shake .4s; }
@keyframes shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }

/* ---------- Bühne & Buch ---------- */
.stage {
  position: fixed; inset: 0; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  padding: var(--top) 16px var(--bottom);
  perspective: 2400px; perspective-origin: 50% 35%;
  touch-action: none;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
body:not(.is-closed) .stage .page { cursor: grab; }
body.dragging, body.dragging .stage .page { cursor: grabbing; }
body.is-closed #btnClose { display: none; }
.book {
  position: relative;
  width: calc(var(--pw) * var(--cols)); height: var(--ph);
  transform-style: preserve-3d;
  transform: rotateX(var(--rx, 5deg)) rotateY(var(--ry, 0deg));
  transition: transform .9s cubic-bezier(.2, .7, .2, 1);
}
.book::before {
  content: ""; position: absolute; left: 3%; right: 3%; bottom: -34px; height: 70px;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, .7), transparent 70%);
  filter: blur(10px); transform: translateZ(-40px);
}
.inner {
  position: absolute; inset: 0; transform-style: preserve-3d;
  transition: transform 1.5s cubic-bezier(.6, .05, .25, 1);
}
.book.spread.closed .inner { transform: translateX(calc(var(--pw) * -.5)); }
.book.hide-left #pageL, .book.hide-left .bl { visibility: hidden; }
.book.single .bl, .book.single #pageL { display: none; }

.board {
  position: absolute; top: -11px; bottom: -11px;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(255, 255, 255, .06), transparent 60%),
    linear-gradient(135deg, #154c40, #0a2c25);
  box-shadow: 0 34px 60px rgba(0, 0, 0, .6), inset 0 0 0 1px rgba(232, 207, 138, .18), inset 0 0 0 5px rgba(0, 0, 0, .15);
  transform: translateZ(-2px);
}
.board.bl { left: -13px; width: calc(var(--pw) + 13px); border-radius: 9px 2px 2px 9px; }
.board.br { left: var(--pw); width: calc(var(--pw) + 13px); border-radius: 2px 9px 9px 2px; }
.book.single .board.br { left: -7px; width: calc(var(--pw) + 20px); border-radius: 4px 9px 9px 4px; }

/* ---------- Seiten ---------- */
.page {
  position: absolute; top: 0; width: var(--pw); height: var(--ph);
  color: var(--ink);
  background-color: var(--paper);
  background-image:
    radial-gradient(ellipse 85% 75% at 50% 45%, rgba(255, 251, 238, .75), transparent 72%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .33 0 0 0 0 .12 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    linear-gradient(180deg, #f8efd8, #efe0bb);
  overflow: hidden;
}
.page.left {
  left: 0; border-radius: 5px 1px 1px 5px;
  box-shadow: -1px 0 0 #e6d6ad, -2px 1px 0 #c8b383, -3px 1px 0 #ead9b2, -4px 2px 0 #c2ab79, -5px 2px 0 #e4d3a8, -6px 3px 0 #b39b69;
}
.page.right {
  left: var(--pw); border-radius: 1px 5px 5px 1px;
  box-shadow: 1px 0 0 #e6d6ad, 2px 1px 0 #c8b383, 3px 1px 0 #ead9b2, 4px 2px 0 #c2ab79, 5px 2px 0 #e4d3a8, 6px 3px 0 #b39b69;
}
.book.single .page.right { left: 0; }
.page.left::after, .page.right::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.page.left::after { background: linear-gradient(to left, rgba(70, 45, 10, .32), rgba(70, 45, 10, .1) 3.5%, transparent 11%), linear-gradient(to right, rgba(70, 45, 10, .08), transparent 4%); }
.page.right::after { background: linear-gradient(to right, rgba(70, 45, 10, .32), rgba(70, 45, 10, .1) 3.5%, transparent 11%), linear-gradient(to left, rgba(70, 45, 10, .08), transparent 4%); }

.page-inner {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  padding: calc(var(--ph) * .048) calc(var(--pw) * .085) calc(var(--ph) * .032);
}
.page-inner::before {
  content: ""; position: absolute; inset: 13px; pointer-events: none;
  border: 3px double rgba(150, 110, 36, .5); border-radius: 2px;
}
.page-inner::after {
  content: ""; position: absolute; inset: 5px; pointer-events: none;
  --r: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg fill='none' stroke='%23a07a2c' stroke-width='1.4'%3E%3Crect x='12' y='12' width='16' height='16'/%3E%3Crect x='12' y='12' width='16' height='16' transform='rotate(45 20 20)'/%3E%3C/g%3E%3Ccircle cx='20' cy='20' r='3.2' fill='%23a07a2c'/%3E%3C/svg%3E");
  background: var(--r) left top / 24px no-repeat, var(--r) right top / 24px no-repeat, var(--r) left bottom / 24px no-repeat, var(--r) right bottom / 24px no-repeat;
}
.runhead {
  display: flex; justify-content: space-between; gap: 8px;
  font: 600 .74rem/1.2 var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--gold-d);
  padding: 2px 4px 7px; margin-bottom: 8px;
  border-bottom: 1px solid rgba(150, 110, 36, .32);
}
.runhead span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.page-body {
  flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 0 4px;
  scrollbar-width: thin; scrollbar-color: rgba(150, 110, 36, .4) transparent;
}
.folio { text-align: center; padding-top: 6px; font: 600 .95rem/1 var(--display); color: var(--gold-d); letter-spacing: .1em; }
.folio span { font-family: var(--arabic); font-size: 1.05rem; }
.folio::before, .folio::after { content: "❧"; font-size: .8rem; margin: 0 .6em; opacity: .7; }
.folio::before { display: inline-block; transform: scaleX(-1); }

/* Messseite (unsichtbar) */
.measure { left: -9999px !important; top: 0; visibility: hidden; position: fixed; }

/* ---------- Text ---------- */
.ayah { padding: .5em 0; }
.ayah + .ayah { border-top: 1px solid; border-image: linear-gradient(90deg, transparent, rgba(160, 120, 40, .45), transparent) 1; }
.ar {
  font-family: var(--arabic); font-size: calc(1.5rem * var(--fs)); line-height: 2.05;
  text-align: right; margin: 0 0 .15em; color: #1c150b;
}
.am { color: var(--gold-d); font-size: .82em; white-space: nowrap; }
.sajda { color: var(--sajda); }
.tr {
  font-style: italic; color: var(--ink-soft);
  font-size: calc(.95rem * var(--fs)); line-height: 1.45; margin: .15em 0;
}
.de {
  font-size: calc(1.04rem * var(--fs)); line-height: 1.5; margin: .2em 0 .1em;
  -webkit-hyphens: auto; hyphens: auto;
}
.ar + .de, .tr + .de { margin-top: .3em; }
.vn {
  display: inline-grid; place-items: center; min-width: 1.6em; height: 1.6em; padding: 0 .25em;
  margin-right: .45em; border-radius: 999px; vertical-align: .1em;
  font: 600 .72em/1 var(--display); font-style: normal; color: #fff7e0;
  background: radial-gradient(circle at 35% 30%, #e7c873, #9f772a);
  box-shadow: inset 0 0 0 1px rgba(255, 240, 200, .6), 0 1px 2px rgba(80, 50, 10, .35);
}

.sura-head { text-align: center; margin: .3em 0 .5em; }
.cartouche {
  position: relative; display: inline-block; min-width: 72%; margin: 0 auto .55em;
  padding: .2em 1.8em; border-radius: 999px;
  background: radial-gradient(ellipse at 50% 0%, #1d6a55, #0c3429 75%);
  border: 2px solid var(--gold);
  box-shadow: 0 0 0 4px var(--paper), 0 0 0 5px rgba(160, 120, 40, .75), inset 0 0 18px rgba(0, 0, 0, .45);
}
.cartouche::before, .cartouche::after {
  content: ""; position: absolute; top: 50%; width: 15px; height: 15px; margin-top: -7.5px;
  background: linear-gradient(135deg, #f0d993, #a67d2d); transform: rotate(45deg);
  box-shadow: 0 0 0 3px var(--paper), 0 0 0 4px rgba(160, 120, 40, .75);
}
.cartouche::before { left: -11px; }
.cartouche::after { right: -11px; }
.sh-ar { font: 700 calc(1.4rem * var(--fs))/1.75 var(--arabic); color: #f0d998; }
.sh-de { font: 700 calc(1.3rem * var(--fs))/1.15 var(--display); color: var(--ink); }
.sh-de em { font-weight: 500; color: var(--ink-soft); }
.sh-meta { font: 600 .74rem/1.3 var(--display); letter-spacing: .16em; text-transform: uppercase; color: var(--gold-d); margin-top: .3em; }
.basmala { text-align: center; margin: .1em 0 .4em; padding-bottom: .4em; }
.basmala .ar { text-align: center; font-size: calc(1.6rem * var(--fs)); color: #0f4a3e; }
.basmala .tr, .basmala .de { text-align: center; }

/* Titel- und Schlussseite */
.special { justify-content: center; text-align: center; }
.special .sp { display: flex; flex-direction: column; align-items: center; gap: .5em; overflow: auto; padding: 0 4px; }
.sp-orn svg { width: calc(var(--pw) * .2); height: auto; max-width: 96px; }
.sp-ar { font: 700 calc(var(--pw) * .1)/1.5 var(--arabic); color: #0f4a3e; }
.sp-de { font: 700 calc(var(--pw) * .068)/1.05 var(--display); color: var(--ink); }
.sp-sub { font: italic 500 1rem/1.4 var(--display); color: var(--ink-soft); max-width: 26em; }
.sp-rule { width: 50%; height: 10px; background: radial-gradient(circle, var(--gold) 2.5px, transparent 3px) center / 10px 10px no-repeat, linear-gradient(var(--gold), var(--gold)) center / 100% 1px no-repeat; opacity: .8; }
.sp-by { font: 600 .98rem/1.45 var(--display); color: var(--ink); }
.sp-hint { font-size: .84rem; line-height: 1.5; color: var(--ink-soft); max-width: 24em; }
.sp-src { font-size: .72rem; color: var(--ink-soft); opacity: .8; }
.sp-btns { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.blankpage::before, .blankpage::after { display: none; }

/* ---------- Umschlagendes Blatt (Seiten-Curl) ---------- */
.curl {
  position: absolute; top: 0; left: var(--pw); width: 0; height: 0;
  transform: translateZ(1px); z-index: 5; pointer-events: none;
}
.book.single .curl { left: 0; }
.curl .page { top: 0; left: 0; }
.cback { transform-origin: 0 0; will-change: transform, clip-path; }
.cfront { will-change: clip-path; }
.flap-wrap { position: absolute; left: 0; top: 0; width: 0; height: 0; }
@media (pointer: fine) { .flap-wrap { filter: drop-shadow(0 0 10px rgba(40, 25, 5, .35)); } }
.under-box { position: absolute; left: 0; top: 0; width: var(--pw); height: var(--ph); overflow: hidden; }
.cshade {
  position: absolute; left: 0; top: 0; height: 4000px; margin-top: -2000px;
  transform-origin: 0 50%; pointer-events: none; opacity: 0; z-index: 4;
}
.flap-shade { background: linear-gradient(to right, rgba(70, 48, 14, .26), rgba(70, 48, 14, .08) 3%, rgba(255, 250, 236, .5) 9%, rgba(255, 250, 236, .16) 32%, rgba(255, 250, 236, 0) 72%); }
.front-shade { display: none; }
.under-shade { background: linear-gradient(to right, rgba(20, 12, 2, .48), rgba(20, 12, 2, .18) 30%, rgba(20, 12, 2, 0)); }

/* ---------- Einband ---------- */
.cover {
  position: absolute; top: -11px; left: var(--pw);
  width: calc(var(--pw) + 13px); height: calc(var(--ph) + 22px);
  transform-origin: 0 50%; transform-style: preserve-3d; transform: translateZ(4px);
  z-index: 8; cursor: pointer;
}
.book.single .cover { left: -7px; width: calc(var(--pw) + 20px); }
.cover-front, .cover-back {
  position: absolute; inset: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden;
}
.cover-front {
  border-radius: 3px 11px 11px 3px; overflow: hidden;
  background:
    radial-gradient(ellipse at 38% 28%, #1e6a57 0%, #11463a 40%, #08261f 100%);
  box-shadow: 0 30px 60px rgba(0, 0, 0, .65), inset 0 0 0 1px rgba(255, 230, 160, .22), inset 10px 0 16px -8px rgba(0, 0, 0, .7);
}
.cover-front::before {
  content: ""; position: absolute; inset: 0; opacity: .5; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='l'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23l)'/%3E%3C/svg%3E");
}
.cover-front::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 26px;
  background: linear-gradient(90deg, rgba(0, 0, 0, .55), rgba(255, 255, 255, .08) 45%, rgba(0, 0, 0, .25));
}
.cover-back { transform: rotateY(180deg); border-radius: 11px 3px 3px 11px; background: linear-gradient(135deg, #154c40, #0a2c25); }
.cover-back .page { top: 11px; left: auto; right: 0; }
.cover-frame {
  position: absolute; inset: 5.5% 7% 5.5% 9%;
  border: 2px solid var(--gold); border-radius: 4px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .3), inset 0 0 0 7px transparent, inset 0 0 0 8px rgba(201, 162, 74, .55);
}
.cover-frame .c {
  position: absolute; width: 34px; height: 34px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg fill='none' stroke='%23d9b660' stroke-width='1.5'%3E%3Crect x='11' y='11' width='18' height='18'/%3E%3Crect x='11' y='11' width='18' height='18' transform='rotate(45 20 20)'/%3E%3Ccircle cx='20' cy='20' r='5'/%3E%3C/g%3E%3Ccircle cx='20' cy='20' r='2' fill='%23d9b660'/%3E%3C/svg%3E") center / contain no-repeat;
}
.c.tl { left: -17px; top: -17px; } .c.tr { right: -17px; top: -17px; }
.c.bl { left: -17px; bottom: -17px; } .c.br { right: -17px; bottom: -17px; }
.cover-content {
  position: absolute; inset: 9% 12% 8% 14%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2.2%;
  text-align: center;
}
.medallion { width: 52%; max-width: 230px; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .5)); }
.medallion svg { width: 100%; height: auto; display: block; animation: spinSlow 120s linear infinite; }
@keyframes spinSlow { to { transform: rotate(360deg); } }
.cv-ar, .cv-de {
  background: linear-gradient(180deg, #fbecbd, #d4a94e 55%, #8f6a24);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .6));
}
.cv-ar { font: 700 calc(var(--pw) * .13)/1.45 var(--arabic); margin-top: 2%; }
.cv-de { font: 600 calc(var(--pw) * .062)/1.05 var(--display); letter-spacing: .14em; text-transform: uppercase; }
.cv-rule { width: 60%; height: 12px; background: radial-gradient(circle, var(--gold) 3px, transparent 3.5px) center / 12px 12px no-repeat, linear-gradient(var(--gold), var(--gold)) center / 100% 1px no-repeat; }
.cv-by { font: italic 500 calc(var(--pw) * .036)/1.4 var(--display); color: rgba(236, 213, 147, .85); }
.cv-actions { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 4%; }
.cv-err { margin: 0; font-size: .85rem; color: #f3b9a8; max-width: 22em; }
.sheen {
  position: absolute; inset: -50%; pointer-events: none;
  background: linear-gradient(115deg, transparent 42%, rgba(255, 240, 200, .14) 50%, transparent 58%);
  animation: sheen 7s ease-in-out infinite;
}
@keyframes sheen { 0%, 55% { transform: translateX(-60%); } 100% { transform: translateX(60%); } }

.gold-btn, .ghost-btn {
  font: 700 1rem/1 var(--display); letter-spacing: .06em; cursor: pointer;
  border-radius: 999px; padding: 11px 22px; transition: transform .15s, box-shadow .25s, opacity .25s;
}
.gold-btn {
  color: #1d1609; border: 1px solid #f6e3a8;
  background: linear-gradient(180deg, #f3dc98, #b88f3a);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .35), 0 0 22px rgba(232, 207, 138, .25), inset 0 1px 0 rgba(255, 255, 255, .55);
}
.gold-btn:hover { box-shadow: 0 6px 18px rgba(0, 0, 0, .35), 0 0 32px rgba(232, 207, 138, .45), inset 0 1px 0 rgba(255, 255, 255, .55); }
.gold-btn:active, .ghost-btn:active { transform: scale(.97); }
.gold-btn:disabled { opacity: .6; cursor: progress; }
.gold-btn.small { padding: 9px 16px; font-size: .92rem; }
.ghost-btn { color: var(--gold-l); background: rgba(0, 0, 0, .2); border: 1px solid rgba(232, 207, 138, .5); font-size: .9rem; }
.ghost-btn.dark { color: var(--gold-d); background: rgba(255, 255, 255, .4); border-color: rgba(150, 110, 36, .5); }
.page .gold-btn, .page .ghost-btn { font-size: .88rem; padding: 9px 16px; }

/* ---------- Fußleiste ---------- */
.nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  display: flex; align-items: center; justify-content: center; gap: 14px;
  padding: 10px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(transparent, rgba(3, 10, 12, .88) 45%);
  transition: opacity .6s, transform .6s;
}
body.is-closed .nav { opacity: 0; transform: translateY(20px); pointer-events: none; }
.arrow {
  flex: none; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  color: var(--gold-l); background: rgba(201, 162, 74, .1); border: 1px solid rgba(201, 162, 74, .45);
  transition: background .25s, transform .15s;
}
.arrow:hover { background: rgba(201, 162, 74, .22); }
.arrow:active { transform: scale(.92); }
.where { flex: 1; max-width: 560px; min-width: 0; text-align: center; }
.where-text { font: 600 .95rem/1.3 var(--display); color: var(--gold-l); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.where-text small { color: rgba(236, 213, 147, .65); font-weight: 500; }
#scrub { width: 100%; margin: 6px 0 0; accent-color: var(--gold); height: 18px; }
.loader {
  position: absolute; right: 18px; bottom: calc(26px + env(safe-area-inset-bottom, 0px)); width: 18px; height: 18px;
  border: 2px solid rgba(232, 207, 138, .25); border-top-color: var(--gold-l); border-radius: 50%;
  animation: spinSlow .8s linear infinite;
}

/* ---------- Inhaltsverzeichnis ---------- */
.toc {
  position: fixed; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center;
  padding: calc(16px + env(safe-area-inset-top, 0px)) 16px calc(16px + env(safe-area-inset-bottom, 0px));
  background: rgba(2, 8, 9, .62); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  animation: fade .3s;
}
@keyframes fade { from { opacity: 0; } }
.toc-panel {
  position: relative; width: min(1040px, 100%); max-height: 100%; display: flex; flex-direction: column;
  color: var(--ink); border-radius: 10px; overflow: hidden;
  background: linear-gradient(180deg, #f8efd8, #efe0bb);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .6), 0 0 0 1px rgba(201, 162, 74, .7), 0 0 0 7px #0e3a31, 0 0 0 8px rgba(201, 162, 74, .6);
  transform-origin: 50% 0; animation: tocIn .5s cubic-bezier(.2, .8, .2, 1);
}
@keyframes tocIn { from { opacity: 0; transform: perspective(1200px) rotateX(-14deg) translateY(24px); } }
.toc-head { position: relative; text-align: center; padding: 16px 48px 8px; }
.toc-ar { font: 700 1.6rem/1.4 var(--arabic); color: #0f4a3e; }
.toc-head h2 { margin: 0; font: 700 1.7rem/1.1 var(--display); letter-spacing: .04em; }
.toc-orn { width: 220px; max-width: 60%; height: 12px; margin: 8px auto 0; background: radial-gradient(circle, var(--gold) 3px, transparent 3.5px) center / 12px 12px no-repeat, linear-gradient(90deg, transparent, var(--gold), transparent) center / 100% 1px no-repeat; }
.toc-close {
  position: absolute; right: 12px; top: 12px; width: 38px; height: 38px; border-radius: 50%; cursor: pointer;
  font-size: 1.6rem; line-height: 1; color: var(--gold-d); background: rgba(255, 255, 255, .4); border: 1px solid rgba(150, 110, 36, .4);
}
.toc-tools {
  display: flex; flex-wrap: wrap; gap: 10px 14px; justify-content: center; align-items: center;
  padding: 8px 18px 12px; border-bottom: 1px solid rgba(150, 110, 36, .3);
}
.toc input {
  font: 500 1rem var(--serif); color: var(--ink); background: rgba(255, 255, 255, .6);
  border: 1px solid rgba(150, 110, 36, .45); border-radius: 999px; padding: 8px 14px; min-height: 38px;
}
.toc input:focus { outline: 2px solid var(--gold); outline-offset: 1px; }
#tocSearch { flex: 1 1 240px; max-width: 360px; }
.goto { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center; }
.goto label { font: 600 .9rem var(--display); color: var(--ink-soft); display: flex; align-items: center; gap: 6px; }
.goto input { width: 74px; text-align: center; }
.toc-list {
  overflow: auto; padding: 14px 18px 22px;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); gap: 9px;
  overscroll-behavior: contain;
}
.ti {
  display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 10px;
  text-align: left; padding: 9px 12px; border-radius: 9px; cursor: pointer;
  border: 1px solid rgba(150, 110, 36, .25); background: rgba(255, 255, 255, .35);
  transition: background .2s, transform .2s, box-shadow .2s;
}
.ti:hover { background: #fff8e4; transform: translateY(-2px); box-shadow: 0 8px 18px rgba(90, 60, 10, .16); }
.ti.current { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(201, 162, 74, .5); background: #fff6dc; }
.star { position: relative; isolation: isolate; width: 34px; height: 34px; display: grid; place-items: center; font: 700 .82rem/1 var(--display); color: #fff6da; }
.star::before, .star::after { content: ""; position: absolute; inset: 5px; z-index: -1; border-radius: 2px; background: linear-gradient(135deg, #dcb862, #96702a); }
.star::after { transform: rotate(45deg); }
.ti-main { display: flex; flex-direction: column; min-width: 0; }
.ti-de { font: 700 1.04rem/1.15 var(--display); }
.ti-en { font-size: .82rem; font-style: italic; color: var(--ink-soft); }
.ti-meta { font: 600 .66rem/1.5 var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--gold-d); }
.ti-ar { font: 700 1.3rem/1.5 var(--arabic); color: #0f4a3e; text-align: right; }
.toc-empty { grid-column: 1 / -1; text-align: center; color: var(--ink-soft); font-style: italic; padding: 20px; }

/* ---------- Toast ---------- */
.toast {
  position: fixed; left: 50%; bottom: calc(92px + env(safe-area-inset-bottom, 0px)); z-index: 60; transform: translateX(-50%);
  max-width: calc(100% - 32px); padding: 10px 18px; border-radius: 999px;
  font: 600 .95rem var(--display); color: #1d1609;
  background: linear-gradient(180deg, #f3dc98, #c49b45); box-shadow: 0 10px 30px rgba(0, 0, 0, .5);
  animation: fade .3s;
}
.noscript { position: fixed; inset: 40% 16px auto; text-align: center; z-index: 99; }

/* ---------- Responsiv ---------- */
@media (max-width: 720px) {
  .brand { display: none; }
  .bar { justify-content: center; padding-left: 10px; padding-right: 10px; }
  .controls { justify-content: center; }
  .btn .lbl, .chip .lbl { display: none; }
  .btn, .chip { padding: 7px 11px; font-size: .9rem; }
  .arrow { width: 42px; height: 42px; }
  .where-text { font-size: .85rem; }
  .toc-list { grid-template-columns: 1fr; padding: 10px 12px 18px; }
  .toc-head h2 { font-size: 1.4rem; }
}
@media (max-width: 380px) {
  .chip { padding: 7px 9px; font-size: .84rem; }
}
@media (prefers-reduced-motion: reduce) {
  .medallion svg, .sheen { animation: none; }
  .book, .inner { transition: none; }
}

/* ---------- Rezitation ---------- */
.play-btn {
  width: 52px; height: 52px; color: #1d1609;
  background: radial-gradient(circle at 35% 30%, #f6e2a3, #b88f3a 75%);
  border-color: #f6e3a8; box-shadow: 0 0 22px rgba(232, 207, 138, .35);
}
.play-btn:hover { background: radial-gradient(circle at 35% 30%, #fbeab6, #c49b45 75%); }
.play-btn svg, .pl-play svg { width: 55%; height: 55%; display: block; margin: auto; }
body.audio-on .play-btn { animation: pulseRing 2.4s ease-out infinite; }
@keyframes pulseRing {
  0% { box-shadow: 0 0 0 0 rgba(236, 213, 147, .55), 0 0 22px rgba(232, 207, 138, .35); }
  100% { box-shadow: 0 0 0 18px rgba(236, 213, 147, 0), 0 0 22px rgba(232, 207, 138, .35); }
}
.pl-mini-track { position: absolute; left: 0; right: 0; top: 0; height: 2px; background: rgba(201, 162, 74, .12); opacity: 0; transition: opacity .4s; }
body.audio-active .pl-mini-track { opacity: 1; }
.pl-mini { height: 100%; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, #b88f3a, #f3dc98); box-shadow: 0 0 8px rgba(243, 220, 152, .8); }

/* Versnummern sind Startpunkte */
.vn, .am { cursor: pointer; transition: transform .2s, filter .2s; }
.vn:hover, .am:hover { transform: scale(1.12); filter: drop-shadow(0 0 4px rgba(214, 176, 84, .8)); }

/* Laufender Vers: Goldfüllung wandert von rechts nach links mit dem Vortrag */
.ayah.reciting, .basmala.reciting { position: relative; isolation: isolate; }
.ayah.reciting::before, .basmala.reciting::before {
  content: ""; position: absolute; inset: .1em -3px; z-index: -1; border-radius: 6px;
  background:
    linear-gradient(to left, rgba(214, 176, 84, .26) var(--prog, 0%), rgba(214, 176, 84, .08) var(--prog, 0%));
  box-shadow: 0 0 0 1px rgba(184, 143, 58, .45), 0 0 16px rgba(214, 176, 84, .3);
  animation: reciteIn .5s ease-out;
}
@keyframes reciteIn { from { opacity: 0; transform: scale(.97); } }
.ayah.reciting .ar { color: #0d3b31; }
.ayah.reciting .vn, .ayah.reciting .am { animation: beat 1.6s ease-in-out infinite; }
@keyframes beat { 50% { transform: scale(1.15); filter: drop-shadow(0 0 5px rgba(214, 176, 84, .9)); } }

/* Buch atmet goldenes Licht, solange rezitiert wird */
body.audio-on .board { animation: breathe 3.6s ease-in-out infinite; }
@keyframes breathe {
  50% { box-shadow: 0 34px 60px rgba(0, 0, 0, .6), 0 0 80px rgba(214, 176, 84, .32), inset 0 0 0 1px rgba(232, 207, 138, .3), inset 0 0 0 5px rgba(0, 0, 0, .15); }
}

/* Panel */
.sheet {
  position: fixed; inset: 0; z-index: 45; display: flex; align-items: center; justify-content: center;
  padding: calc(16px + env(safe-area-inset-top, 0px)) 16px calc(16px + env(safe-area-inset-bottom, 0px));
  background: rgba(2, 8, 9, .55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: fade .3s;
}
.sheet-panel {
  position: relative; width: min(760px, 100%); max-height: 100%; overflow: auto; overscroll-behavior: contain;
  padding: 22px 22px 18px; border-radius: 18px; color: #efe3c2;
  background: radial-gradient(ellipse at 30% 0%, rgba(30, 106, 87, .55), transparent 60%), linear-gradient(160deg, rgba(12, 46, 40, .96), rgba(5, 18, 20, .97));
  box-shadow: 0 30px 80px rgba(0, 0, 0, .6), inset 0 0 0 1px rgba(232, 207, 138, .3);
  animation: sheetIn .45s cubic-bezier(.2, .8, .2, 1);
}
@keyframes sheetIn { from { opacity: 0; transform: translateY(30px) scale(.98); } }
.sheet-close {
  position: absolute; right: 12px; top: 12px; width: 38px; height: 38px; border-radius: 50%; cursor: pointer; z-index: 2;
  font-size: 1.6rem; line-height: 1; color: var(--gold-l); background: rgba(201, 162, 74, .1); border: 1px solid rgba(201, 162, 74, .4);
}
.pl-top { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; justify-content: center; }
.pl-stage { position: relative; width: 220px; height: 220px; flex: none; }
#aura { position: absolute; inset: 0; width: 100%; height: 100%; }
.pl-play {
  position: absolute; left: 50%; top: 50%; width: 92px; height: 92px; margin: -46px 0 0 -46px; border-radius: 50%; cursor: pointer;
  color: #1d1609; border: 1px solid #f6e3a8;
  background: radial-gradient(circle at 35% 30%, #fbeab6, #b88f3a 72%, #8f6a24);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .45), 0 0 40px rgba(232, 207, 138, .35), inset 0 2px 0 rgba(255, 255, 255, .5);
  transition: transform .15s;
}
.pl-play:active { transform: scale(.95); }
.pl-now { flex: 1 1 260px; min-width: 0; text-align: center; }
.pl-ar { font: 700 1.9rem/1.5 var(--arabic); background: linear-gradient(180deg, #fbecbd, #d4a94e 60%, #9a7428); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pl-title { font: 700 1.35rem/1.2 var(--display); color: #f3e6c4; }
.pl-verse { margin-top: 6px; font: 600 1.05rem var(--display); color: var(--gold-l); letter-spacing: .06em; }
.pl-verse-ar { font-family: var(--arabic); font-size: 1.2rem; }
.pl-sub { font: italic 500 .95rem var(--display); color: rgba(236, 213, 147, .7); margin-top: 2px; }
.pl-ctrl { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 12px; }
.pl-group { margin-top: 16px; }
.pl-group h3 { margin: 0 0 8px; font: 700 .78rem var(--display); letter-spacing: .18em; text-transform: uppercase; color: rgba(236, 213, 147, .75); }
.pl-group h3 small { letter-spacing: .04em; text-transform: none; font-weight: 500; opacity: .8; }
.pl-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.pl-row { display: flex; flex-wrap: wrap; gap: 0 28px; }
.pl-switches { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.pl-switch { display: flex; align-items: center; gap: 10px; cursor: pointer; font: 600 1rem var(--display); color: #efe3c2; }
.pl-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.sw { position: relative; flex: none; width: 42px; height: 24px; border-radius: 999px; background: rgba(201, 162, 74, .15); border: 1px solid rgba(201, 162, 74, .45); transition: background .25s; }
.sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #d8c48f; transition: transform .25s; }
.pl-switch input:checked + .sw { background: linear-gradient(180deg, #f0d993, #b88f3a); }
.pl-switch input:checked + .sw::after { transform: translateX(18px); background: #1d1609; }
.pl-switch input:focus-visible + .sw { outline: 2px solid var(--gold-l); outline-offset: 2px; }
.pl-hint { margin: 16px 0 0; font-size: .85rem; color: rgba(236, 213, 147, .6); }
kbd { font: 600 .8rem var(--display); padding: 1px 6px; border-radius: 4px; border: 1px solid rgba(201, 162, 74, .5); }
@media (max-width: 720px) {
  .sheet { align-items: flex-end; padding: 0; }
  .sheet-panel { border-radius: 18px 18px 0 0; padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px)); max-height: 92vh; }
  .pl-stage { width: 180px; height: 180px; }
  .pl-play { width: 78px; height: 78px; margin: -39px 0 0 -39px; }
  .nav { gap: 8px; }
  .play-btn { width: 46px; height: 46px; }
}
@media (prefers-reduced-motion: reduce) {
  body.audio-on .play-btn, body.audio-on .board, .ayah.reciting .vn, .ayah.reciting .am { animation: none; }
}