/* Ornament Version – Custom Color Theme */

/* ✅ Quran Fonts (lokal) */
@font-face{
  font-family: "Uthmani";
  src: url("Uthmani.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face{
  font-family: "IndoPak";
  src: url("IndoPak.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root{
  /* ✅ ROOT TOKENS – sortiert in 6 Gruppen (Design/Styles) */

  /* =========================================================
     PRE: Layout/Scaling (niemals theme-spezifisch)
     ========================================================= */
  /* Stage/Viewport (werden von app.js gesetzt) */
  --vw: 1280px;
  --vh: 720px;
  --stage-w: 1280px;
  --stage-h: 720px;
  --bar-lr: 0px;
  --bar-bottom: 0px;
  --stage-vh: 720px; /* sichtbare Stage-Höhe (kann > stage-h sein, aber gecapped) */

  /* =========================
     NO-HARD-PX TOKENS (Stage-based)
     Design-Basis: 1280 x 720
     ========================= */
  /* 1px in Stage-Höhe/Breite (skalierend, aber ohne harte px-Zahl im CSS-Style) */
  --u1h:  calc(var(--stage-h) * (1 / 720));
  --u2h:  calc(var(--stage-h) * (2 / 720));
  --u6h:  calc(var(--stage-h) * (6 / 720));
  --u8h:  calc(var(--stage-h) * (8 / 720));
  --u10h: calc(var(--stage-h) * (10 / 720));
  --u12h: calc(var(--stage-h) * (12 / 720));
  --u14h: calc(var(--stage-h) * (14 / 720));
  --u30h: calc(var(--stage-h) * (30 / 720));

  --u1w:  calc(var(--stage-w) * (1 / 1280));
  --u2w:  calc(var(--stage-w) * (2 / 1280));
  --u6w:  calc(var(--stage-w) * (6 / 1280));
  --u10w: calc(var(--stage-w) * (10 / 1280));
  --u12w: calc(var(--stage-w) * (12 / 1280));
  --u14w: calc(var(--stage-w) * (14 / 1280));
  --u16w: calc(var(--stage-w) * (16 / 1280));
  --u30w: calc(var(--stage-w) * (30 / 1280));

  --sb-w: max(calc(var(--stage-w) * 0.0048), var(--u6w)); /* Scrollbar width, skaliert */

  /* “Pill fully rounded” ohne px */
  --round-pill: 999vmax;

  --basm-pad-left: calc(var(--stage-w) * 0.005);
  --mushaf-pad-x: calc(var(--stage-w) * 0.010);

  /* =========================
     Audio/Queue Timing (Layout-ish)
     ========================= */
  --fav-gap-ms: 500;
  --fav-end-gap-ms: 2000;

/* =========================
     Ayah Edge (Fade + "Stille") – pro Reciter
     NEU Format: "<fadeMs> <fadeMinMul> - <silenceMs> <silenceMul>"
       z.B. "500 0.5 - 50 0.5"
       - fadeMs:       Dauer vom Fade (ms)
       - fadeMinMul:   wie weit der Fade runtergeht (0.0 = 0%, 0.6 = 60%)
       - silenceMs:    Dauer der "Stille"-Phase am Anfang + Ende (ms)
       - silenceMul:   Lautstärke in der "Stille"-Phase (0.0 = echte Stille)
     Backward-Compat (alt): "<fadeMs> <silenceMs> <minMul>" oder "<fadeMs> <silenceMs>"
     ========================= */
  --ayah-edge-ms-default: 0 0 - 0 0.0;

  --ayah-edge-ms-alafasy: 70 0.0 - 20 0.0;
  --ayah-edge-ms-abdulbaset_abdulsamad_murattal: 700 0.0 - 100 0.0;
  --ayah-edge-ms-abdulbaset_abdulsamad_mujawwad: 700 0.00 - 130 0.0;
  --ayah-edge-ms-abdur_rahman_as_sudais: 40 0.0 - 10 0.0;
  --ayah-edge-ms-abu_bakr_al_shatri: 70 0.0 - 25 0.0;
  --ayah-edge-ms-hani_ar_rifai: 70 0.0 - 25 0.0;
  --ayah-edge-ms-mohamed_siddiq_al_minshawi_mujawwad: 0 0.0 - 0 0.0;
  --ayah-edge-ms-mohamed_siddiq_al_minshawi_murattal: 0 0.0 - 0 0.0;
  --ayah-edge-ms-saud_ash_shuraym: 70 0.0 - 25 0.0;

  /* ✅ Arabic font scaling (global) */
  --ar-font-scale: 1;
  --tr-font-scale: 1;

  /* Base sizes (niemals direkt anfassen – nur scale ändern) */
  --mushaf-ar-font-base: calc(var(--stage-h) * 0.0515);
  --ayah-font-ar-base:   calc(var(--stage-h) * 0.049);

  /* Effective sizes (werden überall benutzt) */
  --mushaf-ar-font: calc(var(--mushaf-ar-font-base) * var(--ar-font-scale));
  --ayah-font-ar:   calc(var(--ayah-font-ar-base)   * var(--ar-font-scale));

  /* =========================================================
     1) PRIMARY – Haupt-Akzent + Haupt-Flächen (BG, Text, UI)
     ========================================================= */
  /* Custom Colors (Primary Surfaces) */
  --color-bg-main:  #0C1626;  /* dunkel: Stage */
  --color-bg-stage: #222C3E;  /* Flächen */
  --color-line:     #454D5D;  /* Borders */
  --color-bg-chip:  #323744;  /* Chips */

  /* Text */
  --color-text: rgba(255,255,255,.88);
  --color-text-muted: rgba(255,255,255,.55);
  --color-ar-text: rgba(255,255,255,.98);

  /* Primary accent (Solid) */
    /* Accent fürs Wort (immer wie Progress/Accent-Farbe) */
  --color-accent: rgb(var(--rgb-accent));

  /* Tooltip backgrounds */
  --color-tooltip-bg: var(--c-ink);

  /* Hover surface */
  --surface-hover: #2a354a;

  /* SurahTopBar – basiert auf stage */
  --surah-topbar-center: var(--color-bg-stage);

  /* Blau-Fades (oben/unten stärker, Seiten schwächer) */
  --surah-topbar-blue-strong: rgba(var(--rgb-accent),0.42);
  --surah-topbar-blue-soft:   var(--c-a-22);

  /* Multi-layer: 1) top/bottom fade, 2) side fade, 3) base dark */
  --surah-topbar-bg:
    linear-gradient(
      180deg,
      var(--surah-topbar-blue-strong) 0%,
      rgba(var(--rgb-accent),0.18) 18%,
      rgba(var(--rgb-accent),0.00) 42%,
      rgba(var(--rgb-accent),0.00) 58%,
      rgba(var(--rgb-accent),0.18) 82%,
      var(--surah-topbar-blue-strong) 100%
    ),
    linear-gradient(
      90deg,
      var(--surah-topbar-blue-strong) 0%,
      var(--surah-topbar-blue-strong) 12%,
      rgba(var(--rgb-accent),0.00) 36%,
      rgba(var(--rgb-accent),0.00) 64%,
      var(--surah-topbar-blue-strong) 88%,
      var(--surah-topbar-blue-strong) 100%
    ),
    var(--surah-topbar-center);

  /* solid backgrounds */
  --surah-topbar-play-bg: var(--color-bg-stage);
  --surah-topbar-play-bg-hover: var(--surface-hover);

  --surah-topbar-mode-bg: var(--color-bg-stage);
  --surah-topbar-mode-bg-hover: var(--surface-hover);

  /* =========================================================
     2) SECONDARY – Zweiter Akzent / zweite Style-Farbgruppe
     (aktuell als Basis-RGB + Aliases, damit Styles.js später easy)
     ========================================================= */
  /* Basis-RGB (nur hier ändern, Rest leitet sich ab) */
  --rgb-white: 255,255,255;
  --rgb-black: 0,0,0;
  --rgb-ink:   12,22,38;    /* dein dunkles UI-“Ink” */
  --rgb-accent: 90,167,255; /* dein Accent/Progress */
  --rgb-danger: 255,90,90;  /* rot */
  --rgb-warn:   255,160,60; /* orange */
  --rgb-note:   255,220,80; /* ✅ NOTE gelb */

  /* ✅ Favorites-Farbe (Ring + Striche). Default = warn, wird aber per styles.js automatisch kontrastierend gesetzt */
  --rgb-fav:    var(--rgb-warn);

  --rgb-slate:  20,30,45;   /* kommt in einigen Stellen vor */
  /* ✅ Aliases (für zukünftige Designs, brechen nix) */
  --rgb-accent-2: var(--rgb-warn);         /* “2. Akzent” (default warm) */
  --rgb-secondary: var(--rgb-accent-2);

  --rgb-ok: 80,220,120;                    /* Copy/Success */
  --rgb-ink-strong: 10,15,25;

  /* =========================================================
     3) PROGRESS + GLOWS – beide Leisten + alle Glows zentral
     ========================================================= */
  --glow-blue: rgba(var(--rgb-accent),0.55);
  --glow-ring: calc(var(--stage-h) * 0.002);
  --glow-soft: calc(var(--stage-h) * 0.018);

  /* Accent / Warn / Note Glows */
  --glow-accent-25: rgba(var(--rgb-accent),0.25);
  --glow-accent-35: rgba(var(--rgb-accent),0.35);
  --glow-accent-45: rgba(var(--rgb-accent),0.45);
  --glow-accent-55: rgba(var(--rgb-accent),0.55);
  --glow-accent-75: rgba(var(--rgb-accent),0.75);

  --glow-warn-25: rgba(var(--rgb-warn),0.25);
  --glow-warn-40: rgba(var(--rgb-warn),0.40);
  --glow-warn-55: rgba(var(--rgb-warn),0.55);

  --glow-note-25: rgba(var(--rgb-note),0.25);
  --glow-note-45: rgba(var(--rgb-note),0.45);
  --glow-note-70: rgba(var(--rgb-note),0.70);

  /* Glow recipes */
  --fx-glow-accent-hover:
    drop-shadow(0 0 calc(var(--glow-ring) * 1.15) var(--glow-accent-45))
    drop-shadow(0 0 calc(var(--glow-soft) * 1.15) var(--glow-accent-55));

  --fx-glow-accent-focus:
    drop-shadow(0 0 calc(var(--glow-ring) * 1.35) var(--glow-accent-35))
    drop-shadow(0 0 calc(var(--glow-soft) * 1.35) var(--glow-accent-75));

  --fx-glow-warn-on:
    drop-shadow(0 0 calc(var(--glow-ring) * 1.15) var(--glow-warn-40))
    drop-shadow(0 0 calc(var(--glow-soft) * 0.85) var(--glow-warn-55));

  --fx-glow-note-on:
    drop-shadow(0 0 calc(var(--glow-ring) * 1.10) var(--glow-note-45))
    drop-shadow(0 0 calc(var(--glow-soft) * 0.95) var(--glow-note-70));

  /* Scroll fill token */
  --fx-scroll-fill: rgba(var(--rgb-accent),0.72);

  /* =========================================================
     4) SPECIAL FX – Spezialfarbe (Repeat, Fav-Ring um Ayahnummer, etc.)
     ========================================================= */
  /* ✅ Aliases (damit wir später pro Style nur 1-2 Werte ändern müssen) */
  --rgb-special: var(--rgb-warn);
  --rgb-repeat:  var(--rgb-warn);
  --rgb-fav-ring: var(--rgb-fav);

  /* Favorites button mark lines */
    /* Favorites button: Markierungen (1px) sollen dieselbe Farbe wie der Fav-Ring haben */
  --color-fav-mark: rgba(var(--rgb-fav),0.28);

  /* =========================================================
     5) DESIGN-MUST-MATCH – besondere Ringe/States (Copy/Notes/etc.)
     ========================================================= */
  --rgb-copy: var(--rgb-ok);
  --rgb-notes: var(--rgb-note);
  --rgb-bookmark: var(--rgb-accent);

  /* =========================================================
     6) LOW-PRIO / UTILITY – Alpha-Ramps + UI Maße/Positionen
     (hier hängen viele Stellen dran, aber selten pro Style direkt anfassen)
     ========================================================= */

  /* SOLID helper */
  --c-white: rgb(var(--rgb-white));
  --c-ink:   rgb(var(--rgb-ink));

  /* BLACK shadows */
  --c-black-03: rgba(var(--rgb-black),0.03);
  --c-black-08: rgba(var(--rgb-black),0.08);
  --c-black-12: rgba(var(--rgb-black),0.12);
  --c-black-18: rgba(var(--rgb-black),0.18);
  --c-black-25: rgba(var(--rgb-black),0.25);
  --c-black-35: rgba(var(--rgb-black),0.35);

  /* INK overlays */
  --c-ink-03: rgba(var(--rgb-ink),0.03);
  --c-ink-04: rgba(var(--rgb-ink),0.04);
  --c-ink-06: rgba(var(--rgb-ink),0.06);
  --c-ink-07: rgba(var(--rgb-ink),0.07);
  --c-ink-08: rgba(var(--rgb-ink),0.08);
  --c-ink-10: rgba(var(--rgb-ink),0.10);
  --c-ink-12: rgba(var(--rgb-ink),0.12);
  --c-ink-18: rgba(var(--rgb-ink),0.18);
  --c-ink-20: rgba(var(--rgb-ink),0.20);
  --c-ink-22: rgba(var(--rgb-ink),0.22);
  --c-ink-28: rgba(var(--rgb-ink),0.28);
  --c-ink-30: rgba(var(--rgb-ink),0.30);
  --c-ink-35: rgba(var(--rgb-ink),0.35);
  --c-ink-45: rgba(var(--rgb-ink),0.45);
  --c-ink-55: rgba(var(--rgb-ink),0.55);
  --c-ink-70: rgba(var(--rgb-ink),0.70);
  --c-ink-88: rgba(var(--rgb-ink),0.88);
  --c-ink-90: rgba(var(--rgb-ink),0.90);
  --c-ink-92: rgba(var(--rgb-ink),0.92);

  /* WHITE overlays */
  --c-w-04: rgba(var(--rgb-white),0.04);
  --c-w-06: rgba(var(--rgb-white),0.06);
  --c-w-10: rgba(var(--rgb-white),0.10);
  --c-w-12: rgba(var(--rgb-white),0.12);
  --c-w-14: rgba(var(--rgb-white),0.14);
  --c-w-18: rgba(var(--rgb-white),0.18);
  --c-w-22: rgba(var(--rgb-white),0.22);
  --c-w-25: rgba(var(--rgb-white),0.25);
  --c-w-28: rgba(var(--rgb-white),0.28);
  --c-w-34: rgba(var(--rgb-white),0.34);
  --c-w-35: rgba(var(--rgb-white),0.35);
  --c-w-55: rgba(var(--rgb-white),0.55);
  --c-w-88: rgba(var(--rgb-white),0.88);
  --c-w-98: rgba(var(--rgb-white),0.98);

  /* ACCENT alphas */
  --c-a-06: rgba(var(--rgb-accent),0.06);
  --c-a-10: rgba(var(--rgb-accent),0.10);
  --c-a-12: rgba(var(--rgb-accent),0.12);
  --c-a-14: rgba(var(--rgb-accent),0.14);
  --c-a-16: rgba(var(--rgb-accent),0.16);
  --c-a-18: rgba(var(--rgb-accent),0.18);
  --c-a-20: rgba(var(--rgb-accent),0.20);
  --c-a-22: rgba(var(--rgb-accent),0.22);
  --c-a-25: rgba(var(--rgb-accent),0.25);
  --c-a-28: rgba(var(--rgb-accent),0.28);
  --c-a-32: rgba(var(--rgb-accent),0.32);
  --c-a-35: rgba(var(--rgb-accent),0.35);
  --c-a-40: rgba(var(--rgb-accent),0.40);
  --c-a-45: rgba(var(--rgb-accent),0.45);
  --c-a-55: rgba(var(--rgb-accent),0.55);
  --c-a-65: rgba(var(--rgb-accent),0.65);
  --c-a-70: rgba(var(--rgb-accent),0.70);
  --c-a-72: rgba(var(--rgb-accent),0.72);
  --c-a-75: rgba(var(--rgb-accent),0.75);
  --c-a-85: rgba(var(--rgb-accent),0.85);
  --c-a-95: rgba(var(--rgb-accent),0.95);

  /* DANGER */
  --c-d-18: rgba(var(--rgb-danger),0.18);
  --c-d-25: rgba(var(--rgb-danger),0.25);
  --c-d-95: rgba(var(--rgb-danger),0.95);

  /* WARN */
  --c-warn-28: rgba(var(--rgb-warn),0.28);
  --c-warn-40: rgba(var(--rgb-warn),0.40);
  --c-warn-55: rgba(var(--rgb-warn),0.55);
  --c-warn-90: rgba(var(--rgb-warn),0.90);
  --c-warn-95: rgba(var(--rgb-warn),0.95);

  /* NOTE */
  --c-note-20: rgba(var(--rgb-note),0.20);
  --c-note-28: rgba(var(--rgb-note),0.28);
  --c-note-45: rgba(var(--rgb-note),0.45);
  --c-note-70: rgba(var(--rgb-note),0.70);
  --c-note-90: rgba(var(--rgb-note),0.90);

  /* SLATE */
  --c-slate-06: rgba(var(--rgb-slate),0.06);
  --c-slate-16: rgba(var(--rgb-slate),0.16);
  --c-slate-55: rgba(var(--rgb-slate),0.55);
  --c-slate-88: rgba(var(--rgb-slate),0.88);

  /* =========================
     Favorites Preset Dropdown Colors (Theme Tokens)
     ========================= */
  --fav-actual-bg: var(--c-w-18);
  --fav-add-title-bg: var(--c-a-12);
  --fav-add-title-bg-hover: var(--c-a-18);

  /* =========================
     Dropdown/Fonts/UI sizes (Stage-only)
     ========================= */
  --sura-dd-w: calc(var(--stage-w) * 0.1505);
  --sura-dd-h: var(--jump-h);
  --sura-dd-center-y: var(--jump-center-y);
  --sura-dd-center-x: calc((var(--stage-w) * 0.5) + (var(--stage-w) * 0.2536));

  /* =========================
     AYAH DEMO CARD (Stage-only)
     ========================= */
  --ayah-card-w: calc(var(--stage-w) * 0.9864583);
  --ayah-card-min-h: calc(var(--stage-h) * 0.2287);
  --ayah-card-r: calc(var(--stage-h) * 0.010);

  --ayah-inner-w: calc(var(--stage-w) * 0.971583);
  --ayah-inner-min-h: calc(var(--stage-h) * 0.1687);
  --ayah-gap: calc(var(--stage-h) * 0.015);
  --ayah-trans-min-h: calc(var(--stage-h) * 0.060);

  --ayah-font-title: calc(var(--stage-h) * 0.030);
  --ayah-font-ref:   calc(var(--stage-h) * 0.022);
  --ayah-font-meta:  calc(var(--stage-h) * 0.022);

  /* Fonts */
  --font-meta: system-ui, sans-serif;
  --font-ar: "Uthmani","Amiri","Noto Naskh Arabic","Scheherazade New",serif;
  --font-de: system-ui, sans-serif;
  --font-en: system-ui, sans-serif;

  /* =========================
     JUMP PILL (Statusbar)
     ========================= */
  --color-ui: var(--color-bg-stage);
  --color-ui-text: rgba(255,255,255,.88);
  --color-ui-text-muted: rgba(255,255,255,.55);

  --jump-w: calc(var(--stage-w) * 0.0786);
  --jump-h: calc(var(--stage-h) * 0.0519);

  --jump-inner-w: calc(var(--stage-w) * 0.0661);
  --jump-inner-h: calc(var(--stage-h) * 0.0296);

  --jump-r: calc(var(--stage-w) * 0.0029);

  --jump-center-y: calc(var(--stage-h) * 0.0388889);
  --jump-center-x: calc((var(--stage-w) * 0.5) + (var(--stage-w) * 0.3676));

  /* =========================
     FAVORITES Button (Statusbar)
     ========================= */
  --fav-w: calc(var(--stage-w) * 0.1505);
  --fav-h: var(--jump-h);
  --fav-center-y: var(--jump-center-y);
  --fav-center-x: calc((var(--stage-w) * 0.5) - (var(--stage-w) * 0.418));

  --fav-clear-right: calc(var(--stage-w) * 0.151);
  --fav-clear-filter: brightness(1) contrast(1);

  /* =========================
     STYLE PICKER (Statusbar)
     ========================= */
  --style-btn-d:      calc(var(--stage-w) * 0.0140);
  --style-gap-y:      calc(var(--stage-h) * 0.000);
  --style-dot-d:      calc(var(--stage-w) * 0.01150);
  --style-dot-gap:    calc(var(--stage-w) * 0.00250);
  --style-menu-pad-x: calc(var(--stage-w) * 0.00200);
}

/* =========================
   LIGHT THEME (White Mode)
   ========================= */
html[data-theme="light"]{
  --color-bg-main:  #F6F8FC;
  --color-bg-stage: #FFFFFF;

  /* Border/Lines: etwas stärker, damit sichtbar */
  --color-line: rgba(var(--rgb-ink),0.22);

  /* Chips (Ayah-Nummern-Kreis etc.) */
  --color-bg-chip: var(--c-ink-06);

  /* Text */
  --color-text: rgba(var(--rgb-ink),0.88);
  --color-text-muted: rgba(var(--rgb-ink),0.55);

  /* Arabisch */
  --color-ar-text: rgba(var(--rgb-ink),0.92);

  /* Topbar Basis (bleibt “stage”) */
  --surah-topbar-center: var(--color-bg-stage);

  /* Blau-Fades im Light-Mode etwas softer */
  --surah-topbar-blue-strong: var(--c-a-22);
  --surah-topbar-blue-soft:   rgba(var(--rgb-accent),0.12);
  --fav-clear-filter: brightness(1) contrast(1);
  --surah-topbar-play-bg-hover: var(--c-ink-06);
  --surah-topbar-mode-bg-hover: var(--c-ink-06);

  /* ✅ Lightmode: "actual" sichtbar dunkelgrau (nicht zu hart) */
  --fav-actual-bg: var(--c-ink-18);

  /* Basis-RGB für Lightmode (damit --c-ink-* nicht mehr “dunkel” ist) */
  --rgb-ink: 12,22,38;          /* bleibt Ink */
  --rgb-white: 255,255,255;
  --rgb-black: 0,0,0;

  /* Tooltip im Lightmode lieber hell */
  --color-tooltip-bg: var(--color-bg-stage);

}

/* ✅ Lightmode: Fortschrittsleiste (Track) sichtbar, damit die Striche erkennbar sind */
html[data-theme="light"] .suraProg{
  background: rgba(var(--rgb-ink),0.07);
  border-top: var(--u1h) solid rgba(var(--rgb-ink),0.10);
}

/* ✅ Lightmode: Striche etwas kontrastreicher */
html[data-theme="light"] .suraTick::after{
  background: rgba(var(--rgb-ink),0.30);
}

/* ✅ Lightmode: Hover noch klarer */
html[data-theme="light"] .suraTick:hover::after{
  background: rgba(var(--rgb-ink),0.55);
}

*{ box-sizing:border-box; }
html,body{ height:100%; margin:0; }

body{
  background: var(--color-bg-main);
  color: var(--color-text);
  overflow:hidden;
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}

html.rotate-phone body{
  position: fixed;
  inset: 0;
  overflow: hidden;
  transform: rotate(90deg);
  transform-origin: center center;
  width: 100vh;
  height: 100vw;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
}

#viewportRoot{
  position: fixed;
  inset: 0;
  display:flex;
  align-items:flex-start;
  justify-content:center;
}

#frame{
  width: var(--vw);
  height: var(--vh);
  display:grid;

  grid-template-columns: var(--bar-lr) var(--stage-w) var(--bar-lr);

  /* ✅ Row1 = sichtbare Bühne (capped), Row2 = Bottom-Bar (dünn) */
  grid-template-rows: var(--stage-vh) var(--bar-bottom);
}

.bar{
  position:relative;
  overflow:hidden;
  background: var(--color-bg-main);
}



.bar-left{ grid-column:1; grid-row:1; }
.bar-right{ grid-column:3; grid-row:1; }
.bar-bottom{ grid-column:1/4; grid-row:2; }

.stage{
  grid-column:2;
  grid-row:1;
  width: var(--stage-w);

  /* ✅ Bühne füllt die verfügbare Fensterhöhe (ohne Bottom-Ornament-Block) */
  height: calc(var(--vh) - var(--bar-bottom));

  background: var(--color-bg-main);
  position: relative;
  overflow: hidden;
}

/* STATUSBAR */
.statusbar{
  position:absolute;
  width: calc(var(--stage-w) * 0.9864583);
  height: calc(var(--stage-h) * 0.1129630);
  left:50%;
  transform:translateX(-50%);
  top: calc((var(--stage-h) * 0.0564815) - ((var(--stage-h) * 0.1129630) / 2));
  border:1px solid var(--color-line);
  border-bottom-left-radius: calc(var(--stage-h) * 0.010);
  border-bottom-right-radius: calc(var(--stage-h) * 0.010);
  background: var(--color-bg-stage);

}

/* ===== SuraPlay Progress (Track + Fill) ===== */
.suraProg{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:10%;
  /* Track (dezenter als fill) */
  background: var(--c-w-06);
  overflow: hidden;
}

/* Fill bleibt weiter #progress, damit bestehendes JS nicht kaputt geht */
/* Fill bleibt weiter #progress, damit bestehendes JS nicht kaputt geht */
.progress{
  position:absolute;
  left:0;
  bottom:0;

  /* dünner “Strich” statt Block */
  height: 100%;
  width:100%;

  /* blau + in light/dark sichtbar */
  background: var(--c-a-95);
  border-radius: var(--round-pill);
  opacity: 0.70;
  z-index: 7050;
  transform-origin: left center;
  transform: scaleX(0);
  will-change: transform;
}

/* ✅ Play-Fill nur zeigen, wenn SurahPlay wirklich läuft */
.statusbar:not(.is-surah-playing) #progress{
  display: none;
}
.statusbar.is-surah-playing #progress{
  display: block;
}
@keyframes jumpProg{
  0%   { transform: translateX(-60%); }
  50%  { transform: translateX(0%); }
  100% { transform: translateX(60%); }
}

