/* ===========================================================================
   Qamar — App-Oberfläche
   ---------------------------------------------------------------------------
   Nachbau der echten App. Alle Farben und Schriften sind unter `.qamar`
   gekapselt: die App bringt ihre eigene Bildsprache mit (Grün/Gold, Serifen)
   und darf sich weder mit der Website noch mit den anderen Apps vermischen.

   Rahmen und Schaufenster liegen in apps.css.
   =========================================================================== */

/* Serifenschrift der App — auf die tatsächlich benutzten Zeichen zugeschnitten */
@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/eb-garamond-400.woff2') format('woff2');
}

@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/eb-garamond-600.woff2') format('woff2');
}

/* --- App: Grundgerüst -----------------------------------------------------
   Der Verlauf über der Tab-Leiste (apps.css) braucht die Hintergrundfarbe
   der App — deshalb steht sie am Bildschirm, nicht erst an `.qamar`. */
.phone__screen[data-screen='qamar'] {
  --screen-fade: oklch(0.175 0.017 165);
}

.qamar {
  /* Die App seit „Design neu“ im dunklen Modus: tiefes Grün-Grau, Karten eine
     Stufe heller, Gold und Smaragd als Akzente. Fraunces und Manrope, wenn sie
     da sind; sonst die Ersatzschriften. */
  --q-bg: oklch(0.175 0.017 165);
  --q-surface: oklch(0.215 0.019 165);
  --q-surface-2: oklch(0.25 0.018 165);
  --q-line: oklch(1 0 0 / 11%);
  --q-line-soft: oklch(1 0 0 / 7%);
  --q-tint: oklch(1 0 0 / 4%);
  --q-green: oklch(0.72 0.12 162);
  --q-green-2: oklch(0.78 0.11 162);
  --q-mint: oklch(0.72 0.12 162);
  --q-gold: oklch(0.8 0.1 82);
  --q-gold-text: oklch(0.82 0.1 84);
  --q-teal: oklch(0.74 0.1 190);
  --q-text: oklch(0.95 0.008 120);
  --q-text-2: oklch(0.72 0.018 160);
  --q-text-3: oklch(0.58 0.016 160);
  --q-on-green: oklch(0.2 0.04 165);
  --q-head-from: oklch(0.29 0.05 162);
  --q-head-to: oklch(0.22 0.035 165);
  --q-head-text: oklch(0.97 0.01 95);
  --q-head-gold: oklch(0.88 0.09 88);
  --q-glass: oklch(0.23 0.02 165 / 72%);
  --q-shadow: 0 1px 0 rgb(255 255 255 / 0.03) inset, 0 12px 30px -20px rgb(0 0 0 / 0.6);

  /* Tageszeitfarben der fünf Gebete */
  --q-fajr: oklch(0.72 0.1 245);
  --q-dhuhr: oklch(0.82 0.13 85);
  --q-asr: oklch(0.75 0.13 60);
  --q-maghrib: oklch(0.68 0.15 30);
  --q-isha: oklch(0.66 0.13 290);

  --q-serif: 'Fraunces', 'EB Garamond', Georgia, 'Times New Roman', serif;
  --q-sans: 'Manrope', -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', system-ui, sans-serif;
  --q-arabic: 'Geeza Pro', 'Noto Naskh Arabic', 'Segoe UI', 'Times New Roman', serif;

  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  background: var(--q-bg);
  color: var(--q-text);
  font-family: var(--q-sans);
  font-size: 13px;
  line-height: 1.45;
  /* Auf schmalen Geräten ist der Bildschirm nur noch gut 250 px breit. Dann
     darf ein langes Wort (arabischer Vers, „nachgeholt“) umbrechen statt aus
     seiner Kachel und damit aus dem Telefonrahmen zu laufen. */
  overflow-wrap: break-word;
}

/* :where() trägt keine Spezifität bei. Ohne das würde dieser Reset (0,1,1)
   jede Komponentenregel wie .q-tile (0,1,0) schlagen und den Kacheln ihren
   Hintergrund nehmen. */
:where(.qamar button) {
  font-family: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

.qamar :focus-visible {
  outline: 2px solid var(--q-mint);
  outline-offset: 2px;
}

/* Kopfzeile */
.q-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-shrink: 0;
  padding: 8px 16px 8px;
}

