/* Hell-Dunkel-Rhythmus 23.09.2026 (NANIL-Regel: alle Seiten wechseln dunkel-hell-dunkel-hell,
   nie durchgehend dunkel). Vorher lagen alle 12 Abschnitte auf demselben Fast-Schwarz.
   Nur additiv: das React-Bundle bleibt unberuehrt, gewechselt wird ueber die Abschnitts-IDs.
   24.09.: #try (Spiegel-Karte) ist ausgeblendet, der Spiegel steht jetzt oben neben der Stimmanalyse.
   Dunkel: #top #features #how #app #trust #cta — hell: #film #voice #focus #pricing #faq.
   Hell = warmes Creme wie in der App (#fefcf8), kein reines Weiss. */

:is(#film,#voice,#focus,#pricing,#faq){
  /* 24.09. Nazannil: „Hintergrund ist weiss — nie weiss benutzen!!!!“ — Creme #fefcf8 wirkte weiss.
     Jetzt meliertes Perl-Mint, deutlich farbig. */
  background-color:#d6e8e2;
  background-image:
    radial-gradient(120% 80% at 12% 0%,rgba(47,148,131,.22),transparent 60%),
    radial-gradient(100% 70% at 92% 100%,rgba(140,195,185,.30),transparent 62%),
    linear-gradient(180deg,#dcebe6,#cfe2dc);
  color:#2a2a35;
  padding-top:64px;padding-bottom:64px;
  /* Die Abschnitte sitzen in einem schmalen Container — das Band reicht trotzdem von Rand zu Rand */
  box-shadow:0 0 0 100vmax #d3e6df;
  clip-path:inset(0 -100vmax);
}

/* Schrift */
:is(#film,#voice,#focus,#pricing,#faq) :is(h1,h2,h3,h4,.text-nanil-pearl,.text-nanil-white){color:#23232e}
:is(#film,#voice,#focus,#pricing,#faq) .text-nanil-soft{color:#474a5a}
:is(#film,#voice,#focus,#pricing,#faq) :is(.text-nanil-muted,.text-muted-foreground){color:#5a5d6e}
:is(#film,#voice,#focus,#pricing,#faq) [class*="text-nanil-champagne"]{color:#8c5a10}
:is(#film,#voice,#focus,#pricing,#faq) :is([class*="text-nanil-cyan"],.text-nanil-teal){color:#1f6f63}
:is(#film,#voice,#focus,#pricing,#faq) .text-gradient{
  background:linear-gradient(120deg,#1f7a6c 0%,#1a6f78 50%,#8f5a12 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}

:is(#film,#voice,#focus,#pricing,#faq) .section-kicker{color:#1f6f63}
:is(#film,#voice,#focus,#pricing,#faq) .txt-soft{color:#474a5a}
/* Die dunklen Schatten hinter Ueberschriften waren fuer den Film-Hintergrund — auf Creme wirken sie grau */
:is(#film,#voice,#focus,#pricing,#faq) *{text-shadow:none}

/* Glaskacheln auf Creme: warm getoent, teal umrandet, schwebend */
:is(#film,#voice,#focus,#pricing,#faq) :is(.glass,.glass-soft){
  background:linear-gradient(180deg,rgba(234,246,243,.62),rgba(214,232,226,.55));
  border:1px solid rgba(47,148,131,.32);
  box-shadow:0 14px 38px rgba(42,42,53,.10),inset 0 1px rgba(234,246,243,.7)}
:is(#film,#voice,#focus,#pricing,#faq) .glass-hover:hover{
  border-color:rgba(47,148,131,.45);
  box-shadow:0 18px 48px rgba(42,42,53,.14),0 0 24px rgba(47,148,131,.12),inset 0 1px rgba(234,246,243,.7)}
:is(#film,#voice,#focus,#pricing,#faq) [class*="border-white"]{border-color:rgba(42,42,53,.10)}
:is(#film,#voice,#focus,#pricing,#faq) [class*="shadow-[0_24px_64px"]{box-shadow:0 18px 44px rgba(42,42,53,.12)}

/* NANIL-Farben wie die App echo.nanilpulse.art (24.09., Nazannil: „das sind nicht Nanils Farben“):
   Meeres-Teal #2f9483 / #1a848c, Mint #7fe3d8, Bernstein #F6BD60, Altgold #8a7a4e, Perlweiss #eaf6f3
   auf warmem Dunkel. Kein Elektro-Cyan #26d7ea, kein Lila, kein Magenta. */
.text-gradient{background:linear-gradient(120deg,#7fe3d8 0%,#2f9483 45%,#f6bd60 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.btn-primary-echo{
  background:linear-gradient(180deg,rgba(47,148,131,.34),rgba(26,132,140,.16));
  border:1.5px solid rgba(127,227,216,.72);color:#eaf6f3;
  box-shadow:0 8px 26px rgba(47,148,131,.24),inset 0 1px rgba(255,255,255,.16)}
.btn-primary-echo:hover{box-shadow:0 10px 32px rgba(47,148,131,.36),0 0 22px rgba(127,227,216,.22),inset 0 1px rgba(255,255,255,.2)}
.section-kicker{color:#7fe3d8}
[class*="text-nanil-cyan"],.text-nanil-teal{color:#7fe3d8}
[class*="bg-nanil-cyan"],[class*="bg-nanil-teal"]{background-color:rgba(47,148,131,.18)!important}
[class*="bg-nanil-violet"],[class*="bg-nanil-magenta"]{background-color:rgba(246,189,96,.16)!important}
[class*="from-nanil-cyan"],[class*="from-nanil-teal"]{--tw-gradient-from:rgba(47,148,131,.35) var(--tw-gradient-from-position)!important;--tw-gradient-to:rgba(47,148,131,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)!important}
[class*="from-nanil-magenta"],[class*="from-nanil-violet"]{--tw-gradient-from:rgba(246,189,96,.30) var(--tw-gradient-from-position)!important;--tw-gradient-to:rgba(246,189,96,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)!important}
[class*="to-nanil-violet"],[class*="to-nanil-magenta"]{--tw-gradient-to:rgba(246,189,96,.30) var(--tw-gradient-to-position)!important}
[class*="text-nanil-violet"],[class*="text-nanil-magenta"]{color:#f6bd60!important}
.glass{border-color:rgba(127,227,216,.22)}

/* Orb-Knopf war nie antippbar: die Klasse pointer-events-auto fehlt im kompilierten
   Tailwind (nachtraeglich dazugekommen), und die Textflaeche (z-10, spaeter im DOM)
   lag darueber. Knopf-Ebene nach oben, Knopf selbst wieder beruehrbar. */
.pointer-events-auto{pointer-events:auto}
#top div.pointer-events-none.absolute:has(> button){z-index:20}
#top button[aria-label]{pointer-events:auto;cursor:pointer}

/* Hero (24.09., Nazannil: „Schrift auf dem Kreis sieht schrecklich aus — professionell,
   gerne lebendig, schwebend“): keine dunklen Kisten mehr. Die Schrift schwebt frei,
   ein weicher warmer Schatten traegt sie ueber dem Orb. */
#top h1{filter:none!important;text-shadow:0 2px 24px rgba(21,14,8,.85),0 0 2px rgba(21,14,8,.6)}
#top h1 .text-gradient{text-shadow:none;filter:drop-shadow(0 2px 16px rgba(21,14,8,.8))}
#top p.txt-soft{background:none;color:#eaf6f3!important;
  text-shadow:0 1px 16px rgba(21,14,8,.95),0 0 3px rgba(21,14,8,.8)}
#top .section-kicker{color:#7fe3d8;text-shadow:0 1px 12px rgba(21,14,8,.9)}
#top .glass-soft{background:rgba(21,14,8,.55);border-color:rgba(127,227,216,.28);color:#eaf6f3}
.nanil-orb-hinweis{color:#fff6e6;font-size:15px;font-weight:600;letter-spacing:.03em;
  text-shadow:0 0 3px rgba(21,14,8,1),0 1px 10px rgba(21,14,8,.95),0 0 28px rgba(21,14,8,.85)}
/* Spiegel-Knopf neben Stimme: nebeneinander buendig, untereinander mit Abstand */
[data-nanil-spiegel]{margin-top:0;align-self:center}
@media (max-width:640px){[data-nanil-spiegel]{margin-top:12px}}
@keyframes nanil-schweben{0%,100%{transform:translateY(0);opacity:.92}50%{transform:translateY(-6px);opacity:1}}
.nanil-schwebt,#top p.txt-soft,#top .section-kicker{animation:nanil-schweben 6s ease-in-out infinite}
#top p.txt-soft{animation-delay:-2s}
@media (prefers-reduced-motion:reduce){.nanil-schwebt,#top p.txt-soft,#top .section-kicker{animation:none}}

/* Die schwebende Leiste oben war durchsichtig — ueber hellen Baendern verschwanden
   „nanil" und ☰ (Nazannil: „Schriften hell auf hell nicht lesbar"). Sie traegt jetzt
   immer ihr eigenes dunkles Glas, egal was darunter liegt. */
header.fixed .glass{
  background:linear-gradient(180deg,rgba(38,30,24,.88),rgba(28,22,17,.84));
  border-color:rgba(188,232,255,.22)}

/* Knoepfe behalten ihre helle Schrift auf dem Teal-Verlauf */
:is(#film,#voice,#focus,#pricing,#faq) .btn-primary-echo{color:#fff;
  background:linear-gradient(180deg,#2a8a79,#1f6f63);border-color:#1f6f63}
:is(#film,#voice,#focus,#pricing,#faq) .nanil-film-note{color:#5a5d6e}

/* Kleine Orb-Kugel im Spiegel-Abschnitt: Lila (#7a4dff, #b45cff, #1f1e7a) -> Teal + Bernstein wie der App-Orb */
.nanil-orb{background:radial-gradient(circle at 28% 22%,rgba(255,250,240,.95) 0 10%,rgba(246,220,170,.8) 16%,transparent 27%),
  radial-gradient(circle at 38% 34%,#8cc3b9eb 0 18%,#2f948394 34%,#f6bd608c 58%,#3a2a18a8)!important;
  box-shadow:0 0 30px #e0a44a70,0 0 70px #2f948342,0 22px 58px #150e086b,inset -16px -20px 30px #6b4a1e94!important}
.nanil-orb:before{background:conic-gradient(from 210deg,transparent 0 18%,rgba(246,199,109,.42) 27%,transparent 38%,rgba(127,227,216,.30) 58%,transparent 72%),
  radial-gradient(circle,rgba(30,150,145,.22),transparent 62%)!important}

/* Film-Rahmen: letzter Elektro-Cyan-Schimmer -> Meeres-Teal */
#film video{box-shadow:0 18px 44px rgba(42,42,53,.16),0 0 0 1px rgba(47,148,131,.22)!important}


/* ===== 24.09.: Stimmanalyse + Spiegel oben, als goldene App-Kugeln ==========================
   Nazannil: „Spiegel und Stimmanalyse muessen nebeneinander sein … die Kugeln genauso wie in
   der App, aber groesser — klein und groesser, schwebend, lebendig“. Vorlage: #nlwOrb aus
   nanil-welcome-voice.js (Bernstein-Verlauf + zwei pulsierende Ringe). Partikelwolke,
   Mini-Mikrofon und die Spiegel-Karte weiter unten sind ausgeblendet, nicht geloescht. */
#top > canvas,
#top > div.pointer-events-none.absolute:has(> button){display:none!important}
#try{display:none!important}
#top div[class="flex-1"]{display:flex;align-items:center;justify-content:center;padding:30px 0 30px}
.nanil-duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;width:100%;max-width:620px;margin:0 auto}
.nanil-duo-item{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;
  text-decoration:none;color:inherit;-webkit-tap-highlight-color:transparent;padding:6px 4px}
/* Kugel 1:1 wie in der App (.mirror-orb aus nanil-v2-check/_mockups/nanil-echo-global.css,
   Werte am 24.09. im laufenden Browser ausgelesen) — nur groesser und atmend. */
.nanil-kugel{position:relative;display:block;width:138px;height:138px;border-radius:50%;margin:10px 0 22px;overflow:visible;
  background:
    radial-gradient(circle at 28% 22%,rgba(255,255,255,.98) 0 10%,rgba(219,238,255,.84) 16%,transparent 27%),
    radial-gradient(circle at 38% 34%,rgba(140,195,185,.92) 0 18%,rgba(64,184,255,.58) 34%,rgba(122,77,255,.48) 58%,rgba(24,41,116,.62) 100%);
  box-shadow:0 0 30px rgba(206,197,176,.58),0 0 70px rgba(30,150,145,.26),0 22px 58px rgba(3,14,38,.42),
    inset -16px -20px 30px rgba(31,30,122,.58),inset 12px 12px 24px rgba(255,255,255,.36),inset 0 0 0 1px rgba(255,255,255,.16);
  animation:nanil-kugel-atem 7s ease-in-out infinite;will-change:transform}
.nanil-kugel-licht{position:absolute;inset:0;border-radius:50%;overflow:hidden;pointer-events:none}
.nanil-kugel-licht::before{content:"";position:absolute;inset:-18%;border-radius:50%;
  background:conic-gradient(from 210deg,transparent 0 18%,rgba(206,197,176,.42) 27%,transparent 38%,rgba(180,92,255,.32) 58%,transparent 72%),
    radial-gradient(circle,rgba(30,150,145,.22),transparent 62%);
  filter:blur(5px);mix-blend-mode:screen;animation:nanil-kugel-licht 9s linear infinite}
.nanil-kugel-licht::after{content:"";position:absolute;left:20%;top:15%;width:30%;height:22%;border-radius:50%;
  background:rgba(255,255,255,.78);filter:blur(3px);transform:rotate(-22deg)}
@keyframes nanil-kugel-licht{to{transform:rotate(360deg)}}
.nanil-kugel::before,.nanil-kugel::after{content:"";position:absolute;inset:-12px;border-radius:50%;
  border:1px solid rgba(188,232,255,.45);opacity:0;animation:nanil-kugel-ring 3.2s ease-out infinite}
.nanil-kugel::after{border-color:rgba(140,195,185,.35);animation-delay:1.6s}
.nanil-duo-spiegel .nanil-kugel{animation-delay:-3.5s}
.nanil-duo-spiegel .nanil-kugel::before{animation-delay:-.8s}
.nanil-duo-spiegel .nanil-kugel::after{animation-delay:.8s}
/* 24.09. „werden nicht klein und groesser, pulsieren nur“: tiefes Atmen statt Pulsieren — klein bis richtig gross, langsamer */
@keyframes nanil-kugel-atem{0%,100%{transform:translateY(6px) scale(.7)}50%{transform:translateY(-16px) scale(1.3)}}
@keyframes nanil-kugel-ring{0%{transform:scale(.9);opacity:.75}70%{opacity:0}100%{transform:scale(1.55);opacity:0}}
.nanil-duo-item:active .nanil-kugel{transform:scale(.94)}
.nanil-duo-name{font-family:inherit;font-size:19px;font-weight:600;letter-spacing:-.005em;color:#f6e3bd;
  text-shadow:0 1px 14px rgba(21,14,8,.9)}
.nanil-duo-sub{font-size:14px;line-height:1.4;color:rgba(228,214,184,.9);text-shadow:0 1px 12px rgba(21,14,8,.9)}
.nanil-duo-spiegel .nanil-duo-name,.nanil-duo-spiegel .nanil-duo-sub{animation-delay:-3s}
@media (min-width:640px){.nanil-kugel{width:230px;height:230px;margin:24px 0 34px}.nanil-duo{gap:56px;max-width:760px}}

/* Hero-Schrift: nicht weiss, sondern NANIL-Farben — schwebend und lebendig (schimmernder Verlauf) */
#top h1{color:transparent;background:linear-gradient(100deg,#f6e3bd 0%,#e3c07a 30%,#f6e3bd 55%,#e6cc92 80%,#f6e3bd 100%);
  background-size:220% 100%;-webkit-background-clip:text;background-clip:text;
  text-shadow:none;animation:nanil-schimmer 9s ease-in-out infinite,nanil-schweben 6s ease-in-out infinite}
#top h1 .text-gradient{background-size:220% 100%;animation:nanil-schimmer 9s ease-in-out infinite reverse}
@keyframes nanil-schimmer{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
#top p.txt-soft{color:rgba(228,214,184,.95)!important}
#top .nanil-orb-hinweis{display:none}
@media (prefers-reduced-motion:reduce){.nanil-kugel,.nanil-kugel-licht,.nanil-kugel::before,.nanil-kugel::after,#top h1,#top h1 .text-gradient{animation:none}}

/* 24.09. „Kugeln groesser — so spacey“: ein weiter, atmender Nebel-Halo hinter jeder Kugel
   (Farben der Kugel selbst: Tuerkis, Blau, ein Hauch Violett) */
.nanil-duo-item{position:relative}
.nanil-duo-item::before{content:"";position:absolute;left:50%;top:84px;width:300px;height:300px;margin:-150px 0 0 -150px;border-radius:50%;
  pointer-events:none;z-index:-1;
  background:radial-gradient(circle,rgba(64,184,255,.20) 0%,rgba(30,150,145,.14) 32%,rgba(122,77,255,.08) 52%,transparent 70%);
  filter:blur(8px);animation:nanil-halo 5.5s ease-in-out infinite}
.nanil-duo-spiegel::before{animation-delay:-2.75s}
@keyframes nanil-halo{0%,100%{transform:scale(.8);opacity:.55}50%{transform:scale(1.2);opacity:1}}
@media (min-width:640px){.nanil-duo-item::before{top:140px;width:460px;height:460px;margin:-230px 0 0 -230px}}
@media (prefers-reduced-motion:reduce){.nanil-duo-item::before{animation:none}}
/* Halo und Ringe duerfen leuchten, aber nie seitliches Wischen ausloesen */
#top{overflow-x:clip}

/* 24.09. Farbmessung (Nazannil: „so viel Lila — nimm exakt die richtigen Farben“): die App-Kugel
   ist halbdurchsichtig und liegt dort auf einer perlgrauen Kachel -> gemessen rgb(186,203,219),
   0 % Lila. Auf unserem Dunkel schlug das Violett durch (20 %). Gleicher Untergrund wie in der App: */
.nanil-kugel{background-color:#c9d2dc}
.nanil-duo-item::before{background:radial-gradient(circle,rgba(140,195,185,.20) 0%,rgba(30,150,145,.12) 34%,rgba(188,232,255,.06) 54%,transparent 70%)}
.nanil-kugel::before{border-color:rgba(188,232,255,.40)}

/* Ueberschrift ruhiger (Nazannil: „ein bisschen zu bunt“): zwei Toene statt Regenbogen —
   Champagner oben, sanftes Mint unten; der Schimmer bleibt, nur leiser */
#top h1{background:linear-gradient(100deg,#f6e3bd 0%,#ecd6ab 50%,#f6e3bd 100%);background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text}
#top h1 .text-gradient{background:linear-gradient(100deg,#9fdcd2 0%,#8cc3b9 50%,#9fdcd2 100%);background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text}
.nanil-kugel{background-color:#dfe5eb;filter:saturate(.5) hue-rotate(-14deg) brightness(1.06)}

/* 24.09. EINZIGE Vorlage = die App-Kugel (Nazannils Foto vom Stimmspiegel, „die Kugeln sind geil“).
   Kein Gold. Dazu: keine Ringe; die leuchtende Stelle kreist mit (ganze Lichtschicht dreht sich);
   spacey = Nebel + feine Sterne in den Farben der Kugel. */
.nanil-kugel::before,.nanil-kugel::after{content:none!important;animation:none!important}
.nanil-kugel-licht{animation:nanil-kugel-licht 12s linear infinite}
.nanil-duo-spiegel .nanil-kugel-licht{animation-duration:15s;animation-direction:reverse}
.nanil-duo-item::before{filter:blur(14px)!important}
.nanil-duo-item::after{content:"";position:absolute;left:50%;top:84px;width:280px;height:240px;margin:-120px 0 0 -140px;
  pointer-events:none;z-index:-1;opacity:.8;animation:nanil-sterne 4.2s ease-in-out infinite;
  background:
    radial-gradient(1.6px 1.6px at 12% 22%,rgba(234,246,243,.95),transparent),
    radial-gradient(1.2px 1.2px at 84% 18%,rgba(188,232,255,.9),transparent),
    radial-gradient(1.8px 1.8px at 90% 70%,rgba(234,246,243,.9),transparent),
    radial-gradient(1.2px 1.2px at 8% 78%,rgba(140,195,185,.9),transparent),
    radial-gradient(1px 1px at 30% 92%,rgba(234,246,243,.8),transparent),
    radial-gradient(1.4px 1.4px at 70% 6%,rgba(188,232,255,.85),transparent),
    radial-gradient(1px 1px at 50% 98%,rgba(140,195,185,.7),transparent)}
.nanil-duo-spiegel::after{animation-delay:-2.1s;transform:scaleX(-1)}
@keyframes nanil-sterne{0%,100%{opacity:.35}50%{opacity:.95}}
@media (min-width:640px){.nanil-duo-item::after{top:140px;width:420px;height:360px;margin:-180px 0 0 -210px}}
@media (prefers-reduced-motion:reduce){.nanil-kugel-licht,.nanil-duo-item::after{animation:none}}

/* 24.09. „Der leuchtende Punkt muss leben — spacey“: der Lichtpunkt glueht, pulsiert und funkelt
   wie ein Stern (Groesse, Helligkeit, Schein), waehrend er mit der Lichtschicht um die Kugel kreist. */
.nanil-kugel-licht::after{
  background:radial-gradient(circle,rgba(255,255,255,.98) 0 22%,rgba(234,246,243,.85) 42%,rgba(188,232,255,.35) 66%,transparent 78%)!important;
  box-shadow:0 0 14px 4px rgba(234,246,243,.55),0 0 34px 10px rgba(140,195,185,.28);
  animation:nanil-funke 3.4s ease-in-out infinite}
.nanil-duo-spiegel .nanil-kugel-licht::after{animation-delay:-1.7s}
@keyframes nanil-funke{
  0%,100%{transform:rotate(-22deg) scale(.78);opacity:.6;filter:blur(3.5px);
    box-shadow:0 0 10px 2px rgba(234,246,243,.4),0 0 24px 6px rgba(140,195,185,.18)}
  45%{transform:rotate(-18deg) scale(1.22);opacity:1;filter:blur(1.5px);
    box-shadow:0 0 22px 7px rgba(255,255,255,.75),0 0 54px 16px rgba(140,195,185,.4)}
  60%{transform:rotate(-20deg) scale(1.08);opacity:.92;filter:blur(2px)}}
@media (prefers-reduced-motion:reduce){.nanil-kugel-licht::after{animation:none}}

/* 24.09. „Sind die Schriften Gold? Warum Gold?“ — Champagner war Gold. Schrift jetzt in den Farben
   der Kugeln: Perl-Mint + Perl-Blau (nicht weiss, nicht gold). Gilt fuer die ganze Seite. */
#top h1{background:linear-gradient(100deg,#d3ece6 0%,#bcd8e8 50%,#d3ece6 100%)!important;background-size:220% 100%!important;
  -webkit-background-clip:text!important;background-clip:text!important}
#top h1 .text-gradient{background:linear-gradient(100deg,#8cc3b9 0%,#9cc6df 50%,#8cc3b9 100%)!important;background-size:220% 100%!important;
  -webkit-background-clip:text!important;background-clip:text!important}
#top p.txt-soft{color:rgba(203,228,224,.94)!important}
.nanil-duo-name{color:#d3ece6}
.nanil-duo-sub{color:rgba(188,214,230,.9)}
[class*="text-nanil-champagne"]{color:#9fd6cc!important}
.text-gradient{background:linear-gradient(120deg,#9fdcd2 0%,#8cc3b9 50%,#9cc6df 100%)!important;
  -webkit-background-clip:text!important;background-clip:text!important;color:transparent!important}
:is(#film,#voice,#focus,#pricing,#faq) [class*="text-nanil-champagne"]{color:#1f6f63!important}
:is(#film,#voice,#focus,#pricing,#faq) .text-gradient{background:linear-gradient(120deg,#1f7a6c 0%,#1a6f78 50%,#2b5f7a 100%)!important;
  -webkit-background-clip:text!important;background-clip:text!important}
[class*="text-nanil-violet"],[class*="text-nanil-magenta"]{color:#9cc6df!important}

/* 24.09. „Auf dem Handy werden die nicht groesser": Samsung schaltet mit „Animationen entfernen" bzw.
   Energiesparmodus prefers-reduced-motion ein -> die Kugeln standen still. Nanil soll lebendig sein:
   dann atmen sie trotzdem — langsamer, ohne Blitzen (sanfte, langsame Bewegung). */
@media (prefers-reduced-motion:reduce){
  .nanil-kugel{animation:nanil-kugel-atem 9s ease-in-out infinite!important}
  .nanil-duo-spiegel .nanil-kugel{animation-delay:-4.5s!important}
  .nanil-kugel-licht{animation:nanil-kugel-licht 18s linear infinite!important}
  .nanil-kugel-licht::after{animation:nanil-funke 5s ease-in-out infinite!important}
  .nanil-duo-item::before{animation:nanil-halo 9s ease-in-out infinite!important}}

/* 24.09. NANIL-Erkennungszeichen wie im Logo: Puls-Linie (dauerhaft sichtbar) + wandernder Lichtschlag,
   der in den leuchtenden Logo-Punkt muendet — der Punkt leuchtet auf, wenn der Schlag ankommt. */
.nanil-puls{position:absolute;left:6%;top:30%;width:88%;height:40%;overflow:visible;pointer-events:none;z-index:2}
.nanil-puls path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.nanil-puls .np-basis{stroke:rgba(244,255,252,.72);stroke-width:2.2;
  filter:drop-shadow(0 0 1.5px #1f7a6c) drop-shadow(0 0 5px rgba(47,148,131,.8))}
.nanil-puls .np-schlag{stroke:#ffffff;stroke-width:3.2;stroke-dasharray:46 154;
  animation:nanil-puls-lauf 2.6s cubic-bezier(.45,.05,.55,.95) infinite;
  filter:drop-shadow(0 0 2px #7fe3d8) drop-shadow(0 0 8px #2f9483) drop-shadow(0 0 14px rgba(127,227,216,.9))}
.nanil-puls .np-punkt{fill:#eafffb;animation:nanil-punkt 2.6s ease-in-out infinite;transform-origin:72px 22px;
  filter:drop-shadow(0 0 3px #7fe3d8) drop-shadow(0 0 9px #2f9483) drop-shadow(0 0 16px rgba(127,227,216,.95))}
.nanil-puls .np-hof{fill:rgba(127,227,216,.28);animation:nanil-hof 2.6s ease-out infinite;transform-origin:72px 22px}
.nanil-duo-spiegel .nanil-puls :is(.np-schlag,.np-punkt,.np-hof){animation-delay:-1.3s}
@keyframes nanil-puls-lauf{from{stroke-dashoffset:200}to{stroke-dashoffset:0}}
@keyframes nanil-punkt{0%,70%{transform:scale(.85);opacity:.75}86%{transform:scale(1.45);opacity:1}100%{transform:scale(.85);opacity:.75}}
@keyframes nanil-hof{0%,72%{transform:scale(.6);opacity:0}86%{transform:scale(1.2);opacity:.9}100%{transform:scale(2.1);opacity:0}}

/* ===== 24.09. RUHIGE FASSUNG (Nazannil: „ist das zu übertrieben?“ → ja, sieben Bewegungen je Kugel).
   Ein gemeinsamer Takt: die Kugel atmet in 7 s, und EIN Pulsschlag pro Atemzug läuft in den Logo-Punkt.
   Kein zweiter funkelnder Punkt mehr (der Logo-Punkt ist der eine Lichtpunkt), Sterne still, Licht langsamer. ===== */
.nanil-kugel-licht::after{display:none!important}
.nanil-kugel-licht{animation-duration:26s!important}
.nanil-duo-spiegel .nanil-kugel-licht{animation-duration:30s!important}
.nanil-duo-item::after{animation:none!important;opacity:.5!important}
.nanil-kugel{animation:nanil-kugel-atem 7s ease-in-out infinite!important}
.nanil-duo-item::before{animation:nanil-halo 7s ease-in-out infinite!important}
.nanil-puls .np-schlag{animation:nanil-puls-atem 7s ease-in-out infinite!important}
.nanil-puls .np-punkt{animation:nanil-punkt-atem 7s ease-in-out infinite!important}
.nanil-puls .np-hof{animation:nanil-hof-atem 7s ease-out infinite!important}
.nanil-duo-spiegel .nanil-kugel,.nanil-duo-spiegel::before,
.nanil-duo-spiegel .nanil-puls .np-schlag,.nanil-duo-spiegel .nanil-puls .np-punkt,.nanil-duo-spiegel .nanil-puls .np-hof{animation-delay:-3.5s!important}
@keyframes nanil-puls-atem{0%,8%{stroke-dashoffset:200;opacity:0}14%{opacity:1}46%{stroke-dashoffset:0;opacity:1}58%,100%{stroke-dashoffset:0;opacity:0}}
@keyframes nanil-punkt-atem{0%,40%{transform:scale(.85);opacity:.7}50%{transform:scale(1.4);opacity:1}66%,100%{transform:scale(.85);opacity:.7}}
@keyframes nanil-hof-atem{0%,42%{transform:scale(.6);opacity:0}50%{transform:scale(1.2);opacity:.85}68%,100%{transform:scale(2);opacity:0}}