/* ═══════════════════════════════════════════════════════════════════════════
   HARAMAIN COMPANION — style.css  v2.0
   Modern Islamic Design System · OLED Dark Mode · Mobile-First · RTL-Ready
   Background Image · Glassmorphism · Gate Navigator · Wudu Locator · Paywall
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. FONT IMPORT ───────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Scheherazade+New:wght@400;600;700&family=Cormorant+Garamond:ital,wght@0,300;0,500;0,700;1,300&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,300&display=swap');

/* ── 2. DESIGN TOKENS — DARK (OLED Default) ──────────────────────────────── */
:root,
[data-theme="dark"] {
  --color-bg:            #000000;
  --color-surface:       #0d0d0d;
  --color-surface-2:     #161616;
  --color-surface-3:     #1e1e1e;
  --color-surface-4:     #272727;
  --color-border:        #2a2a2a;
  --color-border-subtle: #1f1f1f;

  --color-text:           #f0ede6;
  --color-text-secondary: #8a8580;
  --color-text-tertiary:  #4a4742;
  --color-near-black:     #0a0a0a;

  /* Brand — Emerald */
  --color-emerald:        #1a6b4a;
  --color-emerald-bright: #11c25d;
  --color-emerald-muted:  #163d2b;
  --color-emerald-glow:   rgba(17,194,93,0.14);

  /* Brand — Gold */
  --color-gold:           #c9a84c;
  --color-gold-bright:    #e8c76a;
  --color-gold-muted:     #3d3018;
  --color-gold-glow:      rgba(201,168,76,0.12);

  /* Semantic */
  --color-danger:         #e53e3e;
  --color-danger-muted:   #3d1010;
  --color-danger-glow:    rgba(229,62,62,0.15);
  --color-warning:        #d97706;
  --color-warning-muted:  #3d2706;
  --color-info:           #3b82f6;
  --color-info-muted:     #102040;
  --color-success:        #10b981;
  --color-success-muted:  #0a2318;

  /* Map */
  --map-bg:     #0d0d0d;
  --map-plaza:  #111a14;
  --map-mosque: #152012;
  --map-sai:    #0e1a16;
  --map-border: #2a3a2a;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.5);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.6);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.7);
  --shadow-xl: 0 16px 64px rgba(0,0,0,0.8);

  /* Overlays */
  --overlay-modal:   rgba(0,0,0,0.85);
  --overlay-sidebar: rgba(0,0,0,0.75);

  /* Gradients */
  --grad-hero:    linear-gradient(160deg,#0d2318 0%,#000000 60%);
  --grad-emerald: linear-gradient(135deg,#1a6b4a 0%,#0a3d22 100%);
  --grad-gold:    linear-gradient(135deg,#c9a84c 0%,#a07030 100%);
  --grad-danger:  linear-gradient(135deg,#7f1d1d 0%,#3d0808 100%);
  --grad-card:    linear-gradient(145deg,#161616 0%,#0d0d0d 100%);

  /* Glass surfaces — v562: Listen-Cards 93% opak Slate-BLAU (für Heilige Orte/Wissen/Services) */
  --glass-surface:  rgba(24,32,40,0.93);
  --glass-border:   rgba(96,165,250,0.20);
  --glass-blur:     blur(10px);

  /* Fonts */
  --font-display: 'Cormorant Garamond','Scheherazade New',Georgia,serif;
  --font-body:    'DM Sans','Segoe UI',system-ui,sans-serif;
  --font-arabic:  'Scheherazade New','Traditional Arabic',serif;

  /* Spacing */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
  --space-5:20px; --space-6:24px; --space-8:32px; --space-10:40px; --space-12:48px;

  /* Radius */
  --radius-sm:6px; --radius-md:12px; --radius-lg:18px; --radius-xl:24px; --radius-full:9999px;

  /* Transitions */
  --t-fast:  150ms cubic-bezier(0.4,0,0.2,1);
  --t-normal:250ms cubic-bezier(0.4,0,0.2,1);
  --t-slow:  400ms cubic-bezier(0.4,0,0.2,1);
  --t-spring:500ms cubic-bezier(0.34,1.56,0.64,1);

  /* Layout */
  --header-h:    58px;
  --safe-top:    env(safe-area-inset-top,0px);
  --safe-bottom: env(safe-area-inset-bottom,0px);
}

/* ── 3. DESIGN TOKENS — LIGHT ─────────────────────────────────────────────── */
[data-theme="light"] {
  --color-bg:            #f5f3ee;
  --color-surface:       #ffffff;
  --color-surface-2:     #f0ede6;
  --color-surface-3:     #e8e4da;
  --color-surface-4:     #dedad0;
  --color-border:        #dbd7cc;
  --color-border-subtle: #e8e4da;

  --color-text:           #1a1814;
  --color-text-secondary: #6b6560;
  --color-text-tertiary:  #9a9590;
  --color-near-black:     #000000;

  --color-emerald:        #1a6b4a;
  --color-emerald-bright: #0ea050;
  --color-emerald-muted:  #d4ede2;
  --color-emerald-glow:   rgba(26,107,74,0.10);
  --color-gold:           #a07030;
  --color-gold-bright:    #c9a84c;
  --color-gold-muted:     #f5e8c8;
  --color-gold-glow:      rgba(160,112,48,0.10);

  --color-danger:         #c53030;
  --color-danger-muted:   #fde8e8;
  --color-danger-glow:    rgba(197,48,48,0.10);
  --color-warning:        #b45309;
  --color-warning-muted:  #fef3c7;
  --color-info:           #1d4ed8;
  --color-info-muted:     #dbeafe;
  --color-success:        #059669;
  --color-success-muted:  #d1fae5;

  --map-bg:     #f0ede6;
  --map-plaza:  #e8e2d8;
  --map-mosque: #d4eddf;
  --map-sai:    #daf0e8;
  --map-border: #b0c8b8;

  --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.10);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.12);
  --shadow-xl: 0 16px 64px rgba(0,0,0,0.15);

  --overlay-modal:   rgba(0,0,0,0.55);
  --overlay-sidebar: rgba(0,0,0,0.40);

  --grad-hero: linear-gradient(160deg,#d4ede2 0%,#f5f3ee 60%);
  --grad-card: linear-gradient(145deg,#ffffff 0%,#f5f3ee 100%);

  --glass-surface: rgba(255,255,255,0.82);
  --glass-border:  rgba(0,0,0,0.07);
  --glass-blur:    blur(18px);
}

/* ── 4. FONT SIZE SYSTEM ──────────────────────────────────────────────────── */
[data-font-size="normal"] {
  --fs-xs:10px; --fs-sm:12px; --fs-base:14px; --fs-md:15px;
  --fs-lg:18px; --fs-xl:22px; --fs-2xl:28px; --fs-3xl:36px;
  --fs-arabic:18px; --fs-arabic-lg:28px;
}
[data-font-size="large"] {
  --fs-xs:12px; --fs-sm:14px; --fs-base:17px; --fs-md:18px;
  --fs-lg:22px; --fs-xl:28px; --fs-2xl:34px; --fs-3xl:44px;
  --fs-arabic:22px; --fs-arabic-lg:34px;
}
[data-font-size="xlarge"] {
  --fs-xs:14px; --fs-sm:17px; --fs-base:21px; --fs-md:22px;
  --fs-lg:26px; --fs-xl:34px; --fs-2xl:42px; --fs-3xl:52px;
  --fs-arabic:28px; --fs-arabic-lg:42px;
}

/* ── 5. RESET & BASE ──────────────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent; }

html { font-size:16px; scroll-behavior:smooth; -webkit-text-size-adjust:100%; text-size-adjust:100%; }

/* ══════════════════════════════════════════════════════════
   BACKGROUND IMAGE — assets/images/background.jpg
   Fixed, full-screen, behind everything, with dark overlay
   ══════════════════════════════════════════════════════════ */
body {
  font-family:var(--font-body);
  font-size:var(--fs-base);
  font-weight:400;
  line-height:1.6;
  color:var(--color-text);
  background-color:var(--color-bg);
  min-height:100dvh;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  position:relative;
}

/* Fixed background image layer — GPU-beschleunigt für mobiles Scrollen */
body::before {
  content:'';
  position:fixed;
  top:0; left:0;
  width:100vw;
  height:100vh;
  z-index:-2;
  background:url('assets/images/background.jpg') center 25% / cover no-repeat;
  filter:brightness(1.15) saturate(1.1);
  -webkit-transform:translateZ(0);
  transform:translateZ(0);
  will-change:transform;
  pointer-events:none;
}

/* v562 — BG-Filter komplett ENTFERNT (Cards differenzieren selbst) */
/*
body::after {
  content:'';
  position:fixed;
  top:0; left:0;
  width:100vw;
  height:100vh;
  z-index:-1;
  background:rgba(0,0,0,0.03);
  pointer-events:none;
}
[data-theme="light"] body::after { background:rgba(245,243,238,0.03); }
*/

/* Glassmorphism for cards/surfaces that sit on the background */
.glass {
  background:var(--glass-surface);
  backdrop-filter:var(--glass-blur);
  -webkit-backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-border);
}

/* v556 — Heilige Orte / Wissen & Fiqh / Services Akkordeon-Cards
   Override Inline-Style aus home-tiles.js (background:linear-gradient...) */
.hc-accordion {
  background: var(--glass-surface) !important;
  backdrop-filter: var(--glass-blur) saturate(1.2) !important;
  -webkit-backdrop-filter: var(--glass-blur) saturate(1.2) !important;
  border: 1px solid var(--glass-border) !important;
  box-shadow: 0 4px 14px rgba(0,0,0,0.45) !important;
  border-radius: 16px !important;
  overflow: hidden;
}
.hc-accordion__header {
  color: rgba(255,255,255,0.95) !important;
}

.sr-only {
  position:absolute; width:1px; height:1px; padding:0;
  margin:-1px; overflow:hidden; clip:rect(0,0,0,0);
  white-space:nowrap; border-width:0;
}

:focus-visible {
  outline:2px solid var(--color-emerald-bright);
  outline-offset:3px;
  border-radius:var(--radius-sm);
}

a { color:var(--color-emerald-bright); text-decoration:none; }
a:hover { text-decoration:underline; }
img,svg { display:block; }
ul,ol { list-style:none; }
input,select,textarea,button { font-family:inherit; font-size:inherit; color:inherit; }
button { cursor:pointer; border:none; background:none; }

/* ── 6. SPLASH SCREEN ─────────────────────────────────────────────────────── */
.splash {
  position:fixed; inset:0; z-index:9999;
  display:flex; align-items:center; justify-content:center;
  background:#000000;
  transition:opacity var(--t-slow), visibility var(--t-slow);
}
.splash.is-hidden { opacity:0; visibility:hidden; pointer-events:none; transition:opacity 0.2s, visibility 0.2s; }

/* Inner: Column-Layout — Icon ganz oben, dann Titel, dann Untertitel, dann Loader */
.splash__inner {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:0;                      /* Abstände per margin-bottom steuern */
  padding:var(--space-8);
  text-align:center;
  width:100%;
  max-width:320px;
}

/* Icon — klar über allem, kein Überlap */
.splash__icon {
  display:flex;
  align-items:center;
  justify-content:center;
  width:120px;
  height:120px;
  margin-bottom:28px;          /* ← garantierter Abstand zum Titel */
  flex-shrink:0;
  animation:splash-pulse 1.8s ease-in-out infinite;
  filter:drop-shadow(0 0 24px rgba(17,194,93,0.25));
  background:transparent;
  border-radius:24px;
}
.splash__icon img {
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}

.splash__title {
  font-family:var(--font-display);
  font-size:var(--fs-2xl);
  font-weight:500;
  color:var(--color-text);
  letter-spacing:0.02em;
  margin-bottom:var(--space-3);
  line-height:1.2;
}

.splash__subtitle {
  font-family:var(--font-arabic);
  font-size:var(--fs-arabic);
  color:var(--color-gold);
  line-height:1.8;
  direction:rtl;
  margin-bottom:var(--space-6);
}

.splash__loader {
  width:180px; height:3px;
  background:var(--color-border);
  border-radius:var(--radius-full);
  overflow:hidden;
}

.splash__loader-bar {
  height:100%;
  background:var(--grad-emerald);
  border-radius:var(--radius-full);
  animation:splash-load 1.8s ease-in-out forwards;
}

@keyframes splash-pulse { 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(1.05);opacity:0.85} }
@keyframes splash-load  { 0%{width:5%} 30%{width:40%} 60%{width:70%} 90%{width:90%} 100%{width:100%} }

/* ── 7. SYSTEM BANNERS — KOMPLETT ENTFERNT ────────────────────────────────── */
/* Kein offline-banner, kein geofence-banner mehr im DOM.
   Status-Infos leben ausschließlich als Badge in der Prayer-Card.            */
.offline-banner, .geofence-banner { display:none !important; }

/* ── 8. APP SHELL ─────────────────────────────────────────────────────────── */
.app {
  display:flex; flex-direction:column;
  min-height:100dvh;
  padding-top:calc(var(--header-h) + var(--safe-top));
}

/* ── 9. TOP HEADER ────────────────────────────────────────────────────────── */
.app-header {
  position:fixed; top:0; left:0; right:0; z-index:100;
  height:calc(var(--header-h) + var(--safe-top));
  display:flex; align-items:center; justify-content:space-between;
  padding:var(--safe-top) var(--space-3) 0;
  background:var(--glass-surface);
  backdrop-filter:var(--glass-blur);
  -webkit-backdrop-filter:var(--glass-blur);
  border-bottom:1px solid var(--glass-border);
}

.app-header__left, .app-header__right {
  display:flex; align-items:center; gap:var(--space-1); min-width:80px;
}
.app-header__right  { justify-content:flex-end; }
.app-header__center { flex:1; display:flex; justify-content:center; }

.app-logo-text {
  display:flex; align-items:center; gap:var(--space-2);
  font-size:var(--fs-sm); font-weight:500; letter-spacing:0.04em;
}
.logo-arabic { font-family:var(--font-arabic); font-size:var(--fs-md); color:var(--color-emerald-bright); direction:rtl; }
.logo-dot    { color:var(--color-gold); font-size:8px; }
.logo-latin  { font-family:var(--font-display); font-size:var(--fs-md); font-weight:500; letter-spacing:0.06em; color:var(--color-text); }

/* Neue Logo-Klassen deaktivieren (kein App-Header-Logo gewünscht) */
.app-logo, .app-logo__kaaba, .app-logo__name, .app-logo__name--gold { display:none !important; }

/* ── 10. ICON BUTTONS ─────────────────────────────────────────────────────── */
.btn-icon {
  display:flex; align-items:center; justify-content:center;
  width:44px; height:44px;
  border-radius:var(--radius-md);
  color:var(--color-text-secondary);
  transition:background var(--t-fast),color var(--t-fast);
  flex-shrink:0;
}
.btn-icon:hover { background:var(--color-surface-3); color:var(--color-text); }
.btn-icon.btn-xs { width:32px; height:32px; border-radius:var(--radius-sm); }

.btn-sos {
  display:flex; align-items:center; gap:5px;
  padding:0 var(--space-3); height:36px;
  border-radius:var(--radius-full);
  background:var(--color-danger);
  color:#fff; font-size:var(--fs-sm); font-weight:600; letter-spacing:0.04em;
  transition:background var(--t-fast),transform var(--t-fast);
  flex-shrink:0;
}
.btn-sos:hover  { background:#c53030; }
.btn-sos:active { transform:scale(0.96); }

/* ── 11. SIDEBAR — Glass on background ───────────────────────────────────── */
.sidebar { position:fixed; inset:0; z-index:150; pointer-events:none; }
.sidebar.is-open { pointer-events:auto; }

.sidebar__overlay {
  position:absolute; inset:0;
  background:var(--overlay-sidebar);
  opacity:0; transition:opacity var(--t-normal);
}
.sidebar.is-open .sidebar__overlay { opacity:1; }

.sidebar__nav {
  position:absolute; top:0; left:0; bottom:0;
  width:min(300px,85vw);
  background:var(--glass-surface);
  backdrop-filter:var(--glass-blur);
  -webkit-backdrop-filter:var(--glass-blur);
  border-right:1px solid var(--glass-border);
  display:flex; flex-direction:column;
  overflow-y:auto; overscroll-behavior:contain;
  transform:translateX(-100%);
  transition:transform var(--t-normal);
  padding-top:var(--safe-top);
}
.sidebar.is-open .sidebar__nav { transform:translateX(0); box-shadow:var(--shadow-xl); }

.sidebar__header {
  display:flex; align-items:center; justify-content:space-between;
  padding:var(--space-5) var(--space-5) var(--space-4);
  border-bottom:1px solid var(--color-border);
}
.sidebar__user { display:flex; align-items:center; gap:var(--space-3); }
.sidebar__avatar { font-size:28px; line-height:1; }
.sidebar__user-info { display:flex; flex-direction:column; gap:2px; }
.sidebar__user-name { font-weight:600; font-size:var(--fs-sm); color:var(--color-text); }

.premium-badge {
  font-size:var(--fs-xs); font-weight:600;
  padding:2px 8px; border-radius:var(--radius-full);
  background:var(--color-surface-3); color:var(--color-text-secondary);
  letter-spacing:0.04em;
}
.premium-badge.is-premium {
  background:var(--color-gold-muted);
  color:var(--color-gold);
  border:1px solid var(--color-gold);
}

.sidebar__lang-bar {
  display:flex; flex-wrap:wrap; gap:var(--space-1);
  padding:var(--space-3) var(--space-4);
  border-bottom:1px solid var(--color-border);
}

.lang-btn {
  flex:1; min-width:38px; height:34px;
  border-radius:var(--radius-sm);
  font-size:var(--fs-xs); font-weight:600;
  color:var(--color-text-secondary);
  background:var(--color-surface-2);
  border:1px solid var(--color-border);
  transition:all var(--t-fast); letter-spacing:0.02em;
}
.lang-btn:hover { border-color:var(--color-emerald); color:var(--color-emerald-bright); }
.lang-btn.active { background:var(--color-emerald); border-color:var(--color-emerald); color:#fff; }

.sidebar__list { padding:var(--space-3) var(--space-2); flex:1; }

.sidebar__item {
  display:flex; align-items:center; gap:var(--space-3);
  width:100%; padding:var(--space-3);
  border-radius:var(--radius-md);
  font-size:var(--fs-md); font-weight:400;
  color:var(--color-text-secondary);
  text-align:left;
  transition:background var(--t-fast),color var(--t-fast);
  min-height:50px; position:relative;
}
.sidebar__item:hover { background:var(--color-surface-2); color:var(--color-text); }
.sidebar__item.active { background:transparent; color:var(--color-emerald-bright); font-weight:700; border-left:3px solid var(--color-emerald-bright); padding-left:calc(var(--space-3) - 3px); }
.sidebar__icon { flex-shrink:0; opacity:0.7; }
.sidebar__item.active .sidebar__icon { opacity:1; color:var(--color-emerald-bright); }

.badge-dot { width:8px; height:8px; border-radius:50%; margin-left:auto; flex-shrink:0; }
.badge-dot.danger { background:var(--color-danger); box-shadow:0 0 6px var(--color-danger); animation:pulse-dot 2s infinite; }

@keyframes pulse-dot { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.6;transform:scale(0.8)} }

.sidebar__footer {
  padding:var(--space-4) var(--space-5);
  border-top:1px solid var(--color-border);
  display:flex; align-items:center; justify-content:space-between;
  font-size:var(--fs-xs); color:var(--color-text-tertiary);
}
.sidebar__offline-dot { width:8px; height:8px; border-radius:50%; background:var(--color-success); box-shadow:0 0 6px var(--color-success); }
.sidebar__offline-dot.offline { background:var(--color-danger); box-shadow:0 0 6px var(--color-danger); }

/* ── 12. PAGES ────────────────────────────────────────────────────────────── */
.page {
  padding:var(--space-4);
  padding-bottom:calc(var(--space-12) + var(--safe-bottom));
  max-width:600px; margin:0 auto; width:100%;
  animation:page-enter var(--t-normal) ease-out;
}
.page[hidden] { display:none; }
.page--active { display:block; }

@keyframes page-enter { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:translateY(0)} }

.page-header {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:var(--space-5); gap:var(--space-3);
}
.page-title {
  font-family:var(--font-display); font-size:var(--fs-xl);
  font-weight:500; color:var(--color-text); letter-spacing:0.01em;
}
.page-header--danger .page-title { color:var(--color-danger); }

/* ── 13. HERO PRAYER CARD — Glass over background ────────────────────────── */
.hero-prayer-card {
  position:relative; border-radius:var(--radius-xl); overflow:hidden;
  margin-bottom:var(--space-3);
  /* v551 Liquid Emerald Glass — BG durchscheinend + subtile Gold-Border */
  background:linear-gradient(135deg,rgba(11,60,45,0.55) 0%,rgba(8,40,30,0.55) 100%);
  backdrop-filter:blur(30px) saturate(1.4);
  -webkit-backdrop-filter:blur(30px) saturate(1.4);
  border:1px solid rgba(212,175,55,0.18);
  box-shadow:
    0 12px 36px rgba(0,0,0,0.35),
    inset 0 1px 0 rgba(255,255,255,0.10),
    inset 0 -1px 0 rgba(212,175,55,0.05);
  min-height:200px;
}

.hero-prayer-card__bg {
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse at 80% 20%,var(--color-emerald-glow) 0%,transparent 60%),
    radial-gradient(ellipse at 10% 80%,var(--color-gold-glow) 0%,transparent 50%);
  pointer-events:none;
}
.hero-prayer-card__bg::after {
  content:''; position:absolute; inset:0;
  background-image:
    repeating-linear-gradient(45deg,transparent,transparent 20px,rgba(201,168,76,0.03) 20px,rgba(201,168,76,0.03) 21px),
    repeating-linear-gradient(-45deg,transparent,transparent 20px,rgba(201,168,76,0.03) 20px,rgba(201,168,76,0.03) 21px);
}

.hero-prayer-card__content { position:relative; z-index:1; padding:var(--space-5); }

/* Status-Zeile: Location links, Haram-Badge rechts — KEIN position:fixed */
.hero-prayer-card__status-row {
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--space-2); margin-bottom:var(--space-3);
}

.hero-prayer-card__location {
  display:flex; align-items:center; gap:var(--space-1);
  font-size:var(--fs-xs); color:var(--color-text-secondary);
  /* margin-bottom entfernt — jetzt in status-row */
}

/* Haram/Madinah Status-Badge — lebt im normalen Card-Flow, kein z-index */
.haram-status-badge {
  display:inline-flex; align-items:center; gap:5px;
  padding:3px 9px;
  background:rgba(17,194,93,0.14);
  border:1px solid rgba(17,194,93,0.32);
  border-radius:var(--radius-full);
  font-size:var(--fs-xs); font-weight:600;
  color:var(--color-emerald-bright);
  white-space:nowrap;
  /* KEIN position, KEIN z-index, KEIN top/left — lebt im Flow */
}
.haram-status-badge[hidden] { display:none !important; }

.haram-status-badge__dot {
  width:6px; height:6px; border-radius:50%;
  background:var(--color-emerald-bright);
  box-shadow:0 0 5px var(--color-emerald-bright);
  animation:pulse-dot 1.8s infinite;
  flex-shrink:0;
}

/* Weather inline — TOP RIGHT of hero card */
.hero-prayer-card__weather-inline {
  position:absolute;
  top:var(--space-4); right:var(--space-4);
  display:flex; flex-direction:column; align-items:flex-end; gap:2px;
  z-index:2;
}
.hero-prayer-card__weather-inline .w-temp {
  font-family:var(--font-display); font-size:var(--fs-xl); font-weight:300;
  color:var(--color-text); line-height:1;
}
.hero-prayer-card__weather-inline .w-icon { font-size:20px; }
.hero-prayer-card__weather-inline .w-warn {
  font-size:var(--fs-xs); color:var(--color-warning); font-weight:500;
  background:rgba(217,119,6,0.15); border-radius:var(--radius-full);
  padding:1px 8px;
}

.hero-prayer-card__next { display:flex; flex-direction:column; gap:2px; margin-bottom:var(--space-2); }
.hero-prayer-card__label { font-size:var(--fs-xs); color:var(--color-text-secondary); text-transform:uppercase; letter-spacing:0.08em; font-weight:500; }
.hero-prayer-card__name  { font-family:var(--font-display); font-size:var(--fs-2xl); font-weight:500; color:var(--color-text); line-height:1.1; }

.hero-prayer-card__countdown {
  display:flex; align-items:flex-end; gap:var(--space-1); margin-bottom:var(--space-4);
}
.countdown-unit { display:flex; align-items:baseline; gap:2px; }
.countdown-unit span {
  font-family:var(--font-display); font-size:var(--fs-3xl); font-weight:300;
  color:var(--color-emerald-bright); line-height:1; letter-spacing:-0.02em;
  font-variant-numeric:tabular-nums;
}
.countdown-unit small { font-size:var(--fs-xs); color:var(--color-text-secondary); font-weight:400; }
.countdown-sep { font-size:var(--fs-xl); color:var(--color-text-tertiary); line-height:1.3; font-family:var(--font-display); }

.hero-prayer-card__times { display:flex; gap:var(--space-2); flex-wrap:wrap; }
.prayer-time-chip {
  display:flex; flex-direction:column; align-items:center; gap:2px;
  flex:1; min-width:44px; padding:var(--space-2) var(--space-1);
  border-radius:var(--radius-md);
  background:rgba(255,255,255,0.04); border:1px solid var(--glass-border);
  font-size:var(--fs-xs); color:var(--color-text-secondary);
  transition:all var(--t-fast);
}
.prayer-time-chip span:last-child { font-weight:600; color:var(--color-text); font-variant-numeric:tabular-nums; font-size:var(--fs-sm); }
.prayer-time-chip--active { background:var(--color-emerald-muted); border-color:var(--color-emerald); }
.prayer-time-chip--active span { color:var(--color-emerald-bright) !important; }

/* ── 14. DASH-TILES — 3×4 Grid (12 Kacheln) ─────────────────────────────── */
/* 4 Spalten × 3 Reihen = 12 Kacheln, immer exakt gefüllt, kein Loch         */
.dash-tiles {
  display:block;
  margin-bottom:var(--space-4);
}

/* Kategorie-Header — volle Breite über alle 4 Spalten */
.dash-cat-header {
  grid-column:1 / -1;
  font-size:11px;
  font-weight:700;
  color:var(--color-text-secondary);
  text-transform:uppercase;
  letter-spacing:0.06em;
  padding:8px 4px 2px;
  margin-top:4px;
}
.dash-cat-header:first-child { margin-top:0; }

/* ── Dashboard Widgets — breite interaktive Karten zwischen Kategorien ── */
.dash-widget {
  grid-column:1 / -1;
  border-radius:var(--radius-xl);
  padding:14px 16px;
  margin:6px 0;
  background:var(--glass-surface);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border:1px solid var(--glass-border);
}

/* Prayer Widget */
.dash-widget--prayer {
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:linear-gradient(135deg,rgba(201,168,76,0.12),rgba(201,168,76,0.04));
  border:1px solid rgba(201,168,76,0.3);
}
.dash-widget__label {
  font-size:10px;
  font-weight:600;
  color:var(--color-text-secondary);
  text-transform:uppercase;
  letter-spacing:0.05em;
}
.dash-widget__value {
  font-size:20px;
  font-weight:700;
  color:var(--color-gold);
  margin-top:2px;
}
.dash-widget__countdown {
  font-family:'DM Mono',monospace;
  font-size:22px;
  font-weight:700;
  color:var(--color-text);
  letter-spacing:1px;
}

/* Verse Widget */
.dash-widget--verse {
  text-align:center;
  padding:16px 20px;
  background:linear-gradient(135deg,rgba(17,194,93,0.06),rgba(17,194,93,0.02));
  border:1px solid rgba(17,194,93,0.2);
}
.dash-widget__verse-arabic {
  font-family:'Scheherazade New',serif;
  font-size:18px;
  line-height:2;
  color:var(--color-text);
  margin-bottom:8px;
}
.dash-widget__verse-ref {
  font-size:11px;
  color:var(--color-emerald-bright);
  font-weight:600;
}
.dash-widget__verse-translit {
  font-size:12px;
  font-style:italic;
  color:var(--color-gold);
  line-height:1.5;
  margin-bottom:6px;
}
.dash-widget__verse-transl {
  font-size:12px;
  color:var(--color-text-secondary);
  line-height:1.5;
  margin-bottom:8px;
}

/* Status Widget (Tawaf etc.) */
.dash-widget--status {
  display:flex;
  align-items:center;
  gap:12px;
  background:linear-gradient(135deg,rgba(201,168,76,0.08),transparent);
  border:1px solid rgba(201,168,76,0.2);
}
.dash-widget__status-icon {
  font-size:24px;
  flex-shrink:0;
}
.dash-widget__status-info {
  flex:1;
}
.dash-widget__status-label {
  font-size:12px;
  font-weight:600;
  color:var(--color-text-secondary);
  margin-bottom:4px;
}
.dash-widget__status-bar {
  height:6px;
  background:var(--color-border);
  border-radius:3px;
  overflow:hidden;
}
.dash-widget__status-count {
  font-size:16px;
  font-weight:700;
  color:var(--color-gold);
  font-family:'DM Mono',monospace;
}

/* Pilger-Tipp Widget */
.dash-widget--tip {
  padding:16px 18px;
  background:linear-gradient(135deg,rgba(129,140,248,0.08),rgba(129,140,248,0.02));
  border:1px solid rgba(129,140,248,0.2);
}
.dash-widget__tip-header {
  font-size:12px;
  font-weight:700;
  color:#818cf8;
  margin-bottom:8px;
  text-transform:uppercase;
  letter-spacing:0.04em;
}
.dash-widget__tip-text {
  transition:opacity 0.15s ease;
  font-size:13px;
  line-height:1.6;
  color:var(--color-text-secondary);
}

.dash-tile {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
  padding:var(--space-3) var(--space-1);
  border-radius:var(--radius-lg);
  /* v564 — Backdrop-filter ENTFERNT + 99% opak: KEIN Glas-Effekt, BG bleibt versteckt */
  background:rgba(18,34,28,0.99);
  border:1px solid rgba(34,211,238,0.22);
  box-shadow:
    0 4px 14px rgba(0,0,0,0.45),
    inset 0 1px 0 rgba(255,255,255,0.04);
  min-height:68px;
  cursor:pointer;
  transition:all var(--t-fast);
  text-align:center;
  position:relative;
  overflow:hidden;
}
.dash-tile::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg,rgba(34,211,238,0.03) 0%,transparent 40%);
}
.dash-tile > * { position:relative; z-index:1; }

