/* Komponenten-Styles. Nur Token-Variablen aus tokens.css, keine Hex-Werte. */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--c-bg);
  color: var(--c-text);
  font: var(--weight-base) var(--text-base) / var(--leading-base) var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
/* Ornament als eigene Ebene, damit seine Deckkraft pro Design einstellbar ist */
body::before, .reader::before, .reader-preview::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image: var(--bg-pattern); background-size: 120px 120px; opacity: var(--bg-pattern-op);
}
.reader::before, .reader-preview::before { position: absolute; background-image: var(--c-reader-pattern); opacity: var(--reader-pattern-op); border-radius: inherit; }
button { font: inherit; color: inherit; }
a { color: inherit; }
h1, h2, h3, p { margin: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Layout ---------- */
.app { max-width: var(--max-width); margin: 0 auto; min-height: 100dvh; display: flex; flex-direction: column; }
.page { flex: 1; padding: var(--space-4) var(--gutter) calc(var(--tabbar-height) + var(--space-6) + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: var(--space-4); }
.page.no-tabs { padding-bottom: calc(var(--space-6) + env(safe-area-inset-bottom)); }
.stack { display: flex; flex-direction: column; gap: var(--space-3); }
.row { display: flex; align-items: center; gap: var(--space-2); }
.spread { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.muted { color: var(--c-text-muted); font-size: var(--text-sm); line-height: var(--leading-sm); }
.h1 { font-size: var(--text-xl); line-height: var(--leading-xl); font-weight: var(--weight-xl); }
.h2 { font-size: var(--text-lg); line-height: var(--leading-lg); font-weight: var(--weight-lg); }
.section-title { font-size: var(--text-xs); line-height: var(--leading-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--c-text-muted); }

/* ---------- Button ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 44px; padding: 0 var(--space-5); border-radius: var(--radius-pill); border: 0;
  font-weight: 600; cursor: pointer; text-decoration: none;
  transition: transform var(--motion-fast) var(--motion-ease), opacity var(--motion-fast);
}
.btn:active { transform: scale(.98); }
.btn:focus-visible, .ib:focus-visible, .card-btn:focus-visible, .tab:focus-visible, .seg button:focus-visible, .input:focus-visible {
  outline: 2px solid var(--c-accent); outline-offset: 2px;
}
.btn[disabled] { opacity: .4; cursor: not-allowed; }
.btn-primary { background: var(--c-accent); color: var(--c-on-accent); }
.btn-ink { background: var(--c-ink); color: var(--c-on-ink); }
.btn-done { background: var(--c-done); color: var(--c-on-done); }
.btn-secondary { background: var(--c-surface); color: var(--c-text); border: 1px solid var(--c-border-input); }
.btn-ghost { background: transparent; color: var(--c-accent); }
.btn-danger { background: var(--c-danger); color: var(--c-on-badge); }
.btn-lg { min-height: 52px; width: 100%; font-size: var(--text-base); }
.btn-sm { min-height: 32px; padding: 0 var(--space-3); font-size: var(--text-sm); }
.spin { width: 16px; height: 16px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(1turn); } }

.ib {
  width: 48px; height: 48px; border-radius: var(--radius-pill); display: inline-grid; place-items: center;
  border: 1px solid currentColor; background: transparent; cursor: pointer; flex-shrink: 0;
}
.ib.plain { border-color: transparent; width: 40px; height: 40px; }
.ib.fill { background: var(--c-reader-surface); color: var(--c-reader-text); border-color: transparent; }
.ib[disabled] { opacity: .35; cursor: not-allowed; }

/* ---------- Header ---------- */
.greet { display: flex; align-items: center; gap: var(--space-3); }
.avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--c-accent-soft); color: var(--c-accent); display: grid; place-items: center; font-weight: 700; flex-shrink: 0; }
.streak-badge { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: var(--radius-pill); background: var(--c-metric-time-soft); color: var(--c-metric-time); font-weight: 700; font-size: var(--text-sm); }

/* ---------- Wochenleiste ---------- */
.week { list-style: none; margin: 0; display: flex; justify-content: space-between; padding: var(--space-3); background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-lg); }
.week li { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 11px; color: var(--c-text-muted); }
.day { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-size: var(--text-xs); font-weight: 600; border: 1.5px solid var(--c-border); color: var(--c-text-muted); }
.day.done { background: var(--c-done); border-color: var(--c-done); color: var(--c-on-done); }
.day.partial { border-color: var(--c-done); color: var(--c-text); }
.day.today { box-shadow: 0 0 0 2px var(--c-bg), 0 0 0 4px var(--c-accent); }
.day.future { opacity: .5; }

/* ---------- Ziel-Karte ---------- */
.goal { background: var(--c-accent-soft); border-radius: var(--radius-xl); padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); box-shadow: var(--shadow-card); }
.goal.met { background: var(--c-metric-pages-soft); }
.bar { height: 8px; border-radius: var(--radius-pill); background: var(--c-surface); overflow: hidden; }
.bar > i { display: block; height: 100%; background: var(--c-accent); border-radius: inherit; transition: width var(--motion-slow) var(--motion-ease); }
.bar.full > i { background: var(--c-done); }

/* ---------- Segment ---------- */
.seg { display: flex; background: var(--c-accent-soft); border-radius: var(--radius-pill); padding: 4px; }
.seg button { flex: 1; border: 0; background: transparent; min-height: 36px; border-radius: var(--radius-pill); font-size: var(--text-sm); color: var(--c-text-muted); cursor: pointer; }
.seg button[aria-selected="true"] { background: var(--c-surface); color: var(--c-text); font-weight: 600; box-shadow: var(--shadow-card); }

/* ---------- Kacheln ---------- */
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.tile { background: var(--c-surface); border: 1px solid; border-radius: var(--radius-lg); padding: var(--space-4); display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.tile .ti { width: 40px; height: 40px; border-radius: var(--radius-md); display: grid; place-items: center; }
.tile .tl { font-size: var(--text-sm); color: var(--c-text-muted); }
.tile strong { font-size: var(--text-lg); line-height: var(--leading-lg); }
.t-hasanat { border-color: var(--c-metric-hasanat-soft); } .t-hasanat .ti { background: var(--c-metric-hasanat-soft); color: var(--c-metric-hasanat); }
.t-verses { border-color: var(--c-metric-verses-soft); } .t-verses .ti { background: var(--c-metric-verses-soft); color: var(--c-metric-verses); }
.t-time { border-color: var(--c-metric-time-soft); } .t-time .ti { background: var(--c-metric-time-soft); color: var(--c-metric-time); }
.t-pages { border-color: var(--c-metric-pages-soft); } .t-pages .ti { background: var(--c-metric-pages-soft); color: var(--c-metric-pages); }

/* ---------- Karten ---------- */
.card { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-lg); padding: var(--space-4); }
.card-btn { display: flex; width: 100%; text-align: left; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-lg); padding: var(--space-4); gap: var(--space-3); align-items: center; cursor: pointer; text-decoration: none; }
.card-btn[aria-checked="true"] { border: 2px solid var(--c-accent); padding: calc(var(--space-4) - 1px); background: var(--c-accent-soft); }
.radio-dot { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--c-border-input); flex-shrink: 0; display: grid; place-items: center; }
[aria-checked="true"] .radio-dot { border-color: var(--c-accent); background: var(--c-accent); color: var(--c-on-accent); }
.ar { font-family: var(--font-arabic); direction: rtl; }

/* ---------- Surah-Liste ---------- */
.list { display: flex; flex-direction: column; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-lg); overflow: hidden; }
.list-row { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border: 0; border-bottom: 1px solid var(--c-border); background: transparent; text-align: left; cursor: pointer; text-decoration: none; min-height: 60px; }
.list-row:last-child { border-bottom: 0; }
.list-row:focus-visible { outline: 2px solid var(--c-accent); outline-offset: -2px; }
.num { width: 36px; height: 36px; border-radius: var(--radius-md); background: var(--c-accent-soft); color: var(--c-accent); display: grid; place-items: center; font-weight: 700; font-size: var(--text-sm); flex-shrink: 0; }
.list-row .ar { margin-left: auto; font-size: 22px; }
.input { width: 100%; min-height: 48px; border-radius: var(--radius-md); border: 1px solid var(--c-border-input); padding: 0 var(--space-4); background: var(--c-surface); color: var(--c-text); font: inherit; }
label.field { display: flex; flex-direction: column; gap: 6px; font-size: var(--text-sm); font-weight: 600; }

/* ---------- Tab-Bar ---------- */
.tabs { position: fixed; bottom: 0; left: 0; right: 0; z-index: 10; background: var(--c-surface); border-top: 1px solid var(--c-border); padding-bottom: env(safe-area-inset-bottom); }
.tabs ul { list-style: none; margin: 0 auto; padding: 0; max-width: var(--max-width); height: var(--tabbar-height); display: flex; justify-content: space-around; align-items: center; }
.tab { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 11px; color: var(--c-text-muted); text-decoration: none; position: relative; padding: 6px 8px; border-radius: var(--radius-md); }
.tab[aria-current="page"] { color: var(--c-accent); font-weight: 700; }

/* ---------- Reader ---------- */
.reader { background: var(--c-reader-bg); color: var(--c-reader-translation); min-height: 100dvh; position: relative; isolation: isolate; }
.reader .app { padding: var(--space-3) var(--gutter) calc(var(--space-4) + env(safe-area-inset-bottom)); gap: var(--space-3); }
.rtop { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.pills { display: flex; gap: 6px; }
.pill { display: inline-flex; gap: 4px; align-items: center; min-height: 28px; padding: 0 10px; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--c-reader-translation) 12%, transparent); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.goalbar { display: flex; align-items: center; gap: var(--space-2); border-radius: var(--radius-md); padding: 10px 14px; font-weight: 700; background: color-mix(in srgb, var(--c-reader-translation) 12%, transparent); }
.goalbar.met { background: var(--c-done); color: var(--c-on-done); }
.goalbar .bar { flex: 1; height: 6px; background: color-mix(in srgb, var(--c-reader-translation) 20%, transparent); }
.goalbar.met .bar { display: none; }
.verse { background: var(--c-reader-surface); color: var(--c-reader-text); border-radius: var(--radius-lg); padding: var(--space-4) var(--space-5) var(--space-5); }
.vh { display: flex; justify-content: space-between; align-items: center; color: var(--c-reader-muted); font-size: 13px; }
.vh b { color: var(--c-reader-text); display: block; text-align: center; font-size: var(--text-sm); }
.basmala { text-align: center; font-size: 24px; line-height: 48px; color: var(--c-reader-muted); margin-top: var(--space-2); }
.verse .ar { font-size: var(--quran-size, 30px); line-height: 2.1; text-align: center; margin-top: var(--space-2); word-spacing: 2px; }
.tr { font-size: var(--tr-size, var(--text-base)); line-height: 1.65; }
.verse { border: 1px solid var(--c-reader-border); }
.reader .ib.fill { box-shadow: 0 0 0 1px var(--c-reader-border); }
.rnav { display: flex; justify-content: space-between; align-items: center; margin-top: auto; padding-top: var(--space-4); }
.reader .ib { color: var(--c-reader-translation); }
.reader .ib.fill { color: var(--c-reader-text); }
.reader .toast { top: calc(var(--space-4) + env(safe-area-inset-top)); bottom: auto; }
.reader-scroll { flex: 1; display: flex; flex-direction: column; gap: var(--space-3); touch-action: pan-y; }
.slide-in { animation: slide var(--motion-base) var(--motion-ease); }
@keyframes slide { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: none; } }
.src { font-size: 11px; opacity: .7; }

/* ---------- Sheet / Toast ---------- */
.scrim { position: fixed; inset: 0; background: var(--c-scrim); z-index: 20; display: flex; align-items: flex-end; justify-content: center; animation: fade var(--motion-base); }
@keyframes fade { from { opacity: 0; } }
.sheet { width: 100%; max-width: var(--max-width); background: var(--c-surface); color: var(--c-text); border-radius: var(--radius-xl) var(--radius-xl) 0 0; padding: var(--space-6) var(--gutter) calc(var(--space-6) + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: var(--space-4); animation: up var(--motion-base) var(--motion-ease); }
@keyframes up { from { transform: translateY(24px); opacity: 0; } }
.toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(var(--tabbar-height) + var(--space-4) + env(safe-area-inset-bottom)); z-index: 30; display: flex; align-items: center; gap: var(--space-3); background: var(--c-ink); color: var(--c-on-ink); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); width: calc(100% - 2 * var(--gutter)); max-width: calc(var(--max-width) - 2 * var(--gutter)); font-size: var(--text-sm); box-shadow: var(--shadow-pop); }
.toast button { margin-left: auto; background: none; border: 0; color: inherit; text-decoration: underline; text-underline-offset: 3px; font-weight: 700; cursor: pointer; padding: 6px; min-height: 44px; }

/* ---------- Zustände ---------- */
.sk { background: linear-gradient(90deg, var(--c-border), var(--c-bg), var(--c-border)); background-size: 200% 100%; animation: shimmer 1.4s infinite; border-radius: var(--radius-lg); }
@keyframes shimmer { to { background-position: -200% 0; } }
.empty { text-align: center; padding: var(--space-8) var(--space-4); display: flex; flex-direction: column; align-items: center; gap: var(--space-3); color: var(--c-text-muted); }
.error { background: color-mix(in srgb, var(--c-danger) 10%, var(--c-surface)); color: var(--c-danger); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); font-size: var(--text-sm); }
.hero { display: flex; flex-direction: column; gap: var(--space-4); padding-top: var(--space-8); }
.hero-mark { width: 64px; height: 64px; border-radius: var(--radius-lg); background: var(--c-accent); color: var(--c-on-accent); display: grid; place-items: center; }

/* ---------- Erinnerung (S03) ---------- */
.field-legend { font-size: var(--text-sm); font-weight: 600; margin-bottom: 6px; padding: 0; }
.day-toggles { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.day-toggle { min-height: 44px; border-radius: var(--radius-md); border: 1px solid var(--c-border-input); background: var(--c-surface); color: var(--c-text-muted); font-weight: 600; cursor: pointer; }
.day-toggle.on { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-on-accent); }
.day-toggle:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }
.card ol li { margin: 2px 0; }

/* ---------- Fortschritt (S11, S12) ---------- */
.cal { width: 100%; border-collapse: separate; border-spacing: 0 4px; text-align: center; }
.cal th { font-size: var(--text-xs); font-weight: 600; color: var(--c-text-muted); padding-bottom: 4px; }
.cal-day { width: 34px; height: 34px; margin: 0 auto; border-radius: 50%; display: grid; place-items: center; font-size: var(--text-sm); color: var(--c-text-muted); border: 1.5px solid transparent; }
.cal-day.done { background: var(--c-done); color: var(--c-on-done); }
.cal-day.partial { border-color: var(--c-done); color: var(--c-text); }
.cal-day.future { opacity: .45; }
.cal-day.today { box-shadow: 0 0 0 2px var(--c-surface), 0 0 0 4px var(--c-accent); }
.cal-day.sm { width: 14px; height: 14px; display: inline-block; vertical-align: -2px; margin-right: 4px; }
.legend { display: flex; gap: var(--space-4); font-size: var(--text-xs); color: var(--c-text-muted); }
.seg-sm button { min-height: 32px; padding: 0 var(--space-3); font-size: var(--text-xs); white-space: nowrap; }
.chart-wrap { position: relative; }
.chart-wrap svg { display: block; overflow: visible; }
.chart-wrap .grid { stroke: var(--c-border); stroke-width: 1; }
.chart-wrap .axis { fill: var(--c-text-muted); font-size: 10px; font-family: var(--font-sans); }
.chart-wrap .bar-mark { fill: var(--c-metric-verses); transition: opacity var(--motion-fast); }
.chart-wrap .bar-mark.active { opacity: .75; }
.chart-wrap .goal-line { stroke: var(--c-text-muted); stroke-width: 1.5; stroke-dasharray: 4 4; }
.tip { position: absolute; top: 0; transform: translate(-50%, -100%); background: var(--c-ink); color: var(--c-on-ink); padding: 6px 10px; border-radius: var(--radius-sm); font-size: var(--text-xs); display: flex; flex-direction: column; white-space: nowrap; pointer-events: none; box-shadow: var(--shadow-pop); }
.data-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); margin-top: var(--space-2); }
.data-table th, .data-table td { text-align: left; padding: 6px 4px; border-bottom: 1px solid var(--c-border); }
.data-table td:nth-child(n+2), .data-table th:nth-child(n+2) { text-align: right; font-variant-numeric: tabular-nums; }
details summary { cursor: pointer; }
.kv { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); margin: 0; }
.kv div { display: flex; flex-direction: column; }
.kv dt { font-size: var(--text-sm); color: var(--c-text-muted); }
.kv dd { margin: 0; font-size: var(--text-lg); font-weight: 700; font-variant-numeric: tabular-nums; }
a.streak-badge { text-decoration: none; }

/* ---------- Geräte verbinden ---------- */
.link-code { font-size: var(--text-xl); line-height: var(--leading-xl); font-weight: 700; letter-spacing: .12em; font-variant-numeric: tabular-nums; font-family: var(--font-mono); }
.link-input { font-size: var(--text-lg); letter-spacing: .12em; text-transform: uppercase; font-family: var(--font-mono); }
.check-row { display: flex; gap: var(--space-3); align-items: flex-start; font-size: var(--text-sm); line-height: var(--leading-sm); cursor: pointer; }
.check-row input { width: 20px; height: 20px; margin: 0; flex-shrink: 0; accent-color: var(--c-accent); }
.card-btn[disabled] { opacity: .6; cursor: progress; }

