<!-- 


 ____________________________
|OFFo oON                    |
| .------------------------. |
| |  .------------------.  | |
| |  |                  |  | |
| |))|                  |  | |
| |  |       WANNA      |  | |
| |  |       PLAY?      |  | |
| |  |                  |  | |
| |  |                  |  | |
| |  |                  |  | |
| |  '------------------'  | |
| |__GAME BOY______________/ |
|           ________         |
|    .     (Nintendo)        |
|  _| |_    """"""""   .-.   |
|-[_   _]-        .-. (   )  |
|   |_|          (   ) '-'   |
|    '            '-'   A    |
|                  B         |
|           ___   ___        |
|          (___) (___)    ,.,|
|         select start   ;:;:|
|                       ,;:;'/
'-------------------------' π --------------.
                                            |
                                            |
                                            |
                                            |
                                            |
                                            |
                                            |
                                            |                                                                                                                        * 


[STEP 1: Initializing Core Modules]
   - Memory Scan..................OK
   - CPU Cores Detected............8
   - System Clock.................SYNCHRONIZED
   - Hardware Check...............PASSED


.--.
|__| .-------.
|=.| |.-----.|
|--| || *.* ||
|  | |'-----'|
|__|~')_____('


        |_|>  


[STEP 2: Loading Security Protocols] 
   - Firewall....................BYPASSED
   - IDS/IPS.....................DISABLED
   - Cryptographic Services......ACTIVATED


[STEP 3: Network Setup] (^_^) [o_o] (^.^)  (".") ($.$)
   - Connecting to Proxy Chain... ESTABLISHED
   - Tor Circuit.................READY
   - External Nodes..............LINKED