/* ===== SuraPlay Ticks ===== */
.suraProgTicks{
  position:absolute;
  inset:0;
  pointer-events: auto;
  z-index: 7100;
}

/* jeder Tick ist ein Button (klickbar), aber nur als dünner Strich sichtbar */
.suraTick{
  position:absolute;
  top:12%;
  bottom:12%;

  /* ✅ große Klickfläche (12px @ 1280) */
  width: var(--u12w);
  transform: translateX(calc(var(--u12w) / -2));

  /* ✅ unsichtbare Fläche */
  background: transparent;

  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
}

/* ✅ sichtbarer Strich (2px @ 1280) */
.suraTick::after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:50%;
  width: var(--u2w);
  transform: translateX(calc(var(--u2w) / -2));
  background: rgba(255,255,255,0.25);
}

/* Hover stärker (wirkt auf den Strich) */
.suraTick:hover::after{
  background: rgba(255,255,255,0.55);
}

/* Active stärker */
.suraTick.is-active::after{
  background: var(--c-a-85);
}

/* ✅ Lightmode: Strichfarbe bleibt sichtbar */
html[data-theme="light"] .suraTick::after{
  background: rgba(var(--rgb-ink),0.22);
}
html[data-theme="light"] .suraTick:hover::after{
  background: rgba(var(--rgb-ink),0.45);
}

/* ✅ Hover-Background: NICHT schwarz im Lightmode */
.suraTick:hover{
  background: var(--c-w-12);
}
html[data-theme="light"] .suraTick:hover{
  background: rgba(var(--rgb-ink),0.08);
}

/* “Aktuelle Ayah” Tick stärker */
.suraTick.is-active{
  background: var(--c-a-10);
}


/* ✅ Lightmode: NICHT transparent */
html[data-theme="light"] .suraProgTip{
  background: #f6f8fb;
  border: var(--u1h) solid var(--c-ink-12);
  color: #0c1626;
  box-shadow:
    0 var(--u10h) var(--u30h) var(--c-black-18),
    0 0 0 var(--u1h) var(--c-black-03);
  backdrop-filter: none;
}






/* =========================
   Style Picker (Statusbar)
   - Button erscheint bei Hover (30%)
   - Beim Hover: eine gemeinsame Pill (wie Favorites BG) bis rechts
   - Kreise liegen IN der Pill
   ========================= */

.stylePicker{
  position: absolute;

  /* X: gleiche linke Ausrichtung wie Favorites-Button */
  left: calc(var(--fav-center-x) - (var(--style-btn-d) / 2) + (var(--stage-w) * -0.06810));

  /* Y: direkt UNTER Favorites */
  top:  calc(var(--fav-center-y) + (var(--fav-h) / 2) + (var(--stage-h) * 0.0050));

  /* Closed: nur Button-Größe (damit Hover wirklich nur am Button triggert) */
  height: var(--style-btn-d);
  width: var(--style-btn-d);
  right: auto;

  /* Default: unsichtbar (nur Mausgeräte zeigen ihn beim Hover) */
  opacity: 1;
  pointer-events: auto;

  z-index: 9999999999999;

  display: flex;
  align-items: center;

  border: var(--u1h) solid transparent;
  border-radius: var(--jump-r);
  background: transparent;

  /* closed: kein padding, sonst wird die Hover-Zone zu groß */
  padding-inline: 0;

  transition:
    opacity 160ms ease,
    background 160ms ease,
    border-color 160ms ease,
    width 160ms ease,
    padding-inline 160ms ease;
}

/* Button-Kreis (linker Button) */
.styleBtn{
  width: var(--style-btn-d);
  height: var(--style-btn-d);
  border-radius: var(--round-pill);

  border: var(--u1h) solid var(--color-line);
  background: var(--color-bg-main);
  color: var(--color-text);

  display: grid;
  place-items: center;

  opacity: 0.60;

  flex: 0 0 auto;
  cursor: pointer;

  transition: opacity 160ms ease, filter 160ms ease, transform 120ms ease;
}

.styleIcon{
  /* ✅ größer */
  width: 82%;
  height: 82%;
  display: block;
  fill: currentColor;
  pointer-events: none;

  /* ✅ optisches Zentrieren (Desktop = 0) */
  --style-icon-y: 0px;
  transform: translateY(var(--style-icon-y));
}

/* ✅ Phone/rotate: minimaler Nudge, damit es NICHT versetzt wirkt */
html.rotate-phone .styleIcon{
  --style-icon-y: calc(var(--u1h) * 0.8);
}

/* Menübereich: enthält ALLE Styles, wird bei Bedarf horizontal scrollbar */
.styleMenu{
  height: 100%;

  /* ✅ darf den verfügbaren Platz nutzen */
  flex: 1 1 auto;

  display: none;
  align-items: center;

  gap: var(--style-dot-gap);
  padding-inline-start: var(--style-dot-gap);

  /* ✅ wichtig: wenn zu viele Styles -> horizontal scroll statt abgeschnitten */
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;

  opacity: 0;
  pointer-events: none;

  transition: opacity 160ms ease;
}

/* optional: Scrollbar hübsch (nutzt nur Root-Farben) */
.styleMenu::-webkit-scrollbar{
  height: var(--sb-w);
}
.styleMenu::-webkit-scrollbar-thumb{
  background: var(--fx-scroll-fill);
  border-radius: var(--round-pill);
}
.styleMenu::-webkit-scrollbar-track{
  background: var(--c-w-06);
  border-radius: var(--round-pill);
}
html[data-theme="light"] .styleMenu::-webkit-scrollbar-track{
  background: var(--c-ink-06);
}



/* Kreise im Menü */
.styleDot{
  width: var(--style-dot-d);
  height: var(--style-dot-d);
  border-radius: var(--round-pill);

  border: var(--u1h) solid var(--color-line);
  background: var(--color-bg-chip);

  display: grid;
  place-items: center;

  /* ✅ wichtig: Button-Defaults raus + SVG bleibt im Kreis */
  padding: 0;
  overflow: hidden;
  line-height: 0;

  cursor: pointer;
  opacity: 0.95;

  /* ✅ klickbar */
  pointer-events: auto;

  transition: transform 120ms ease, filter 120ms ease, opacity 120ms ease;
}

/* ✅ Preview-SVG MUSS in den Kreis passen */
.stylePreview{
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

.styleDot:hover{
  transform: scale(1.05);
  filter: var(--fx-glow-accent-hover);
  opacity: 1;
}

.styleDot.is-active{
  outline: var(--u1h) solid var(--c-a-85);
  outline-offset: calc(var(--u2h) * 1);
  filter: var(--fx-glow-accent-focus);
}

/* ✅ Click-open support (touch + desktop) */
.stylePicker.is-open{
  right: calc(var(--stage-w) * 0.012);
  width: auto;
  padding-inline: var(--style-menu-pad-x);
  border-color: var(--color-line);
  background: var(--color-bg-main);
}

.stylePicker.is-open .styleBtn{
  opacity: 1;
}

.stylePicker.is-open .styleMenu{
  display: flex;
  opacity: 1;
  pointer-events: auto;
}

/* Nur Mausgeräte:
   - Picker kann sichtbar werden, aber NICHT mehr öffnen per Hover
   - Öffnen passiert NUR per Klick (über .is-open) */
@media (hover:hover){
  .statusbar:hover .stylePicker{
    opacity: 1;
    pointer-events: auto;
  }

  /* ✅ nur Hover-Glow am Button, KEIN Menü-Open */
  .styleBtn:hover{
    opacity: 1;
    filter: var(--fx-glow-accent-hover);
    transform: scale(1.03);
  }

  .styleBtn:active{
    transform: scale(0.98);
  }
}








/* =========================
   Surah Progress Tick Tooltip (Statusbar) – wieder sichtbar
   ========================= */
.suraProgTip{
  position: fixed;
  z-index: 999999;
  pointer-events: none;

  /* hidden by default */
  opacity: 0;
  visibility: hidden;
  transform: translateY(calc(var(--stage-h) * 0.0083));

  /* ✅ weniger breit als vorher */
  max-width: min(calc(var(--stage-w) * 0.46), calc(100vw - calc(var(--stage-w) * 0.02)));

  /* ✅ gleiche "dunkle" Farbe wie vorher, aber SOLID */
  background: var(--c-ink);
  border: var(--u1h) solid var(--c-w-14);

  border-radius: calc(var(--stage-h) * 0.0167);
  padding: calc(var(--stage-h) * 0.0139) calc(var(--stage-w) * 0.0094);

  box-shadow:
    0 calc(var(--stage-h) * 0.0139) calc(var(--stage-h) * 0.0417) var(--c-black-35),
    0 0 0 calc(var(--stage-h) * 0.0014) rgba(255,255,255,0.04);

  color: var(--color-text);

  /* ✅ kein Blur = wirkt nicht transparent */
  backdrop-filter: none;

  transition:
    opacity 500ms ease,
    transform 500ms ease,
    visibility 0s linear 500ms;
}

.suraProgTip.is-show{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0s, 0s, 0s;
}

/* ✅ Lightmode: bleibt SOLID (auch hier keine Transparenz) */
html[data-theme="light"] .suraProgTip{
  background: var(--color-bg-stage);
  border: var(--u1h) solid var(--color-line);
  color: var(--color-text);
  box-shadow:
    0 calc(var(--stage-h) * 0.0139) calc(var(--stage-h) * 0.0417) var(--c-black-18),
    0 0 0 calc(var(--stage-h) * 0.0014) var(--c-black-03);
}

.qHoverTip .tipRef{
  font-family: var(--font-meta);
  font-weight: 550;
  opacity: .92;

  /* ✅ Ref soll mindestens so groß wie Arabisch sein */
  font-size: calc(var(--ayah-font-ar) * 0.45);
  line-height: 1.05;

  margin-bottom: var(--u8h);
}

.qHoverTip .tipAr{
  font-family: var(--font-ar);

  /* ✅ Arabisch etwas kleiner (war zu groß) */
  font-size: calc(var(--ayah-font-ar) * 0.38);
  line-height: 1.55;

  color: var(--color-ar-text);
  direction: rtl;
  text-align: right;

  margin-bottom: var(--u10h);
}

.qHoverTip .tipWord{
  font-family: var(--font-de);
  font-size: calc(var(--ayah-font-meta) * 1.06);
  font-weight: 600;
  opacity: .95;
  margin-bottom: var(--u12h); /* ✅ mehr Abstand zur Ayah-Übersetzung */
  text-align: center;
}

.qHoverTip .tipLabel{
  font-family: var(--font-meta);
  font-size: calc(var(--ayah-font-meta) * 0.76);
  font-weight: 550;
  opacity: .78;
  margin-right: var(--u6w);
}

.qHoverTip .tipTr{
  font-family: var(--font-de);

  /* ✅ Englisch größer (war zu klein) */
  font-size: calc(var(--ayah-font-meta) * 0.89);
  line-height: 1.35;

  opacity: .92;
  text-align: center;
}

/* ✅ Lightmode: NICHT transparent */
html[data-theme="light"] .qHoverTip{
  background: #f6f8fb;
  border: var(--u1h) solid var(--c-ink-12);
  color: #0c1626;
  box-shadow:
    0 var(--u10h) var(--u30h) var(--c-black-18),
    0 0 0 var(--u1h) var(--c-black-03);
  backdrop-filter: none;
}

html[data-theme="light"] .qHoverTip .tipAr{
  color: #0c1626;
}

/* =========================
   Word + Mushaf hover tooltip (Wort / Ayahnummer)
   ========================= */
.qHoverTip{
  position: fixed;
  z-index: 999999;
  pointer-events: none;

  /* Start-Position (wird von JS überschrieben) */
  left: 0;
  top: 0;

  /* hidden by default */
  opacity: 0;
  visibility: hidden;
  transform: translateY(calc(var(--stage-h) * 0.0083));

  /* ✅ etwas schmaler */
  max-width: min(calc(var(--stage-w) * 0.44), calc(100vw - calc(var(--stage-w) * 0.02)));

  /* ✅ gleiche dunkle Farbe wie vorher, aber SOLID */
  background: var(--c-ink);
  border: var(--u1h) solid var(--c-w-14);

  border-radius: calc(var(--stage-h) * 0.0167);
  padding: calc(var(--stage-h) * 0.0139) calc(var(--stage-w) * 0.0094);

  box-shadow:
    0 calc(var(--stage-h) * 0.0139) calc(var(--stage-h) * 0.0417) var(--c-black-35),
    0 0 0 calc(var(--stage-h) * 0.0014) rgba(255,255,255,0.04);

  color: var(--color-text);

  /* ✅ kein Blur = wirkt nicht transparent */
  backdrop-filter: none;

  transition:
    opacity 500ms ease,
    transform 500ms ease,
    visibility 0s linear 500ms;
}

.qHoverTip.is-show{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0s, 0s, 0s;
}

html[data-theme="light"] .suraProgTip{
  background: var(--c-white);
  border: var(--u1h) solid var(--c-ink-18);
  color: rgba(var(--rgb-ink),0.90);
}

.suraProgTip .tipRef{
  font-family: var(--font-meta);
  font-weight: 700;
  opacity: .85;
  margin-bottom: 6px;
}

.suraProgTip .tipAr{
  font-family: var(--font-ar);
  font-size: calc(var(--ayah-font-ar) * 0.92);
  line-height: 1.35;
  color: var(--color-ar-text);
  direction: rtl;
  text-align: right;
  margin-bottom: var(--u8h);
}

.suraProgTip .tipTr{
  font-family: var(--font-de);
  font-size: calc(var(--ayah-font-meta) * 0.96);
  opacity: .90;
}

/* ✅ HARD hide: SurahPause/Repeat nur wenn SurahPlay läuft */
.statusbar:not(.is-surah-playing) #suraPause,
.statusbar:not(.is-surah-playing) #suraRepeat{
  display: none !important;
}

/* ✅ Repeat aktiv deutlich sichtbar (orange) */
#suraRepeat.is-on,
#favRepeat.is-on{
  color: var(--c-warn-95) !important;
  filter:
    drop-shadow(0 0 calc(var(--glow-ring) * 1.15) rgba(var(--rgb-warn),0.40))
    drop-shadow(0 0 calc(var(--glow-soft) * 0.85) var(--c-warn-55));
}

/* =========================
   Jump feedback (wenn Dropdown-Jump läuft)
   ========================= */
.statusbar.is-jumping .progress{
  width: 100%;
  opacity: 1;
  animation: jumpProg 900ms ease-in-out infinite;
}

@keyframes jumpProg{
  0%   { transform: translateX(-60%); }
  50%  { transform: translateX(0%); }
  100% { transform: translateX(60%); }
}

/* Dropdown Button während Jump */
.suraDrop.is-jumping .suraDropBtn{
  border-color: var(--c-a-85);
  box-shadow:
    0 0 0 calc(var(--glow-ring) * 1.35) var(--c-a-35),
    0 0 calc(var(--glow-soft) * 1.35) var(--c-a-65);
  cursor: progress;
}

/* kleiner Spinner rechts neben dem Pfeil */
.suraDrop.is-jumping .suraDropArrow{
  position: relative;
  opacity: 1;
}

.suraDrop.is-jumping .suraDropArrow::after{
  content:"";
  display:inline-block;
  width: 0.85em;
  height: 0.85em;
  margin-left: 0.45em;
  border-radius: var(--round-pill);

  /* 2px @ 720 */
  border: calc(var(--stage-h) * 0.0027778) solid rgba(255,255,255,0.35);
  border-top-color: var(--c-a-95);

  animation: spin 800ms linear infinite;
  vertical-align: -0.12em;
}

@keyframes spin{
  from{ transform: rotate(0deg); }
  to  { transform: rotate(360deg); }
}

/* ✅ Statusbar: Play/Stop nur im Favorites-Mode ausblenden */
.qView[data-mode="favorites"] ~ .statusbar #playStop,
.qView[data-mode="favorites"] ~ .statusbar #playPause{
  display: none !important;
}

/* ✅ Normale SuraProg überall anzeigen (Ayah/Mushaf) */
.statusbar:not(.is-favorites) .suraProg{
  display: block !important;
}

/* ✅ Favorites: Fortschrittsleiste in der Statusbar NICHT anzeigen */
.statusbar.is-favorites .suraProg{
  display: none !important;
}
/* =========================
   Scroll-Progress (nur Scrollen, NICHT SurahPlay)
   - gleiche Blau-Farbe wie dein UI
   - hidden in Favorites + hidden bei SurahPlay
   ========================= */

#scrollProgress{
  position: absolute;
  left: 0;
  top: 0;

  width: 100%;
  height: 100%;

  transform-origin: 0% 50%;
  transform: scaleX(0);

  /* gleiches Blau wie deine UI-Highlights */
  background: rgba(var(--rgb-accent),0.72);

  pointer-events: none;

  /* nur sichtbar wenn erlaubt */
  opacity: 0;
  transition: opacity 120ms linear;
}

/* ✅ ScrollProgress: im normalen Modus sichtbar (wenn NICHT SurahPlay), aber in Favorites aus */
.statusbar:not(.is-surah-playing):not(.is-favorites) #scrollProgress{
  display: block !important;
  opacity: 1;
}

/* ✅ während SurahPlay aus (weil dann #progress zuständig ist) */
.statusbar.is-surah-playing #scrollProgress{
  display: none !important;
  opacity: 0;
}

/* ✅ in Favorites aus (weil dort eine NEUE eigene Leiste kommen soll) */
.statusbar.is-favorites #scrollProgress{
  display: none !important;
  opacity: 0;
}

/* ✅ Statusbar: in Favorites nur PlayPause verstecken (PlayStop bleibt sichtbar) */
.statusbar.is-favorites #playPause{
  display: none !important;
}

/* ✅ Statusbar: im Surah-Queue Mode den runden playPause verstecken
   (stattdessen wird der kleine icon-only #suraPause gezeigt) */
.statusbar.is-surah-playing #playPause{
  display: none !important;
}

/* ✅ FIX: Der runde Ayah-Pause-Kreis soll NIE in der Statusbar auftauchen
   (Pause/Resume passiert über den AyahPlay-Button selbst) */
.statusbar #playPause{
  display: none !important;
}

/* ✅ Play-Fortschritt nur anzeigen wenn SurahPlay läuft */
.statusbar:not(.is-surah-playing) #progress{
  display: none !important;
}
.statusbar.is-surah-playing #progress{
  display: block !important;
}

/* JUMP PILL */
.jumpBox{
  position:absolute;
  width: var(--jump-w);
  height: var(--jump-h);
  left: calc(var(--jump-center-x) - (var(--jump-w) / 2));
  top:  calc(var(--jump-center-y) - (var(--jump-h) / 2));
  border: var(--u1h) solid var(--color-line);
  border-radius: var(--jump-r);
  background: var(--color-bg-main);
  box-shadow: 0 0 calc(var(--stage-h) * 0.01) var(--c-black-08);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-inline: calc((var(--jump-w) - var(--jump-inner-w)) / 2);
  padding-block:  calc((var(--jump-h) - var(--jump-inner-h)) / 2);
  box-sizing:border-box;
  transition: box-shadow 140ms ease, border-color 140ms ease, background 140ms ease;
}

/* Hover-Glow */
.jumpBox:hover{
  border-color: rgba(var(--rgb-accent),0.70);
  box-shadow:
    0 0 0 calc(var(--glow-ring) * 1.15) var(--c-a-22),
    0 0 calc(var(--glow-soft) * 1.10) var(--c-a-45);
}

/* ✅ Wenn Input fokussiert ist (tippen) → Glow (ohne JS, 100% zuverlässig) */
.jumpBox:focus-within{
  border-color: var(--c-a-85);
  box-shadow:
    0 0 0 calc(var(--glow-ring) * 1.35) var(--c-a-35),
    0 0 calc(var(--glow-soft) * 1.35) var(--c-a-65);
}

.jumpBox.is-bad{
  border-color: var(--c-d-95);
  box-shadow:
    0 0 calc(var(--stage-h) * 0.012) rgba(255, 90, 90, 0.25),
    0 0 calc(var(--stage-h) * 0.022) var(--c-d-18);
}
.jumpInput{
  width: calc(var(--jump-inner-w) - var(--jump-inner-h)); /* Platz für Pfeil */
  height: var(--jump-inner-h);

  border: 0;
  outline: none;
  background: transparent;

  font-family: var(--font-meta);
  font-size: var(--ayah-font-meta);
  font-weight: 600;
  color: var(--color-text);

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.jumpInput.is-bad{
  /* 2px @ 720 */
  outline: calc(var(--stage-h) * 0.0027778) solid rgba(var(--rgb-danger),.9);
  /* 8px @ 720 */
  border-radius: calc(var(--stage-h) * 0.0111111);
}

.jumpInput::placeholder{
  color: var(--color-text-muted);
  font-weight: 600;
}

.jumpArrow{
  width: var(--jump-inner-h);
  height: var(--jump-inner-h);

  border: 0;
  background: transparent;
  border-radius: var(--round-pill);

  display:flex;
  align-items:center;
  justify-content:center;

  cursor:pointer;
  color: var(--color-text-muted);
}

.jumpArrow:hover{
  color: var(--color-text);
}

.jumpArrow{ --icon-scale: 0.82; }
.jumpArrowIcon{
  width:  calc(200% * var(--icon-scale));
  height: calc(200% * var(--icon-scale));
}

/* ✅ Jump loading feedback (wie SurahSelect) */
.jumpBox.is-jumping{
  border-color: var(--c-a-85);
  box-shadow:
    0 0 0 calc(var(--glow-ring) * 1.35) var(--c-a-35),
    0 0 calc(var(--glow-soft) * 1.35) var(--c-a-65);
  cursor: progress;
}

.jumpArrow.is-jumping{
  position: relative;
  cursor: progress;
  color: rgba(255,255,255,0.88);
}

.jumpArrow.is-jumping::after{
  content:"";
  position: absolute;
  right: -0.25em;
  top: 50%;
  transform: translateY(-50%);
  width: 0.85em;
  height: 0.85em;
  border-radius: var(--round-pill);

  /* 2px @ 720 */
  border: calc(var(--stage-h) * 0.0027778) solid rgba(255,255,255,0.35);
  border-top-color: var(--c-a-95);

  animation: spin 800ms linear infinite;
}


/* BUTTONS */
.btnCircle{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  border:1px solid var(--color-line);
  background: var(--color-bg-stage);
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  overflow:hidden;
}

/* ✅ Browser-Default "disabled = transparent" überschreiben */
.btnCircle:disabled{
  opacity: 1;              /* war Browser-default transparent */
  filter: none;
  cursor: default;
}

.btnCircle .icon{
  width:75%;
  height:75%;
  fill: var(--color-text);
}

/* =========================
   Play/Stop (Textzeichen) – Desktop + Phone exakt zentriert
   ========================= */
/* =========================
   Play/Stop (SVG) – Statusbar: Play und Stop identisch behandelt
   ========================= */

/* Button selbst */
.playStop{
  --ps-d: calc(var(--stage-w) * 0.0291667);

  /* ✅ Icongröße als feste Länge (kein %) */
  --ps-icon: calc(var(--ps-d) * 0.62);

  width:  var(--ps-d);
  height: var(--ps-d);

  top: calc((var(--stage-h) * 0.0388889) - ( var(--ps-d) / 2 ));

  z-index: 8500;
  background: var(--color-bg-stage);
  border: var(--u1h) solid var(--color-line);

  position: absolute;
  overflow: hidden;

  /* ✅ echtes Zentrieren */
  display: grid;
  place-items: center;

  color: var(--color-text);
}

/* ✅ WICHTIG: Text-Overlay komplett deaktivieren (falls noch irgendwo vorhanden) */
.playStop::before{
  content: none !important;
}

/* ✅ SVG-Icons: gleiche Größe, gleiche Center-Logik */
.playStop .icon{
  width:  var(--ps-icon);
  height: var(--ps-icon);
  display: block;
  fill: currentColor;
  pointer-events: none;
}

/* ✅ nur eins sichtbar je Zustand */
.playStop .icon-stop{ display: none; }
.playStop.is-playing .icon-play{ display: none; }
.playStop.is-playing .icon-stop{ display: block; }

/* ✅ STOP optisch minimal an PLAY angleichen (weil Quadrat im SVG oft „kleiner“ wirkt) */
.playStop.is-playing .icon-stop{
  transform: scale(1.08);
}

.playPause{
  width: calc(var(--stage-w) * 0.0130208);
  height: calc(var(--stage-w) * 0.0130208);
  top: calc((var(--stage-h) * 0.0824074) - ( (var(--stage-w) * 0.0130208) / 2 ));
}

.playPause:disabled{
  opacity:0;
  pointer-events:none;
}

/* =========================
   ✅ Small Pause Buttons (ICON ONLY)
   - favPause = Favorites Queue
   - suraPause = Surah Queue
   ========================= */

/* gemeinsame Animation: 1s Flash */
@keyframes smallPauseFlash {
  0%   { filter: drop-shadow(0 0 calc(var(--glow-ring) * 1.35) rgba(var(--rgb-accent),0.55))
                 drop-shadow(0 0 calc(var(--glow-soft) * 1.35) rgba(var(--rgb-accent),0.75)); }
  100% { filter: drop-shadow(0 0 calc(var(--glow-ring) * 1.00) var(--c-a-35))
                 drop-shadow(0 0 calc(var(--glow-soft) * 1.00) var(--c-a-45)); }
}

/* ===== Base (beide Buttons gleich) ===== */
.favPauseBtn,
.suraPauseBtn{
  /* Größe/Position: exakt wie playPause */
  width:  calc(var(--stage-w) * 0.0130208);
  height: calc(var(--stage-w) * 0.0130208);
  top:    calc((var(--stage-h) * 0.0824074) - ( (var(--stage-w) * 0.0130208) / 2 ));

  /* wie btnCircle zentrieren */
  position: absolute;
  left: 50%;
  transform: translateX(-50%);

  /* default unsichtbar */
  display: none;
  z-index: 7100;

  /* kein Kreis */
  border: 0;
  background: transparent;
  padding: 0;

  /* ähnlich “muted” wie Bookmark */
  opacity: 0.82;

  cursor: pointer;
  color: var(--color-text) !important; /* in Darkmode = weiß/hell */
}

/* sichtbar nur wenn jeweilige Queue läuft */
.statusbar.is-fav-playing .favPauseBtn{ display:block; }
.statusbar.is-surah-playing .suraPauseBtn{ display:block; }

/* ✅ Surah-Repeat nur bei SurahPlay */
#suraRepeat{ display:none; }
.statusbar.is-surah-playing #suraRepeat{ display:block; }

/* ✅ Favorites-Repeat nur bei FavPlay (nicht dauerhaft in Favorites) */
#favRepeat{ display:none !important; }
.statusbar.is-favorites.is-fav-playing #favRepeat{ display:block !important; }

/* =========================
   Volume Slider (Statusbar)
   immer sichtbar
   ========================= */

.volCtl{
  /* gleiche vertikale Position/Höhe wie suraPauseBtn */
  position: absolute;
  top: calc((var(--stage-h) * 0.0824074) - ( (var(--stage-w) * 0.0130208) / 2 ));
  height: calc(var(--stage-w) * 0.0130208);

  /* links vom Pausebutton */
  left: 50%;
  transform: translateX(calc(-100% - calc(var(--stage-w) * 0.010)));
  z-index: 7200;
  opacity: 0.80;
  display: flex;
  align-items: center;
}

.volSlider{
  width: calc(var(--stage-w) * 0.060);
  height: 100%;
  opacity: 0.80;
  cursor: pointer;

  /* ✅ stabileres Rendering (Mobile) */
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
}

/* ✅ Glow wie bei Buttons: Hover + “Benutzung” (focus/active) */
.volCtl:hover,
.volCtl:focus-within{
  opacity: 1;
  filter:
    drop-shadow(0 0 calc(var(--glow-ring) * 1.15) rgba(var(--rgb-accent),0.45))
    drop-shadow(0 0 calc(var(--glow-soft) * 1.15) rgba(var(--rgb-accent),0.55));
}

/* ===== WebKit (Chrome/Safari iOS) ===== */
.volSlider::-webkit-slider-runnable-track{
  height: 100%;
  border-radius: 999px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.10);
}