/* ---------- Darstellung ---------- */
.seg button[aria-checked="true"] { background: var(--c-surface); color: var(--c-text); font-weight: 600; box-shadow: var(--shadow-card); }
.slider-row { gap: var(--space-3); }
.slider-row input[type="range"] { flex: 1; min-height: 44px; accent-color: var(--c-accent); margin: 0; }
.slider-row input[type="range"]:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }
.slider-a { color: var(--c-text-muted); font-weight: 600; width: 16px; text-align: center; }
.slider-a.sm { font-size: var(--text-xs); }
.slider-a.lg { font-size: var(--text-lg); }
.reader-preview { background: var(--c-reader-bg); position: relative; isolation: isolate; color: var(--c-reader-translation); border-radius: var(--radius-lg); padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); }
.reader-preview .verse { padding: var(--space-3) var(--space-4); }
.reader-preview .verse .ar { margin-top: 0; }
.sheet .stack .field-legend { color: var(--c-text); }
/* Muster-Designs: drei kleine Quadrate nebeneinander, Name darunter */
.dz-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4) var(--space-3); }
.dz-tile { display: flex; flex-direction: column; align-items: center; gap: 6px; background: none; border: 0; padding: 0; cursor: pointer; color: var(--c-text); min-width: 0; }
.dz-sq { position: relative; width: 100%; aspect-ratio: 1; border-radius: var(--radius-md); background-size: 100% 100%; border: 1px solid var(--c-border); box-shadow: var(--shadow-card); }
.dz-standard { background: linear-gradient(135deg, var(--c-light-bg) 50%, var(--c-dark-bg) 50%); }
.dz-tile[aria-checked="true"] .dz-sq { box-shadow: 0 0 0 2px var(--c-bg), 0 0 0 4px var(--c-accent); }
.dz-check { position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--c-accent); color: var(--c-on-accent); }
.dz-name { font-size: var(--text-xs); line-height: var(--leading-xs); font-weight: 600; text-align: center; overflow-wrap: anywhere; }
.dz-tile[aria-checked="true"] .dz-name { color: var(--c-accent); }
.dz-tile:focus-visible { outline: none; }
.dz-tile:focus-visible .dz-sq { outline: 2px solid var(--c-accent); outline-offset: 4px; }
/* ---------- Audio ---------- */
.rbottom { margin-top: auto; display: flex; flex-direction: column; gap: var(--space-3); padding-top: var(--space-4); }
.rbottom .rnav { margin-top: 0; padding-top: 0; }
.audiobar { display: flex; align-items: center; gap: var(--space-3); padding: 6px 6px 6px 6px; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--c-reader-translation) 10%, transparent); }
.audiobar .play { width: 44px; height: 44px; }
.audio-meta { flex: 1; line-height: 1.25; }
.audio-meta strong { font-size: var(--text-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.audio-sub { font-size: var(--text-xs); opacity: .8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.audiobar .spin { width: 18px; height: 18px; }
.verse.playing { box-shadow: 0 0 0 3px var(--c-done); }
.ib.aa { font-weight: 700; font-size: var(--text-base); letter-spacing: -.02em; }
.scrim-light { background: color-mix(in srgb, var(--c-scrim) 35%, transparent); }

/* ---------- Familie ---------- */
.fam-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.fam-row { display: flex; flex-direction: column; gap: var(--space-3); }
.fam-name { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; overflow-wrap: anywhere; }
.chip { font-size: var(--text-xs); font-weight: 600; padding: 2px 8px; border-radius: var(--radius-pill); background: var(--c-accent-soft); color: var(--c-accent); }
.fam-status { font-size: var(--text-sm); color: var(--c-text-muted); display: inline-flex; align-items: center; gap: 4px; }
.fam-status.met { color: var(--c-metric-pages); font-weight: 600; }
.fam-week { list-style: none; margin: 0; padding: 0 0 0 52px; display: flex; gap: 6px; }
.fam-week .cal-day.sm { width: 18px; height: 18px; margin: 0; border-color: var(--c-border); }
.fam-week .cal-day.sm.done, .fam-week .cal-day.sm.partial { border-color: var(--c-done); border-width: 2px; }
.fam-remove { align-self: flex-start; padding-left: 52px; }
.fam-nudge { align-self: flex-start; margin-left: 52px; }

/* ---------- Profile ---------- */
.profile-row { display: flex; flex-direction: column; gap: var(--space-2); }
.profile-row.current { border-color: var(--c-accent); }
.profile-main { display: flex; align-items: center; gap: 12px; width: 100%; background: none; border: 0; padding: 0; cursor: pointer; color: inherit; min-height: 44px; }
.profile-main[disabled] { cursor: default; opacity: 1; }
.profile-main:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 4px; border-radius: var(--radius-md); }
a.avatar-link { text-decoration: none; }
a.avatar-link:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }

/* ---------- Challenges ---------- */
.chip-done { background: var(--c-metric-pages-soft); color: var(--c-metric-pages); display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.challenge.done { border-color: var(--c-metric-pages-soft); }
.challenge .bar { background: var(--c-border); }

/* ---------- Offline ---------- */
.offline-bar { display: flex; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-2) var(--gutter); background: var(--c-ink); color: var(--c-on-ink); font-size: var(--text-sm); font-weight: 600; position: sticky; top: 0; z-index: 15; }
.offline-note { display: flex; align-items: center; gap: var(--space-2); }
.reader-offline { justify-content: center; font-size: var(--text-xs); }
.list-row.dim { opacity: .45; }

/* ---------- Hifz ---------- */
.hz-card { display: flex; align-items: center; gap: var(--space-4); text-decoration: none; color: inherit; }
.hz-card:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }
.hz-ring { position: relative; flex-shrink: 0; }
.hz-ring svg { display: block; }
.hz-ring-track { fill: none; stroke: var(--c-surface); stroke-width: 8; }
.hz-card .hz-ring-track { stroke: var(--c-accent-soft); }
.hz-ring-fill { fill: none; stroke: var(--c-accent); stroke-width: 8; stroke-linecap: round; transition: stroke-dashoffset var(--motion-slow) var(--motion-ease); }
.hz-ring-fill.full { stroke: var(--c-done); }
.hz-ring-label { position: absolute; inset: 0; display: grid; place-items: center; font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.hz-hero .btn-lg { margin-top: var(--space-2); }
.hz-missed p { font-size: var(--text-base); }
.hz-missed .card-btn { justify-content: space-between; }
.hz-juz { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.hz-juz-cell {
  width: 100%; aspect-ratio: 1; min-height: 44px; border-radius: var(--radius-md); border: 1px solid var(--c-border); cursor: pointer;
  background: linear-gradient(to top, var(--c-done) var(--p, 0%), var(--c-surface) var(--p, 0%));
  color: var(--c-text); font-weight: 700; font-size: var(--text-sm); font-variant-numeric: tabular-nums;
}
.hz-juz-cell.full { color: var(--c-on-done); border-color: var(--c-done); }
.hz-juz-cell:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }
.hz-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.hz-steps i { height: 4px; border-radius: var(--radius-pill); background: var(--c-border); }
.hz-steps i.on { background: var(--c-accent); }
.hz-actions { display: flex; gap: var(--space-3); margin-top: var(--space-2); }
.hz-actions .btn { min-height: 52px; }
.hz-marklist { max-height: 320px; overflow: auto; gap: var(--space-2); padding-top: var(--space-2); }
.hz-calc { gap: var(--space-2); }
.hz-word {
  font: inherit; line-height: inherit; color: inherit; background: transparent; border: 0; padding: 0; margin: 0;
  border-radius: 8px; cursor: pointer; vertical-align: baseline;
  transition: color var(--motion-base) var(--motion-ease), background-color var(--motion-base) var(--motion-ease);
}
.hz-word.off { color: transparent; background: color-mix(in srgb, var(--c-reader-muted) 22%, transparent); }
.verse .ar .hz-word { line-height: 1.5; vertical-align: middle; }
.reader .rbottom.hz-bottom { position: sticky; bottom: 0; background: var(--c-reader-bg); padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom)); z-index: 2; }
.hz-goalcard .bar { background: var(--c-accent-soft); }
.hz-missed .card-btn > svg, .hz-missed .card-btn > .spin, .hz-card > span:last-child { flex-shrink: 0; }
.hz-word:focus-visible { outline: 2px solid var(--c-done); outline-offset: 2px; }
.hz-rate { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--space-2); }
.hz-rate .btn { min-height: 56px; padding: 0 var(--space-2); }
.hz-play { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.hz-plan { margin: 0; padding-left: 1.2em; display: flex; flex-direction: column; gap: var(--space-2); line-height: 1.5; }
.hz-intro { padding-top: var(--space-6); gap: var(--space-5); }
.hz-alhamdulillah { font-family: var(--font-arabic); font-size: 40px; line-height: 2; text-align: center; }
.hz-done { align-items: center; text-align: center; padding-top: var(--space-6); }
.hz-done .hz-plan { text-align: left; }
.reader .hz-on-dark, .reader .hz-play .muted, .reader .hz-intro .muted { color: var(--c-reader-translation); }
.reader .muted.hz-on-dark, .reader .hz-play .muted { opacity: .85; }
.reader .btn-ghost.hz-on-dark { color: var(--c-reader-translation); text-decoration: underline; text-underline-offset: 3px; }
.reader .rtop .pill { white-space: nowrap; }
.hz-progress { padding: 8px 12px; }
/* Juz-Ziel */
.hz-fieldset { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.hz-stepper { display: flex; align-items: center; gap: var(--space-3); background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-lg); padding: var(--space-3); }
.hz-stepper .ib { color: var(--c-text); border-color: var(--c-border-input); }
.hz-stepper-value { flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; min-width: 0; }
.hz-stepper-value strong { font-size: var(--text-lg); line-height: var(--leading-lg); font-variant-numeric: tabular-nums; }
.hz-pm { font-size: 24px; line-height: 1; font-weight: 600; }
.hz-chips { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.hz-chips .day-toggle { padding: 0 2px; white-space: nowrap; font-size: var(--text-sm); }
.hz-juzdates { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-lg); padding: var(--space-3) var(--space-4); }
.hz-goalcard .hz-juzdates { background: transparent; padding: var(--space-2) 0 0; border: 0; border-top: 1px solid var(--c-border); border-radius: 0; }
.hz-juzdates summary { min-height: 32px; display: flex; align-items: center; gap: 6px; }
.hz-juzlist { list-style: none; margin: var(--space-2) 0 0; padding: 0; display: flex; flex-direction: column; max-height: 360px; overflow: auto; }
.hz-juzlist li { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) 0; border-bottom: 1px solid var(--c-border); }
.hz-juzlist li:last-child { border-bottom: 0; }
.hz-juzdate { font-weight: 600; font-size: var(--text-sm); white-space: nowrap; font-variant-numeric: tabular-nums; }
.hz-juz-cell.out { opacity: .4; }
.hz-juz-cell.in { border-color: var(--c-accent); }
.hz-juz-cell.in.full { border-color: var(--c-done); }
/* Mehrere Erinnerungen */
.hz-times { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.hz-time { display: flex; align-items: center; gap: var(--space-2); }
.hz-time .input { flex: 1; font-variant-numeric: tabular-nums; }
.hz-time .ib.plain { color: var(--c-text-muted); }
.hz-add { align-self: flex-start; }

/* ---------- Khatm ---------- */
span.hz-juz-cell { display: grid; place-items: center; cursor: default; }

/* ---------- Ramadan ---------- */
/* Countdown mit Halbmond */
.rm-count-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.rm-insha { font-weight: 700; color: var(--c-metric-time); font-style: italic; }
.rm-crescent { flex-shrink: 0; overflow: visible; }
.rm-moon-a { stop-color: var(--c-sea-sun); }
.rm-moon-b { stop-color: color-mix(in srgb, var(--c-sea-sun) 60%, var(--c-metric-time)); }
.rm-glow-a { stop-color: var(--c-sea-sun); stop-opacity: .45; }
.rm-glow-b { stop-color: var(--c-sea-sun); stop-opacity: 0; }
.rm-glow { animation: rm-glow 3.2s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: center; }
@keyframes rm-glow { from { opacity: .55; transform: scale(.92); } to { opacity: 1; transform: scale(1.04); } }
.rm-moon { filter: drop-shadow(0 2px 4px color-mix(in srgb, var(--c-metric-time) 35%, transparent)); }
.rm-star { fill: var(--c-sea-sun); stroke: color-mix(in srgb, var(--c-sea-sun) 50%, var(--c-metric-time)); stroke-width: .6; transform-box: fill-box; transform-origin: center; animation: rm-tw 2.4s ease-in-out infinite alternate; }
.rm-star.s2 { animation-delay: .8s; }
.rm-star.s3 { animation-delay: 1.6s; }
@keyframes rm-tw { from { opacity: .35; transform: scale(.7); } to { opacity: 1; transform: scale(1.1); } }
.rm-big { font-size: 34px; line-height: 40px; font-weight: 600; margin: 0; }
.rm-big b { font-size: 56px; line-height: 60px; font-weight: 800; font-variant-numeric: tabular-nums; }
.rm-dates { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); margin: 0; }
.rm-dates div { display: flex; flex-direction: column; }
.rm-dates dt { font-size: var(--text-xs); color: var(--c-text-muted); }
.rm-dates dd { margin: 0; font-weight: 700; font-size: var(--text-sm); }
.rm-prayers { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.rm-prayers li { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) 0; border-bottom: 1px solid var(--c-border); font-weight: 600; }
.rm-prayers li:last-child { border-bottom: 0; }
.rm-prayers li .muted { margin-left: auto; font-weight: 400; }
.rm-check { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--c-border-input); display: grid; place-items: center; flex-shrink: 0; }
.rm-prayers li.done .rm-check { background: var(--c-done); border-color: var(--c-done); color: var(--c-on-done); }
.rm-lastten { display: flex; flex-direction: column; gap: 4px; border-color: var(--c-accent); }
.hz-juz-cell.rm-today { box-shadow: 0 0 0 2px var(--c-bg), 0 0 0 4px var(--c-accent); }

/* ---------- Wort für Wort ---------- */
.wbw-word {
  font: inherit; line-height: inherit; color: inherit; background: transparent; border: 0; padding: 0 2px; margin: 0;
  border-radius: 8px; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background-color var(--motion-fast) var(--motion-ease);
}
.wbw-word.active { background: color-mix(in srgb, var(--c-done) 28%, transparent); }
@media (hover: hover) { .wbw-word:hover { background: color-mix(in srgb, var(--c-done) 18%, transparent); } }
.wbw-lines .wbw-ar { line-height: 2.1; }
.wbw-word:focus-visible { outline: 2px solid var(--c-done); outline-offset: 1px; }
.wbw-lines { line-height: 1.6 !important; }
.wbw-lines .wbw-word { display: inline-flex; flex-direction: column; align-items: center; vertical-align: top; padding: 4px 4px 6px; margin: 2px 1px; }
.wbw-mean {
  font-family: var(--font-sans); font-size: 12px; line-height: 1.25; font-weight: 500; color: var(--c-reader-muted);
  max-width: 7.5em; white-space: normal; text-align: center; margin-top: 0;
}
.wbw-sheet { gap: var(--space-3); }
.wbw-big { font-family: var(--font-arabic); font-size: 48px; line-height: 1.7; text-align: center; margin: 0; }
.wbw-translit { text-align: center; font-style: italic; color: var(--c-text-muted); margin: 0; }
.wbw-meaning { text-align: center; font-size: var(--text-xl); line-height: var(--leading-xl); font-weight: 700; margin: 0; }
.wbw-nav { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }

/* ---------- Suchen im Quran ---------- */
.sr-seg button { padding: 0 4px; white-space: nowrap; }
.sr-form { position: relative; }
.sr-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--c-text-muted); display: grid; pointer-events: none; }
.sr-input { padding-left: 44px; font-size: var(--text-base); }
.sr-input[dir="rtl"] { font-family: var(--font-arabic); font-size: 20px; }
.sr-examples { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.sr-chip { border: 0; cursor: pointer; min-height: 36px; padding: 0 var(--space-3); font-size: var(--text-sm); }
.sr-chip:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }
.sr-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.sr-hit { display: flex; flex-direction: column; gap: var(--space-3); text-decoration: none; color: var(--c-text); }
.sr-hit:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }
.sr-hit .muted { font-weight: 400; }
.sr-ar { font-size: 24px; line-height: 2; text-align: right; }
.sr-tr { line-height: 1.6; }
mark.hl { background: color-mix(in srgb, var(--c-accent) 34%, transparent); color: inherit; border-radius: 4px; padding: 0 1px; }