/* v555 — Hover: dezent aufhellen, Cyan-Border heller */
.dash-tile:hover, .dash-tile:active {
  background:rgba(20,32,40,0.98);
  border-color:rgba(34,211,238,0.40);
  transform:translateY(-1px);
}
.dash-tile:active { transform:scale(0.95); }

.dash-tile__label {
  font-size:9px;
  font-weight:600;
  /* v552 — Label heller damit lesbar */
  color:rgba(255,255,255,0.92);
  text-shadow:0 1px 2px rgba(0,0,0,0.4);
  line-height:1.2;
  text-align:center;
  /* Zweizeilig erlaubt für lange Labels */
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* Ab 480px etwas größer */
@media(min-width:480px) {
  .dash-tile { min-height:76px; padding:var(--space-3) var(--space-2); }
  .dash-tile__icon svg { width:26px; height:26px; }
  .dash-tile__label { font-size:var(--fs-xs); }
}

/* .quick-action entfernt — ersetzt durch .dash-tile (3×4 Grid oben) */

.zamzam-pulse { animation:zamzam-pulse 2.5s ease-in-out infinite; }
@keyframes zamzam-pulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.15)} }

/* ── 15. DASHBOARD GRID ───────────────────────────────────────────────────── */
.dashboard-grid { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-3); }
/* Dua-Rad aus Dashboard entfernt */
.dash-card--dua-wheel { display:none !important; }
/* Hajj-Highlight im Grid — kompakt einzeilig */
.hajj-highlight { padding:10px 14px; }
.hajj-highlight__icon { font-size:18px; }
.hajj-highlight__title { font-size:13px; }
.hajj-highlight__sub { font-size:11px; }
/* user-greeting — alt, wird durch inline-version ersetzt */
.user-greeting { display:none !important; }

/* ── 16. DASH CARDS — Glass surface ──────────────────────────────────────── */
.dash-card {
  background:var(--glass-surface);
  backdrop-filter:var(--glass-blur);
  -webkit-backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-border);
  border-radius:var(--radius-lg); padding:var(--space-4);
  overflow:hidden; position:relative;
  transition:border-color var(--t-fast),box-shadow var(--t-fast);
}
.dash-card:hover { border-color:rgba(17,194,93,0.25); box-shadow:0 4px 20px rgba(0,0,0,0.3); }
.dash-card--dua-wheel { grid-column:1/-1; }
/* Qibla ist jetzt per HTML-Reihenfolge an Position 1 — kein order nötig */

.dash-card__title {
  display:flex; align-items:center; gap:var(--space-2);
  font-size:var(--fs-sm); font-weight:600; color:var(--color-text-secondary);
  text-transform:uppercase; letter-spacing:0.06em; margin-bottom:var(--space-3);
}
.dash-card__sub { font-size:var(--fs-xs); color:var(--color-text-tertiary); margin-top:var(--space-2); text-align:center; }

/* ── 17. QIBLA COMPASS ────────────────────────────────────────────────────── */
.qibla-compass-wrap { display:flex; justify-content:center; padding:var(--space-3) 0; }

.qibla-compass {
  position:relative; width:140px; height:140px;
  display:flex; align-items:center; justify-content:center;
}
.qibla-compass__ring {
  position:absolute; inset:0; border-radius:50%;
  border:2px solid var(--color-border);
  background:radial-gradient(circle,var(--color-surface-2) 0%,var(--color-surface) 100%);
  box-shadow:inset 0 2px 8px rgba(0,0,0,0.3);
}
.qibla-compass__ring::before {
  content:'N'; position:absolute; top:6px; left:50%; transform:translateX(-50%);
  font-size:var(--fs-xs); font-weight:700; color:var(--color-danger);
}
.qibla-compass__ring::after {
  content:''; position:absolute; inset:8px;
  border-radius:50%; border:1px dashed var(--color-border);
}

.qibla-compass__needle {
  position:absolute; width:4px; height:70px;
  left:50%; top:50%;
  transform-origin:50% 100%;
  transform:translateX(-50%) translateY(-100%) rotate(0deg);
  transition:transform 1s var(--t-spring);
  border-radius:2px 2px 0 0;
  background:linear-gradient(to top,var(--color-emerald) 0%,var(--color-emerald-bright) 100%);
}
.qibla-compass__needle::after {
  content:''; position:absolute; bottom:-4px; left:50%;
  transform:translateX(-50%);
  width:4px; height:24px;
  border-radius:0 0 2px 2px;
  background:var(--color-text-tertiary);
}
.qibla-compass__kaaba { position:absolute; font-size:22px; z-index:2; filter:drop-shadow(0 0 4px rgba(0,0,0,0.5)); }
.qibla-compass__degrees {
  position:absolute; bottom:-20px; width:100%; text-align:center;
  font-size:var(--fs-xs); color:var(--color-text-secondary); font-variant-numeric:tabular-nums;
}

/* ── 18. WEATHER CARD (standalone version, still in grid) ─────────────────── */
.weather-main { display:flex; align-items:center; gap:var(--space-3); margin-bottom:var(--space-2); }
.weather-icon { font-size:40px; }
.weather-temp { font-family:var(--font-display); font-size:var(--fs-2xl); font-weight:300; color:var(--color-text); line-height:1; }

.weather-warning {
  display:flex; align-items:center; gap:var(--space-2);
  background:var(--color-warning-muted); border:1px solid var(--color-warning);
  border-radius:var(--radius-sm); padding:var(--space-2) var(--space-3);
  font-size:var(--fs-xs); color:var(--color-warning); margin-bottom:var(--space-2);
}
.weather-detail { display:flex; flex-direction:column; gap:2px; font-size:var(--fs-xs); color:var(--color-text-secondary); }