.q-brand {
  display: flex;
  align-items: center;
  gap: 7px;
}

.q-brand__moon {
  color: var(--q-green);
}

.q-brand__name {
  font-family: var(--q-serif);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.q-brand__ar {
  font-family: var(--q-arabic);
  font-size: 11px;
  color: var(--q-gold-text);
}

.q-head__tools {
  display: flex;
  align-items: center;
  gap: 8px;
}

.q-search {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border: 1px solid var(--q-line);
  border-radius: 999px;
  background: var(--q-surface);
  font-size: 12px;
  color: var(--q-text-2);
}

.q-gear {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--q-line);
  border-radius: 50%;
  background: var(--q-surface);
  color: var(--q-text-2);
  transition: color 0.2s ease, border-color 0.2s ease;
}

/* Scrollbereich */
.q-body {
  flex: 1;
  min-height: 0;
  padding: 12px 14px 78px;
  overflow-y: auto;
  /* Waagerecht wird nur beschnitten, nicht gescrollt: sonst schiebt eine
     Wischbewegung die App seitlich unter das Gehäuse. */
  overflow-x: clip;
  scrollbar-width: thin;
  scrollbar-color: var(--q-line) transparent;
}

.q-body::-webkit-scrollbar {
  width: 4px;
}

.q-body::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background: var(--q-line);
}

.q-view {
  display: grid;
  /* `minmax(0, 1fr)` statt der Vorgabe `auto`: eine auto-Spalte wird nie
     schmaler als der breiteste unteilbare Inhalt. Auf schmalen Geräten wuchs
     die Spalte dadurch über den Bildschirm hinaus und die Kacheln schoben
     sich unter das Gehäuse. */
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  animation: qIn 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes qIn {
  from { opacity: 0; transform: translateY(8px); }
}

/* --- Bausteine ------------------------------------------------------------ */
.q-header {
  display: grid;
  gap: 0;
  padding: 2px 2px 0;
}

.q-header__salam {
  font-size: 10.5px;
  color: var(--q-text-2);
}

.q-header__name {
  margin-top: 2px;
  font-family: var(--q-serif);
  font-size: 29px;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.015em;
}

.q-header__date {
  margin-top: 3px;
  font-size: 12.5px;
  color: var(--q-text-2);
}

.q-header__hijri {
  color: var(--q-gold-text);
}

.q-level {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  margin-top: 13px;
  text-align: left;
  color: var(--q-text-2);
}

.q-level__label {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.q-level__bar {
  flex: 1;
  height: 4px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--q-surface-2);
}

.q-level__fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--q-green), var(--q-gold));
  transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.q-level__xp {
  flex-shrink: 0;
  font-size: 12.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--q-gold-text);
}

/* Nächstes Gebet: eine Zeile zwischen zwei feinen Linien */
.q-next {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
  margin-top: 14px;
  padding: 13px 0;
  border-top: 1px solid var(--q-line);
  border-bottom: 1px solid var(--q-line);
}

.q-next__label {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--q-text-2);
}

.q-next__name {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 5px;
}

.q-next__name b {
  font-family: var(--q-serif);
  font-size: 31px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.02em;
}

.q-next__name span {
  font-family: var(--q-arabic);
  font-size: 17px;
  line-height: 1;
  color: var(--q-gold-text);
}

.q-next__time {
  flex-shrink: 0;
  font-size: 19px;
  font-weight: 300;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

/* Vers des Tages */
.q-vers {
  position: relative;
  padding: 16px 14px;
  overflow: hidden;
  border: 1px solid color-mix(in oklab, var(--q-gold) 26%, transparent);
  border-radius: 18px;
  background: linear-gradient(135deg, color-mix(in oklab, var(--q-green) 7%, transparent), transparent 55%, color-mix(in oklab, var(--q-gold) 9%, transparent)), var(--q-surface);
  box-shadow: var(--q-shadow);
  text-align: center;
}

.q-vers__ar {
  font-family: var(--q-arabic);
  font-size: 21px;
  line-height: 1.8;
  color: var(--q-green);
  direction: rtl;
}

.q-vers__line {
  width: 70px;
  height: 1px;
  margin: 8px auto 10px;
  background: linear-gradient(90deg, transparent, color-mix(in oklab, var(--q-gold) 75%, transparent), transparent);
}

.q-vers__de {
  font-size: 12.5px;
  font-style: italic;
  line-height: 1.55;
}

.q-vers__src {
  margin-top: 6px;
  font-size: 9.5px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--q-gold-text);
}