/* ---------- Morgen- und Abend-Adhkar ---------- */
.az-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.az-card { display: flex; flex-direction: column; gap: var(--space-3); scroll-margin-top: var(--space-6); }
.az-card.current { border-color: var(--c-accent); box-shadow: 0 0 0 1px var(--c-accent); }
.az-donechip { border: 0; cursor: pointer; min-height: 32px; display: inline-flex; align-items: center; gap: 4px; }
.az-donechip:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }
.az-prefix { font-size: 20px; line-height: 1.9; text-align: center; color: var(--c-text-muted); }
.az-ar { font-size: calc(var(--quran-size, 30px) * .85); line-height: 2.1; text-align: center; word-spacing: 2px; }
.az-tl { font-style: italic; color: var(--c-text-muted); line-height: 1.6; }
.az-de { line-height: 1.6; font-size: var(--tr-size, var(--text-base)); }
.az-virtue { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3); border-radius: var(--radius-md); background: var(--c-accent-soft); }
.az-virtue p { font-size: var(--text-sm); line-height: var(--leading-sm); color: var(--c-text); }
.az-virtue .az-source { color: var(--c-text-muted); }
.az-virtue-label { display: block; font-size: var(--text-xs); line-height: var(--leading-xs); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--c-text-muted); margin-bottom: 2px; }
.az-actions { display: flex; align-items: center; justify-content: center; gap: var(--space-4); padding-top: var(--space-1); }
.az-minus { width: 44px; height: 44px; padding: 0; border-radius: 50%; color: var(--c-text-muted); }
.az-tap {
  width: 112px; height: 112px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--c-accent); color: var(--c-on-accent);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  box-shadow: var(--shadow-card); touch-action: manipulation; user-select: none; -webkit-user-select: none;
  transition: transform var(--motion-fast) var(--motion-ease);
}
.az-tap:active { transform: scale(.93); }
.az-tap:focus-visible { outline: 3px solid var(--c-accent); outline-offset: 3px; }
.az-tap.single { width: auto; height: 52px; border-radius: var(--radius-pill); flex-direction: row; gap: 8px; padding: 0 var(--space-6); font-weight: 700; }
.az-tap-num { font-size: 36px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.az-tap-of { font-size: var(--text-xs); font-weight: 600; }
.az-chains-wrap { display: flex; flex-direction: column; gap: var(--space-2); }
.az-chains { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 4px; max-width: 360px; }
.az-chain { display: block; min-width: 0; aspect-ratio: 40 / 56; color: var(--c-text-muted); }
.az-chain svg { display: block; width: 100%; height: 100%; }
.az-card .bar, .az-progress .bar { background: var(--c-accent-soft); }
.az-chain .az-link { stroke: currentColor; }
.az-chain.broken { color: var(--c-metric-time); animation: az-break .7s var(--motion-ease); }
.az-chain .az-spark { stroke: var(--c-neon); }
@keyframes az-break { 0% { transform: scale(1); } 40% { transform: scale(1.25) rotate(-6deg); } 100% { transform: none; } }
.az-reward {
  display: flex; flex-direction: column; gap: 6px; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--c-neon) 14%, var(--c-surface)); border: 1px solid color-mix(in srgb, var(--c-neon) 55%, transparent);
}
.az-reward ul { margin: 0; padding-left: 1.2em; line-height: 1.6; }
.neon-frame {
  position: fixed; inset: 0; pointer-events: none; z-index: 50;
  box-shadow: inset 0 0 0 3px var(--c-neon), inset 0 0 18px 4px color-mix(in srgb, var(--c-neon) 75%, transparent), inset 0 0 70px 12px color-mix(in srgb, var(--c-neon) 35%, transparent);
  animation: neon-pulse 1.3s ease-in-out infinite alternate, neon-fade 9s linear forwards;
}
@keyframes neon-pulse {
  from { box-shadow: inset 0 0 0 2px var(--c-neon), inset 0 0 12px 2px color-mix(in srgb, var(--c-neon) 60%, transparent), inset 0 0 40px 6px color-mix(in srgb, var(--c-neon) 25%, transparent); }
  to { box-shadow: inset 0 0 0 4px var(--c-neon), inset 0 0 24px 6px color-mix(in srgb, var(--c-neon) 85%, transparent), inset 0 0 90px 16px color-mix(in srgb, var(--c-neon) 40%, transparent); }
}
/* Āyat al-Kursī: dreimal aufblinken (3 × 0,7 s) */
.neon-frame.blink3 { animation: neon-blink .7s ease-in-out 3 both; }
@keyframes neon-blink { 0% { opacity: 0; } 45% { opacity: 1; } 55% { opacity: 1; } 100% { opacity: 0; } }
.az-dialog-scrim { align-items: center; padding: var(--gutter); z-index: 60; }
.az-dialog {
  width: 100%; max-width: 360px; background: var(--c-surface); color: var(--c-text); border-radius: var(--radius-xl);
  padding: var(--space-6) var(--space-5); display: flex; flex-direction: column; align-items: center; gap: var(--space-3); text-align: center;
  border: 2px solid var(--c-neon); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-neon) 25%, transparent), 0 0 40px color-mix(in srgb, var(--c-neon) 45%, transparent), var(--shadow-pop);
  animation: up var(--motion-base) var(--motion-ease);
}
.az-dialog-icon { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; color: var(--c-metric-verses); background: color-mix(in srgb, var(--c-neon) 16%, var(--c-surface)); }
.az-dialog .btn { width: 100%; margin-top: var(--space-2); }
.az-dialog { max-height: calc(100dvh - 2 * var(--gutter)); overflow-y: auto; }
/* Meer-Animation: Schaum (Sünden) löst sich nach und nach auf, danach ist das Meer klar */
.sea { width: 100%; aspect-ratio: 16 / 9; border-radius: var(--radius-lg); overflow: hidden; box-shadow: inset 0 0 0 1px var(--c-border); }
.sea svg { display: block; width: 100%; height: 100%; }
.sea-sky-top { stop-color: var(--c-sea-sky-top); }
.sea-sky-bottom { stop-color: var(--c-sea-sky-bottom); }
.sea-water-top { stop-color: var(--c-sea-top); }
.sea-water-bottom { stop-color: var(--c-sea-bottom); }
.sea-sun { fill: var(--c-sea-sun); opacity: .45; animation: sea-sun 1.5s ease-out 5s forwards; }
@keyframes sea-sun { to { opacity: 1; } }
.sea-wave path { stroke: none; }
.sea-wave.w1 path { fill: var(--c-sea-wave1); }
.sea-wave.w2 path { fill: var(--c-sea-wave2); }
.sea-wave.w3 path { fill: var(--c-sea-wave3); }
.sea-wave.w1 { animation: sea-w1 3s linear infinite; }
.sea-wave.w2 { animation: sea-w2 4s linear infinite; }
.sea-wave.w3 { animation: sea-w3 5s linear infinite; }
@keyframes sea-w1 { to { transform: translateX(40px); } }
@keyframes sea-w2 { to { transform: translateX(50px); } }
@keyframes sea-w3 { to { transform: translateX(60px); } }
.sea-foam circle {
  fill: var(--c-sea-foam); opacity: .95; transform-box: fill-box; transform-origin: center;
  animation: sea-pop 1.1s ease-in forwards;
}
@keyframes sea-pop {
  0% { opacity: .95; transform: none; }
  35% { opacity: 1; transform: scale(1.15); }
  100% { opacity: 0; transform: translateY(-14px) scale(.15); }
}
.sea-label, .sea-done { font: 700 17px var(--font-sans); fill: var(--c-sea-ink); }
.sea-label { animation: sea-out .8s ease-in 3.6s forwards; }
.sea-done { opacity: 0; animation: sea-in 1s ease-out 5.1s forwards; }
@keyframes sea-out { to { opacity: 0; } }
@keyframes sea-in { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .sea-foam, .sea-label { display: none; }
  .sea-done, .sea-sun { opacity: 1; }
}
/* Waage-Animation (Subḥāna-llāh 100×): Grundzustand = Endbild, Keyframes beschreiben den Anfang */
.scale-scene { width: 100%; display: flex; flex-direction: column; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-2) var(--space-2); border-radius: var(--radius-lg); background: var(--c-accent-soft); }
.scale-scene svg { display: block; width: 100%; height: auto; overflow: visible; }
.scale-post, .scale-base, .scale-bar, .scale-knob { fill: var(--c-accent); }
.scale-knob { stroke: var(--c-accent-soft); stroke-width: 3; }
.scale-beam { transform-box: view-box; transform-origin: 160px 60px; transform: rotate(12deg); animation: scale-tilt 3.6s cubic-bezier(.45, 0, .25, 1) .6s both; }
@keyframes scale-tilt { from { transform: rotate(-12deg); } 30% { transform: rotate(-9deg); } }
.scale-pan.l { transform: translateY(-20px); animation: scale-pan-l 3.6s cubic-bezier(.45, 0, .25, 1) .6s both; }
.scale-pan.r { transform: translateY(20px); animation: scale-pan-r 3.6s cubic-bezier(.45, 0, .25, 1) .6s both; }
@keyframes scale-pan-l { from { transform: translateY(20px); } 30% { transform: translateY(15px); } }
@keyframes scale-pan-r { from { transform: translateY(-20px); } 30% { transform: translateY(-15px); } }
.scale-string { stroke: var(--c-text-muted); stroke-width: 1.5; fill: none; }
.scale-bowl { fill: var(--c-accent); }
.scale-stones ellipse {
  fill: var(--c-text-muted); opacity: 0; transform-box: fill-box; transform-origin: center;
  animation: scale-stone .9s ease-in both;
}
@keyframes scale-stone {
  from { opacity: .95; transform: none; }
  40% { opacity: 1; transform: scale(1.12); }
  to { opacity: 0; transform: translateY(-12px) scale(.2); }
}
.scale-lights circle {
  fill: var(--c-neon); transform-box: fill-box; transform-origin: center;
  filter: drop-shadow(0 0 3px var(--c-neon));
  animation: scale-drop .75s cubic-bezier(.55, 0, .9, .45) both;
}
@keyframes scale-drop {
  from { opacity: 0; transform: translateY(-85px) scale(.6); }
  20% { opacity: 1; }
  85% { transform: translateY(2px) scale(1.15); }
  to { opacity: 1; transform: none; }
}
.scale-lbl { font: 600 12px var(--font-sans); fill: var(--c-text-muted); }
.scale-lbl.good { fill: var(--c-metric-pages); }
.scale-count { display: flex; align-items: baseline; gap: var(--space-2); color: var(--c-metric-pages); }
.scale-count strong { font-size: var(--text-xl); line-height: var(--leading-xl); font-weight: 800; font-variant-numeric: tabular-nums; }
.scale-count span { font-size: var(--text-sm); font-weight: 600; }
/* Zwei-Worte-Animation: gleiche Dauer (4,4 s) für alle Teile, Grundzustand = Endbild */
.love-scene { width: 100%; padding: var(--space-3) var(--space-2) var(--space-2); border-radius: var(--radius-lg); background: var(--c-accent-soft); }
.love-scene svg { display: block; width: 100%; height: auto; overflow: visible; }
.love-scene > svg * { animation-duration: 4.4s; animation-delay: .3s; animation-fill-mode: both; }
.love-beam { transform-box: view-box; transform-origin: 160px 90px; transform: rotate(-14deg); animation-name: love-tilt; }
@keyframes love-tilt { 0%, 55% { transform: none; animation-timing-function: ease-out; } 61% { transform: rotate(-18deg); } 67% { transform: rotate(-12deg); } 72% { transform: rotate(-14deg); } }
.love-pan.l { transform: translateY(24px); animation-name: love-pan-l; }
.love-pan.r { transform: translateY(-24px); animation-name: love-pan-r; }
@keyframes love-pan-l { 0%, 55% { transform: none; animation-timing-function: ease-out; } 61% { transform: translateY(31px); } 67% { transform: translateY(21px); } 72% { transform: translateY(24px); } }
@keyframes love-pan-r { 0%, 55% { transform: none; animation-timing-function: ease-out; } 61% { transform: translateY(-31px); } 67% { transform: translateY(-21px); } 72% { transform: translateY(-24px); } }
.love-word { font: 600 9px var(--font-arabic); fill: var(--c-text); direction: rtl; transform-box: fill-box; transform-origin: center; }
.love-word.w1 { animation-name: love-w1; }
.love-word.w2 { animation-name: love-w2; }
@keyframes love-w1 {
  0% { opacity: 0; transform: translate(98px, -78px) rotate(0deg) scale(1.9); }
  8% { opacity: 1; transform: translate(98px, -78px) rotate(-4deg) scale(1.9); }
  18% { transform: translate(106px, -82px) rotate(4deg) scale(1.9); }
  28% { transform: translate(91px, -75px) rotate(-3deg) scale(1.9); }
  40% { transform: translate(98px, -78px) rotate(0deg) scale(1.9); animation-timing-function: cubic-bezier(.5, 0, 1, .55); }
  55% { opacity: 1; transform: translate(0, 0) rotate(0deg) scale(1); }
}
@keyframes love-w2 {
  0% { opacity: 0; transform: translate(98px, -62px) rotate(0deg) scale(1.9); }
  10% { opacity: 1; transform: translate(98px, -62px) rotate(3deg) scale(1.9); }
  20% { transform: translate(90px, -58px) rotate(-4deg) scale(1.9); }
  31% { transform: translate(105px, -65px) rotate(3deg) scale(1.9); }
  42% { transform: translate(98px, -62px) rotate(0deg) scale(1.9); animation-timing-function: cubic-bezier(.5, 0, 1, .55); }
  55% { opacity: 1; transform: translate(0, 0) rotate(0deg) scale(1); }
}
.love-heart { transform-box: fill-box; transform-origin: center; animation-name: love-heart; }
.love-heart path { fill: var(--c-metric-hasanat); filter: drop-shadow(0 0 6px color-mix(in srgb, var(--c-metric-hasanat) 55%, transparent)); }
.love-heart text { font: 700 12px var(--font-arabic); fill: var(--c-on-badge); direction: rtl; }
@keyframes love-heart {
  0%, 70% { opacity: 0; transform: translate(-98px, 86px) scale(.25); }
  84% { opacity: 1; transform: translate(0, -4px) scale(1.12); }
  90% { transform: scale(.96); }
  95% { transform: scale(1.06); }
  100% { opacity: 1; transform: none; }
}
.love-cap { font: 600 13px var(--font-sans); fill: var(--c-text-muted); }
.love-cap.c1 { opacity: 0; animation-name: love-c1; }
.love-cap.c2 { opacity: 0; animation-name: love-c2; }
.love-cap.c3 { fill: var(--c-metric-hasanat); animation-name: love-c3; }
@keyframes love-c1 { 0% { opacity: 0; } 6%, 36% { opacity: 1; } 42%, 100% { opacity: 0; } }
@keyframes love-c2 { 0%, 50% { opacity: 0; } 56%, 72% { opacity: 1; } 78%, 100% { opacity: 0; } }
@keyframes love-c3 { 0%, 80% { opacity: 0; } 88%, 100% { opacity: 1; } }
/* Sonnenaufgang (die vier liebsten Worte): Grundzustand = Endbild */
.sun-scene { width: 100%; border-radius: var(--radius-lg); overflow: hidden; box-shadow: inset 0 0 0 1px var(--c-border); }
.sun-scene svg { display: block; width: 100%; height: auto; }
.sun-sky-top { stop-color: var(--c-sea-bottom); }
.sun-sky-mid { stop-color: var(--c-sea-wave2); }
.sun-sky-low { stop-color: var(--c-sea-sun); }
.sun-night { fill: var(--c-sea-ink); opacity: .1; animation: sun-night 2.4s ease-out .2s both; }
@keyframes sun-night { from { opacity: .9; } }
.sun-disc { fill: var(--c-sea-sun); opacity: .78; filter: drop-shadow(0 0 12px var(--c-sea-sun)); animation: sun-rise 2.3s cubic-bezier(.3, .6, .3, 1) .3s both, sun-dim 1.2s ease 5.2s both; }
@keyframes sun-rise { from { transform: translateY(66px); } }
@keyframes sun-dim { from { opacity: 1; } }
.sun-rays { transform-box: view-box; transform-origin: 160px 128px; animation: sun-rays-in 1.2s ease-out 1.8s both, sun-spin 40s linear 1.8s infinite; }
.sun-rays line { stroke: var(--c-sea-sun); stroke-width: 2; stroke-linecap: round; opacity: .35; }
@keyframes sun-rays-in { from { opacity: 0; } }
@keyframes sun-spin { to { transform: rotate(360deg); } }
.sun-far { fill: var(--c-sea-wave3); }
.sun-sea { fill: var(--c-sea-top); }
.sun-glitter { stroke: var(--c-sea-sun); stroke-width: 2; stroke-linecap: round; opacity: .7; animation: sun-rays-in 1.5s ease-out 2s both; }
.sun-land { fill: var(--c-sea-ink); }
.sun-beam { stroke: var(--c-sea-sun); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 240; stroke-dashoffset: 0; opacity: .55; animation: sun-beam .55s ease-out both; }
@keyframes sun-beam { from { stroke-dashoffset: 240; opacity: 0; } }
.sun-word {
  font: 700 15px var(--font-arabic); fill: var(--c-sea-sun); direction: rtl;
  filter: drop-shadow(0 0 4px color-mix(in srgb, var(--c-sea-sun) 80%, transparent));
  transform-box: fill-box; transform-origin: center; animation-name: sun-word, sun-glow; animation-duration: .6s, 1.3s; animation-timing-function: ease-out, ease-in-out; animation-fill-mode: both;
}
@keyframes sun-word { from { opacity: 0; transform: scale(.5); } }
@keyframes sun-glow { 50% { transform: scale(1.2); filter: drop-shadow(0 0 12px var(--c-sea-sun)); } }
.sun-cap { font: 700 13px var(--font-sans); fill: var(--c-sea-foam); animation: sun-cap .9s ease-out 5.2s both; }
@keyframes sun-cap { from { opacity: 0; transform: translateY(6px); } }
/* 10 Sterne in der Karte (Segen auf den Propheten) */
.hm-stars-wrap { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); text-align: center; }
.hm-stars { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 4px; width: 100%; max-width: 340px; }
.hm-star { position: relative; display: block; aspect-ratio: 1; }
.hm-star svg { display: block; width: 100%; height: 100%; overflow: visible; }
.hm-star path { fill: none; stroke: var(--c-border-input); stroke-width: 1.6; stroke-linejoin: round; }
.hm-star.on path { fill: var(--c-sea-sun); stroke: color-mix(in srgb, var(--c-sea-sun) 45%, var(--c-metric-time)); filter: drop-shadow(0 0 3px color-mix(in srgb, var(--c-sea-sun) 70%, transparent)); }
.hm-star.on svg { animation: hm-star-pop .55s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes hm-star-pop { from { transform: scale(.2) rotate(-40deg); } }
.hm-star-x {
  position: absolute; left: 50%; top: 0; transform: translate(-50%, -110%); pointer-events: none; white-space: nowrap;
  font-size: 11px; font-weight: 800; color: var(--c-metric-time); opacity: 0; animation: hm-star-x 1.1s ease-out;
}
@keyframes hm-star-x { 0% { opacity: 0; transform: translate(-50%, -30%); } 25% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -190%); } }
/* 4 Ketten in der Karte (10× Tahlīl) */
.hm-four { align-items: center; text-align: center; }
.hm-four-chains { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 168px; gap: 10px; width: 100%; }
/* Vier Seelen befreit (10× Tahlīl): Ketten brechen, Tauben fliegen auf. Grundzustand = Endbild */
.free-scene { width: 100%; border-radius: var(--radius-lg); overflow: hidden; box-shadow: inset 0 0 0 1px var(--c-border); }
.free-scene svg { display: block; width: 100%; height: auto; }
.free-sky-top { stop-color: var(--c-sea-sky-top); }
.free-sky-low { stop-color: var(--c-sea-sky-bottom); }
.free-sun { fill: var(--c-sea-sun); opacity: .8; }
.free-ground { fill: color-mix(in srgb, var(--c-sea-ink) 14%, var(--c-sea-sky-bottom)); }
.fr-link { fill: none; stroke: var(--c-metric-time); stroke-width: 4; transform-box: fill-box; transform-origin: center; animation-duration: .55s; animation-timing-function: cubic-bezier(.2, .8, .3, 1); animation-fill-mode: both; animation-delay: var(--d); }
.fr-link.t { transform: translate(-13px, -9px) rotate(-38deg); animation-name: fr-t; }
.fr-link.m { opacity: 0; transform: scale(.3); animation-name: fr-m; }
.fr-link.b { transform: translate(13px, 12px) rotate(32deg); animation-name: fr-b; }
@keyframes fr-t { from { transform: none; stroke: var(--c-sea-ink); } }
@keyframes fr-b { from { transform: none; stroke: var(--c-sea-ink); } }
@keyframes fr-m { from { opacity: 1; transform: none; stroke: var(--c-sea-ink); } 40% { opacity: 1; transform: scale(1.25); } }
.fr-spark { stroke: var(--c-neon); stroke-width: 2.5; stroke-linecap: round; opacity: 0; animation: fr-spark .6s ease-out var(--d) both; }
@keyframes fr-spark { 0% { opacity: 0; } 25% { opacity: 1; } 100% { opacity: 0; } }
.fr-dove { animation: fr-fly 1.4s cubic-bezier(.25, .7, .3, 1) var(--d2) both; }
@keyframes fr-fly { from { opacity: 0; transform: translate(0, 82px) scale(.3); } 25% { opacity: 1; } 75% { transform: translate(0, -6px) scale(1.05); } }
.fr-dove-body { fill: var(--c-sea-foam); stroke: var(--c-sea-ink); stroke-width: 1.4; stroke-linejoin: round; }
.fr-wing { fill: var(--c-sea-foam); stroke: var(--c-sea-ink); stroke-width: 1.4; stroke-linejoin: round; transform-box: fill-box; transform-origin: 50% 100%; animation: fr-flap .32s ease-in-out infinite alternate; }
@keyframes fr-flap { to { transform: scaleY(.35); } }
.fr-eye { fill: var(--c-sea-ink); }
.fr-cap { font: 800 15px var(--font-sans); fill: var(--c-sea-ink); animation: fr-cap .8s ease-out 3.9s both; }
@keyframes fr-cap { from { opacity: 0; transform: translateY(6px); } }
/* Schatz des Paradieses (Lā ḥawla wa lā quwwata illā billāh): Truhe öffnet sich. Grundzustand = Endbild */
.chest-scene { width: 100%; border-radius: var(--radius-lg); overflow: hidden; box-shadow: inset 0 0 0 1px var(--c-border); }
.chest-scene svg { display: block; width: 100%; height: auto; }
.chest-sky-top { stop-color: var(--c-sea-ink); }
.chest-sky-low { stop-color: var(--c-sea-wave3); }
.chest-light-a { stop-color: var(--c-sea-sun); stop-opacity: .75; }
.chest-light-b { stop-color: var(--c-sea-sun); stop-opacity: 0; }
.chest-ground { fill: color-mix(in srgb, var(--c-sea-ink) 70%, black); opacity: .5; }
.chest-shake { transform-box: view-box; transform-origin: 160px 170px; animation: chest-shake .7s ease-in-out .3s both; }
@keyframes chest-shake { 0%, 100% { transform: none; } 20% { transform: rotate(-3deg); } 40% { transform: rotate(3deg); } 60% { transform: rotate(-2deg); } 80% { transform: rotate(1.5deg); } }
.chest-wood { fill: var(--c-metric-time); stroke: var(--c-sea-ink); stroke-width: 2; stroke-linejoin: round; }
.chest-band { fill: var(--c-sea-sun); stroke: var(--c-sea-ink); stroke-width: 1.5; }
.chest-lock { fill: var(--c-sea-ink); }
.chest-inner { fill: color-mix(in srgb, var(--c-sea-ink) 75%, black); }
.chest-lid { transform-box: view-box; transform-origin: 160px 122px; transform: translate(0, -30px) rotate(-7deg) scale(1, .62); animation: chest-open .65s cubic-bezier(.3, 1.5, .5, 1) 1.05s both; }
@keyframes chest-open { from { transform: none; } }
.chest-light { transform-box: fill-box; transform-origin: 50% 100%; animation: chest-light .9s ease-out 1.3s both; }
@keyframes chest-light { from { opacity: 0; transform: scaleY(0); } }
.chest-gem { transform-box: fill-box; transform-origin: center; animation: chest-gem 1s cubic-bezier(.2, .8, .3, 1.2) both, chest-float 2.4s ease-in-out infinite alternate; }
@keyframes chest-gem { from { opacity: 0; transform: translate(var(--gx), var(--gy)) scale(.2); } }
@keyframes chest-float { from { translate: 0 0; } to { translate: 0 -4px; } }
.chest-gem.coin { fill: var(--c-sea-sun); stroke: color-mix(in srgb, var(--c-sea-sun) 55%, var(--c-sea-ink)); stroke-width: 1.5; }
.chest-gem.blue { fill: var(--c-neon); stroke: var(--c-sea-foam); stroke-width: 1; }
.chest-gem.pink { fill: var(--c-metric-hasanat); stroke: var(--c-sea-foam); stroke-width: 1; }
.chest-gem.green { fill: var(--c-metric-pages); stroke: var(--c-sea-foam); stroke-width: 1; }
.chest-spark { fill: var(--c-sea-foam); transform-box: fill-box; transform-origin: center; animation: chest-tw 1.6s ease-in-out infinite alternate; }
@keyframes chest-tw { from { opacity: .2; transform: scale(.5); } to { opacity: 1; transform: scale(1); } }
.chest-cap { font: 800 14px var(--font-sans); fill: var(--c-sea-foam); animation: chest-cap .8s ease-out 3.1s both; }
@keyframes chest-cap { from { opacity: 0; transform: translateY(6px); } }
.az-tally { width: 100%; display: flex; flex-direction: column; gap: 6px; text-align: left; }
.az-tally-head, .az-tally-row { display: grid; grid-template-columns: 1fr auto 6.5em; gap: var(--space-3); align-items: baseline; }
.az-tally-head { font-size: var(--text-xs); color: var(--c-text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.az-tally-head span:nth-child(n+2), .az-tally-row > :nth-child(n+2) { text-align: right; }
.az-tally-row { padding: var(--space-2) 0; border-bottom: 1px solid var(--c-border); }
.az-tally-row strong { font-size: var(--text-xl); line-height: var(--leading-xl); font-variant-numeric: tabular-nums; }
.az-tally-today { color: var(--c-metric-pages); font-weight: 700; font-variant-numeric: tabular-nums; }
.az-tally .muted { margin-top: var(--space-1); text-align: center; }
.az-tally-row.minus .az-tally-today, .az-tally-row.minus strong { color: var(--c-danger); }
.az-dialog-glyph {
  font-family: var(--font-arabic); font-size: 88px; line-height: 1.3; color: var(--c-text);
  text-shadow: 0 0 18px color-mix(in srgb, var(--c-neon) 55%, transparent);
}
@keyframes neon-fade { 0% { opacity: 0; } 4% { opacity: 1; } 88% { opacity: 1; } 100% { opacity: 0; } }
.az-shield {
  display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg); color: var(--c-text);
  background: color-mix(in srgb, var(--c-neon) 12%, var(--c-surface)); border: 1px solid color-mix(in srgb, var(--c-neon) 50%, transparent);
}
.az-shield > svg, .az-shield-mini { color: var(--c-metric-verses); flex-shrink: 0; display: inline-grid; }
.az-toggles { gap: var(--space-5); flex-wrap: wrap; }
.az-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.az-tile { display: flex; flex-direction: column; gap: 2px; }
.az-tile strong { font-size: var(--text-xl); line-height: var(--leading-xl); font-variant-numeric: tabular-nums; }
.az-tile-note { font-size: var(--text-xs); line-height: var(--leading-xs); color: var(--c-text-muted); }
.az-days { display: grid; grid-template-columns: repeat(14, 1fr); gap: 4px; }
.az-day { display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 10px; color: var(--c-text-muted); }
.az-day.today span { color: var(--c-text); font-weight: 700; }
.az-cell { width: 100%; max-width: 22px; aspect-ratio: 1; border-radius: 5px; background: var(--c-accent-soft); border: 1px solid var(--c-border); }
.az-cell.m.on { background: var(--c-metric-time); border-color: var(--c-metric-time); }
.az-cell.e.on { background: var(--c-metric-verses); border-color: var(--c-metric-verses); }
.az-legend { display: flex; gap: var(--space-3); font-size: var(--text-xs); color: var(--c-text-muted); }
.az-dot { display: inline-block; width: 10px; height: 10px; border-radius: 3px; vertical-align: -1px; margin-right: 4px; }
.az-dot.m { background: var(--c-metric-time); }
.az-dot.e { background: var(--c-metric-verses); }
.az-note { font-size: var(--text-xs); line-height: var(--leading-xs); }
.seg button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }

