/* Homepage only: full-bleed original photo and fixed transparent/solid navigation. */
.home-top{scroll-padding-top:125px}
.home-top .site-header{position:fixed;top:0;left:0;right:0;width:100%;background:transparent;border-bottom:1px solid transparent;box-shadow:none;transition:background-color .3s ease,border-color .3s ease,box-shadow .3s ease}
.home-top .site-header .header-inner{min-height:112px;padding-top:8px;padding-bottom:0;gap:22px}
.home-top .site-header .brand-logo{display:block}
.home-top .site-header .brand-logo{display:block;width:200px;height:auto;aspect-ratio:3;object-fit:contain;filter:none;flex:none}
.home-top .main-nav,.home-top .nav-dropdown>button,.home-top .header-actions{color:#fff}
.home-top .main-nav>a,.home-top .nav-dropdown>button,.home-top .language-button,.home-top .mobile-toggle{color:#fff;transition:color .25s ease,background-color .25s ease}
.home-top .main-nav>a:hover,.home-top .nav-dropdown>button:hover{color:#f0d59c}
.home-top .main-nav .active::after{background:#e7c78f}
.home-top .mobile-toggle:hover{background:#ffffff18}
.home-top .site-header .dropdown-panel,.home-top .site-header .lang-panel,.home-top .site-header .mobile-nav{color:var(--ink);background:#fff;box-shadow:0 14px 35px #133a461a}
.home-top .site-header .mobile-nav{border-top-color:#dce6e9;max-height:calc(100dvh - 104px)}
.home-top .site-header .dropdown-panel a,.home-top .site-header .lang-panel button{color:var(--ink)}
.home-top .site-header .dropdown-panel .sub{color:var(--muted)}
.home-top .site-header a:focus-visible,.home-top .site-header button:focus-visible{outline:2px solid #f0d59c;outline-offset:5px}
.home-top .site-header .dropdown-panel a:focus-visible,.home-top .site-header .lang-panel button:focus-visible,.home-top .site-header .mobile-nav a:focus-visible{outline-color:#147b9c;outline-offset:-2px}
.home-top .site-header.header-solid{background:#fff;border-bottom-color:#dee7e9;box-shadow:0 3px 20px #163c4912}
.home-top .site-header.header-solid .main-nav,.home-top .site-header.header-solid .nav-dropdown>button,.home-top .site-header.header-solid .header-actions,.home-top .site-header.header-solid .main-nav>a,.home-top .site-header.header-solid .language-button,.home-top .site-header.header-solid .mobile-toggle{color:var(--ink)}
.home-top .site-header.header-solid .main-nav>a:hover,.home-top .site-header.header-solid .nav-dropdown>button:hover{color:var(--green)}
.home-top .site-header.header-solid .mobile-toggle:hover{background:#eef5f8}
.home-top .preview-bar{position:absolute;top:7px;right:max(24px,calc((100% - 1280px)/2));width:auto;z-index:35;background:#052c37b3;color:#f1f7f7;border:1px solid #ffffff30;border-radius:5px;font-size:8px;letter-spacing:.02em}
.home-top .preview-bar .wrap{width:auto;min-height:19px;padding:0 8px;gap:12px}
.home-top .preview-bar b{display:none}.home-top .preview-bar i{background:#d8bc85}.home-top .preview-bar a{color:#f2f7f7}
.hero.hero-mosque{width:100%;max-width:none;margin:0;padding:0}
.hero-mosque .hero-layout{min-height:660px;border-radius:0;box-shadow:none;overflow:hidden}
.hero-mosque .hero-layout::after{display:none}
.hero-mosque .hero-scene{height:100%;object-position:58% 45%;object-fit:cover}
.hero-mosque .hero-layout::before{background:linear-gradient(180deg,#062b36db 0%,#062b3655 19%,transparent 39%),linear-gradient(90deg,#07303bf2 0%,#093943d9 29%,#09394399 45%,#0939431f 68%,transparent 85%)}
.hero-mosque .hero-copy{width:min(580px,calc(100% - 96px));max-width:580px;margin-left:max(48px,calc((100% - 1280px)/2));padding:171px 0 64px}
.hero-mosque .hero-copy h1,html:not([lang=de]) .hero-mosque h1{font-size:clamp(39px,3.6vw,52px);max-width:520px}
.hero-mosque .hero-copy .lead{max-width:390px}
@media(max-width:1190px){.home-top .site-header .header-inner{gap:15px;min-height:112px}.home-top .site-header .brand-logo{width:190px}.hero-mosque .hero-copy{margin-left:32px;width:min(560px,calc(100% - 64px));padding-top:155px}.hero-mosque .hero-layout{min-height:625px}}
@media(max-width:900px){.hero-mosque .hero-copy{width:68%;max-width:510px}.hero-mosque .hero-copy h1,html:not([lang=de]) .hero-mosque h1{font-size:44px}.hero-mosque .hero-layout::before{background:linear-gradient(180deg,#062b36ed 0%,#062b3650 22%,transparent 42%),linear-gradient(90deg,#07303bf5 0%,#093943d9 35%,#09394355 68%,#09394300 100%)}.hero-mosque .hero-copy .lead{max-width:350px}}
@media(max-width:700px){.home-top{scroll-padding-top:112px}.home-top .site-header .header-inner{min-height:104px;padding-top:15px;gap:8px}.home-top .site-header .brand-logo{width:151px}.home-top .header-actions{gap:8px}.home-top .preview-bar{top:5px;right:15px}.home-top .preview-bar .wrap{min-height:17px;font-size:7px;padding:0 6px;gap:9px}.home-top .site-header .header-actions .btn{min-height:42px}.hero.hero-mosque{padding:0;width:100%}.hero-mosque .hero-layout{min-height:0;display:block;border-radius:0}.hero-mosque .hero-scene{height:440px;object-position:66% 40%}.hero-mosque .hero-layout::before{background:linear-gradient(180deg,#062b36e8 0%,#062b3659 16%,#0a3d4810 26%,#0a3d48cc 43%,#0a3d48 58%,#0a3d48 100%)}.hero-mosque .hero-copy{width:auto;max-width:none;margin:0;padding:280px 24px 34px}.hero-mosque .hero-copy h1,html:not([lang=de]) .hero-mosque h1{font-size:clamp(32px,8.7vw,39px);max-width:460px}.hero-mosque .hero-copy .lead{max-width:460px}.hero-mosque .hero-copy .buttons{gap:10px}.hero-mosque .hero-location{margin-top:21px}}
@media(max-width:360px){.home-top .site-header .brand-logo{width:128px}.home-top .site-header .header-inner{gap:5px}.home-top .header-actions{gap:5px}.hero-mosque .hero-copy{padding-left:20px;padding-right:20px}.home-top .site-header .header-actions .btn{padding:8px 10px}}
@media(prefers-reduced-motion:reduce){.home-top .site-header,.home-top .site-header a,.home-top .site-header button{transition:none}}

/* Comfortable touch height without changing the existing compact widths. */
.home-top .header-actions .language-button,.home-top .header-actions .mobile-toggle,.home-top .site-header .header-actions .btn{min-height:44px}