/* ── 19. CROWD MONITOR ────────────────────────────────────────────────────── */
.crowd-meters { display:flex; flex-direction:column; gap:var(--space-3); margin-bottom:var(--space-3); }
.crowd-meter { display:grid; grid-template-columns:1fr 80px 32px; align-items:center; gap:var(--space-2); }
.crowd-meter__label { font-size:var(--fs-xs); color:var(--color-text-secondary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.crowd-meter__bar-wrap { height:8px; background:var(--color-surface-3); border-radius:var(--radius-full); overflow:hidden; }
.crowd-meter__bar { height:100%; width:var(--fill); background:var(--color-emerald); border-radius:var(--radius-full); transition:width 1.5s ease; }
.crowd-meter__bar--high { background:var(--color-danger); }
.crowd-meter__bar--low  { background:var(--color-success); }
.crowd-meter__pct { font-size:var(--fs-xs); font-weight:600; color:var(--color-text); text-align:right; font-variant-numeric:tabular-nums; }
.crowd-total { font-size:var(--fs-xs); color:var(--color-text-secondary); padding-top:var(--space-2); border-top:1px solid var(--color-border); }

/* ── 20. IMAM CARD ────────────────────────────────────────────────────────── */
.imam-info { display:flex; gap:var(--space-3); align-items:flex-start; margin-bottom:var(--space-3); }
.imam-avatar { flex-shrink:0; border-radius:50%; overflow:hidden; background:var(--color-surface-2); border:2px solid var(--color-emerald); }
.imam-details { display:flex; flex-direction:column; gap:4px; flex:1; }
.imam-details strong { font-size:var(--fs-sm); color:var(--color-text); }
.imam-badge { display:inline-block; font-size:var(--fs-xs); padding:2px 8px; border-radius:var(--radius-full); background:var(--color-emerald-muted); color:var(--color-emerald-bright); border:1px solid var(--color-emerald); }
.imam-bio { font-size:var(--fs-xs); color:var(--color-text-secondary); line-height:1.5; }

/* Imam audio play button */
.imam-audio-btn {
  display:flex; align-items:center; justify-content:center; gap:var(--space-2);
  width:100%; padding:var(--space-2) var(--space-3);
  background:var(--color-emerald-muted);
  color:var(--color-emerald-bright);
  border:1px solid var(--color-emerald);
  border-radius:var(--radius-full);
  font-size:var(--fs-xs); font-weight:600;
  transition:all var(--t-fast); margin-top:var(--space-2);
}
.imam-audio-btn:hover { background:var(--color-emerald); color:#fff; }
.imam-audio-btn.is-playing { background:var(--color-emerald); color:#fff; animation:audio-pulse 1.5s ease-in-out infinite; }
@keyframes audio-pulse { 0%,100%{box-shadow:0 0 0 0 var(--color-emerald-glow)} 50%{box-shadow:0 0 0 8px transparent} }

/* ── 21. BUDGET TRACKER ───────────────────────────────────────────────────── */
.budget-display { display:flex; flex-direction:column; gap:var(--space-2); margin-bottom:var(--space-3); }
.budget-total { display:flex; align-items:baseline; gap:4px; }
.budget-spent { font-family:var(--font-display); font-size:var(--fs-2xl); font-weight:300; color:var(--color-text); font-variant-numeric:tabular-nums; }
.budget-currency { font-size:var(--fs-sm); color:var(--color-text-secondary); }
.budget-bar-wrap { height:6px; background:var(--color-surface-3); border-radius:var(--radius-full); overflow:hidden; }
.budget-bar { height:100%; width:var(--fill); background:var(--grad-emerald); border-radius:var(--radius-full); transition:width 0.8s ease; }
.budget-of { font-size:var(--fs-xs); color:var(--color-text-secondary); }
.budget-list { display:flex; flex-direction:column; gap:var(--space-1); max-height:120px; overflow-y:auto; }
.budget-list__empty { font-size:var(--fs-xs); color:var(--color-text-tertiary); font-style:italic; }
.budget-entry { display:flex; justify-content:space-between; align-items:center; font-size:var(--fs-xs); color:var(--color-text-secondary); padding:2px 0; border-bottom:1px solid var(--color-border); }
.budget-entry__amount { font-weight:600; color:var(--color-text); font-variant-numeric:tabular-nums; }

/* ── 22. ZAMZAM TRACKER ───────────────────────────────────────────────────── */
.zamzam-counter-wrap { display:flex; flex-direction:column; align-items:center; gap:var(--space-2); margin-bottom:var(--space-3); }
.zamzam-glasses { display:flex; gap:6px; flex-wrap:wrap; justify-content:center; min-height:32px; }
.zamzam-glass { font-size:22px; transition:transform var(--t-spring); }
.zamzam-glass.filled { filter:drop-shadow(0 0 4px rgba(59,130,246,0.5)); animation:glass-fill 0.4s var(--t-spring); }
@keyframes glass-fill { 0%{transform:scale(0.6) rotate(-10deg)} 100%{transform:scale(1) rotate(0)} }
.zamzam-count { font-size:var(--fs-sm); color:var(--color-text-secondary); }
.btn-zamzam { width:100%; justify-content:center; gap:var(--space-2); }
.zamzam-tip { font-size:var(--fs-xs); color:var(--color-text-tertiary); text-align:center; margin-top:var(--space-2); font-style:italic; }

/* ── 23. DUA WHEEL ────────────────────────────────────────────────────────── */
.dua-wheel-wrap { position:relative; display:flex; justify-content:center; align-items:center; margin-bottom:var(--space-3); }

.dua-wheel-spin {
  position:absolute; width:48px; height:48px; border-radius:50%;
  background:var(--grad-emerald); color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 12px var(--color-emerald-glow);
  transition:transform var(--t-fast),box-shadow var(--t-fast);
}
.dua-wheel-spin:hover  { transform:scale(1.08); }
.dua-wheel-spin:active { transform:scale(0.95); }

.dua-wheel-result {
  text-align:center; padding:var(--space-3);
  background:var(--color-surface-2); border-radius:var(--radius-md);
  border:1px solid var(--color-border); min-height:80px;
  display:flex; flex-direction:column; gap:var(--space-1);
  align-items:center; justify-content:center;
}
.dua-arabic { font-family:var(--font-arabic); font-size:var(--fs-arabic); color:var(--color-gold); direction:rtl; line-height:1.8; }
.dua-transliteration { font-size:var(--fs-sm); color:var(--color-text-secondary); font-style:italic; }
.dua-translation { font-size:var(--fs-xs); color:var(--color-text-tertiary); }

/* ── 24. HARAMAIN EXPRESS ─────────────────────────────────────────────────── */
.train-route { display:flex; align-items:center; gap:var(--space-2); margin-bottom:var(--space-3); }
.train-station { display:flex; align-items:center; gap:var(--space-1); font-size:var(--fs-xs); color:var(--color-text-secondary); flex-shrink:0; }
.train-station__dot { width:10px; height:10px; border-radius:50%; background:var(--color-emerald); border:2px solid var(--color-emerald-bright); }
.train-line { flex:1; height:3px; background:var(--color-border); border-radius:var(--radius-full); position:relative; overflow:hidden; }
.train-moving { position:absolute; top:-8px; left:-20px; font-size:16px; animation:train-move 3s linear infinite; }
@keyframes train-move { 0%{left:-20px} 100%{left:110%} }
.train-times { display:flex; flex-direction:column; gap:var(--space-1); margin-bottom:var(--space-3); }
.train-slot { display:flex; justify-content:space-between; font-size:var(--fs-xs); color:var(--color-text-secondary); }
.train-slot strong { color:var(--color-text); font-variant-numeric:tabular-nums; }

/* ── 25. GLOBAL BUTTONS ───────────────────────────────────────────────────── */
.btn-primary {
  display:inline-flex; align-items:center; justify-content:center; gap:var(--space-2);
  padding:0 var(--space-5); height:48px; border-radius:var(--radius-full);
  background:var(--grad-emerald); color:#fff;
  font-size:var(--fs-md); font-weight:500; letter-spacing:0.02em;
  transition:all var(--t-fast); border:none; cursor:pointer;
}
.btn-primary:hover  { filter:brightness(1.1); }
.btn-primary:active { transform:scale(0.97); }
.btn-primary.btn-full { width:100%; display:flex; }

.btn-secondary {
  display:inline-flex; align-items:center; justify-content:center; gap:var(--space-2);
  padding:0 var(--space-4); height:44px; border-radius:var(--radius-full);
  background:var(--color-surface-2); color:var(--color-text);
  font-size:var(--fs-sm); font-weight:500;
  border:1px solid var(--color-border); transition:all var(--t-fast);
}
.btn-secondary:hover { background:var(--color-surface-3); border-color:var(--color-emerald); }
.btn-sm { height:36px; padding:0 var(--space-3); font-size:var(--fs-sm); }

.btn-premium {
  display:flex; align-items:center; justify-content:center; gap:var(--space-2);
  width:100%; padding:var(--space-3) var(--space-5);
  background:var(--grad-gold); color:#1a1000;
  font-size:var(--fs-md); font-weight:700;
  border-radius:var(--radius-full); border:none;
  transition:all var(--t-fast); margin-bottom:var(--space-3);
}
.btn-premium:hover { filter:brightness(1.08); }

/* ══════════════════════════════════════════════════════════════════════════
   STYLE.CSS TEIL 2 — Guide · Tawaf · Packing · Quran · Map · Tracker
   Community · Emergency · Premium · Settings · Modals · Toast · Install
   + NEW: Gate Navigator · Wudu Locator · Premium Paywall · Tasbih · RTL
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 26. GUIDE PAGE ───────────────────────────────────────────────────────── */
.guide-mode-toggle,
.guide-mode-btn,
.guide-mode-btn.active,

.guide-progress { display:flex; align-items:center; gap:var(--space-3); margin-bottom:var(--space-5); }
.guide-progress__bar-wrap { flex:1; height:6px; background:var(--color-surface-3); border-radius:var(--radius-full); overflow:hidden; }
.guide-progress__bar { height:100%; width:var(--fill); background:var(--grad-emerald); border-radius:var(--radius-full); transition:width 0.8s ease; }
.guide-progress__text { font-size:var(--fs-xs); color:var(--color-text-secondary); white-space:nowrap; font-variant-numeric:tabular-nums; }

.guide-steps { display:flex; flex-direction:column; gap:var(--space-3); margin-bottom:var(--space-5); }

.guide-step {
  background:var(--glass-surface);
  backdrop-filter:var(--glass-blur);
  -webkit-backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-border);
  border-radius:var(--radius-lg); overflow:hidden; transition:border-color var(--t-fast);
}
.guide-step.is-active { border-color:var(--color-emerald); box-shadow:0 0 0 1px var(--color-emerald),var(--shadow-md); }
.guide-step.is-done   { border-color:var(--color-success); opacity:0.7; }

.guide-step__header {
  display:flex; align-items:center; gap:var(--space-3);
  padding:var(--space-4); cursor:pointer; min-height:64px;
}
.guide-step__num {
  width:36px; height:36px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:var(--fs-sm); font-weight:700;
  background:var(--color-surface-3); color:var(--color-text-secondary);
  flex-shrink:0; transition:all var(--t-fast);
}
.guide-step.is-active .guide-step__num { background:var(--color-emerald); color:#fff; }
.guide-step.is-done   .guide-step__num { background:var(--color-success); color:#fff; }
.guide-step__info { flex:1; }
.guide-step__title    { font-size:var(--fs-md); font-weight:600; color:var(--color-text); }
.guide-step__subtitle { font-size:var(--fs-xs); color:var(--color-text-secondary); }
.guide-step__chevron  { color:var(--color-text-tertiary); transition:transform var(--t-fast); }
.guide-step.is-active .guide-step__chevron { transform:rotate(90deg); }

.guide-step__body { padding:0 var(--space-4) var(--space-4); display:none; }
.guide-step.is-active .guide-step__body { display:block; }
.guide-step__text { font-size:var(--fs-sm); color:var(--color-text-secondary); line-height:1.7; margin-bottom:var(--space-3); }

.guide-step__dua-box {
  background:var(--color-surface-2); border-left:3px solid var(--color-gold);
  border-radius:0 var(--radius-md) var(--radius-md) 0;
  padding:var(--space-3) var(--space-4); margin-bottom:var(--space-3);
}
.guide-step__dua-arabic { font-family:var(--font-arabic); font-size:var(--fs-arabic); color:var(--color-gold); direction:rtl; text-align:right; line-height:2; margin-bottom:var(--space-1); }
.guide-step__dua-trans  { font-size:var(--fs-xs); color:var(--color-text-secondary); font-style:italic; }
.guide-step__actions    { display:flex; gap:var(--space-2); flex-wrap:wrap; }
.guide-step__done-btn   { flex:1; }

/* ── 27. TAWAF COUNTER ────────────────────────────────────────────────────── */
.tawaf-counter-panel {
  background:var(--glass-surface); backdrop-filter:var(--glass-blur);
  -webkit-backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-border);
  border-radius:var(--radius-xl); padding:var(--space-5);
  text-align:center; margin-bottom:var(--space-4);
}
.tawaf-counter-panel h3 { font-family:var(--font-display); font-size:var(--fs-lg); font-weight:500; color:var(--color-text); margin-bottom:var(--space-4); }

.tawaf-display { display:flex; align-items:center; justify-content:center; gap:var(--space-5); margin-bottom:var(--space-4); }
.tawaf-btn {
  width:60px; height:60px; border-radius:50%;
  background:var(--color-surface-2); border:2px solid var(--color-border);
  font-size:28px; font-weight:300; color:var(--color-text);
  display:flex; align-items:center; justify-content:center; transition:all var(--t-fast);
}
.tawaf-btn:hover { border-color:var(--color-emerald); background:var(--color-emerald-muted); color:var(--color-emerald-bright); }
.tawaf-btn:active { transform:scale(0.92); }
.tawaf-btn--add { background:var(--color-emerald); border-color:var(--color-emerald); color:#fff; }
.tawaf-btn--add:hover { background:var(--color-emerald-bright); }

.tawaf-count-wrap { display:flex; align-items:baseline; gap:4px; }
.tawaf-round {
  font-family:var(--font-display); font-size:64px; font-weight:300;
  color:var(--color-emerald-bright); line-height:1;
  font-variant-numeric:tabular-nums; transition:transform var(--t-spring);
}
.tawaf-round.bump { animation:tawaf-bump 0.3s var(--t-spring); }
@keyframes tawaf-bump { 0%{transform:scale(1)} 50%{transform:scale(1.25)} 100%{transform:scale(1)} }
.tawaf-of { font-size:var(--fs-xl); color:var(--color-text-tertiary); font-family:var(--font-display); }

.tawaf-dots { display:flex; gap:var(--space-2); justify-content:center; margin-bottom:var(--space-4); }
.tawaf-dot { width:14px; height:14px; border-radius:50%; background:var(--color-surface-3); border:2px solid var(--color-border); transition:all var(--t-spring); }
.tawaf-dot.done { background:var(--color-emerald); border-color:var(--color-emerald); box-shadow:0 0 8px var(--color-emerald-glow); transform:scale(1.1); }

/* ── 28. PACKING LIST ─────────────────────────────────────────────────────── */

.packing-check {
  width:18px; height:18px; border-radius:4px;
  border:2px solid var(--color-border); flex-shrink:0;
  display:flex; align-items:center; justify-content:center; transition:all var(--t-fast);
}

/* ── 29. VIDEO / VR PLACEHOLDERS ─────────────────────────────────────────── */

/* ── 30. TAB BAR ──────────────────────────────────────────────────────────── */
.tab-bar {
  display:flex; gap:2px; background:var(--color-surface-2); padding:4px;
  border-radius:var(--radius-lg); border:1px solid var(--color-border);
  margin-bottom:var(--space-4); overflow-x:auto;
  scrollbar-width:none; -ms-overflow-style:none;
}
.tab-bar::-webkit-scrollbar { display:none; }
.tab-btn {
  flex:1; min-width:80px; padding:var(--space-2) var(--space-3);
  border-radius:var(--radius-md); font-size:var(--fs-sm); font-weight:500;
  color:var(--color-text-secondary); white-space:nowrap; transition:all var(--t-fast);
}
.tab-btn.active,.tab-btn[aria-selected="true"] { background:var(--color-surface); color:var(--color-text); box-shadow:var(--shadow-sm); }
.tab-content { display:none; }
.tab-content.active { display:block; }

/* ── 31. QURAN PAGE ───────────────────────────────────────────────────────── */
.quran-search-bar {
  display:flex; align-items:center; gap:var(--space-2);
  background:var(--color-surface-2); border:1px solid var(--color-border);
  border-radius:var(--radius-full); padding:0 var(--space-4);
  margin-bottom:var(--space-3); height:48px;
}
.quran-search-bar input { flex:1; background:none; border:none; outline:none; font-size:var(--fs-md); color:var(--color-text); }
.quran-search-bar input::placeholder { color:var(--color-text-tertiary); }

.reciter-select-wrap { margin-bottom:var(--space-4); }
.reciter-select {
  width:100%; padding:var(--space-3) var(--space-4);
  background:var(--color-surface-2); border:1px solid var(--color-border);
  border-radius:var(--radius-full); color:var(--color-text);
  font-size:var(--fs-sm); cursor:pointer; appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238a8580' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 16px center; padding-right:40px;
}

.surah-list { display:flex; flex-direction:column; gap:var(--space-1); }
.surah-item {
  display:flex; align-items:center; gap:var(--space-3);
  padding:var(--space-3) var(--space-4); border-radius:var(--radius-md);
  background:var(--color-surface); border:1px solid var(--color-border);
  cursor:pointer; transition:all var(--t-fast); min-height:64px;
}
.surah-item:hover { background:var(--color-surface-2); border-color:var(--color-emerald); }
.surah-num { width:36px; height:36px; display:flex; align-items:center; justify-content:center; background:var(--color-surface-2); border-radius:var(--radius-md); font-size:var(--fs-xs); font-weight:600; color:var(--color-emerald-bright); flex-shrink:0; font-variant-numeric:tabular-nums; }
.surah-info { flex:1; }
.surah-name-en { font-size:var(--fs-md); font-weight:500; color:var(--color-text); }
.surah-name-ar { font-family:var(--font-arabic); font-size:var(--fs-sm); color:var(--color-gold); direction:rtl; }
.surah-meta { font-size:var(--fs-xs); color:var(--color-text-tertiary); }
.surah-play-btn {
  width:40px; height:40px; border-radius:50%;
  background:var(--color-emerald-muted); color:var(--color-emerald-bright);
  border:1px solid var(--color-emerald);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0; transition:all var(--t-fast);
}
.surah-play-btn:hover { background:var(--color-emerald); color:#fff; }

.dua-categories { display:flex; flex-direction:column; gap:var(--space-2); }
.dua-category-item { background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-lg); overflow:hidden; }
.dua-category-header { display:flex; align-items:center; justify-content:space-between; padding:var(--space-4); cursor:pointer; font-size:var(--fs-md); font-weight:500; color:var(--color-text); min-height:56px; }
.dua-category-header:hover { background:var(--color-surface-2); }
.dua-category-body { display:none; padding:0 var(--space-4) var(--space-4); }
.dua-category-item.open .dua-category-body { display:block; }

.dua-card {
  background:var(--color-surface-2); border-radius:var(--radius-md);
  padding:var(--space-4); margin-top:var(--space-2);
  border-left:3px solid var(--color-gold);
}
.dua-card__arabic { font-family:var(--font-arabic); font-size:var(--fs-arabic-lg); color:var(--color-text); direction:rtl; text-align:right; line-height:2; margin-bottom:var(--space-2); }
.dua-card__transliteration { font-size:var(--fs-sm); color:var(--color-text-secondary); font-style:italic; margin-bottom:var(--space-2); }
.dua-card__translation { font-size:var(--fs-sm); color:var(--color-text-secondary); margin-bottom:var(--space-3); }
.dua-card__audio { display:flex; align-items:center; gap:var(--space-2); font-size:var(--fs-xs); color:var(--color-emerald-bright); font-weight:500; }

.asma-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-2); }
.asma-item { background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-md); padding:var(--space-3) var(--space-2); text-align:center; transition:all var(--t-fast); }
.asma-item:hover { border-color:var(--color-gold); background:var(--color-gold-muted); }
.asma-num    { font-size:var(--fs-xs); color:var(--color-text-tertiary); display:block; margin-bottom:2px; }
.asma-arabic { font-family:var(--font-arabic); font-size:var(--fs-md); color:var(--color-gold); direction:rtl; display:block; margin-bottom:2px; }
.asma-latin  { font-size:var(--fs-xs); color:var(--color-text-secondary); display:block; }

/* ── 32. MAP PAGE ─────────────────────────────────────────────────────────── */
.map-filters { display:flex; gap:var(--space-2); flex-wrap:wrap; margin-bottom:var(--space-4); }
.filter-pill {
  display:flex; align-items:center; gap:4px; padding:var(--space-2) var(--space-3);
  border-radius:var(--radius-full); font-size:var(--fs-xs); font-weight:500;
  background:var(--color-surface-2); border:1px solid var(--color-border);
  color:var(--color-text-secondary); transition:all var(--t-fast); white-space:nowrap;
}
.filter-pill:hover { border-color:var(--color-emerald); color:var(--color-text); }
.filter-pill.active { background:var(--color-emerald); border-color:var(--color-emerald); color:#fff; }

.map-container {
  background:var(--map-bg); border:1px solid var(--color-border);
  border-radius:var(--radius-xl); overflow:hidden;
  margin-bottom:var(--space-4); position:relative;
}
.map-tooltip {
  position:absolute; background:var(--color-surface); border:1px solid var(--color-border);
  border-radius:var(--radius-md); padding:var(--space-2) var(--space-3);
  font-size:var(--fs-xs); color:var(--color-text); box-shadow:var(--shadow-md);
  pointer-events:none; white-space:nowrap; z-index:10;
}
.shoe-tracker-card,.sim-guide-card,.lost-found-card,.camera-translate-card {
  background:var(--color-surface); border:1px solid var(--color-border);
  border-radius:var(--radius-xl); padding:var(--space-5); margin-bottom:var(--space-4);
}
.shoe-tracker-card h3,.sim-guide-card h3,.lost-found-card h3,.camera-translate-card h3 {
  font-size:var(--fs-md); font-weight:600; color:var(--color-text); margin-bottom:var(--space-4);
}
.shoe-tracker-inner { display:flex; gap:var(--space-3); align-items:flex-start; margin-bottom:var(--space-3); }
.shoe-tracker-photo {
  width:80px; height:80px; border-radius:var(--radius-md);
  border:2px dashed var(--color-border); display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:4px;
  font-size:var(--fs-xs); color:var(--color-text-tertiary); flex-shrink:0; cursor:pointer; transition:border-color var(--t-fast);
}
.shoe-tracker-photo:hover { border-color:var(--color-emerald); }
.shoe-tracker-info { flex:1; display:flex; flex-direction:column; gap:var(--space-2); }
.shoe-tracker-saved { font-size:var(--fs-xs); color:var(--color-success); }

.sim-guide-subtitle { font-size:var(--fs-sm); color:var(--color-text-secondary); margin-bottom:var(--space-3); }
.sim-table { display:flex; flex-direction:column; border-radius:var(--radius-md); overflow:hidden; border:1px solid var(--color-border); margin-bottom:var(--space-3); }
.sim-row { display:grid; grid-template-columns:1fr 1fr 1fr 1fr; border-bottom:1px solid var(--color-border); }
.sim-row:last-child { border-bottom:none; }
.sim-row>span { padding:var(--space-3); font-size:var(--fs-sm); color:var(--color-text-secondary); }
.sim-row--header { background:var(--color-surface-2); }
.sim-row--header>span { font-size:var(--fs-xs); font-weight:600; color:var(--color-text-tertiary); text-transform:uppercase; letter-spacing:0.04em; }
.sim-tip { font-size:var(--fs-xs); color:var(--color-info); background:var(--color-info-muted); padding:var(--space-2) var(--space-3); border-radius:var(--radius-md); }

/* ── 33. TRACKER PAGE ─────────────────────────────────────────────────────── */
.journey-timeline { background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-xl); padding:var(--space-5); margin-bottom:var(--space-4); }
.journey-input-row { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-3); margin-bottom:var(--space-4); }
.input-group { display:flex; flex-direction:column; gap:var(--space-1); }
.input-group label { font-size:var(--fs-xs); font-weight:600; color:var(--color-text-secondary); text-transform:uppercase; letter-spacing:0.06em; }
.input-field { width:100%; padding:var(--space-3) var(--space-4); background:var(--color-surface-2); border:1px solid var(--color-border); border-radius:var(--radius-md); color:var(--color-text); font-size:var(--fs-sm); transition:border-color var(--t-fast); outline:none; height:48px; }
.input-field:focus { border-color:var(--color-emerald); }
.input-field::placeholder { color:var(--color-text-tertiary); }

.journey-day-indicator { display:flex; justify-content:space-between; align-items:center; font-size:var(--fs-sm); color:var(--color-text-secondary); margin-bottom:var(--space-2); }
.journey-day-indicator strong { font-family:var(--font-display); font-size:var(--fs-lg); color:var(--color-emerald-bright); }
.journey-bar-wrap { height:8px; background:var(--color-surface-3); border-radius:var(--radius-full); overflow:hidden; margin-bottom:var(--space-2); }
.journey-bar { height:100%; width:var(--fill); background:var(--grad-emerald); border-radius:var(--radius-full); transition:width 1s ease; }

.reminders-section,.group-tracker-card,.ziyarat-card,.diary-section {
  background:var(--color-surface); border:1px solid var(--color-border);
  border-radius:var(--radius-xl); padding:var(--space-5); margin-bottom:var(--space-4);
}
.reminders-section h3,.group-tracker-card h3,.ziyarat-card h3,.diary-section h3 { font-size:var(--fs-md); font-weight:600; color:var(--color-text); margin-bottom:var(--space-4); }
.group-tracker-card>p { font-size:var(--fs-sm); color:var(--color-text-secondary); margin-bottom:var(--space-3); }

.reminder-list { display:flex; flex-direction:column; gap:var(--space-2); }
.reminder-item { display:flex; align-items:center; gap:var(--space-3); padding:var(--space-3); background:var(--color-surface-2); border-radius:var(--radius-md); border:1px solid var(--color-border); min-height:64px; }
.reminder-icon { font-size:24px; flex-shrink:0; }
.reminder-text { flex:1; display:flex; flex-direction:column; gap:2px; }
.reminder-text strong { font-size:var(--fs-sm); color:var(--color-text); }
.reminder-text span   { font-size:var(--fs-xs); color:var(--color-text-secondary); }
.reminder-check { width:44px; height:44px; flex-shrink:0; color:var(--color-text-tertiary); transition:color var(--t-fast); }
.reminder-check[data-checked="true"] { color:var(--color-success); }

.group-map-placeholder { position:relative; height:180px; background:var(--color-surface-2); border-radius:var(--radius-lg); border:1px dashed var(--color-border); overflow:hidden; margin-bottom:var(--space-3); }
.group-map-inner { position:absolute; inset:0; background:linear-gradient(rgba(26,107,74,0.05) 1px,transparent 1px),linear-gradient(90deg,rgba(26,107,74,0.05) 1px,transparent 1px); background-size:30px 30px; }
.group-member-dot { position:absolute; display:flex; flex-direction:column; align-items:center; gap:2px; }
.group-dot-avatar { width:36px; height:36px; border-radius:50%; background:var(--color-emerald); border:3px solid #fff; display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:700; color:#fff; box-shadow:var(--shadow-md); }
.group-member-dot--2 .group-dot-avatar { background:var(--color-gold); font-size:18px; }
.group-pulse { position:absolute; width:36px; height:36px; border-radius:50%; background:var(--color-emerald-bright); opacity:0.3; animation:group-pulse 2s ease-out infinite; pointer-events:none; }
@keyframes group-pulse { 0%{transform:scale(1);opacity:0.3} 100%{transform:scale(2.5);opacity:0} }
.group-map-label { position:absolute; bottom:var(--space-2); left:0; right:0; text-align:center; font-size:var(--fs-xs); color:var(--color-text-tertiary); }

.ziyarat-routes { display:flex; flex-direction:column; gap:var(--space-2); }
.ziyarat-route { background:var(--color-surface-2); border:1px solid var(--color-border); border-radius:var(--radius-md); padding:var(--space-3) var(--space-4); display:flex; align-items:center; justify-content:space-between; gap:var(--space-3); transition:all var(--t-fast); cursor:pointer; }
.ziyarat-route:hover { border-color:var(--color-emerald); }
.ziyarat-route-title { font-size:var(--fs-sm); font-weight:600; color:var(--color-text); }
.ziyarat-route-stops { font-size:var(--fs-xs); color:var(--color-text-secondary); }
.ziyarat-route-duration { font-size:var(--fs-xs); color:var(--color-text-tertiary); }

.diary-textarea { width:100%; background:var(--color-surface-2); border:1px solid var(--color-border); border-radius:var(--radius-md); padding:var(--space-3) var(--space-4); color:var(--color-text); font-size:var(--fs-sm); line-height:1.7; resize:vertical; outline:none; transition:border-color var(--t-fast); margin-bottom:var(--space-3); font-family:var(--font-body); }
.diary-textarea:focus { border-color:var(--color-emerald); }
.diary-textarea::placeholder { color:var(--color-text-tertiary); }
.diary-actions { display:flex; gap:var(--space-2); flex-wrap:wrap; margin-bottom:var(--space-4); }
.diary-entries { display:flex; flex-direction:column; gap:var(--space-2); }
.diary-entry-card { background:var(--color-surface-2); border:1px solid var(--color-border); border-radius:var(--radius-md); padding:var(--space-3); }
.diary-entry-date { font-size:var(--fs-xs); color:var(--color-text-tertiary); margin-bottom:4px; }
.diary-entry-text { font-size:var(--fs-sm); color:var(--color-text-secondary); line-height:1.6; }

/* ── 34. COMMUNITY PAGE ───────────────────────────────────────────────────── */
.online-badge { font-size:var(--fs-xs); color:var(--color-success); font-weight:500; }
.live-ticker-badge { display:flex; align-items:center; gap:var(--space-2); font-size:var(--fs-xs); font-weight:500; color:var(--color-danger); margin-bottom:var(--space-3); }
.live-dot { width:8px; height:8px; border-radius:50%; background:var(--color-danger); animation:pulse-dot 1.5s infinite; }

.feed-item { background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-lg); padding:var(--space-4); }
.feed-item__header { display:flex; align-items:center; gap:var(--space-2); margin-bottom:var(--space-2); }
.feed-item__avatar { width:32px; height:32px; border-radius:50%; background:var(--color-surface-3); display:flex; align-items:center; justify-content:center; font-size:16px; flex-shrink:0; }
.feed-item__name { font-size:var(--fs-sm); font-weight:600; color:var(--color-text); flex:1; }
.feed-item__time { font-size:var(--fs-xs); color:var(--color-text-tertiary); }
.feed-item__text { font-size:var(--fs-sm); color:var(--color-text-secondary); line-height:1.6; margin-bottom:var(--space-2); }
.feed-item__actions { display:flex; gap:var(--space-3); }
.feed-action-btn { font-size:var(--fs-xs); color:var(--color-text-tertiary); display:flex; align-items:center; gap:4px; transition:color var(--t-fast); }
.feed-action-btn:hover { color:var(--color-emerald-bright); }
.feed-action-btn.report:hover { color:var(--color-danger); }

/* ── 35. EMERGENCY PAGE ───────────────────────────────────────────────────── */
.panic-card { background:var(--color-danger-muted); border:2px solid var(--color-danger); border-radius:var(--radius-xl); overflow:hidden; margin-bottom:var(--space-4); }
.btn-lost-child { width:100%; padding:var(--space-6); display:flex; flex-direction:column; align-items:center; gap:var(--space-3); background:var(--grad-danger); color:#fff; font-size:var(--fs-xl); font-weight:700; letter-spacing:0.04em; text-transform:uppercase; transition:all var(--t-fast); border:none; }
.btn-lost-child:hover { filter:brightness(1.1); }
.btn-lost-child:active { transform:scale(0.98); }
.lost-child-icon { font-size:48px; animation:lost-pulse 2s ease-in-out infinite; }
@keyframes lost-pulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.08)} }
.lost-child-protocol { padding:var(--space-5); border-top:1px solid var(--color-danger); background:var(--color-surface); }
.protocol-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--space-4); }
.protocol-header h3 { font-size:var(--fs-md); font-weight:600; color:var(--color-danger); }
.protocol-steps { display:flex; flex-direction:column; gap:var(--space-4); list-style:decimal; padding-left:var(--space-5); }
.protocol-step strong { display:block; font-size:var(--fs-sm); color:var(--color-text); margin-bottom:var(--space-1); }
.protocol-step p,.protocol-step>* { font-size:var(--fs-sm); color:var(--color-text-secondary); line-height:1.6; }
.tel-link { color:var(--color-danger); font-weight:700; font-size:var(--fs-md); }
.child-photo-placeholder { width:100%; height:120px; border:2px dashed var(--color-danger); border-radius:var(--radius-md); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--space-2); font-size:var(--fs-sm); color:var(--color-danger); cursor:pointer; transition:background var(--t-fast); }
.child-photo-placeholder:hover { background:var(--color-danger-muted); }