/* ---------- Hisnul Muslim ---------- */
.hm-head { display: flex; align-items: center; gap: var(--space-3); }
.hm-head-ico { width: 52px; height: 52px; border-radius: var(--radius-lg); display: grid; place-items: center; flex-shrink: 0; background: var(--c-accent); color: var(--c-on-accent); box-shadow: var(--shadow-card); }
.hm-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.hm-wide { grid-column: 1 / -1; }
.hm-tile {
  height: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; text-decoration: none; color: var(--c-text);
  background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-lg); padding: var(--space-4);
  transition: transform var(--motion-fast) var(--motion-ease), border-color var(--motion-fast);
}
.hm-tile:active { transform: scale(.98); }
.hm-tile:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }
@media (hover: hover) { .hm-tile:hover { border-color: var(--c-accent); } }
.hm-ico { width: 48px; height: 48px; border-radius: var(--radius-md); display: grid; place-items: center; background: var(--c-accent-soft); color: var(--c-accent); margin-bottom: 2px; }
.hm-title { font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.hm-sub { font-size: var(--text-xs); line-height: var(--leading-xs); color: var(--c-text-muted); }
.hm-tile-feature { flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: var(--space-3); background: var(--c-accent-soft); border-color: transparent; }
.hm-tile-feature .hm-ico { background: var(--c-accent); color: var(--c-on-accent); margin: 0; }
.hm-tile-feature .hm-title { flex: 1; min-width: 0; }
.hm-tile-feature .hm-sub { width: 100%; }
.hm-chips { display: flex; gap: var(--space-2); overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.hm-chips::-webkit-scrollbar { display: none; }
.hm-chips .chip { white-space: nowrap; flex-shrink: 0; }
.hm-sec { scroll-margin-top: var(--space-4); gap: var(--space-3); }
.hm-note { font-size: var(--text-sm); line-height: var(--leading-sm); color: var(--c-text-muted); font-style: italic; }
.hm-ar-small { font-size: 20px; line-height: 2; text-align: right; color: var(--c-text-muted); }
.hm-quran { display: flex; flex-direction: column; gap: var(--space-2); }
.hm-quran + .hm-quran { border-top: 1px solid var(--c-border); padding-top: var(--space-3); }
.hm-info { background: color-mix(in srgb, var(--c-accent-soft) 45%, var(--c-surface)); }
.az-card.done { border-color: var(--c-metric-pages-soft); }

/* ---------- Palmen im Paradies ---------- */
.pm-palm { display: block; overflow: visible; }
.pm-palm .pm-tr { fill: none; stroke: var(--c-metric-time); stroke-width: 3.2; stroke-linecap: round; }
.pm-palm .pm-tr-ring { fill: none; stroke: color-mix(in srgb, var(--c-metric-time) 55%, var(--c-surface)); stroke-width: 1; stroke-linecap: round; }
.pm-palm .pm-fr path { fill: none; stroke: var(--c-metric-pages); stroke-width: 3; stroke-linecap: round; }
.pm-palm .pm-date { fill: var(--c-metric-time); }
.pm-actions { position: relative; display: flex; align-items: center; justify-content: center; gap: var(--space-3); flex-wrap: wrap; padding-top: var(--space-1); }
.pm-actions .az-tap.single { padding: 0 var(--space-5); }
.pm-open {
  display: inline-flex; align-items: center; gap: var(--space-2); min-height: 52px; padding: 4px var(--space-4) 4px var(--space-3);
  border-radius: var(--radius-pill); border: 2px solid var(--c-metric-pages); background: var(--c-metric-pages-soft); color: var(--c-text);
  cursor: pointer; text-align: left; font: inherit; touch-action: manipulation;
}
.pm-open:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }
.pm-open-text { display: flex; flex-direction: column; line-height: 1.15; }
.pm-open strong { font-size: 18px; font-weight: 800; color: var(--c-metric-pages); font-variant-numeric: tabular-nums; }
.pm-open small { font-size: 11px; font-weight: 600; color: var(--c-text-muted); max-width: 9.5em; }
.pm-open.bump { animation: pm-bump .45s var(--motion-ease); }
.pm-open.bump .pm-palm { animation: pm-sway .6s ease-out; transform-origin: 50% 100%; }
@keyframes pm-bump { 35% { transform: scale(1.08); box-shadow: 0 0 0 6px color-mix(in srgb, var(--c-metric-pages) 22%, transparent); } }
@keyframes pm-sway { 30% { transform: rotate(-8deg); } 65% { transform: rotate(5deg); } }
.pm-fly { position: absolute; z-index: 5; pointer-events: none; transform: translate(-50%, -50%); animation: pm-fly .75s cubic-bezier(.3, .7, .4, 1) forwards; }
@keyframes pm-fly {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.3); }
  25% { opacity: 1; transform: translate(-50%, calc(-50% - 44px)) scale(1.25); }
  100% { opacity: .2; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(.6); }
}
/* Freier Zähler: Anzahl neben „Gelesen“, „+1“ fliegt hinein */
.ct-box {
  display: inline-flex; flex-direction: column; justify-content: center; min-height: 52px; min-width: 7.5em; padding: 4px var(--space-4);
  border-radius: var(--radius-pill); border: 2px solid var(--c-metric-pages); background: var(--c-metric-pages-soft); line-height: 1.15;
}
.ct-box strong { font-size: 20px; font-weight: 800; color: var(--c-metric-pages); font-variant-numeric: tabular-nums; }
.ct-box small { font-size: 11px; font-weight: 600; color: var(--c-text-muted); font-variant-numeric: tabular-nums; }
.ct-box.bump { animation: pm-bump .45s var(--motion-ease); }
/* Gesamtzahl neben dem runden Zähler: schmal halten, damit alles in eine Reihe passt */
.az-actions:has(.ct-box) { gap: var(--space-2); flex-wrap: wrap; }
.az-actions .ct-box { min-width: 0; padding: 4px var(--space-3); border-radius: var(--radius-lg); }
.az-actions .ct-box small { max-width: 8.5em; }
.ct-fly { font-size: 20px; font-weight: 800; color: var(--c-metric-pages); text-shadow: 0 1px 0 var(--c-surface); }
.pm-sheet { max-height: 92dvh; overflow-y: auto; }
.pm-stats { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.pm-stats div { display: flex; flex-direction: column; padding: var(--space-3); border-radius: var(--radius-md); background: var(--c-metric-pages-soft); }
.pm-stats strong { font-size: var(--text-xl); line-height: var(--leading-xl); font-weight: 800; color: var(--c-metric-pages); font-variant-numeric: tabular-nums; }
.pm-stats span { font-size: var(--text-sm); color: var(--c-text-muted); }
.pm-field {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: center; gap: 0 2px; padding: var(--space-4) var(--space-3) var(--space-3);
  min-height: 140px; max-height: 46dvh; overflow-y: auto; border-radius: var(--radius-lg);
  background: linear-gradient(to bottom, color-mix(in srgb, var(--c-metric-verses-soft) 70%, var(--c-surface)) 0%, var(--c-metric-pages-soft) 55%, color-mix(in srgb, var(--c-metric-time-soft) 85%, var(--c-surface)) 100%);
  box-shadow: inset 0 0 0 1px var(--c-border);
}
.pm-plant { display: inline-block; transform-origin: 50% 100%; }
.pm-plant.flip .pm-palm { transform: scaleX(-1); }
.pm-plant.fresh { animation: pm-grow .6s var(--motion-ease) both; }
@keyframes pm-grow { from { opacity: 0; transform: scale(0); } 70% { transform: scale(1.15); } }
.pm-empty { flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2); text-align: center; }
.pm-ghost { opacity: .35; }
.pm-hadith { font-size: var(--text-sm); line-height: var(--leading-sm); padding: var(--space-3); border-radius: var(--radius-md); background: var(--c-accent-soft); }

@media (min-width: 768px) {
  .page { padding-top: var(--space-8); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- Kategorie-Karten (Startseite) ---------- */
.feat { --fa-a: var(--c-feat-hisn-a); --fa-b: var(--c-feat-hisn-b); position: relative; overflow: hidden; isolation: isolate;
  background: linear-gradient(105deg, color-mix(in srgb, var(--fa-b) 13%, var(--c-surface)) 0%, var(--c-surface) 62%);
  border: 1px solid color-mix(in srgb, var(--fa-b) 22%, var(--c-border)); box-shadow: var(--shadow-card);
  transition: transform var(--motion-fast) var(--motion-ease), box-shadow var(--motion-base) var(--motion-ease); }
.feat:hover { box-shadow: 0 2px 4px rgba(22,22,29,.05), 0 8px 22px color-mix(in srgb, var(--fa-a) 18%, transparent); }
.feat:active { transform: scale(.985); }
.feat strong { font-size: var(--text-base); line-height: 22px; }
.feat-ramadan { --fa-a: var(--c-feat-ramadan-a); --fa-b: var(--c-feat-ramadan-b); }
.feat-khatm { --fa-a: var(--c-feat-khatm-a); --fa-b: var(--c-feat-khatm-b); }
.feat-hifz { --fa-a: var(--c-feat-hifz-a); --fa-b: var(--c-feat-hifz-b); }
/* Pfeil im Kreis */
.feat .feat-go { margin-left: auto; flex-shrink: 0; width: 32px; height: 32px; border-radius: var(--radius-pill); display: grid; place-items: center;
  background: color-mix(in srgb, var(--fa-b) 14%, var(--c-surface)); color: color-mix(in srgb, var(--fa-a) 70%, var(--c-text)); }
/* Bild-Kachel */
.fa-tile { --fa-a: var(--c-feat-hisn-a); --fa-b: var(--c-feat-hisn-b); flex-shrink: 0; display: block; border-radius: var(--radius-lg); overflow: hidden;
  background: radial-gradient(120% 90% at 30% 15%, var(--fa-b), var(--fa-a));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-feat-gold) 30%, transparent), 0 4px 10px color-mix(in srgb, var(--fa-a) 35%, transparent); }
.fa-tile svg { display: block; }
.fa-ramadan { --fa-a: var(--c-feat-ramadan-a); --fa-b: var(--c-feat-ramadan-b); }
.fa-khatm { --fa-a: var(--c-feat-khatm-a); --fa-b: var(--c-feat-khatm-b); }
.fa-hifz { --fa-a: var(--c-feat-hifz-a); --fa-b: var(--c-feat-hifz-b); }
.fa-gold { fill: var(--c-feat-gold); stroke: var(--c-feat-gold); stroke-width: 0; }
.fa-gold-2 { fill: var(--c-feat-gold-2); }
.fa-cream { fill: var(--c-feat-cream); stroke: var(--c-feat-cream); stroke-width: 0; }
.fa-cream-2 { fill: color-mix(in srgb, var(--c-feat-cream) 86%, var(--c-feat-gold)); }
.fa-cream-line { fill: none; stroke: var(--c-feat-cream); stroke-width: 1; stroke-linecap: round; opacity: .8; }
.fa-dark { fill: var(--fa-a); }
.fa-ground { fill: color-mix(in srgb, var(--fa-a) 70%, black); }
.fa-glow, .fa-lampglow { fill: var(--fa-glow); }
.fa-gl-a { stop-color: var(--c-feat-gold); stop-opacity: .5; }
.fa-gl-b { stop-color: var(--c-feat-gold); stop-opacity: 0; }
.fa-lamp { fill: var(--c-feat-cream); }
.fa-lampglow { animation: fa-flicker 2.2s ease-in-out infinite alternate; }
@keyframes fa-flicker { from { opacity: .55; } to { opacity: 1; } }
.fa-ribbon { fill: var(--c-danger); }
.fa-rays path { fill: var(--c-feat-gold); opacity: .22; }
.fa-lines path { fill: none; stroke: var(--fa-b); stroke-width: 1.1; stroke-linecap: round; opacity: .55; }
.fa-star { fill: var(--c-feat-cream); transform-box: fill-box; transform-origin: center; animation: fa-tw 2.6s ease-in-out infinite alternate; }
.fa-star.t1 { animation-delay: .9s; }
.fa-star.t2 { animation-delay: 1.7s; }
@keyframes fa-tw { from { opacity: .3; transform: scale(.6); } to { opacity: 1; transform: scale(1); } }
/* Karten mit Fortschrittsring: Ring in der Kategoriefarbe, Bild rund im Ring */
.feat.hz-card .hz-ring-track { stroke: color-mix(in srgb, var(--fa-b) 18%, var(--c-surface)); }
.feat.hz-card .hz-ring-fill:not(.full) { stroke: var(--fa-b); }
.hz-ring .fa-tile { border-radius: 50%; }
/* Dunkles Design: Kartenverlauf etwas kräftiger */
:root[data-theme="dark"] .feat { background: linear-gradient(105deg, color-mix(in srgb, var(--fa-b) 22%, var(--c-surface)) 0%, var(--c-surface) 65%); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .feat { background: linear-gradient(105deg, color-mix(in srgb, var(--fa-b) 22%, var(--c-surface)) 0%, var(--c-surface) 65%); } }
:root[data-theme="dark"] .feat .feat-go { background: color-mix(in srgb, var(--fa-b) 30%, var(--c-surface)); color: var(--c-text); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .feat .feat-go { background: color-mix(in srgb, var(--fa-b) 30%, var(--c-surface)); color: var(--c-text); } }

/* ---------- Hisnul-Muslim-Kacheln (Bogenfenster) ---------- */
.hx-head { display: flex; align-items: center; gap: var(--space-3); }
.hx-head-win { flex-shrink: 0; filter: drop-shadow(0 4px 8px color-mix(in srgb, var(--ha-a) 35%, transparent)); }
.hx-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.hx-wide { grid-column: 1 / -1; }
.hx-tile { display: flex; flex-direction: column; gap: 2px; height: 100%; box-sizing: border-box; padding: var(--space-2) var(--space-2) var(--space-3);
  background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 64px 64px var(--radius-lg) var(--radius-lg);
  text-decoration: none; color: var(--c-text); transition: transform var(--motion-fast) var(--motion-ease), border-color var(--motion-base) var(--motion-ease); }