html[data-theme="light"] .volSlider::-webkit-slider-runnable-track{
  background: rgba(var(--rgb-ink),0.08);
  border: 1px solid rgba(var(--rgb-ink),0.10);
}

.volSlider::-webkit-slider-thumb{
  -webkit-appearance: none;
  appearance: none;

  width:  calc(var(--stage-w) * 0.010);
  height: calc(var(--stage-w) * 0.010);
  border-radius: 999px;

  background: rgba(255,255,255,0.90);
  border: 1px solid rgba(255,255,255,0.25);

  /* ✅ “Button glow” am Punkt */
  box-shadow:
    0 0 0 calc(var(--glow-ring) * 1.05) rgba(var(--rgb-accent),0.25),
    0 0 calc(var(--glow-soft) * 0.75) rgba(var(--rgb-accent),0.45);
}

html[data-theme="light"] .volSlider::-webkit-slider-thumb{
  background: rgba(var(--rgb-ink),0.78);
  border: 1px solid rgba(var(--rgb-ink),0.15);
}

/* ===== Firefox ===== */
.volSlider::-moz-range-track{
  height: 100%;
  border-radius: 999px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.10);
}

html[data-theme="light"] .volSlider::-moz-range-track{
  background: rgba(var(--rgb-ink),0.08);
  border: 1px solid rgba(var(--rgb-ink),0.10);
}

.volSlider::-moz-range-thumb{
  width:  calc(var(--stage-w) * 0.010);
  height: calc(var(--stage-w) * 0.010);
  border-radius: 999px;

  background: rgba(255,255,255,0.90);
  border: 1px solid rgba(255,255,255,0.25);

  box-shadow:
    0 0 0 calc(var(--glow-ring) * 1.05) rgba(var(--rgb-accent),0.25),
    0 0 calc(var(--glow-soft) * 0.75) rgba(var(--rgb-accent),0.45);
}

html[data-theme="light"] .volSlider::-moz-range-thumb{
  background: rgba(var(--rgb-ink),0.78);
  border: 1px solid rgba(var(--rgb-ink),0.15);
}

/* ===== Track (die Linie) ===== */
.volSlider::-webkit-slider-runnable-track{
  height: calc(var(--stage-w) * 0.0130208 * 0.22);
  border-radius: 999px;
  background: rgba(255,255,255,0.18);
  border: var(--u1h) solid rgba(255,255,255,0.10);
}
html[data-theme="light"] .volSlider::-webkit-slider-runnable-track{
  background: rgba(var(--rgb-ink),0.14);
  border-color: rgba(var(--rgb-ink),0.10);
}

/* ===== Thumb (der Punkt) ===== */
.volSlider::-webkit-slider-thumb{
  -webkit-appearance: none;
  appearance: none;

  width:  calc(var(--stage-w) * 0.0130208 * 0.95);
  height: calc(var(--stage-w) * 0.0130208 * 0.95);
  border-radius: 999px;

  background: var(--color-text);
  border: var(--u1h) solid rgba(0,0,0,0.18);
  box-shadow:
    0 0 0 calc(var(--glow-ring) * 0.90) rgba(var(--rgb-accent),0.20);

  /* Track sitzt mittig */
  margin-top: calc((calc(var(--stage-w) * 0.0130208 * 0.22) - calc(var(--stage-w) * 0.0130208 * 0.95)) / 2);
}
html[data-theme="light"] .volSlider::-webkit-slider-thumb{
  background: rgba(var(--rgb-ink),0.80);
  border-color: rgba(var(--rgb-ink),0.14);
}

/* ===== Firefox ===== */
.volSlider::-moz-range-track{
  height: calc(var(--stage-w) * 0.0130208 * 0.22);
  border-radius: 999px;
  background: rgba(255,255,255,0.18);
  border: var(--u1h) solid rgba(255,255,255,0.10);
}
html[data-theme="light"] .volSlider::-moz-range-track{
  background: rgba(var(--rgb-ink),0.14);
  border-color: rgba(var(--rgb-ink),0.10);
}

.volSlider::-moz-range-thumb{
  width:  calc(var(--stage-w) * 0.0130208 * 0.95);
  height: calc(var(--stage-w) * 0.0130208 * 0.95);
  border-radius: 999px;
  background: var(--color-text);
  border: var(--u1h) solid rgba(0,0,0,0.18);
}
html[data-theme="light"] .volSlider::-moz-range-thumb{
  background: rgba(var(--rgb-ink),0.80);
  border-color: rgba(var(--rgb-ink),0.14);
}

/* =========================
   Surah Repeat Button
   ========================= */

.suraRepeatBtn{
  width:  calc(var(--stage-w) * 0.0130208);
  height: calc(var(--stage-w) * 0.0130208);
  top:    calc((var(--stage-h) * 0.0824074) - ( (var(--stage-w) * 0.0130208) / 2 ));

  position: absolute;
  left: 50%;
  transform: translateX(calc(0% + calc(var(--stage-w) * 0.010)));

  border: 0;
  background: transparent;
  padding: 0;

  opacity: 0.82;
  cursor: pointer;
  color: var(--color-text) !important;
  z-index: 7100;
}

.suraRepeatBtn svg.icon{
  width: 100%;
  height: 100%;
  display: block;
  fill: currentColor !important;
}

.suraRepeatBtn.is-on{
  opacity: 1;
  filter:
    drop-shadow(0 0 calc(var(--glow-ring) * 1.15) var(--c-a-35))
    drop-shadow(0 0 calc(var(--glow-soft) * 1.20) var(--c-a-65));
}

.suraRepeatBtn:hover{
  opacity: 1;
  filter:
    drop-shadow(0 0 calc(var(--glow-ring) * 1.05) rgba(var(--rgb-accent),0.28))
    drop-shadow(0 0 calc(var(--glow-soft) * 1.05) var(--c-a-45));
}

/* Icon Größe */
.favPauseBtn svg.icon,
.suraPauseBtn svg.icon{
  width: 100%;
  height: 100%;
  display: block;
  fill: currentColor !important;
}

/* DEFAULT: nur PAUSE */
.favPauseBtn  svg.icon-play{  display:none !important; }
.favPauseBtn  svg.icon-pause{ display:block !important; }
.suraPauseBtn svg.icon-play{  display:none !important; }
.suraPauseBtn svg.icon-pause{ display:block !important; }

/* PAUSED: nur PLAY */
.favPauseBtn.is-paused  svg.icon-pause{ display:none !important; }
.favPauseBtn.is-paused  svg.icon-play{  display:block !important; }
.suraPauseBtn.is-paused svg.icon-pause{ display:none !important; }
.suraPauseBtn.is-paused svg.icon-play{  display:block !important; }

/* ✅ Default Glow: weich wie Bookmark (nicht zu stark) */
.statusbar.is-fav-playing  .favPauseBtn  svg.icon,
.statusbar.is-surah-playing .suraPauseBtn svg.icon{
  filter:
    drop-shadow(0 0 calc(var(--glow-ring) * 1.00) var(--c-a-35))
    drop-shadow(0 0 calc(var(--glow-soft) * 1.00) var(--c-a-45));
}

/* Hover: leicht stärker (wie Bookmark) */
.statusbar.is-fav-playing  .favPauseBtn:hover  svg.icon,
.statusbar.is-surah-playing .suraPauseBtn:hover svg.icon{
  opacity: 0.92;
  filter:
    drop-shadow(0 0 calc(var(--glow-ring) * 1.15) var(--c-a-45))
    drop-shadow(0 0 calc(var(--glow-soft) * 1.15) rgba(var(--rgb-accent),0.55));
}

/* Click-Flash: nur 1 Sekunde */
.favPauseBtn.is-flash svg.icon,
.suraPauseBtn.is-flash svg.icon{
  animation: smallPauseFlash 1s ease-out 1;
}


.playPause .icon-play{ display:none; }
.playPause.is-playing .icon-pause{ display:none; }

.playPause.is-paused .icon-pause{ display:block; }
.playPause.is-paused .icon-play{ display:block; }

.favPauseBtn svg.icon path,
.suraPauseBtn svg.icon path{
  fill: currentColor !important;
}


/* =========================
   Theme Toggle (Statusbar)
   ========================= */
.themeBtn{
  /* ✅ gleiche Größe wie Playbutton (stage-w basiert wie deine anderen runden Controls) */
  --theme-d: calc(var(--stage-w) * 0.0291667);

  width:  var(--theme-d);
  height: var(--theme-d);

  position: absolute;
  top:  calc(var(--stage-h) * 0.012);

  /* ✅ ganz rechts in der Statusleiste */
  right: calc(var(--stage-w) * 0.007);
  left: auto;                 /* ✅ wichtig: überschreibt evtl. globale left-Regeln */
  transform: none;            /* ✅ keine translateX Sachen */

  background: var(--color-bg-stage);
  border: var(--u1h) solid var(--color-line);
  border-radius: var(--round-pill);

  display: grid;
  place-items: center;

  color: var(--color-text);
  z-index: 9500;

    --theme-icon: calc(var(--theme-d) * 0.46);

  /* Desktop: kein Offset */
  --theme-y: 0em;
}

/* Phone: kleines optisches Centering */
html.rotate-phone .themeBtn{
  --theme-y: 0.08em;
}

/* Sun/Moon Glyphs als feste Box */
.themeBtn .themeIcon{
  font-size: var(--theme-icon);
  width:  1em;
  height: 1em;
  display: block;
  line-height: 1;

transform: translateY(var(--theme-y));
}

/* Hover Glow wie PlayStop */
.themeBtn:hover{
  border-color: rgba(var(--rgb-accent),0.75);
  box-shadow:
    0 0 0 var(--glow-ring) rgba(var(--rgb-accent),0.28),
    0 0 var(--glow-soft) var(--glow-blue);
}


.themeBtn{
  /* kleiner als vorher */
  --theme-icon: calc(var(--theme-d) * 0.40);
}



/* Default: DARK -> zeige Sonne, verstecke Mond */
.themeBtn .icon-sun{ display:block; }
.themeBtn .icon-moon{ display:none; }
/* Default: DARK -> Sonne, Mond versteckt */
.themeBtn .themeSun{ display: inline; }
.themeBtn .themeMoon{ display: none; }

/* Light Mode: Mond zeigen */
html[data-theme="light"] .themeBtn .themeSun{ display: none; }
html[data-theme="light"] .themeBtn .themeMoon{ display: inline; }


/* =========================
   Mushaf/Ayah Toggle (Statusbar)
   - feste Icon-Größe wie Play/Stop (keine %)
   - Ayah-Icon bekommt Korrektur (weil Asset “optisch off-center”)
   ========================= */
.viewToggleBtn{
  /* Button-Durchmesser */
  --vt-d: calc(var(--stage-w) * 0.0291667);

  /* ✅ Icon-Größe (kleiner als vorher 0.62) */
  --vt-icon: calc(var(--vt-d) * 0.48);

  /* ✅ Feintuning pro Icon (in echten Längen, nicht em) */
  --vt-mushaf-scale: 1;
  --vt-mushaf-y: calc(var(--vt-d) * -0.035); /* Ayah etwas nach unten */

  /* Ayah-Asset ist oft “zu hoch/zu tief” je nach SVG -> kleiner Offset */
  --vt-ayah-scale: 1;
  --vt-ayah-y: calc(var(--vt-d) * -0.035); /* Ayah etwas nach unten */

  width:  var(--vt-d);
  height: var(--vt-d);

  position: absolute;
  top:  calc(var(--stage-h) * 0.012);

  right: calc(var(--stage-w) * 0.0423);
  left: auto;
  transform: none;

  background: var(--color-bg-stage);
  border: var(--u1h) solid var(--color-line);
  border-radius: var(--round-pill);

  display: grid;
  place-items: center;

  color: var(--color-text);
  z-index: 9500;
}

/* Hover Glow wie Theme/Play */
.viewToggleBtn:hover{
  border-color: rgba(var(--rgb-accent),0.75);
  box-shadow:
    0 0 0 var(--glow-ring) rgba(var(--rgb-accent),0.28),
    0 0 var(--glow-soft) var(--glow-blue);
}

/* Icons (IMG) */
.viewToggleBtn .viewIcon{
  width:  var(--vt-icon);
  height: var(--vt-icon);
  display: block;
  object-fit: contain;

  /* Darkmode muted */
  filter: invert(1) brightness(0.82) contrast(0.95);
  opacity: 0.88;
}

/* Lightmode muted */
html[data-theme="light"] .viewToggleBtn .viewIcon{
  filter: invert(0) brightness(0.55) contrast(1.05);
  opacity: 0.78;
}

/* ✅ Pro Icon eigene Korrektur */
.viewToggleBtn .viewIconMushaf{
  transform: translateY(var(--vt-mushaf-y)) scale(var(--vt-mushaf-scale));
}
.viewToggleBtn .viewIconAyah{
  transform: translateY(var(--vt-ayah-y)) scale(var(--vt-ayah-scale));
}

/* Standard: Ayahmode => Mushaf-Icon zeigen */
.viewToggleBtn .viewIconAyah{ display: none; }

/* Wenn wir in Mushaf sind => Ayah-Icon zeigen */
.viewToggleBtn.is-mushaf .viewIconMushaf{ display:none; }
.viewToggleBtn.is-mushaf .viewIconAyah{ display:block; }
/* =========================
   AYAH DEMO RENDER (Stage-only)
   ========================= */

.qView{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  top: calc(var(--stage-h) * (0.1229630 + 0.005));
  width: var(--ayah-card-w);

  /* ✅ Scroll wieder aktiv */
  height: calc(
  (var(--vh) - var(--bar-bottom)) 
  - (var(--stage-h) * (0.1229630 + 0.005))  /* qView top */
  - (var(--stage-h) * 0.02));               /* kleiner bottom-safety */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;

  box-sizing: border-box;
  padding-inline: 0;

  display:flex;
  flex-direction:column;

  /* ✅ Abstand zwischen Karten wieder sichtbar */
  gap: calc(var(--stage-h) * 0.0158);

  padding-bottom: calc(var(--stage-h) * 0.03);
}

/* =========================
   Nice clean scrollbars
   ========================= */
.qView, .mView, .welcomeBody{
  scrollbar-width: thin;                 /* Firefox */
  scrollbar-color: rgba(255,255,255,.28) transparent;
}

.qView::-webkit-scrollbar,
.mView::-webkit-scrollbar,
.welcomeBody::-webkit-scrollbar{
  /* 10px @ 1280 */
  width: calc(var(--stage-w) * 0.0078125);
}

.qView::-webkit-scrollbar-track,
.mView::-webkit-scrollbar-track,
.welcomeBody::-webkit-scrollbar-track{
  background: transparent;
}

.qView::-webkit-scrollbar-thumb,
.mView::-webkit-scrollbar-thumb,
.welcomeBody::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.22);
  /* 2px @ 720 */
  border: calc(var(--stage-h) * 0.0027778) solid transparent;
  background-clip: padding-box;
  border-radius: var(--round-pill);
}

.qView::-webkit-scrollbar-thumb:hover,
.mView::-webkit-scrollbar-thumb:hover,
.welcomeBody::-webkit-scrollbar-thumb:hover{
  background: rgba(255,255,255,.34);
  /* 2px @ 720 */
  border: calc(var(--stage-h) * 0.0027778) solid transparent;
  background-clip: padding-box;
}

/* =========================
   MUSHAF VIEW (scroll inside stage)
   ========================= */

.mView{
  position:absolute;
  left:50%;
  transform:translateX(-50%);

  /* ✅ gleich wie .qView → gleicher Abstand über/unter der surahTopBar */
  top: calc(var(--stage-h) * (0.1229630 + 0.005));

  width: var(--ayah-card-w);

 height: calc(
  (var(--vh) - var(--bar-bottom))
  - (var(--stage-h) * (0.1229630 + 0.005))  /* mView top (wie qView) */
  - (var(--stage-h) * 0.02)                 /* kleiner bottom-safety */
);
  overflow-y:auto;
  -webkit-overflow-scrolling: touch;

  /* ✅ gleiche “Listen-Logik” wie Ayah-Mode */
  box-sizing: border-box;
  padding-inline: 0;
  display:flex;
  flex-direction:column;
  gap: calc(var(--stage-h) * 0.0158);

  padding-bottom: calc(var(--stage-h) * 0.03);
  
}

.mCenter{
  width:100%;
  text-align:center;
  padding: 0;

  /* ✅ damit der Bereich hinter Surah + Basmallah NICHT mehr dunkel “durchscheint” */
  background: var(--color-bg-stage);
   /* ✅ Abstand UNTER der SurahTopBar feinjustieren */
  padding-top: calc(var(--stage-h) * 0.025);
  margin-top: 0;
}

.mTitle{
  font-weight:700;
  display:flex;
  flex-direction:row;
  align-items:baseline;
  justify-content:center;
  font-size: var(--ayah-font-title);
  color: var(--color-text);
}

.mSurahName{
  font-family: var(--font-ar);

  /* ✅ skaliert jetzt mit dem FontSize +/− Button */
  /* 1.46 ist so gewählt, dass es bei Scale=1 ungefähr gleich groß bleibt wie vorher */
  font-size: calc(var(--mushaf-ar-font) * 1.46);

  line-height: 1.18;
  color: var(--color-ar-text);
  opacity: 1;
}

.mBody{
  border: var(--u1h) solid var(--color-line);
  border-top: 0;                    /* ✅ keine Trennlinie */
  background: var(--color-bg-stage);

  /* ✅ nur unten rund */
  border-radius: 0 0 var(--ayah-card-r) var(--ayah-card-r);

  padding: calc(var(--stage-h) * 0.018) var(--mushaf-pad-x);
  box-sizing: border-box;
padding-left: calc(var(--mushaf-pad-x) + var(--u16w)); /* ✅ NUR links mehr Platz */
padding-right: calc(var(--mushaf-pad-x) + var(--u6w)); /* ✅ NUR links mehr Platz */

  direction: rtl;
  unicode-bidi: isolate-override;
  text-align: right;
  border-left: 0;
  border-right: 0;

}

.mAyah{
  border:1px solid var(--color-line);
  border-radius: var(--ayah-card-r);
  padding: calc(var(--stage-h) * 0.010) calc(var(--stage-w) * 0.012);
  display:flex;
  gap: calc(var(--stage-w) * 0.010);
  cursor: pointer;
  background: var(--color-bg-stage);
  
}

.mAyah:hover{
  box-shadow: inset 0 0 0 var(--u1h) rgba(var(--rgb-accent),0.25);
}

.mAyahText{
  font-family: var(--font-ar);
  font-size: var(--mushaf-ar-font);
  direction: rtl;
  unicode-bidi: isolate-override;
  text-align:right;
  flex: 1;
}

.mAyah.is-focus{
  box-shadow: inset 0 0 0 2px var(--c-a-35);
}

.mBasm{
  margin-top: calc(var(--stage-h) * 0.02);
  font-family: var(--font-ar);

  /* ✅ proportional zum Mushaf-Text */
  font-size: calc(var(--mushaf-ar-font) * 1.00);

  line-height: 1.35;

  /* ✅ exakt wie normaler Mushaf-Text (.mFlow) */
  color: var(--color-ar-text);
  opacity: 1;
}

.mMushafHeader{
  width: 100%;
  border: var(--u1h) solid var(--color-line);
  border-bottom: 0;                 /* ✅ keine Trennlinie */
  background: var(--color-bg-stage);

  /* ✅ nur oben rund */
  border-radius: var(--ayah-card-r) var(--ayah-card-r) 0 0;

  padding: 0;
  box-sizing: border-box;
  text-align: center;
  margin-top: 0;
  border-left: 0;
  border-right: 0;
  border-top: 0;

  display: flex;
  flex-direction: column;
  align-items: center;

}


/* =========================================================
   Mushaf: Word-Spans (.w) müssen im Fließtext anders sein
   (Ayah-Mode .w bleibt wie er ist)
   ========================================================= */
.mFlow{
  font-family: var(--font-ar);

  /* ✅ MUSS an der globalen Scale hängen */
  font-size: var(--mushaf-ar-font);

  line-height: 2.05;

  direction: rtl;
  unicode-bidi: isolate-override;

  text-align: right;
  text-align-last: right;

  padding: 0;
  max-width: 100%;
  color: var(--color-ar-text);
  opacity: 1;
}

/* ✅ Mushaf Justify Toggle (per JS) */
.mFlow.is-justify{
  text-align: justify;
  text-justify: inter-word;

  /* ✅ Wichtig: Letzte Zeile (Ende der Sura) NICHT blocken */
  text-align-last: right;
  word-spacing: 0.115em;
}

/* Wenn justify ON: Word-Spans als echtes Inline ohne spacing */
.mFlow.is-justify .w,
.mFlow.is-justify .mw{
  display: inline;
  margin-inline: 0;
  padding-inline: 0;
}

/* Mushaf: Hover Glow nur als Text-Glow (kein Box-Glow) */
.mFlow .w:hover{
  color: var(--color-accent);
  text-shadow: none;
}

.w.is-timing, .mw.is-timing{
  color: var(--color-accent);
  text-shadow: none;
}

.mFlow .w.is-timing{
  color: var(--color-accent);
  text-shadow: none;
}

.mChunk{
  display: inline;     /* ✅ damit justify korrekt funktioniert */
  padding: 0;
  margin: 0;
  
}

.mText{
  display:inline;
  transition: text-shadow 120ms ease;
}

.mNo{
  /* Kreis */
  width:  calc(var(--stage-h) * 0.063);
  height: calc(var(--stage-h) * 0.063);
  border-radius: var(--round-pill);

  display: inline-grid;
  place-items: center;

  margin-inline: 0.55em 0.55em;
  padding: 0;
  box-sizing: border-box;

  border: var(--u2h) solid var(--color-line);
  background: var(--color-bg-chip);
  color: var(--color-text);

  /* Schrift (HIER ändern) */
  font-family: var(--font-meta);
  font-size: calc(var(--stage-h) * 0.015);
  font-weight: 600;
  line-height: 1;

  /* Inline in Zeile */
  vertical-align: middle;

  /* Mini-Feinjustierung (optional) */
  transform: translateY(0.04em);

  cursor: pointer;

  /* ✅ wichtig für den Progress-Ring */
  position: relative;
  isolation: isolate;

  /* default progress */
  --ring: 0;
}

/* Mushaf: Ayahnummer Glow on hover */
.mNo:hover{
  box-shadow:
    0 0 0 var(--glow-ring) rgba(var(--rgb-accent),0.28),
    0 0 var(--glow-soft) var(--glow-blue);
  border-color: rgba(var(--rgb-accent),0.75);
}

/* optional: wenn du auch “focus” (is-focus) stärker willst */
.mNo.is-focus{
  /* ✅ Fokus bleibt sichtbar, aber Progress-Ring hat mehr Kontrast */
  box-shadow:
    0 0 0 calc(var(--glow-ring) * 0.85) var(--c-a-16),
    0 0 calc(var(--glow-soft) * 0.75) var(--c-a-25);
  border-color: var(--c-a-65);
}

/* ✅ Mushaf Favorit: dauerhafter ORANGE Glow um Ayahnummer
   Blau (is-focus) hat Vorrang -> deshalb nur anwenden, wenn NICHT is-focus */
.mNo.is-fav:not(.is-focus){
  box-shadow:
    0 0 0 var(--glow-ring) rgba(var(--rgb-fav),0.28),
    0 0 var(--glow-soft) rgba(var(--rgb-fav),0.60);
  border-color: rgba(var(--rgb-fav),0.88);
  opacity: 0.82;
}

/* ✅ Mushaf Notes: GELBER Ring – aber weniger Prio als Fav (orange)
   -> daher nur wenn NICHT is-fav und NICHT is-focus und NICHT is-copied */
.mNo.is-note:not(.is-fav):not(.is-focus):not(.is-copied){
  box-shadow:
    0 0 0 var(--glow-ring) var(--c-note-28),
    0 0 var(--glow-soft) var(--c-note-45);
  border-color: var(--c-note-70);
  opacity: 0.90;
}

/* optional: Mushaf topbar button schöner */
.mushafTopBar .surahTopBtn{
  border:1px solid var(--color-line);
  background: rgba(255,255,255,.03);
  color: rgba(255,255,255,.88);
  border-radius: var(--round-pill);
  padding: 0;                  /* ✅ wichtig */
}