.sos-grid { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-3); margin-bottom:var(--space-5); }
.sos-btn { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--space-1); padding:var(--space-4) var(--space-3); border-radius:var(--radius-xl); background:var(--color-surface); border:2px solid var(--color-danger); text-decoration:none; cursor:pointer; transition:all var(--t-fast); min-height:96px; }
.sos-btn:hover { background:var(--color-danger-muted); transform:translateY(-2px); box-shadow:0 4px 16px var(--color-danger-glow); }
.sos-btn--police   { border-color:var(--color-info); }
.sos-btn--police:hover { background:var(--color-info-muted); }
.sos-btn--taxi     { border-color:var(--color-warning); }
.sos-btn--taxi:hover { background:var(--color-warning-muted); }
.sos-btn--hospital { border-color:var(--color-emerald); }
.sos-btn--hospital:hover { background:var(--color-emerald-muted); }
.sos-btn__icon  { font-size:28px; }
.sos-btn__label { font-size:var(--fs-sm); font-weight:700; color:var(--color-text); }
.sos-btn__sub   { font-size:var(--fs-xs); color:var(--color-text-secondary); }

.phrase-translator { background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-xl); padding:var(--space-5); margin-bottom:var(--space-4); }
.phrase-translator h3 { font-size:var(--fs-md); font-weight:600; color:var(--color-text); margin-bottom:var(--space-4); }
.phrase-categories { display:flex; flex-direction:column; gap:var(--space-3); }
.phrase-category { background:var(--color-surface-2); border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--color-border); }
.phrase-category-label { padding:var(--space-3) var(--space-4); font-size:var(--fs-sm); font-weight:600; color:var(--color-text); background:var(--color-surface-3); border-bottom:1px solid var(--color-border); }
.phrase-list { padding:var(--space-2); display:flex; flex-direction:column; gap:var(--space-1); }
.phrase-item { display:flex; align-items:center; justify-content:space-between; padding:var(--space-3); border-radius:var(--radius-md); background:var(--color-surface); border:1px solid var(--color-border); gap:var(--space-3); min-height:56px; }
.phrase-text { flex:1; }
.phrase-text-en { font-size:var(--fs-sm); color:var(--color-text); font-weight:500; }
.phrase-text-ar { font-family:var(--font-arabic); font-size:var(--fs-sm); color:var(--color-gold); direction:rtl; }
.phrase-audio-btn { width:44px; height:44px; border-radius:50%; background:var(--color-emerald-muted); color:var(--color-emerald-bright); border:1px solid var(--color-emerald); display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:18px; transition:all var(--t-fast); }
.phrase-audio-btn:hover { background:var(--color-emerald); color:#fff; }

.lost-found-locations { display:flex; flex-direction:column; gap:var(--space-2); }
.lf-location { display:flex; align-items:center; gap:var(--space-2); font-size:var(--fs-sm); color:var(--color-text-secondary); padding:var(--space-2) 0; border-bottom:1px solid var(--color-border); }
.lf-location:last-child { border-bottom:none; }

.camera-placeholder { margin:var(--space-3) 0; height:180px; background:#000; border-radius:var(--radius-lg); overflow:hidden; position:relative; display:flex; align-items:center; justify-content:center; }
.camera-viewfinder { position:relative; width:200px; height:120px; border:2px solid rgba(34,200,122,0.5); border-radius:4px; }
.camera-viewfinder::before,.camera-viewfinder::after { content:''; position:absolute; width:20px; height:20px; border-color:var(--color-emerald-bright); border-style:solid; }
.camera-viewfinder::before { top:-2px; left:-2px; border-width:2px 0 0 2px; }
.camera-viewfinder::after  { bottom:-2px; right:-2px; border-width:0 2px 2px 0; }
.camera-scan-line { position:absolute; top:0; left:0; right:0; height:2px; background:var(--color-emerald-bright); box-shadow:0 0 8px var(--color-emerald-bright); animation:scan 2s linear infinite; }
@keyframes scan { 0%{top:0} 50%{top:calc(100% - 2px)} 100%{top:0} }
.camera-translate-card>p { font-size:var(--fs-sm); color:var(--color-text-secondary); margin-bottom:var(--space-2); }

/* ── 36. PREMIUM PAGE ─────────────────────────────────────────────────────── */

@media(min-width:480px) {  }

.payment-logos { font-size:var(--fs-xs); color:var(--color-text-tertiary); text-align:center; }

/* ── 37. SETTINGS PAGE ────────────────────────────────────────────────────── */
.settings-list { display:flex; flex-direction:column; gap:var(--space-4); }
.settings-group { background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-xl); overflow:hidden; }
.settings-group-title { font-size:var(--fs-xs); font-weight:600; text-transform:uppercase; letter-spacing:0.08em; color:var(--color-text-tertiary); padding:var(--space-3) var(--space-5); background:var(--color-surface-2); border-bottom:1px solid var(--color-border); }
.settings-item { display:flex; align-items:center; justify-content:space-between; gap:var(--space-3); padding:var(--space-4) var(--space-5); border-bottom:1px solid var(--color-border); min-height:60px; }
.settings-item:last-child { border-bottom:none; }
.settings-item__label { display:flex; flex-direction:column; gap:2px; }
.settings-item__label span  { font-size:var(--fs-sm); color:var(--color-text); }
.settings-item__label small { font-size:var(--fs-xs); color:var(--color-text-secondary); }
.settings-value { font-size:var(--fs-sm); color:var(--color-text-secondary); }

.toggle-switch { width:52px; height:30px; border-radius:var(--radius-full); background:var(--color-surface-3); border:2px solid var(--color-border); position:relative; flex-shrink:0; transition:all var(--t-fast); cursor:pointer; }
.toggle-switch[aria-checked="true"] { background:var(--color-emerald); border-color:var(--color-emerald); }
.toggle-switch__knob { position:absolute; top:2px; left:2px; width:22px; height:22px; border-radius:50%; background:var(--color-text-secondary); transition:transform var(--t-fast),background var(--t-fast); }
.toggle-switch[aria-checked="true"] .toggle-switch__knob { transform:translateX(22px); background:#fff; }

.font-size-stepper { display:flex; align-items:center; gap:var(--space-2); }
.stepper-btn { width:36px; height:36px; border-radius:var(--radius-sm); background:var(--color-surface-2); border:1px solid var(--color-border); color:var(--color-text); font-size:var(--fs-sm); font-weight:600; display:flex; align-items:center; justify-content:center; transition:all var(--t-fast); }
.stepper-btn:hover { border-color:var(--color-emerald); color:var(--color-emerald-bright); }

/* ── 38. MODALS ───────────────────────────────────────────────────────────── */
.modal { position:fixed; inset:0; z-index:500; display:flex; align-items:flex-end; justify-content:center; pointer-events:none; }
.modal[hidden] { display:none !important; }
.modal:not([hidden]) { pointer-events:auto; }
.modal__overlay { position:absolute; inset:0; background:var(--overlay-modal); cursor:pointer; animation:modal-bg-in var(--t-normal) forwards; }
.modal__box { position:relative; z-index:1; width:100%; max-width:500px; background:var(--color-surface); border-radius:var(--radius-xl) var(--radius-xl) 0 0; border-top:1px solid var(--color-border); padding-bottom:var(--safe-bottom); animation:modal-slide-up var(--t-normal) var(--t-spring) both; max-height:92dvh; overflow-y:auto; overscroll-behavior:contain; }
/* Keyboard-Fix: Modal nach oben schieben wenn Tastatur offen */
@media (max-height: 500px) {
  .modal__box { max-height:100dvh; border-radius:0; }
  .modal { align-items:flex-start; }
}
@keyframes modal-bg-in    { from{opacity:0} to{opacity:1} }
@keyframes modal-slide-up { from{transform:translateY(100%)} to{transform:translateY(0)} }
.modal__header { display:flex; align-items:center; justify-content:space-between; padding:var(--space-5) var(--space-5) var(--space-4); border-bottom:1px solid var(--color-border); }
.modal__header h3 { font-size:var(--fs-md); font-weight:600; color:var(--color-text); }
.modal__body { padding:var(--space-5); display:flex; flex-direction:column; gap:var(--space-4); }
.modal__footer { display:flex; gap:var(--space-3); padding:var(--space-4) var(--space-5); border-top:1px solid var(--color-border); }
.modal__footer>* { flex:1; }

/* ── 39. TOAST ────────────────────────────────────────────────────────────── */
.toast {
  position:fixed; bottom:calc(var(--space-6) + var(--safe-bottom));
  left:var(--space-4); right:var(--space-4); z-index:600;
  max-width:400px; margin:0 auto;
  background:var(--color-surface-3); border:1px solid var(--color-border);
  border-radius:var(--radius-full); padding:var(--space-3) var(--space-5);
  font-size:var(--fs-sm); font-weight:500; color:var(--color-text);
  box-shadow:var(--shadow-xl); text-align:center;
  animation:toast-in var(--t-normal) var(--t-spring);
  transition:opacity var(--t-fast);
}
.toast.is-hiding { opacity:0; }
@keyframes toast-in { from{transform:translateY(20px);opacity:0} to{transform:translateY(0);opacity:1} }

/* ── 40. INSTALL BANNER ───────────────────────────────────────────────────── */
.install-banner {
  position:fixed; bottom:calc(var(--space-12) + var(--safe-bottom));
  left:var(--space-4); right:var(--space-4); z-index:300;
  max-width:480px; margin:0 auto;
  background:var(--color-surface); border:1px solid var(--color-emerald);
  border-radius:var(--radius-xl); padding:var(--space-4);
  display:flex; align-items:center; gap:var(--space-3);
  box-shadow:var(--shadow-lg); animation:toast-in var(--t-normal) var(--t-spring);
}
.install-banner__text { flex:1; display:flex; flex-direction:column; gap:2px; }
.install-banner__text strong { font-size:var(--fs-sm); color:var(--color-text); }
.install-banner__text span   { font-size:var(--fs-xs); color:var(--color-text-secondary); }

/* ── 41. THEME ICON TOGGLE ────────────────────────────────────────────────── */
[data-theme="dark"]  .icon-moon { display:none; }
[data-theme="dark"]  .icon-sun  { display:block; }
[data-theme="light"] .icon-moon { display:block; }
[data-theme="light"] .icon-sun  { display:none; }

/* ════════════════════════════════════════════════════════════════════════════
   NEW COMPONENTS v2.0
   ════════════════════════════════════════════════════════════════════════════ */

/* ── N1. GATE NAVIGATOR ───────────────────────────────────────────────────── */
.gate-nav-section {
  background:var(--glass-surface);
  backdrop-filter:var(--glass-blur);
  -webkit-backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-border);
  border-radius:var(--radius-xl);
  padding:var(--space-5);
  margin-bottom:var(--space-4);
}

.gate-nav-section h3 {
  font-size:var(--fs-md); font-weight:600; color:var(--color-text);
  margin-bottom:var(--space-3); display:flex; align-items:center; gap:var(--space-2);
}

/* City toggle */
.gate-city-toggle {
  display:flex; gap:var(--space-1);
  background:var(--color-surface-2); padding:3px;
  border-radius:var(--radius-full); border:1px solid var(--color-border);
  margin-bottom:var(--space-4);
}
.gate-city-btn {
  flex:1; padding:var(--space-2) var(--space-3);
  border-radius:var(--radius-full);
  font-size:var(--fs-sm); font-weight:600;
  color:var(--color-text-secondary); transition:all var(--t-fast);
  text-align:center;
}
.gate-city-btn.active { background:var(--grad-emerald); color:#fff; }

/* Gate list */
.gate-list { display:flex; flex-direction:column; gap:var(--space-2); }

.gate-item {
  background:var(--color-surface-2);
  border:1px solid var(--color-border);
  border-radius:var(--radius-lg);
  overflow:hidden;
  transition:border-color var(--t-fast);
  cursor:pointer;
}
.gate-item:hover { border-color:var(--color-emerald); }
.gate-item.is-open { border-color:var(--color-emerald); }

.gate-item__header {
  display:flex; align-items:center; gap:var(--space-3);
  padding:var(--space-3) var(--space-4); min-height:64px;
}

.gate-num {
  width:36px; height:36px; border-radius:var(--radius-md);
  background:var(--color-emerald-muted); border:1px solid var(--color-emerald);
  display:flex; align-items:center; justify-content:center;
  font-size:var(--fs-sm); font-weight:700; color:var(--color-emerald-bright);
  flex-shrink:0;
}

.gate-info { flex:1; }
.gate-name-en { font-size:var(--fs-sm); font-weight:600; color:var(--color-text); }
.gate-name-ar { font-family:var(--font-arabic); font-size:var(--fs-sm); color:var(--color-gold); direction:rtl; }
.gate-meta { display:flex; gap:var(--space-3); margin-top:2px; flex-wrap:wrap; }
.gate-meta span { font-size:var(--fs-xs); color:var(--color-text-secondary); }

.gate-badges { display:flex; gap:var(--space-1); flex-shrink:0; }
.gate-badge {
  font-size:var(--fs-xs); padding:2px 6px;
  border-radius:var(--radius-full);
  font-weight:600;
}
.gate-badge--wc  { background:var(--color-info-muted);    color:var(--color-info); }
.gate-badge--fem { background:var(--color-gold-muted);     color:var(--color-gold); }
.gate-badge--dis { background:var(--color-success-muted);  color:var(--color-success); }

.gate-item__body {
  display:none;
  padding:0 var(--space-4) var(--space-4);
  border-top:1px solid var(--color-border);
}
.gate-item.is-open .gate-item__body { display:block; padding-top:var(--space-3); }

.gate-nearby-list { margin-bottom:var(--space-3); }
.gate-nearby-list h5 { font-size:var(--fs-xs); font-weight:600; color:var(--color-text-secondary); text-transform:uppercase; letter-spacing:0.06em; margin-bottom:var(--space-2); }
.gate-nearby-list ul { display:flex; flex-direction:column; gap:4px; }
.gate-nearby-list li { font-size:var(--fs-sm); color:var(--color-text-secondary); display:flex; align-items:center; gap:var(--space-2); }
.gate-nearby-list li::before { content:'📍'; font-size:12px; }

.gate-notes {
  font-size:var(--fs-xs); color:var(--color-text-secondary);
  font-style:italic;
  background:var(--color-surface-3);
  border-radius:var(--radius-md);
  padding:var(--space-2) var(--space-3);
  margin-bottom:var(--space-3);
}

.gate-distance {
  display:flex; align-items:center; gap:var(--space-2);
  font-size:var(--fs-sm); color:var(--color-emerald-bright);
  font-weight:600;
}

/* ── N2. WUDU LOCATOR ─────────────────────────────────────────────────────── */
.wudu-section {
  background:var(--glass-surface);
  backdrop-filter:var(--glass-blur);
  -webkit-backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-border);
  border-radius:var(--radius-xl);
  padding:var(--space-5);
  margin-bottom:var(--space-4);
}
.wudu-section h3 {
  font-size:var(--fs-md); font-weight:600; color:var(--color-text);
  margin-bottom:var(--space-3); display:flex; align-items:center; gap:var(--space-2);
}

.wudu-filters {
  display:flex; gap:var(--space-2); margin-bottom:var(--space-4); flex-wrap:wrap;
}
.wudu-filter-btn {
  display:flex; align-items:center; gap:var(--space-1);
  padding:var(--space-2) var(--space-3);
  border-radius:var(--radius-full);
  font-size:var(--fs-xs); font-weight:500;
  background:var(--color-surface-2); border:1px solid var(--color-border);
  color:var(--color-text-secondary); transition:all var(--t-fast);
}
.wudu-filter-btn:hover { border-color:var(--color-emerald); color:var(--color-text); }
.wudu-filter-btn.active { background:var(--color-info-muted); border-color:var(--color-info); color:var(--color-info); }
.wudu-filter-btn.female-only.active { background:var(--color-gold-muted); border-color:var(--color-gold); color:var(--color-gold); }

.wudu-list { display:flex; flex-direction:column; gap:var(--space-3); }

.wudu-item {
  background:var(--color-surface-2);
  border:1px solid var(--color-border);
  border-radius:var(--radius-lg);
  padding:var(--space-4);
  display:flex; align-items:flex-start; gap:var(--space-3);
  transition:all var(--t-fast);
}
.wudu-item:hover { border-color:var(--color-info); box-shadow:var(--shadow-sm); }

.wudu-icon-wrap {
  width:44px; height:44px; border-radius:var(--radius-md);
  background:var(--color-info-muted); border:1px solid var(--color-info);
  display:flex; align-items:center; justify-content:center;
  font-size:22px; flex-shrink:0;
}

.wudu-details { flex:1; }
.wudu-name { font-size:var(--fs-sm); font-weight:600; color:var(--color-text); margin-bottom:2px; }
.wudu-floor { font-size:var(--fs-xs); color:var(--color-text-secondary); margin-bottom:var(--space-2); }

.wudu-tags { display:flex; gap:var(--space-1); flex-wrap:wrap; margin-bottom:var(--space-2); }
.wudu-tag {
  font-size:var(--fs-xs); padding:2px 8px;
  border-radius:var(--radius-full); font-weight:600;
}
.wudu-tag--male     { background:var(--color-info-muted);    color:var(--color-info); }
.wudu-tag--female   { background:var(--color-gold-muted);     color:var(--color-gold); }
.wudu-tag--dis      { background:var(--color-success-muted);  color:var(--color-success); }
.wudu-tag--capacity { background:var(--color-surface-3);      color:var(--color-text-secondary); }

.wudu-notes { font-size:var(--fs-xs); color:var(--color-text-tertiary); font-style:italic; }
.wudu-distance { font-size:var(--fs-xs); color:var(--color-emerald-bright); font-weight:600; margin-top:var(--space-1); }

/* ── N3. TASBIH COUNTER MODAL ─────────────────────────────────────────────── */
.tasbih-display {
  display:flex; flex-direction:column; align-items:center; gap:var(--space-4);
  padding:var(--space-6) var(--space-5);
}

.tasbih-number {
  font-family:var(--font-display);
  font-size:80px; font-weight:300; line-height:1;
  color:var(--color-emerald-bright);
  font-variant-numeric:tabular-nums;
  transition:transform var(--t-spring);
}
.tasbih-number.bump { animation:tawaf-bump 0.25s var(--t-spring); }

.tasbih-goal { font-size:var(--fs-sm); color:var(--color-text-secondary); }
.tasbih-goal span { color:var(--color-gold); font-weight:600; }

.tasbih-circles {
  display:flex; gap:var(--space-2); justify-content:center; flex-wrap:wrap;
  padding:0 var(--space-4);
}
.tasbih-circle {
  width:12px; height:12px; border-radius:50%;
  background:var(--color-surface-3); border:1.5px solid var(--color-border);
  transition:all var(--t-spring);
}
.tasbih-circle.done {
  background:var(--color-emerald);
  border-color:var(--color-emerald);
  box-shadow:0 0 6px var(--color-emerald-glow);
}

.tasbih-tap-btn {
  width:140px; height:140px; border-radius:50%;
  background:var(--grad-emerald);
  color:#fff; font-size:var(--fs-xl); font-weight:600;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--space-1);
  box-shadow:0 8px 32px var(--color-emerald-glow);
  transition:all var(--t-fast);
  border:none; cursor:pointer;
}
.tasbih-tap-btn:hover  { filter:brightness(1.1); transform:scale(1.04); }
.tasbih-tap-btn:active { transform:scale(0.94); }
.tasbih-tap-btn span   { font-size:var(--fs-xs); opacity:0.8; }

.tasbih-controls { display:flex; gap:var(--space-3); width:100%; padding:0 var(--space-5); }
.tasbih-controls button { flex:1; }

.tasbih-dhikr-select { margin-bottom:var(--space-4); }
.tasbih-dhikr-select label { display:block; font-size:var(--fs-xs); font-weight:600; color:var(--color-text-secondary); text-transform:uppercase; letter-spacing:0.06em; margin-bottom:var(--space-2); }

/* ── N4. ZAMZAM ADD GLASSES MODAL ─────────────────────────────────────────── */
.zamzam-add-grid {
  display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-3);
  margin-bottom:var(--space-4);
}
.zamzam-quick-btn {
  display:flex; flex-direction:column; align-items:center; gap:var(--space-1);
  padding:var(--space-3); border-radius:var(--radius-lg);
  background:var(--color-surface-2); border:1px solid var(--color-border);
  font-size:var(--fs-xs); font-weight:600; color:var(--color-text-secondary);
  transition:all var(--t-fast); cursor:pointer;
}
.zamzam-quick-btn:hover { border-color:var(--color-info); color:var(--color-info); background:var(--color-info-muted); }
.zamzam-quick-btn span:first-child { font-size:24px; }
.zamzam-dua-selection { margin-top:var(--space-4); }
.zamzam-dua-selection label { display:block; font-size:var(--fs-xs); font-weight:600; color:var(--color-text-secondary); text-transform:uppercase; letter-spacing:0.06em; margin-bottom:var(--space-2); }
.zamzam-dua-text {
  font-family:var(--font-arabic); font-size:var(--fs-arabic);
  color:var(--color-gold); direction:rtl; text-align:right;
  line-height:2; padding:var(--space-3) var(--space-4);
  background:var(--color-surface-2); border-radius:var(--radius-md);
  border-left:3px solid var(--color-gold);
}