/* Karte */
.q-card {
  overflow: hidden;
  border: 1px solid var(--q-line-soft);
  border-radius: 22px;
  background: var(--q-surface);
  box-shadow: var(--q-shadow);
}

.q-card--pad {
  padding: 15px 14px;
}

.q-card__title {
  padding: 15px 14px 0;
  font-family: var(--q-serif);
  font-size: 21px;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.q-card--pad .q-card__title {
  padding: 0;
}

/* Gebetsliste */
.q-filters {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 10px 14px 11px;
}

.q-round {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--q-line);
  border-radius: 50%;
  color: var(--q-green);
}

.q-place {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--q-line);
  border-radius: 999px;
  font-size: 12px;
  color: var(--q-text-2);
}

.q-count {
  margin-left: auto;
  padding: 3px 10px;
  border: 1px solid var(--q-line);
  border-radius: 999px;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--q-text-2);
}

.q-count.is-full {
  border-color: color-mix(in oklab, var(--q-gold) 50%, transparent);
  background: color-mix(in oklab, var(--q-gold) 15%, transparent);
  color: var(--q-gold-text);
}

/* Zeilen mit feiner Linie statt Kästen; das nächste Gebet ist golden hinterlegt */
.q-prayer {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 11px 14px;
  border-top: 1px solid var(--q-line-soft);
  text-align: left;
  transition: background 0.25s ease;
}

.q-prayer[data-prayer='fajr'] { --p: var(--q-fajr); }
.q-prayer[data-prayer='dhuhr'] { --p: var(--q-dhuhr); }
.q-prayer[data-prayer='asr'] { --p: var(--q-asr); }
.q-prayer[data-prayer='maghrib'] { --p: var(--q-maghrib); }
.q-prayer[data-prayer='isha'] { --p: var(--q-isha); }

.q-prayer.is-next {
  background: linear-gradient(90deg, color-mix(in oklab, var(--q-gold) 13%, transparent), transparent);
}

.q-prayer__icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: color-mix(in oklab, var(--p, var(--q-text-3)) 17%, transparent);
  color: var(--p, var(--q-text-3));
  transition: background 0.25s ease, color 0.25s ease;
}

.q-prayer.is-done .q-prayer__icon {
  background: color-mix(in oklab, var(--q-mint) 16%, transparent);
  color: var(--q-mint);
}

.q-prayer__body {
  flex: 1;
  min-width: 0;
}

.q-prayer__name {
  font-size: 14.5px;
  font-weight: 600;
}

.q-prayer__sub {
  margin-top: 1px;
  font-size: 11.5px;
  color: var(--q-text-2);
}

.q-prayer.is-done .q-prayer__sub {
  color: var(--q-mint);
}

.q-prayer__time {
  margin-top: 3px;
  font-size: 11px;
  color: var(--q-text-3);
}

.q-prayer__right {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--q-tint);
  font-size: 11.5px;
  color: var(--q-text-2);
  font-variant-numeric: tabular-nums;
}

.q-prayer.is-done .q-prayer__right {
  background: none;
  color: var(--q-text);
}

/* Kopffläche: tiefes Grün mit Goldschein, helle Schrift in jedem Modus */
.q-tile {
  display: block;
  width: 100%;
  padding: 16px;
  border-radius: 22px;
  background: radial-gradient(120% 90% at 100% 0%, color-mix(in oklab, var(--q-head-gold) 22%, transparent), transparent 55%), linear-gradient(160deg, var(--q-head-from), var(--q-head-to));
  box-shadow: var(--q-shadow);
  color: var(--q-head-text);
  text-align: left;
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.q-tile:hover {
  transform: translateY(-2px);
}

.q-tile__eyebrow {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 10.5px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--q-head-gold);
}

.q-tile__title,
.q-tile__text,
.q-tile__icon {
  display: block;
}

.q-tile__title {
  margin-top: 7px;
  font-family: var(--q-serif);
  font-size: 25px;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.015em;
}

.q-tile__text {
  margin-top: 6px;
  font-size: 12.5px;
  line-height: 1.5;
  color: color-mix(in oklab, var(--q-head-text) 82%, transparent);
}