.hx-tile:active { transform: scale(.98); }
.hx-tile:hover { border-color: color-mix(in srgb, var(--c-feat-gold-2) 60%, var(--c-border)); }
.hx-tile:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }
.hx-win { display: block; width: 100%; height: auto; margin-bottom: var(--space-2); }
.hx-title { font-weight: 700; font-size: var(--text-sm); line-height: var(--leading-sm); padding: 0 var(--space-1); overflow-wrap: anywhere; }
.hx-sub { font-size: var(--text-xs); line-height: var(--leading-xs); color: var(--c-text-muted); padding: 0 var(--space-1); }
/* breite Kachel: Morgen- & Abend-Adhkar */
.hx-feature { flex-direction: row; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3) var(--space-2) var(--space-2); border-radius: var(--radius-xl) var(--radius-lg) var(--radius-lg) var(--radius-xl);
  background: linear-gradient(100deg, color-mix(in srgb, var(--c-hx-adhkar-b) 14%, var(--c-surface)), var(--c-surface) 70%); }
.hx-feature .hx-win { width: 112px; flex-shrink: 0; margin: 0; }
.hx-feature .hx-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hx-feature .hx-title { font-size: var(--text-base); line-height: 22px; }
.hx-feature .hx-sub { font-size: var(--text-sm); line-height: var(--leading-sm); }
.hx-go { margin-left: auto; flex-shrink: 0; width: 32px; height: 32px; border-radius: var(--radius-pill); display: grid; place-items: center;
  background: color-mix(in srgb, var(--c-hx-adhkar-b) 18%, var(--c-surface)); color: var(--c-text); }
/* Szenen */
.ha { --ha-a: var(--c-hx-lob-a); --ha-b: var(--c-hx-lob-b); overflow: visible; }
.ha-adhkar { --ha-a: var(--c-hx-adhkar-a); --ha-b: var(--c-hx-adhkar-b); }
.ha-essen { --ha-a: var(--c-hx-essen-a); --ha-b: var(--c-hx-essen-b); }
.ha-freude { --ha-a: var(--c-hx-freude-a); --ha-b: var(--c-hx-freude-b); }
.ha-gebet { --ha-a: var(--c-hx-gebet-a); --ha-b: var(--c-hx-gebet-b); }
.ha-manieren { --ha-a: var(--c-hx-manieren-a); --ha-b: var(--c-hx-manieren-b); }
.ha-hajj { --ha-a: var(--c-hx-hajj-a); --ha-b: var(--c-hx-hajj-b); }
.ha-heim { --ha-a: var(--c-hx-heim-a); --ha-b: var(--c-hx-heim-b); }
.ha-krankheit { --ha-a: var(--c-hx-krankheit-a); --ha-b: var(--c-hx-krankheit-b); }
.ha-natur { --ha-a: var(--c-hx-natur-a); --ha-b: var(--c-hx-natur-b); }
.ha-reise { --ha-a: var(--c-hx-reise-a); --ha-b: var(--c-hx-reise-b); }
.ha-stop-a { stop-color: var(--ha-a); }
.ha-stop-b { stop-color: var(--ha-b); }
.ha-glow { fill: var(--ha-glow); }
.ha-frame { fill: none; stroke: var(--c-feat-gold); stroke-width: .8; opacity: .55; }
.ha-ground { fill: color-mix(in srgb, var(--ha-a) 75%, black); }
.ha-ground-2 { fill: color-mix(in srgb, var(--ha-a) 55%, black); }
.ha-dark { fill: var(--ha-a); }
.ha-rays rect { fill: var(--c-feat-gold); opacity: .6; }
.ha-fringe { fill: none; stroke: var(--ha-a); stroke-width: .7; opacity: .7; }
.ha-date { fill: var(--c-hx-date); stroke: var(--c-feat-gold-2); stroke-width: .6; }
.ha-band { fill: none; stroke: var(--ha-a); stroke-width: 1.2; opacity: .5; }
.ha-glass { fill: color-mix(in srgb, var(--c-feat-cream) 35%, transparent); stroke: var(--c-feat-cream); stroke-width: .8; }
.ha-drop { fill: none; stroke: var(--c-feat-cream); stroke-width: 1.6; stroke-linecap: round; opacity: .75; }
.ha-balc { fill: var(--c-feat-gold-2); }
.ha-mat { fill: color-mix(in srgb, var(--c-danger) 70%, var(--ha-a)); }
.ha-mat-line { fill: none; stroke: var(--c-feat-gold); stroke-width: 1; }
.ha-stem { fill: none; stroke: var(--c-feat-gold-2); stroke-width: 1.6; stroke-linecap: round; }
.ha-leaf { fill: var(--c-feat-gold-2); opacity: .85; }
.ha-mataf { fill: var(--c-feat-cream); opacity: .14; }
.ha-kaaba { fill: var(--c-hx-kaaba); }
.ha-kaaba-side { fill: color-mix(in srgb, var(--c-hx-kaaba) 80%, white); }
.ha-kaaba-top { fill: color-mix(in srgb, var(--c-hx-kaaba) 70%, white); }
.ha-window { fill: var(--c-feat-cream); }
.ha-trunk { fill: none; stroke: var(--c-feat-gold-2); stroke-width: 3; stroke-linecap: round; }
.ha-dune-1 { fill: color-mix(in srgb, var(--c-feat-gold-2) 55%, var(--ha-a)); }
.ha-dune-2 { fill: color-mix(in srgb, var(--c-feat-gold-2) 30%, var(--ha-a)); }
.ha-path { fill: none; stroke: var(--c-feat-cream); stroke-width: 1.2; stroke-dasharray: 2 3; opacity: .7; }
.ha-camel { fill: color-mix(in srgb, var(--ha-a) 70%, black); }
.ha-stone { fill: color-mix(in srgb, var(--c-feat-cream) 70%, var(--ha-b)); }
/* Dunkles Design: Kachel etwas vom Grund absetzen */
:root[data-theme="dark"] .hx-tile { border-color: color-mix(in srgb, var(--c-feat-gold-2) 18%, var(--c-border)); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .hx-tile { border-color: color-mix(in srgb, var(--c-feat-gold-2) 18%, var(--c-border)); } }

/* ---------- Entdecken ---------- */
.feat-search { --fa-a: var(--c-feat-search-a); --fa-b: var(--c-feat-search-b); }
.fa-search { --fa-a: var(--c-feat-search-a); --fa-b: var(--c-feat-search-b); }
.feat-kinder, .fa-kinder, .fa-spuren, .fa-verbinden { --fa-a: var(--c-feat-kinder-a); --fa-b: var(--c-feat-kinder-b); }
.fa-lens { fill: color-mix(in srgb, var(--c-feat-cream) 22%, transparent); }
.fa-lens-ring { fill: none; stroke: var(--c-feat-gold); stroke-width: 3.2; }
.fa-handle { fill: none; stroke: var(--c-feat-gold-2); stroke-width: 5; stroke-linecap: round; }
.ch-head { display: flex; align-items: flex-start; gap: var(--space-3); }
.ch-win { flex-shrink: 0; filter: drop-shadow(0 3px 6px color-mix(in srgb, var(--ha-a) 30%, transparent)); }
.ha-kahf { --ha-a: var(--c-hx-kahf-a); --ha-b: var(--c-hx-kahf-b); }
.ha-mulk { --ha-a: var(--c-hx-mulk-a); --ha-b: var(--c-hx-mulk-b); }
.ha-yasin { --ha-a: var(--c-hx-yasin-a); --ha-b: var(--c-hx-yasin-b); }
.ha-amma { --ha-a: var(--c-hx-amma-a); --ha-b: var(--c-hx-amma-b); }
.ha-quran { --ha-a: var(--c-hx-quran-a); --ha-b: var(--c-hx-quran-b); }
.ha-rock { fill: color-mix(in srgb, var(--c-feat-gold-2) 40%, var(--ha-a)); }
.ha-rock-2 { fill: color-mix(in srgb, var(--c-feat-gold-2) 22%, var(--ha-a)); }
.ha-cave { fill: color-mix(in srgb, var(--ha-a) 60%, black); }
.ha-orbit { fill: none; stroke: var(--c-feat-gold); stroke-width: .7; stroke-dasharray: 1.5 3; opacity: .55; }
.ha-ring { fill: none; stroke: var(--c-feat-gold); stroke-width: .8; opacity: .7; }
.ha-ar { fill: var(--c-feat-cream); font-family: var(--font-arabic); font-size: 24px; }
.ha-cover { fill: var(--c-hx-cover); }
.ha-cover-line { fill: none; stroke: var(--c-feat-gold); stroke-width: 1.2; }

/* ---------- Lesen: Weiterlesen und Surah-Liste ---------- */
.ha-read { --ha-a: var(--c-hx-read-a); --ha-b: var(--c-hx-read-b); }
.ha-lines path { fill: none; stroke: var(--ha-b); stroke-width: 1.1; stroke-linecap: round; opacity: .55; }
.rd-hero { background: linear-gradient(100deg, color-mix(in srgb, var(--c-hx-read-b) 14%, var(--c-surface)), var(--c-surface) 70%); }
.rd-hero .hx-go { background: color-mix(in srgb, var(--c-hx-read-b) 18%, var(--c-surface)); }
.rd-ar { font-family: var(--font-arabic); font-size: 22px; line-height: 1.6; color: color-mix(in srgb, var(--c-feat-gold-2) 55%, var(--c-text)); align-self: flex-start; }
/* achtzackiger Stern mit Nummer */
.sm { --sm-c: var(--c-sm-mekka); position: relative; display: grid; place-items: center; width: 44px; height: 44px; flex-shrink: 0; }
.sm-medina { --sm-c: var(--c-sm-medina); }
.sm-juz { --sm-c: var(--c-sm-juz); }
.sm svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.sm-shape rect { fill: var(--sm-c); stroke: var(--c-feat-gold); stroke-width: 1.2; stroke-linejoin: round; }
.sm-ring { fill: none; stroke: var(--c-feat-gold); stroke-width: .8; opacity: .75; }
.sm-n { position: relative; color: var(--c-feat-cream); font-weight: 700; font-size: 13px; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.sm-n.small { font-size: 11px; }
/* Liste */
.sr-list .sr-row { gap: var(--space-3); padding-left: var(--space-3); transition: background var(--motion-fast) var(--motion-ease); }
.sr-list .sr-row:hover { background: color-mix(in srgb, var(--c-feat-gold) 7%, var(--c-surface)); }
.sr-list .sr-row strong { color: var(--c-text); }
.sr-ar { font-size: 24px; color: color-mix(in srgb, var(--c-feat-gold-2) 55%, var(--c-text)); white-space: nowrap; }
.sr-legend { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin: 0; font-size: var(--text-xs); line-height: var(--leading-xs); }
.sr-legend > span { display: inline-flex; align-items: center; gap: 6px; }
.sr-legend .sm { width: 20px; height: 20px; }
:root[data-theme="dark"] .sr-ar, :root[data-theme="dark"] .rd-ar { color: var(--c-feat-gold); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .sr-ar, :root:not([data-theme="light"]) .rd-ar { color: var(--c-feat-gold); } }

/* ---------- Profilbild ---------- */
.av { overflow: hidden; position: relative; box-shadow: 0 0 0 2px var(--c-surface), 0 0 0 3px color-mix(in srgb, var(--c-feat-gold-2) 55%, var(--c-border)); }
.av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.home-av { display: inline-flex; border-radius: 50%; }
.fam-av-btn { position: relative; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 50%; flex-shrink: 0; }
.fam-av-btn:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 3px; }
.fam-av-cam { position: absolute; right: -2px; bottom: -2px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center;
  background: var(--c-ink); color: var(--c-on-ink); box-shadow: 0 0 0 2px var(--c-surface); }
.fam-photo-hint { align-self: flex-start; padding-left: 0; }
.pp { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-4); }
.pp-face { position: relative; flex-shrink: 0; }
.pp-busy { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 50%; background: color-mix(in srgb, var(--c-surface) 65%, transparent); }
.pp-actions { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); flex: 1; min-width: 160px; }
.pp-actions .btn { gap: 6px; }
.pp .error, .pp-note { width: 100%; margin: 0; }
.pp-note { font-size: var(--text-xs); line-height: var(--leading-xs); }

/* ---------- Landesfahnen (Übersetzung) ---------- */
.flag { flex-shrink: 0; border-radius: 3px; box-shadow: 0 0 0 1px color-mix(in srgb, var(--c-text) 14%, transparent), 0 1px 2px rgba(22,22,29,.12); }
.card-btn:has(.flag) { justify-content: flex-start; }

/* ---------- Tagesziel-Karte: Himmel je Tageszeit ---------- */
.goal.tz { position: relative; overflow: hidden; isolation: isolate; transition: background var(--motion-slow) var(--motion-ease); }
.tz-sky { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
.goal.tz-morgen { background: linear-gradient(170deg, var(--c-tz-morgen-a), var(--c-tz-morgen-b) 70%); }
.goal.tz-tag { background: linear-gradient(170deg, var(--c-tz-tag-a), var(--c-tz-tag-b) 70%); }
.goal.tz-abend { background: linear-gradient(170deg, var(--c-tz-abend-a), var(--c-tz-abend-b) 70%); }
.goal.tz-nacht { background: linear-gradient(170deg, var(--c-tz-nacht-a), var(--c-tz-nacht-b)); }
.goal.tz-met { background: linear-gradient(160deg, var(--c-tz-met-a), var(--c-tz-met-b)); }
.tz-label { font-size: var(--text-sm); line-height: var(--leading-sm); font-weight: 600; color: var(--c-text-muted); }
.tz-title { font-size: 30px; line-height: 36px; margin: 0; font-variant-numeric: tabular-nums; }
.tz-b { color: var(--c-text); }
.tz .bar { background: color-mix(in srgb, var(--c-surface) 75%, transparent); }
/* Bildteile */
.tz-sun { fill: var(--c-feat-gold); }
.tz-sun-low { fill: color-mix(in srgb, var(--c-feat-gold) 70%, var(--c-danger)); }
.tz-rays rect { fill: var(--c-feat-gold); opacity: .55; }
.tz-cloud { fill: white; opacity: .85; }
.tz-dune { fill: color-mix(in srgb, var(--c-feat-gold-2) 35%, transparent); }
.tz-bird { fill: none; stroke: color-mix(in srgb, var(--c-text) 45%, transparent); stroke-width: 1.6; stroke-linecap: round; }
.tz-moon { fill: var(--c-feat-gold); }
.tz-mosque { fill: color-mix(in srgb, var(--c-tz-nacht-a) 70%, black); }
.tz-octa rect { fill: var(--c-feat-gold); }
.tz-octa-in { fill: var(--c-tz-met-a); stroke: var(--c-feat-cream); stroke-width: 1; }
.tz-check { fill: none; stroke: var(--c-feat-cream); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.tz-octa { transform-box: fill-box; transform-origin: center; animation: tz-pop .7s cubic-bezier(.3, 1.5, .5, 1) both; }
@keyframes tz-pop { from { transform: scale(.4) rotate(-30deg); opacity: 0; } }
/* Dunkle Karten (Nacht, geschafft): helle Schrift, goldene Taste */
.goal.tz-dark, .goal.tz-dark .tz-b, .goal.tz-dark .h1 { color: var(--c-feat-cream); }
.goal.tz-dark .muted, .goal.tz-dark .tz-label { color: color-mix(in srgb, var(--c-feat-cream) 78%, transparent); }
.goal.tz-dark .btn-ink { background: var(--c-feat-gold); color: var(--c-tz-nacht-a); }
.goal.tz-met .btn-ink { color: var(--c-tz-met-a); }
.goal.tz-dark .bar { background: color-mix(in srgb, var(--c-feat-cream) 22%, transparent); }
.goal.tz-dark .bar > i { background: var(--c-feat-gold); }
.tz-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.tz-chip { padding: 4px 12px; border-radius: var(--radius-pill); font-size: var(--text-sm); line-height: var(--leading-sm);
  background: color-mix(in srgb, var(--c-feat-cream) 14%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-feat-gold) 45%, transparent); }
.tz-chip b { color: var(--c-feat-gold); font-weight: 700; }
/* Helle Himmel (Morgen, Tag, Abend) bleiben in jedem Design hell, deshalb feste dunkle Schrift und dunkle Taste */
.goal.tz-light, .goal.tz-light .h1, .goal.tz-light .tz-b { color: var(--c-tz-ink); }
.goal.tz-light .muted, .goal.tz-light .tz-label { color: var(--c-tz-ink-muted); }
.goal.tz-light .btn-ink { background: var(--c-tz-ink); color: var(--c-tz-on-ink); }
.goal.tz-light .bar { background: color-mix(in srgb, white 70%, transparent); }
.goal.tz-light .bar > i { background: var(--c-tz-ink); }
.goal.tz-light .tz-bird { stroke: color-mix(in srgb, var(--c-tz-ink) 45%, transparent); }
.goal.tz-met .tz-title { font-size: 26px; line-height: 32px; padding-right: 64px; }

/* ---------- Kennzahl-Kacheln (Hasanat, Verse, Zeit, Seiten) ---------- */
.st { --st-a: var(--c-st-hasanat-a); --st-b: var(--c-st-hasanat-b); display: block; flex-shrink: 0;
  filter: drop-shadow(0 3px 6px color-mix(in srgb, var(--st-a) 30%, transparent)); }
.st-verses { --st-a: var(--c-st-verses-a); --st-b: var(--c-st-verses-b); }
.st-time { --st-a: var(--c-st-time-a); --st-b: var(--c-st-time-b); }
.st-pages { --st-a: var(--c-st-pages-a); --st-b: var(--c-st-pages-b); }
.st-stop-a { stop-color: var(--st-a); }
.st-stop-b { stop-color: var(--st-b); }
.st-edge { fill: none; stroke: var(--c-feat-gold); stroke-opacity: .35; }
.st-shine { fill: none; stroke: var(--c-feat-cream); stroke-width: 2.2; stroke-linecap: round; }
.st-ring { fill: none; stroke: var(--st-a); stroke-width: 1.2; }
.st-dark { fill: var(--st-a); }
.st-glass { fill: color-mix(in srgb, var(--c-feat-cream) 25%, transparent); stroke: var(--c-feat-gold); stroke-width: 2; }
.st-sand { fill: none; stroke: var(--c-feat-gold); stroke-width: 1.4; }
.st-lines path { fill: none; stroke: var(--st-b); stroke-opacity: .55; stroke-width: 1.2; }

/* Fortschritt-Karte */
.feat-progress, .fa-progress { --fa-a: var(--c-feat-progress-a); --fa-b: var(--c-feat-progress-b); }
.fa-day { fill: color-mix(in srgb, var(--fa-b) 30%, var(--c-feat-cream)); }

/* ---------- Fasten ---------- */
.feat-fasten, .fa-fasten { --fa-a: var(--c-feat-fasten-a); --fa-b: var(--c-feat-fasten-b); }
.fa-dates { fill: var(--c-hx-date); stroke: var(--c-feat-gold-2); stroke-width: .6; }
.fa-glass { fill: color-mix(in srgb, var(--c-feat-cream) 30%, transparent); stroke: var(--c-feat-cream); stroke-width: .8; }
.fa-water { fill: var(--c-fs-water); opacity: .85; }
.ha-modo { --ha-a: var(--c-hx-modo-a); --ha-b: var(--c-hx-modo-b); }
.ha-weiss { --ha-a: var(--c-hx-weiss-a); --ha-b: var(--c-hx-weiss-b); }
.ha-sunset { fill: color-mix(in srgb, var(--c-feat-gold) 75%, var(--c-danger)); }
.ha-silhouette { fill: color-mix(in srgb, var(--ha-a) 80%, black); }
.ha-water { fill: var(--c-fs-water); opacity: .85; }
.ha-moon-full { fill: var(--c-feat-cream); filter: drop-shadow(0 0 6px color-mix(in srgb, var(--c-feat-cream) 70%, transparent)); }
.ha-moon-spot { fill: color-mix(in srgb, var(--c-feat-gold) 30%, var(--c-feat-cream)); }
.ha-moon-small { fill: var(--c-feat-cream); stroke: var(--c-feat-gold); stroke-width: .8; }
.ha-moon-shade { fill: color-mix(in srgb, var(--ha-a) 70%, transparent); }
/* Seiten */
.fs-intro { margin: 0; line-height: var(--leading-base); }
.fs-small { font-size: var(--text-sm); line-height: var(--leading-sm); margin: 0; }
.fs-hero { display: flex; flex-direction: column; gap: 4px; background: linear-gradient(110deg, color-mix(in srgb, var(--c-hx-modo-b) 14%, var(--c-surface)), var(--c-surface) 70%); }
.fs-hero.on { background: linear-gradient(110deg, var(--c-hx-modo-a), var(--c-hx-modo-b)); color: var(--c-feat-cream); border-color: transparent; }
.fs-days { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-lg); overflow: hidden; }
.fs-day { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--c-border); }
.fs-day:last-child { border-bottom: 0; }
.fs-day.today { background: color-mix(in srgb, var(--c-feat-gold) 12%, var(--c-surface)); }
.fs-day.blocked { opacity: .55; }
.fs-wd { width: 40px; height: 40px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: var(--text-sm);
  background: radial-gradient(circle at 30% 25%, var(--c-hx-modo-b), var(--c-hx-modo-a)); color: var(--c-feat-cream); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--c-feat-gold) 70%, transparent); }