/* ── N5. PREMIUM PAYWALL MODAL ────────────────────────────────────────────── */
.modal--paywall .modal__box {
  background:var(--glass-surface);
  backdrop-filter:blur(24px);
  -webkit-backdrop-filter:blur(24px);
  border:1px solid var(--glass-border);
  border-top:3px solid var(--color-gold);
}

.paywall-hero {
  display:flex; flex-direction:column; align-items:center; gap:var(--space-3);
  padding:var(--space-6) var(--space-5) var(--space-4);
  text-align:center;
}
.paywall-icon { font-size:48px; }
.paywall-title {
  font-family:var(--font-display); font-size:var(--fs-2xl); font-weight:500;
  color:var(--color-text); letter-spacing:0.02em;
}
.paywall-subtitle { font-size:var(--fs-sm); color:var(--color-text-secondary); line-height:1.6; }

.paywall-feature-locked {
  display:flex; align-items:center; gap:var(--space-3);
  padding:var(--space-3) var(--space-5);
  background:rgba(201,168,76,0.06);
  border-top:1px solid var(--glass-border);
}
.paywall-feature-locked .pfl-icon { font-size:22px; flex-shrink:0; }
.paywall-feature-locked .pfl-text { font-size:var(--fs-sm); color:var(--color-text-secondary); flex:1; }
.paywall-feature-locked .pfl-lock { color:var(--color-gold); font-size:16px; }

.paywall-features-list { padding:0 var(--space-5) var(--space-4); display:flex; flex-direction:column; gap:var(--space-2); }

.paywall-feature-row {
  display:flex; align-items:center; gap:var(--space-3);
  padding:var(--space-3) var(--space-4);
  background:var(--color-surface-2); border-radius:var(--radius-md);
  border:1px solid var(--color-border);
}
.paywall-feature-row .pf-icon { font-size:20px; flex-shrink:0; }
.paywall-feature-row .pf-info { flex:1; }
.paywall-feature-row .pf-title { font-size:var(--fs-sm); font-weight:600; color:var(--color-text); }
.paywall-feature-row .pf-desc  { font-size:var(--fs-xs); color:var(--color-text-secondary); }
.paywall-feature-row .pf-check { color:var(--color-emerald-bright); font-size:18px; }

.paywall-prices {
  display:grid; grid-template-columns:1fr 1fr; gap:var(--space-3);
  padding:var(--space-4) var(--space-5);
}
.paywall-price-opt {
  display:flex; flex-direction:column; align-items:center; gap:var(--space-1);
  padding:var(--space-4); border-radius:var(--radius-xl);
  background:var(--color-surface-2); border:2px solid var(--color-border);
  cursor:pointer; transition:all var(--t-fast);
}
.paywall-price-opt:hover { border-color:var(--color-gold); }
.paywall-price-opt.selected { border-color:var(--color-gold); background:var(--color-gold-muted); }
.paywall-price-opt .ppo-period { font-size:var(--fs-xs); color:var(--color-text-secondary); text-transform:uppercase; letter-spacing:0.06em; }
.paywall-price-opt .ppo-price  { font-family:var(--font-display); font-size:var(--fs-xl); font-weight:300; color:var(--color-text); }
.paywall-price-opt .ppo-save   { font-size:var(--fs-xs); color:var(--color-success); font-weight:600; }

.paywall-cta-area {
  padding:var(--space-4) var(--space-5) calc(var(--space-5) + var(--safe-bottom));
  display:flex; flex-direction:column; gap:var(--space-3);
}
.btn-unlock {
  display:flex; align-items:center; justify-content:center; gap:var(--space-2);
  width:100%; height:56px; border-radius:var(--radius-full);
  background:var(--grad-gold); color:#1a1000;
  font-size:var(--fs-md); font-weight:700; letter-spacing:0.02em;
  border:none; cursor:pointer; transition:all var(--t-fast);
  box-shadow:0 4px 20px var(--color-gold-glow);
}
.btn-unlock:hover  { filter:brightness(1.08); }
.btn-unlock:active { transform:scale(0.97); }
.paywall-terms { font-size:var(--fs-xs); color:var(--color-text-tertiary); text-align:center; }

/* ── 42. RESPONSIVE ───────────────────────────────────────────────────────── */
@media(min-width:600px) {
  .dashboard-grid { grid-template-columns:repeat(3,1fr); }
  .dash-card--qibla  { grid-column:1/2; }
  .dash-card--weather{ grid-column:2/3; }
  .dash-card--crowd  { grid-column:3/4; }
  .dash-card--dua-wheel { grid-column:2/4; }
  
  .sos-grid { grid-template-columns:repeat(4,1fr); }
  .asma-grid { grid-template-columns:repeat(4,1fr); }
  .zamzam-add-grid { grid-template-columns:repeat(4,1fr); }
}
@media(min-width:900px) {
  .app { max-width:720px; margin:0 auto; }
  .sidebar__nav { width:280px; }
}

/* ── 43. REDUCED MOTION ───────────────────────────────────────────────────── */
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation-duration:0.01ms !important; transition-duration:0.01ms !important; }
}

/* ── 44. RTL ──────────────────────────────────────────────────────────────── */
[data-lang="ar"] .app,[data-lang="ur"] .app { direction:rtl; }
[data-lang="ar"] .sidebar__nav,[data-lang="ur"] .sidebar__nav { left:auto; right:0; transform:translateX(100%); border-right:none; border-left:1px solid var(--color-border); }
[data-lang="ar"] .sidebar.is-open .sidebar__nav,[data-lang="ur"] .sidebar.is-open .sidebar__nav { transform:translateX(0); }
[data-lang="ar"] .guide-step__dua-box,[data-lang="ur"] .guide-step__dua-box { border-left:none; border-right:3px solid var(--color-gold); }
[data-lang="ar"] .dua-card,[data-lang="ur"] .dua-card { border-left:none; border-right:3px solid var(--color-gold); }
[data-lang="ar"] .hero-prayer-card__weather-inline,[data-lang="ur"] .hero-prayer-card__weather-inline { left:var(--space-4); right:auto; align-items:flex-start; }

/* ── 45. SCROLLBAR ────────────────────────────────────────────────────────── */
* { scrollbar-width:thin; scrollbar-color:var(--color-border) transparent; }
::-webkit-scrollbar { width:4px; height:4px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--color-border); border-radius:2px; }

/* ── 46. SELECTION ────────────────────────────────────────────────────────── */
::selection { background:var(--color-emerald-glow); color:var(--color-emerald-bright); }

/* ── 47. SKELETON ─────────────────────────────────────────────────────────── */
.skeleton {
  background:linear-gradient(90deg,var(--color-surface-2) 25%,var(--color-surface-3) 50%,var(--color-surface-2) 75%);
  background-size:200% 100%;
  animation:skeleton-shimmer 1.5s infinite;
  border-radius:var(--radius-md);
}
@keyframes skeleton-shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

/* ── 48. UTILITIES ────────────────────────────────────────────────────────── */
.hidden    { display:none !important; }
.invisible { visibility:hidden !important; }
.text-center  { text-align:center; }
.text-emerald { color:var(--color-emerald-bright); }
.text-gold    { color:var(--color-gold); }
.text-danger  { color:var(--color-danger); }
.mt-4 { margin-top:var(--space-4); }
.mb-4 { margin-bottom:var(--space-4); }
.w-full { width:100%; }

/* ── 49. PRINT ────────────────────────────────────────────────────────────── */
@media print {
  .app-header,.sidebar,.quick-actions,.offline-banner,.geofence-banner,.install-banner,.toast { display:none !important; }
  body::before,body::after { display:none !important; }
  body { background:#fff; color:#000; }
  .page { padding:0; }
}

/* ── PUNKT 4: HARAM-STATUS-BADGE — Styles jetzt bei hero-prayer-card__location ─ */

/* ── LOCATION NAVIGATOR ────────────────────────────────────────────────────── */
.loc-nav-section {
  background:var(--glass-surface);
  backdrop-filter:var(--glass-blur);
  -webkit-backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-border);
  border-radius:var(--radius-xl);
  padding:var(--space-5);
  margin-bottom:var(--space-4);
}
.loc-nav-section h3 {
  font-size:var(--fs-md); font-weight:600; color:var(--color-text);
  margin-bottom:var(--space-3); display:flex; align-items:center; gap:var(--space-2);
}
.loc-city-toggle {
  display:grid; grid-template-columns:1fr 1fr; gap:var(--space-2);
  margin-bottom:var(--space-4);
}
.loc-city-btn {
  display:flex; flex-direction:column; align-items:center; gap:4px;
  padding:var(--space-3) var(--space-2);
  border-radius:var(--radius-lg);
  background:var(--color-surface-2); border:2px solid var(--color-border);
  font-size:var(--fs-sm); font-weight:600; color:var(--color-text-secondary);
  transition:all var(--t-fast); cursor:pointer;
}
.loc-city-btn .loc-city-emoji { font-size:28px; }
.loc-city-btn:hover { border-color:var(--color-emerald); color:var(--color-text); }
.loc-city-btn.active {
  border-color:var(--color-emerald-bright);
  background:var(--color-emerald-muted);
  color:var(--color-emerald-bright);
  box-shadow:0 0 16px var(--color-emerald-glow);
}

.loc-search-bar {
  display:flex; align-items:center; gap:var(--space-2);
  background:var(--color-surface-2); border:1px solid var(--color-border);
  border-radius:var(--radius-full); padding:0 var(--space-3);
  margin-bottom:var(--space-3); height:42px;
}
.loc-search-bar input { flex:1; background:none; border:none; outline:none; font-size:var(--fs-sm); color:var(--color-text); }
.loc-search-bar input::placeholder { color:var(--color-text-tertiary); }

.loc-city-desc {
  font-size:var(--fs-xs); color:var(--color-text-secondary);
  background:var(--color-emerald-muted); border:1px solid var(--color-emerald);
  border-radius:var(--radius-md); padding:var(--space-2) var(--space-3);
  margin-bottom:var(--space-3);
}

.loc-place-list { display:flex; flex-direction:column; gap:var(--space-2); }

.loc-place-item {
  background:var(--color-surface-2); border:1px solid var(--color-border);
  border-radius:var(--radius-lg); overflow:hidden; cursor:pointer;
  transition:border-color var(--t-fast);
}
.loc-place-item:hover,.loc-place-item.is-open { border-color:var(--color-emerald); }

.loc-place-header {
  display:flex; align-items:center; gap:var(--space-3);
  padding:var(--space-3) var(--space-4); min-height:60px;
}
.loc-place-icon {
  font-size:22px; width:40px; height:40px;
  display:flex; align-items:center; justify-content:center;
  background:var(--color-surface-3); border-radius:var(--radius-md); flex-shrink:0;
}
.loc-place-info { flex:1; }
.loc-place-name    { font-size:var(--fs-sm); font-weight:600; color:var(--color-text); }
.loc-place-name-ar { font-family:var(--font-arabic); font-size:var(--fs-sm); color:var(--color-gold); direction:rtl; }
.loc-place-meta    { display:flex; gap:var(--space-3); margin-top:2px; }
.loc-place-meta span { font-size:var(--fs-xs); color:var(--color-text-secondary); }
.loc-place-dist    { font-size:var(--fs-xs); color:var(--color-emerald-bright); font-weight:600; flex-shrink:0; }