.q-tile__icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-bottom: 12px;
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.12);
  color: var(--q-head-gold);
}

.q-tile__open {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 11px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--q-head-gold);
}

/* Hub: Zeilen wie in den Bereichen Quellen, Praxis und Wissen */
.q-hubhead {
  padding: 2px 2px 0;
}

.q-hubhead h2 {
  font-family: var(--q-serif);
  font-size: 27px;
  font-weight: 500;
  letter-spacing: -0.015em;
}

.q-hubhead p {
  margin-top: 3px;
  font-size: 12.5px;
  color: var(--q-text-2);
}

.q-hub {
  display: grid;
  overflow: hidden;
  border: 1px solid var(--q-line-soft);
  border-radius: 20px;
  background: var(--q-surface);
  box-shadow: var(--q-shadow);
}

.q-hub__row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 14px;
  border-top: 1px solid var(--q-line-soft);
  text-align: left;
}

.q-hub__row:first-child {
  border-top: none;
}

button.q-hub__row:hover {
  background: var(--q-tint);
}

.q-hub__icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background: color-mix(in oklab, var(--q-green) 13%, transparent);
  color: var(--q-green);
}

.q-hub__text {
  display: grid;
  flex: 1;
  min-width: 0;
}

.q-hub__text b {
  font-size: 14px;
  font-weight: 600;
}

.q-hub__text span {
  font-size: 11.5px;
  color: var(--q-text-2);
}

.q-hub__go {
  flex-shrink: 0;
  color: var(--q-text-3);
}

/* Zurück-Zeile */
.q-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 2px 0;
  font-size: 13px;
  color: var(--q-text-2);
}

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

/* Fortsetzen-Zeile */
.q-resume {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 11px 13px;
  border: 1px solid color-mix(in oklab, var(--q-green) 32%, transparent);
  border-radius: 16px;
  background: color-mix(in oklab, var(--q-green) 8%, var(--q-surface));
  text-align: left;
}

.q-resume__icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--q-green);
  color: var(--q-on-green);
}

.q-resume__label {
  font-size: 10.5px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--q-green-2);
}

.q-resume__value {
  font-family: var(--q-serif);
  font-size: 16px;
}

.q-resume__go {
  flex-shrink: 0;
  font-size: 12.5px;
  color: var(--q-green-2);
}

/* Suchfeld */
.q-input {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 13px;
  border: 1px solid var(--q-line);
  border-radius: 14px;
  color: var(--q-text-3);
}

.q-input input {
  flex: 1;
  min-width: 0;
  border: none;
  background: none;
  color: var(--q-text);
  font-family: inherit;
  font-size: 13px;
  outline: none;
}

.q-input input::placeholder {
  color: var(--q-text-3);
}

/* Surenliste */
.q-sura {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--q-line-soft);
  border-radius: 15px;
  background: var(--q-surface);
  text-align: left;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.q-sura:hover {
  border-color: color-mix(in oklab, var(--q-green) 40%, transparent);
  background: color-mix(in oklab, var(--q-green) 7%, transparent);
}

.q-sura__num {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--q-green);
  color: var(--q-on-green);
  font-family: var(--q-serif);
  font-size: 13px;
}

.q-sura__body {
  display: grid;
  gap: 1px;
  flex: 1;
  min-width: 0;
}

.q-sura__name {
  font-size: 14.5px;
  font-weight: 600;
}

.q-sura__meta {
  margin-top: 1px;
  font-size: 11px;
  color: var(--q-text-2);
}

.q-sura__ar {
  flex-shrink: 0;
  font-family: var(--q-arabic);
  font-size: 15px;
  color: var(--q-green-2);
  direction: rtl;
}

.q-empty {
  padding: 24px 12px;
  text-align: center;
  font-size: 12.5px;
  color: var(--q-text-3);
}

/* Versansicht */
.q-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.q-select {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  border: 1px solid var(--q-line);
  border-radius: 12px;
  font-size: 12.5px;
  color: var(--q-text);
}

.q-suranav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 4px;
}

.q-suranav__title {
  font-family: var(--q-serif);
  font-size: 25px;
}

.q-suranav__arrow {
  color: var(--q-text-2);
  padding: 4px;
}

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

