/*
  welcome to css File: 
  Navigation System by Amirr: 10.0.0, last changed 12.07.25
  
  All content on this website is subject to German copyright law.
  
  © 2025 Amirr Technologies. All rights reserved.
*/

:root {
  --texc: #fff;
  --bodc: black;
  --sysc1: rgba(26, 26, 26, 0.6);
  --sysc2: rgba(10, 10, 10, 0.1);
  --actc: rgba(188, 143, 143, 0.5);
  --icoc: rgba(255, 228, 225);
  --shac: 1px 2px 2px rgba(15, 15, 15, 0.5);
  --borctop: 0.1px solid rgba(150, 150, 150, 0.2);
  --borcleft: 0.1px solid rgba(150, 150, 150, 0.2);
  --blur: blur(40px) saturate(180%);
}


  a {
  -webkit-tap-highlight-color: transparent; /* für Android & iOS */
  -webkit-tap-highlight-color: rgba(0,0,0,0); /* alternativ */
}


    #preloader {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: #000;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      font-size: 1.5rem;
      z-index: 9999;
      transition: opacity 0.4s ease;
      opacity: 1;
      color: #000;
    }

    body.loaded #preloader {
      opacity: 0;
      pointer-events: none;
      
    }

    /* Spinner */
    .spinner {
      width: 40px;
      height: 40px;
      border: 4px solid #ccc;
      border-top: 4px solid #333;
      border-radius: 50%;
      animation: spin 1s linear infinite;
      margin-bottom: 12px;
    }

    @keyframes spin {
      to { transform: rotate(360deg); }
    }

    .sw {
      font-family: monospace;
      font-weight: bold;
      font-size: 14px;
      position: fixed;
      bottom: 15%;
      left: 50%;
      transform: translateX(-50%);
      border: none;
      color: rgba(150, 150, 150);
      padding: 6px 10px;
      border-radius: 6px;
      cursor: pointer;
    }

    /* Inhalt erst sichtbar wenn geladen */
    .site { visibility: hidden; opacity: 0; transition: opacity 0.4s ease; }
    body.loaded .site { visibility: visible; opacity: 1; }
    
  .buttona {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    color: var(--icoc);
    text-decoration: none;
    font-size: 18px;
    width: 100%;
    height: 60px;
    background-color: var(--sysc1);
    border-radius: 40px;
    box-shadow: var(--shac);
    border: none;
    border-top: var(--borctop);
    border-left: var(--borcleft);
    text-shadow: var(--shac);
  }

  
  #iconlight {
    left: 40px;
    position: absolute;
  }
  
  #icondark {
    display: none;
  }
  
  