.loc-place-body {
  display:none; padding:var(--space-3) var(--space-4) var(--space-4);
  border-top:1px solid var(--color-border);
}
.loc-place-item.is-open .loc-place-body { display:block; }
.loc-place-desc { font-size:var(--fs-sm); color:var(--color-text-secondary); line-height:1.65; margin-bottom:var(--space-3); }
.loc-navigate-btn {
  display:inline-flex; align-items:center; gap:var(--space-2);
  padding:var(--space-2) var(--space-4); border-radius:var(--radius-full);
  background:var(--color-emerald-muted); border:1px solid var(--color-emerald);
  color:var(--color-emerald-bright); font-size:var(--fs-xs); font-weight:600;
  cursor:pointer; transition:all var(--t-fast);
}
.loc-navigate-btn:hover { background:var(--color-emerald); color:#fff; }

/* ── DUA FAVOURITES ────────────────────────────────────────────────────────── */
.dua-fav-btn {
  width:32px; height:32px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:transparent; border:1px solid var(--color-border);
  color:var(--color-text-tertiary); font-size:16px;
  transition:all var(--t-fast); cursor:pointer;
}
.dua-fav-btn:hover { border-color:var(--color-danger); color:var(--color-danger); }
.dua-fav-btn.is-fav { background:rgba(229,62,62,0.12); border-color:var(--color-danger); color:var(--color-danger); }

.dua-card { position:relative; }
.dua-card .dua-fav-btn { position:absolute; top:var(--space-2); left:var(--space-2); }

/* Favourites tab badge */
.fav-count-badge {
  display:inline-flex; align-items:center; justify-content:center;
  width:18px; height:18px; border-radius:50%;
  background:var(--color-danger); color:#fff;
  font-size:10px; font-weight:700; margin-left:4px;
}

/* ═════════════════ END OF style.css v3.0 ═════════════════ */

/* ════════════════════════════════════════════════════════════════════════════
   UPDATE v3.0 — Bottom-Nav · Mehr-Sheet · Madinah-Modus · Splash-Fix
   ════════════════════════════════════════════════════════════════════════════ */

/* U1. HINTERGRUND — Zoom-out + Helligkeits-Filter erhalten */
body::before { background:url('assets/images/background.jpg') center 30% / cover no-repeat; filter:brightness(1.15) saturate(1.1); }
body.madinah-mode::before { background:url('assets/images/background-md.jpg') center 30% / cover no-repeat; filter:brightness(1.15) saturate(1.1); }
/* Light-overlay ENTFERNT (08.05.2026) */

/* U2. SPLASH FIX */
.splash { background:#000000; }
.splash__icon { border-radius:0; background:transparent; box-shadow:none; filter:drop-shadow(0 0 24px rgba(17,194,93,0.18)); }

/* U3. MADINAH MODUS */
body.madinah-mode { --color-emerald:#0e7490; --color-emerald-bright:#22d3ee; --color-emerald-muted:#0c3d4a; --color-emerald-glow:rgba(34,211,238,0.14); --grad-emerald:linear-gradient(135deg,#0e7490 0%,#083344 100%); }
.madinah-mode-badge { display:inline-flex; align-items:center; gap:4px; background:rgba(14,116,144,0.2); border:1px solid #22d3ee; color:#22d3ee; font-size:var(--fs-xs); font-weight:600; padding:2px 8px; border-radius:var(--radius-full); animation:madinah-glow 2s ease-in-out infinite; }
@keyframes madinah-glow { 0%,100%{box-shadow:0 0 6px rgba(34,211,238,0.3)} 50%{box-shadow:0 0 14px rgba(34,211,238,0.6)} }

/* U4. BOTTOM NAVIGATION */
.bottom-nav { position:fixed; bottom:0; left:0; right:0; z-index:1000; height:64px; display:flex; align-items:stretch; background:var(--glass-surface); backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur); border-top:1px solid var(--glass-border); padding-bottom:var(--safe-bottom); box-shadow:0 -4px 24px rgba(0,0,0,0.4); }
.bottom-nav__item { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; color:var(--color-text-tertiary); font-size:var(--fs-xs); font-weight:500; transition:color var(--t-fast),background var(--t-fast); cursor:pointer; border:none; background:none; padding:0 var(--space-1); position:relative; min-height:56px; }
.bottom-nav__item:hover { color:var(--color-text-secondary); background:rgba(255,255,255,0.04); }
.bottom-nav__item.active { color:var(--color-emerald-bright); }
.bottom-nav__item.active::before { content:''; position:absolute; top:0; left:25%; right:25%; height:2px; background:var(--color-emerald-bright); border-radius:0 0 var(--radius-full) var(--radius-full); box-shadow:0 0 8px var(--color-emerald-glow); }
.bottom-nav__icon { width:22px; height:22px; display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:transform var(--t-spring); }
.bottom-nav__item.active .bottom-nav__icon { transform:translateY(-2px); }
.bottom-nav__label { font-size:9px; font-weight:600; letter-spacing:0.04em; white-space:nowrap; }
.bottom-nav__lock { position:absolute; top:8px; right:18%; font-size:10px; color:var(--color-gold); }
.app { padding-bottom:calc(72px + var(--safe-bottom)); }
.install-banner { bottom:calc(72px + var(--safe-bottom)) !important; }

/* U5. MEHR BOTTOM-SHEET */
.mehr-sheet { position:fixed; inset:0; z-index:800; pointer-events:none; }
.mehr-sheet.is-open { pointer-events:auto; }
.mehr-sheet__overlay { position:absolute; inset:0; background:var(--overlay-modal); opacity:0; transition:opacity var(--t-normal); }
.mehr-sheet.is-open .mehr-sheet__overlay { opacity:1; }
.mehr-sheet__panel { position:absolute; bottom:64px; left:0; right:0; max-height:82dvh; background:var(--glass-surface); backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur); border:1px solid var(--glass-border); border-bottom:none; border-radius:var(--radius-xl) var(--radius-xl) 0 0; overflow-y:auto; overscroll-behavior:contain; transform:translateY(100%); transition:transform var(--t-normal) var(--t-spring); padding-bottom:var(--space-6); }
.mehr-sheet.is-open .mehr-sheet__panel { transform:translateY(0); }
.mehr-sheet__handle { width:36px; height:4px; background:var(--color-border); border-radius:var(--radius-full); margin:var(--space-3) auto var(--space-4); }
.mehr-sheet__title { font-family:var(--font-display); font-size:var(--fs-lg); font-weight:500; color:var(--color-text); padding:0 var(--space-5) var(--space-3); border-bottom:1px solid var(--color-border); margin-bottom:var(--space-4); }
.mehr-section-title { font-size:var(--fs-xs); font-weight:700; text-transform:uppercase; letter-spacing:0.08em; color:var(--color-text-tertiary); padding:var(--space-2) var(--space-5) var(--space-3); }
.mehr-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-3); padding:0 var(--space-4); margin-bottom:var(--space-5); }
.mehr-item { display:flex; flex-direction:column; align-items:center; gap:var(--space-2); padding:var(--space-4) var(--space-2); border-radius:var(--radius-lg); background:var(--color-surface-2); border:1px solid var(--color-border); font-size:var(--fs-xs); font-weight:500; color:var(--color-text-secondary); cursor:pointer; transition:all var(--t-fast); text-align:center; position:relative; min-height:80px; justify-content:center; }
.mehr-item:hover { border-color:var(--color-emerald); color:var(--color-text); background:var(--color-surface-3); transform:translateY(-2px); }
.mehr-item__icon { font-size:26px; line-height:1; }
.mehr-item__lock { position:absolute; top:6px; right:8px; font-size:10px; color:var(--color-gold); }
.mehr-item.premium-item { border-color:rgba(201,168,76,0.3); }
.mehr-item.premium-item:hover { border-color:var(--color-gold); }

/* Madinah Mode Toggle Row */
.madinah-toggle-row { display:flex; align-items:center; justify-content:space-between; padding:var(--space-4) var(--space-5); background:var(--color-surface-2); border-top:1px solid var(--color-border); border-bottom:1px solid var(--color-border); margin-bottom:var(--space-4); cursor:pointer; }
.madinah-toggle-row__info { display:flex; flex-direction:column; gap:2px; }
.madinah-toggle-row__title { font-size:var(--fs-sm); font-weight:600; color:var(--color-text); }
.madinah-toggle-row__sub { font-size:var(--fs-xs); color:var(--color-text-secondary); }
.madinah-switch { width:52px; height:30px; border-radius:var(--radius-full); background:var(--color-surface-3); border:2px solid var(--color-border); position:relative; flex-shrink:0; transition:all var(--t-fast); cursor:pointer; }
.madinah-switch.active { background:#0e7490; border-color:#22d3ee; }
.madinah-switch__knob { position:absolute; top:2px; left:2px; width:22px; height:22px; border-radius:50%; background:var(--color-text-secondary); transition:transform var(--t-fast),background var(--t-fast); }
.madinah-switch.active .madinah-switch__knob { transform:translateX(22px); background:#fff; }

/* U6. ZIYARAT DETAIL CARDS */
.ziyarat-city-toggle { display:flex; gap:var(--space-1); background:var(--color-surface-2); padding:3px; border-radius:var(--radius-full); border:1px solid var(--color-border); margin-bottom:var(--space-4); }
.ziyarat-city-btn { flex:1; padding:var(--space-2) var(--space-4); border-radius:var(--radius-full); font-size:var(--fs-sm); font-weight:600; color:var(--color-text-secondary); transition:all var(--t-fast); text-align:center; }
.ziyarat-city-btn.active { background:var(--grad-emerald); color:#fff; }
.ziyarat-premium-gate { display:flex; flex-direction:column; align-items:center; gap:var(--space-4); padding:var(--space-8) var(--space-5); text-align:center; }
.ziyarat-premium-gate__icon { font-size:56px; }
.ziyarat-premium-gate__title { font-family:var(--font-display); font-size:var(--fs-xl); font-weight:500; color:var(--color-text); }
.ziyarat-premium-gate__desc { font-size:var(--fs-sm); color:var(--color-text-secondary); line-height:1.7; }
.ziyarat-detail-card { background:var(--glass-surface); backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur); border:1px solid var(--glass-border); border-radius:var(--radius-xl); overflow:hidden; margin-bottom:var(--space-3); }
.ziyarat-detail-card:hover { border-color:var(--color-emerald-bright); }
.ziyarat-detail-card__header { display:flex; align-items:flex-start; gap:var(--space-3); padding:var(--space-4); cursor:pointer; }
.ziyarat-detail-card__icon { font-size:32px; flex-shrink:0; }
.ziyarat-detail-card__name { font-size:var(--fs-md); font-weight:600; color:var(--color-text); margin-bottom:2px; }
.ziyarat-detail-card__name-ar { font-family:var(--font-arabic); font-size:var(--fs-sm); color:var(--color-gold); direction:rtl; margin-bottom:var(--space-2); }
.ziyarat-detail-card__meta { display:flex; gap:var(--space-3); flex-wrap:wrap; }
.ziyarat-meta-chip { font-size:var(--fs-xs); color:var(--color-text-secondary); display:flex; align-items:center; gap:3px; }
.ziyarat-best-time { display:flex; align-items:center; gap:var(--space-2); background:rgba(17,194,93,0.08); border:1px solid rgba(17,194,93,0.2); border-radius:var(--radius-md); padding:var(--space-2) var(--space-3); font-size:var(--fs-xs); color:var(--color-emerald-bright); font-weight:600; margin-top:var(--space-3); }
.ziyarat-detail-card__body { display:none; padding:0 var(--space-4) var(--space-4); border-top:1px solid var(--color-border); }
.ziyarat-detail-card.is-open .ziyarat-detail-card__body { display:block; padding-top:var(--space-3); }
.ziyarat-detail-card__desc { font-size:var(--fs-sm); color:var(--color-text-secondary); line-height:1.7; margin-bottom:var(--space-3); }
.ziyarat-detail-card__tip { font-size:var(--fs-xs); color:var(--color-gold); background:var(--color-gold-muted); border-radius:var(--radius-md); padding:var(--space-2) var(--space-3); border-left:3px solid var(--color-gold); }

/* U7. RESTAURANTS */
.restaurant-card { background:var(--color-surface-2); border:1px solid var(--color-border); border-radius:var(--radius-lg); padding:var(--space-4); margin-bottom:var(--space-3); display:flex; gap:var(--space-3); align-items:flex-start; }
.restaurant-card__icon { font-size:28px; flex-shrink:0; }
.restaurant-card__info { flex:1; }
.restaurant-card__name { font-size:var(--fs-md); font-weight:600; color:var(--color-text); margin-bottom:2px; }
.restaurant-card__meta { font-size:var(--fs-xs); color:var(--color-text-secondary); margin-bottom:var(--space-2); }
.restaurant-card__desc { font-size:var(--fs-sm); color:var(--color-text-secondary); line-height:1.6; }
.restaurant-status { display:inline-flex; align-items:center; gap:4px; font-size:var(--fs-xs); font-weight:600; padding:2px 8px; border-radius:var(--radius-full); }
.restaurant-status--success { background:var(--color-success-muted); color:var(--color-success); }
.restaurant-status--warning { background:var(--color-warning-muted); color:var(--color-warning); }
.restaurant-stars { color:var(--color-gold); font-size:var(--fs-xs); }

/* U8. PARKING */
.parking-card { background:var(--color-surface-2); border:1px solid var(--color-border); border-radius:var(--radius-lg); padding:var(--space-4); margin-bottom:var(--space-3); }
.parking-card__header { display:flex; align-items:center; gap:var(--space-3); margin-bottom:var(--space-3); }
.parking-card__name { font-size:var(--fs-sm); font-weight:600; color:var(--color-text); flex:1; }
.parking-status { font-size:var(--fs-xs); font-weight:600; padding:2px 8px; border-radius:var(--radius-full); }
.parking-status--available { background:var(--color-success-muted); color:var(--color-success); }
.parking-status--moderate  { background:var(--color-warning-muted); color:var(--color-warning); }
.parking-status--busy      { background:var(--color-danger-muted);  color:var(--color-danger); }
.parking-card__details { display:flex; flex-wrap:wrap; gap:var(--space-3); margin-bottom:var(--space-2); }
.parking-detail { font-size:var(--fs-xs); color:var(--color-text-secondary); display:flex; align-items:center; gap:3px; }
.parking-card__tip { font-size:var(--fs-xs); color:var(--color-text-tertiary); font-style:italic; }
.parking-shuttle-badge { display:inline-flex; align-items:center; gap:4px; background:var(--color-info-muted); color:var(--color-info); font-size:var(--fs-xs); font-weight:600; padding:2px 8px; border-radius:var(--radius-full); margin-top:var(--space-2); }

/* U9. WÄHRUNGSRECHNER — PUNKT 3: MULTI-DIREKTIONAL
   Alle 7 Felder sind editierbare Inputs. app.js rechnet alle anderen
   Werte automatisch um, sobald der Nutzer in ein Feld tippt.           */

.currency-multi-grid {
  display:flex; flex-direction:column; gap:var(--space-2);
}
.currency-multi-row {
  display:grid;
  grid-template-columns:32px 52px 1fr;
  align-items:center;
  gap:var(--space-2);
  background:var(--color-surface-2);
  border:1px solid var(--color-border);
  border-radius:var(--radius-lg);
  padding:var(--space-2) var(--space-3);
  transition:border-color var(--t-fast);
}
.currency-multi-row:focus-within {
  border-color:var(--color-emerald);
  box-shadow:0 0 0 2px var(--color-emerald-glow);
}
.currency-multi-flag {
  font-size:22px; line-height:1; text-align:center; flex-shrink:0;
}
.currency-multi-label {
  font-size:var(--fs-xs); font-weight:700;
  color:var(--color-text-secondary);
  letter-spacing:0.04em; text-transform:uppercase;
}
.currency-multi-input {
  width:100%; background:transparent; border:none; outline:none;
  font-family:var(--font-display); font-size:var(--fs-lg);
  font-weight:300; color:var(--color-text);
  text-align:right; font-variant-numeric:tabular-nums;
  -moz-appearance:textfield;
}
.currency-multi-input::-webkit-outer-spin-button,
.currency-multi-input::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
.currency-multi-input::placeholder { color:var(--color-text-tertiary); }
.currency-multi-input:focus { color:var(--color-emerald-bright); }
.currency-disclaimer {
  font-size:var(--fs-xs); color:var(--color-text-tertiary);
  text-align:center; font-style:italic;
}

/* U10. SUNNAH TRACKER */
.sunnah-streak { display:inline-flex; align-items:center; gap:var(--space-2); background:var(--color-gold-muted); border:1px solid var(--color-gold); border-radius:var(--radius-full); padding:4px 12px; font-size:var(--fs-xs); font-weight:700; color:var(--color-gold); }
.sunnah-progress-bar-wrap { height:6px; background:var(--color-surface-3); border-radius:var(--radius-full); overflow:hidden; margin-bottom:var(--space-4); }
.sunnah-progress-bar { height:100%; background:var(--grad-emerald); border-radius:var(--radius-full); transition:width 0.6s ease; }
.sunnah-grid { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-2); }
.sunnah-item { display:flex; align-items:center; gap:var(--space-2); padding:var(--space-3); border-radius:var(--radius-md); background:var(--color-surface-2); border:1px solid var(--color-border); cursor:pointer; transition:all var(--t-fast); min-height:56px; }
.sunnah-item:hover { border-color:var(--color-emerald); }
.sunnah-item.done { background:var(--color-success-muted); border-color:var(--color-success); }
.sunnah-item__icon { font-size:20px; flex-shrink:0; }
.sunnah-item__title { font-size:var(--fs-xs); font-weight:600; color:var(--color-text); }
.sunnah-item__sub { font-size:9px; color:var(--color-text-secondary); }
.sunnah-item__check { width:20px; height:20px; border-radius:50%; border:2px solid var(--color-border); flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:11px; transition:all var(--t-fast); }
.sunnah-item.done .sunnah-item__check { background:var(--color-success); border-color:var(--color-success); color:#fff; }

/* U11. IHRAM CHECKLIST */
.ihram-section-title { font-size:var(--fs-xs); font-weight:700; text-transform:uppercase; letter-spacing:0.08em; margin-bottom:var(--space-3); display:flex; align-items:center; gap:var(--space-2); }
.ihram-section-title.forbidden { color:var(--color-danger); }
.ihram-section-title.permitted { color:var(--color-success); }
.ihram-list { display:flex; flex-direction:column; gap:var(--space-2); margin-bottom:var(--space-5); }
.ihram-item { display:flex; align-items:flex-start; gap:var(--space-3); padding:var(--space-3) var(--space-4); border-radius:var(--radius-md); }
.ihram-item.forbidden-item { background:var(--color-danger-muted); border:1px solid rgba(229,62,62,0.25); }
.ihram-item.permitted-item { background:var(--color-success-muted); border:1px solid rgba(16,185,129,0.25); }
.ihram-item__icon { font-size:18px; flex-shrink:0; margin-top:2px; }
.ihram-item__label { font-weight:600; color:var(--color-text); font-size:var(--fs-sm); }
.ihram-item__note { font-size:var(--fs-xs); color:var(--color-text-secondary); margin-top:2px; }
.ihram-item__arabic { font-family:var(--font-arabic); font-size:var(--fs-sm); color:var(--color-gold); direction:rtl; }

/* U12. HOTEL SPEICHER */
.hotel-card { background:var(--glass-surface); backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur); border:1px solid var(--glass-border); border-radius:var(--radius-xl); padding:var(--space-5); }
.hotel-saved-display { background:var(--color-emerald-muted); border:1px solid var(--color-emerald); border-radius:var(--radius-lg); padding:var(--space-4); margin-bottom:var(--space-4); display:none; }
.hotel-saved-display.has-data { display:block; }
.hotel-saved-display__name { font-size:var(--fs-lg); font-weight:600; color:var(--color-text); }
.hotel-saved-display__room { font-size:var(--fs-sm); color:var(--color-emerald-bright); }
.hotel-saved-display__arabic { font-family:var(--font-arabic); font-size:var(--fs-sm); color:var(--color-gold); direction:rtl; margin-top:var(--space-2); padding-top:var(--space-2); border-top:1px solid rgba(201,168,76,0.2); }
.hotel-qr-btn { display:flex; align-items:center; justify-content:center; gap:var(--space-2); width:100%; padding:var(--space-3); background:var(--color-surface-3); border:1px solid var(--color-border); border-radius:var(--radius-md); font-size:var(--fs-sm); color:var(--color-text-secondary); cursor:pointer; transition:all var(--t-fast); margin-top:var(--space-3); }
.hotel-qr-btn:hover { border-color:var(--color-emerald); color:var(--color-emerald-bright); }

/* U13. HAJJ CALENDAR */
.hajj-calendar-list { display:flex; flex-direction:column; gap:var(--space-2); }
.hajj-calendar-item { display:flex; align-items:flex-start; gap:var(--space-3); padding:var(--space-3) var(--space-4); background:var(--color-surface-2); border:1px solid var(--color-border); border-radius:var(--radius-md); }
.hajj-calendar-item.highlight { background:var(--color-emerald-muted); border-color:var(--color-emerald); }
.hajj-calendar-item__day { min-width:32px; height:32px; background:var(--color-surface-3); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:var(--fs-xs); font-weight:700; color:var(--color-text); flex-shrink:0; }
.hajj-calendar-item.highlight .hajj-calendar-item__day { background:var(--color-emerald); color:#fff; }
.hajj-calendar-item__label { font-size:var(--fs-sm); font-weight:600; color:var(--color-text); }
.hajj-calendar-item__desc { font-size:var(--fs-xs); color:var(--color-text-secondary); margin-top:2px; }

/* U14. BEST TIMES */
.best-times-list { display:flex; flex-direction:column; gap:var(--space-2); }
.best-time-row { display:flex; align-items:center; gap:var(--space-3); padding:var(--space-3) var(--space-4); background:var(--color-surface-2); border:1px solid var(--color-border); border-radius:var(--radius-md); flex-wrap:wrap; }
.best-time-row__time { font-size:var(--fs-xs); font-weight:700; color:var(--color-text); min-width:80px; }
.best-time-badge { font-size:var(--fs-xs); font-weight:600; padding:2px 8px; border-radius:var(--radius-full); }
.best-time-badge--quiet    { background:var(--color-success-muted); color:var(--color-success); }
.best-time-badge--good     { background:var(--color-info-muted);    color:var(--color-info); }
.best-time-badge--moderate { background:var(--color-warning-muted); color:var(--color-warning); }
.best-time-badge--busy     { background:var(--color-danger-muted);  color:var(--color-danger); }
.best-time-row__desc { font-size:var(--fs-xs); color:var(--color-text-secondary); flex:1; min-width:150px; }

/* U15. HEALTH PROTOCOL */
.heat-zones { display:flex; flex-direction:column; gap:var(--space-2); margin-bottom:var(--space-4); }
.heat-zone-row { display:flex; align-items:flex-start; gap:var(--space-3); padding:var(--space-3) var(--space-4); background:var(--color-surface-2); border-radius:var(--radius-md); border-left:4px solid transparent; }
.heat-zone-row.success { border-left-color:var(--color-success); }
.heat-zone-row.warning { border-left-color:var(--color-warning); background:var(--color-warning-muted); }
.heat-zone-row.danger  { border-left-color:var(--color-danger);  background:var(--color-danger-muted); }
.heat-zone-row__temp   { font-weight:700; font-size:var(--fs-sm); color:var(--color-text); min-width:100px; flex-shrink:0; }
.heat-zone-row__action { font-size:var(--fs-xs); color:var(--color-text-secondary); }

/* U16. RESPONSIVE */
@media(min-width:600px) { .mehr-grid { grid-template-columns:repeat(4,1fr); } .sunnah-grid { grid-template-columns:repeat(3,1fr); } }
@media(min-width:900px) { .bottom-nav { max-width:720px; left:50%; transform:translateX(-50%); border-left:1px solid var(--glass-border); border-right:1px solid var(--glass-border); } .mehr-sheet__panel { max-width:720px; left:50%; transform:translateX(-50%) translateY(100%); } .mehr-sheet.is-open .mehr-sheet__panel { transform:translateX(-50%) translateY(0); } }

/* ── HAJJ-KALENDER HIGHLIGHT — volle Breite, zwischen Prayer-Card und Tiles ── */
.hajj-highlight {
  display:flex; align-items:center; justify-content:space-between;
  width:100%; padding:var(--space-4) var(--space-5);
  margin-bottom:var(--space-3);
  border-radius:var(--radius-xl);
  background:linear-gradient(135deg, rgba(17,194,93,0.18) 0%, rgba(26,107,74,0.25) 100%);
  border:1px solid rgba(17,194,93,0.35);
  cursor:pointer; text-align:left;
  transition:all var(--t-fast);
  backdrop-filter:var(--glass-blur);
  -webkit-backdrop-filter:var(--glass-blur);
  box-shadow:0 0 20px rgba(17,194,93,0.08);
}
.hajj-highlight:hover {
  background:linear-gradient(135deg, rgba(17,194,93,0.26) 0%, rgba(26,107,74,0.35) 100%);
  border-color:var(--color-emerald);
  box-shadow:0 4px 24px rgba(17,194,93,0.18);
  transform:translateY(-1px);
}
.hajj-highlight:active { transform:scale(0.98); }

.hajj-highlight__left {
  display:flex; align-items:center; gap:var(--space-4); flex:1;
}
.hajj-highlight__icon {
  width:48px; height:48px; border-radius:var(--radius-lg);
  background:rgba(17,194,93,0.18); border:1px solid rgba(17,194,93,0.35);
  display:flex; align-items:center; justify-content:center;
  color:var(--color-emerald-bright); flex-shrink:0;
}
.hajj-highlight__text {
  display:flex; flex-direction:column; gap:3px;
}
.hajj-highlight__title {
  font-size:var(--fs-sm); font-weight:700; color:var(--color-text);
}
.hajj-highlight__sub {
  font-size:var(--fs-xs); color:var(--color-emerald-bright); font-weight:500;
}
.hajj-highlight__arrow {
  color:var(--color-emerald-bright); flex-shrink:0;
  opacity:0.7;
}

/* ── QIBLA CARD WIDE (Punkt 3 — nach unten verschoben) ────────────────────── */
.dash-card--wide {
  grid-column: 1 / -1;   /* volle Breite im Grid */
}
.qibla-card-inner {
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--space-4);
}
.qibla-card-inner .qibla-compass-wrap { padding:0; }

.dash-card--interactive {
  cursor:pointer;
  transition:border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
}
.dash-card--interactive:hover {
  border-color:var(--color-emerald);
  box-shadow:0 4px 24px var(--color-emerald-glow);
  transform:translateY(-2px);
}
.dash-card--interactive:active { transform:scale(0.98); }

.crowd-live-dot {
  display:inline-block; width:8px; height:8px; border-radius:50%;
  background:var(--color-emerald-bright);
  box-shadow:0 0 6px var(--color-emerald-bright);
  animation:pulse-dot 1.8s infinite;
  margin-left:var(--space-2);
  flex-shrink:0;
}

.crowd-footer {
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:var(--space-2);
  padding-top:var(--space-2); border-top:1px solid var(--color-border);
  margin-top:var(--space-2);
}

.crowd-detail-btn {
  font-size:var(--fs-xs); font-weight:600;
  color:var(--color-emerald-bright);
  background:var(--color-emerald-muted);
  border:1px solid var(--color-emerald);
  border-radius:var(--radius-full);
  padding:4px 12px;
  transition:all var(--t-fast);
  cursor:pointer;
  white-space:nowrap;
}
.crowd-detail-btn:hover {
  background:var(--color-emerald);
  color:#fff;
}

/* ═════════════════ END OF style.css v4.0 FINAL ═════════════════ */

/* ══════════════════════════════════════════════════════════════════════════
   v5.0 SMART FEATURES — neue CSS-Klassen
   ══════════════════════════════════════════════════════════════════════════ */

/* ── FEATURE 1: TAWAF COMPLETION BANNER ────────────────────────────────── */
.tawaf-completion-banner {
  margin-top:var(--space-5);
  border-radius:var(--radius-xl);
  overflow:hidden;
  animation:toast-in var(--t-normal) var(--t-spring);
}

.tawaf-completion-inner {
  display:flex; flex-direction:column; align-items:center;
  gap:var(--space-3);
  padding:var(--space-6) var(--space-5);
  background:linear-gradient(145deg, var(--color-gold-muted), rgba(201,168,76,0.08));
  border:2px solid var(--color-gold);
  border-radius:var(--radius-xl);
  text-align:center;
}

.tawaf-completion-icon {
  font-size:52px;
  line-height:1;
  animation:splash-pulse 2s ease-in-out infinite;
  filter:drop-shadow(0 0 12px rgba(201,168,76,0.5));
}

.tawaf-completion-title {
  font-family:var(--font-display);
  font-size:var(--fs-xl);
  font-weight:500;
  color:var(--color-gold);
  letter-spacing:0.02em;
}

.tawaf-completion-sub {
  font-size:var(--fs-sm);
  color:var(--color-text-secondary);
  margin-top:-var(--space-1);
}

.tawaf-completion-dua {
  font-family:var(--font-arabic);
  font-size:var(--fs-arabic);
  color:var(--color-gold);
  direction:rtl;
  line-height:2;
  padding:var(--space-3) var(--space-4);
  background:rgba(201,168,76,0.08);
  border-radius:var(--radius-lg);
  border:1px solid rgba(201,168,76,0.2);
  width:100%;
}

.tawaf-completion-trans {
  font-size:var(--fs-xs);
  color:var(--color-text-secondary);
  font-style:italic;
  line-height:1.7;
}

.tawaf-completion-reset {
  margin-top:var(--space-2);
}

/* ── FEATURE 3: PRAYER ALERT IN-APP BANNER ──────────────────────────────── */
/* Erscheint wenn System-Notifications nicht verfügbar sind.
   Positioniert UNTER dem Header (nicht darüber), blockiert keine Klicks. */
.prayer-alert-banner {
  position:fixed;
  top:calc(var(--header-h) + 8px);   /* direkt unter Header, nie darüber */
  left:var(--space-3);
  right:var(--space-3);
  z-index:450;                         /* unter Modals (500), über Content */
  max-width:560px;
  margin:0 auto;
  border-radius:var(--radius-xl);
  animation:toast-in var(--t-normal) var(--t-spring);
  pointer-events:auto;
}
.prayer-alert-banner[hidden] { display:none !important; }

.prayer-alert-inner {
  display:flex; align-items:center; gap:var(--space-3);
  padding:var(--space-4) var(--space-4) var(--space-4) var(--space-5);
  background:var(--color-emerald-muted);
  border:1px solid var(--color-emerald);
  border-radius:var(--radius-xl);
  backdrop-filter:var(--glass-blur);
  -webkit-backdrop-filter:var(--glass-blur);
  box-shadow:0 8px 32px rgba(17,194,93,0.20);
}

.prayer-alert-content {
  flex:1; display:flex; flex-direction:column; gap:3px;
}
.prayer-alert-content strong {
  font-size:var(--fs-sm); font-weight:700; color:var(--color-emerald-bright);
}
.prayer-alert-content span {
  font-size:var(--fs-xs); color:var(--color-text-secondary);
}

.prayer-alert-close {
  width:36px; height:36px;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%;
  background:rgba(17,194,93,0.12);
  color:var(--color-emerald-bright);
  font-size:14px; flex-shrink:0;
  transition:background var(--t-fast);
  cursor:pointer; border:none;
}
.prayer-alert-close:hover { background:rgba(17,194,93,0.25); }

/* ── FEATURE 2: MADINAH-MODUS CSS-KLASSE (auto via GPS) ────────────────── */
/* .madinah-mode wird per JS gesetzt — türkises Design */
/* Basis-Styles existieren bereits via .madinah-mode in den v3-Styles.
   Hier nur Ergänzungen für GPS-Erkennung: */
body.madinah-mode .haram-status-badge {
  background:rgba(20,184,166,0.15);
  border-color:rgba(20,184,166,0.35);
  color:#2dd4bf;
}
body.madinah-mode .haram-status-badge__dot {
  background:#2dd4bf;
  box-shadow:0 0 5px #2dd4bf;
}

/* Medina-GPS erkannt → Badge-Puls in Teal */
body.madinah-mode .crowd-live-dot {
  background:#2dd4bf;
  box-shadow:0 0 6px #2dd4bf;
}

/* ── TRANSPORT-ZENTRUM ──────────────────────────────────────────────────── */

/* Tab-Leiste */
.transport-tabs {
  display:flex; gap:0;
  border-bottom:1px solid var(--color-border);
  overflow-x:auto; scrollbar-width:none;
}
.transport-tabs::-webkit-scrollbar { display:none; }

.transport-tab {
  flex:1; min-width:100px; padding:var(--space-3) var(--space-2);
  font-size:var(--fs-xs); font-weight:600;
  color:var(--color-text-secondary);
  border-bottom:2px solid transparent;
  white-space:nowrap; text-align:center;
  transition:all var(--t-fast);
  background:none; border-top:none; border-left:none; border-right:none;
  cursor:pointer;
}
.transport-tab:hover { color:var(--color-text); background:var(--color-surface-2); }
.transport-tab.active {
  color:var(--color-emerald-bright);
  border-bottom-color:var(--color-emerald-bright);
  background:var(--color-surface);
}

.transport-panel { display:block; }
.transport-panel[hidden] { display:none; }

/* Route-Planer */
.route-planner {
  display:flex; flex-direction:column; gap:var(--space-2);
  background:var(--color-surface-2);
  border:1px solid var(--color-border);
  border-radius:var(--radius-xl);
  padding:var(--space-4);
  margin-bottom:var(--space-4);
  position:relative;
}

.route-planner__row {
  display:flex; align-items:center; gap:var(--space-3);
}

.route-planner__label {
  display:flex; align-items:center; gap:5px;
  font-size:var(--fs-xs); font-weight:700;
  color:var(--color-text-secondary);
  min-width:36px;
}

.route-planner__select {
  flex:1; padding:var(--space-3) var(--space-3);
  background:var(--color-surface); border:1px solid var(--color-border);
  border-radius:var(--radius-lg); color:var(--color-text);
  font-size:var(--fs-sm); cursor:pointer; appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238a8580' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center;
  padding-right:32px;
}
.route-planner__select:focus { outline:2px solid var(--color-emerald); border-color:var(--color-emerald); }

.route-swap-btn {
  align-self:center; width:36px; height:36px;
  border-radius:50%; background:var(--color-surface-3);
  border:1px solid var(--color-border); color:var(--color-text-secondary);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:all var(--t-fast); flex-shrink:0;
}
.route-swap-btn:hover { background:var(--color-emerald-muted); border-color:var(--color-emerald); color:var(--color-emerald-bright); }

/* Route-Ergebnis */
.route-result { margin-bottom:var(--space-4); min-height:40px; }

.route-result-empty {
  padding:var(--space-3) var(--space-4);
  font-size:var(--fs-xs); color:var(--color-text-secondary);
  background:var(--color-surface-2); border-radius:var(--radius-md);
  text-align:center;
}

.route-result-card {
  background:var(--color-emerald-muted);
  border:1px solid var(--color-emerald);
  border-radius:var(--radius-xl);
  padding:var(--space-4);
  animation:toast-in 0.2s ease-out;
}

.route-result-header {
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--space-2); margin-bottom:var(--space-3);
  font-size:var(--fs-sm); font-weight:600; color:var(--color-text);
}
.route-result-arrow { font-size:20px; }