.fs-month { display: flex; flex-direction: column; gap: var(--space-3); }
.fs-month.past { opacity: .6; }
.fs-moons { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); }
.fs-moon { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; padding: var(--space-3) var(--space-1); border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--c-hx-weiss-b) 8%, var(--c-surface)); font-size: var(--text-sm); line-height: var(--leading-sm); }
.fs-moon.today { background: linear-gradient(160deg, var(--c-hx-weiss-b), var(--c-hx-weiss-a)); color: var(--c-feat-cream); }
.fs-moon.today .muted { color: var(--c-feat-gold); }
.fs-moon.gone { opacity: .55; }
.fs-moon-disc { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; color: var(--c-hx-weiss-a); margin-bottom: 4px;
  background: radial-gradient(circle at 35% 30%, var(--c-feat-cream), color-mix(in srgb, var(--c-feat-gold) 45%, var(--c-feat-cream)));
  box-shadow: 0 0 10px color-mix(in srgb, var(--c-feat-gold) 45%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--c-feat-gold) 70%, transparent); }

/* ---------- Fasten: Erinnerung am Vorabend ---------- */
.fs-remind { display: flex; flex-direction: column; gap: var(--space-3); }
.fs-remind strong svg { vertical-align: -2px; margin-right: 4px; color: var(--c-hx-modo-b); }
.fs-time { max-width: 180px; }
.fs-switch { position: relative; flex: none; width: 50px; height: 30px; cursor: pointer; }
.fs-switch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.fs-switch span { position: absolute; inset: 0; border-radius: 999px; background: var(--c-border); transition: background .2s; }
.fs-switch span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: var(--c-surface); box-shadow: 0 1px 3px rgb(0 0 0 / .25); transition: transform .2s; }
.fs-switch input:checked + span { background: var(--c-hx-modo-b); }
.fs-switch input:checked + span::after { transform: translateX(20px); }
.fs-switch input:focus-visible + span { outline: 2px solid var(--c-accent); outline-offset: 2px; }

/* ---------- Feedback: auffällig golden umrandet ---------- */
.fb-card {
  position: relative; display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-4); border-radius: 20px; background: var(--c-surface);
  border: 2px solid var(--c-feat-gold);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-feat-gold) 22%, transparent), 0 8px 24px color-mix(in srgb, var(--c-feat-gold) 18%, transparent);
  animation: fb-glow 2.8s ease-in-out infinite;
}
@keyframes fb-glow {
  50% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--c-feat-gold) 12%, transparent), 0 8px 28px color-mix(in srgb, var(--c-feat-gold) 28%, transparent); }
}
@media (prefers-reduced-motion: reduce) { .fb-card { animation: none; } }
.fb-head { display: flex; gap: var(--space-3); align-items: flex-start; }
.fb-badge { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, var(--c-feat-gold), color-mix(in srgb, var(--c-feat-gold) 60%, var(--c-feat-fasten-a))); color: var(--c-feat-fasten-a); }
.fb-title { margin: 0; font-size: 18px; }
.fb-kinds { display: flex; gap: 8px; flex-wrap: wrap; }
.fb-kind { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--c-border); background: transparent; color: var(--c-text); font: inherit; font-size: 14px; cursor: pointer; }
.fb-kind.on { background: var(--c-feat-gold); border-color: var(--c-feat-gold); color: var(--c-feat-fasten-a); font-weight: 600; }
.fb-kind:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }
.fb-text { min-height: 110px; resize: vertical; font: inherit; line-height: 1.45; }
.fb-thanks { display: flex; flex-direction: column; gap: 4px; padding: var(--space-3); border-radius: 14px; background: color-mix(in srgb, var(--c-feat-gold) 14%, var(--c-surface)); }
.fb-thanks strong svg { vertical-align: -3px; margin-right: 4px; }
.fb-item.new { border: 2px solid var(--c-feat-gold); }
.fb-chip-wunsch { background: color-mix(in srgb, var(--c-feat-gold) 30%, var(--c-surface)); }
.fb-chip-fehler { background: color-mix(in srgb, var(--c-danger) 18%, var(--c-surface)); }
.fb-chip-lob { background: color-mix(in srgb, var(--c-done) 22%, var(--c-surface)); }

/* ---------- Fasten-Feier (nach dem Abhaken) ---------- */
.fc-scrim { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 16px;
  background: color-mix(in srgb, var(--c-fc-night-a) 72%, transparent); backdrop-filter: blur(6px); animation: fc-in .3s ease both; }
@keyframes fc-in { from { opacity: 0; } }
.fc-stage { position: relative; width: min(360px, 100%); height: min(620px, calc(100dvh - 32px)); border-radius: 24px; overflow: hidden;
  text-align: center; color: var(--c-fc-cream); background: linear-gradient(180deg, var(--c-fc-night-a), var(--c-fc-night-b) 72%);
  box-shadow: 0 20px 60px rgb(0 0 0 / .45); }
.fc-ember { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, var(--c-fc-ember)); animation: fc-cool 2.6s ease 2.2s forwards; }
@keyframes fc-cool { to { opacity: 0; } }
.fc-moon { position: absolute; top: 6px; left: 50%; transform: translateX(-50%); overflow: visible; }
.fc-gold { fill: var(--c-fc-gold); }
.fc-disc { transform-box: fill-box; transform-origin: center; opacity: 0; transform: scale(.3); animation: fc-pop .6s cubic-bezier(.2,1.5,.4,1) forwards; }
@keyframes fc-pop { to { opacity: 1; transform: scale(1); } }
.fc-check { stroke: var(--c-fc-ink); stroke-dasharray: 60; stroke-dashoffset: 60; animation: fc-draw .5s ease .45s forwards, fc-out .35s ease 1.1s forwards; }
@keyframes fc-draw { to { stroke-dashoffset: 0; } }
@keyframes fc-out { to { opacity: 0; } }
.fc-bite { animation: fc-bite .9s ease 1.05s forwards; }
@keyframes fc-bite { to { transform: translate(-92px, 46px); } }
.fc-star { fill: var(--c-fc-gold-2); opacity: 0; transform-box: fill-box; transform-origin: center; animation: fc-burst 1.3s ease 1.15s forwards; }
.fc-star.tw { animation: fc-burst 1.3s ease 1.15s forwards, fc-twinkle 1.2s ease-in-out 2.5s infinite alternate; }
@keyframes fc-burst { 0% { opacity: 0; transform: translate(0, 0) scale(.2); } 30% { opacity: 1; } 100% { opacity: .95; transform: translate(var(--dx), var(--dy)) scale(var(--s)); } }
@keyframes fc-twinkle { from { opacity: .35; } to { opacity: 1; } }
.fc-shield { position: absolute; top: 150px; left: 50%; width: 150px; height: 168px; transform: translateX(-50%); overflow: visible; }
.fc-shield-g { opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(.4); animation: fc-pop .7s cubic-bezier(.2,1.4,.4,1) 1.3s forwards; }
.fc-shield-edge { fill: var(--c-fc-gold); opacity: .9; }
.fc-shield-fill { fill: var(--c-fc-shield); opacity: .75; }
.fc-ring { fill: none; stroke: var(--c-fc-gold); stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; animation: fc-ring 1.2s ease-out 2s 2; }
@keyframes fc-ring { 0% { opacity: .9; transform: scale(.95); } 100% { opacity: 0; transform: scale(1.45); } }
.fc-count { position: absolute; top: 196px; left: 0; right: 0; line-height: 1; opacity: 0; animation: fc-up .4s ease 1.4s forwards; }
.fc-count b { display: block; font-size: 52px; font-weight: 800; color: var(--c-fc-gold-2); letter-spacing: -1px; font-variant-numeric: tabular-nums; }
.fc-count span { display: block; margin-top: 2px; font-size: 17px; font-weight: 600; color: var(--c-fc-gold-2); }
.fc-spark { position: absolute; bottom: 64px; width: 9px; height: 9px; margin-left: -4px; border-radius: 50%; opacity: 0;
  background: var(--c-fc-fire-c); box-shadow: 0 0 10px var(--c-fc-fire-a); animation: fc-spark 1.1s ease-out forwards; }
@keyframes fc-spark { 0% { opacity: 1; transform: translate(0, 0); } 55% { opacity: 1; transform: translate(0, var(--rise, -228px)); } 100% { opacity: 0; transform: translate(var(--bx), calc(var(--rise, -228px) + 60px)); } }
@media (max-height: 660px) {
  .fc-shield { top: 132px; width: 124px; height: 139px; }
  .fc-count { top: 166px; }
  .fc-count b { font-size: 42px; }
  .fc-spark { --rise: -180px; }
  .fc-cap { bottom: 70px; }
  .fc-cap h2 { font-size: 17px; }
}
.fc-fire { position: absolute; left: 0; right: 0; bottom: -6px; height: 100px; transform-origin: bottom; animation: fc-recede 2.6s cubic-bezier(.3,.6,.2,1) 2.2s forwards; }
@keyframes fc-recede { to { transform: translateY(110px) scaleY(.4); opacity: .1; } }
.fc-f1 { fill: var(--c-fc-fire-b); }
.fc-f2 { fill: var(--c-fc-fire-a); opacity: .9; }
.fc-f3 { fill: var(--c-fc-fire-c); opacity: .8; }
.fc-flame { transform-box: fill-box; transform-origin: bottom; animation: fc-flick .6s ease-in-out infinite alternate; }
.fc-flame:nth-child(2n) { animation-duration: .8s; }
@keyframes fc-flick { to { transform: scaleY(1.12) skewX(3deg); } }
.fc-cap { position: absolute; left: 18px; right: 18px; bottom: 78px; opacity: 0; animation: fc-up .8s ease 3.9s forwards; }
.fc-cap h2 { margin: 0; font-size: 19px; line-height: 1.3; color: var(--c-fc-gold-2); }
.fc-sub { margin: 6px 0 0; font-size: 14px; }
.fc-total { display: inline-block; margin: 10px 0 0; padding: 6px 12px; border-radius: 999px; font-size: 13px;
  background: color-mix(in srgb, var(--c-fc-gold) 18%, transparent); border: 1px solid color-mix(in srgb, var(--c-fc-gold) 45%, transparent); }
.fc-total b { color: var(--c-fc-gold-2); }
.fc-src { margin: 6px 0 0; font-size: 11px; opacity: .7; }
.fc-btn { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); opacity: 0; animation: fc-up .6s ease 4.2s forwards;
  padding: 12px 28px; border: 0; border-radius: 999px; font: inherit; font-weight: 700; background: var(--c-fc-gold); color: var(--c-fc-ink); cursor: pointer; }
.fc-btn:focus-visible { outline: 3px solid var(--c-fc-cream); outline-offset: 3px; }
@keyframes fc-up { from { opacity: 0; translate: 0 10px; } to { opacity: 1; translate: 0 0; } }
@media (prefers-reduced-motion: reduce) {
  .fc-scrim *, .fc-scrim { animation-duration: .01s !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; }
  .fc-spark, .fc-check, .fc-fire, .fc-ember, .fc-ring { display: none; }
}

/* ---------- Fasten: abhaken und Gesamtzähler ---------- */
.fs-day-btn { display: flex; align-items: center; gap: var(--space-3); width: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.fs-day-btn:disabled { cursor: default; }
.fs-day-btn:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 4px; border-radius: 8px; }
.fs-mark { flex: none; display: inline-flex; align-items: center; gap: 4px; padding: 5px 10px; border-radius: 999px; font-size: 13px; font-weight: 600;
  border: 1.5px dashed color-mix(in srgb, var(--c-hx-modo-b) 70%, transparent); color: var(--c-hx-modo-b); }
.fs-mark.done { border: 0; background: linear-gradient(135deg, var(--c-fc-gold), var(--c-feat-gold-2)); color: var(--c-fc-ink); }
.fs-day.done .fs-wd { background: linear-gradient(135deg, var(--c-fc-gold), var(--c-feat-gold-2)); color: var(--c-fc-ink); }
.fs-moon-btn { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.fs-moon-btn:disabled { cursor: default; }
.fs-moon-btn:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 4px; border-radius: 8px; }
.fs-moon.done .fs-moon-disc { background: linear-gradient(135deg, var(--c-fc-gold), var(--c-feat-gold-2)); color: var(--c-fc-ink); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-fc-gold) 35%, transparent); }
.fs-moon .fs-tap { font-size: 12px; font-weight: 600; color: var(--c-hx-modo-b); }
.fs-moon.done .fs-tap { color: var(--c-text); }
.fs-total { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); padding: var(--space-4); border-radius: 20px; color: var(--c-fc-cream);
  background: linear-gradient(135deg, var(--c-fc-night-a), var(--c-fc-night-b)); border: 1px solid color-mix(in srgb, var(--c-fc-gold) 40%, transparent); }
.fs-total-cell { display: flex; flex-direction: column; gap: 2px; }
.fs-total-cell b { font-size: 30px; line-height: 1.1; font-weight: 800; color: var(--c-fc-gold-2); font-variant-numeric: tabular-nums; }
.fs-total-cell span { font-size: 13px; opacity: .9; }
.fs-total-cell + .fs-total-cell { border-left: 1px solid color-mix(in srgb, var(--c-fc-gold) 30%, transparent); padding-left: var(--space-3); }
.fs-total p { grid-column: 1 / -1; margin: 0; font-size: 12px; opacity: .8; }
.fs-moon.gone.done { opacity: 1; }

/* ---------- Das Gebet ---------- */
.feat-gebet, .fa-gebet { --fa-a: var(--c-feat-gebet-a); --fa-b: var(--c-feat-gebet-b); }
.pr-link { padding: 0; border: 0; background: none; font: inherit; color: var(--c-feat-gebet-b); text-decoration: underline; cursor: pointer; }
.pr-hero { display: grid; grid-template-columns: 1fr auto; gap: 2px var(--space-3); align-items: end; padding: var(--space-4) var(--space-5);
  border-radius: 20px; color: var(--c-fc-cream); background: linear-gradient(135deg, var(--c-feat-gebet-a), var(--c-feat-gebet-b));
  border: 1px solid color-mix(in srgb, var(--c-fc-gold) 35%, transparent); box-shadow: var(--shadow-card); }
.pr-hero-label { grid-column: 1 / -1; font-size: 13px; opacity: .85; }
.pr-hero-main { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.pr-hero-main strong { font-size: 28px; line-height: 1.1; color: var(--c-fc-gold-2); }
.pr-hero-ar { font-family: var(--font-arabic); font-size: 22px; opacity: .9; }
.pr-hero-time { text-align: right; display: flex; flex-direction: column; }
.pr-hero-time b { font-size: 28px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.pr-hero-time span { font-size: 13px; opacity: .85; }
.pr-days { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.pr-days::-webkit-scrollbar { display: none; }
.pr-day { flex: none; display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 62px; padding: 8px 10px; border-radius: 14px;
  border: 1px solid var(--c-border); background: var(--c-surface); color: var(--c-text); font: inherit; font-size: 13px; cursor: pointer; }
.pr-day b { font-size: 14px; font-variant-numeric: tabular-nums; }
.pr-day.full b { color: var(--c-feat-gebet-b); }
.pr-day.on { background: var(--c-feat-gebet-a); border-color: var(--c-feat-gebet-a); color: var(--c-fc-cream); }
.pr-day.on.full b { color: var(--c-fc-gold-2); }
.pr-day:focus-visible, .pr-check:focus-visible, .pr-mark:focus-visible, .pr-chip:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }
.pr-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-lg); overflow: hidden; }
.pr-row { display: flex; flex-direction: column; gap: 8px; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--c-border); }
.pr-row:last-child { border-bottom: 0; }
.pr-row.now { background: color-mix(in srgb, var(--c-feat-gebet-b) 10%, var(--c-surface)); box-shadow: inset 3px 0 0 var(--c-feat-gebet-b); }
.pr-row-main { display: flex; align-items: center; gap: var(--space-3); }
.pr-ar { font-family: var(--font-arabic); font-weight: 400; font-size: 17px; margin-left: 4px; color: var(--c-text-muted); }
.pr-check { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; padding: 0; cursor: pointer;
  border: 2px solid color-mix(in srgb, var(--c-feat-gebet-b) 60%, var(--c-border)); background: transparent; color: var(--c-fc-ink); }