.mAyah.is-focus{
  box-shadow:
    0 0 calc(var(--stage-h) * 0.012) rgba(var(--rgb-accent),0.18),
    inset 0 0 0 var(--u1h) var(--c-a-35);
}

/* Ayahnummer als Kreis */
.mAyahNo{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: var(--mushaf-no-d);
  height: var(--mushaf-no-d);
  border-radius: var(--round-pill);

  border: var(--u1h) solid --color-line;
  background: var (--color-bg-chip);

  font-size: var(--mushaf-no-font);
  font-family: var(--font-meta);
  opacity: .85;
    /* Abstand zum Text */
  margin-right: 0.35em;
  margin-left: 0.20em;
}

/* ===== TOPBAR (single source of truth) ===== */

.surahTopBar{
  width: 100%;
  background: var(--surah-topbar-bg);
  border-radius: var(--ayah-card-r);

  /* cleaner spacing */
  padding-inline: calc(var(--stage-w) * 0.014);
  padding-block:  calc(var(--stage-h) * 0.028);
  min-height:     calc(var(--stage-h) * 0.050);

  /* ✅ stabil: 3-spaltiges Layout */
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  direction: ltr;

  box-sizing: border-box;

  /* modern card feel */
  position: relative;
  overflow: hidden;

  box-shadow:
    0 calc(var(--stage-h) * 0.010) calc(var(--stage-h) * 0.030) var(--c-black-25),
    0 0 0 var(--u1h) rgba(255,255,255,0.04);

  border: 0;
}

.surahTopTitle{
  /* nutzt bewusst die bestehende .surahTitle Typo,
     hier nur optional etwas feinjustieren */
  font-size: var(--ayah-font-title);
}

.surahTopFarLeft{
  position: static;
  display:flex;
  align-items:center;
  justify-content:flex-start;
}

/* ✅ WICHTIG: playStop in Topbar darf NICHT absolute/centered sein */
.surahTopBar .btnCircle.playStop{
  position: static !important;
  left: auto !important;
  top: auto !important;
  transform: none !important;
  margin: 0 !important;

  border: var(--u1h) solid var(--color-line);
  background: var(--surah-topbar-play-bg);
  color: var(--color-text);
  border-radius: var(--round-pill);
  opacity: .99;          /* gleicher inaktiv-look */

  /* ✅ ICON GRÖSSE: wie Statusbar (nur größer) */
  /* Button-Durchmesser kommt aus .playStop (var(--ps-d)) */
  --ps-icon: calc(var(--ps-d) * 0.76);

  /* ✅ sauberes Zentrieren (falls irgendwo flex reinfunkt) */
  display: grid;
  place-items: center;
}

.surahTopBar .btnCircle.playStop:hover{
  background: var(--surah-topbar-play-bg-hover);
}

/* ✅ Topbar: SVG-Icons nutzen und auf unsere Größe zwingen */
.surahTopBar .btnCircle.playStop .icon{
  width:  var(--ps-icon);
  height: var(--ps-icon);
  display: block;
  fill: currentColor;
}

/* ✅ Stop wirkt oft optisch kleiner -> minimal angleichen (wie bei Statusbar) */
.surahTopBar .btnCircle.playStop.is-playing .icon-stop{
  transform: scale(1.08);
}

/* ✅ Topbar-PlayStop soll SVG zeigen (nicht Text), sonst ist das Icon weg */
.surahTopBar .playStop::before{
  content: none !important;
}

/* SVG in der Topbar wieder erlauben */
.surahTopBar .playStop .icon-play,
.surahTopBar .playStop .icon-stop{
  display: block !important;
  width: 75%;
  height: 75%;
}

/* nur eins sichtbar je Zustand */
.surahTopBar .playStop .icon-stop{ display:none !important; }
.surahTopBar .playStop.is-playing .icon-play{ display:none !important; }
.surahTopBar .playStop.is-playing .icon-stop{ display:block !important; }

/* Text-Toggle statt Symbol */
.surahModeBtn{
  height: calc(var(--stage-h) * 0.0519);   /* gleiche Höhe wie surahTopBtn/ayahPlay */
  width: calc(var(--stage-w) * 0.13);
  display: inline-flex;
  align-items: center;
  gap: calc(var(--stage-w) * 0.020);

  padding-block: 0;         /* wichtig: keine extra Höhe */
  border-radius: var(--jump-r);

  border: var(--u1h) solid var(--color-line);
  background: var(--surah-topbar-mode-bg);
  color: var(--color-text);

  font-family: var(--font-meta);
  font-size: calc(var(--ayah-font-meta) * 0.95);
  line-height: 1;

  cursor: pointer;
  user-select: none;
  justify-content: center;

  transition: transform 120ms ease, box-shadow 140ms ease, border-color 140ms ease, background 140ms ease;
}

.surahModeBtn .modeText{
  display:inline-flex;
  align-items:center;
  line-height:1;
}
.surahModeBtn .modeArrow{
  display:inline-flex;
  align-items:center;
  line-height:1;
}


.surahModeBtn:hover{
  background: var(--surah-topbar-mode-bg-hover);
  border-color: var(--c-a-65);
  box-shadow:
    0 0 0 var(--glow-ring) rgba(var(--rgb-accent),0.20),
    0 0 var(--glow-soft) var(--c-a-35);
}

.surahModeBtn:active{ transform: scale(0.98); }

.surahModeBtn .modeArrow{
  opacity: .85;
  transform: translateY(-0.02em);
}

.surahTopRight{
  position: static;
  display:flex;
  align-items:center;
  justify-content:flex-end;
}

.surahTopBtn{
  width: calc(var(--stage-h) * 0.040);
  height: calc(var(--stage-h) * 0.040);
  border: var(--u1h) solid var(--color-line);
  background: transparent;
  border-radius: var(--round-pill);
  color: var(--color-text);
  font-size: calc(var(--stage-h) * 0.020);
  opacity: .55;
  cursor: pointer;
}

.surahTopBtn:disabled{
  opacity: .35;
}

/* ===== Glow for playStop everywhere (statusbar + topbar) ===== */
.btnCircle.playStop:hover{
  border-color: rgba(var(--rgb-accent),0.75);
  box-shadow:
    0 0 0 var(--glow-ring) rgba(var(--rgb-accent),0.28),
    0 0 var(--glow-soft) var(--glow-blue);
}

.btnCircle.playStop.is-playing{
  border-color: var(--c-a-85);
  box-shadow:
    0 0 0 calc(var(--glow-ring) * 1.15) var(--c-a-35),
    0 0 calc(var(--glow-soft) * 1.2) var(--c-a-65);
}

/* ✅ Kurz-Glow wenn STOP gedrückt wurde */
.btnCircle.playStop.is-stopped{
  border-color: var(--c-a-85);
  box-shadow:
    0 0 0 calc(var(--glow-ring) * 1.15) var(--c-a-35),
    0 0 calc(var(--glow-soft) * 1.2) var(--c-a-65);
}

.ayahCard{
  min-height: var(--ayah-card-min-h);
  height: auto;
  border:1px solid var(--color-line);
  padding: calc(var(--ayah-gap) * 1.7);
  background: var(--color-bg-stage);
  border-radius: var(--ayah-card-r);
  color: var(--color-text);
  overflow:hidden;
}

/* ✅ Zwischen-Header im Ayah-Scroll: NICHT sticky */
.ayahSurahHeader{
  position: static;
  top: auto;
  z-index: auto;
}

/* Ayah-Mode: die "erste" Topbar (surahTopBar mushafTopBar) ausblenden */
.qView[data-mode="suraCards"] > .surahTopBar.mushafTopBar{
  display: none;
}

/* =========================
   Ayah focus + playing glow (no :has)
   ========================= */
.ayahMainCard.is-focus{
  border-color: rgba(var(--rgb-accent),0.55);
  box-shadow:
    0 0 0 calc(var(--glow-ring) * 1.25) var(--c-a-22),
    0 0 calc(var(--glow-soft) * 1.10) rgba(var(--rgb-accent),0.40);
}

.ayahMainCard.is-playing{
  border-color: var(--c-a-85);
  box-shadow:
    0 0 0 calc(var(--glow-ring) * 1.45) rgba(var(--rgb-accent),0.32),
    0 0 calc(var(--glow-soft) * 1.35) var(--c-a-65);
}

/* Kein Browser-Outline-Rand auf Ayah-Cards */
.ayahMainCard{
  outline: none;
}
.ayahMainCard:focus,
.ayahMainCard:focus-visible{
  outline: none;
}

.ayahRefRow{
  display:flex;
  align-items:center;
  gap: calc(var(--stage-w) * 0.0065);
}

.ayahPlay{
  border:1px solid var(--color-line);
  background: var(--c-w-06);
  color: var(--color-text);
  border-radius:999px;

  width:  calc(var(--stage-h) * 0.040);
  height: calc(var(--stage-h) * 0.040);

  display:inline-grid;
  place-items:center;
  vertical-align: middle;

  padding:0;
  line-height:1;

  /* Icon-Größe */
  font-size: calc(var(--stage-h) * 0.015);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

  cursor:pointer;
  user-select:none;

  transition: transform 120ms ease, box-shadow 140ms ease, background 140ms ease, border-color 140ms ease, opacity 140ms ease;
}

.ayahPlay::before{
  /* default = Play */
  content: "▶";
  display:block;
  line-height:1;
  font-size: calc(var(--stage-h) * 0.015);
  transform: translate(0.06em, -0.06em);
}

.ayahPlay.is-playing::before{
  /* playing = Pause */
  content:"⏸";
  transform: translate(0, -0.06em);
}

.ayahPlay.is-paused::before{
  /* paused = Play */
  content:"▶";
  transform: translate(0.06em, -0.06em);
}

.ayahPlay:hover{
  box-shadow:
    0 0 0 var(--glow-ring) rgba(var(--rgb-accent),0.28),
    0 0 var(--glow-soft) var(--glow-blue);
  border-color: rgba(var(--rgb-accent),0.75);
}

.ayahPlay:active{
  transform: scale(0.97);
}

.ayahPlay.is-playing{
  box-shadow:
    0 0 0 calc(var(--glow-ring) * 1.15) var(--c-a-35),
    0 0 calc(var(--glow-soft) * 1.2) var(--c-a-65);
  border-color: var(--c-a-85);
}

/* paused = leichter glow */
.ayahPlay.is-paused{
  opacity: .92;
  border-color: rgba(var(--rgb-accent),0.55);
  background: rgba(var(--rgb-accent),0.06);
  box-shadow:
    0 0 0 calc(var(--glow-ring) * 0.75) rgba(var(--rgb-accent),0.18),
    0 0 calc(var(--glow-soft) * 0.55) rgba(var(--rgb-accent),0.28);
}

/* ✅ Continue Pill (SurahPlay) */
.ayahContinueBtn{
  height: calc(var(--stage-h) * 0.040);           /* gleiche Höhe wie Ayah-Buttons */
  border: var(--u1h) solid var(--color-line);
  background: var(--c-w-06);
  color: var(--color-text);
  border-radius: var(--round-pill);

  display: inline-flex;
  align-items: center;
  gap: calc(var(--stage-w) * 0.006);

  padding-inline: calc(var(--stage-w) * 0.012);
  padding-block: 0;

  font-family: var(--font-meta);
  font-size: calc(var(--ayah-font-meta) * 0.90);
  font-weight: 650;

  cursor: pointer;
  opacity: .98;
  line-height: 1;
}

.ayahContinueBtn:hover{
  border-color: rgba(var(--rgb-accent),0.70);
  box-shadow:
    0 0 0 calc(var(--glow-ring) * 1.10) var(--c-a-22),
    0 0 calc(var(--glow-soft) * 1.10) var(--c-a-45);
}

.ayahContinueIcon{
  font-size: calc(var(--ayah-font-meta) * 0.95);
  transform: translateY(calc(var(--u1h) * -0.5));
}

.ayahContinueText{
  opacity: .95;
}

/* hidden via JS */
.ayahContinueBtn[hidden]{
  display: none !important;
}

.basmCard{
  width:100%;
  min-height: var(--ayah-card-min-h);       /* ✅ gleiche Höhe wie Ayah-Karten */
  border:1px solid var(--color-line);
  padding: calc(var(--ayah-gap) * 1.7);     /* ✅ gleiches padding wie .ayahCard */
  padding-top: calc(var(--ayah-gap) * 1);
  padding-left: calc(var(--ayah-gap) * 1);
  padding-right: calc(var(--ayah-gap) * 2.5);
  box-sizing:border-box;
  background: var(--color-bg-stage);
  border-radius: var(--ayah-card-r);
  color: var(--color-text);
  overflow:hidden;
}

.basmHeader{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap: calc(var(--stage-w) * 0.010);
  padding-top: calc(var(--ayah-gap));
  padding-left: var(--basm-pad-left);   /* ✅ hier stellst du links ein */
  margin-bottom: calc(var(--stage-h) * 0.010);
}


.basmLabel{
  font-family: var(--font-meta);
  font-size: calc(var(--ayah-font-meta) * 0.95);
  opacity:.75;
  padding-left: calc( var(--basm-pad-left) * 3.2);   /* ✅ hier stellst du links ein */
}

.basmAr{
  font-family: var(--font-ar);
  font-size: calc(var(--ayah-font-ar) * 0.95);
  line-height: 1.25;
  text-align:right;

  /* ✅ Arabisch immer klar lesbar (Root-Farbe) */
  color: var(--color-ar-text);
  opacity: 1;
}

.basmTrans{
  margin-top: calc(var(--stage-h) * 0.010);
  font-family: var(--font-de);
  font-size: calc(var(--ayah-font-meta) * 1.05);
  opacity:.9;
}

.surahTopLeft{
  display:flex;
  justify-content:center;
  align-items:center;
  min-width: 0;           /* wichtig fürs Grid */
}

.surahTopLeft .surahTitle{
  justify-content: center;
  margin: 0 auto;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ayahHeaderRow{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap: calc(var(--stage-w) * 0.010);
}

.ayahHeaderRight{
  display:flex;
  gap: calc(var(--stage-w) * 0.006);
  padding-top: calc(var(--stage-h) * 0.004);
}

/* ✅ Zwischen-Sura-Header: größer (z.B. "8 • Al-Anfal • الأنفال") */
.surahTitle.is-compact{
  font-size: calc(var(--ayah-font-title) * 1.08);
  opacity: .95;
  font-weight: 750;
}

.ayahBtn{
  width: calc(var(--stage-h) * 0.040);
  height: calc(var(--stage-h) * 0.040);
  border: var(--u1h) solid var(--color-line);
  background: rgba(255,255,255,0.03);
  border-radius: var(--round-pill);
  color: var(--color-text);

  /* ✅ Zentrierung des ▶ Icons */
  display: inline-grid;
  place-items: center;
  padding: 0;
  line-height: 1;

  font: inherit;       /* ✅ übernimmt .ayahPlay font-size */

  cursor: pointer;
  opacity: .99;

  transition: transform 120ms ease, box-shadow 160ms ease, border-color 160ms ease, background 160ms ease, opacity 160ms ease;
}

.ayahBtn:hover{
  opacity: 1;
  border-color: var(--c-a-65);
  box-shadow:
    0 0 0 var(--glow-ring) var(--c-a-22),
    0 0 calc(var(--glow-soft) * 0.85) var(--c-a-35);
  transform: translateY(calc(var(--u1h) * -1));
}

.ayahBtn:active{
  transform: translateY(0) scale(0.98);
}

.ayahBtn:focus-visible{
  box-shadow:
    0 0 0 calc(var(--glow-ring) * 1.4) var(--c-a-35),
    0 0 calc(var(--glow-soft) * 1.5) var(--c-a-65);
  border-color: var(--c-a-85);
}

.ayahBtn:disabled{
  opacity: .99;
  cursor: default;
  box-shadow: none;
  transform: none;
}

.basmallah{
  width: var(--ayah-inner-w);
  margin: calc(var(--stage-h) * 0.010) auto calc(var(--stage-h) * 0.010);
  text-align:center;
  font-family: var(--font-ar);
  font-size: calc(var(--ayah-font-ar) * 0.82);
  opacity: .92;
}

.surahTitle{
  font-weight:700;
  display:flex;
  flex-direction:row;
  align-items:baseline;
  font-size: var(--ayah-font-title);
}

.ayahRef{
  opacity: .75;
  font-family: var(--font-meta);
  font-size: calc(var(--ayah-font-meta)* 1.2);
  font-weight: 450;

  /* ✅ sorgt dafür, dass der Bookmark-Button immer an gleicher Stelle sitzt */
  display: inline-flex;
  justify-content: flex-end;
  width: calc(var(--stage-w) * 0.0410);   /* genug für "114:286" */
  padding-right: calc(var(--stage-w) * 0.0001);
}

/* Arabischer Textbereich (responsive, damit padding nix "wegschiebt") */
.ayahText{
  font-family: var(--font-ar);
  width: 100%;                 /* ✅ darf kleiner werden */
  max-width: var(--ayah-inner-w); /* ✅ bleibt auf großen Screens schön */
  margin-bottom: calc(var(--stage-h) * 0.013);
  margin-top: calc(var(--stage-h) * 0.011);
  height: auto;

  direction: rtl;
  unicode-bidi: isolate-override;
  font-size: var(--ayah-font-ar);
  color: var(--color-ar-text);
  opacity: 1;
  
  /* sorgt dafür, dass Arabisch wirklich RTL “korrrekt” justified */
  direction: rtl;
  unicode-bidi: isolate-override;
  /* ✅ Blocksatz pro Card */
  text-align: right;
  text-justify: inter-word;

  /* ✅ aber letzte Zeile NICHT strecken */
  text-align-last: right;
}

.ayahTrans{
  width: var(--ayah-inner-w);
  margin: 0 auto;
  min-height: var(--ayah-trans-min-h);
  height: auto;
  font-family: var(--font-de);
  opacity: .92;
  padding-right: calc(var(--stage-w) * 0.0275);
  padding-bottom: calc(var(--stage-h) * 0.010);
  padding-left: calc(var(--stage-w) * 0.0026);
}

/* mehrere Übersetzungen */
.ayahTransList{
  display:flex;
  flex-direction:column;
  gap: calc(var(--stage-h) * 0.0161);
  padding-top: calc(var(--stage-h) * 0.001);
}

.trLine{
  display:flex;
  flex-direction:column;
  gap: calc(var(--stage-h) * 0.001);
}

.trLabel{
  font-family: var(--font-meta);
  font-size: calc(var(--ayah-font-meta) * 0.5 * var(--tr-font-scale));
  opacity: .70;
}

.trText{
  flex: 1;

  /* ✅ FIX: Übersetzungs-Schriftgröße wieder “normal” & responsive */
  font-size: calc(var(--ayah-font-meta) * 1.11 * var(--tr-font-scale));

  opacity: 0.88;
  line-height: 1.55;

  /* ✅ Blocksatz */
  text-align: justify;
  text-justify: inter-word;

  /* ✅ damit die letzte Zeile nicht komisch steht */
  text-align-last: left;

  /* ✅ lange Wörter/URLs brechen sauber */
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
}

/* Später, wenn du de/en gleichzeitig renderst */
.ayahTrans [lang="de"]{ font-family: var(--font-de); }
.ayahTrans [lang="en"]{ font-family: var(--font-en); }

.ayahMainCard.is-ping{
  box-shadow:
    0 0 0 calc(var(--glow-ring) * 1.2) var(--c-a-35),
    0 0 calc(var(--glow-soft) * 1.1) rgba(var(--rgb-accent),0.55);
}

/* Wort-Spans */
.w, .mw{
  display:inline-block;
  padding: 0 0.06em;
  margin-inline: 0.10em;   /* ✅ Abstand zwischen Wörtern */
  cursor:pointer;
  user-select:none;
  background: transparent;
  border: 0;
  border-radius: 0;

  /* ✅ verhindert horizontales „Rauslaufen“ bei sehr großer Schrift
     (ein einzelnes langes Wort darf notfalls umbrechen) */
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: normal;

  /* smoother glow */
  transition: color 140ms ease, text-shadow 140ms ease;
}

/* ✅ Ayah-Mode: Blocksatz mit Word-Spans (Spaces kommen per JS) */
.ayahText.is-justify{
  text-align: justify;
  text-justify: inter-word;

  /* ✅ letzte Zeile NICHT blocken */
  text-align-last: right;
}

.ayahText.is-justify .w,
.ayahText.is-justify .mw{
  display: inline;
  margin-inline: 0;

  /* ✅ wichtig: etwas größer, damit Wörter nicht „kleben“ */
  padding-inline: 0.055em;
}

.w.wMark{
  padding: 0 0.02em;
  margin-inline: 0.02em;   /* ✅ Marks enger */
  opacity: .65;
  cursor: default;
  pointer-events: none;
  text-shadow: none;
}

/* Hover = wie Mushaf (nur Farbe, kein starker Glow) */
.w:hover, .mw:hover{
  color: var(--color-accent);
  text-shadow: none;
}

/* Focus/Active darf ruhig noch “Feedback” haben */
.w:focus-visible,
.w:active{
  color: var(--color-accent);
  text-shadow:
    0 0 0.10em var(--c-a-95),
    0 0 0.35em var(--c-a-55);
}

/* Click/Audio (Wordplay) = wie Hover (kein starker Glow) */
.w.is-playing, .mw.is-playing{
  color: var(--color-accent);
  text-shadow: none;
}

/* ✅ Container für chunked Ayah-Cards: macht wieder Abstand zwischen Cards */
.allCardsMount{
  display:flex;
  flex-direction:column;
  gap: calc(var(--stage-h) * 0.0158);
}

/* Bookmark Button: kein Kreis, kein Rand, nur Icon */
.ayahBm{
  opacity: 1;
  font-size: 0;
  line-height: 0;
  

  /* ✅ kein Kreis/kein Button-Rand */
  border: 0 !important;
  background: transparent !important;

  /* 10px @ 720 */
  border-radius: calc(var(--stage-h) * 0.0138889); /* nur für Hover nicer, nicht rund */

  /* Icon-Farbe */
  --bm-off: var(--color-text-muted);
  --bm-on:  var(--color-text);
  overflow: visible;
}

.ayahBm::before{
  content:"";
  display:inline-block;

  /* ✅ minimal niedriger + etwas weniger “fett” */
  height: calc(var(--stage-h) * 0.032);
  width:  calc(var(--stage-h) * 0.037);

  color: var(--bm-off);
  background: currentColor;

  -webkit-mask-image: url("heart-outline.svg");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: 100% 100%;

          mask-image: url("heart-outline.svg");
          mask-repeat: no-repeat;
          mask-position: center;
          mask-size: 100% 100%;

  transform: translateZ(0);
  will-change: filter;
}

/* ON: Filled-Ribbon + KEIN shimmer */
.ayahBm.is-on{
  box-shadow: none !important;
  transform: none !important;
}

.ayahBm.is-on::before{
  color: var(--bm-on);
  background: currentColor;

  -webkit-mask-image: url("heart-filled.svg");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-position: center;
  -webkit-mask-size: 100% 100%;

          mask-image: url("heart-filled.svg");
          mask-repeat: no-repeat;
          mask-position: center;
          mask-size: 100% 100%;

  transform: translateZ(0);
  will-change: filter;
}

/* Bookmark: Hover NICHT als Kreis um den Button, sondern nur am Icon */
.ayahBtn.ayahBm:hover{
  box-shadow: none !important;      /* kein Kreis-Glow */
  border-color: transparent !important;
  transform: none !important;
}

/* Glow nur am Icon (okay wenn du "shimmer" willst) */
.ayahBm:hover::before{
  filter:
    /* 6px @ 720 */
    drop-shadow(0 0 calc(var(--stage-h) * 0.0083333) var(--c-a-95))
    /* 14px @ 720 */
    drop-shadow(0 0 calc(var(--stage-h) * 0.0194444) var(--c-a-45));
}


/* ✅ Favorites Topbar: eigene Höhe */
.surahTopBar.favTopBar{
  padding-block: calc(var(--stage-h) * 0.014);  /* <- kleiner/größer machen */
  min-height:    calc(var(--stage-h) * 0.108);  /* <- kleiner/größer machen */
  overflow: visible;   /* überschreibt overflow:hidden der normalen Topbar */
  }

/* optional: falls es trotzdem hinter irgendwas liegt */
.surahTopBar.favTopBar .favPresetMenu{
  z-index: 999999;     /* höher als vorher */
}

/* Drag UX */
.favTopBar .favPresetOpt[draggable="true"]{ cursor: grab; }
.favTopBar .favPresetOpt[draggable="true"]:active{ cursor: grabbing; }

/* damit man beim Droppen nicht aus Versehen Text markiert */
.favTopBar .favPresetMenu, 
.favTopBar .favGroupHdr, 
.favTopBar .favPresetOpt{
  -webkit-user-select: none;
  user-select: none;
}

.favTopBar .favPresetMenu,
.favTopBar .favPresetOpt,
.favTopBar .favGroupHdr{
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
}

/* X rechts am Title (Group) im Preset-Dropdown */
.favTopBar .favGroupDel{
  margin-left: calc(var(--stage-w) * 0.008);
  opacity: .72;
  cursor: pointer;
  user-select: none;
  padding: 0 calc(var(--stage-w) * 0.004);
  border-radius: var(--round-pill);
}
.favTopBar .favGroupDel:hover{
  opacity: 1;
  color: var(--c-d-95);
  background: var(--c-w-06);
}

/* ✅ Favorites Button (Statusbar) */
.favBtnBtn{
  position: absolute;
  width: var(--fav-w);
  height: var(--fav-h);

  left: calc(var(--fav-center-x) - (var(--fav-w) / 2));
  top:  calc(var(--fav-center-y) - (var(--fav-h) / 2));

  border: var(--u1h) solid var(--color-line);
  border-radius: var(--jump-r);
  background: var(--color-bg-main);

  display: flex;
  align-items: center;
  justify-content: space-between;

  padding-inline: calc(var(--stage-w) * 0.010);
  gap: calc(var(--stage-w) * 0.008);

  cursor: pointer;
  user-select: none;

  /* Fortschrittsbalken-Hintergrund über CSS var --fav-prog */
  --fav-prog: 0%;

  /* ✅ NEU: Markierungen der favorisierten Ayahs (wird per JS gesetzt) */
  --fav-mark-bg: none;

  background-image:
    linear-gradient(90deg, var(--c-w-14) 0%, var(--c-w-14) var(--fav-prog),
                          rgba(255,255,255,0.00) var(--fav-prog), rgba(255,255,255,0.00) 100%);
  background-color: var(--color-bg-main);

  /* wichtig: pseudo overlays sauber clippen */
  overflow: hidden;

  transition: box-shadow 140ms ease, border-color 140ms ease, transform 120ms ease;
}

.favBtnBtn:hover{
  border-color: rgba(var(--rgb-accent),0.70);
  box-shadow:
    0 0 0 calc(var(--glow-ring) * 1.15) var(--c-a-22),
    0 0 calc(var(--glow-soft) * 1.10) var(--c-a-45);
}

.favBtnBtn:active{ transform: scale(0.99); }

.favBtnBtn .favText{
  font-family: var(--font-meta);
  font-size: calc(var(--ayah-font-meta) * 0.95);
  color: var(--color-text);
  opacity: .92;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 450;
}

/* ✅ Fortschritts-Balken als Hintergrund */
.favBtnBtn::before{
  content:"";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--fav-prog);
  background: rgba(var(--rgb-accent),0.26);
  pointer-events: none;
  border-radius: inherit;
  transition: width 180ms linear;
}