.route-result-details {
  display:grid; grid-template-columns:1fr 1fr; gap:var(--space-2);
  margin-bottom:var(--space-3);
}

.route-detail-item {
  display:flex; flex-direction:column; gap:2px;
  padding:var(--space-2) var(--space-3);
  background:rgba(0,0,0,0.15); border-radius:var(--radius-md);
}
.route-detail-item span  { font-size:var(--fs-xs); color:var(--color-text-secondary); }
.route-detail-item strong{ font-size:var(--fs-sm); color:var(--color-text); }

.route-result-note {
  font-size:var(--fs-xs); color:var(--color-emerald-bright);
  font-style:italic;
}

/* Buchungs-Button */
.transport-book-btn {
  margin-bottom:var(--space-3);
  text-decoration:none;
  font-size:var(--fs-sm);
}

/* Hinweis-Text */
.transport-note {
  font-size:var(--fs-xs); color:var(--color-text-tertiary);
  line-height:1.6; margin-top:var(--space-2);
}
.transport-note code {
  background:var(--color-surface-3); padding:1px 5px;
  border-radius:3px; font-family:monospace;
}

/* Fahrplan-Details */
.transport-schedule-details {
  margin-top:var(--space-3);
}
.transport-schedule-summary {
  font-size:var(--fs-xs); font-weight:600; color:var(--color-text-secondary);
  cursor:pointer; padding:var(--space-2) 0; list-style:none;
}
.transport-schedule-summary::-webkit-details-marker { display:none; }
.transport-schedule-summary::before { content:'▶ '; font-size:10px; }
details[open] .transport-schedule-summary::before { content:'▼ '; }

.train-schedule-row {
  display:grid; grid-template-columns:1fr auto auto;
  gap:var(--space-3); align-items:center;
  padding:var(--space-3); border-bottom:1px solid var(--color-border);
  font-size:var(--fs-xs);
}
.train-schedule-route { color:var(--color-text-secondary); }
.train-schedule-time  { font-weight:600; color:var(--color-text); font-variant-numeric:tabular-nums; }
.train-schedule-price { color:var(--color-gold); font-weight:600; }

/* Taxi-Karten */
.transport-section-title {
  font-size:var(--fs-xs); font-weight:700; text-transform:uppercase;
  letter-spacing:0.08em; color:var(--color-text-tertiary);
  padding-bottom:var(--space-2); border-bottom:1px solid var(--color-border);
}

.taxi-card {
  display:flex; align-items:center; gap:var(--space-3);
  padding:var(--space-3) var(--space-4);
  background:var(--color-surface-2); border:1px solid var(--color-border);
  border-radius:var(--radius-xl); text-decoration:none;
  color:var(--color-text); transition:all var(--t-fast); cursor:pointer;
}
.taxi-card:hover { border-color:var(--color-emerald); background:var(--color-surface-3); }
.taxi-card--call:hover { border-color:var(--color-info); }

