/* Schriften liegen auf dem eigenen Server (kein Abruf bei Google). Atkinson Hyperlegible ist für Sehschwache entworfen. */
@font-face { font-family: 'Atkinson Hyperlegible'; font-weight: 400; font-display: swap; src: url('/fonts/atkinson-hyperlegible-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Atkinson Hyperlegible'; font-weight: 700; font-display: swap; src: url('/fonts/atkinson-hyperlegible-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Noto Naskh Arabic'; font-weight: 400; font-display: swap; src: url('/fonts/noto-naskh-arabic-arabic-400-normal.woff2') format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: 'Noto Naskh Arabic'; font-weight: 600; font-display: swap; src: url('/fonts/noto-naskh-arabic-arabic-600-normal.woff2') format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF; }

:root {
  --bg: #0c1210;
  --surface: #141c19;
  --line: #25322d;
  --text: #f2ede1;
  --muted: #8e9a94;
  --gold: #d9b56b;
  --live: #e0584f;
  --ok: #5fb38a;
  --font: 'Atkinson Hyperlegible', 'Segoe UI', system-ui, sans-serif;
  --arabic: 'Noto Naskh Arabic', 'Traditional Arabic', 'Geeza Pro', serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font); }
body { background: radial-gradient(1200px 520px at 50% -140px, #1b2a24 0%, transparent 70%), var(--bg); background-attachment: fixed; }
button { font: inherit; color: inherit; cursor: pointer; }
.ar { font-family: var(--arabic); direction: rtl; text-align: right; }
.live-dot { display: inline-block; width: .6em; height: .6em; border-radius: 50%; background: var(--muted); margin-inline-end: .4em; vertical-align: middle; }
.live .live-dot, .live-dot.on { background: var(--live); animation: pulse 1.6s infinite; }
@keyframes pulse { 0%, 100% { opacity: 1 } 50% { opacity: .35 } }
.pending { color: var(--muted); }
.pending::after { content: '…'; animation: pulse 1s infinite; }
.quran { border-inline-start: 3px solid var(--gold); padding-inline-start: .6em; font-style: italic; }
.quran::before { content: 'Koran · '; font-style: normal; color: var(--gold); font-size: .7em; letter-spacing: .08em; text-transform: uppercase; }
.notice { color: var(--gold); }
.salawat { font-family: var(--arabic); font-style: normal; font-size: 1.25em; line-height: 0; vertical-align: -.08em; }


/* ---- Marke: Logo-Chip + Name ---- */
.brand { display: flex; align-items: center; gap: .7em; min-width: 0; }
.brand .chip { flex: none; width: 2.6em; height: 2.6em; border-radius: 50%; background: #fff; display: grid; place-items: center; box-shadow: 0 0 0 2px color-mix(in srgb, var(--gold) 70%, transparent), 0 2px 10px #0005; overflow: hidden; }
.brand .chip img { width: 84%; height: 84%; object-fit: contain; display: block; }
.brand .titles { min-width: 0; line-height: 1.15; }
.brand .titles b { display: block; font-size: 1em; font-weight: 700; letter-spacing: .01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand .titles span { display: block; font-size: .72em; color: var(--muted); letter-spacing: .08em; text-transform: uppercase; margin-top: .15em; }
.pill { display: inline-flex; align-items: center; gap: .1em; padding: .35em .8em; border-radius: 999px; border: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 80%, transparent); font-size: .8em; color: var(--muted); white-space: nowrap; }
.pill.on { color: #fff; background: color-mix(in srgb, var(--live) 85%, #000); border-color: transparent; }
.pill.on .live-dot { background: #fff; }
.orn { height: 1px; border: 0; margin: 0; background: linear-gradient(90deg, transparent, var(--gold), transparent); opacity: .55; }
.logo-card { background: #fff; border-radius: 18px; padding: 1.1em 1.4em; box-shadow: 0 0 0 2px color-mix(in srgb, var(--gold) 55%, transparent), 0 14px 40px #0007; display: inline-block; }
.logo-card img { display: block; width: 100%; height: auto; }
@media (prefers-reduced-motion: no-preference) { .rise { animation: rise .7s cubic-bezier(.23,1,.32,1) both; } @keyframes rise { from { opacity: 0; transform: translateY(10px) } to { opacity: 1; transform: none } } }