/* =========================================================
   Ladebildschirm + Sprachauswahl (wird im <head> geladen, damit er sofort sichtbar ist)
   Farben = Werte aus :root in style.css (hier direkt, weil diese Datei vor style.css greift)
   ========================================================= */
html.is-loading, html.is-loading body { overflow: hidden; }
.loader {
  position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; padding: 24px;
  background: radial-gradient(ellipse at 50% 40%, #33442b 0%, #1f2a1c 65%);
  transition: transform 1s cubic-bezier(.76, 0, .24, 1);
}
.loader::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: linear-gradient(90deg, transparent, #c9a227, transparent);
}
.is-loaded .loader { transform: translateY(-101%); pointer-events: none; }
.loader__inner { position: relative; text-align: center; transition: opacity .45s ease, transform .6s cubic-bezier(.2,.7,.2,1); }
.is-loaded .loader__inner { opacity: 0; transform: translateY(-40px); }
.loader__ar {
  display: block; color: #c9a227; line-height: 1;
  font: 700 clamp(4.2rem, 20vw, 7.5rem)/1 "Reem Kufi", "Noto Kufi Arabic", "Segoe UI", Tahoma, sans-serif;
  animation: ldIn .9s cubic-bezier(.2,.7,.2,1) both;
}
.loader__lat {
  display: block; margin-top: .9rem; padding-left: .6em; color: #f7f1e5;
  font: 600 .95rem/1 Georgia, "Times New Roman", serif; letter-spacing: .6em;
  animation: ldIn .9s .15s cubic-bezier(.2,.7,.2,1) both;
}
.loader__progress { transition: opacity .4s ease, transform .5s cubic-bezier(.2,.7,.2,1); }
.loader__bar {
  width: 170px; height: 2px; margin: 2.2rem auto 1.1rem; border-radius: 2px; overflow: hidden;
  background: rgba(247, 241, 229, .14); animation: ldIn .9s .25s both;
}
.loader__bar span {
  display: block; height: 100%; transform-origin: left; transform: scaleX(0);
  background: linear-gradient(90deg, #c9a227, #f0d77e);
}
.loader__tag {
  margin: 0; color: rgba(226, 196, 106, .85); font: italic 1rem Georgia, serif;
  animation: ldIn .9s .35s both;
}
.loader__tag[lang="ar"] { font: 500 1.1rem "Reem Kufi", "Noto Kufi Arabic", Tahoma, sans-serif; }
.loader__seeds { position: absolute; inset: -120px -90px; pointer-events: none; }
.loader__seeds i {
  position: absolute; bottom: 0; width: 7px; height: 3.5px; border-radius: 50%;
  background: #efdcb0; opacity: 0; animation: ldSeed 2.4s ease-in infinite;
}
.loader__seeds i:nth-child(1) { left: 12%; animation-delay: .1s; }
.loader__seeds i:nth-child(2) { left: 30%; animation-delay: .7s; transform: rotate(40deg); }
.loader__seeds i:nth-child(3) { left: 48%; animation-delay: 1.3s; }
.loader__seeds i:nth-child(4) { left: 66%; animation-delay: .4s; }
.loader__seeds i:nth-child(5) { left: 82%; animation-delay: 1s; }
.loader__seeds i:nth-child(6) { left: 92%; animation-delay: 1.7s; background: #9b2d20; width: 4px; height: 4px; }
.loader__seeds i:nth-child(7) { left: 22%; animation-delay: 1.9s; background: #5b6b2e; }

/* ---------- Sprachauswahl (erster Besuch) ---------- */
.lang-pick { display: none; margin-top: 2rem; }
.is-choosing .loader__progress { opacity: 0; transform: translateY(-10px); height: 0; overflow: hidden; margin: 0; }
.is-choosing .lang-pick { display: block; animation: ldIn .7s cubic-bezier(.2,.7,.2,1) both; }
.lang-pick__title {
  margin: 0 0 1.3rem; color: rgba(247, 241, 229, .85);
  font: 500 .95rem/1.4 system-ui, -apple-system, "Segoe UI", sans-serif;
}
.lang-pick__title [lang="ar"] { font-family: "Reem Kufi", "Noto Kufi Arabic", Tahoma, sans-serif; font-size: 1.05rem; }
.lang-pick__options { display: flex; gap: 14px; justify-content: center; direction: ltr; }
.lang-opt {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .15rem;
  width: min(42vw, 190px); min-height: 132px; padding: 1.1rem .8rem; border-radius: 22px; text-decoration: none;
  color: #f7f1e5; background: rgba(255, 255, 255, .05); border: 1.5px solid rgba(226, 196, 106, .35);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: transform .25s cubic-bezier(.2,.7,.2,1), background .25s, border-color .25s, box-shadow .25s;
}
.lang-opt:hover { transform: translateY(-3px); border-color: #e2c46a; background: rgba(255, 255, 255, .09); }
.lang-opt:focus-visible { outline: 3px solid #f0d77e; outline-offset: 4px; }
.lang-opt.is-suggested { background: #c9a227; border-color: #c9a227; color: #1f2a1c; box-shadow: 0 16px 34px -14px rgba(201, 162, 39, .8); }
.lang-opt.is-suggested:hover { background: #e2c46a; }
.lang-opt__code {
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; margin-bottom: .35rem;
  font: 700 .85rem/1 system-ui, sans-serif; letter-spacing: .05em;
  border: 1.5px solid currentColor; opacity: .85;
}
.lang-opt[lang="ar"] .lang-opt__code { font: 700 1.2rem/1 "Reem Kufi", "Noto Kufi Arabic", Tahoma, sans-serif; letter-spacing: 0; }
.lang-opt strong { font: 600 1.25rem/1.2 Georgia, "Times New Roman", serif; }
.lang-opt[lang="ar"] strong { font: 700 1.35rem/1.3 "Reem Kufi", "Noto Kufi Arabic", Tahoma, sans-serif; }
.lang-opt small { font: 400 .82rem/1.3 system-ui, sans-serif; opacity: .75; }
.lang-opt[lang="ar"] small { font-family: "Noto Kufi Arabic", "Reem Kufi", Tahoma, sans-serif; }
.lang-pick__note {
  margin: 1.2rem 0 0; color: rgba(247, 241, 229, .55);
  font: 400 .78rem/1.5 system-ui, sans-serif;
}
.lang-pick__note [lang="ar"] { font-family: "Noto Kufi Arabic", Tahoma, sans-serif; }

@keyframes ldIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes ldSeed {
  0% { opacity: 0; transform: translateY(0) rotate(0); }
  20% { opacity: .9; }
  100% { opacity: 0; transform: translateY(-260px) rotate(220deg); }
}
@media (prefers-reduced-motion: reduce) {
  .loader { transition: opacity .4s; }
  .is-loaded .loader { transform: none; opacity: 0; }
  .loader__seeds { display: none; }
  .lang-opt { transition: none; }
}