.taxi-card__logo {
  width:44px; height:44px; border-radius:var(--radius-lg);
  display:flex; align-items:center; justify-content:center;
  font-size:20px; font-weight:900; flex-shrink:0;
}
.taxi-card__logo--uber    { background:#000; color:#fff; font-size:18px; }
.taxi-card__logo--careem  { background:#1a9e38; color:#fff; font-size:18px; }
.taxi-card__logo--haramain{ background:var(--color-emerald-muted); font-size:22px; }
.taxi-card__logo--airport { background:var(--color-info-muted); font-size:22px; }
.taxi-card__logo--saptco  { background:var(--color-warning-muted); font-size:22px; }

.taxi-card__info { flex:1; display:flex; flex-direction:column; gap:2px; }
.taxi-card__info strong { font-size:var(--fs-sm); font-weight:600; color:var(--color-text); }
.taxi-card__info span   { font-size:var(--fs-xs); color:var(--color-text-secondary); }

.taxi-card__action { color:var(--color-text-tertiary); }

.taxi-card__call-badge {
  font-size:var(--fs-xs); font-weight:700;
  padding:4px 10px; border-radius:var(--radius-full);
  background:var(--color-info-muted); color:var(--color-info);
  white-space:nowrap; flex-shrink:0;
}

/* Bus-Info */
.bus-info-card {
  background:var(--color-surface-2); border:1px solid var(--color-border);
  border-radius:var(--radius-xl); padding:var(--space-4);
  display:flex; flex-direction:column; gap:var(--space-3);
}
.bus-info-card__header { display:flex; align-items:center; justify-content:space-between; }
.bus-info-badge {
  font-size:var(--fs-xs); font-weight:700;
  padding:4px 10px; border-radius:var(--radius-full);
  background:var(--color-warning-muted); color:var(--color-warning);
}
.bus-route-display {
  display:flex; align-items:center; justify-content:center;
  gap:var(--space-3); font-size:var(--fs-sm); font-weight:600;
  padding:var(--space-3); background:var(--color-surface-3); border-radius:var(--radius-md);
}
.bus-route-arrow { color:var(--color-text-tertiary); letter-spacing:2px; }
.bus-details { display:flex; flex-direction:column; gap:var(--space-2); }
.bus-detail-row {
  display:flex; justify-content:space-between; align-items:center;
  font-size:var(--fs-xs); padding:var(--space-2) 0;
  border-bottom:1px solid var(--color-border-subtle);
}
.bus-detail-row span  { color:var(--color-text-secondary); }
.bus-detail-row strong{ color:var(--color-text); }

/* ── MADINAH-BADGE IM HEADER — dauerhaft deaktiviert ────────────────────── */
/* applyMadinahMode() injiziert kein Badge mehr in den Header.
   Status nur noch via .haram-status-badge in der Prayer-Card.              */
.madinah-mode-badge { display:none !important; }

/* ── HOTEL-SPEICHER DASHBOARD-KARTE ─────────────────────────────────────── */
.dash-card--hotel {
  display:flex; flex-direction:column; gap:var(--space-3);
}
.hotel-dash-preview {
  flex:1; display:flex; flex-direction:column; justify-content:center;
  min-height:64px;
}
.hotel-dash-empty {
  display:flex; flex-direction:column; align-items:center; gap:var(--space-2);
  padding:var(--space-3);
  color:var(--color-text-tertiary); font-size:var(--fs-xs); text-align:center;
}
.hotel-dash-empty svg { opacity:0.35; }
.hotel-dash-saved { display:flex; flex-direction:column; gap:4px; }
.hotel-dash-saved[hidden] { display:none; }
.hotel-dash-name {
  font-size:var(--fs-sm); font-weight:600; color:var(--color-text);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.hotel-dash-room { font-size:var(--fs-xs); color:var(--color-emerald-bright); }

/* ── HOTEL-FOTO UPLOAD (Base64 Canvas) ──────────────────────────────────── */
.hotel-photo-wrap {
  width:100%; aspect-ratio:16/9; max-height:180px;
  border-radius:var(--radius-lg);
  overflow:hidden; position:relative;
  background:var(--color-surface-2);
  border:2px dashed var(--color-border);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:border-color var(--t-fast);
}
.hotel-photo-wrap:hover { border-color:var(--color-emerald); }
.hotel-photo-wrap img {
  width:100%; height:100%; object-fit:cover;
  display:block;
}
.hotel-photo-placeholder {
  display:flex; flex-direction:column; align-items:center; gap:var(--space-2);
  color:var(--color-text-tertiary); font-size:var(--fs-xs);
  pointer-events:none;
}
.hotel-photo-placeholder svg { opacity:0.4; }
.hotel-photo-badge {
  position:absolute; bottom:var(--space-2); right:var(--space-2);
  background:rgba(0,0,0,0.6); color:#fff;
  font-size:10px; padding:3px 8px; border-radius:var(--radius-full);
  backdrop-filter:blur(4px);
}

/* ── WETTER-ALARM BADGE in Prayer-Card ──────────────────────────────────── */
.heat-alert-badge {
  display:inline-flex; align-items:center; gap:5px;
  padding:3px 10px;
  background:rgba(239,68,68,0.15);
  border:1px solid rgba(239,68,68,0.4);
  border-radius:var(--radius-full);
  font-size:var(--fs-xs); font-weight:700;
  color:#f87171;
  animation:pulse-dot 1.5s infinite;
}
.heat-alert-badge[hidden] { display:none !important; }

/* ── TAXI & BUS DASHBOARD-KACHEL ────────────────────────────────────────── */
.dash-card--taxi {
  display:flex; flex-direction:column; gap:var(--space-3);
}
.taxi-dash-services {
  display:flex; flex-wrap:wrap; gap:var(--space-1);
}
.taxi-dash-badge {
  font-size:10px; font-weight:700; padding:2px 8px;
  border-radius:var(--radius-full); border:1px solid;
}
.taxi-dash-badge--uber   { background:rgba(0,0,0,0.4); color:#fff; border-color:#333; }
.taxi-dash-badge--careem { background:rgba(26,158,56,0.15); color:#1a9e38; border-color:#1a9e38; }
.taxi-dash-badge--bus    { background:var(--color-warning-muted); color:var(--color-warning); border-color:var(--color-warning); }
.taxi-dash-sub { font-size:var(--fs-xs); color:var(--color-text-secondary); margin:0; }

/* ── MORGEN-TAWAF PLANER ────────────────────────────────────────────────── */

.tawaf-planer-section-title {
  font-size:var(--fs-xs); font-weight:700; text-transform:uppercase;
  letter-spacing:0.08em; color:var(--color-text-tertiary);
  padding-bottom:var(--space-2);
  border-bottom:1px solid var(--color-border);
  margin-bottom:var(--space-3);
}

/* Beste-Zeiten werden inline gerendert (kein extra CSS nötig) */
.tawaf-times-grid { display:flex; flex-direction:column; margin-bottom:var(--space-4); }

/* Tipps-Karte */
.tawaf-tips-card {
  background:var(--color-emerald-muted);
  border:1px solid var(--color-emerald);
  border-radius:var(--radius-xl);
  padding:var(--space-4);
  margin-bottom:var(--space-5);
}
.tawaf-tips-title {
  font-size:var(--fs-sm); font-weight:700; color:var(--color-emerald-bright);
  margin-bottom:var(--space-3);
}
.tawaf-tips-list {
  list-style:none; display:flex; flex-direction:column; gap:var(--space-2);
}
.tawaf-tips-list li {
  font-size:var(--fs-xs); color:var(--color-text-secondary);
  line-height:1.6;
  padding-left:var(--space-1);
}

/* Counter im Planer-Modal */
.tawaf-planer-counter {
  background:var(--color-surface-2);
  border:1px solid var(--color-border);
  border-radius:var(--radius-xl);
  padding:var(--space-5) var(--space-4);
  display:flex; flex-direction:column; align-items:center;
  gap:var(--space-4);
  margin-bottom:var(--space-4);
}
.tawaf-planer-counter__label {
  font-size:var(--fs-xs); font-weight:700; text-transform:uppercase;
  letter-spacing:0.08em; color:var(--color-text-tertiary);
}
.tawaf-planer-counter__display {
  display:flex; align-items:center; gap:var(--space-5);
}

.tawaf-planer-btn {
  width:52px; height:52px; border-radius:50%;
  font-size:28px; font-weight:300; line-height:1;
  display:flex; align-items:center; justify-content:center;
  border:2px solid var(--color-border);
  background:var(--color-surface-3);
  color:var(--color-text);
  cursor:pointer;
  transition:all var(--t-fast);
  user-select:none;
}
.tawaf-planer-btn:hover {
  border-color:var(--color-emerald);
  background:var(--color-emerald-muted);
  color:var(--color-emerald-bright);
}
.tawaf-planer-btn:active { transform:scale(0.92); }
.tawaf-planer-btn:disabled {
  opacity:0.35; cursor:not-allowed;
  border-color:var(--color-border);
  background:var(--color-surface-2);
}
.tawaf-planer-btn--plus { border-color:var(--color-emerald); color:var(--color-emerald-bright); }
.tawaf-planer-btn--plus:hover { background:var(--color-emerald); color:#fff; }

.tawaf-planer-count {
  display:flex; align-items:baseline; gap:4px;
  min-width:60px; justify-content:center;
}
.tawaf-planer-num {
  font-size:48px; font-weight:700; color:var(--color-text);
  line-height:1; font-variant-numeric:tabular-nums;
  transition:color var(--t-fast);
}
.tawaf-planer-of {
  font-size:var(--fs-lg); color:var(--color-text-tertiary); font-weight:400;
}

/* Punkte-Reihe im Planer */
.tawaf-planer-dots {
  display:flex; gap:var(--space-2);
}
.tawaf-planer-dots .tawaf-dot {
  width:12px; height:12px; border-radius:50%;
  background:var(--color-surface-3);
  border:2px solid var(--color-border);
  transition:all var(--t-fast);
}
.tawaf-planer-dots .tawaf-dot.done {
  background:var(--color-emerald-bright);
  border-color:var(--color-emerald-bright);
  box-shadow:0 0 6px var(--color-emerald-bright);
}

/* ── TRANSPORT SECTION TITLE (in modals) ────────────────────────────────── */
.transport-section-title {
  font-size:var(--fs-xs); font-weight:700; text-transform:uppercase;
  letter-spacing:0.08em; color:var(--color-text-tertiary);
  padding-bottom:var(--space-2);
  border-bottom:1px solid var(--color-border);
  margin-bottom:var(--space-2);
}

/* ── PERSÖNLICHE BEGRÜSSUNG ─────────────────────────────────────────────── */
.user-greeting {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:var(--space-2);
  padding:var(--space-3) var(--space-4);
  margin-bottom:var(--space-3);
  background:linear-gradient(135deg,
    rgba(201,168,76,0.08) 0%,
    rgba(201,168,76,0.04) 100%);
  border:1px solid rgba(201,168,76,0.2);
  border-radius:var(--radius-xl);
  text-align:center;
  animation:toast-in var(--t-normal) var(--t-spring);
}
.user-greeting[hidden] { display:none !important; }

.user-greeting__salam {
  font-family:var(--font-arabic);
  font-size:var(--fs-sm);
  color:var(--color-emerald-bright);
  direction:rtl;
  font-weight:400;
}
.user-greeting__sep {
  color:var(--color-gold);
  opacity:0.5;
  font-size:10px;
}
.user-greeting__name {
  font-family:var(--font-display);
  font-size:var(--fs-md);
  font-weight:500;
  font-style:italic;
  color:var(--color-gold);
  letter-spacing:0.03em;
}
.user-greeting__dua {
  font-size:var(--fs-xs);
  color:var(--color-text-secondary);
  font-style:italic;
}

/* ── WELCOME / ONBOARDING MODAL ─────────────────────────────────────────── */
.modal--welcome .modal__overlay {
  background:rgba(0,0,0,0.85);   /* dunkler als normale Modals */
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}

.welcome-box {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:0;
  padding:var(--space-8) var(--space-6);
  text-align:center;
  max-width:360px;
  border:1px solid rgba(201,168,76,0.25);
  background:linear-gradient(160deg, #0d1a0d 0%, #000000 100%);
}

.welcome-icon {
  font-size:56px;
  line-height:1;
  margin-bottom:var(--space-4);
  filter:drop-shadow(0 0 16px rgba(17,194,93,0.4));
  animation:splash-pulse 2.5s ease-in-out infinite;
}

.welcome-arabic {
  font-family:var(--font-arabic);
  font-size:var(--fs-lg);
  color:var(--color-emerald-bright);
  margin-bottom:var(--space-2);
  letter-spacing:0.04em;
}

.welcome-title {
  font-family:var(--font-display);
  font-size:var(--fs-xl);
  font-weight:400;
  color:var(--color-text);
  line-height:1.4;
  letter-spacing:0.01em;
  margin-bottom:var(--space-4);
}

.welcome-sub {
  font-size:var(--fs-sm);
  color:var(--color-text-secondary);
  line-height:1.7;
  margin-bottom:var(--space-5);
}
.welcome-sub--light {
  display:block;
  font-size:var(--fs-xs);
  color:var(--color-text-tertiary);
  margin-top:var(--space-1);
}

.welcome-input-wrap {
  width:100%;
  margin-bottom:var(--space-5);
}

.welcome-input {
  width:100%;
  padding:var(--space-4) var(--space-4);
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(201,168,76,0.35);
  border-radius:var(--radius-xl);
  color:var(--color-gold);
  font-size:var(--fs-md);
  font-family:var(--font-display);
  font-style:italic;
  text-align:center;
  letter-spacing:0.04em;
  transition:border-color var(--t-fast), box-shadow var(--t-fast);
}
.welcome-input::placeholder {
  color:var(--color-text-tertiary);
  font-style:normal;
  font-size:var(--fs-sm);
}
.welcome-input:focus {
  outline:none;
  border-color:var(--color-gold);
  box-shadow:0 0 0 3px rgba(201,168,76,0.15);
}

.welcome-btn {
  width:100%;
  padding:var(--space-4) var(--space-5);
  background:linear-gradient(135deg,
    rgba(17,194,93,0.20) 0%,
    rgba(17,194,93,0.12) 100%);
  border:1px solid var(--color-emerald);
  border-radius:var(--radius-xl);
  color:var(--color-emerald-bright);
  font-size:var(--fs-sm);
  font-weight:700;
  letter-spacing:0.04em;
  cursor:pointer;
  transition:all var(--t-fast);
  margin-bottom:var(--space-3);
}
.welcome-btn:hover {
  background:linear-gradient(135deg,
    rgba(17,194,93,0.32) 0%,
    rgba(17,194,93,0.20) 100%);
  box-shadow:0 4px 20px rgba(17,194,93,0.2);
  transform:translateY(-1px);
}
.welcome-btn:active { transform:scale(0.97); }

.welcome-skip {
  background:none; border:none;
  color:var(--color-text-tertiary);
  font-size:var(--fs-xs);
  cursor:pointer;
  padding:var(--space-2);
  transition:color var(--t-fast);
}
.welcome-skip:hover { color:var(--color-text-secondary); }

/* ═════════════════ END OF style.css v5.4 ═════════════════ */

/* ── PREMIUM CODE INPUT ────────────────────────────────────────────────── */
.paywall-step { padding:var(--space-4) 0 0; }
.paywall-step-label { font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--color-text-secondary); margin-bottom:var(--space-3); }
@keyframes shake {
  0%,100% { transform:translateX(0); }
  20%,60% { transform:translateX(-6px); }
  40%,80% { transform:translateX(6px); }
}
.shake { animation:shake .4s ease; border-color:var(--color-red) !important; }

/* ── DUA AUDIO PLAYER ──────────────────────────────────────────────────── */
.dua-card__top-row { display:flex; align-items:flex-start; gap:var(--space-2); }
.dua-card__top-row .dua-card__arabic { flex:1; margin-bottom:var(--space-2); }
.dua-audio-btn {
  flex-shrink:0; width:32px; height:32px; border-radius:50%;
  background:rgba(201,168,76,0.12); border:1.5px solid var(--color-gold);
  color:var(--color-gold); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:all 0.2s; margin-top:6px;
}
.dua-audio-btn:hover { background:var(--color-gold); color:#000; transform:scale(1.08); }
.dua-audio-btn.is-playing { background:var(--color-gold); color:#000; animation:dua-pulse 1.4s ease-in-out infinite; }
.dua-card--playing { border-left-color:var(--color-gold) !important; box-shadow:0 0 0 1px rgba(201,168,76,0.35); background:rgba(201,168,76,0.04); }
@keyframes dua-pulse { 0%,100%{box-shadow:0 0 0 0 rgba(201,168,76,0.45);}50%{box-shadow:0 0 0 7px rgba(201,168,76,0);} }

/* ── PACKING LIST ENHANCED ─────────────────────────────────────────────── */

.packing-icon { font-size:18px; flex-shrink:0; }
.packing-label { flex:1; font-size:var(--fs-sm); }

.pack-badge { font-size:10px; font-weight:600; padding:2px 7px; border-radius:8px; flex-shrink:0; white-space:nowrap; }
.pack-badge--mand { background:rgba(201,168,76,0.15); color:var(--color-gold); }
.pack-badge--opt  { background:rgba(255,255,255,0.06); color:var(--color-text-tertiary); }

/* ── REISE-CHECKLISTE ──────────────────────────────────────────────────── */
.rcl-category { margin-bottom:var(--space-4); }
.rcl-cat-title { font-size:var(--fs-sm); font-weight:600; color:var(--color-text-secondary); margin-bottom:var(--space-2); padding-bottom:var(--space-1); border-bottom:1px solid var(--color-border); }

/* ── PREMIUM CODE INPUT ────────────────────────────────────────────────── */
.paywall-step { padding:var(--space-4) 0 0; }
.paywall-step-label { font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--color-text-secondary); margin-bottom:var(--space-3); }
@keyframes shake { 0%,100%{transform:translateX(0);}20%,60%{transform:translateX(-6px);}40%,80%{transform:translateX(6px);} }
.shake { animation:shake .4s ease; border-color:var(--color-red) !important; }

/* ── FEEDBACK MODAL ──────────────────────────────────────────────────────── */
@keyframes hcFadeIn  { from{opacity:0} to{opacity:1} }
@keyframes hcSlideUp { from{transform:translateY(40px);opacity:0} to{transform:translateY(0);opacity:1} }
@keyframes hcShake   { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-4px)} 75%{transform:translateX(4px)} }
#hc-feedback-modal textarea:focus,
#hc-feedback-modal input:focus { border-color:var(--color-gold,#c9a84c) !important; }

/* ── ZIYARAT SITES ───────────────────────────────────────────────────────── */
.ziyarat-site-card {
  background:var(--color-surface-2);
  border:1px solid var(--color-border);
  border-radius:var(--radius-lg);
  padding:var(--space-4);
  margin-bottom:var(--space-3);
  cursor:pointer;
  transition:border-color .2s;
}
.ziyarat-site-card:hover { border-color:var(--color-emerald); }

/* ── Override: Enzyklopädie & Fiqh Tiles sollen wie normale Tiles aussehen ─ */
.dash-tile--enc,
.dash-tile--fiqh {
  background: var(--color-surface) !important;
  border-color: var(--color-border) !important;
}
.dash-tile--enc .dash-tile__label,
.dash-tile--fiqh .dash-tile__label {
  color: var(--color-text-secondary) !important;
}
.dash-tile--enc:hover,
.dash-tile--fiqh:hover,
.dash-tile--enc:active,
.dash-tile--fiqh:active {
  border-color: var(--color-border-hover, var(--color-border)) !important;
  background: var(--color-surface-alt, var(--color-surface)) !important;
}

/* ── Update Banner Animation ── */
@keyframes slideUp {
  from { transform:translateY(100px); opacity:0; }
  to { transform:translateY(0); opacity:1; }
}

/* ── Dashboard Tile Icon — Lucide SVG ── */
.dash-tile__icon {
  display:flex;
  align-items:center;
  justify-content:center;
  width:36px;
  height:36px;
}
.dash-tile__icon svg {
  width:28px;
  height:28px;
  stroke:var(--color-emerald-bright);
  stroke-width:2.25;
}
.dash-tile:active .dash-tile__icon svg {
  stroke:var(--color-gold);
  transform:scale(1.1);
  transition:transform 0.1s, stroke 0.1s;
}

/* Kategorie-Header Icon */
.dash-cat-icon {
  display:inline-block;
  width:14px;
  height:14px;
  vertical-align:-2px;
  margin-right:4px;
}
.dash-cat-icon svg,
.dash-cat-header svg {
  width:14px;
  height:14px;
  stroke:var(--color-text-secondary);
  stroke-width:2;
}

/* ── Mehr-Sheet Lucide Icons ── */
.mehr-item__icon {
  display:flex;
  align-items:center;
  justify-content:center;
}
.mehr-item__icon svg {
  width:20px;
  height:20px;
  stroke:var(--color-emerald-bright);
  stroke-width:2;
}
.mehr-sec-icon {
  display:inline-block;
  width:14px;
  height:14px;
  vertical-align:-2px;
}
.mehr-section-title svg,
.madinah-toggle-row svg {
  width:14px;
  height:14px;
  stroke:currentColor;
  stroke-width:2;
  vertical-align:-2px;
}

/* ── Dashboard Edit Mode (Drag & Drop) ── */
.dash-edit-mode .dash-tile {
  animation: dash-wobble 0.25s ease-in-out infinite alternate;
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.dash-edit-mode .dash-tile:nth-child(even) {
  animation-delay: 0.12s;
}
.dash-edit-mode .dash-tile:nth-child(3n) {
  animation-delay: 0.06s;
}
.dash-tile--dragging {
  opacity: 0.25 !important;
  transform: scale(0.92) !important;
  animation: none !important;
}
.dash-tile--snap {
  animation: dash-snap 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}
.dash-tile--placeholder {
  border: 2px dashed var(--color-emerald) !important;
  background: rgba(17,194,93,0.06) !important;
  pointer-events: none;
  min-height: 68px;
  border-radius: var(--radius-lg);
}
@keyframes dash-wobble {
  0%   { transform: rotate(-1.2deg) scale(0.97); }
  100% { transform: rotate(1.2deg) scale(0.97); }
}
@keyframes dash-snap {
  0%   { transform: scale(1.12); box-shadow: 0 8px 24px rgba(17,194,93,0.3); }
  60%  { transform: scale(0.96); }
  100% { transform: scale(1); box-shadow: none; }
}
.dash-cat-group {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 6px;
}
@media(min-width:480px) {
  .dash-cat-group { gap: 12px; }
}

/* ── Chat Wallpaper — Islamische Geometrie ── */
#chat-messages {
  background-color: var(--color-bg);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cpath d='M40 10L50 25L40 40L30 25Z' fill='rgba(17,194,93,0.025)' /%3E%3Cpath d='M10 50L20 65L10 80L0 65Z' fill='rgba(201,168,76,0.02)' /%3E%3Cpath d='M70 50L80 65L70 80L60 65Z' fill='rgba(17,194,93,0.02)' /%3E%3Ccircle cx='40' cy='40' r='1' fill='rgba(201,168,76,0.04)' /%3E%3C/svg%3E");
  background-size: 80px 80px;
}

/* ── Slide-Down Animation für Banner ── */
@keyframes slideDown {
  from { transform: translateY(-100%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
@keyframes slideUp {
  from { transform: translateY(30px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

/* ── Map Filter Chips ── */
.map-chip { padding:7px 14px; border-radius:20px; border:1px solid rgba(255,255,255,0.12); background:rgba(15,15,15,0.7); backdrop-filter:blur(8px); color:rgba(255,255,255,0.7); font-size:12px; font-weight:600; cursor:pointer; white-space:nowrap; transition:all 0.2s ease; }
.map-chip.active { background:rgba(17,194,93,0.2); border-color:var(--color-emerald); color:var(--color-emerald-bright); }
.map-chip:active { transform:scale(0.95); }
#map-filter-chips::-webkit-scrollbar { display:none; }

/* ── Map page override — fullscreen ── */
#page-map { padding:0 !important; }
#page-map .page-header { display:none; }

/* ── Map UI z-index fix (über Leaflet) ── */
#page-map .leaflet-top,
#page-map .leaflet-bottom { z-index: 600 !important; }
#page-map > div[style*="z-index:700"] { z-index: 1100 !important; }
#map-filter-chips { z-index: 1100 !important; }
#map-fab-locate { z-index: 1100 !important; }
#map-bottom-sheet { z-index: 1200 !important; }

/* ── Floating-Sektionen verstecken (jetzt in Map integriert) ── */
.shoe-tracker-card,
.loc-nav-section,
.sim-guide-card { display:none !important; }

/* ── Phase 1 Kill-Liste: Entfernte Module ── */
#page-tracker,
#page-gruppe,
.group-tracker-card { display:none !important; }

/* AI-Button auf Karte ausblenden (hat eigene FABs) */
#page-map.page--active ~ .ai-fab,
#page-map:not([hidden]) ~ .ai-fab { opacity:0; pointer-events:none; }

/* ── Fix 7: iOS Touch + Dead Icons + z-index ── */
button, a, [onclick], .mehr-item, .dash-tile, .bottom-nav__item {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  cursor: pointer;
}

/* AI FAB: nie andere Buttons verdecken */
.ai-fab { z-index:7000 !important; }

/* Bottom-Nav immer sichtbar + klickbar */
.bottom-nav { z-index:8000; position:fixed; bottom:0; }

/* Mehr-Sheet über allem ausser Chat-Conversation */
.mehr-sheet.is-open { z-index:8200; }

/* Chat-Conversation über allem */
#chat-conversation { z-index:8500 !important; }

/* Modals über Chat */
.modal { z-index:9000; }

/* Safe Area für iPhone Notch */
.bottom-nav { padding-bottom:env(safe-area-inset-bottom, 0px); }

/* Verhindere 300ms Touch-Delay auf iOS */
* { touch-action: manipulation; }

/* Kill-Liste: versteckte Seiten */
#page-tracker { display:none !important; }