.q-suranav__meta {
  margin-top: 1px;
  font-size: 12px;
  color: var(--q-text-2);
  text-align: center;
}

.q-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--q-line);
  border-radius: 14px;
}

.q-toggle button {
  padding: 8px;
  border-radius: 11px;
  font-size: 13px;
  color: var(--q-text-2);
  transition: background 0.22s ease, color 0.22s ease;
}

.q-toggle button.is-on {
  background: var(--q-green);
  color: var(--q-on-green);
  font-weight: 600;
}

.q-versebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.q-star {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--q-line);
  border-radius: 50%;
  color: var(--q-text-2);
  transition: color 0.22s ease, border-color 0.22s ease;
}

.q-star.is-on {
  border-color: var(--q-gold);
  color: var(--q-gold);
}

.q-verse {
  padding: 15px 14px;
  border: 1px solid var(--q-line-soft);
  border-radius: 18px;
  background: var(--q-surface);
}

.q-verse__ar {
  font-family: var(--q-arabic);
  font-size: 22px;
  line-height: 2.05;
  text-align: right;
  direction: rtl;
  color: var(--q-green-2);
}

.q-verse__tr {
  margin-top: 10px;
  font-size: 12.5px;
  font-style: italic;
  color: var(--q-text-2);
}

.q-verse__sep {
  height: 1px;
  margin: 12px 0;
  background: var(--q-line-soft);
}

.q-verse__label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 10.5px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--q-green-2);
}

.q-verse__de {
  margin-top: 7px;
  font-size: 14px;
  line-height: 1.55;
}

.q-listen {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 13px auto 0;
  padding: 8px 16px;
  border: 1px solid var(--q-line);
  border-radius: 12px;
  font-size: 12.5px;
  color: var(--q-text);
}

.q-listen__bars {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 12px;
}

.q-listen__bars i {
  width: 3px;
  height: 40%;
  border-radius: 2px;
  background: var(--q-text-2);
  transition: height 0.15s ease;
}

.q-listen.is-playing .q-listen__bars i {
  background: var(--q-mint);
  animation: qWave 0.85s ease-in-out infinite;
}

.q-listen.is-playing .q-listen__bars i:nth-child(2) { animation-delay: 0.12s; }
.q-listen.is-playing .q-listen__bars i:nth-child(3) { animation-delay: 0.24s; }
.q-listen.is-playing .q-listen__bars i:nth-child(4) { animation-delay: 0.36s; }

@keyframes qWave {
  0%, 100% { height: 30%; }
  50% { height: 100%; }
}

.q-listen__wrap {
  display: grid;
  justify-items: center;
}

.q-progress {
  width: 100%;
  height: 2px;
  margin-top: 10px;
  border-radius: 2px;
  background: var(--q-line);
  overflow: hidden;
}

.q-progress i {
  display: block;
  width: 0;
  height: 100%;
  background: var(--q-mint);
}

.q-prevnext {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.q-pn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 14px;
  border: 1px solid var(--q-line);
  border-radius: 12px;
  font-size: 12.5px;
  color: var(--q-text);
}

.q-pn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.q-pn__mid {
  font-size: 12.5px;
  color: var(--q-text-2);
}

.q-tafsir {
  padding: 15px 14px;
  border: 1px solid var(--q-line-soft);
  border-radius: 18px;
  background: color-mix(in oklab, var(--q-green) 6%, transparent);
}

.q-tafsir__title {
  margin-top: 8px;
  font-family: var(--q-serif);
  font-size: 18px;
}

.q-tafsir__text {
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--q-text);
}

/* Ganze Sure am Stück */
.q-whole {
  display: grid;
  gap: 10px;
}

.q-whole__row {
  display: flex;
  gap: 11px;
  padding: 11px 0;
  border-bottom: 1px solid var(--q-line-soft);
}

.q-whole__row:last-child {
  border-bottom: none;
}

.q-whole__num {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  margin-top: 3px;
  border: 1px solid color-mix(in oklab, var(--q-green) 50%, transparent);
  border-radius: 50%;
  font-family: var(--q-serif);
  font-size: 11px;
  color: var(--q-green-2);
}

.q-whole__body {
  flex: 1;
  min-width: 0;
}

.q-whole__ar {
  font-family: var(--q-arabic);
  font-size: 18px;
  line-height: 1.95;
  text-align: right;
  direction: rtl;
  color: var(--q-green-2);
}