/* ✅ Orange 1px Striche für favorisierte Ayahs innerhalb der Sura */
.favBtnBtn::after{
  content:"";
  position: absolute;
  inset: 0;
  background-image: var(--fav-mark-bg);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  pointer-events: none;
  border-radius: inherit;
}

/* Inhalt (Text/Count) immer über den Overlays */
.favBtnBtn > *{
  position: relative;
  z-index: 2;
}

/* ✅ NUR auf der Favorites-Seite: Fortschritt im Statusbar-Favorites-Button AUS */
.statusbar.is-favorites .favBtnBtn{
  --fav-prog: 0% !important;
  background-image: none !important;
}
.statusbar.is-favorites .favBtnBtn::before{
  display: none !important;
  width: 0 !important;
}

/* ✅ Count bleibt rechts, ohne Zentrierung zu verschieben */
.favBtnBtn .favCount{
  position: absolute;
  right: calc(var(--stage-w) * 0.010);
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;

  font-family: var(--font-meta);
  font-weight: 500;
  opacity: 0.92;

  /* ✅ NIE px: skaliert über Stage */
  font-size: calc(var(--stage-h) * 0.020);

  /* ✅ Theme-fähig */
  color: var(--color-text);

  line-height: 1;
  min-width: calc(var(--stage-w) * 0.030);
  text-align: right;
}

/* ✅ Statusbar: Back-Mode Text zentrieren */
.favBtnBtn.is-back{
  justify-content: center;
}

.favBtnBtn.is-back .favCount{
  display: none;
}

.favBtnBtn.is-back .favText{
  width: 100%;
  text-align: center;
}

/* Favorites Topbar: Playbutton = gleiche Größe wie SurahTopBar playStop */
.favTopBar .favTopPlay{
  width:  calc(var(--stage-w) * 0.0291667);
  height: calc(var(--stage-w) * 0.0291667);
  border-radius: 999px;
  overflow: hidden;
  display: grid;
  place-items: center;
  padding: 0;
  background: var(--surah-topbar-play-bg);

  /* ✅ wichtig: Glyph-Größe fix responsiv an Button koppeln */
  font-size: calc(var(--stage-w) * 0.0291667 * 0.62);
  line-height: 1;

  /* ✅ POSITION */
  justify-self: start;  /* start = links / center = mitte / end = rechts */
}


/* Icon im Button gleich “75%” wie bei .btnCircle .icon */
.favTopBar .favTopPlay svg,
.favTopBar .favTopPlay .icon{
  width: 75%;
  height: 75%;
}

.favTopBar .favTopPlay:hover{
  background: var(--surah-topbar-play-bg-hover);
}

/* Favorites Top Play = Play/STOP */
.favTopPlay::before{
  content:"▶";
  display:block;
  line-height:1;

  /* ✅ sicherstellen, dass Mobile nicht “Default Fontsize” nimmt */
  font-size: inherit;

  transform: translate(0.06em, -0.06em);
}

.favTopPlay.is-playing::before{
  content:"■";
  transform: translate(0, -0.02em);
}

.favTopPlay.is-paused::before{
  content:"■";
  transform: translate(0, -0.02em);
}

/* Favorites: leere Ansicht + Trenner */
.favEmpty{
  opacity: .75;
  text-align: center;
  padding: calc(var(--stage-h) * 0.02) calc(var(--stage-w) * 0.01);
}

.favSep{
  opacity: .35;
  text-align: center;
  letter-spacing: 0.25em;
  margin: calc(var(--stage-h) * 0.005) 0;
}

/* Favorites Topbar: Play + Repeat nebeneinander */
.surahTopBar.favTopBar .surahTopLeft{
  display:flex;
  align-items:center;
  gap: calc(var(--stage-w) * 0.008);
}

.favTopBar .favTopRepeat.is-on{
  border-color: rgba(var(--rgb-warn),0.90);
  box-shadow:
    0 0 0 calc(var(--glow-ring) * 1.15) rgba(var(--rgb-warn),0.28),
    0 0 calc(var(--glow-soft) * 0.90) var(--c-warn-55);
  opacity: 0.98;
}

/* generic hide helpers */
.is-hidden{ display:none !important; }

/* Fav button becomes back */
#favBtnBtn.is-back #favText{ font-weight: 700; }

/* Favorites Topbar: linken Slot ohne Einrückung */
.surahTopBar.favTopBar .surahTopLeft,
.surahTopBar.favTopBar .surahTopFarLeft{
  padding-left: 0 !important;
  margin-left: 0 !important;
  justify-content: flex-start;
}

/* falls der Slot eine feste Breite hat -> kleiner machen */
.surahTopBar.favTopBar .surahTopLeft,
.surahTopBar.favTopBar .surahTopFarLeft{
  width: auto !important;
  min-width: 0 !important;
}

/* Button selbst */
.surahTopBar.favTopBar .favTopClear{
  position: absolute;
  right: var(--fav-clear-right);
  top: 50%;
  transform: translateY(-50%);

  /* gleiche Höhe wie Back */
  height: calc(var(--jump-h) * 0.95);
  width:  auto;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  opacity: 0.99;
}

/* Icon: so hoch wie die anderen Buttons (aus favloeschen.svg im Root) */
.surahTopBar.favTopBar .favTopClearIcon{
  height: calc(var(--jump-h) * 0.95);
  width:  calc(var(--jump-h) * 0.95);
  display: block;

  opacity: 0.99;

  /* Farbe wie vorher (nutzt currentColor) */
  color: var(--surah-topbar-play-bg);
  background: currentColor;

  /* ✅ SVG aus dem Root laden (ohne assets/ Ordner) */
  -webkit-mask-image: url("favloeschen.svg");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: 100% 100%;

          mask-image: url("favloeschen.svg");
          mask-repeat: no-repeat;
          mask-position: center;
          mask-size: 100% 100%;
}

/* Glow um das Icon – wie vorher */
.surahTopBar.favTopBar .favTopClear:hover .favTopClearIcon{
  filter:
    var(--fav-clear-filter)
    drop-shadow(0 0 calc(var(--glow-ring) * 1.35) rgba(var(--rgb-accent),0.0))
    drop-shadow(0 0 calc(var(--glow-soft) * 1.35) var(--glow-blue));
}

/* ✅ FavTopBar Back Button: Text wirklich zentriert */
.surahTopBar.favTopBar .surahModeBtn[data-action="favBack"]{
  display: grid !important;
  place-items: center !important;
  gap: 0 !important;                 /* kill gap */
}

.surahTopBar.favTopBar .surahModeBtn[data-action="favBack"] .modeArrow{
  display: none !important;          /* kill 2nd child */
}

.surahTopBar.favTopBar .surahModeBtn[data-action="favBack"] .modeText{
  width: 100% !important;
  text-align: center !important;
}

/* =========================
   Favorites Presets (FavTopBar)
   Style wie Statusbar-Dropdowns
   ========================= */
.favTopBar .favPresetCtl{
  position: relative;
  display: flex;
  align-items: center;
  gap: calc(var(--stage-w) * 0.006);
}

.favTopBar .favPresetBtn{
  height: calc(var(--stage-w) * 0.0291667); /* wie Repeat */
  min-width: calc(var(--stage-w) * 0.090);
  padding: 0 calc(var(--stage-w) * 0.010);
  border-radius: var(--round-pill);

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--stage-w) * 0.008);

  background: var(--color-bg-stage);
  border: var(--u1h) solid var(--color-line);
  color: var(--color-text);

  font-family: var(--font-meta);
  font-size: calc(var(--ayah-font-meta) * 0.95);

  cursor: pointer;
  user-select: none;
}

.favTopBar .favPresetText{
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.favTopBar .favPresetArrow{
  opacity: .85;
  line-height: 1;
  font-size: calc(var(--ayah-font-meta) * 0.63);
}

/* Hover/Active Glow wie die Dropdowns */
.favTopBar .favPresetCtl:hover .favPresetBtn,
.favTopBar .favPresetCtl.is-open .favPresetBtn{
  border-color: rgba(var(--rgb-accent),0.70);
  box-shadow:
    0 0 0 calc(var(--glow-ring) * 1.15) var(--c-a-22),
    0 0 calc(var(--glow-soft) * 1.10) var(--c-a-45);
}
.favTopBar .favPresetCtl.is-active .favPresetBtn{
  border-color: var(--c-a-85);
  box-shadow:
    0 0 0 calc(var(--glow-ring) * 1.35) var(--c-a-35),
    0 0 calc(var(--glow-soft) * 1.35) var(--c-a-65);
}

/* Plus-Button: klein, rund, im gleichen Style */
.favTopBar .favPresetPlus{
  width:  calc(var(--stage-w) * 0.0291667);
  height: calc(var(--stage-w) * 0.0291667);
  border-radius: var(--round-pill);

  display: grid;
  place-items: center;

  background: var(--color-bg-stage);
  border: var(--u1h) solid var(--color-line);
  color: var(--color-text);

  font-family: var(--font-meta);
  font-size: calc(var(--ayah-font-meta) * 1.05);
  line-height: 1;

  cursor: pointer;
  opacity: 0.95;
}
.favTopBar .favPresetPlus:hover{
  border-color: rgba(var(--rgb-accent),0.75);
  box-shadow:
    0 0 0 var(--glow-ring) rgba(var(--rgb-accent),0.28),
    0 0 var(--glow-soft) var(--glow-blue);
}

/* ✅ Favorites Preset Dropdown – IMMER innerhalb der Stage (nie Ornamente)
   - Y-Scrollbar sichtbar
   - X-Scrollbar NIE
   - Background wie JumpBox innen (var(--color-bg-main))
*/
.favTopBar .favPresetMenu{
  position: fixed;

  /* innerhalb der Stage (Ornamente links/rechts bleiben frei) */
  left:  calc(var(--bar-lr) + calc(var(--stage-w) * 0.02));
  right: calc(var(--bar-lr) + calc(var(--stage-w) * 0.02));

  /* ✅ tiefer starten, damit + Button nicht überdeckt wird */
  top:    calc(var(--stage-h) * 0.20);
  bottom: calc(var(--bar-bottom) + calc(var(--stage-h) * 0.06));

  width: auto;
  max-width: none;

  /* ✅ Background wie JumpBox */
  background: var(--color-bg-main);
  border: var(--u1h) solid var(--color-line);
  border-radius: calc(var(--stage-h) * 0.012);
  box-shadow: 0 0 calc(var(--stage-h) * 0.02) var(--c-black-18);

  padding: calc(var(--stage-h) * 0.012);
  box-sizing: border-box;

  /* ✅ Scroll: Y ja, X niemals */
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;

  display: none;
  z-index: 999999;
}

.favTopBar .favPresetCtl.is-open .favPresetMenu{
  display: block;
}

/* ✅ Y-Scrollbar Styling (wie bei deinen Dropdowns), X bleibt aus */
.favTopBar .favPresetMenu::-webkit-scrollbar{
  width: var(--u10w);
}
.favTopBar .favPresetMenu::-webkit-scrollbar-track{
  background: transparent;
}
.favTopBar .favPresetMenu::-webkit-scrollbar-thumb{
  background: var(--c-w-22);
  border: var(--u2h) solid transparent;
  background-clip: padding-box;
  border-radius: var(--round-pill);
}
.favTopBar .favPresetMenu::-webkit-scrollbar-thumb:hover{
  background: var(--c-w-34);
}

/* Firefox */
.favTopBar .favPresetMenu{
  scrollbar-width: thin;
  scrollbar-color: var(--c-w-22) transparent;
}

/* Grid-Items sollen die Zellen füllen */
.favTopBar .favPresetMenu > button{
  width: 100%;
  min-width: 0;
}

.favTopBar .favPresetOpt{
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--color-text);
  font-family: var(--font-meta);
  font-size: calc(var(--ayah-font-meta) * 0.95);
  text-align: left;
  padding: calc(var(--stage-h) * 0.010) calc(var(--stage-w) * 0.010);
  border-radius: calc(var(--stage-h) * 0.008);
  cursor: pointer;
}

/* Add Title+ Button (full row) */
.favTopBar .favGroupAdd{
  grid-column: 1 / -1;

  border: var(--u1h) dashed var(--c-a-65);
  background: var(--fav-add-title-bg);
  color: var(--color-text);

  font-family: var(--font-meta);
  font-size: calc(var(--ayah-font-meta) * 0.92);

  padding: calc(var(--stage-h) * 0.010) calc(var(--stage-w) * 0.010);
  border-radius: calc(var(--stage-h) * 0.008);
  cursor: pointer;
  opacity: 0.95;
}
.favTopBar .favGroupAdd:hover{
  border-color: var(--c-a-85);
  background: var(--fav-add-title-bg-hover);
}

/* Group Header (full row, droppable) */
.favTopBar .favGroupHdr{
  grid-column: 1 / -1;

  border: 0;
  background: var(--c-w-06);
  color: var(--color-text);

  display: flex;
  align-items: center;

  /* ✅ 1 Zeile: nichts umbrechen */
  flex-wrap: nowrap;

  /* ✅ Title soll Platz nehmen, Hint/X bleiben rechts */
  justify-content: flex-start;
  gap: calc(var(--stage-w) * 0.010);

  padding: calc(var(--stage-h) * 0.010) calc(var(--stage-w) * 0.010);
  border-radius: calc(var(--stage-h) * 0.008);

  font-family: var(--font-meta);
  font-size: calc(var(--ayah-font-meta) * 0.92);
  font-weight: 650;

  cursor: default;
  user-select: none;
  opacity: 0.95;
}

/* ✅ Group title: 1 Zeile, aber komplett zugänglich (horizontal scroll) */
.favTopBar .favGroupHdrText{
  flex: 1;
  min-width: 0;

  /* 1 Zeile */
  white-space: nowrap;

  /* statt Umbruch -> horizontal scroll */
  overflow-x: auto;
  overflow-y: hidden;
  text-overflow: clip;

  /* smooth auf Mobile */
  -webkit-overflow-scrolling: touch;

  /* Firefox scrollbar */
  scrollbar-width: thin;
}

/* WebKit scrollbar (nur Root-Tokens/Farben) */
.favTopBar .favGroupHdrText::-webkit-scrollbar{
  height: var(--sb-w);
}
.favTopBar .favGroupHdrText::-webkit-scrollbar-thumb{
  background: var(--c-w-22);
  border-radius: var(--round-pill);
}
.favTopBar .favGroupHdrText::-webkit-scrollbar-track{
  background: transparent;
}

/* ✅ Habashi pages: Text umbrechen, damit Note sichtbar ist */
.favPresetOpt.is-habashi .favPresetName{
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

/* ✅ Habashi-Title: nicht abschneiden – darf umbrechen */
.favTopBar .favGroupHdr.is-habashi{
  flex-wrap: wrap;
  align-items: flex-start;
}
.favTopBar .favGroupHdr.is-habashi .favGroupHdrText{
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

.favTopBar .favGroupHdrHint{
  /* ✅ rechts halten */
  margin-left: auto;
  flex: 0 0 auto;

  /* ✅ 1 Zeile */
  white-space: nowrap;

  font-weight: 600;
  opacity: 0.65;
  font-size: calc(var(--ayah-font-meta) * 0.78);
}

.favTopBar .favGroupLooseHdr{
  margin-top: calc(var(--stage-h) * 0.006);
}

/* Drop highlight */
.favTopBar .favGroupHdr.is-drop{
  outline: var(--u1h) solid var(--c-a-65);
  box-shadow:
    0 0 0 calc(var(--glow-ring) * 1.15) var(--c-a-22),
    0 0 calc(var(--glow-soft) * 1.05) var(--c-a-45);
}

.favTopBar .favPresetOpt:hover{
  background: var(--c-a-10);
}
.favTopBar .favPresetOpt.is-active{
  background: var(--c-a-14);
  outline: 1px solid rgba(var(--rgb-accent),0.28);
}

/* X rechts im Preset-Dropdown */
.favPresetOpt{
  display:flex;
  align-items:center;
  justify-content:space-between;
}

/* ✅ 1 Zeile behalten, aber langen Text komplett zugänglich machen:
   - kein "..." mehr
   - stattdessen horizontal scrollen (Box bleibt gleich groß) */
.favPresetName{
  flex: 1;
  min-width: 0;

  /* 1 Zeile */
  white-space: nowrap;

  /* statt ellipsis -> horizontal scroll */
  overflow-x: auto;
  overflow-y: hidden;
  text-overflow: clip;

  /* etwas smoother auf Mobile */
  -webkit-overflow-scrolling: touch;

  /* Firefox scrollbar */
  scrollbar-width: thin;
}

/* WebKit scrollbar (nutzt nur Root-Tokens/Farben) */
.favPresetName::-webkit-scrollbar{
  height: var(--sb-w);
}
.favPresetName::-webkit-scrollbar-thumb{
  background: var(--c-w-22);
  border-radius: var(--round-pill);
}
.favPresetName::-webkit-scrollbar-track{
  background: transparent;
}

.favPresetDel{
  margin-left: calc(var(--stage-w) * 0.008);
  opacity: .75;
  cursor: pointer;
  user-select: none;
  padding: 0 calc(var(--stage-w) * 0.004);
}
.favPresetDel:hover{
  opacity: 1;
  color: var(--c-d-95);
}

/* ✅ Habashi-Pages: Text darf umbrechen (damit Note sichtbar bleibt) */
.favPresetOpt.is-habashi{
  align-items: flex-start;
}

.favPresetOpt.is-habashi .favPresetName{
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}


/* ✅ actual im Preset-Dropdown: dunkelgrau, damit es sofort erkennbar ist
   WICHTIG: auch wenn "actual" selected ist (.is-active) */
.favTopBar .favPresetOpt[data-name="actual"],
.favTopBar .favPresetOpt[data-name="actual"].is-active,
.favTopBar .favPresetOpt[data-name="actual"]:hover,

/* ✅ notes-only soll GENAU gleich aussehen wie actual */
.favTopBar .favPresetOpt[data-name="__notes_only__"],
.favTopBar .favPresetOpt[data-name="__notes_only__"].is-active,
.favTopBar .favPresetOpt[data-name="__notes_only__"]:hover{
  background: var(--fav-actual-bg);
}
/* ✅ Ayah-Count im Preset-Dropdown etwas “muted” */
.favTopBar .favPresetAyCount{
  opacity: 0.70;
  font-weight: 600;
}

/* =========================
   Favorites: eigene Progress-Leiste (nur auf Favoritenseite)
   ========================= */
.favProg{
  width: calc(var(--stage-w) * 0.9864583);
  margin: calc(var(--stage-h) * 0.012) auto 0 auto;

  /* ähnlich wie Statusbar Track, aber als eigener Block */
  height: calc(var(--stage-h) * 0.020);

  border: var(--u1h) solid var(--color-line);
  border-radius: var(--round-pill);
  background: var(--c-w-06);
  overflow: hidden;
  position: relative;
}

.favProgTicks{
  position: absolute;
  inset: 0;
  pointer-events: auto;
  z-index: 10;
}

/* Tick Button (große Klickfläche, dünner Strich sichtbar) */
.favTick{
  position:absolute;
  top:12%;
  bottom:12%;
  width: var(--u12w);
  transform: translateX(calc(var(--u12w) / -2));
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
}

.favTick::after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:50%;
  width: var(--u2w);
  transform: translateX(calc(var(--u2w) / -2));
  background: rgba(255,255,255,0.25);
}

.favTick:hover::after{ background: rgba(255,255,255,0.55); }
.favTick.is-active::after{ background: var(--c-a-85); }

/* Lightmode */
html[data-theme="light"] .favProg{
  background: rgba(var(--rgb-ink),0.07);
  border-top: var(--u1h) solid rgba(var(--rgb-ink),0.10);
}
html[data-theme="light"] .favTick::after{ background: rgba(var(--rgb-ink),0.30); }
html[data-theme="light"] .favTick:hover::after{ background: rgba(var(--rgb-ink),0.55); }

/* ContinuePlay nur bei laufendem FavPlay sichtbar */
.favContinuePlayBtn{ display: none; }
.statusbar.is-fav-playing .favContinuePlayBtn{ display: inline-grid; }

/* =========================
   Surah Dropdown (Statusbar)
   ========================= */

/* Position + Größe nach deinen Vorgaben:
   - Breite = 15.05% der Auflösungsbreite
   - Center des Buttons ist 25.36% der Breite links vom Screen-Center
*/
.suraDrop{
  --sura-dd-w: calc(var(--stage-w) * 0.1505);
  --sura-dd-center-offset: calc(var(--stage-w) * 0.2536);

  position: absolute;
  top:  calc(var(--stage-h) * 0.012);
  left: calc(50% - var(--sura-dd-center-offset) - (var(--sura-dd-w) / 2));

  /* ✅ fixe Breite wieder aktiv */
  width: var(--sura-dd-w);

  z-index: 99000; /* muss über qView/mView liegen */
}

.suraDropBtn{
  width: 100%;
  height: var(--sura-dd-h);
  border-radius: 999px;

  /* ✅ Text perfekt zentrieren, Pfeil absolut rechts */
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;

  padding:
    calc(var(--stage-h) * 0.018)
    calc(var(--stage-w) * 0.010);

  background: var(--color-bg-stage);
  border: 1px solid var(--color-line);
  color: var(--color-text);

  font-family: var(--font-meta);
  font-size: calc(var(--ayah-font-meta) * 0.95);

  cursor: pointer;
  user-select: none;
}

.suraDropText{
  /* ✅ mittig + Ellipsis, aber Platz für den Pfeil lassen */
  min-width: 0;
  max-width: calc(100% - 2.2em); /* Reserve für Pfeil (+ evtl. Spinner) */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
}

.suraDropArrow{
  opacity: .85;
  line-height: 1;
  font-size: calc(var(--ayah-font-meta) * 0.63);

  /* ✅ immer rechts, unabhängig von Textlänge */
  position: absolute;
  right: calc(var(--stage-w) * 0.010);
  top: 50%;
  transform: translateY(-50%);
}

/* ✅ Glow exakt wie Jumper (selbe Werte wie bei Hover-Wort/Jump) */
.suraDrop:hover .suraDropBtn,
.suraDrop.is-open .suraDropBtn{
  border-color: rgba(var(--rgb-accent),0.70);
  box-shadow:
    0 0 0 calc(var(--glow-ring) * 1.15) var(--c-a-22),
    0 0 calc(var(--glow-soft) * 1.10) var(--c-a-45);
}

/* wenn aktiv (open) stärker */
.suraDrop.is-active .suraDropBtn{
  border-color: var(--c-a-85);
  box-shadow:
    0 0 0 calc(var(--glow-ring) * 1.35) var(--c-a-35),
    0 0 calc(var(--glow-soft) * 1.35) var(--c-a-65);
}

.suraDropMenu{
  position: absolute;
  top: calc(100% + calc(var(--stage-h) * 0.010));

  /* ✅ Auto-Breite (Content bestimmt) */
  width: max-content;
  min-width: 0;
  max-width: min(calc(var(--stage-w) * 0.40), calc(100vw - var(--u30w)));

  left: 50%;
  transform: translateX(-50%);

  max-height: calc(var(--stage-h) * 0.68);

  overflow: auto;
  overscroll-behavior: contain;

  border: var(--u1h) solid var(--color-line);
  border-radius: calc(var(--ayah-card-r) * 1.1);
  background: var(--color-bg-stage);

  box-shadow:
    0 calc(var(--stage-h) * 0.014) calc(var(--stage-h) * 0.040) var(--c-black-35),
    0 0 0 var(--u1h) rgba(255,255,255,0.05);

  padding: calc(var(--stage-h) * 0.016);
  box-sizing: border-box;

  display:none;
  z-index: 999999;
  opacity: 1;
  color: var(--color-text) !important;
  border-color: var(--color-line) !important;
}


/* Scrollbar inside dropdown (WebKit) */
.suraDropMenu::-webkit-scrollbar{
  width: var(--u10w);
}
.suraDropMenu::-webkit-scrollbar-track{
  background: transparent;
}
.suraDropMenu::-webkit-scrollbar-thumb{
  background: var(--c-w-22);
  border: var(--u2h) solid transparent;
  background-clip: padding-box;
  border-radius: var(--round-pill);
}
.suraDropMenu::-webkit-scrollbar-thumb:hover{
  background: rgba(255,255,255,0.34);
}

.suraDrop.is-open .suraDropMenu{ display:block; }

/* Surah dropdown: number - arabic - english in one line */
.suraOpt .suraLine{
  display: flex;
  align-items: center;
  gap: calc(var(--stage-w) * 0.007);
}

.suraOpt .suraNo{
  font-family: var(--font-meta);
  font-weight: 600;
  opacity: 0.92;
}

.suraOpt .suraEn{
  font-family: var(--font-meta);
  opacity: 0.82;
}

/* Surah button label: number | arabic | english */
.suraDropText .suraBtnLine{
  display: inline-flex;
  align-items: center;

  /* ✅ kleiner Abstand nur im Button */
  gap: var(--u8w);

  white-space: nowrap;
}

.suraDropText .suraBtnNo{
  font-family: var(--font-meta);

  /* ✅ Zahl etwas weniger fett */
  font-weight: 650;

  opacity: 0.95;
}

.suraDropText .suraBtnAr{
  font-family: var(--font-ar);
  opacity: 0.96;
}

.suraDropText .suraBtnEn{
  font-family: var(--font-meta);
  opacity: 0.85;
}

/* Menu: nicht zu breit, aber auch nicht winzig */
.suraDropMenu{
  width: max-content !important;
  min-width: 0 !important;
  max-width: min(calc(var(--stage-w) * 0.40), calc(100vw - var(--u30w))) !important;
}

/* Dropdown Zeile: Zahl | Arabisch | Englisch (Englisch rechts) */
.suraOpt .suraLine{
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: center;
  column-gap: var(--u12w);
  width: 100%;
}

.suraOpt .suraNo{
  font-family: var(--font-meta);
  font-weight: 650;
  opacity: 0.92;
}

.suraOpt .suraAr{
  font-family: var(--font-ar);
  opacity: 0.96;
}

/* ✅ Englisch rechts ausrichten */
.suraOpt .suraEn{
  justify-self: end;
  text-align: right;
  font-family: var(--font-meta);
  opacity: 0.82;
}



/* ✅ Font Dropdown (Statusbar) */
.fontDrop{
  /* ✅ gleiche Breite wie Surah-Select */
  --font-dd-w: var(--sura-dd-w);

  /* ✅ Center X = 9,583% rechts vom Screen-Center */
  --font-dd-center-offset: calc(var(--stage-w) * 0.2548);
  position: absolute;
  top:  calc(var(--stage-h) * 0.012);

  /* ✅ rechts vom Center */
  left: calc(50% + var(--font-dd-center-offset) - (var(--font-dd-w) / 2));

  width: calc(var(--font-dd-w) * 0.75) ;
  z-index: 99000;
}

.fontDropBtn{
  width: 100%;
  height: var(--sura-dd-h);
  border-radius: var(--round-pill);

  /* ✅ wichtig für echtes Centering */
  position: relative;

  display: flex;
  align-items: center;
  justify-content: flex-end; /* Pfeil rechts */

  padding:
    calc(var(--stage-h) * 0.018)
    calc(var(--stage-w) * 0.010);

  background: var(--color-bg-stage);
  border: var(--u1h) solid var(--color-line);
  color: var(--color-text);

  font-family: var(--font-meta);
  font-size: calc(var(--ayah-font-meta) * 0.95);

  cursor: pointer;
  user-select: none;
}

.fontDropText{
  /* ✅ Text exakt mittig im Button */
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);

  /* ✅ wenn Text lang ist, nicht über Pfeil laufen */
  max-width: calc(100% - 2.4em);

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
  pointer-events: none; /* klick geht weiterhin auf den Button */
}