@media (min-width: 200px) {

    body {
      margin: 27px;
      margin-top: 45px;
      background-color: #222;
      font-family: Arial, sans-serif;
      color: white;
      padding-top: 80px;
      padding-bottom: 80px;
    }
    
    .logo {
      background-image: url('/favicons/log.png');
      height: 60px;
      width: 60px;
      background-size: 50px;
      background-repeat: no-repeat; /* Bild wiederholt sich nicht */
      background-position-x: center; 
      background-position-y: center;
      user-select: none;
      border: none;
      background-color: transparent;
    }
    
    .nav-top {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  box-sizing: border-box;
  background: var(--sysc1);
  display: flex;
  justify-content: space-between; /* verteilt links/rechts */
  align-items: center; /* vertikal mittig */
  padding: 20px 15px; /* etwas Abstand zum Rand */
  box-shadow: var(--shac);
    -webkit-backdrop-filter: var(--blur);   backdrop-filter: var(--blur);
}

.navset {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  gap: 15px; /* Abstand zwischen Icon und Text */
  color: var(--icoc);
  text-decoration: none;
  font-size: 20px;
}






    .bottom-nav {
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      background: var(--sysc1);
      display: flex;
      flex-direction: row;
      justify-content: space-around;
      padding: 8px 0;
      border-top: var(--borctop);
      border-left: var(--borcleft);
        -webkit-backdrop-filter: var(--blur);   backdrop-filter: var(--blur);
    }
    

    
    
    
    
    .nav-item {
      display: flex;
      flex-direction: column;
      gap: 4px;
      align-items: center;
      flex: 1;
      color: var(--icoc);
      text-decoration: none;
      font-size: 14px;
    }
    
    
    .nav-item .material-symbols-outlined {
      font-size: 28px;
      border-radius: 20px;
      padding: 4px;
      width: 60px;
      box-shadow: var(--shac);
      background-color: var(--sysc2);
      border-top: var(--borctop);
      border-left: var(--borcleft);
    }
    

    
    
    .nav-item.active {
      color: var(--icoc);
      font-weight: bold;
    }

     .nav-item.active .material-symbols-outlined {
    font-variation-settings:
      'FILL' 1,   /* 0 = Umriss, 1 = gefüllt */
      'wght' 400,
      'GRAD' 0,
      'opsz' 48;
      background: var(--actc);
      border-radius: 20px;
      padding: 4px;
      width: 60px;
      box-shadow: var(--shac);
      border-top: var(--borctop);
      border-left: var(--borcleft);
  }
  
  span{
   text-shadow: var(--shac);
  }

    .nav-item-more {
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      color: var(--icoc);
      text-decoration: none;
      font-size: 18px;
      width: 300px;
      height: 60px;
      background-color: var(--sysc1);
      border-radius: 40px;
      box-shadow: var(--shac);
      border-top: var(--borctop);
      border-left: var(--borcleft);
    }
    .nav-item-more .material-symbols-outlined {
      font-size: 28px;
      border-radius: 20px;
      padding: 4px;
      width: 60px;
      box-shadow: var(--shac);
      background-color: rgba(10, 10, 10, 0.1);
      position: fixed;
      left: 33px;
      border-top: var(--borctop);
      border-left: var(--borcleft);
    }
    .nav-item-more.active {
      color: var(--icoc);
      font-weight: bold;
    }
    .nav-item-more.active .material-symbols-outlined {
      font-variation-settings: 'FILL' 1,
        /* 0 = Umriss, 1 = gefüllt */
        'wght' 400,
        'GRAD' 0,
        'opsz' 48;
        background: var(--actc);
        border-radius: 20px;
        padding: 4px;
        width: 60px;
        box-shadow: var(--shac);
        border-top: var(--borctop);
        border-left: var(--borcleft);
    }
    
    .nav-more.hidden {
    display: none;
    }
    
    .nav-more {
      position: fixed;
      display: flex;
      flex-direction: column;
      gap: 10px;
      bottom: 90px;
      left: 50%;
transform: translateX(-50%);
      background-color: var(--sysc1);
      padding: 20px;
      border-radius: 40px;
        -webkit-backdrop-filter: var(--blur);   backdrop-filter: var(--blur);
      border-top: var(--borctop);
      border-left: var(--borcleft);
      box-shadow: var(--shac);

    }
}
    
    @media (min-width: 801px) {
      

    body {
      margin: 27px;
      background-color: #222;
      font-family: Arial, sans-serif;
      color: white;
    }
    
    .logo {

    }
    
    .nav-top {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  box-sizing: border-box;
  background: var(--sysc1);
  display: flex;
  justify-content: space-between; /* verteilt links/rechts */
  align-items: center; /* vertikal mittig */
  padding: 20px 15px; /* etwas Abstand zum Rand */
  box-shadow: var(--shac);
    -webkit-backdrop-filter: var(--blur);   backdrop-filter: var(--blur);
}

.navset {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  gap: 15px; /* Abstand zwischen Icon und Text */
  color: var(--icoc);
  text-decoration: none;
  font-size: 20px;
}







.bottom-nav {
 position: fixed;
  bottom: 0;
  left: 0;
  width: 40%;
  background: var(--sysc1);
  border-top-right-radius: 30px;
  padding-left: 5px;
  border-top: var(--borctop);
  border-left: var(--borcleft);
  box-shadow: var(--shac); 
    -webkit-backdrop-filter: var(--blur);   backdrop-filter: var(--blur);
}
    

    
    
    
    .nav-item {
      display: flex;
      flex-direction: column;
      gap: 4px;
      flex: 1;
      color: var(--icoc);
      text-decoration: none;
      font-size: 14px;
    }
    
    .nav-item .material-symbols-outlined {
      font-size: 28px;
      border-radius: 20px;
      padding: 4px;
      width: 60px;
      box-shadow: var(--shac);
      background-color: var(--sysc2);
      border-top: var(--borctop);
      border-left: var(--borcleft);
    }
    

    
    
    .nav-item.active {
      color: var(--icoc);
      font-weight: bold;
    }

     .nav-item.active .material-symbols-outlined {
    font-variation-settings:
      'FILL' 1,   /* 0 = Umriss, 1 = gefüllt */
      'wght' 400,
      'GRAD' 0,
      'opsz' 48;
      background: var(--actc);
      border-radius: 20px;
      padding: 4px;
      width: 60px;
      box-shadow: var(--shac);
      border-top: var(--borctop);
      border-left: var(--borcleft);
  }
  
  span{
   text-shadow: var(--shac);
  }

    .nav-item-more {
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      color: var(--icoc);
      text-decoration: none;
      font-size: 18px;
      width: 300px;
      height: 60px;
      background-color: var(--sysc1);
      border-radius: 40px;
      box-shadow: var(--shac);
      border-top: var(--borctop);
      border-left: var(--borcleft);
    }
    .nav-item-more .material-symbols-outlined {
      font-size: 28px;
      border-radius: 20px;
      padding: 4px;
      width: 60px;
      box-shadow: var(--shac);
      background-color: rgba(10, 10, 10, 0.1);
      position: fixed;
      left: 33px;
      border-top: var(--borctop);
      border-left: var(--borcleft);
    }
    .nav-item-more.active {
      color: var(--icoc);
      font-weight: bold;
    }
    .nav-item-more.active .material-symbols-outlined {
      font-variation-settings: 'FILL' 1,
        /* 0 = Umriss, 1 = gefüllt */
        'wght' 400,
        'GRAD' 0,
        'opsz' 48;
        background: var(--actc);
        border-radius: 20px;
        padding: 4px;
        width: 60px;
        box-shadow: var(--shac);
        border-top: var(--borctop);
        border-left: var(--borcleft);
    }
    
    .nav-more.hidden {
    display: none;
    }
    
    .nav-more {
      position: fixed;
      display: flex;
      flex-direction: column;
      gap: 10px;
      bottom: 90px;
      left: 20%;
      background-color: var(--sysc1);
      padding: 20px;
      border-radius: 40px;
        -webkit-backdrop-filter: var(--blur);   backdrop-filter: var(--blur);
      border-top: var(--borctop);
      border-left: var(--borcleft);
      box-shadow: var(--shac);

    }
}
    
    
@media (max-width: 320px) {
  body {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    text-align: center;
  }

  body * {
    display: none !important; /* alles verstecken */
  }

  body::before {
    content: "This website is not available on smartwatches.";
    display: block;
  }
}