.pr-check:disabled { cursor: default; opacity: .4; border-style: dashed; }
.pr-row.done .pr-check { border: 0; background: linear-gradient(135deg, var(--c-fc-gold), var(--c-feat-gold-2)); opacity: 1; }
.pr-mark { flex: none; padding: 6px 12px; border-radius: 999px; border: 1.5px solid var(--c-feat-gebet-b); background: transparent;
  color: var(--c-feat-gebet-b); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.pr-status { display: flex; gap: 5px; flex-wrap: wrap; padding-left: 46px; margin-top: -2px; }
.pr-chip { padding: 3px 9px; border-radius: 999px; border: 1px solid var(--c-border); background: transparent; color: var(--c-text-muted); font: inherit; font-size: 12px; cursor: pointer; }
.pr-chip.on { background: var(--c-feat-gebet-a); border-color: var(--c-feat-gebet-a); color: var(--c-fc-cream); font-weight: 600; }
.pr-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.pr-stats div { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 4px; border-radius: 16px; text-align: center;
  background: linear-gradient(160deg, var(--c-feat-gebet-a), var(--c-feat-gebet-b)); color: var(--c-fc-cream); }
.pr-stats b { font-size: 20px; font-variant-numeric: tabular-nums; color: var(--c-fc-gold-2); }
.pr-stats span { font-size: 11px; line-height: 1.2; opacity: .9; }
.pr-qada-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pr-qada-num { display: flex; flex-direction: column; padding: 10px 14px; border-radius: 14px; background: color-mix(in srgb, var(--c-feat-gebet-b) 10%, var(--c-surface)); }
.pr-qada-num b { font-size: 26px; font-variant-numeric: tabular-nums; }
.pr-qada-num span { font-size: 13px; color: var(--c-text-muted); }

/* ---------- Gebet-Feier: der Fluss ---------- */
.pc-scrim { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 16px;
  background: color-mix(in srgb, var(--c-pc-sky-a) 72%, transparent); backdrop-filter: blur(6px); animation: fc-in .3s ease both; }
.pc-stage { position: relative; width: min(360px, 100%); height: min(600px, calc(100dvh - 32px)); border-radius: 24px; overflow: hidden; text-align: center;
  color: var(--c-fc-cream); background: linear-gradient(180deg, var(--c-pc-sky-a), var(--c-pc-sky-b)); box-shadow: 0 20px 60px rgb(0 0 0 / .45); }
.pc-stars { position: absolute; inset: 0 0 50% 0; opacity: .6;
  background-image: radial-gradient(1.5px 1.5px at 12% 20%, var(--c-fc-gold-2) 50%, transparent 51%), radial-gradient(1px 1px at 30% 8%, var(--c-fc-cream) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 58% 16%, var(--c-fc-gold-2) 50%, transparent 51%), radial-gradient(1px 1px at 82% 10%, var(--c-fc-cream) 50%, transparent 51%),
    radial-gradient(1px 1px at 90% 30%, var(--c-fc-gold-2) 50%, transparent 51%), radial-gradient(1px 1px at 6% 40%, var(--c-fc-cream) 50%, transparent 51%); }
.pc-orbs { list-style: none; margin: 0; padding: 0; position: absolute; top: 46px; left: 0; right: 0; height: 60px; }
.pc-orb { position: absolute; top: 0; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 6px;
  opacity: 0; animation: pc-orb-in .45s ease calc(var(--i) * .15s + .1s) forwards; }
.pc-orb-dot { width: 26px; height: 26px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, var(--c-fc-cream), var(--c-fc-gold) 55%, var(--c-feat-gold-2));
  box-shadow: 0 0 16px var(--c-fc-gold); animation: pc-fall .6s cubic-bezier(.5,0,.9,.6) calc(var(--i) * .15s + 1s) forwards; }
.pc-orb-name { font-size: 11px; font-weight: 600; color: var(--c-fc-gold-2); animation: fc-out .3s ease calc(var(--i) * .15s + 1s) forwards; }
@keyframes pc-orb-in { from { opacity: 0; translate: 0 -12px; } to { opacity: 1; translate: 0 0; } }
@keyframes pc-fall { 80% { opacity: 1; } to { transform: translateY(var(--fall, 400px)) scale(.5); opacity: 0; } }
.pc-count { position: absolute; top: 118px; left: 0; right: 0; line-height: 1; opacity: 0; animation: fc-up .5s ease 2.2s forwards; }
.pc-count b { display: block; font-size: 56px; font-weight: 800; color: var(--c-fc-gold-2); }
.pc-count span { font-size: 16px; font-weight: 600; color: var(--c-fc-gold-2); }
.pc-river { position: absolute; left: 0; right: 0; bottom: 0; height: 160px; overflow: hidden; }
.pc-wave { position: absolute; left: 0; width: 200%; height: 100%; }
.pc-wave.w3 { top: 0; fill: var(--c-pc-river-1); animation: pc-flow 7s linear infinite; }
.pc-wave.w2 { top: 14px; fill: var(--c-pc-river-2); opacity: .85; animation: pc-flow 5s linear infinite reverse; }
.pc-wave.w1 { top: 30px; fill: var(--c-pc-river-1); opacity: .9; animation: pc-flow 4s linear infinite; }
@keyframes pc-flow { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.pc-speck { position: absolute; z-index: 2; border-radius: 40%; background: var(--c-pc-speck); opacity: .9; animation: pc-wash 1.6s ease-in forwards; }
@keyframes pc-wash { to { transform: translateX(160px) scale(.3); opacity: 0; } }
.pc-ripple { position: absolute; z-index: 3; top: 22px; width: 40px; height: 12px; margin-left: -20px; border-radius: 50%; border: 2px solid var(--c-fc-gold-2); opacity: 0; animation: pc-ripple .9s ease-out forwards; }
@keyframes pc-ripple { 0% { opacity: .95; transform: scale(.3); } 100% { opacity: 0; transform: scale(2.2); } }
.pc-shine { position: absolute; inset: 34px 0 0 0; z-index: 4; opacity: 0; mix-blend-mode: screen;
  background: linear-gradient(100deg, transparent 20%, color-mix(in srgb, var(--c-pc-river-3) 70%, transparent) 45%, color-mix(in srgb, var(--c-fc-gold-2) 45%, transparent) 55%, transparent 80%);
  background-size: 250% 100%; animation: pc-shine 2.4s ease 2.6s forwards; }
@keyframes pc-shine { 0% { opacity: 0; background-position: 100% 0; } 30% { opacity: .9; } 100% { opacity: .35; background-position: 0 0; } }
.pc-cap { position: absolute; left: 18px; right: 18px; top: 200px; opacity: 0; animation: fc-up .8s ease 3.4s forwards; }
.pc-cap h2 { margin: 0; font-size: 20px; line-height: 1.3; color: var(--c-fc-gold-2); }
.pc-sub { margin: 8px 0 0; font-size: 14px; line-height: 1.45; }
.pc-streak { display: inline-block; margin: 10px 0 0; padding: 6px 12px; border-radius: 999px; font-size: 13px;
  background: color-mix(in srgb, var(--c-fc-gold) 18%, transparent); border: 1px solid color-mix(in srgb, var(--c-fc-gold) 45%, transparent); }
.pc-streak b { color: var(--c-fc-gold-2); }
.pc-src { margin: 6px 0 0; font-size: 11px; opacity: .7; }
.pc-btn { position: absolute; z-index: 5; left: 50%; bottom: 22px; transform: translateX(-50%); opacity: 0; animation: fc-up .6s ease 4s forwards;
  padding: 12px 28px; border: 0; border-radius: 999px; font: inherit; font-weight: 700; background: var(--c-fc-gold); color: var(--c-fc-ink); cursor: pointer; }
.pc-btn:focus-visible { outline: 3px solid var(--c-fc-cream); outline-offset: 3px; }
@media (max-height: 640px) { .pc-orb-dot { --fall: 330px; } .pc-count { top: 104px; } .pc-count b { font-size: 44px; } .pc-cap { top: 168px; } .pc-cap h2 { font-size: 18px; } .pc-river { height: 130px; } }
@media (prefers-reduced-motion: reduce) {
  .pc-scrim *, .pc-scrim { animation-duration: .01s !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; }
  .pc-orbs, .pc-speck, .pc-ripple { display: none; }
}

/* ---------- Gebet: Schnellzugriff, Erinnerung, Sunna ---------- */
.pr-links { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pr-link-tile { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 16px; text-decoration: none; color: var(--c-text);
  background: var(--c-surface); border: 1px solid var(--c-border); box-shadow: var(--shadow-card); }
.pr-link-tile:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }
.pr-link-tile b { display: block; font-size: 14px; line-height: 1.25; }
.pr-link-tile small { display: block; font-size: 12px; color: var(--c-text-muted); }
.pr-link-ic, .pr-head-ic { flex: none; display: grid; place-items: center; border-radius: 12px; color: var(--c-fc-gold-2);
  background: linear-gradient(140deg, var(--c-feat-gebet-a), var(--c-feat-gebet-b)); }
.pr-link-ic { width: 40px; height: 40px; }
.pr-head-ic { width: 60px; height: 60px; border-radius: 16px; box-shadow: var(--shadow-card); }
.pr-remind strong svg { vertical-align: -2px; margin-right: 4px; color: var(--c-feat-gebet-b); }
.pr-rem-prayers { display: flex; gap: 6px; flex-wrap: wrap; }
.pr-rem-prayers .pr-chip { padding: 6px 12px; font-size: 13px; }
.pr-sunnah { gap: var(--space-3); margin-top: var(--space-2); }
.pr-rakat { flex: none; padding: 4px 10px; border-radius: 999px; font-size: 13px; background: color-mix(in srgb, var(--c-feat-gebet-b) 12%, var(--c-surface)); }
.pr-rakat b { font-size: 16px; }
.pr-rakat.full { background: linear-gradient(135deg, var(--c-fc-gold), var(--c-feat-gold-2)); color: var(--c-fc-ink); }
.pr-sunnah-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.pr-sn { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 14px; text-align: left; cursor: pointer;
  border: 1px solid var(--c-border); background: var(--c-surface); color: var(--c-text); font: inherit; }
.pr-sn:disabled { cursor: default; opacity: .6; }
.pr-sn b { display: block; font-size: 14px; }
.pr-sn small { display: block; font-size: 12px; color: var(--c-text-muted); }
.pr-sn-check { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; font-size: 13px; font-weight: 700;
  border: 2px solid color-mix(in srgb, var(--c-feat-gebet-b) 55%, var(--c-border)); color: var(--c-feat-gebet-b); }
.pr-sn.on { border-color: color-mix(in srgb, var(--c-fc-gold) 70%, var(--c-border)); background: color-mix(in srgb, var(--c-fc-gold) 10%, var(--c-surface)); }
.pr-sn.on .pr-sn-check { border: 0; background: linear-gradient(135deg, var(--c-fc-gold), var(--c-feat-gold-2)); color: var(--c-fc-ink); }
.pr-sn:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }
.pg-progress { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--c-text-muted); }

/* ---------- Qibla-Kompass ---------- */
.qb-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 28px 16px 18px; border-radius: 24px;
  background: radial-gradient(circle at 50% 40%, var(--c-feat-gebet-b), var(--c-feat-gebet-a) 75%); color: var(--c-fc-cream); box-shadow: var(--shadow-card);
  transition: box-shadow .3s; }
.qb-card.on { box-shadow: 0 0 0 4px var(--c-fc-gold), 0 0 30px color-mix(in srgb, var(--c-fc-gold) 60%, transparent); }
.qb-pointer { position: absolute; top: 10px; left: 50%; width: 0; height: 0; margin-left: -10px; border-left: 10px solid transparent; border-right: 10px solid transparent;
  border-top: 16px solid var(--c-fc-gold); z-index: 2; }
.qb-dial { width: min(300px, 80vw); height: auto; transition: transform .25s ease-out; }
.qb-face { fill: color-mix(in srgb, var(--c-pc-sky-a) 70%, transparent); }
.qb-rim { fill: none; stroke: var(--c-fc-gold); stroke-width: 3; }
.qb-tick { stroke: color-mix(in srgb, var(--c-fc-cream) 55%, transparent); stroke-width: 1.5; }
.qb-tick.big { stroke: var(--c-fc-gold-2); stroke-width: 2.5; }
.qb-dir { fill: var(--c-fc-cream); font-size: 18px; font-weight: 700; text-anchor: middle; }
.qb-dir.n { fill: var(--c-fc-gold-2); }
.qb-line { stroke: var(--c-fc-gold); stroke-width: 4; stroke-linecap: round; }
.qb-kaaba { fill: var(--c-hx-kaaba); stroke: var(--c-fc-gold); stroke-width: 2; }
.qb-kaaba-band { fill: var(--c-fc-gold); }
.qb-hub { fill: var(--c-fc-gold); }
.qb-status { margin: 0; font-weight: 700; font-size: 17px; color: var(--c-fc-gold-2); text-align: center; }
@media (prefers-reduced-motion: reduce) { .qb-dial { transition: none; } }

/* ---------- Sunna: Häuser im Paradies ---------- */
.pr-houses { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 14px; color: var(--c-fc-cream);
  background: linear-gradient(135deg, var(--c-feat-gebet-a), var(--c-feat-gebet-b)); }
.pr-houses b { font-size: 18px; color: var(--c-fc-gold-2); }
.pr-h-dome { fill: var(--c-fc-gold-2); } .pr-h-body { fill: var(--c-fc-gold); } .pr-h-door { fill: var(--c-feat-gebet-a); }
.sc-scrim { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 16px;
  background: color-mix(in srgb, var(--c-feat-gebet-a) 72%, transparent); backdrop-filter: blur(6px); animation: fc-in .3s ease both; }
.sc-stage { position: relative; width: min(360px, 100%); height: min(560px, calc(100dvh - 32px)); border-radius: 24px; overflow: hidden; text-align: center;
  color: var(--c-fc-cream); background: radial-gradient(circle at 50% 35%, var(--c-feat-gebet-b), var(--c-feat-gebet-a) 70%); box-shadow: 0 20px 60px rgb(0 0 0 / .45); }
.sc-badge { position: absolute; top: 16px; right: 18px; font-weight: 800; font-size: 15px; color: var(--c-fc-gold-2); opacity: 0; animation: fc-up .3s ease .2s forwards; }
.sc-art { position: absolute; left: 50%; top: 40px; transform: translateX(-50%); }
.sc-gold { fill: var(--c-fc-gold); } .sc-gold2 { fill: var(--c-fc-gold-2); } .sc-gold3 { fill: var(--c-feat-gold-2); } .sc-cream { fill: var(--c-fc-cream); }
.sc-brick { opacity: 0; transform: translateY(-140px); animation: sc-drop .5s cubic-bezier(.3,1.4,.5,1) calc(var(--i) * .14s + .2s) forwards; }
@keyframes sc-drop { to { opacity: 1; transform: translateY(0); } }
.sc-roof, .sc-dome { opacity: 0; transform-box: fill-box; transform-origin: 50% 100%; }
.sc-roof { animation: sc-pop .5s ease 2s forwards; }
.sc-dome { animation: sc-pop .6s cubic-bezier(.2,1.5,.4,1) 2.3s forwards; }
@keyframes sc-pop { from { opacity: 0; transform: scale(.3); } to { opacity: 1; transform: scale(1); } }
.sc-door { fill: var(--c-hx-date); opacity: 0; animation: sc-show .3s ease 1.9s forwards, sc-glow 1s ease 2.7s forwards; }
@keyframes sc-show { to { opacity: 1; } }
@keyframes sc-glow { from { opacity: 1; } to { opacity: 1; fill: var(--c-fc-gold-2); } }
.sc-spark { opacity: 0; animation: fc-twinkle 1.4s ease-in-out var(--d) infinite alternate; }
.sc-cap { position: absolute; left: 18px; right: 18px; top: 300px; opacity: 0; animation: fc-up .8s ease 3s forwards; }
.sc-cap h2 { margin: 0; font-size: 20px; line-height: 1.3; color: var(--c-fc-gold-2); }
.sc-sub { margin: 6px 0 0; font-size: 14px; }
.sc-houses { display: inline-block; margin: 12px 0 0; padding: 7px 14px; border-radius: 999px; font-size: 14px;
  background: color-mix(in srgb, var(--c-fc-gold) 18%, transparent); border: 1px solid color-mix(in srgb, var(--c-fc-gold) 45%, transparent); }
.sc-houses b { font-size: 17px; color: var(--c-fc-gold-2); }
.sc-src { margin: 6px 0 0; font-size: 11px; opacity: .7; }
.sc-btn { position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%); opacity: 0; animation: fc-up .6s ease 3.5s forwards;
  padding: 12px 28px; border: 0; border-radius: 999px; font: inherit; font-weight: 700; background: var(--c-fc-gold); color: var(--c-fc-ink); cursor: pointer; }
.sc-btn:focus-visible { outline: 3px solid var(--c-fc-cream); outline-offset: 3px; }
@media (max-height: 600px) { .sc-art { top: 20px; transform: translateX(-50%) scale(.85); transform-origin: top center; } .sc-cap { top: 250px; } }
@media (prefers-reduced-motion: reduce) { .sc-scrim *, .sc-scrim { animation-duration: .01s !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; } }

/* ---------- Witr: der eine Stern ---------- */
.wc-scrim { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 16px;
  background: color-mix(in srgb, var(--c-wc-night) 72%, transparent); backdrop-filter: blur(6px); animation: fc-in .3s ease both; }
.wc-stage { position: relative; width: min(360px, 100%); height: min(560px, calc(100dvh - 32px)); border-radius: 24px; overflow: hidden; text-align: center;
  color: var(--c-fc-cream); background: radial-gradient(circle at 50% 28%, var(--c-wc-sky), var(--c-wc-night) 75%); box-shadow: 0 20px 60px rgb(0 0 0 / .45); }
.wc-badge { position: absolute; top: 16px; right: 18px; font-weight: 800; font-size: 15px; color: var(--c-fc-gold-2); opacity: 0; animation: fc-up .3s ease .2s forwards; }
.wc-art { position: absolute; left: 50%; top: 30px; transform: translateX(-50%); }
.wc-gold { fill: var(--c-fc-gold); } .wc-gold2 { fill: var(--c-fc-gold-2); } .wc-gold3 { fill: var(--c-feat-gold-2); } .wc-sil { fill: var(--c-wc-sil); }
.wc-bgstar { fill: var(--c-fc-cream); opacity: .25; animation: fc-twinkle 1.6s ease-in-out var(--d) infinite alternate; }
.wc-lan { opacity: .18; transform-box: fill-box; transform-origin: 50% 50%;
  animation: wc-lit .35s ease calc(var(--i) * .6s + .4s) forwards, wc-merge .7s cubic-bezier(.5,0,.3,1) 2.2s forwards; }
.wc-glow { fill: var(--c-fc-gold); fill-opacity: .22; opacity: 0; animation: wc-lit .35s ease calc(var(--i) * .6s + .4s) forwards; }
@keyframes wc-lit { to { opacity: 1; } }
@keyframes wc-merge { from { opacity: 1; transform: translate(0, 0) scale(1); } to { opacity: 0; transform: translate(var(--dx), -62px) scale(.3); } }
.wc-big { fill: var(--c-fc-gold-2); opacity: 0; transform-box: fill-box; transform-origin: 50% 50%; animation: sc-pop .6s cubic-bezier(.2,1.6,.4,1) 2.75s forwards; }
.wc-halo { fill: var(--c-fc-gold-2); fill-opacity: .09; opacity: 0; transform-box: fill-box; transform-origin: 50% 50%;
  animation: wc-lit .6s ease 2.8s forwards, wc-pulse 2.2s ease-in-out 3.4s infinite; }
@keyframes wc-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .5; transform: scale(1.25); } }
.wc-cap { position: absolute; left: 18px; right: 18px; top: 318px; opacity: 0; animation: fc-up .8s ease 3.2s forwards; }
.wc-cap h2 { margin: 0; font-size: 20px; line-height: 1.3; color: var(--c-fc-gold-2); }
.wc-sub { margin: 6px 0 0; font-size: 14px; }
.wc-nights { display: inline-block; margin: 12px 0 0; padding: 7px 14px; border-radius: 999px; font-size: 14px;
  background: color-mix(in srgb, var(--c-fc-gold) 16%, transparent); border: 1px solid color-mix(in srgb, var(--c-fc-gold) 45%, transparent); }
.wc-nights b { font-size: 17px; color: var(--c-fc-gold-2); }
.wc-src { margin: 6px 0 0; font-size: 11px; opacity: .7; }
.wc-btn { position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%); opacity: 0; animation: fc-up .6s ease 3.6s forwards;
  padding: 12px 28px; border: 0; border-radius: 999px; font: inherit; font-weight: 700; background: var(--c-fc-gold); color: var(--c-fc-ink); cursor: pointer; }