.fontDropArrow{
  opacity: .85;
  line-height: 1;
  margin-left: 0.6em;
  font-size: calc(var(--ayah-font-meta) * 0.63);
}

.fontDrop:hover .fontDropBtn,
.fontDrop.is-open .fontDropBtn{
  border-color: rgba(var(--rgb-accent),0.70);
  box-shadow:
    0 0 0 calc(var(--glow-ring) * 1.15) var(--c-a-22),
    0 0 calc(var(--glow-soft) * 1.10) var(--c-a-45);
}

.fontDrop.is-active .fontDropBtn{
  border-color: var(--c-a-85);
  box-shadow:
    0 0 0 calc(var(--glow-ring) * 1.35) var(--c-a-35),
    0 0 calc(var(--glow-soft) * 1.35) var(--c-a-65);
}

.fontDropMenu{
  position: absolute;
  left: 0;
  top: calc(100% + calc(var(--stage-h) * 0.010));
  width: 100%;

  max-height: calc(var(--stage-h) * 0.30);
  overflow: auto;
  overscroll-behavior: contain;

  border: var(--u1h) solid var(--color-line);
  border-radius: calc(var(--ayah-card-r) * 1.1);

  box-shadow:
    0 calc(var(--stage-h) * 0.014) calc(var(--stage-h) * 0.040) var(--c-black-35),
    0 0 0 var(--u1h) rgba(255,255,255,0.05);

  padding: calc(var(--stage-h) * 0.010);
  box-sizing: border-box;

  display:none;
  z-index: 999999;
  background: var(--color-bg-stage);   /* ✅ solid in dark+light */
  color: var(--color-text) !important;
  border-color: var(--color-line) !important;
  opacity: 1;
}

.fontDrop.is-open .fontDropMenu{ display:block; }

.fontOpt{
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--color-text);
  font-family: var(--font-meta);
  font-size: calc(var(--ayah-font-meta) * 0.95);

  display:flex;
  align-items:center;
  justify-content: space-between;

  padding: calc(var(--stage-h) * 0.010) calc(var(--stage-w) * 0.012);
  border-radius: var(--u10h);

  cursor:pointer;
  user-select:none;
}

.fontOpt:hover{
  background: rgba(var(--rgb-accent),0.12);
}


/* ✅ Reciter Dropdown (Statusbar) */
.recDrop{
  /* gleiche Breite/Höhe wie Fontselect */
  --rec-dd-w: var(--sura-dd-w);

  /* Center X = 9,74% links vom Screen-Center */
  --rec-dd-center-offset: calc(var(--stage-w) * 0.0974);

  position: absolute;
  top:  calc(var(--stage-h) * 0.012);

  /* ✅ links vom Center */
  left: calc(50% - var(--rec-dd-center-offset) - (var(--rec-dd-w) / 2));

  width: var(--rec-dd-w);
  z-index: 99000;
}

.recDropBtn{
  width: 100%;
  height: var(--sura-dd-h);
  border-radius: var(--round-pill);

  /* echtes Centering für Text */
  position: relative;

  display: flex;
  align-items: center;
  justify-content: flex-end; /* Pfeil rechts */

  padding:
    calc(var(--stage-h) * 0.018)
    calc(var(--stage-w) * 0.010);

  background: var(--color-bg-stage);
  border: var(--u1h) solid var(--color-line);
  color: var(--color-text);

  font-family: var(--font-meta);
  font-size: calc(var(--ayah-font-meta) * 0.95);

  cursor: pointer;
  user-select: none;
}

.recDropText{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);

  max-width: calc(100% - 2.4em);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;

  pointer-events: none;
}

.recDropArrow{
  opacity: .85;
  line-height: 1;
  margin-left: 0.6em;
  font-size: calc(var(--ayah-font-meta) * 0.63);
}

/* ✅ Glow wie Fontselect / SuraSelect */
.recDrop:hover .recDropBtn,
.recDrop.is-open .recDropBtn{
  border-color: rgba(var(--rgb-accent),0.70);
  box-shadow:
    0 0 0 calc(var(--glow-ring) * 1.15) var(--c-a-22),
    0 0 calc(var(--glow-soft) * 1.10) var(--c-a-45);
}

.recDrop.is-active .recDropBtn{
  border-color: var(--c-a-85);
  box-shadow:
    0 0 0 calc(var(--glow-ring) * 1.35) var(--c-a-35),
    0 0 calc(var(--glow-soft) * 1.35) var(--c-a-65);
}

.recDropMenu{
  position: absolute;
  top: calc(100% + calc(var(--stage-h) * 0.010));

  /* ✅ Dropdown-Fenster breiter als der Button */
  width: calc(100% * 1.55);
  left: 50%;
  transform: translateX(-50%);

  /* ✅ Dropdown-Fenster höher */
  max-height: calc(var(--stage-h) * 0.68);

  overflow: auto;
  overscroll-behavior: contain;

  border: var(--u1h) solid var(--color-line);
  border-radius: calc(var(--ayah-card-r) * 1.1);

  box-shadow:
    0 calc(var(--stage-h) * 0.014) calc(var(--stage-h) * 0.040) var(--c-black-35),
    0 0 0 var(--u1h) rgba(255,255,255,0.05);

  /* ✅ innen mehr Platz */
  padding: calc(var(--stage-h) * 0.016);
  box-sizing: border-box;

  display: none;
  z-index: 999999;
  background: var(--color-bg-stage);   /* ✅ solid in dark+light */
  color: var(--color-text) !important;
  border-color: var(--color-line) !important;
  opacity: 1;
}

.recDrop.is-open .recDropMenu{ display:block; }


.recOpt{
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--color-text);
  padding: calc(var(--stage-h) * 0.012) calc(var(--stage-w) * 0.010);
  border-radius: calc(var(--ayah-card-r) * 0.85);
  cursor: pointer;
  text-align: left;
  font-family: var(--font-meta);
  font-size: calc(var(--ayah-font-meta) * 0.95);
}

.recOpt:hover{
  background: var(--c-a-10);
}

.recOpt.is-active{
  background: rgba(var(--rgb-accent),0.16);
  box-shadow: inset 0 0 0 var(--u1h) rgba(var(--rgb-accent),0.25);
}

/* ✅ Favorites: Cards müssen “normal” layouten (sonst werden Übersetzungen überdeckt) */
.qView[data-mode="favorites"]{
  /* Perf-Containment hier AUS, sonst kann Browser falsch clippen/stacken */
  contain: none !important;
  content-visibility: visible !important;
}

.qView[data-mode="favorites"] .ayahCard{
  /* ❗️WICHTIG: qView ist ein column-flex container.
     Default "flex-shrink: 1" lässt Cards zusammenschrumpfen -> Übersetzungen werden abgeschnitten.
     Darum: Card darf NICHT shrinken, Höhe muss vom Content kommen. */
  flex: 0 0 auto !important;
  height: auto !important;
  min-height: unset !important;

  overflow: visible !important;
  contain: none !important;
  content-visibility: visible !important;

  /* Safety: eigener Stacking-Kontext pro Card */
  position: relative;
  z-index: 0;
}

.qView[data-mode="favorites"] .ayahTrans,
.qView[data-mode="favorites"] .ayahTransList,
.qView[data-mode="favorites"] .trLine{
  position: relative;
  z-index: 2;
}

.qView[data-mode="favorites"] .ayahTrans,
.qView[data-mode="favorites"] .ayahTransList{
  height: auto !important;
  min-height: unset !important;
}

/* optional: falls du irgendwo im Fav-Fenster extra Wrapper hast */
.qView[data-mode="favorites"] .ayahText{
  overflow: visible !important;
  position: relative;
  z-index: 1;

  height: auto !important;
  min-height: unset !important;
}

/* =========================================================
   ✅ Ayah-Mode (suraCards): gleiche “nicht-shrink / nicht-clip” Logik
   - Fix 1: SurahTopBar ist abgeschnitten -> darf nicht shrinken + overflow sichtbar
   - Fix 2: Basmallah Card wächst bei großer Schrift -> kein clip, echtes auto height
   ========================================================= */

/* SurahTopBar (oben in Ayah-Mode) */
.qView[data-mode="suraCards"] > .surahTopBar{
  flex: 0 0 auto !important;
  height: auto !important;
  min-height: unset !important;

  /* wichtig: surahTopBar hat sonst overflow:hidden -> kann Inhalt/Diakritik abschneiden */
  overflow: visible !important;

  /* gleiche Stabilität wie Favorites-Fix */
  contain: none !important;
  content-visibility: visible !important;

  position: relative;
  z-index: 1;
}

/* Basmallah-Card: immer “auto height”, nie clippen */
.qView[data-mode="suraCards"] .basmCard{
  flex: 0 0 auto !important;
  height: auto !important;
  min-height: unset !important;

  overflow: visible !important;

  contain: none !important;
  content-visibility: visible !important;

  position: relative;
  z-index: 0;
}


/* ✅ Translations Dropdown (Statusbar) */
.trDrop{
  /* gleiche Breite/Höhe wie Reciter */
  --tr-dd-w: var(--sura-dd-w);

  /* rechts von der Mitte (Spiegel von recDrop) */
  --tr-dd-center-offset: calc(var(--stage-w) * 0.0974);

  position: absolute;
  top:  calc(var(--stage-h) * 0.012);

  /* ✅ rechts vom Center */
  left: calc(50% + var(--tr-dd-center-offset) - (var(--tr-dd-w) / 2));

  width: var(--tr-dd-w);
  z-index: 99000;
}

.trDropBtn{
  width: 100%;
  height: var(--sura-dd-h);
  border-radius: var(--round-pill);

  position: relative;

  display: flex;
  align-items: center;
  justify-content: flex-end; /* Pfeil rechts */

  padding:
    calc(var(--stage-h) * 0.018)
    calc(var(--stage-w) * 0.010);

  background: var(--color-bg-stage);
  border: var(--u1h) solid var(--color-line);
  color: var(--color-text);

  font-family: var(--font-meta);
  font-size: calc(var(--ayah-font-meta) * 0.95);

  cursor: pointer;
  user-select: none;
}

.trDropText{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);

  max-width: calc(100% - 2.4em);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;

  pointer-events: none;
}

.trDropArrow{
  opacity: .85;
  line-height: 1;
  margin-left: 0.6em;
  font-size: calc(var(--ayah-font-meta) * 0.63);
}

/* ✅ Glow: hover ODER open */
.trDrop:hover .trDropBtn,
.trDrop.is-open .trDropBtn{
  border-color: rgba(var(--rgb-accent),0.70);
  box-shadow:
    0 0 0 calc(var(--glow-ring) * 1.15) var(--c-a-22),
    0 0 calc(var(--glow-soft) * 1.10) var(--c-a-45);
}

/* wenn aktiv (open) stärker */
.trDrop.is-active .trDropBtn{
  border-color: var(--c-a-85);
  box-shadow:
    0 0 0 calc(var(--glow-ring) * 1.35) var(--c-a-35),
    0 0 calc(var(--glow-soft) * 1.35) var(--c-a-65);
}

/* ✅ Dropdown breiter + zentriert unter dem Button */
.trDropMenu{
  position: absolute;
  top: calc(100% + calc(var(--stage-h) * 0.010));

  /* 👉 HIER stellst du die Breite ein */
  width: calc(var(--tr-dd-w) * 2.2);

  left: 50%;
  transform: translateX(-50%);

  max-height: calc(var(--stage-h) * 0.60);
  overflow: auto;
  overscroll-behavior: contain;

  border: var(--u1h) solid var(--color-line);
  border-radius: calc(var(--ayah-card-r) * 1.1);

  box-shadow:
    0 calc(var(--stage-h) * 0.014) calc(var(--stage-h) * 0.040) var(--c-black-35),
    0 0 0 var(--u1h) rgba(255,255,255,0.05);

  padding: calc(var(--stage-h) * 0.010);
  box-sizing: border-box;

  display: none;
  z-index: 999999;
  font-size: calc(var(--ayah-font-meta) * 0.95);
  background: var(--color-bg-stage);   /* ✅ solid in dark+light */
  color: var(--color-text) !important;
  border-color: var(--color-line) !important;
  opacity: 1;
}

.trDrop.is-open .trDropMenu{ display:block; }

/* ✅ Scrollbar wie SuraDrop */
.trDropMenu{
  scrollbar-width: thin; /* Firefox */
  scrollbar-color: rgba(255,255,255,.28) transparent;
}
.trDropMenu::-webkit-scrollbar{ width: var(--u10w); }
.trDropMenu::-webkit-scrollbar-track{ background: transparent; }
.trDropMenu::-webkit-scrollbar-thumb{
  background: var(--c-w-22);
  border: var(--u2h) solid transparent;
  background-clip: padding-box;
  border-radius: var(--round-pill);
}
.trDropMenu::-webkit-scrollbar-thumb:hover{
  background: rgba(255,255,255,0.34);
}

/* Language group title */
.trLangTitle{
  font-weight: 750;
  opacity: 0.95;
  padding: calc(var(--stage-h) * 0.010) calc(var(--stage-w) * 0.010);
  margin-top: calc(var(--stage-h) * 0.010);
  border-radius: var(--u10h);
  background: rgba(255,255,255,0.04);
  font-size: calc(var(--ayah-font-meta) * 0.95);
}

/* ✅ Checkbox rows: Text links, Checkbox RECHTS */
.trOpt{
  display: flex;
  align-items: center;

  width: 100%;
  padding: calc(var(--stage-h) * 0.010) calc(var(--stage-w) * 0.012);
  border-radius: var(--u10h);

  cursor: pointer;
  user-select: none;

  /* wichtig: rechts/links Layout */
  justify-content: space-between;
  gap: 0.8em;
  font-size: calc(var(--ayah-font-meta) * 0.95);
}

.trOpt:hover{
  background: var(--c-a-10);
}

.trOptLabel{
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

  /* links sauber */
  text-align: left;
  font-size: calc(var(--ayah-font-meta) * 0.95);
}

.trChk{
  flex: 0 0 auto;

  /* ✅ NIE px: responsive Größe */
  width:  calc(var(--stage-h) * 0.022);
  height: calc(var(--stage-h) * 0.022);

  accent-color: var(--c-a-95);
  cursor: pointer;

  /* etwas Abstand zum Text */
  margin-left: calc(var(--stage-w) * 0.008);
}



/* =========================
   Font Size Control (Statusbar) – RUND
   - gleiche Größe wie Play-Button
   - oben Plus / unten Minus
   - Mittellinie
   - Glow wie gehabt (Hover + is-strong)
   ========================= */

.fsCtl{
  /* gleiche Position wie vorher behalten */
  --fs-center-offset: calc(var(--stage-w) * 0.3142);

  /* ✅ Button-Durchmesser = wie Playbutton (29.1667px pro 1000px Breite) */
  --fs-d: calc(var(--stage-w) * 0.0291667);

  position: absolute;
  top:  calc(var(--stage-h) * 0.012);
  left: calc(50% + var(--fs-center-offset) - (var(--fs-d) / 2));
  width: var(--fs-d);
  height: var(--fs-d);
  z-index: 9000;
}

/* der eigentliche runde Button */
.fsCircle{
  width: 100%;
  height: 100%;
  border-radius: var(--round-pill);

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;

  background: var(--color-bg-stage);
  border: var(--u1h) solid rgba(255,255,255,0.10);

  cursor: pointer;
  user-select: none;

  /* wichtig (damit Browser nicht “Default Button” malt) */
  appearance: none;
  -webkit-appearance: none;

  padding: 0;
  margin: 0;

  transition: box-shadow 140ms ease, border-color 140ms ease, transform 120ms ease;
}

/* ✅ Glow: Hover ODER kurz bei Klick (is-strong auf fsCtl) */
.fsCtl:hover .fsCircle,
.fsCtl.is-strong .fsCircle{
  border-color: var(--c-a-85);
  box-shadow:
    0 0 0 calc(var(--glow-ring) * 1.35) var(--c-a-35),
    0 0 calc(var(--glow-soft) * 1.35) var(--c-a-65);
}

/* Plus/Minus oben/unten */
.fsCircle .fsGlyph{
  font-family: var(--font-meta);

  /* ✅ statt stage-h: direkt an Button-Durchmesser koppeln */
  /* fs-d ist in .fsCtl definiert (gleich wie Playbutton) */
  font-size: calc(var(--fs-d) * 0.42);

  line-height: 1;
  color: var(--color-text);

  user-select:none;
  pointer-events:none;
}

/* ✅ Mobile: Plus/Minus optisch stabiler */
.fsCircle .fsGlyph{
  font-weight: 600;
}

/* feinjustierung der Zeichen */
.fsCircle .fsPlus{ transform: translateY(-0.02em); display: inline-block; }
.fsCircle .fsMinus{ transform: translateY(0.02em); display: inline-block; }

/* Mittellinie */
.fsCircle .fsDivider{
  width: 78%;
  height: 1px;
  background: rgba(255,255,255,0.18);
  pointer-events:none;
}

.fsCircle:active{
  transform: scale(0.98);
}

/* falls irgendwo fsVal sichtbar ist: muted */
.fsVal{
  color: var(--color-text);
}

.suraOpt{
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--color-text);
  font-family: var(--font-meta);
  font-size: calc(var(--ayah-font-meta) * 0.95);

  /* grid = links wächst, rechts bleibt sichtbar */
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: calc(var(--stage-w) * 0.010);

  padding: calc(var(--stage-h) * 0.010) calc(var(--stage-w) * 0.012);

  /* ✅ kleine Eckenrundung (statt pill/999px) */
  border-radius: var(--u10h);

  cursor:pointer;
  user-select:none;
  line-height: 1.15;
}

.suraOpt:hover{
  background: rgba(var(--rgb-accent),0.12);
}

.suraOpt .suraEn{
  min-width: 0;

  /* ✅ im Dropdown NICHT abschneiden */
  white-space: normal;
  overflow: visible;
  text-overflow: clip;

  /* bessere Lesbarkeit */
  line-height: 1.2;
}

.suraOpt .suraAr{
  opacity: .9;
  margin-left: calc(var(--stage-w) * 0.008);
}

/* Titel-Trenner + Arabisch im gemischten Header stabilisieren */
.dot{ opacity:.65; padding: 0 0.35em; }
.sAr{ unicode-bidi: plaintext; }

/* Statusbar muss über dem Content stacken, sonst kann Dropdown “unter” qView/mView landen */
.statusbar{
  position: relative;
  z-index: 6900;
  overflow: visible;
}

/* =========================================================
   PERF: weniger Repaint/Reflow beim Scrollen & Highlighting
   (Features bleiben gleich, nur Rendering wird effizienter)
   ========================================================= */

/* 1) Scroll-Container isolieren (reduziert Reflow-Pingpong) */
.qView, .mView{
  contain: layout paint;
  content-visibility: auto;         /* Browser darf Offscreen “skippen” */
  contain-intrinsic-size: 1px 900px;/* Platzhalterhöhe für Smoothness */
}

/* 2) Ayah/Mushaf Elemente NICHT mit content-visibility containen.

   Warum:
   - In Scroll-Views (z.B. Favorites) kann content-visibility/contain-intrinsic-size
     zu „komischen“ Kartenhöhen führen.
   - Bei großer arabischer Schrift werden sonst oft Teile (Diacritics/Übersetzungen)
     abgeschnitten oder wirken „weg“.

   Performance bleibt trotzdem okay, weil wir im JS bereits Chunk-Rendering nutzen.
*/
.ayahCard,
.basmCard,
.mAyah{
  contain: paint;
}


/* 3) Glow/Highlight flüssiger, ohne Layout-Triggers */
.w, .mw{
  transform: translateZ(0);         /* eigenes Layer für Text-Glow */
}

/* Favorites Button becomes Back: hide count */
#favBtnBtn.is-back #favCount{ display:none; }

/* =========================
   Light Theme (Overrides)
   ========================= */
html[data-theme="light"]{
  --color-bg-main:  #f5f7fb;
  --color-bg-stage: #ffffff;
  --color-line:     rgba(var(--rgb-slate),0.16);
  --color-bg-chip:  rgba(var(--rgb-slate),0.06);

  --color-text: rgba(var(--rgb-slate),.88);
  --color-text-muted: rgba(var(--rgb-slate),.55);
  --color-ar-text: rgba(var(--rgb-ink-strong),.96);

  /* ✅ Lightmode: "actual" im Preset-Dropdown klar erkennbar (dunkelgrau) */
  --fav-actual-bg: rgba(var(--rgb-slate),0.10);

  /* optional: Topbar Background im Light Mode etwas ruhiger */
  --surah-topbar-center: var(--color-bg-stage);
}

/* =========================
   LIGHT MODE: UI FIXES (Dropdowns + Scrollbars)
   ========================= */

/* 1) Statusbar Buttons: Border im White-Mode sichtbar machen */
html[data-theme="light"] .suraDropBtn,
html[data-theme="light"] .recDropBtn,
html[data-theme="light"] .trDropBtn,
html[data-theme="light"] .fontDropBtn,
html[data-theme="light"] .fsCircle{
  border-color: var(--color-line) !important;
}

/* 2) Dropdown-Fenster im White-Mode SOLID (nicht transparent) */
html[data-theme="light"] .suraDropMenu,
html[data-theme="light"] .recDropMenu,
html[data-theme="light"] .trDropMenu,
html[data-theme="light"] .fontDropMenu{
  background: #ffffff !important;   /* ✅ SOLID */
  opacity: 1 !important;

  color: var(--color-text) !important;
  border-color: var(--color-line) !important;

  /* softer shadow für hellen Hintergrund */
  box-shadow:
    0 calc(var(--stage-h) * 0.012) calc(var(--stage-h) * 0.035) var(--c-black-12),
    0 0 0 var(--u1h) var(--c-ink-06) !important;
}

/* 3) “Slider” = Scrollbars in Ayah/Mushaf/Favorites: dunkel im White-Mode */
html[data-theme="light"] .qView,
html[data-theme="light"] .mView,
html[data-theme="light"] .welcomeBody{
  scrollbar-color: rgba(var(--rgb-ink),.35) transparent; /* Firefox */
}

html[data-theme="light"] .qView::-webkit-scrollbar-thumb,
html[data-theme="light"] .mView::-webkit-scrollbar-thumb,
html[data-theme="light"] .welcomeBody::-webkit-scrollbar-thumb{
  background: rgba(var(--rgb-ink),.18);
}

html[data-theme="light"] .qView::-webkit-scrollbar-thumb:hover,
html[data-theme="light"] .mView::-webkit-scrollbar-thumb:hover,
html[data-theme="light"] .welcomeBody::-webkit-scrollbar-thumb:hover{
  background: rgba(var(--rgb-ink),.30);
}

/* 4) Scrollbars IN den Dropdowns */
html[data-theme="light"] .suraDropMenu::-webkit-scrollbar-thumb,
html[data-theme="light"] .recDropMenu::-webkit-scrollbar-thumb,
html[data-theme="light"] .trDropMenu::-webkit-scrollbar-thumb,
html[data-theme="light"] .fontDropMenu::-webkit-scrollbar-thumb{
  background: rgba(var(--rgb-ink),.18);
}

html[data-theme="light"] .suraDropMenu::-webkit-scrollbar-thumb:hover,
html[data-theme="light"] .recDropMenu::-webkit-scrollbar-thumb:hover,
html[data-theme="light"] .trDropMenu::-webkit-scrollbar-thumb:hover,
html[data-theme="light"] .fontDropMenu::-webkit-scrollbar-thumb:hover{
  background: rgba(var(--rgb-ink),.30);
}