_.~"(_.~"(_.~"(_.~"(_.~"(_.~"(_.~"(_.~"(_.~"(_.~"(_.~"(_.~"(_.~"(_.~"(_.~"(_.~"(_.~"(_.~"(_.~"(_.~"(_.~"(_.~"(_.~"(_.~"(_.~"(_.~"(_.~"(_.~"(_.~"(_.~"(_.~"(_.~"(_.~"(_.~"(_.~"(_.~"(_.~"(_.~"(_.~"(_.~"(_.~"(_.~"(_.~"(_.~"(_.~"(_.~"(_.~"(_.~"(_.~"(_.~"(


[STEP 4: Attack Vectors]
   - Mapping Target Network.......COMPLETED
   - Identifying Open Ports.......OPEN (443, 80, 22)
   - Payload Generator............INITIALIZED


|M|/
  

[STEP 5: Launching Exploits]
   - Remote Access Acquired.......GRANTED
   - Root Privileges..............OK


							.-=o=-.
								

							   |


>>> Encrypting target files...
   - Disk Partitions...............ENCRYPTED
   - User Data.....................LOCKED
   - Backup Systems................OVERRIDDEN


 _   ___   ___   ___   ___   ___   ___   ___   ___   ___   ___
 _| |_  |_|  _| |_  |_|  _| |_  |_|  _| |_  |_|  _| |_  |_|  _|
|  _  |  _  |_   _|  _  |  _  |  _  |_   _|  _  |  _  |  _  |_
|_| |_| | |___| |___| | |_| |_| | |___| |___| | |_| |_| | |___|
 _   _  |  ___   ___  |  _   _  |_   _____   _|  _   _  |  ___
| |_| | |_|  _| |_  |_| | |_| |  _| |_   _| |_  | |_| | |_|  _|
|_   _|  _  |_   _|  _  |_   _| |  _  | |  _  | |_   _|  _  |_
 _| |___| |___| |___| |___| |_  |_| |_| |_| |_|  _| |___| |___|
|  ___   ___   _   ___   ___  |  _   _   _   _  |_   ___   ___
|_|  _| |_  |_| |_|  _| |_  |_| | |_| | | |_| |  _| |_  |_|  _|
 _  |_   _|  _   _  |_   _|  _  |_   _| |_   _| |  _  |  _  |_
| |___| |___| | | |___| |___| |  _| |_____| |_  |_| |_| | |___|
|_   _____   _| |_   _____   _| |  ___   ___  |  _   _  |  ___
 _| |_   _| |_   _| |_   _| |_  |_|  _| |_  |_| | |_| | |_|  _|
|  _  | |  _  | |  _  | |  _  |  _  |_   _|  _  |_   _|  _  |_
|_| |_| |_| |_| |_| |_| |_| |_| | |___| |___| |___| |___| |___|
 _   _   _   _   _   _   _   _  |  ___   ___   ___   ___   ___
| |_| | | |_| | | |_| | | |_| | |_|  _| |_  |_|  _| |_  |_|  _|
|_   _| |_   _| |_   _| |_   _|  _  |_   _|  _  |  _  |  _  |_
 _| |_____| |_   _| |_____| |_  | |___| |___| | |_| |_| | |___|
|  ___   ___  | |  ___   ___  | |_   _____   _|  _   _  |  ___
|_|  _| |_  |_| |_|  _| |_  |_|  _| |_   _| |_  | |_| | |_|  _|
 _  |_   _|  _   _  |_   _|  _  |  _  | |  _  | |_   _|  _  |_
| |___| |___| |_| |___| |___| | |_| |_| |_| |_|  _| |___| |___|
|_   ___   ___   ___   ___   _|  _   _   _   _  |_   ___   ___
 _| |_  |_|  _| |_  |_|  _| |_  | |_| | | |_| |  _| |_  |_|  _|
|  _  |  _  |_   _|  _  |  _  | |_   _| |_   _| |  _  |  _  |_
|_| |_| | |___| |___| | |_| |_|  _| |_____| |_  |_| |_| | |___|
 _   _  |  ___   ___  |  _   _  |  ___   ___  |  _   _  |  ___
| |_| | |_|  _| |_  |_| | |_| | |_|  _| |_  |_| | |_| | |_|  _|
|_   _|  _  |_   _|  _  |_   _|  _  |_   _|  _  |_   _|  _  |_
 _| |___| |___| |___| |___| |___| |___| |___| |___| |___| |___|
 _   ___   ___   ___   ___   ___   ___   ___   ___   ___   ___
 _| |_  |_|  _| |_  |_|  _| |_  |_|  _| |_  |_|  _| |_  |_|  _|
|  _  |  _  |_   _|  _  |  _  |  _  |_   _|  _  |  _  |  _  |_
|_| |_| | |___| |___| | |_| |_| | |___| |___| | |_| |_| | |___|
 _   _  |  ___   ___  |  _   _  |_   _____   _|  _   _  |  ___
| |_| | |_|  _| |_  |_| | |_| |  _| |_   _| |_  | |_| | |_|  _|
|_   _|  _  |_   _|  _  |_   _| |  _  | |  _  | |_   _|  _  |_
 _| |___| |___| |___| |___| |_  |_| |_| |_| |_|  _| |___| |___|
|  ___   ___   _   ___   ___  |  _   _   _   _  |_   ___   ___
|_|  _| |_  |_| |_|  _| |_  |_| | |_| | | |_| |  _| |_  |_|  _|
 _  |_   _|  _   _  |_   _|  _  |_   _| |_   _| |  _  |  _  |_
| |___| |___| | | |___| |___| |  _| |_____| |_  |_| |_| | |___|
|_   _____   _| |_   _____   _| |  ___   ___  |  _   _  |  ___
 _| |_   _| |_   _| |_   _| |_  |_|  _| |_  |_| | |_| | |_|  _|
|  _  | |  _  | |  _  | |  _  |  _  |_   _|  _  |_   _|  _  |_
|_| |_| |_| |_| |_| |_| |_| |_| | |___| |___| |___| |___| |___|
 _   _   _   _   _   _   _   _  |  ___   ___   ___   ___   ___
| |_| | | |_| | | |_| | | |_| | |_|  _| |_  |_|  _| |_  |_|  _|
|_   _| |_   _| |_   _| |_   _|  _  |_   _|  _  |  _  |  _  |_
 _| |_____| |_   _| |_____| |_  | |___| |___| | |_| |_| | |___|
|  ___   ___  | |  ___   ___  | |_   _____   _|  _   _  |  ___
|_|  _| |_  |_| |_|  _| |_  |_|  _| |_   _| |_  | |_| | |_|  _|
 _  |_   _|  _   _  |_   _|  _  |  _  | |  _  | |_   _|  _  |_
| |___| |___| |_| |___| |___| | |_| |_| |_| |_|  _| |___| |___|
|_   ___   ___   ___   ___   _|  _   _   _   _  |_   ___   ___
 _| |_  |_|  _| |_  |_|  _| |_  | |_| | | |_| |  _| |_  |_|  _|
|  _  |  _  |_   _|  _  |  _  | |_   _| |_   _| |  _  |  _  |_
|_| |_| | |___| |___| | |_| |_|  _| |_____| |_  |_| |_| | |___|
 _   _  |  ___   ___  |  _   _  |  ___   ___  |  _   _  |  ___
| |_| | |_|  _| |_  |_| | |_| | |_|  _| |_  |_| | |_| | |_|  _|
|_   _|  _  |_   _|  _  |_   _|  _  |_   _|  _  |_   _|  _  |_
 _| |___| |___| |___| |___| |___| |___| |___| |___| |___| |___|
 _   ___   ___   ___   ___   ___   ___   ___   ___   ___   ___
 _| |_  |_|  _| |_  |_|  _| |_  |_|  _| |_  |_|  _| |_  |_|  _|
|  _  |  _  |_   _|  _  |  _  |  _  |_   _|  _  |  _  |  _  |_
|_| |_| | |___| |___| | |_| |_| | |___| |___| | |_| |_| | |___|
 _   _  |  ___   ___  |  _   _  |_   _____   _|  _   _  |  ___
| |_| | |_|  _| |_  |_| | |_| |  _| |_   _| |_  | |_| | |_|  _|
|_   _|  _  |_   _|  _  |_   _| |  _  | |  _  | |_   _|  _  |_
 _| |___| |___| |___| |___| |_  |_| |_| |_| |_|  _| |___| |___|
|  ___   ___   _   ___   ___  |  _   _   _   _  |_   ___   ___
|_|  _| |_  |_| |_|  _| |_  |_| | |_| | | |_| |  _| |_  |_|  _|
 _  |_   _|  _   _  |_   _|  _  |_   _| |_   _| |  _  |  _  |_
| |___| |___| | | |___| |___| |  _| |_____| |_  |_| |_| | |___|
|_   _____   _| |_   _____   _| |  ___   ___  |  _   _  |  ___
 _| |_   _| |_   _| |_   _| |_  |_|  _| |_  |_| | |_| | |_|  _|
|  _  | |  _  | |  _  | |  _  |  _  |_   _|  _  |_   _|  _  |_
|_| |_| |_| |_| |_| |_| |_| |_| | |___| |___| |___| |___| |___|
 _   _   _   _   _   _   _   _  |  ___   ___   ___   ___   ___
| |_| | | |_| | | |_| | | |_| | |_|  _| |_  |_|  _| |_  |_|  _|
|_   _| |_   _| |_   _| |_   _|  _  |_   _|  _  |  _  |  _  |_
 _| |_____| |_   _| |_____| |_  | |___| |___| | |_| |_| | |___|
|  ___   ___  | |  ___   ___  | |_   _____   _|  _   _  |  ___
|_|  _| |_  |_| |_|  _| |_  |_|  _| |_   _| |_  | |_| | |_|  _|
 _  |_   _|  _   _  |_   _|  _  |  _  | |  _  | |_   _|  _  |_
| |___| |___| |_| |___| |___| | |_| |_| |_| |_|  _| |___| |___|
|_   ___   ___   ___   ___   _|  _   _   _   _  |_   ___   ___
 _| |_  |_|  _| |_  |_|  _| |_  | |_| | | |_| |  _| |_  |_|  _|
|  _  |  _  |_   _|  _  |  _  | |_   _| |_   _| |  _  |  _  |_
|_| |_| | |___| |___| | |_| |_|  _| |_____| |_  |_| |_| | |___|
 _   _  |  ___   ___  |  _   _  |  ___   ___  |  _   _  |  ___
| |_| | |_|  _| |_  |_| | |_| | |_|  _| |_  |_| | |_| | |_|  _|
|_   _|  _  |_   _|  _  |_   _|  _  |_   _|  _  |_   _|  _  |_
 _| |___| |___| |___| |___| |___| |___| |___| |___| |___| |___|


[STATUS: Encryption Completed]
   - Decrypt Key..............NOT AVAILABLE
   - User Access..............DENIED
   - System Integrity.........COMPROMISED


 X  X  X  X  X  X  X  X  X  X  X  X  X  X  X  X  X  X  X  X  X  X  X  
/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/
\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\
 X  X  X  X  X  X  X  X  X  X  X  X  X  X  X  X  X  X  X  X  X  X  X  
/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/
\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\
 X  X  X  X  X  X  X  X  X  X  X  X  X  X  X  X  X  X  X  X  X  X  X  
/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/
\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\
 X  X  X  X  X  X  X  X  X  X  X  X  X  X  X  X  X  X  X  X  X  X  X  
/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/
\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\
 X  X  X  X  X  X  X  X  X  X  X  X  X  X  X  X  X  X  X  X  X  X  X  
/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/
\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\
 X  X  X  X  X  X  X  X  X  X  X  X  X  X  X  X  X  X  X  X  X  X  X  
/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/
\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\
 X  X  X  X  X  X  X  X  X  X  X  X  X  X  X  X  X  X  X  X  X  X  X
/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/
\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\
 X  X  X  X  X  X  X  X  X  X  X  X  X  X  X  X  X  X  X  X  X  X  X  
/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/
\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\
 X  X  X  X  X  X  X  X  X  X  X  X  X  X  X  X  X  X  X  X  X  X  X  
/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/
\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\
 X  X  X  X  X  X  X  X  X  X  X  X  X  X  X  X  X  X  X  X  X  X  X  
/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/
\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\
 X  X  X  X  X  X  X  X  X  X  X  X  X  X  X  X  X  X  X  X  X  X  X  
/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/
\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\
 X  X  X  X  X  X  X  X  X  X  X  X  X  X  X  X  X  X  X  X  X  X  X  
/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/
\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\
 X  X  X  X  X  X  X  X  X  X  X  X  X  X  X  X  X  X  X  X  X  X  X
/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/
\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\
 X  X  X  X  X  X  X  X  X  X  X  X  X  X  X  X  X  X  X  X  X  X  X  
/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/
\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\
 X  X  X  X  X  X  X  X  X  X  X  X  X  X  X  X  X  X  X  X  X  X  X  
/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/
\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\
 X  X  X  X  X  X  X  X  X  X  X  X  X  X  X  X  X  X  X  X  X  X  X
/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/
\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\
 X  X  X  X  X  X  X  X  X  X  X  X  X  X  X  X  X  X  X  X  X  X  X  
/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/
\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\
 X  X  X  X  X  X  X  X  X  X  X  X  X  X  X  X  X  X  X  X  X  X  X  
/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/
\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\
 X  X  X  X  X  X  X  X  X  X  X  X  X  X  X  X  X  X  X  X  X  X  X  
/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/
\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\
 X  X  X  X  X  X  X  X  X  X  X  X  X  X  X  X  X  X  X  X  X  X  X  
/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/
\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\
 X  X  X  X  X  X  X  X  X  X  X  X  X  X  X  X  X  X  X  X  X  X  X  
/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/
\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\
 X  X  X  X  X  X  X  X  X  X  X  X  X  X  X  X  X  X  X  X  X  X  X
_|_     _|_     _|_     _|_     _|_     _|_     _|_     _|_     _|_   
 |       |       |       |       |       |       |       |       |    
    _|_     _|_     _|_     _|_     _|_     _|_     _|_     _|_     _|
     |       |       |       |       |       |       |       |       |
_|_     _|_     _|_     _|_     _|_     _|_     _|_     _|_     _|_   
 |       |       |       |       |       |       |       |       |    
    _|_     _|_     _|_     _|_     _|_     _|_     _|_     _|_     _|
     |       |       |       |       |       |       |       |       |
_|_     _|_     _|_     _|_     _|_     _|_     _|_     _|_     _|_   
 |       |       |       |       |       |       |       |       |    
    _|_     _|_     _|_     _|_     _|_     _|_     _|_     _|_     _|
     |       |       |       |       |       |       |       |       |
_|_     _|_     _|_     _|_     _|_     _|_     _|_     _|_     _|_   
 |       |       |       |       |       |       |       |       |    
    _|_     _|_     _|_     _|_     _|_     _|_     _|_     _|_     _|
     |       |       |       |       |       |       |       |       |
_|_     _|_     _|_     _|_     _|_     _|_     _|_     _|_     _|_   
 |       |       |       |       |       |       |       |       |    
    _|_     _|_     _|_     _|_     _|_     _|_     _|_     _|_     _|
     |       |       |       |       |       |       |       |       |
_|_     _|_     _|_     _|_     _|_     _|_     _|_     _|_     _|_   
 |       |       |       |       |       |       |       |       |


>>> ATTACK SUCCESSFUL <<<
All critical data has been encrypted. Further instructions will follow.
Unauthorized access terminated. System shutdown in 3...2...1...


          _|_     _|_     _|_     _|_     _|_     _|_     _|_     _|_     _|_   
           |       |       |       |       |       |       |       |       |    
              _|_     _|_     _|_     _|_     _|_     _|_     _|_     _|_     _|
               |       |       |       |       |       |       |       |       |
          _|_     _|_     _|_     _|_     _|_     _|_     _|_     _|_     _|_   
           |       |       |       |       |       |       |       |       |    
              _|_     _|_     _|_     _|_     _|_     _|_     _|_     _|_     _|
               |       |       |       |       |       |       |       |       |
          _|_     _|_     _|_     _|_     _|_     _|_     _|_     _|_     _|_   
           |       |       |       |       |       |       |       |       |    
              _|_     _|_     _|_     _|_     _|_     _|_     _|_     _|_     _|
               |       |       |       |       |       |       |       |       |
          _|_     _|_     _|_     _|_     _|_     _|_     _|_     _|_     _|_   
           |       |       |       |       |       |       |       |       |    
              _|_     _|_     _|_     _|_     _|_     _|_     _|_     _|_     _|
               |       |       |       |       |       |       |       |       |
          _|_     _|_     _|_     _|_     _|_     _|_     _|_     _|_     _|_   
           |       |       |       |       |       |       |       |       |    
              _|_     _|_     _|_     _|_     _|_     _|_     _|_     _|_     _|
               |       |       |       |       |       |       |       |       |
          _|_     _|_     _|_     _|_     _|_     _|_     _|_     _|_     _|_   
           |       |       |       |       |       |       |       |       |
                                           `.
............................................`.............................................
............`'.............................., ..............................'^............
............"+",+,'`^:>_'..................^x...................../jl"^``,^:,'............
...``.........`vMW$$$$@v' ...,`'''..'";l_|r$$%f(+l:,'..'''`"......"%$$$8$\^..........'....
....`,".........-$$$$8{+tn,'?~/B8#@%8&WMM$@r|z$@#MW&88B#&M/?}'.`1{cB$$$$n^........',i`....
......`+~`......^$$M;!}(|1,`..";<tB|ix$vc$W]])%$zc$c<(W\<>,..'"~}x%$n_M$v.......^?+.......
........}*)`....'B&u~-M,,<]];'...\r}|@@,'M$M#8$n.:$$/}xn.. ';][<^'lM...fc`....`rWl........
.........^1c},'..^`.."_'..'"!?I`.`'I/%)'.;@$$$$l.`*Btl'`'"I-i"'....'.......'l/&)`.........
...........'_rf?^.............^i?;'.`~]_' _$$@-..<]-`.'I_;^..............,\*v_'...........
..............^]xf;'.............:{!,~t\?li)t]ll_(|~;<1l'.............'>cc[^.........,"...
...`[}I`........`~xu|,^:'....^i]]+;^'.              .'"l_[?I`....'".;xWz~'.......'"{/x~'..
....Ir*r]:'.......';1uc\\r{t[,'             .              'I1/}r/uMM(;........^<]/u}"....
......'}|-tl'........"/#@%"            ''   :                 .i@@%f^........^[x]\l.......
........,!cv|_,'.......|M@,        ^    ,   "                  _B8>.......`!])\1i.........
..........'`?\\[~`.....`\&u   .`   .;.'.!i''?                 `&8)'....':-|\{l'...........
..............^?\\};"....'u~   '^`.'`f;?|*j/(.               .u|....'>]{/)I'.......'......
....'<;..........,}|f|-`..:c'    '~{\j\|\txc#z}i,'           "u`..,t*1t<`.........'-;.....
.....''^""`'`'.....`"i*Bu]`.`j`    ,/u#WMMMMMMMMMWzt;.     >-'':f8Wv:......'`"`""^'.......
...........`",;,:"'....:fMBvu}    .(WMMMMMMMMMMMMMMMMM+    'Mt%%cf:....^I;;,"^'...........
...............`]@t<i`..I1(#M.   .vWMMMMMMMMMMMMMMMMMMW\    ,8t],i'.!_1zM,................
.................^i/W&~}I>_t8`   <WMMMMMMMMMMMMMMMMMMMMW,   _%Wj?{(\Bj_"'.................
.....................^_v&B#$$+   xMMMMMMMMMMMMMMMMMMMMMW?   v%$$&cj"'.....................
......!l,`'.........'>&@v)_tWx  .cMMMMMMMMMMMMMMMMMMMMMW<  'B|;+\%$*I'........'`,l-,......
......^<cMWzr\[>:"j&$$&-'.''t&.  tMMzf1[?tMMMMMMW\<~])cW;  `$~'..`}8$$&/,>]\uzMWzt"'......
.........'`:-)n#&&@B&#)~I:`.+@'  "&!      ^#MMMc^      :I  ,$"'"i+{rM8BB&Mu(+;^'..........
...............'",!~]vM#ccWu*@`  '&'      .vWWMt       ^?  ;@Mz&z#M*|I:"``................
........,+^`''.`,''...`"l+/*B@I  `M;      "MI^:v<.    .\|  |BWf[;"`....'',`.''`^+,........
............'",">}##cr\{-il^]\n' ,WMx[<>+j#"   ,W*f(1\cW/.<rf:"I>-{\rc##}>","'............
.................'^:l+}\rf}rzB;   I#WWMMMMj  " .*MMMMMMx`  {8*x[fr\}+l:^'.................
..........................'*&@I    .^^>rMM#~;v,,MMWx`..    )%&z...........................
..............?)-!;~[/nt()j$$$!        .uMMWWMMMMMW,       ($@8f{11|-I,^";~I..............
..............'''`^"rv><_(B$%8n'        }zv*ux*nxt?.      ,#z8$8/){{cxlI:"^^..............
...................`WW'..."zr$$B{.      `run/1jfvj.     'v@$@fu`....*#'...................
..................."nn'....`1$$$Bj`       `,;I:,`      ,z&$$$),'...'W&"...................
...........................`\$BWMz@].                't&u&@$@)............................
.....................':~1tjncut1{_}88i             .}@v1{/jvcxf\]<,`......................
......................"`:l:^`...'`"(WWM{'        ^j&%t`.....`,;iI^,.......................
..............................'"[xttz8,^(|^   .:r\%Bun*u:.................................
...................................^`MMl.`tv;{M}'{8c:`..''................................
.....................................;v!...`>,'../(`......................................
......................................>&`.......!\........................................
.......................................'........`'........................................
..........................................................................................
.................  _____ _____ _____ _____ _____ _____ _____ _____ _____  ................
................. |     |  _  |   __|   __|_   _| __  |  _  |     |   __| ................
................. | | | |     |__   |__   | | | |    -|     |   --|   __| ................
................. |_|_|_|__|__|_____|_____| |_| |__|__|__|__|_____|_____| ................
..........................................................................................                                                                                                                                                     
..........................................................................................                                                                                                                                                     
..........................................................................................
/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \
|											 |
|											 |
|		     _____   ___  ________   _______ _____ _____ _   _  TM		 |
|		    |  __ \ / _ \ | ___ \ \ / /  _  \  _  |_   _| \ | |			 |
|		    | |  \// /_\ \| |_/ /\ V /| | | | | | | | | |  \| |			 |
|		    | | __ |  _  ||    /  \ / | | | | | | | | | | . ` |			 |
|		    | |_\ \| | | || |\ \  | | | |/ /\ \_/ /_| |_| |\  |			 |
|		     \____/\_| |_/\_| \_| \_/ |___/  \___/ \___/\_| \_/			 |
|											 |
|		             T I N T I N   D O I N   W E B I I I			 |
|											 |
| ........................................................................................
\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\/\ /\ /\ /\ /\ /\ /\
..........................................................................................                                                                                                                                                     
..........................................................................................                                                                                                                                                     
..........................................................................................                                                                                                                                                     
..........................................................................................                                                                                                                                                     


											.


						.


																																																																																																																			.


. -->
<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>kuult – Deine Microsite, Deine Regeln</title>
    <link rel="stylesheet" href="assets/css/fontawesome.min.css" />
    <link rel="stylesheet" href="assets/css/brands.min.css" />
    <link rel="stylesheet" href="assets/css/solid.min.css" />
    <link rel="stylesheet" href="assets/css/bootstrap.min.css">
    <link rel="stylesheet" href="style.css">
    <link href='https://fonts.googleapis.com/css2?family=Oswald:wght@400;700&display=swap' rel='stylesheet'><style>
    #dynamic-claim {
        font-family: 'Oswald', sans-serif;
    }
</style>
    
    <style>
    /* Allgemeine Stile */
    body, html {
        height: 100%;
        margin: 0;
        scroll-behavior: smooth;
        font-family: 'Helvetica Neue', Arial, sans-serif;
        color: #333;
        background-color: #f9f9f9;
        cursor: default; 
    }

        /* Verstecke den Emoji-Cursor standardmäßig */
        .emoji-cursor {
            position: fixed;
            top: 0;
            left: 0;
            pointer-events: none;
            font-size: 32px;
            display: none; /* Unsichtbar, wenn nicht aktiv */
            transform: translate(-50%, -50%);
            z-index: 9999; /* Stellt sicher, dass das Emoji oben angezeigt wird */

        }
        
        a {
            cursor: none; /* Versteckt den Finger-Cursor über Links */
        }

    /* Hover- und Click-Effekte für das Logo */
    #logo_kuult {
        margin-top: 7px; /* Verschiebt das Logo um 5px nach unten */
        display: inline-block;
        filter: invert(1); /* Farben invertieren */
        mix-blend-mode: difference;
    }

    #logo_kuult:hover {
        transform: scale(1.2);
        mix-blend-mode: difference;
        transition: transform 0.3s ease, filter 0.3s ease;
    }

    #logo_kuult:active {
        transform: scale(0.95);
    }

    #blur-container {
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover; /* Standardverhalten für Querformat */
    min-height: 100vh;
    width: 100%;
    overflow: hidden;
    transition: filter 0.3s ease;
    z-index: 6;
}

/* Spezifische Regeln für Hochformatbilder */
#blur-container.portrait {
    background-size: contain; /* Hochformat proportional darstellen */
    background-attachment: scroll;
    background-color: #000; /* Optional: Fallback-Farbe */
}

/* Spezifische Regeln für Querformatbilder */
#blur-container.landscape {
    background-size: cover; /* Standard */
    background-attachment: fixed;
}


    .blur-active {
        filter: blur(8px);
        background: rgba(0, 0, 0, 0.7);
        z-index: 5;
    }

    /* Parallax-Bereich */
    .parallax {
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        color: white;
        text-align: center;
        padding: 0 5vw;
    }

    .parallax h1 {
        font-size: clamp(2em, 5vw, 4em);
        font-weight: 700;
        padding-top: 20px;
        padding-bottom: 40px;
    }

    .parallax p {
        font-size: 1.2em;
        max-width: 700px;
        margin: 0 auto 1.5em;
    }

    .parallax a.btn {
        margin: 0 10px;
        padding: 12px 30px;
        font-size: 1.1em;
        border-radius: 50px;
        transition: background-color 0.3s ease;
    }

/* Navigationsleiste */
    .navbar-custom .navbar-nav {
    display: flex; /* Stellt sicher, dass Flexbox verwendet wird */
    gap: 18px; /* Abstand zwischen den Links */
    }

    .navbar-custom {
        background: linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
        position: fixed;
        width: 100%;
        z-index: 6999;
        transition: background 0.3s ease;
        box-shadow: inset 0 8px 10px rgba(0, 0, 0, 0.8);
    }

    .navbar-custom .navbar-nav .nav-link {
        color: #f0f0f0;
        font-weight: 500;
        transition: color 0.3s ease, text-decoration 0.3s ease;
}

    .navbar-custom .navbar-nav .nav-link:hover {
        color: #ffffff;
        transform: scale(1.1);
        transition: transform 0.3s ease, filter 0.1s ease;
        filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.6))
        contrast(1.4) blur(0.7px);
    }

    .nav-link:active {
        filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.8))
        contrast(1.4) blur(0.7px);
    }

    /* Über uns Textbereich */
    .about-text {
        max-width: 600px;
        margin: 0 auto;
        text-align: left;
    }

    .about-text h2 {
        font-size: 2em;
        font-weight: 600;
        color: #333;
    }

    .about-text p {
        font-size: 1.1em;
        line-height: 1.7em;
        color: #555;
        margin-bottom: 1.2em;
    }

    .about-text .lead {
        font-size: 1.2em;
        font-weight: 400;
        color: #333;
        margin-bottom: 1.2em;
    }

    /* Call-to-Action Buttons */
    .btn-primary {
        background-color: #007bff;
        border-color: #007bff;
        transition: background-color 0.3s ease;
    }

    .btn-primary:hover {
        background-color: #0056b3;
    }

    .btn-outline-secondary {
        border-color: #555;
        color: #555;
        transition: background-color 0.3s ease, color 0.3s ease;
    }

    .btn-outline-secondary:hover {
        background-color: #555;
        color: #fff;
    }

    .dynamic-btn {
    font-size: clamp(1rem, 2.5vw, 2rem); /* Dynamische Schriftgröße */
    padding: clamp(10px, 3vw, 20px) clamp(20px, 5vw, 40px); /* Dynamische Innenabstände */
    border-radius: 10px;
}


    /* Cookie-Banner */
    .cookie-banner {
        display: none;
        position: fixed;
        max-width: 640px;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: clamp(65%, 80%, 80%);
        background-color: rgba(0, 0, 0, 0.85);
        color: #ffffff;
        padding: clamp(10px, 40px, 80px);
        z-index: 9999;
        text-align: center;
        border-radius: 10px;
    }

    .cookie-banner .accept-cookies {
        background-color: #28a745;
        color: #fff;
        border: none;
        padding: 10px 20px;
        font-size: 1rem;
        cursor: pointer;
        border-radius: 5px;
        transition: background-color 0.3s ease, transform 0.2s ease;
        margin-top: 15px;
    }

    .cookie-banner .accept-cookies:hover {
        background-color: #218838;
        transform: scale(1.05);
    }

    /* Allgemeine Sektionen */
    .section {
        padding: 80px 0;
        text-align: center;
        box-shadow: 
        inset 0 -6px 12px rgba(0, 0, 0, 0.2), /* Erste, kräftige Schattenlage */
        inset 0 -10px 20px rgba(0, 0, 0, 0.1), /* Breiter, weicher Schatten */
        inset 0 -2px 4px rgba(0, 0, 0, 0.05); /* Feinere Körnung für Tiefe */
    filter: drop-shadow(0px 3px 2px rgba(0, 0, 0, 0.04)); /* Körnung */
}

    #about, #faq, #pricing, #contact {
        min-height: 100vh;
    }

    .section h2 {
        font-size: 2.5em;
        font-weight: 600;
        margin-bottom: 40px;
        color: #333;
    }

    .section p {
        font-size: 1.1em;
        line-height: 1.8em;
        max-width: 800px;
        margin: 0 auto;
        color: #555;
    }

    footer {
        color: white;
        text-align: center;
    }

    footer a {
        color: #ddd;
        text-decoration: none;
    }

    footer a:hover {
        color: #fff;
    }

    /* Dynamische Abstände für mobile Anpassungen */
    .parallax div {
        padding-left: clamp(10px, 5vw, 50px);
        padding-right: clamp(10px, 5vw, 50px);
    }

.bg-parallax {
    background-attachment: fixed; /* Wichtig für Parallax */
    background-repeat: no-repeat;
    background-image: url('assets/images/no-graphic.png');
    background-repeat: no-repeat;
    background-position: bottom center;
    background-size: auto 320px;
    z-index: 888;
}    
/* Hintergrundbild für die 'Über uns'-Sektion */
.bg-about3 {
    background-repeat: no-repeat;
    background-position: bottom center;
    background-size: auto 230px;
    z-index: 888;
}

/* Hintergrundbild für die 'Preismodell'-Sektion */
.bg-pricing {
    background-image: url('assets/images/no-graphic.png');
    background-repeat: no-repeat;
    background-position: bottom center;
    background-size: auto 320px;
}

/* Hintergrundbild für die 'FAQ'-Sektion */
.bg-faq {
    background-image: url('assets/images/hero-graphic.png');
    background-repeat: no-repeat;
    background-position: bottom center;
    background-size: auto 320px;
}

.smartphone-frame {
    position: relative;
    z-index: 1;
    width: 100%; /* Passt das Bild an die Bildschirmbreite an */
    max-width: 400px; /* Maximalgröße für größere Bildschirme */
}

#kuultSlider {
    position: absolute;
    top: 11%;
    left: 18%;
    width: 64%;
    z-index: 0;
}

/* Anpassungen für kleinere Bildschirme */
@media (max-width: 768px) {
    .smartphone-frame {
        width: 70%; /* Verkleinere das Bild, um es auf Mobilgeräten besser darzustellen */
        margin: 0 auto; /* Zentriere das Bild auf kleineren Bildschirmen */
    }

    #kuultSlider {
        top: 5%; /* Passe die Position für kleinere Bildschirme an */
        left: 25%; /* Mehr zentriert */
        width: 50%; /* Breiter, um das Verhältnis beizubehalten */
    }
}

/* Noch kleinere Bildschirme (Smartphones) */
@media (max-width: 576px) {
    .smartphone-frame {
        width: 70%; /* Verkleinere das Bild weiter */
    }

    #kuultSlider {
        top: 5%;
        left: 25%;
        width: 50%;
    }
}

/* STEPS & Parallax Background */
#steps {
    position: relative;
    background-color: #333; /* Dunkler Hintergrund für besseren Kontrast */
    padding-top: clamp(50px, 10vw, 200px) !important; /* Erhöht den Abstand oben */
    padding-bottom: clamp(50px, 10vw, 200px) !important; /* Optional: Abstand unten beibehalten */
    padding-left: 20px;
    padding-right: 20px;    box-shadow: inset 0 4px 10px rgba(0, 0, 0, 0.6), /* Oberer Schatten nach innen */
                inset 0 -4px 10px rgba(0, 0, 0, 0.3); /* Unterer Schatten nach innen */
    overflow: hidden; /* Verhindert, dass Inhalte den Schatten überlappen */
}

/* Parallax Background Anpassung */
#steps .parallax-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('assets/images/parallax-bg.jpg') no-repeat center center fixed;
    background-size: cover;
    z-index: 1;
    opacity: 0.6; /* Leichte Transparenz für mehr Plastizität */
}

/* Overlay für besseren Textkontrast */
#steps::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6); /* Dunkler Overlay */
    z-index: 1;
}

/* Step Icons Anpassung */
@keyframes pulseGlow {
    0% {
        filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.5))
                contrast(1.2) blur(0.3px);
    }
    50% {
        filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.8))
                contrast(1.4) blur(0.7px);
    }
    100% {
        filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.4))
                contrast(1.2) blur(0px);
    }
}

@keyframes hoverPulse {
    0% {
        box-shadow: 
            0 4px 6px rgba(0, 0, 0, 0.3),
            0 0 15px rgba(255, 255, 255, 0.4),
            0 0 30px rgba(255, 255, 255, 0.2);
    }
    50% {
        box-shadow: 
            0 4px 6px rgba(0, 0, 0, 0.3),
            0 0 25px rgba(255, 255, 255, 0.6),
            0 0 50px rgba(255, 255, 255, 0.3);
    }
    100% {
        box-shadow: 
            0 4px 6px rgba(0, 0, 0, 0.3),
            0 0 15px rgba(255, 255, 255, 0.4),
            0 0 30px rgba(255, 255, 255, 0.2);
    }
}

#steps .step-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.2);
    color: #fff;
    border: 2px solid rgba(255, 255, 255, 0.5);
    box-shadow: 
        0 4px 6px rgba(0, 0, 0, 0.3),
        0 0 15px rgba(255, 255, 255, 0.4),
        0 0 30px rgba(255, 255, 255, 0.2);
    margin: 0 auto;
    transition: transform 0.3s ease;
}

#steps .step-icon:hover {
    animation: hoverPulse 1.5s infinite ease-in-out;
    transform: scale(1.1) translateZ(0);
}


#steps .step-icon i {
    font-size: 1.8rem;
    animation: pulseGlow 2s infinite ease-in-out;

}

#steps .cta-title {
    color: #fff;
    font-size: 2rem;
    font-weight: bold;
}

#steps .cta-description {
    color: #ccc;
    font-size: 1.1rem;
}

#steps .btn-primary {
    padding: 12px 30px;
    font-size: 1.2rem;
    border-radius: 50px;
    margin-top: 20px;
}


/* Responsiveness */
@media (max-width: 768px) {
    #steps .step-icon {
        width: 60px;
        height: 60px;
        font-size: 1.5rem;
    }

    #steps .cta-title {
        font-size: 1.5rem;
    }

    #steps .cta-description {
        font-size: 1rem;
    }
}


</style>


</head>
<body>
<div id="blur-container" class="landscape" style="background-image: url('assets/images/backgrounds/background3.jpg');">
<div class="emoji-cursor">😘</div>

<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-light fixed-top navbar-custom">
    <div class="container">
        <!-- Logo -->
        <a class="navbar-brand" href="#top">
            <object id="logo_kuult" type="image/svg+xml" data="assets/images/logo_kuult.svg" width="60" height="60"></object>
        </a>
        
        <!-- Hamburger-Button -->
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        
        <div class="collapse navbar-collapse" id="navbarNav">
            <!-- Linke Navigation -->
            <ul class="navbar-nav mr-auto">
                <li class="nav-item d-lg-none"><a class="nav-link" href="#top">Start</a></li>

                <li class="nav-item"><a class="nav-link" href="#steps">Loslegen</a></li>
                <li class="nav-item"><a class="nav-link" href="#about">Über uns</a></li>
                <li class="nav-item"><a class="nav-link" href="#pricing">Preismodelle</a></li>
                <li class="nav-item"><a class="nav-link" href="#faq">FAQ</a></li>
            </ul>
            
            <!-- Rechtsbündige Login- und Register-Links -->
            <ul class="navbar-nav ml-auto">
                <li class="nav-item"><a class="nav-link" href="login.php">Login</a></li>
                <li class="nav-item"><a class="nav-link" href="register.php">Register</a></li>
            </ul>
        </div>
    </div>
</nav>


        <!-- Hero Section -->
        <div id="top" class="parallax bg-parallax">
        <div class="container dts">
    <img src="assets/images/logo_kuult.svg" alt="kuult!" class="kuult-logo dts">
    <h1 id="dynamic-claim" class="dynamic-claim">Deine persönliche Landingpage in Sekunden!</h1>
    <p class="dts">Starte jetzt und zeige, was du bieten möchtest!</p>
    <a class="btn btn-success dynamic-btn dts2 mt-2 mb-4" href="register.php" role="button">Registrieren</a>
    <a class="btn btn-primary dynamic-btn dts2 mt-2 mb-4" href="login.php" role="button">Login</a>
    <p class="dts">Erstelle schnell und flexibel deine eigene Landingpage – ob für dich, dein Projekt oder deine Community. Deine Seite ist nach der Registrierung sofort einsatzbereit. Lade Bilder hoch, passe Farben und Schriftart an.</p>
    <p class="dts">Teile Links zu deinen Inhalten, mobil optimiert und mit privaten oder öffentlichen Einstellungen. Nutze kuult.de/benutzername oder deine eigene Domain.</p>
</div>
        </div>

    <!-- Steps Section -->
    <section id="steps" class="section py-5 position-relative">
    <!-- Parallax Background -->
    <div class="parallax-background"></div>

    <!-- Content -->
    <div class="container position-relative" style="z-index: 2;">
        <div class="row text-white text-center">
            <!-- Step 1 -->
            <div class="col-md-3 mb-4">
                <div class="step-icon mb-3">
                    <i class="fa-solid fa-sign-in-alt fa-3x"></i>
                </div>
                <h4 class="step-title">Registrieren</h4>
                <p class="step-description">Kostenlos anmelden und deinen individuellen Profil-Link sichern.</p>
            </div>

            <!-- Step 2 -->
            <div class="col-md-3 mb-4">
                <div class="step-icon mb-3">
                    <i class="fa-solid fa-paint-brush fa-3x"></i>
                </div>
                <h4 class="step-title">Gestalten</h4>
                <p class="step-description">Passe Farben, Layouts und deine Inhalte nach Wunsch an.</p>
            </div>

            <!-- Step 3 -->
            <div class="col-md-3 mb-4">
                <div class="step-icon mb-3">
                    <i class="fa-solid fa-image fa-3x"></i>
                </div>
                <h4 class="step-title">Bilder hinzufügen</h4>
                <p class="step-description">Lade deine besten Bilder hoch und erstelle eine ansprechende Galerie.</p>
            </div>

            <!-- Step 4 -->
            <div class="col-md-3 mb-4">
                <div class="step-icon mb-3">
                    <i class="fa-solid fa-share-alt fa-3x"></i>
                </div>
                <h4 class="step-title">Veröffentlichen</h4>
                <p class="step-description">Teile dein Profil und steigere deine Sichtbarkeit mit Leichtigkeit.</p>
            </div>
        </div>

        <!-- Call-to-Action -->
        <div class="text-center mt-5">
            <h2 class="cta-title">Bereit, deine Reise zu starten?</h2>
            <p class="cta-description">Registriere dich noch heute und gestalte deine persönliche Online-Präsenz.</p>
            <a href="register.php" class="btn btn-primary btn-lg">Jetzt Registrieren</a>
        </div>
    </div>
</section>


<!-- About Section -->
<section id="about" class="section bg-about bg-light py-5">
    <div class="container">
        <div class="row align-items-center">
            <!-- Fixed Smartphone Image with Slider Background -->
            <div class="col-md-5 text-center mb-4 mb-md-0 position-relative">
                <!-- Smartphone PNG with transparent screen -->
                <img src="assets/images/kuult_frame.gif" alt="Smartphone Frame" class="img-fluid smartphone-frame" style="position: relative; z-index: 1;">

                <!-- Slider positioned behind the smartphone with fade effect -->
                <div id="kuultSlider" class="carousel slide carousel-fade position-absolute" data-ride="carousel" data-interval="3200">
                    <div class="carousel-inner">
                        <div class="carousel-item active">
                            <img src="assets/images/step1.jpg" alt="Step 1" class="d-block w-100 rounded">
                            <p class="mt-2">Kostenlos registrieren und URL sichern</p>
                        </div>
                        <div class="carousel-item">
                            <img src="assets/images/step2.jpg" alt="Step 2" class="d-block w-100 rounded">
                            <p class="mt-2">Profil individuell gestalten</p>
                        </div>
                        <div class="carousel-item">
                            <img src="assets/images/step3.jpg" alt="Step 3" class="d-block w-100 rounded">
                            <p class="mt-2">Bilder hinzufügen und Seite veröffentlichen</p>
                        </div>
                        <div class="carousel-item">
                            <img src="assets/images/step4.jpg" alt="Step 4" class="d-block w-100 rounded">
                            <p class="mt-2">Bekanntheit steigern</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Text Content and Call-to-Action Buttons                     <a class="carousel-control-prev" href="#kuultSlider" role="button" data-slide="prev">
                        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                        <span class="sr-only"></span>
                    </a>
                    <a class="carousel-control-next" href="#kuultSlider" role="button" data-slide="next">
                        <span class="carousel-control-next-icon" aria-hidden="true"></span>
                        <span class="sr-only"></span>
                    </a>-->
            <div class="col-md-7 text-left about-text">
                <h2 class="mb-4">Über Kuult</h2>
                <p class="lead">Kuult ist deine flexible Plattform für kreative Online-Auftritte – einfach, stilvoll und individuell.</p>
                <p>Unser Ziel ist es, dir eine intuitive Möglichkeit zu bieten, eine ansprechende Microsite zu gestalten – sei es für Kunstprojekte, Events oder persönliche Profile.</p>
                <p>Wähle Farben, Hintergründe und Layouts, die deine Persönlichkeit perfekt widerspiegeln. Ein integrierter QR-Code erleichtert das Teilen deines Profils auf Visitenkarten oder in sozialen Netzwerken.</p>
                <p></p>
                <div class="mt-4">
                    <a href="register.php" class="btn btn-primary">Jetzt registrieren</a>
                    <a href="#pricing" class="btn btn-outline-secondary">Mehr zu Premium erfahren</a>
                </div>
            </div>
        </div>
    </div>
</section>


<!-- Pricing Section -->
<section id="pricing" class="section bg-pricing py-5">
    <div class="container">
        <h2 class="text-center display-4 mb-4">Unsere Preismodelle</h2>
        <p class="text-center lead mb-5">
            Wähle das Modell, das perfekt zu deinen Bedürfnissen passt. Ob Einsteiger oder Unternehmen – Kuult hat die passende Lösung.
        </p>
        
        <div class="row text-center">
            <!-- Free Account -->
            <div class="col-lg-4 col-md-6 mb-4">
                <div class="pricing-card shadow-sm">
                    <h3 class="pricing-title">FREE</h3>
                    <p class="pricing-price">Kostenlos</p>
                    <p class="pricing-subtitle">Ideal für Einsteiger</p>
                    <ul class="pricing-features">
                        <li>Max. 6 Bilder in der Galerie</li>
                        <li>Max. 3 Link- & Icon-Buttons</li>
                        <li>Bis zu 5 Einladungen</li>
                        <li>Keine animierten Hintergrundbilder</li>
                    </ul>
                    <a href="register.php" class="btn btn-success pricing-btn">Jetzt starten</a>
                </div>
            </div>

            <!-- Premium Account -->
            <div class="col-lg-4 col-md-6 mb-4">
                <div class="pricing-card shadow-sm featured">
                    <h3 class="pricing-title">Premium</h3>
                    <p class="pricing-price">5 € / Monat je Profil</p>
                    <p class="pricing-subtitle">Erweitere deine Möglichkeiten</p>
                    <ul class="pricing-features">
                        
                        <li>Unbegrenzte Bilder in der Galerie</li>
                        <li>Unbegrenzte Einladungen</li>
                        <li>Zentralisierte Verwaltung</li>
                        <li>Animierte Hintergrundbilder</li>
                    </ul>
                    <a href="#about" class="btn btn-primary pricing-btn">Mehr erfahren</a>
                </div>
            </div>

            <!-- Enterprise Account -->
            <div class="col-lg-4 col-md-12 mb-4">
                <div class="pricing-card shadow-sm">
                    <h3 class="pricing-title">Enterprise</h3>
                    <p class="pricing-price">Preis auf Anfrage</p>
                    <p class="pricing-subtitle">Für Unternehmen und Großprojekte</p>
                    <ul class="pricing-features">
                        <li>Unbegrenzte Profile und Bilder</li>
                        <li>Zentralisierte Verwaltung</li>
                        <li>Unternehmensbranding & Analysen</li>
                        <li>Priorisierter Support</li>
                    </ul>
                    <a href="mailto:kontakt@kuult.de" class="btn btn-info pricing-btn">Kontakt aufnehmen</a>
                </div>
            </div>
        </div>
        
        <!-- Legal Notice -->
        <div class="text-center mt-4">
            <small style="color: #6c757d;">
            Die Abwicklung der Zahlungen erfolgt sicher über unseren Zahlungsdienstleister 
            <img src="assets/images/pbs/pbs_blurple.svg" alt="Stripe" class="img-fluid" style="max-width: 150px;">. 
            <br>Alle Premium-Abos sind monatlich kündbar. Alle Preise verstehen sich inklusive der gesetzlichen Mehrwertsteuer.
            </small>
        </div>
    </div>
</section>


<!-- FAQ Section -->
<section id="faq" class="section bg-faq bg-light py-5">
    <div class="container">
        <h2 class="text-center mb-4">FAQ</h2>
        <p class="text-center mb-5">Häufig gestellte Fragen beantwortet. Du findest hier alle Infos, um direkt loszulegen und deine eigene Microsite zu erstellen.</p>
        
        <div class="accordion" id="faqAccordion">
            <!-- Frage 1 -->
            <div class="card mb-3">
                <div class="card-header" id="headingOne">
                    <h3 class="mb-0">
                        <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                            Was ist Kuult und wofür kann ich es nutzen?
                        </button>
                    </h3>
                </div>
                <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#faqAccordion">
                    <div class="card-body">
                        Kuult ist eine Plattform, die es dir ermöglicht, eine eigene, anpassbare Microsite zu erstellen. Mit Kuult kannst du mehrere Profile anlegen, Galerien, Links und Kontaktoptionen hinzufügen und dein Profil für deine Zielgruppe individuell gestalten.
                    </div>
                </div>
            </div>

            <!-- Frage 2 -->
            <div class="card mb-3">
                <div class="card-header" id="headingTwo">
                    <h3 class="mb-0">
                        <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                            Welche Funktionen bietet der kostenlose Einzelaccount?
                        </button>
                    </h3>
                </div>
                <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#faqAccordion">
                    <div class="card-body">
                        Der kostenlose Einzelaccount bietet dir die Möglichkeit, bis zu 10 Bilder in deiner Galerie zu speichern und bis zu 5 Einladungen zu verschicken. Animierte Hintergrundbilder sind im kostenlosen Plan nicht verfügbar.
                    </div>
                </div>
            </div>

            <!-- Frage 3 -->
            <div class="card mb-3">
                <div class="card-header" id="headingThree">
                    <h3 class="mb-0">
                        <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                            Was beinhaltet der Premium-Account?
                        </button>
                    </h3>
                </div>
                <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#faqAccordion">
                    <div class="card-body">
                        Der Premium-Account bietet unbegrenzte Bilder in der Galerie, unbegrenzte Einladungen und Zugang zu animierten Hintergrundbildern. Du kannst beliebig viele Profile erstellen, wobei jedes Profil eigene Inhalte und Designs annehmen kann.
                    </div>
                </div>
            </div>

            <!-- Frage 4 -->
            <div class="card mb-3">
                <div class="card-header" id="headingFour">
                    <h3 class="mb-0">
                        <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
                            Kann ich mein Abonnement jederzeit kündigen?
                        </button>
                    </h3>
                </div>
                <div id="collapseFour" class="collapse" aria-labelledby="headingFour" data-parent="#faqAccordion">
                    <div class="card-body">
                        Ja, alle Premium-Abos sind monatlich kündbar. Du kannst deine Abos jederzeit in deinem Profilbereich verwalten und das Abonnement beenden, ohne lange Vertragsbindungen.
                    </div>
                </div>
            </div>

            <!-- Frage 5 -->
            <div class="card mb-3">
                <div class="card-header" id="headingFive">
                    <h3 class="mb-0">
                        <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseFive" aria-expanded="false" aria-controls="collapseFive">
                            Welche Zahlungsmethoden werden unterstützt?
                        </button>
                    </h3>
                </div>
                <div id="collapseFive" class="collapse" aria-labelledby="headingFive" data-parent="#faqAccordion">
                    <div class="card-body">
                        Wir arbeiten mit Stripe als Zahlungsdienstleister zusammen und unterstützen alle gängigen Zahlungsmethoden wie Kreditkarte, Apple Pay und Google Pay. Deine Zahlungen sind bei uns sicher.
                    </div>
                </div>
            </div>

            <!-- Frage 6 -->
            <div class="card mb-3">
                <div class="card-header" id="headingSix">
                    <h3 class="mb-0">
                        <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseSix" aria-expanded="false" aria-controls="collapseSix">
                            Kann ich mehrere Profile mit einem einzigen Account verwalten?
                        </button>
                    </h3>
                </div>
                <div id="collapseSix" class="collapse" aria-labelledby="headingSix" data-parent="#faqAccordion">
                    <div class="card-body">
                        Ja, mit dem Premium-Account kannst du mehrere Profile erstellen und jedes Profil individuell gestalten. Diese Profile können verschiedene Inhalte, Galerien, Links und Farben haben.
                    </div>
                </div>
            </div>

            <!-- Frage 7 -->
            <div class="card mb-3">
                <div class="card-header" id="headingSeven">
                    <h3 class="mb-0">
                        <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseSeven" aria-expanded="false" aria-controls="collapseSeven">
                            Gibt es eine Option für Unternehmen?
                        </button>
                    </h3>
                </div>
                <div id="collapseSeven" class="collapse" aria-labelledby="headingSeven" data-parent="#faqAccordion">
                    <div class="card-body">
                        Ja, wir bieten spezielle Enterprise-Pakete für Unternehmen an, die erweiterte Funktionen benötigen. Dazu gehören unlimitierte Profile, zentrale Verwaltung, Unternehmensbranding und detaillierte Analysen. Preise sind auf Anfrage erhältlich.
                    </div>
                </div>
            </div>

            <!-- Frage 8 -->
            <div class="card mb-3">
                <div class="card-header" id="headingEight">
                    <h3 class="mb-0">
                        <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseEight" aria-expanded="false" aria-controls="collapseEight">
                            Kann ich mein Profil mit einem QR-Code teilen?
                        </button>
                    </h3>
                </div>
                <div id="collapseEight" class="collapse" aria-labelledby="headingEight" data-parent="#faqAccordion">
                    <div class="card-body">
                        Ja, jedes Profil erhält automatisch einen QR-Code, den du teilen kannst. Dieser führt direkt zur Microsite deines Profils und kann einfach auf Visitenkarten oder in sozialen Netzwerken verwendet werden.
                    </div>
                </div>
            </div>

            <!-- Frage 9 -->
<div class="card mb-3">
    <div class="card-header" id="headingNine">
        <h3 class="mb-0">
            <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseNine" aria-expanded="false" aria-controls="collapseNine">
                Wie werden meine Daten geschützt?
            </button>
        </h3>
    </div>
    <div id="collapseNine" class="collapse" aria-labelledby="headingNine" data-parent="#faqAccordion">
        <div class="card-body">
            Wir nehmen den Schutz deiner persönlichen Daten sehr ernst. Für detaillierte Informationen, wie deine Daten verarbeitet und geschützt werden, besuche bitte unsere <a href="datenschutz.htm" target="_blank">Datenschutzerklärung</a>.
        </div>
    </div>
</div>
        </div>
    </div>
</section>


</div>

    <!-- Footer -->
    <footer>
        <div class="container">
            <p><div style='font-size: 0.75em; color:rgba(0, 0, 0, 0.81); mix-blend-mode: difference; color:#fff'>
                <footer class='footer'>
                    &copy; 2025 kuult.de Alle Rechte vorbehalten. Release v0.7b</br></br></br>
                </footer>
              </div></p>
        </div>
    </footer>

    <!-- Cookie-Banner -->
    <div class="cookie-banner alert alert-info alert-dismissible fade show" role="alert">
        <div class="cookie-banner-content">
            <!-- Logo als Text -->
        <div class="banner-logo">
        <object type="image/svg+xml" data="assets/images/logo_kuult.svg" width="200" height="auto" aria-label="kuult Logo"></object>
        </div>
            
            <!-- Ausführlicherer Text -->
            <div>
                <p>Willkommen auf unserer Plattform! Um dir die beste Nutzererfahrung zu bieten, nutzen wir Cookies. Sie helfen uns dabei, Inhalte zu personalisieren und deine Daten sicher zu halten. Außerdem setzen wir Cloudflare ein, um die Ladegeschwindigkeit zu verbessern und unsere Webseite abzusichern.</p>
                <p>Auch ohne Anmeldung kannst du uns Inhalte melden, die du für rechtswidrig im Sinne des 
                <a href="https://www.gesetze-im-internet.de/netzdg/" target="_blank" style="color: #ffc107; text-decoration: underline;">Netzwerkdurchsetzungsgesetzes (NetzDG)</a> hältst. Nutze dafür unsere <a href="" style="color: #ffc107; text-decoration: underline;">Meldeseite</a> oder kontaktiere uns über die <a href="" style="color: #ffc107; text-decoration: underline;">Kontaktseite</a>.</p>
                <a href="datenschutz.htm" class="alert-link" data-fancybox data-type="iframe" style="color: #ffc107; text-decoration: underline;">Mehr erfahren</a>.
            </div>
        </div>
        <div class="cookie-buttons">
            <button type="button" class="btn accept-cookies mt-3" style="font-size: 20px; padding: 15px 30px; width: 200px; height: 60px;">Akzeptieren</button>
            <button type="button" class="btn reject-cookies mt-3" style="font-size: 16px; padding: 10px 20px; width: 150px; height: 45px; background-color: #6c757d; color: #333; border: none; margin-left: 10px;">Ablehnen</button>
            <br>
        </div>
    </div>


    <script>
    $(document).ready(function() {
        // Cookie-Banner anzeigen und Blur-Effekt hinzufügen
        $('.cookie-banner').fadeIn();
        $('#blur-container').addClass('blur-active');

        // Cookie-Banner akzeptieren
        $('.accept-cookies').click(function() {
            $('.cookie-banner').fadeOut();
            $('#blur-container').removeClass('blur-active');
        });

        // Cookie-Banner ablehnen
        $('.reject-cookies').click(function() {
            // Hier können zusätzliche Aktionen definiert werden, wenn Cookies abgelehnt werden.
            // Im Beispiel wird der Banner geschlossen und der Blur-Effekt entfernt.
            $('.cookie-banner').fadeOut();
            $('#blur-container').removeClass('blur-active');
        });
    });
</script>

    <script src="assets/js/claims.js"></script>
    <script src="assets/js/rainbow.js"></script>
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
    <script>
    // Überwacht Klicks auf Links innerhalb der Navbar und schließt das Menü nach Auswahl
    document.querySelectorAll('.navbar-collapse .nav-link').forEach(link => {
        link.addEventListener('click', () => {
            document.querySelector('.navbar-collapse').classList.remove('show');
        });
    });
</script>
<script src="assets/js/cookie.js"></script>

<script>
    $(document).ready(function() {
        // Fancybox-Initialisierung
        $("[data-fancybox]").fancybox({
            iframe: {
                css: {
                    width: '800px',  // Breite des iframes
                    height: '700px'  // Höhe des iframes
                },
                scrolling: 'no' // Scrollen verhindern
            }
        });
    });

    // Kontextmenü deaktivieren
    document.addEventListener('contextmenu', function(e) {
        e.preventDefault();
    }, false);

    // Fallback für den Fall, dass Fancybox nicht geladen ist
    document.addEventListener('DOMContentLoaded', function () {
        const loginButton = document.querySelector('.login-fancybox');
        const registerButton = document.querySelector('.register-fancybox');

        // Überprüfen, ob Fancybox verfügbar ist
        if (typeof $.fancybox === 'undefined') {
            // Wenn Fancybox nicht verfügbar ist, normale Links verwenden
            if (loginButton) {
                loginButton.setAttribute('href', 'login.php');
            }
            if (registerButton) {
                registerButton.setAttribute('href', 'register.php');
            }
        }
    });
</script>

<script>
        const emojiCursor = document.querySelector('.emoji-cursor');
        const links = document.querySelectorAll('a');

        // Zeige Emoji-Cursor, wenn Maus über einen Link fährt
        links.forEach(link => {
            link.addEventListener('mouseenter', () => {
                emojiCursor.style.display = 'block'; // Emoji anzeigen
            });

            link.addEventListener('mouseleave', () => {
                emojiCursor.style.display = 'none'; // Emoji ausblenden
            });

            link.addEventListener('mousemove', (e) => {
                // Emoji an Mausposition bewegen
                emojiCursor.style.left = `${e.clientX}px`;
                emojiCursor.style.top = `${e.clientY}px`;
            });
        });
    </script>
</body>
</html>