.q-whole__de {
  margin-top: 5px;
  font-size: 12.5px;
  color: var(--q-text-2);
}

/* Kalender */
.q-cal {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 5px;
  margin-top: 12px;
}

.q-cal__dow {
  font-size: 10px;
  text-align: center;
  color: var(--q-text-3);
  padding-bottom: 3px;
}

.q-day {
  display: grid;
  place-items: center;
  gap: 3px;
  aspect-ratio: 1;
  border-radius: 10px;
  background: var(--q-tint);
  font-size: 11.5px;
  color: var(--q-text-2);
}

.q-day.is-today {
  background: var(--q-green);
  color: var(--q-on-green);
  font-weight: 600;
}

.q-day.is-full {
  background: color-mix(in oklab, var(--q-green) 22%, transparent);
  color: var(--q-text);
}

.q-day.is-empty {
  background: none;
}

.q-day i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.55;
}

/* Statistik */
.q-stat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
}

.q-stat {
  padding: 13px;
  border: 1px solid var(--q-line-soft);
  border-radius: 15px;
  background: var(--q-surface);
}

.q-stat__value {
  font-family: var(--q-serif);
  font-size: 24px;
}

.q-stat__label {
  margin-top: 1px;
  font-size: 11.5px;
  color: var(--q-text-2);
}

.q-bars {
  display: flex;
  align-items: flex-end;
  gap: 7px;
  height: 88px;
  margin-top: 12px;
}

.q-bars__col {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 5px;
  height: 100%;
}

.q-bars__fill {
  border-radius: 5px 5px 3px 3px;
  background: linear-gradient(180deg, var(--q-green-2), color-mix(in oklab, var(--q-green) 22%, transparent));
  transition: height 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.q-bars__label {
  font-size: 9.5px;
  text-align: center;
  color: var(--q-text-3);
}

/* --- Untere Navigation ---------------------------------------------------
   Eine durchsichtige Kapsel im Liquid-Glass-Stil, fünf Bereiche. */
.q-tabs {
  position: absolute;
  left: 8px;
  right: 8px;
  /* Platz für die Bedienleiste des Gehäuses, sonst liegt sie auf den Reitern */
  bottom: 20px;
  z-index: 5;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  padding: 4px;
  border: 1px solid var(--q-line);
  border-radius: 999px;
  background: var(--q-glass);
  backdrop-filter: blur(18px) saturate(1.5);
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
  box-shadow: 0 12px 30px -14px rgb(0 0 0 / 0.7), inset 0 1px 0 rgb(255 255 255 / 0.08);
}

.q-tab {
  display: grid;
  place-items: center;
  gap: 2px;
  padding: 6px 0 5px;
  border-radius: 999px;
  font-size: 9.5px;
  color: var(--q-text-2);
  transition: background 0.22s ease, color 0.22s ease, box-shadow 0.22s ease;
}

.q-tab[aria-selected='true'] {
  background: color-mix(in oklab, var(--q-green) 15%, var(--q-surface));
  box-shadow: 0 2px 8px -3px rgb(0 0 0 / 0.5), inset 0 0 0 1px color-mix(in oklab, var(--q-green) 22%, transparent);
  color: var(--q-green);
  font-weight: 600;
}

/* Hub-Zeilen ohne Ziel: ehrlich als „In der App“ gekennzeichnet */
.q-hub__soon {
  padding: 2px 8px;
  border: 1px solid var(--q-line);
  border-radius: 999px;
  font-size: 9.5px;
  letter-spacing: 0.04em;
  color: var(--q-text-3);
}

/* Qibla */
.q-qibla {
  display: grid;
  justify-items: center;
  text-align: center;
}

.q-qibla .q-card__title {
  justify-self: start;
}

.q-qibla__dial {
  position: relative;
  width: 150px;
  height: 150px;
  margin: 16px 0 12px;
  border: 1px solid var(--q-line);
  border-radius: 50%;
  background: radial-gradient(circle, var(--q-tint), transparent 70%);
}

.q-qibla__n {
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  font-weight: 600;
  color: var(--q-text-3);
}

.q-qibla__needle {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 3px;
  height: 58px;
  margin: -58px 0 0 -1.5px;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--q-gold), transparent);
  transform-origin: 50% 100%;
  transform: rotate(136deg);
}