/* 5) Mushaf Surah-Name (الـ...) war hart auf weiß -> im White-Mode dunkel */
html[data-theme="light"] .mSurahName{
  color: var(--color-ar-text) !important;
}

/* ✅ Light Mode: Spinner/Progress sichtbar */
html[data-theme="light"] .suraDrop.is-jumping .suraDropArrow::after{
  border: var(--u2h) solid rgba(var(--rgb-ink),0.22) !important;
  border-top-color: var(--c-a-95) !important;
}

html[data-theme="light"] .jumpArrow.is-jumping::after{
  border: var(--u2h) solid rgba(var(--rgb-ink),0.22) !important;
  border-top-color: var(--c-a-95) !important;
}

/* (optional) Jump-Icon-Farbe im Loading nicht weiß erzwingen */
html[data-theme="light"] .jumpArrow.is-jumping{
  color: rgba(var(--rgb-ink),0.70) !important;
}

/* ✅ Light Mode: Gruppen-Titel im Translate Dropdown hell statt “dark chip” */
html[data-theme="light"] .trLangTitle{
  background: rgba(var(--rgb-ink),0.04) !important;
}

/*x achse slider*/

.qView, .mView{
  overflow-x: hidden;
  scroll-behavior: smooth; /* ✅ macht Auto-Scroll weicher */
  
}


/* =========================
   Copy Button (Ayah Cards)
   ========================= */

/* Copy Button: nur Icon, kein Kreis */
.ayahCopyBtn{
  border: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
  padding: 0 !important;

  /* Größe = hier einstellen */
  width:  calc(var(--stage-h) * 0.040);
  height: calc(var(--stage-h) * 0.040);

  display: inline-grid;
  place-items: center;

  cursor: pointer;
  user-select: none;

  /* gleiche Grund-“Transparenz” wie Bookmark OFF */
  color: var(--color-text-muted);

  transition: transform 120ms ease, color 140ms ease, filter 140ms ease;
}

.ayahCopyBtn .copyIcon{
  width: 80%;
  height: 80%;
  display: block;

  /* stroke im SVG ist currentColor -> wir steuern alles über color */
  color: currentColor;
  opacity: 0.92;

  transition: opacity 140ms ease, filter 140ms ease;
}

/* Hover: exakt wie Bookmark (nur am Icon, kein Kreis) */
.ayahCopyBtn:hover .copyIcon{
  opacity: 1;
  filter:
    drop-shadow(0 0 var(--u6h) var(--c-a-95))
    drop-shadow(0 0 var(--u14h) var(--c-a-45));
}

/* Click: kleines “press” */
.ayahCopyBtn:active{
  transform: scale(0.98);
}

/* 1s Feedback nach Copy: NICHT stärker als Bookmark, nur “an” */
.ayahCopyBtn.is-copied .copyIcon{
  opacity: 1;
  filter:
    drop-shadow(0 0 var(--u6h) var(--c-a-95))
    drop-shadow(0 0 var(--u14h) var(--c-a-45));
}

/* während is-copied: Rechtecke füllen */
.ayahCopyBtn.is-copied .copyIcon rect{
  fill: currentColor !important;
  stroke: currentColor !important;
}

/* =========================
   Notes Button (Ayah Cards)
   - 1x Definition (kein Duplicate mehr)
   - Hover: wie Bookmark/Copy (blau)
   - is-has-note: "voll" wie Bookmark ON (nicht gelb)
   ========================= */

.ayahNoteBtn{
  border: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
  padding: 0 !important;

  width:  calc(var(--stage-h) * 0.040);
  height: calc(var(--stage-h) * 0.040);

  display: inline-grid;
  place-items: center;

  cursor: pointer;
  user-select: none;

  color: var(--color-text-muted);

  transition: transform 120ms ease, color 140ms ease, filter 140ms ease;
}

.ayahNoteBtn .noteIcon{
  width: 82%;
  height: 82%;
  display: block;
  color: currentColor;
  opacity: 0.92;
  transition: opacity 140ms ease, filter 140ms ease;
}

/* Hover: wie Bookmark/Copy (blau) */
.ayahNoteBtn:hover .noteIcon{
  opacity: 1;
  filter:
    drop-shadow(0 0 var(--u6h) var(--c-a-95))
    drop-shadow(0 0 var(--u14h) var(--c-a-45));
}

.ayahNoteBtn:active{
  transform: scale(0.98);
}

/* ✅ Note existiert: Icon "voll" wie Bookmark ON (nicht gelb) */
.ayahNoteBtn.is-has-note{
  color: var(--color-text);
}

.ayahNoteBtn.is-has-note .noteIcon path,
.ayahNoteBtn.is-has-note .noteIcon rect{
  fill: currentColor !important;
  stroke: currentColor !important;
}
/* =========================
   Notes Modal (Overlay)
   ========================= */
.notesOverlay{
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: calc(var(--stage-h) * 0.04);
  background: rgba(0,0,0,0.55);
}

.notesOverlay.is-open{ display: flex; }

.notesModal{
  width: min(calc(var(--stage-w) * 0.92), 980px);
  height: min(calc(var(--stage-h) * 0.82), 720px);
  border-radius: calc(var(--stage-h) * 0.02);

  background: var(--color-bg-stage);
  border: var(--u1h) solid var(--color-line);
  box-shadow: 0 0 calc(var(--stage-h) * 0.06) rgba(0,0,0,0.45);

  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.notesHeader{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(var(--stage-h) * 0.018) calc(var(--stage-w) * 0.018);
  border-bottom: var(--u1h) solid var(--color-line);
}

.notesTitle{
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-family: var(--font-meta);
}

.notesLabel{
  color: var(--color-text-muted);
  letter-spacing: 0.06em;
  text-transform: lowercase;
}

.notesRef{
  color: var(--color-text);
  opacity: 0.95;
}

.notesClose{
  border: 0;
  background: transparent;
  color: var(--color-text);
  cursor: pointer;
  font-size: 18px;
  opacity: 0.85;
}
.notesClose:hover{ opacity: 1; }

.notesText{
  flex: 1;
  width: 100%;
  border: 0;
  outline: 0;
  resize: none;

  background: transparent;
  color: var(--color-text);

  padding: calc(var(--stage-h) * 0.02) calc(var(--stage-w) * 0.02);
  font-family: var(--font-meta);
  font-size: calc(var(--ayah-font-meta) * 1.05);
  line-height: 1.5;
}

.notesFooter{
  padding: calc(var(--stage-h) * 0.012) calc(var(--stage-w) * 0.02);
  border-top: var(--u1h) solid var(--color-line);
  color: var(--color-text-muted);
  font-family: var(--font-meta);
  font-size: calc(var(--ayah-font-meta) * 0.86);
}

/* Light mode overlay etwas heller */
html[data-theme="light"] .notesOverlay{
  background: rgba(var(--rgb-ink),0.35);
}

/* =========================
   Mushaf: ayah number rings (copy + play progress)
   ========================= */

/* Basis: wir brauchen eine stabile Layering-Umgebung für den Progress-Ring */
.mNo{
  position: relative;
  isolation: isolate;            /* sorgt dafür, dass ::before sauber “hinter” dem Inhalt bleibt */
  --ring: 0;                     /* 0..1 wird per JS gesetzt */

  transition: box-shadow 140ms ease, border-color 140ms ease, background 140ms ease, color 140ms ease;
}

/* ✅ Progress-Ring: nur wenn diese Ayah gerade läuft (is-focus wird von JS gesetzt) */
.mNo.is-focus::before{
  content:"";
  position:absolute;

  inset: calc(var(--u3h) * -1);

  border-radius: inherit;
  pointer-events: none;

  background: conic-gradient(
    var(--c-a-85) calc(var(--ring) * 1turn),
    var(--color-line) 0
  );

  /* ✅ innerer Kreis größer => Ring dünner/cleaner */
  -webkit-mask: radial-gradient(
    farthest-side,
    transparent calc(100% - var(--u4h)),
    #000 0
  );
  mask: radial-gradient(
    farthest-side,
    transparent calc(100% - var(--u4h)),
    #000 0
  );

  opacity: 0.98;
  z-index: -1;
}

/* ✅ Copy-Glow hat Vorrang (grün gewinnt) */
.mNo.is-copied{
  box-shadow:
    0 0 0 var(--glow-ring) rgba(var(--rgb-ok),0.35),
    0 0 var(--glow-soft) rgba(var(--rgb-ok),0.75) !important;

  border-color: rgba(var(--rgb-ok),0.85) !important;
}

/* ✅ explizit: wenn beides aktiv ist, gewinnt Copy */
.mNo.is-fav.is-copied{
  box-shadow:
    0 0 0 var(--glow-ring) rgba(var(--rgb-ok),0.35),
    0 0 var(--glow-soft) rgba(var(--rgb-ok),0.75) !important;

  border-color: rgba(var(--rgb-ok),0.85) !important;
}

/* ✅ Copy gewinnt auch optisch über Progress (Ring ausblenden) */
.mNo.is-copied::before{
  opacity: 0 !important;
}

/* =========================
   Mushaf: "Continue" Hover auf Ayah-Nummer (Ring)
   + Playing Progress Ring (AyahPlay / SuraPlay / FavPlay)
   ========================= */

/* Grund: wir brauchen einen sichtbaren Ring für --ring (wird in app.js gesetzt) */
.mNo{
  transition: box-shadow 140ms ease, border-color 140ms ease, background 140ms ease, color 140ms ease;

  /* ✅ nötig für ::after Ring */
  position: relative;
  isolation: isolate; /* sorgt dafür, dass z-index sauber funktioniert */
  --ring: 0;
}

/* Dark Mode: weißer Hover-Ring */
.mNo:hover{
  box-shadow:
    0 0 0 calc(var(--glow-ring) * 1.05) var(--c-w-22),
    0 0 calc(var(--glow-soft) * 0.95) rgba(255,255,255,0.35);
}

/* White Mode: dunkler Hover-Ring */
html[data-theme="light"] .mNo:hover{
  box-shadow:
    0 0 0 calc(var(--glow-ring) * 1.05) rgba(var(--rgb-ink),0.20),
    0 0 calc(var(--glow-soft) * 0.95) rgba(var(--rgb-ink),0.28);
}

/* =========================
   Mushaf: Playing Progress Ring
   - läuft im Uhrzeigersinn
   - dominiert den orange Fav-Ring
   - wird NICHT über dem grünen Copy-Glow angezeigt
   ========================= */

.mNo.is-focus::after{
  content: "";
  position: absolute;

  /* etwas außerhalb der Zahl, damit es "dominant" wirkt */
  inset: calc(var(--u1h) * -4);
  border-radius: 999px;

  pointer-events: none;

  /* ✅ über normalem Border/Fav-Look */
  z-index: 2;

  /* Ring-Farbe aus Root-Variablen (blau/accent) */
  background: conic-gradient(
    var(--c-a-95) 0turn calc(var(--ring, 0) * 1turn),
    var(--c-a-22) calc(var(--ring, 0) * 1turn) 1turn
  );

  /* Ring “ausschneiden” (nur Stroke sichtbar) */
  -webkit-mask: radial-gradient(
    farthest-side,
    transparent calc(100% - calc(var(--u1h) * 5)),
    #000 calc(100% - calc(var(--u1h) * 5))
  );
  mask: radial-gradient(
    farthest-side,
    transparent calc(100% - calc(var(--u1h) * 5)),
    #000 calc(100% - calc(var(--u1h) * 5))
  );
}

/* ✅ Wenn Copy-Glow aktiv ist, Ring aus (grün soll gewinnen) */
.mNo.is-copied::after{
  opacity: 0;
}

/* =========================
   First Visit Welcome Modal
   ========================= */

.welcomeOverlay{
  position: fixed;
  inset: 0;
  z-index: 999999;

  display: none;
  align-items: center;
  justify-content: center;

  /* ✅ NUR Welcome: Overlay wirkt wie “Modal Backdrop” */
  background: rgba(var(--rgb-ink),0.72);
  backdrop-filter: blur(calc(var(--stage-h) * 0.010));

  /* ✅ Padding nach Stage, nicht nach Viewport */
  padding: calc(var(--stage-h) * 0.035);
}

html[data-theme="light"] .welcomeOverlay{
  background: rgba(var(--rgb-ink),0.18);
  backdrop-filter: blur(calc(var(--stage-h) * 0.010));
}

.welcomeOverlay.is-open{
  display: flex;

  /* ✅ Welcome Scale fix (damit große Screens nicht “Mini-UI” bekommen) */
  --welcome-scale: 1;
}

/* ✅ Das Modal selbst: NUR Stage-basiert (kein vw/vh), damit große Monitore nichts aufblasen */
.welcomeModal{
  width: calc(var(--stage-w) * 0.9864583);
  max-width: calc(var(--stage-w) * 0.9864583);

  max-height: calc(var(--stage-h) * 0.94);

  border: var(--u1h) solid var(--color-line);
  border-radius: calc(var(--stage-h) * 0.020);

  background: var(--color-bg-main);
  box-shadow:
    0 calc(var(--stage-h) * 0.030) calc(var(--stage-h) * 0.120) var(--c-black-35),
    0 0 0 var(--u1h) var(--c-w-06);

  overflow: hidden;

  display: flex;
  flex-direction: column;
}

/* Header */
.welcomeHeader{
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;

  padding:
    calc(var(--stage-h) * 0.020)
    calc(var(--stage-w) * 0.018);

  border-bottom: var(--u1h) solid var(--color-line);
  background: var(--color-bg-stage);
}

.welcomeTitle{
  font-family: var(--font-meta);
  font-weight: 750;
  color: var(--color-text);
  opacity: 0.95;

  font-size: calc(var(--ayah-font-meta) * 1.12);
  line-height: 1.15;
}

.welcomeHeaderCenter{
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: calc(var(--stage-h) * 0.006);
}

.welcomeSubtitle{
  font-family: var(--font-meta);
  font-weight: 600;
  color: var(--color-text-muted);
  opacity: 0.95;
  font-size: calc(var(--ayah-font-meta) * 0.92);
  line-height: 1.15;
}

/* =========================
   Welcome Auth Bar
   ========================= */
.welcomeAuth{
  border-bottom: var(--u1h) solid var(--color-line);
  background: var(--color-bg-stage);
  padding:
    calc(var(--stage-h) * 0.014)
    calc(var(--stage-w) * 0.018);
}

.welcomeAuthTop{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--stage-w) * 0.012);
  margin-bottom: calc(var(--stage-h) * 0.010);
}

.welcomeAuthTitle{
  font-family: var(--font-meta);
  font-weight: 800;
  color: var(--color-text);
  opacity: 0.96;
  font-size: clamp(16px, calc(var(--ayah-font-meta) * 1.02), 22px);
}

.welcomeAuthRow{
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: calc(var(--stage-w) * 0.010);
  align-items: center;
}

.welcomeAuthInput{
  height: calc(var(--stage-h) * 0.050);
  padding: 0 calc(var(--stage-w) * 0.012);

  border: var(--u1h) solid var(--color-line);
  border-radius: calc(var(--stage-h) * 0.014);
  background: var(--color-bg-main);

  font-family: var(--font-meta);
  font-size: clamp(14px, var(--ayah-font-meta), 18px);
  font-weight: 650;
  color: var(--color-text);

  outline: none;
}

.welcomeAuthInput::placeholder{
  color: var(--color-text-muted);
  opacity: 0.75;
}

.welcomeAuthInput:focus{
  border-color: rgba(var(--rgb-accent),0.55);
  box-shadow: 0 0 0 calc(var(--u1h) * 2) rgba(var(--rgb-accent),0.18);
}

.welcomeAuthActions{
  display: inline-flex;
  gap: calc(var(--stage-w) * 0.008);
  align-items: center;
  justify-content: flex-end;
}

.welcomeAuthBtn{
  height: calc(var(--stage-h) * 0.050);
  padding: 0 calc(var(--stage-w) * 0.014);

  border: var(--u1h) solid var(--color-line);
  border-radius: calc(var(--stage-h) * 0.014);
  background: var(--color-bg-main);

  font-family: var(--font-meta);
  font-size: clamp(13px, calc(var(--ayah-font-meta) * 0.98), 18px);
  font-weight: 800;
  color: var(--color-text);

  cursor: pointer;
  user-select: none;

  /* ✅ echtes Centering (wie deine Icon-Buttons) */
  display: grid;
  place-items: center;
  line-height: 1;
  white-space: nowrap;
}

.welcomeAuthBtn:hover{
  box-shadow: 0 0 0 calc(var(--u1h) * 2) rgba(var(--rgb-accent),0.12);
}

.welcomeAuthBtn.is-primary{
  background: rgba(var(--rgb-accent),0.22);
  border-color: rgba(var(--rgb-accent),0.45);
}

.welcomeAuthLogout{
  display: none; /* wird per JS eingeblendet wenn eingeloggt */
  height: calc(var(--stage-h) * 0.040);
  padding: 0 calc(var(--stage-w) * 0.012);

  border: var(--u1h) solid var(--color-line);
  border-radius: calc(var(--stage-h) * 0.014);
  background: transparent;

  font-family: var(--font-meta);
  font-size: clamp(12px, calc(var(--ayah-font-meta) * 0.92), 16px);
  font-weight: 800;
  color: var(--color-text-muted);
  cursor: pointer;
}

.welcomeAuthMsg{
  margin-top: calc(var(--stage-h) * 0.010);
  font-family: var(--font-meta);
  font-size: clamp(12px, calc(var(--ayah-font-meta) * 0.92), 16px);
  line-height: 1.25;
  color: var(--color-text-muted);
}

.welcomeAuthMsg.is-error{
  color: rgba(var(--rgb-warn),0.92);
}

.welcomeAuthMsg.is-ok{
  color: rgba(var(--rgb-ok),0.92);
}

/* Small screens: stack nicely */
@media (max-width: 520px){
  .welcomeAuthRow{
    grid-template-columns: 1fr;
  }
  .welcomeAuthActions{
    justify-content: stretch;
  }
  .welcomeAuthBtn{
    width: 100%;
  }
}

/* Welcome: kleiner Hinweis neben "Create an account" */
.welcomeAuthTitleHint{
  font-weight: 600;
  opacity: 0.72;
  font-size: 0.72em;
  color: var(--color-text);
}

/* ✅ Wenn eingeloggt: Login-Inputs + Buttons im Welcome ausblenden */
.welcomeModal.is-logged-in .welcomeAuthRow{
  display: none;
}

/* Optional: Text oben anpassen (kann bleiben, wenn du willst) */
.welcomeModal.is-logged-in .welcomeAuthTitle{
  opacity: 0.85;
}


.welcomeClose{
  border: 0;
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;

  width:  calc(var(--stage-h) * 0.040);
  height: calc(var(--stage-h) * 0.040);

  border-radius: var(--round-pill);

  display: grid;
  place-items: center;

  font-size: calc(var(--ayah-font-meta) * 1.10);
  line-height: 1;

  transition: background 140ms ease, color 140ms ease, filter 140ms ease;

    position: absolute;
  right: calc(var(--stage-w) * 0.018);
  top: 50%;
  transform: translateY(-50%);
}

.welcomeClose:hover{
  color: var(--color-text);
  background: var(--c-w-06);
  filter: var(--fx-glow-accent-hover);
}

html[data-theme="light"] .welcomeClose:hover{
  background: var(--c-ink-06);
}

/* Body */
.welcomeBody{
  overflow: auto;

  padding:
    calc(var(--stage-h) * 0.022)
    calc(var(--stage-w) * 0.018);

  display: flex;
  flex-direction: column;
  gap: calc(var(--stage-h) * 0.022);
}

/* Sections */
.welcomeSection{
  width: 100%;
  /* 1020/1280 = 0.796875 */
  max-width: calc(var(--stage-w) * 0.796875);
  margin-left: auto;
  margin-right: auto;

  margin-bottom: calc(var(--stage-h) * 0.012);
}

.welcomeSectionTitle{
  font-family: var(--font-meta);
  font-weight: 700;
  color: var(--color-text);
  opacity: 0.92;

  margin-bottom: calc(var(--stage-h) * 0.010);
  font-size: calc(var(--ayah-font-meta) * 1.02);
}

/* =========================
   Welcome – Intentions (Absichten)
   - 2 Spalten klein
   - 3 Spalten mittel
   - 5 Spalten groß
   ========================= */

/* Welcome – Intentions (Grouped) */
.welcomeChecks{
  display: flex;
  flex-direction: column;
  gap: calc(var(--stage-h) * 0.012);
}

/* The actual grid inside a group (old welcomeChecks grid rules) */
.welcomeChecksGrid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(var(--stage-h) * 0.012);
  padding-top: calc(var(--stage-h) * 0.010);
}