.wc-btn:focus-visible { outline: 3px solid var(--c-fc-cream); outline-offset: 3px; }
@media (max-height: 600px) { .wc-art { top: 14px; transform: translateX(-50%) scale(.8); transform-origin: top center; } .wc-cap { top: 250px; } }
@media (prefers-reduced-motion: reduce) { .wc-scrim *, .wc-scrim { animation-duration: .01s !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; } }

/* ---------- Ḍuḥā: die drei Vermächtnisse ---------- */
.dc-scrim { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 16px;
  background: color-mix(in srgb, var(--c-fc-night-a) 72%, transparent); backdrop-filter: blur(6px); animation: fc-in .3s ease both; }
.dc-stage { position: relative; width: min(360px, 100%); height: min(520px, calc(100dvh - 32px)); border-radius: 24px; overflow: hidden; text-align: center;
  color: var(--c-fc-cream); background: radial-gradient(circle at 50% 30%, var(--c-fc-night-b), var(--c-fc-night-a) 75%); box-shadow: 0 20px 60px rgb(0 0 0 / .45); }
.dc-art { position: absolute; left: 50%; top: 50px; transform: translateX(-50%); }
.dc-link { stroke: var(--c-fc-gold); stroke-width: 2; stroke-dasharray: 4 5; opacity: .4; }
.dc-orb { opacity: .6; } .dc-orb.done { opacity: 1; }
.dc-orb-bg, .dc-orb-fill { fill: color-mix(in srgb, var(--c-fc-night-b) 60%, var(--c-fc-night-a)); }
.dc-orb-bg { stroke: var(--c-fc-gold); stroke-opacity: .5; } .dc-orb.done .dc-orb-bg { stroke-opacity: 1; }
.dc-cream { fill: var(--c-fc-cream); } .dc-gold2 { fill: var(--c-fc-gold-2); }
.dc-sun { opacity: .25; transform-box: fill-box; transform-origin: 50% 50%; animation: dc-on .6s cubic-bezier(.2,1.6,.4,1) .6s forwards; }
.dc-sun-a { fill: var(--c-fc-fire-c); } .dc-sun-b { fill: var(--c-fc-gold-2); }
@keyframes dc-on { 0% { opacity: .25; transform: scale(1); } 50% { transform: scale(1.25); } 100% { opacity: 1; transform: scale(1); } }
.dc-burst { fill: none; stroke: var(--c-fc-fire-c); stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: 50% 50%; animation: sc-ring 1s ease-out .9s forwards; }
@keyframes sc-ring { from { opacity: .9; transform: scale(.6); } to { opacity: 0; transform: scale(2.4); } }
.dc-check { opacity: 0; animation: wc-lit .3s ease 1.1s forwards; }
.dc-check circle { fill: var(--c-feat-gebet-b); }
.dc-check path { fill: none; stroke: var(--c-fc-cream); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.dc-lbl { fill: var(--c-fc-cream); font-size: 12px; font-weight: 600; text-anchor: middle; opacity: .85; }
.dc-small { font-size: 11px; opacity: .65; }
.dc-main { font-size: 14px; opacity: 1; fill: var(--c-fc-gold-2); }
.dc-cap { position: absolute; left: 18px; right: 18px; top: 268px; opacity: 0; animation: fc-up .8s ease 1.5s forwards; }
.dc-cap h2 { margin: 0; font-size: 19px; line-height: 1.3; color: var(--c-fc-gold-2); }
.dc-sub { margin: 8px 0 0; font-size: 14px; }
.dc-src { margin: 6px 0 0; font-size: 11px; opacity: .7; }
.dc-btn { position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%); opacity: 0; animation: fc-up .6s ease 2.1s forwards;
  padding: 12px 28px; border: 0; border-radius: 999px; font: inherit; font-weight: 700; background: var(--c-fc-gold); color: var(--c-fc-ink); cursor: pointer; }
.dc-btn:focus-visible { outline: 3px solid var(--c-fc-cream); outline-offset: 3px; }
@media (max-height: 560px) { .dc-art { top: 20px; } .dc-cap { top: 226px; } }
@media (prefers-reduced-motion: reduce) { .dc-scrim *, .dc-scrim { animation-duration: .01s !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; } }

/* ---------- Nachtgebet: der offene Himmel (nutzt wc-* Grundstile) ---------- */
.tc-scrim { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 16px;
  background: color-mix(in srgb, var(--c-wc-night) 72%, transparent); backdrop-filter: blur(6px); animation: fc-in .3s ease both; }
.tc-stage { position: relative; width: min(360px, 100%); height: min(560px, calc(100dvh - 32px)); border-radius: 24px; overflow: hidden; text-align: center;
  color: var(--c-fc-cream); background: linear-gradient(180deg, var(--c-wc-night), var(--c-wc-sky) 80%); box-shadow: 0 20px 60px rgb(0 0 0 / .45); }
.tc-badge { position: absolute; top: 16px; right: 18px; font-weight: 800; font-size: 15px; color: var(--c-fc-gold-2); opacity: 0; animation: fc-up .3s ease .2s forwards; }
.tc-art { position: absolute; left: 50%; top: 24px; transform: translateX(-50%); }
.tc-beam-a { stop-color: var(--c-fc-gold-2); stop-opacity: .75; } .tc-beam-b { stop-color: var(--c-fc-gold); stop-opacity: .05; }
.tc-beam { opacity: 0; animation: wc-lit 1s ease .9s forwards; }
.tc-cl { fill: var(--c-wc-cloud); transform-box: fill-box; }
.tc-l { animation: tc-partl 1.2s ease .3s forwards; } .tc-r { animation: tc-partr 1.2s ease .3s forwards; }
@keyframes tc-partl { to { transform: translateX(-90px); opacity: .5; } }
@keyframes tc-partr { to { transform: translateX(90px); opacity: .5; } }
.tc-hands { opacity: .35; animation: wc-lit .8s ease 1.4s forwards; }
.tc-dua { opacity: 0; animation: tc-rise 2.6s ease-in calc(1.8s + var(--i) * .28s) infinite; }
.tc-dua circle { filter: drop-shadow(0 0 4px var(--c-fc-gold-2)); }
@keyframes tc-rise { 0% { opacity: 0; transform: translateY(0); } 15% { opacity: 1; } 100% { opacity: 0; transform: translateY(-170px); } }
.tc-cap { position: absolute; left: 18px; right: 18px; top: 300px; opacity: 0; animation: fc-up .8s ease 2.6s forwards; }
.tc-cap h2 { margin: 0; font-size: 19px; line-height: 1.3; color: var(--c-fc-gold-2); }
.tc-sub { margin: 6px 0 0; font-size: 14px; }
.tc-btn { animation-delay: 3s; }
@media (max-height: 600px) { .tc-art { top: 8px; transform: translateX(-50%) scale(.8); transform-origin: top center; } .tc-cap { top: 236px; } }
@media (prefers-reduced-motion: reduce) { .tc-scrim *, .tc-scrim { animation-duration: .01s !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; } }

/* ===== Erster Start (Onboarding): immer dunkel im Fajr-Look, Gold als Akzent ===== */
.ob {
  --c-bg: #0f1424; --c-surface: #1a2036; --c-surface-raised: #1a2036; --c-border: #2c3352; --c-border-input: #4a5278;
  --c-text: #f4f1ea; --c-text-muted: #a9adc4; --c-accent: #f3c969; --c-accent-soft: #232a45; --c-on-accent: #1a1428;
  --c-ink: #f3c969; --c-on-ink: #1a1428; --ob-gold: #f3c969; --ob-orange: #f08a4b;
  position: fixed; inset: 0; z-index: 40; overflow-y: auto; color: var(--c-text);
  background: radial-gradient(120% 60% at 50% 0%, #1d2550 0%, #0f1424 60%, #0b0f1c 100%);
}
.ob-slide { max-width: var(--max-width); margin: 0 auto; min-height: 100%; display: flex; flex-direction: column;
  padding: calc(var(--space-4) + env(safe-area-inset-top)) var(--gutter) calc(var(--space-5) + env(safe-area-inset-bottom)); gap: var(--space-4); }
.ob-top { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: var(--space-3); min-height: 44px; }
.ob-brand { text-align: center; font-weight: 700; letter-spacing: .02em; color: var(--ob-gold); }
.ob-back { width: 44px; height: 36px; border-radius: var(--radius-pill); border: 1.5px solid var(--c-text); background: transparent; color: var(--c-text); display: grid; place-items: center; cursor: pointer; }
.ob-skip { border: 0; background: none; color: var(--c-text-muted); font: inherit; font-size: var(--text-sm); cursor: pointer; padding: 8px 0; }
.ob-progress { height: 6px; border-radius: var(--radius-pill); background: var(--c-accent-soft); overflow: hidden; }
.ob-progress i { display: block; height: 100%; background: linear-gradient(90deg, var(--ob-orange), var(--ob-gold)); border-radius: inherit; transition: width var(--motion-slow) var(--motion-ease); }
.ob-count { font-size: var(--text-sm); color: var(--c-text-muted); font-variant-numeric: tabular-nums; }
.ob-body { flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-4); animation: ob-in .35s var(--motion-ease) both; }
.ob-body.ob-left { align-items: stretch; text-align: left; }
@keyframes ob-in { from { opacity: 0; transform: translateX(14px); } }
.ob-title { font-size: 26px; line-height: 1.25; font-weight: 700; margin: 0; }
.ob-text { margin: 0; color: var(--c-text-muted); font-size: var(--text-base); line-height: 1.5; }
.ob-muted { color: var(--c-text-muted); font-size: var(--text-sm); }
.ob-src { font-size: var(--text-sm); opacity: .8; }
.ob-art { display: grid; place-items: center; padding-top: var(--space-4); }
.ob-art .fj { border-radius: 28%; box-shadow: 0 20px 60px rgba(240, 138, 75, .25); max-width: 70vw; height: auto; }
.ob-foot { display: flex; flex-direction: column; gap: var(--space-3); align-items: stretch; }
.ob-btn { min-height: 56px; border: 0; border-radius: var(--radius-pill); font: inherit; font-size: 17px; font-weight: 700; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; color: var(--c-on-ink);
  background: linear-gradient(180deg, #f7d488, var(--ob-gold)); box-shadow: 0 8px 24px rgba(243, 201, 105, .25); }
.ob-btn:disabled { opacity: .6; cursor: default; }
.ob-btn:focus-visible, .ob-tile:focus-visible, .ob-row:focus-visible, .ob-back:focus-visible, .ob-link:focus-visible { outline: 3px solid var(--ob-gold); outline-offset: 3px; }
.ob-link { border: 0; background: none; color: var(--c-text-muted); font: inherit; font-size: var(--text-sm); cursor: pointer; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; align-self: center; text-decoration: underline; text-underline-offset: 3px; }
.ob-dots { display: flex; justify-content: center; gap: 8px; padding-top: 4px; }
.ob-dots i { width: 8px; height: 8px; border-radius: 50%; background: #4a5278; transition: all var(--motion-base); }
.ob-dots i.on { width: 22px; border-radius: 4px; background: var(--ob-gold); }
.ob-input { min-height: 56px; font-size: 18px; }

/* Fajr-Szene */
.fj-sun { transform: translateY(170px); transition: transform 2.6s cubic-bezier(.22,.7,.25,1); }
.fj[data-s="half"] .fj-sun { transform: translateY(48px); }
.fj[data-s="up"] .fj-sun { transform: none; }
.fj-rays { opacity: 0; transition: opacity 1s ease 1.4s; }
.fj[data-s="half"] .fj-rays, .fj[data-s="up"] .fj-rays { opacity: 1; }
.fj-glow { opacity: .4; transition: opacity 2s ease .6s; }
.fj[data-s="up"] .fj-glow { opacity: 1; }
.fj-dawn { opacity: 0; transition: opacity 2.6s ease .3s; }
.fj[data-s="up"] .fj-dawn { opacity: .85; }
.fj-stars { transition: opacity 2s ease; }
.fj[data-s="up"] .fj-stars { opacity: 0; }
.ob-sunrise { transition: background 2.6s ease; }
.ob-sunrise.is-up .ob-art .fj { box-shadow: 0 20px 90px rgba(243, 160, 90, .55); }
.ob-sunrise .ob-body { justify-content: center; }
.ob-fade { animation: ob-fade 1s ease 1.6s both; }
@keyframes ob-fade { from { opacity: 0; transform: translateY(8px); } }
.ob-gold { transition: opacity .6s; }
.ob-sunrise.is-up .ob-gold { opacity: 0; }

/* Folie: vom Vers zur Seite */
.ob-grow { width: 100%; max-width: 320px; height: auto; padding-top: var(--space-6); }
.ob-grow-path { fill: none; stroke: var(--ob-gold); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 420; stroke-dashoffset: 420; animation: ob-draw 1.6s ease .1s forwards; opacity: .7; }
@keyframes ob-draw { to { stroke-dashoffset: 0; } }
.ob-grow-pt { opacity: 0; animation: ob-pop .4s ease forwards; }
.ob-grow-pt circle { fill: #0f1424; stroke: var(--ob-gold); stroke-width: 3; }
.ob-grow-pt rect { fill: #fff7e3; }
.ob-grow-pt text { fill: #3a2a5a; font-size: 13px; font-weight: 700; font-family: var(--font-sans); }
@keyframes ob-pop { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Folie: Hasanat */
.ob-cards { display: flex; flex-direction: column; gap: var(--space-3); width: 100%; }
.ob-card { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg); border: 1.5px solid; text-align: left; background: rgba(255,255,255,.02); }
.ob-c-hasanat { border-color: #e2577f; } .ob-c-verses { border-color: #5b8fe0; } .ob-c-time { border-color: #e59a5a; } .ob-c-pages { border-color: #4fc39b; }

/* Folie: Funktionen */
.ob-feats { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); width: 100%; text-align: left; }
.ob-feats li { display: flex; align-items: center; gap: var(--space-3); padding: 10px var(--space-3); border-radius: var(--radius-lg); border: 1.5px solid var(--c-border); }
.ob-feats li:nth-child(3n+1) { border-color: #8f6fe0; } .ob-feats li:nth-child(3n+2) { border-color: #4fc39b; } .ob-feats li:nth-child(3n) { border-color: #e59a5a; }
.ob-check { width: 28px; height: 28px; border-radius: 50%; background: #5fd3b0; color: #0b3b2e; display: grid; place-items: center; flex-shrink: 0; }

/* Folie: Zeit */
.ob-reading { width: 100%; margin-top: var(--space-5); padding: var(--space-5) var(--space-4) var(--space-4); border-radius: var(--radius-xl); background: linear-gradient(160deg, #3b2f72, #1a2036); border: 1px solid #4a3f86; display: flex; flex-direction: column; gap: var(--space-3); position: relative; }
.ob-timer { position: absolute; top: -18px; right: 16px; padding: 6px 14px; border-radius: var(--radius-pill); background: #fff7e3; color: #3a2a5a; font-weight: 800; font-size: 20px; font-variant-numeric: tabular-nums; }
.ob-ayah { font-size: 28px; line-height: 1.9; margin: 0; text-align: center; }
.ob-bar { height: 8px; border-radius: var(--radius-pill); background: rgba(255,255,255,.12); overflow: hidden; }
.ob-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--ob-orange), var(--ob-gold)); transition: width 1s linear; }
.ob-reading-row { display: flex; justify-content: space-between; font-size: var(--text-sm); color: var(--c-text-muted); }

/* Folie: Erinnerungen */
.ob-remind { width: 100%; margin-top: var(--space-5); padding: var(--space-4); border-radius: var(--radius-xl); border: 1.5px solid #4a3f86; display: flex; flex-direction: column; gap: var(--space-3); }
.ob-week { display: flex; justify-content: space-between; padding: 8px; border-radius: var(--radius-pill); border: 1px solid var(--c-border); }
.ob-week span { width: 32px; height: 32px; border-radius: 50%; border: 2px solid #4a5278; display: grid; place-items: center; font-size: 13px; font-weight: 700; }
.ob-week .done { border-color: #5fd3b0; } .ob-week .missed { border-color: #e2577f; } .ob-week .today { background: #fff7e3; color: #1a1428; border-color: var(--ob-gold); }
.ob-bubble { max-width: 85%; padding: 12px 14px; border-radius: 16px; background: #3b2f72; font-size: var(--text-sm); line-height: 1.4; text-align: left; display: flex; gap: 8px; align-items: flex-start; }
.ob-bubble.l { align-self: flex-start; border-bottom-left-radius: 4px; animation: ob-pop .4s ease .3s both; }
.ob-bubble.r { align-self: flex-end; border-bottom-right-radius: 4px; background: #23523f; animation: ob-pop .4s ease .9s both; }

/* Einrichtung: Kacheln und Listen */
.ob-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.ob-tile { min-height: 116px; border-radius: var(--radius-xl); border: 2px solid transparent; background: var(--c-surface); color: var(--c-text); font: inherit; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
.ob-tile strong { font-size: 40px; line-height: 1; }
.ob-tile span { color: var(--c-text-muted); font-size: var(--text-sm); }
.ob-tile[aria-checked="true"], .ob-row[aria-checked="true"] { border-color: var(--ob-gold); background: #2a2645; }
.ob-time strong { font-size: 18px; }
.ob-hz { fill: none; stroke: var(--ob-orange); stroke-width: 2.5; stroke-linecap: round; }
.ob-sunlet { fill: #ffd9a0; }
.ob-list { display: flex; flex-direction: column; gap: var(--space-2, 8px); }
.ob-row { min-height: 60px; padding: 12px var(--space-4); border-radius: var(--radius-lg); border: 2px solid transparent; background: var(--c-surface); color: var(--c-text); font: inherit; text-align: left; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.ob-row span { color: var(--c-text-muted); font-size: var(--text-sm); text-align: right; }
.ob-row strong { display: inline-flex; align-items: center; gap: 6px; }
.ob-streak strong { font-size: 20px; }
.ob-streak strong svg { color: var(--ob-orange); }
.ob-play { width: 40px; height: 40px; border-radius: 50%; border: 0; background: #2f3658; color: var(--ob-gold); display: grid; place-items: center; cursor: pointer; flex-shrink: 0; }
.ob-sample { padding: var(--space-4); border-radius: var(--radius-lg); border: 2px dashed #8f6fe0; text-align: center; }
.ob-sample .ar { font-size: 28px; line-height: 1.9; margin: 0; }
.ob-sample p:last-child { margin: 0; color: var(--c-text-muted); }
.ob .reader-preview { border: 2px dashed #8f6fe0; }
.ob .card { background: var(--c-surface); }

@media (prefers-reduced-motion: reduce) {
  .ob-body, .ob-grow-pt, .ob-bubble.l, .ob-bubble.r, .ob-fade { animation: none; }
  .ob-grow-path { animation: none; stroke-dashoffset: 0; }
  .fj-sun, .fj-rays, .fj-glow, .fj-dawn, .fj-stars { transition: none; }
}
.ob-foot { position: sticky; bottom: 0; margin: 0 calc(-1 * var(--gutter)); padding: var(--space-4) var(--gutter) 0;
  background: linear-gradient(to bottom, transparent, #0b0f1c 28%); }
.ob-nw { white-space: nowrap; }