.q-qibla__kaaba {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border-radius: 4px;
  background: var(--q-head-from);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--q-gold) 40%, transparent);
}

.q-qibla__deg {
  font-family: var(--q-serif);
  font-size: 22px;
}

.q-qibla__hint {
  margin-top: 4px;
  max-width: 28ch;
  font-size: 11.5px;
  color: var(--q-text-2);
}

/* Quiz */
.q-quiz__q {
  margin-top: 8px;
  font-family: var(--q-serif);
  font-size: 19px;
  font-weight: 500;
  line-height: 1.25;
}

.q-quiz__answers {
  display: grid;
  gap: 7px;
  margin-top: 12px;
}

.q-answer {
  padding: 10px 13px;
  border: 1px solid var(--q-line);
  border-radius: 14px;
  background: var(--q-surface);
  font-size: 13px;
  text-align: left;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.q-answer:not(:disabled):hover {
  border-color: var(--q-green);
}

.q-answer.is-right {
  border-color: var(--q-mint);
  background: color-mix(in oklab, var(--q-mint) 13%, var(--q-surface));
}

.q-answer.is-wrong {
  border-color: oklch(0.6 0.17 25);
  background: color-mix(in oklab, oklch(0.6 0.17 25) 10%, var(--q-surface));
}

.q-quiz__next {
  margin-top: 12px;
}

/* Karten des Tages */
.q-day-card {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px;
  overflow: hidden;
  border: 1px solid color-mix(in oklab, var(--c, var(--q-green)) 34%, transparent);
  border-radius: 18px;
  background: var(--q-surface);
  box-shadow: var(--q-shadow);
}

.q-day-card--teal { --c: var(--q-teal); }

.q-day-card__icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 13px;
  background: color-mix(in oklab, var(--c, var(--q-green)) 16%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--c, var(--q-green)) 30%, transparent);
  color: var(--c, var(--q-green));
}

.q-day-card__body {
  min-width: 0;
  flex: 1;
}

.q-day-card__label {
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c, var(--q-green));
}

.q-day-card__text {
  margin-top: 4px;
  font-size: 13px;
  line-height: 1.4;
}

.q-day-card__title {
  display: flex;
  align-items: baseline;
  gap: 7px;
  margin-top: 4px;
  font-family: var(--q-serif);
  font-size: 19px;
  font-weight: 500;
  line-height: 1.15;
}

.q-day-card__title span {
  font-family: var(--q-arabic);
  font-size: 15px;
  color: var(--q-text-2);
}

.q-day-card__sub {
  margin-top: 3px;
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--q-text-2);
}

.q-day-card__arrow {
  flex-shrink: 0;
  margin-top: 3px;
  color: var(--q-text-3);
}

/* Weiterlesen: Quran, Tafsir, Hadith in einer Karte */
.q-more {
  display: grid;
  overflow: hidden;
  border: 1px solid var(--q-line-soft);
  border-radius: 18px;
  background: var(--q-surface);
  box-shadow: var(--q-shadow);
}

.q-more__row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 11px 14px;
  border-top: 1px solid var(--q-line-soft);
  text-align: left;
}

.q-more__row:first-child {
  border-top: none;
}

button.q-more__row:hover {
  background: var(--q-tint);
}

.q-more__icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: linear-gradient(160deg, var(--q-head-from), var(--q-head-to));
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.08);
  color: var(--q-head-text);
}

.q-more__icon--gold {
  background: linear-gradient(135deg, var(--q-gold), color-mix(in oklab, var(--q-gold) 80%, black));
  color: oklch(0.2 0.03 80);
}

.q-more__icon--plain {
  background: color-mix(in oklab, var(--q-green) 12%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--q-green) 22%, transparent);
  color: var(--q-green);
}

.q-more__text {
  display: grid;
  min-width: 0;
  flex: 1;
}

.q-more__text b {
  font-family: var(--q-serif);
  font-size: 15px;
  font-weight: 500;
}

.q-more__text span {
  overflow: hidden;
  font-size: 11.5px;
  color: var(--q-text-2);
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .q-view,
  .q-listen.is-playing .q-listen__bars i {
    animation: none;
  }

  .q-xp__fill,
  .q-bars__fill,
  .q-tile {
    transition: none;
  }
}