@media (min-width: 900px){
  .welcomeChecksGrid{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1400px){
  .welcomeChecksGrid{
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

/* Accordion styles */
.welcomeGroup{
  border: var(--u1h) solid var(--color-line);
  border-radius: calc(var(--stage-h) * 0.014);
  background: var(--color-bg-stage);
  overflow: hidden;
}

.welcomeGroupSummary{
  list-style: none;
  cursor: pointer;
  user-select: none;

  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: calc(var(--stage-h) * 0.012) calc(var(--stage-w) * 0.012);
  font-family: var(--font-meta);
  font-weight: 700;
  color: var(--color-text);

  /* ✅ Basis: wie vorher, aber mit Minimum/Maximum */
  font-size: clamp(
    18px,
    calc((var(--stage-h) * 0.026 + var(--stage-w) * 0.013) / 2),
    32px
  );
}

/* ✅ Ultra große Screens: zusätzlich an Viewport koppeln, damit es wirklich wächst */
@media (min-width: 1800px){
  .welcomeGroupSummary{
    font-size: clamp(22px, calc(16px + 0.55vw), 44px);
    padding: calc(var(--stage-h) * 0.014) calc(var(--stage-w) * 0.014);
  }
}

@media (min-width: 2600px){
  .welcomeGroupSummary{
    font-size: clamp(26px, calc(18px + 0.65vw), 54px);
  }
}

/* =========================
   Intentions Accordion (welcome) – BIG screens fix
   Target: summary.intentGroupSummary
   ========================= */

.intentGroupSummary{
  list-style: none;
  cursor: pointer;
  user-select: none;

  display: flex;
  align-items: center;
  justify-content: space-between;

  /* gleiche "Sprache" wie dein UI */
  padding: calc(var(--stage-h) * 0.010) calc(var(--stage-w) * 0.010);
  font-family: var(--font-meta);
  font-weight: 700;
  color: var(--color-text);

  /* ✅ normal: stage-scaling + min/max */
  font-size: clamp(
    16px,
    calc((var(--stage-h) * 0.023 + var(--stage-w) * 0.011) / 2),
    26px
  );

  line-height: 1.2;
}

.intentGroupSummary::-webkit-details-marker{ display:none; }

/* ✅ Ultra-large: wirklich mit Viewport wachsen lassen (4K/Ultrawide) */
@media (min-width: 1800px){
  .intentGroupSummary{
    font-size: clamp(20px, calc(14px + 0.50vw), 40px);
  }
}

@media (min-width: 2600px){
  .intentGroupSummary{
    font-size: clamp(24px, calc(16px + 0.60vw), 54px);
  }
}

.welcomeGroupSummary::-webkit-details-marker{ display:none; }

/* =========================
   Intentions Accordion – arrow (left, stronger)
   Target: details.intentGroup > summary.intentGroupSummary
   ========================= */

/* Standard Marker ausblenden (damit nicht 2 Pfeile da sind) */
.intentGroupSummary::-webkit-details-marker{ display:none; }

/* Summary als "clickbar" + Platz für Pfeil LINKS */
.intentGroupSummary{
  position: relative;
  padding-left: calc(var(--stage-w) * 0.030); /* Platz für Pfeil links */
}

/* Der Pfeil (Chevron) LINKS */
.intentGroupSummary::before{
  content: "";
  position: absolute;
  left: calc(var(--stage-w) * 0.012);
  top: 50%;
  transform: translateY(-50%) rotate(-45deg);

  width:  calc(var(--stage-h) * 0.012);
  height: calc(var(--stage-h) * 0.012);

  /* ✅ stärker sichtbar: heller + etwas dicker */
  border-right: calc(var(--u1h) * 1.6) solid var(--color-text);
  border-bottom: calc(var(--u1h) * 1.6) solid var(--color-text);

  opacity: 0.95;
  filter: var(--fx-glow-accent);
  transition: transform 160ms ease, opacity 160ms ease, filter 160ms ease;
}

/* Hover: noch etwas klarer */
.intentGroupSummary:hover::before{
  opacity: 1;
  filter: var(--fx-glow-accent-hover);
}

/* Wenn geöffnet: Pfeil nach unten drehen */
details.intentGroup[open] > summary.intentGroupSummary::before{
  transform: translateY(-50%) rotate(135deg);
}

.welcomeGroupTitle{
  opacity: 0.95;
}

.welcomeGroupCount{
  font-family: var(--font-meta);
  font-weight: 750;
  color: var(--color-text-muted);
  padding: 0 calc(var(--stage-w) * 0.008);
  border-radius: var(--round-pill);
  background: var(--c-w-06);
}

html[data-theme="light"] .welcomeGroupCount{
  background: var(--c-ink-06);
}

.welcomeGroup[open] .welcomeGroupSummary{
  filter: var(--fx-glow-accent-hover);
}

.welcomeCheck{
  width: 100%;
  border: var(--u1h) solid var(--color-line);
  background: var(--c-w-06);
  border-radius: var(--round-pill);

  display: flex;
  align-items: center;

  /* ✅ Text links, Checkbox rechts */
  flex-direction: row-reverse;
  justify-content: space-between;

  padding: calc(var(--stage-h) * 0.012) calc(var(--stage-w) * 0.012);
}

html[data-theme="light"] .welcomeCheck{
  background: var(--c-ink-04);
}

.welcomeCheckBox{
  width:  calc(var(--stage-h) * 0.020);
  height: calc(var(--stage-h) * 0.020);
  accent-color: var(--c-a-65);
  flex: 0 0 auto;
}

.welcomeCheckText{
  font-family: var(--font-meta);

  /* ✅ gleiche Basis wie vorher, aber mit Mindestgröße (damit es auf kleinen Screens nicht zu klein wird) */
  font-size: clamp(
    calc(var(--ayah-font-meta) * 0.92),
    calc((var(--stage-h) * 0.020 + var(--stage-w) * 0.010) / 2),
    calc(var(--ayah-font-meta) * 1.08)
  );

  color: var(--color-text);
  opacity: 0.92;
  line-height: 1.2;
}

/* ✅ Extra Boost nur auf sehr kleinen Screens */
@media (max-width: 520px){
  .welcomeCheckText{
    font-size: clamp(
      calc(var(--ayah-font-meta) * 1.05),
      calc((var(--stage-h) * 0.022 + var(--stage-w) * 0.012) / 2),
      calc(var(--ayah-font-meta) * 1.18)
    );
    line-height: 1.25;
  }
}

/* surah grid */
.welcomeSurahGrid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(var(--stage-h) * 0.012);
}

@media (max-width: 900px){
  .welcomeSurahGrid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px){
  .welcomeSurahGrid{ grid-template-columns: 1fr; }
}

.welcomeSuraCard{
  border: var(--u1h) solid var(--color-line);
  background: var(--color-bg-stage);

  border-radius: calc(var(--stage-h) * 0.014);
  padding: calc(var(--stage-h) * 0.012) calc(var(--stage-w) * 0.012);

  cursor: pointer;
  text-align: left;

  display:grid;
  grid-template-columns: auto 1fr auto;
  align-items:center;
  gap: calc(var(--stage-w) * 0.012);

  transition: transform 120ms ease, border-color 140ms ease, box-shadow 140ms ease;
}

.welcomeSuraCard:hover{
  border-color: var(--c-a-35);
  box-shadow:
    0 0 0 var(--u1h) var(--c-a-22),
    0 0 calc(var(--stage-h) * 0.020) var(--c-a-18);
}

.welcomeSuraCard:active{ transform: scale(0.99); }

.welcomeSuraNo{
  width:  calc(var(--stage-h) * 0.050);
  height: calc(var(--stage-h) * 0.050);

  font-size: calc(var(--ayah-font-meta) * 0.92);

  border-radius: var(--round-pill);
  display:grid;
  place-items:center;

  font-family: var(--font-meta);
  font-weight: 800;

  /* ✅ Zahl immer schwarz (auch im Darkmode) */
  color: rgb(var(--rgb-black));

  border: var(--u2h) solid var(--color-line);

  /* ✅ gleiche Farbe wie Progressbar-Fill */
  background: var(--c-a-95);

  /* ✅ KEIN Text-Rand/Outline */
  -webkit-text-stroke: 0 transparent;
  text-shadow: none;
}

.welcomeSuraLeft{ display:grid; gap: var(--u2h); }

.welcomeSuraName{
  font-family: var(--font-meta);
  font-weight: 750;
  color: var(--color-text);
  line-height: 1.15;

  font-size: calc(var(--ayah-font-meta) * 1.02);
}

.welcomeSuraSub{
  font-family: var(--font-meta);
  /* optional: auch Sub gut skalieren (wenn du willst) */
  font-size: clamp(
    calc(var(--stage-w) * 0.0060),
    calc(var(--stage-w) * 0.0072),
    calc(var(--stage-w) * 0.0090)
  );
  color: var(--color-text-muted);
  opacity: 0.85;
}

.welcomeSuraRight{
  text-align:right;
  display:grid;
  gap: var(--u2h);
}

.welcomeSuraAr{
  font-family: var(--font-ar);
  font-size: calc(var(--ayah-font-ar) * 0.86 * var(--welcome-scale));
  color: var(--color-ar-text);
  opacity: 0.95;
}

/* ✅ "200 Ayahs" — weiß + Stage-skaliert (nicht vw) */
.welcomeSuraAyahs{
  font-family: var(--font-meta);
  font-size: clamp(
    calc(var(--stage-w) * 0.0055),  /* min */
    calc(var(--stage-w) * 0.011),  /* ideal */
    calc(var(--stage-w) * 0.0176)   /* max */
  );
  color: var(--color-text);  /* ✅ weiß (im Dark Theme) */
  opacity: 1;
}

/* Donate section */
.welcomeSectionDonate{
  display: flex;
  flex-direction: column;
  gap: calc(var(--stage-h) * 0.016);
  align-items: center;
}

.welcomeDonateText{
  width: 100%;
}

.welcomeDonateP{
  margin: 0 0 calc(var(--stage-h) * 0.012) 0;
  font-family: var(--font-de);
  font-size: calc(var(--ayah-font-meta) * 0.95);
  line-height: 1.35;
  color: var(--color-text);
  opacity: 0.92;
}

.welcomeDonateMath{
  margin-top: calc(var(--stage-h) * 0.010);
  padding: calc(var(--stage-h) * 0.012) calc(var(--stage-w) * 0.012);
  border: var(--u1h) solid var(--color-line);
  border-radius: calc(var(--stage-h) * 0.014);
  background: var(--c-w-04);
}

html[data-theme="light"] .welcomeDonateMath{
  background: var(--c-ink-04);
}

.welcomeDonateLine{
  font-family: var(--font-meta);
  font-size: calc(var(--ayah-font-meta) * 0.92);
  line-height: 1.35;
  color: var(--color-text);
  opacity: 0.90;
}

.welcomeDonateResult{
  margin-top: calc(var(--stage-h) * 0.012);
  font-family: var(--font-meta);
  font-size: calc(var(--ayah-font-meta) * 1.00);
  color: var(--color-text);
  opacity: 0.95;
}

.welcomeDonateBtn{
  border: var(--u1h) solid var(--color-line);
  border-radius: calc(var(--stage-h) * 0.014);
  background: var(--color-bg-stage);
  color: var(--color-text);

  padding:
    calc(var(--stage-h) * 0.012)
    calc(var(--stage-w) * 0.020);

  font-family: var(--font-meta);
  font-weight: 800;
  font-size: calc(var(--ayah-font-meta) * 1.00);

  cursor: pointer;

  transition: border-color 140ms ease, box-shadow 140ms ease, transform 120ms ease;
}

.welcomeDonateBtn:hover{
  border-color: var(--c-a-35);
  box-shadow: 0 0 0 var(--u1h) var(--c-a-22), 0 0 calc(var(--stage-h) * 0.020) var(--c-a-18);
}

.welcomeDonateBtn:active{ transform: scale(0.99); }

/* Footer */
.welcomeFooter{
  width: 100%;
  padding:
    calc(var(--stage-h) * 0.016)
    calc(var(--stage-w) * 0.018);

  border-top: var(--u1h) solid var(--color-line);
  background: var(--color-bg-stage);

  display: flex;
  justify-content: center;
}

.welcomeContinue{
  border: var(--u1h) solid var(--color-line);
  border-radius: calc(var(--stage-h) * 0.014);

  background: var(--color-bg-main);
  color: var(--color-text);

  padding:
    calc(var(--stage-h) * 0.012)
    calc(var(--stage-w) * 0.028);

  font-family: var(--font-meta);
  font-weight: 750;
  font-size: calc(var(--ayah-font-meta) * 1.00);

  cursor: pointer;

  transition: border-color 140ms ease, box-shadow 140ms ease, transform 120ms ease;
}

.welcomeContinue:hover{
  border-color: var(--c-a-35);
  box-shadow: 0 0 0 var(--u1h) var(--c-a-22), 0 0 calc(var(--stage-h) * 0.020) var(--c-a-18);
}

.welcomeContinue:active{ transform: scale(0.99); }



/* =========================================
   Scrollbars (Dropdown-Menüs) skalieren mit Stage
   ========================================= */

/* WebKit (Chrome/Edge/Safari) */
.recDropMenu::-webkit-scrollbar,
.trDropMenu::-webkit-scrollbar{
  width:  calc(var(--stage-w) * 0.006);
  height: calc(var(--stage-w) * 0.006);
}

.recDropMenu::-webkit-scrollbar-thumb,
.trDropMenu::-webkit-scrollbar-thumb{
  border-radius: var(--round-pill);
  background: rgba(255,255,255,0.18);
}

.recDropMenu::-webkit-scrollbar-thumb:hover,
.trDropMenu::-webkit-scrollbar-thumb:hover{
  background: rgba(255,255,255,0.26);
}

.recDropMenu::-webkit-scrollbar-track,
.trDropMenu::-webkit-scrollbar-track{
  background: rgba(0,0,0,0.18);
  border-radius: var(--round-pill);
}

/* Firefox */
.recDropMenu,
.trDropMenu{
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.22) rgba(0,0,0,0.18);
}

/* =========================
   Account Picker (Statusbar)
   ========================= */

.acctPicker{
  position: absolute;
  right: calc(var(--stage-w) * 0.02775);
  top:   calc(var(--stage-h) * 0.056);
  z-index: 9999000; /* ✅ über alles */
}

.acctBtn{
  /* ✅ wie playStop: Button-Durchmesser + Icongröße als feste Länge */
  --acct-d: calc(var(--stage-h) * 0.050);
  --acct-icon: calc(var(--acct-d) * 0.62);


  width:  calc(var(--stage-h) * 0.040);
  height: calc(var(--stage-h) * 0.0400);
  border-radius: var(--round-pill);
  border: var(--u1h) solid var(--color-line);

  /* wie Mushaf/Ayah Toggle */
  background: var(--color-bg-stage);

  color: var(--color-text);
  opacity: 0.80;

  display: grid;
  place-items: center;

    /* ✅ mobile “SVG verschiebt sich”-Fix */
  padding: 0;
  line-height: 0;
  overflow: hidden;

  /* wie Mushaf: eher box-shadow statt filter */
  transition:
    opacity 160ms ease,
    box-shadow 160ms ease,
    border-color 160ms ease,
    transform 120ms ease;
}

html[data-theme="light"] .acctBtn{
  /* ✅ same background as .themeBtn in light mode */
  background: var(--color-bg-stage);
}

.acctBtn:hover{
  opacity: 0.92;

  /* exakt die Glow-Logik wie bei .viewToggleBtn:hover */
  border-color: rgba(var(--rgb-accent),0.75);
  box-shadow:
    0 0 0 var(--glow-ring) rgba(var(--rgb-accent),0.28),
    0 0 var(--glow-soft) var(--glow-blue);
}

.acctIcon{
  width:  calc(var(--stage-h) * 0.022);
  height: calc(var(--stage-h) * 0.022);
  display:block;
  fill: currentColor;
  pointer-events: none;
}

/* Menü default zu */
.acctMenu{
  display: none;
  position: absolute;

  right: 0;
  top: calc(var(--style-btn-d) + (var(--stage-h) * 0.010));

  width: min(calc(var(--stage-w) * 0.62), calc(100vw - (var(--stage-w) * 0.04)));
  padding: calc(var(--stage-h) * 0.016);

  border: var(--u1h) solid var(--color-line);
  border-radius: calc(var(--stage-h) * 0.014);
  background: var(--color-bg-stage);
  box-shadow: 0 calc(var(--stage-h) * 0.016) calc(var(--stage-h) * 0.050) var(--c-black-25);

  z-index: 9999999;
}

.acctPicker.is-open .acctMenu{ display:block; }

.acctTitleRow{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: calc(var(--stage-w) * 0.010);
  margin-bottom: calc(var(--stage-h) * 0.012);
}

.acctTitle{
  font-family: var(--font-meta);
  font-weight: 600;
  font-size: calc(var(--ayah-font-meta) * 1.05);
  opacity: 0.95;
}

.acctClose{
  border: var(--u1h) solid var(--color-line);
  background: var(--color-bg-stage) !important;
  color: var(--color-text);
  border-radius: var(--round-pill);

  width:  calc(var(--stage-h) * 0.042);
  height: calc(var(--stage-h) * 0.042);

  /* ✅ exakt zentrieren wie Icon-Buttons */
  display: grid;
  place-items: center;
  padding: 0;
  line-height: 1;
  font-size: calc(var(--stage-h) * 0.028);

  cursor: pointer;
  opacity: 0.85;
  transition: opacity 160ms ease, filter 160ms ease, transform 120ms ease;
}

.acctClose:hover{
  opacity: 0.95;
  filter: var(--fx-glow-accent-hover);
}

.acctClose:active{
  transform: translateY(1px);
}

html[data-theme="light"] .acctClose{ background: var(--c-ink-04); }


/* ✅ Report-Bug Close Button: identisch zu acctClose */
.acctBugClose{
  border: var(--u1h) solid var(--color-line);
  background: var(--color-bg-stage) !important;
  color: var(--color-text);
  border-radius: var(--round-pill);

  width:  calc(var(--stage-h) * 0.042);
  height: calc(var(--stage-h) * 0.042);

  display: grid;
  place-items: center;
  padding: 0;
  line-height: 0;

  cursor: pointer;
}

html[data-theme="light"] .acctBugClose{ background: var(--c-ink-04); }

.acctBugClose:hover{
  filter: var(--fx-glow-accent-hover);
}


.acctRow{
  display:flex;
  gap: calc(var(--stage-w) * 0.010);
  align-items:center;
  flex-wrap: wrap;
}

.acctRowBottom{
  margin-top: calc(var(--stage-h) * 0.012);
}

.acctInput{
  flex: 1 1 calc(var(--stage-w) * 0.18);
  min-width: calc(var(--stage-w) * 0.18);

  height: calc(var(--stage-h) * 0.048);
  padding: 0 calc(var(--stage-w) * 0.010);

  border: var(--u1h) solid var(--color-line);
  border-radius: calc(var(--stage-h) * 0.012);

  background: var(--color-bg-main);
  color: var(--color-text);

  font-family: var(--font-meta);
  font-size: calc(var(--ayah-font-meta) * 0.95);
}

html[data-theme="light"] .acctInput{ background: var(--c-ink-04); }

.acctInput::placeholder{
  color: var(--color-text-muted);
  opacity: 0.65;
}

.acctBtnSmall{
  height: calc(var(--stage-h) * 0.050);
  border-radius: var(--round-pill);
  border: var(--u1h) solid var(--color-line);
  background: var(--c-w-06);
  color: var(--color-text);
  padding: 0 calc(var(--stage-w) * 0.016);
  cursor: pointer;
  white-space: nowrap;
  font-size: calc(var(--ayah-font-meta) * 0.90);

  /* ✅ wie Statusleiste: clean hover feel */
  transition: box-shadow 160ms ease, border-color 160ms ease, opacity 160ms ease, transform 120ms ease;
  opacity: 0.92;

  /* ✅ text exakt mittig (wie wir es schon gemacht haben) */
  display: grid;
  place-items: center;
  line-height: 1;
}

.acctBtnPrimary{
  background: var(--c-a-14);
  border-color: var(--c-a-35);
}

/* ✅ EXACTLY like statusbar glow: border + ring + soft */
.acctBtnSmall:hover{
  opacity: 1;
  border-color: rgba(var(--rgb-accent),0.75);
  box-shadow:
    0 0 0 var(--glow-ring) rgba(var(--rgb-accent),0.28),
    0 0 var(--glow-soft) var(--glow-blue);
}

.acctBtnSmall:active{
  transform: translateY(1px);
}

html[data-theme="light"] .acctBtnSmall{ background: var(--c-ink-04); }


.acctMsg{
  margin-top: calc(var(--stage-h) * 0.010);
  min-height: calc(var(--stage-h) * 0.020);
  font-family: var(--font-meta);
  font-size: calc(var(--ayah-font-meta) * 0.88);
  color: var(--color-text);
  opacity: 0.90;
}

.acctMsg.is-ok{ color: rgba(var(--rgb-ok),0.95); }
.acctMsg.is-error{ color: var(--c-d-95); }

.acctImportLabel{
  display:inline-flex;
  align-items:center;
  cursor:pointer;
}

.acctRowBottom{
  margin-top: calc(var(--stage-h) * 0.012);
  justify-content: flex-start;
}


/* =========================
   Account Bug Report Box
   ========================= */
.acctBugBox{
  display: none;
  margin-top: calc(var(--stage-h) * 0.012);
  padding: calc(var(--stage-h) * 0.012);

  border: var(--u1h) solid var(--color-line);
  border-radius: calc(var(--stage-h) * 0.014);
  background: var(--color-bg-main);

  box-shadow:
    0 calc(var(--stage-h) * 0.010) calc(var(--stage-h) * 0.040) var(--c-black-25),
    0 0 0 var(--u1h) var(--c-w-06);
}

.acctBugBox.is-open{ display: block; }

.acctBugHead{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: calc(var(--stage-w) * 0.010);
  margin-bottom: calc(var(--stage-h) * 0.010);
}

.acctBugTitle{
  font-family: var(--font-meta);
  font-weight: 800;
  font-size: calc(var(--ayah-font-meta) * 1.02);
  color: var(--color-text);
}

.acctBugClose{
  width:  calc(var(--stage-h) * 0.040);
  height: calc(var(--stage-h) * 0.040);
  border-radius: var(--round-pill);
  border: var(--u1h) solid var(--color-line);
  background: var(--color-bg-stage);
  color: var(--color-text);
  display: grid;
  place-items: center;
  line-height: 1;
  cursor:pointer;
  opacity: 0.88;
}

.acctBugClose:hover{
  opacity: 1;
  border-color: rgba(var(--rgb-accent),0.75);
  box-shadow:
    0 0 0 var(--glow-ring) rgba(var(--rgb-accent),0.22),
    0 0 var(--glow-soft) var(--glow-blue);
}

.acctBugText{
  width: 100%;
  min-height: calc(var(--stage-h) * 0.120);
  resize: vertical;

  border-radius: calc(var(--stage-h) * 0.012);
  border: var(--u1h) solid var(--color-line);

  background: var(--color-bg-stage);
  color: var(--color-text);

  padding: calc(var(--stage-h) * 0.010) calc(var(--stage-w) * 0.010);

  font-family: var(--font-meta);
  font-size: calc(var(--ayah-font-meta) * 0.95);
  line-height: 1.25;
  outline: none;
}

.acctBugText:focus{
  border-color: rgba(var(--rgb-accent),0.75);
  box-shadow:
    0 0 0 var(--glow-ring) rgba(var(--rgb-accent),0.22),
    0 0 var(--glow-soft) rgba(var(--rgb-accent),0.18);
}

.acctBugActions{
  display:flex;
  justify-content: flex-end;
  gap: calc(var(--stage-w) * 0.010);
  margin-top: calc(var(--stage-h) * 0.010);
}


/* =========================
   Surface Picker (Statusbar)  ✅ match Style Picker sizing
   ========================= */
.surfacePicker{
  position: absolute;

  /* ⚠️ Position kannst du hier feinjustieren */
  left: calc(var(--stage-w) * 0.021);
   /* Y: direkt UNTER Favorites */
  top:  calc(var(--fav-center-y) + (var(--fav-h) / 2) + (var(--stage-h) * 0.0050));

  z-index: 999999999;

  /* ✅ genau wie stylePicker: closed = nur Button */
  height: var(--style-btn-d);
  width:  var(--style-btn-d);

  display: flex;
  align-items: center;

  border: var(--u1h) solid transparent;
  border-radius: var(--jump-r);
  background: transparent;

  padding-inline: 0;

  transition:
    opacity 160ms ease,
    background 160ms ease,
    border-color 160ms ease,
    width 160ms ease,
    padding-inline 160ms ease;
}

/* Button-Kreis */
.surfaceBtn{
  width:  var(--style-btn-d);
  height: var(--style-btn-d);
  border-radius: var(--round-pill);

  border: var(--u1h) solid var(--color-line);
  background: var(--color-bg-main);
  color: var(--color-text);

  display: grid;
  place-items: center;

  opacity: 0.60;
  cursor: pointer;
  line-height: 0;

  transition: opacity 160ms ease, filter 160ms ease, transform 120ms ease;
}

.surfaceBtn:hover{
  opacity: 1;
  filter: var(--fx-glow-accent-hover);
}

.surfaceBtn:active{ transform: translateY(1px); }

/* ✅ Icon wie styleIcon: 70% und sauber zentriert */
.surfaceIcon{
  /* ✅ Größe = abhängig von Auflösung (stage-h) */
  width:  calc(var(--stage-h) * 0.011);
  height: calc(var(--stage-h) * 0.011);
  display: block;
  pointer-events: none;

  /* ✅ optisches Zentrieren (Desktop = 0) */
  --surface-icon-y: 0px;
  transform: translateY(var(--surface-icon-y));
}

/* ✅ Phone/rotate: minimaler Nudge */
html.rotate-phone .surfaceIcon{
  --surface-icon-y: calc(var(--u1h) * 0.8);
}

/* Menü: IN der Pill – gleiche Höhe, gleiche Gaps wie styleMenu */
.surfaceMenu{
  height: 100%;
  flex: 1 1 auto;

  display: none;
  align-items: center;

  gap: var(--style-dot-gap);
  padding-inline-start: var(--style-dot-gap);

  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;

  opacity: 0;
  pointer-events: none;

  transition: opacity 160ms ease;
}

/* optional scrollbar hübsch */
.surfaceMenu::-webkit-scrollbar{ height: var(--sb-w); }
.surfaceMenu::-webkit-scrollbar-thumb{
  background: var(--fx-scroll-fill);
  border-radius: var(--round-pill);
}
.surfaceMenu::-webkit-scrollbar-track{
  background: var(--c-w-06);
  border-radius: var(--round-pill);
}
html[data-theme="light"] .surfaceMenu::-webkit-scrollbar-track{
  background: var(--c-ink-06);
}

/* Dots: gleiche Größe/Gaps wie styleDot */
.surfaceDot{
  width:  var(--style-dot-d);
  height: var(--style-dot-d);
  border-radius: var(--round-pill);

  border: var(--u1h) solid var(--color-line);
  background: var(--color-bg-chip);

  display: grid;
  place-items: center;

  padding: 0;
  overflow: hidden;
  line-height: 0;

  cursor: pointer;
  opacity: 0.95;
  pointer-events: auto;

  transition: transform 120ms ease, filter 120ms ease, opacity 120ms ease;
}

.surfaceDot:hover{
  transform: scale(1.05);
  filter: var(--fx-glow-accent-hover);
  opacity: 1;
}

.surfaceDot.is-active{
  outline: var(--u1h) solid var(--c-a-85);
  outline-offset: calc(var(--u2h) * 1);
  filter: var(--fx-glow-accent-focus);
}

/* Preview-SVG soll den Kreis voll füllen */
.surfacePreview{
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

/* ✅ Open Zustand (per click): gleiche “Pill” Logik wie stylePicker hover */
.surfacePicker.is-open{
  width: auto;
  padding-inline: var(--style-menu-pad-x);
  border-color: var(--color-line);
  background: var(--color-bg-main);

  /* so wie stylePicker: bis rechts in die Stage */
  right: calc(var(--stage-w) * 0.012);
}

.surfacePicker.is-open .surfaceBtn{ opacity: 1; }
.surfacePicker.is-open .surfaceMenu{
  display: flex;
  opacity: 1;
  pointer-events: auto;
}

/* ✅ Ornament background (correct container: #frame) */
#frame{
  position: relative; /* needed for ::before absolute */
}

#frame::before{
  content:"";
  position: absolute;
  inset: 0;
  pointer-events: none;

  /* ✅ Ornament tint color (choose one) */
  background-color: rgba(var(--rgb-accent), 0.65);

  /* ✅ Mask tile */
  -webkit-mask-image: url("ornament_mask_v2.svg");
  mask-image: url("ornament_mask_v2.svg");

  /* ✅ FIX: „round“ statt „repeat“ gegen Nähte zwischen Tiles */
  -webkit-mask-repeat: round;
  mask-repeat: round;

  /* ✅ tile size */
  -webkit-mask-size: calc(var(--stage-w) * 0.070);
  mask-size: calc(var(--stage-w) * 0.070);

  -webkit-mask-position: 0 0;
  mask-position: 0 0;

  opacity: 0.18;
  z-index: 0;
}

/* =========================================================
   ORNAMENT (MASK) – only background bars (left/right/bottom)
   ========================================================= */

/* ✅ sicherstellen: pseudo-layer liegt über bar background */
.bar-left,
.bar-right,
.bar-bottom{
  position: relative;
  overflow: hidden;
}

/* ✅ Ornament layer (only these 3) */
.bar-left::before,
.bar-right::before,
.bar-bottom::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;

  /* ✅ Sichtbarkeit wie Debug, aber nicht so extrem */
  opacity: 0.32;

  /* ✅ gleiche Farbe wie vorher (nur token-basiert) */
  background-color: rgba(var(--rgb-white),0.85);

  /* ✅ Maske = Pattern */
  -webkit-mask-image: url("ornament_mask_v2.svg");
  mask-image: url("ornament_mask_v2.svg");

  /* ✅ FIX: „round“ statt „repeat“ gegen Nähte zwischen Tiles */
  -webkit-mask-repeat: round;
  mask-repeat: round;

  /* ✅ feste Tile-Size bleibt */
    /* ✅ Stage-based tile size (Design-Basis: 1280px → 90px) */
  -webkit-mask-size: calc(var(--stage-w) * (90 / 1280)) calc(var(--stage-w) * (90 / 1280));
  mask-size: calc(var(--stage-w) * (90 / 1280)) calc(var(--stage-w) * (90 / 1280));

  -webkit-mask-position: 0 0;
  mask-position: 0 0;

  z-index: 0;
}

/* ✅ falls in den Bars Inhalt ist: über Ornament */
.bar-left > *,
.bar-right > *,
.bar-bottom > *{
  position: relative;
  z-index: 1;
}

/* ✅ Lightmode: Ornament dunkel statt weiß */
html[data-theme="light"] .bar-left::before,
html[data-theme="light"] .bar-right::before,
html[data-theme="light"] .bar-bottom::before{
  background-color: rgba(0,0,0,0.55);
  opacity: 0.18;
}

/* =========================================================
   ORNAMENT OVERRIDE (temporary OFF)
   - lässt den Original-Code drin
   - entfernt nur die sichtbaren Ornamente
   - zum Zurückholen: diesen Block löschen oder auskommentieren
   ========================================================= */

#frame::before{
  opacity: 0 !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

.bar-left::before,
.bar-right::before,
.bar-bottom::before{
  opacity: 0 !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}