/* ===== WÜSTEN-GRUNDFARBEN ===== */
body{ background:#f4e6c9; }
.dark body{ background:#1c1409; }

/* ===== ATMOSPHÄRE: Hero & getönte Sektionen ===== */
/* Tag: Wüstenhimmel oben → Sonnenglühen → warmer Sandboden */
.ornament-bg{
  background:
    radial-gradient(1300px 620px at 50% -22%, #bfe0ef 0%, rgba(191,224,239,0) 55%),
    radial-gradient(760px 520px at 50% -4%,  rgba(207,159,51,0.32), transparent 55%),
    linear-gradient(180deg, transparent 32%, rgba(194,98,47,0.10) 76%, rgba(156,74,32,0.18) 100%);
}
/* Nacht: Indigohimmel → Mondglühen → tiefer Sand */
.dark .ornament-bg{
  background:
    radial-gradient(1300px 700px at 50% -18%, #2c2750 0%, rgba(44,39,80,0) 58%),
    radial-gradient(600px 420px at 72% 2%, rgba(236,203,94,0.18), transparent 55%),
    linear-gradient(180deg, transparent 38%, rgba(120,60,28,0.16) 100%);
}
.bg-soft{ background:linear-gradient(180deg,#f1e2c4 0%,#f4e6c9 60%); }
.dark .bg-soft{ background:linear-gradient(180deg,#241a0d 0%,#1c1409 60%); }

/* Ruhige Wüstentönung + dezentes Sternmuster (mittlere Sektionen) */
.bg-dune{
  background-color:transparent;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='50' height='50' viewBox='0 0 50 50'%3E%3Cg fill='none' stroke='%23b98a3a' stroke-opacity='0.16' stroke-width='1'%3E%3Cpath d='M25 1L49 25L25 49L1 25Z'/%3E%3Cpath d='M25 13L37 25L25 37L13 25Z'/%3E%3Cpath d='M0 0L11 11M50 0L39 11M0 50L11 39M50 50L39 39'/%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(1000px 500px at 50% 120%, rgba(194,98,47,0.10), transparent 62%),
    radial-gradient(760px 420px at 100% -12%, rgba(207,159,51,0.10), transparent 58%);
  background-size:50px 50px, 100% 100%, 100% 100%;
  background-repeat:repeat,no-repeat,no-repeat;
}
.dark .bg-dune{
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='50' height='50' viewBox='0 0 50 50'%3E%3Cg fill='none' stroke='%23eccb5e' stroke-opacity='0.12' stroke-width='1'%3E%3Cpath d='M25 1L49 25L25 49L1 25Z'/%3E%3Cpath d='M25 13L37 25L25 37L13 25Z'/%3E%3Cpath d='M0 0L11 11M50 0L39 11M0 50L11 39M50 50L39 39'/%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(1000px 500px at 50% 120%, rgba(120,60,28,0.22), transparent 62%),
    radial-gradient(760px 420px at 100% -12%, rgba(207,159,51,0.07), transparent 58%);
}

/* ===== ISLAMISCHES STERNMUSTER (Textur) ===== */
.girih{ position:relative; isolation:isolate; }
.girih::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:.09;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cg fill='none' stroke='%23cf9f33' stroke-width='1.1'%3E%3Cpath d='M24 1L47 24L24 47L1 24Z'/%3E%3Cpath d='M24 13L35 24L24 35L13 24Z'/%3E%3Cpath d='M0 0L11 11M48 0L37 11M0 48L11 37M48 48L37 37'/%3E%3C/g%3E%3C/svg%3E");
  background-size:48px 48px;
}
.dark .girih::before{ opacity:.13; }
.girih-strong::before{ opacity:.18 !important; z-index:0 !important; }
/* Gold-Sternmuster als Overlay auf farbigen Boxen */
.girih-overlay{ position:absolute; inset:0; pointer-events:none; opacity:.16;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='46' viewBox='0 0 46 46'%3E%3Cg fill='none' stroke='%23eccb5e' stroke-width='1'%3E%3Cpath d='M23 1L45 23L23 45L1 23Z'/%3E%3Cpath d='M23 12L34 23L23 34L12 23Z'/%3E%3Cpath d='M0 0L10 10M46 0L36 10M0 46L10 36M46 46L36 36'/%3E%3C/g%3E%3C/svg%3E");
  background-size:46px 46px; }

/* ===== SONNENSTRAHLEN (hinter der Fahne) ===== */
.sun-rays::before{
  content:""; position:absolute; left:50%; top:44%; width:160%; aspect-ratio:1; transform:translate(-50%,-50%);
  z-index:0; pointer-events:none;
  background:repeating-conic-gradient(from 0deg, rgba(207,159,51,0.22) 0deg 2.4deg, transparent 2.4deg 10deg);
  -webkit-mask:radial-gradient(circle, #000 3%, transparent 60%);
          mask:radial-gradient(circle, #000 3%, transparent 60%);
  animation:spin-slow 150s linear infinite;
}
.dark .sun-rays::before{ background:repeating-conic-gradient(from 0deg, rgba(236,203,94,0.18) 0deg 2.4deg, transparent 2.4deg 10deg); }

/* ===== STERNENHIMMEL (nur Dark-Mode) ===== */
.star-field::after{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:0; transition:opacity .6s;
  background-repeat:no-repeat;
  background-image:
    radial-gradient(1.4px 1.4px at 12% 18%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 28% 9%,  #ffe9b0, transparent),
    radial-gradient(1.6px 1.6px at 47% 24%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 66% 12%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 82% 26%, #ffe9b0, transparent),
    radial-gradient(1.2px 1.2px at 91% 7%,  #fff, transparent),
    radial-gradient(1.3px 1.3px at 38% 34%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 73% 40%, #fff, transparent);
}
.dark .star-field::after{ opacity:.85; animation:twinkle 4.5s ease-in-out infinite alternate; }
@keyframes twinkle{ 0%{opacity:.45} 100%{opacity:.95} }

/* ===== ORNAMENT-TRENNER (Gold-Bordüre) ===== */
.ornament-divider{
  height:22px; opacity:.65; background-repeat:repeat-x; background-position:center; background-size:auto 22px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='22' viewBox='0 0 64 22'%3E%3Cg fill='none' stroke='%23cf9f33' stroke-width='1.3'%3E%3Cpath d='M0 11H64'/%3E%3Cpath d='M32 3L41 11L32 19L23 11Z' fill='%23cf9f33' fill-opacity='0.3'/%3E%3Ccircle cx='8' cy='11' r='2'/%3E%3Ccircle cx='56' cy='11' r='2'/%3E%3C/g%3E%3C/svg%3E");
}

/* ===== HEADER-FLOURISH ===== */
.flourish{ display:inline-flex; align-items:center; gap:.65rem; }
.flourish::before,.flourish::after{ content:""; height:1px; width:30px; background:linear-gradient(90deg,transparent,#cf9f33); }
.flourish::after{ background:linear-gradient(90deg,#cf9f33,transparent); }

/* Feinkörniges Papier-Grain */
.grain::after{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:60; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
}
.dark .grain::after{ mix-blend-mode:screen; opacity:.04; }

/* Wehende Flagge */
.flagpole{ perspective: 1400px; }
.flag{
  transform-origin: left center;
  animation: wave 6s ease-in-out infinite;
  filter: drop-shadow(0 18px 34px rgba(16,42,58,.32));
}
.flag .shimmer{ animation: shimmer 6s ease-in-out infinite; }
@keyframes wave{
  0%,100%{ transform: rotateY(0deg) skewY(0deg); }
  25%    { transform: rotateY(-7deg) skewY(1.2deg); }
  50%    { transform: rotateY(0deg) skewY(-0.6deg); }
  75%    { transform: rotateY(6deg) skewY(0.9deg); }
}
@keyframes shimmer{
  0%,100%{ transform: translateX(-15%); opacity:.0; }
  45%    { opacity:.35; }
  50%    { transform: translateX(110%); opacity:.0; }
}

/* Sanftes Schweben der Hero-Verzierungen */
@keyframes float{ 0%,100%{ transform: translateY(0) } 50%{ transform: translateY(-12px) } }
.float{ animation: float 7s ease-in-out infinite; }

/* Scroll-Reveal — Progressive Enhancement: nur aktiv, wenn JS die .js-Klasse setzt. */
.js .reveal{ opacity:0; transform: translateY(28px); transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); }
.js .reveal.in{ opacity:1; transform: none; }
@media (prefers-reduced-motion: reduce){ .js .reveal{ opacity:1 !important; transform:none !important; transition:none; } }

/* ===== NURDI YOGA — atmende Figur ===== */
/* Der Atemkreis pulsiert ruhig (8-s-Takt = die offizielle Staats-Atmung). */
@keyframes nurdi-breathe{
  0%,100%{ transform:scale(.72); opacity:.18; }
  50%    { transform:scale(1);   opacity:.42; }
}
.nurdi-breath{ transform-origin:center; animation:nurdi-breathe 8s ease-in-out infinite; }

/* Nurdi wiegt sich kaum merklich — würdevolle Trägheit. */
@keyframes nurdi-sway{
  0%,100%{ transform:translateY(0) rotate(0deg); }
  50%    { transform:translateY(-3px) rotate(-1.2deg); }
}
.nurdi-figure{ transform-origin:50% 82%; animation:nurdi-sway 8s ease-in-out infinite; }

/* Die Arme heben sich beim Einatmen sanft (gleicher Takt). */
@keyframes nurdi-arms{
  0%,100%{ transform:rotate(0deg); }
  50%    { transform:rotate(-8deg); }
}
.nurdi-arms{ transform-origin:24px 26px; animation:nurdi-arms 8s ease-in-out infinite; }

/* Schwebende Atem-Punkte steigen langsam auf. */
@keyframes nurdi-rise{
  0%  { transform:translateY(8px) scale(.6); opacity:0; }
  35% { opacity:.75; }
  100%{ transform:translateY(-18px) scale(1); opacity:0; }
}
.nurdi-dot{ transform-origin:center; animation:nurdi-rise 8s ease-in-out infinite; }
.nurdi-dot.d2{ animation-delay:2.6s; }
.nurdi-dot.d3{ animation-delay:5.2s; }

@media (prefers-reduced-motion: reduce){
  .nurdi-breath,.nurdi-figure,.nurdi-arms,.nurdi-dot{ animation:none !important; }
  .nurdi-breath{ transform:scale(.9); opacity:.32; }
  .nurdi-dot{ opacity:0; }
}

/* Amtssiegel-Drehung */
@keyframes spin-slow{ to{ transform: rotate(360deg) } }
.seal-text{ animation: spin-slow 28s linear infinite; transform-origin:center; }

::selection{ background:#cf9f33; color:#2a1c0c; }
html{ scrollbar-color:#c2622f transparent; }

/* ===== STAATSBÜRGERSCHAFTS-WIZARD ===== */
/* Fortschritts-Punkte */
.nd-dots .nd-dot{
  width:9px; height:9px; border-radius:9999px;
  background:rgba(207,159,51,.30); transition:background .3s, transform .3s;
}
.nd-dots .nd-dot.is-active{ background:#c2622f; transform:scale(1.35); }
.nd-dots .nd-dot.is-done{ background:#3f8f4e; }

/* Antwort-Buttons */
.nd-choice{
  width:100%; text-align:left; border-radius:1rem;
  background:#fbf3e1; border:1px solid rgba(207,159,51,.20);
  padding:.85rem 1.1rem; font-weight:500; color:#39281a;
  transition:transform .15s, border-color .2s, background .2s;
}
.nd-choice:hover{ transform:translateY(-2px); border-color:rgba(63,143,78,.5); background:#fff; }
.dark .nd-choice{ background:rgba(28,20,9,.6); color:#f4e6c9; border-color:rgba(207,159,51,.18); }
.dark .nd-choice:hover{ background:rgba(28,20,9,.85); border-color:rgba(116,182,126,.5); }

/* Press-and-hold Siegel-Fortschritt */
.nd-hold-fill{
  position:absolute; inset:0; transform-origin:left center; transform:scaleX(0);
  background:linear-gradient(90deg, rgba(63,143,78,.35), rgba(207,159,51,.40));
  transition:transform .05s linear; pointer-events:none;
}

/* Name-Pflichtfeld: Schüttel-Hinweis */
@keyframes nd-shake{ 0%,100%{transform:translateX(0)} 20%,60%{transform:translateX(-6px)} 40%,80%{transform:translateX(6px)} }
.nd-shake{ animation:nd-shake .4s ease; border-color:#c2622f !important; }
@media (prefers-reduced-motion: reduce){ .nd-shake{ animation:none; } }

/* Urkunde drucken: nur die Karte, Rest weg */
@media print{
  body > *:not(#modal){ display:none !important; }
  #modal{ position:static !important; padding:0 !important; }
  #modalBackdrop, #modalClose, .nd-dots, #nd-print, #nd-accept-close{ display:none !important; }
  .nd-card{ box-shadow:none !important; border:none !important; max-height:none !important; overflow:visible !important; }
}