/*--------------------------------------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------------------*/
/*-------------------------------------------------------- 🍪🍪🍪🍪🍪 BANNER  ----------------------------------------------*/


.cookie-banner {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    background: #20232a;
    color: #fff;
    padding: 16px 24px;
    font-size: 0.95em;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
    z-index: 1000;
    box-sizing: border-box;
}

.cookie-banner.hidden {
    display: none;
}

.cookie-banner button {
    background: #5865F2;
    border: none;
    color: white;
    padding: 8px 16px;
    font-weight: 600;
    border-radius: 6px;
    cursor: pointer;
    margin-top: 8px;
}







/*-- login startseit----------------------------START-------------------------------- --*/

/* Allgemeine Stile */

/* Body Styling */
body {
    font-family: Arial, sans-serif;
    text-align: center;
    color: rgb(255, 255, 255);
    background: #141418; 
    /*overflow: hidden; /* Verhindert Scrollen */
}

/* Video-Hintergrund */
.video-background {
    position: fixed;
    top: 50%;
    left: 45%; /* Verschiebt das Video weiter nach links */
    width: 77vw; /* 2/3 der Bildschirmbreite */
    height: 77vh; /* 2/3 der Bildschirmhöhe */
    transform: translate(-50%, -50%);
    object-fit: cover;
    z-index: -1;

    /* Sanfter Übergang am Rand (rund, aber rechts weiter außen) */
    mask-image: radial-gradient(ellipse 45% 50% at 55% center, 
        rgba(255,255,255,1) 30%, 
        rgba(255,255,255,0) 90%);
    -webkit-mask-image: radial-gradient(ellipse 45% 50% at 55% center, 
        rgba(255,255,255,1) 30%, 
        rgba(255,255,255,0) 90%);
}
@media (max-width: 1024px) {
  .video-background {
    left: 50%;          /* ändert sich */
    width: 100vw;       /* ändert sich */
    height: 66vh;       /* ändert sich */
    
    mask-image: radial-gradient(
        ellipse 55% 50% at 50% 46%,   /* 1. Form und Position des sichtbaren Bereichs */
        rgba(255,255,255,1) 26%,      /* 2. Wo das Video 100% sichtbar ist (Kreis-Innenbereich) */
        rgba(255,255,255,0) 98%       /* 3. Wo das Video komplett unsichtbar ist (Kreis-Außenbereich) */
    );

    -webkit-mask-image: radial-gradient(ellipse 55% 48% at 50% 46%, 
        rgba(255,255,255,1) 26%, 
        rgba(255,255,255,0) 98%);
    /* Nur diese Eigenschaften werden für mobile überschrieben! */
  }
}








/*-------------------------------------------------------------------------------------------------------------*/
/* --------------------------------------------- Login-Container --------------------------------------------- */
.container {
    position: relative;
    margin-top: 20vh;
    z-index: 1;
    background: rgba(0, 0, 0, 0.5); /* Dunkler Overlay für bessere Lesbarkeit */
    padding: 20px;
    border-radius: 10px;
    display: inline-block;
}

/*Einloggen in der Mitte*/
@media (max-width: 1024px) {
  .container {
    width: 85vw;              /* fast volle Breite */
    max-width: 500px;         /* optional Begrenzung */
    margin-top: 10vh;         /* weniger Abstand nach oben */
    margin-bottom: 40vh;
    box-sizing: border-box;   /* damit padding nicht Breite sprengt */
    text-align: center;       /* Inhalte mittig */
  }
  .dev-info-login {
    margin-top: -30px; 
    font-size: 0.7rem;

  }
}
/*--------------------------------------------------- END ---------------------------------------------------*/
/* --------------------------------------------- Login-Container --------------------------------------------- */




/* Discord Login Button */
.button {
    background-color: #5865F2;
    color: white;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 5px;
    display: inline-block;
    margin-top: 10px;
}

.button:hover {
    background-color: #4752C4;
}



/*-- login startseit----------------------------END-------------------------------- --*/




/*--------------------------------------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------------Conatioenrbox----------------------------------------------------------*/

.red-slash {
  color: #e53935;
  font-weight: bold;
  font-size: 2.0rem;
  vertical-align: middle; /* Optisch mittig ausrichten */
  margin-right: 5px;

}


#feature-slider-section {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 20;
    width: 100vw;
    height: 6vw;
    background: rgba(0,0,0,0.87);
    box-shadow: 0 -6px 28px rgba(0,0,0,0.5);
    backdrop-filter: blur(3px);
    padding-top: 18px;
    padding-bottom: 18px;
    overflow: hidden;
}
@media (max-width: 1024px) and (orientation: portrait) {
  #feature-slider-section {
    height: 18vw;         /* etwas größer, dynamisch bei kleinen Screens */

  }
}

/* Querformat */
@media (max-width: 1024px) and (orientation: landscape) {
  #feature-slider-section {
    height: 8vw;
  }
}




#feature-slider-wrapper {
    display: flex;
    flex-direction: row;
    width: max-content;
    align-items: center;
    height: 100%;
}

.slider-track {
    display: flex;
    gap: 32px;
    will-change: transform;
    align-items: center;
    height: 100%;
    /*border: 2px solid red !important;*/
    
}

.slider-track > .feature-container:last-child {
    margin-right: 32px;
}


.feature-container {
    min-width: 250px;
    max-width: 330px;
    height: calc(100%);
    min-height: 44px;
    max-height: 130px;
    background: radial-gradient(ellipse at 55% 17%, #20222a 50%, #141418 100%);
    border-radius: 20px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1em;
    font-weight: 500;
    transition: transform 0.2s;
    user-select: none;
}




.feature-container.active,
.feature-container.hovered,
.feature-container:hover {
    color: #fff;
    cursor: pointer;
    transform: scale(1.05) translateY(-6px);
    background: radial-gradient(
        ellipse at 55% 17%,
        #20222a 60%,
        #141418 100%
    );
    box-shadow:
        0 0 12px 2px #d7edff66,
        0 0 20px 4px #a0e7ff44,
        0 0 32px 6px #66afc755,
        0 0 0 1.5px #20405a77;

}


.feature-community.hovered,
.feature-community:hover {
    cursor: pointer;
    transform: scale(1.05) translateY(-6px);
    background: linear-gradient(
        92deg,
        #d7edff 0%, 
        #a0e7ff 40%,
        #66afc7 75%,
        #20405a 100%
    );

}



/*--------------------------------------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------------feature-info-box----------------------------------------------------------*/


#feature-info-box {
    position: fixed;
    right: 48px;
    top: 25vh;
    min-width: 320px;
    max-width: 430px;
    min-height: 70px;
    z-index: 30;
    color: #fff;
    background: rgba(#141418, 0.45);  /* Noch transparenter! */
    font-size: 1.12em;
    font-weight: 400;
    letter-spacing: 0.1em;
    border-radius: 22px;
    padding: 30px 26px 30px 32px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.16s;
    backdrop-filter: blur(9px);    /* Glass-Effect */
    -webkit-backdrop-filter: blur(9px);
}





#feature-info-box.visible {
    opacity: 1;
}
#feature-info-text {
    color: #fff;
    font-family: inherit;
}






/*--------------------------------------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------------feature-info-box Klicken----------------------------------------------------------*/

.feature-container.active {
    /* Gleicher Stil wie hovered, gerne noch etwas kräftiger wenn du willst */
    z-index: 10;
}


.feature-container-text-align {
    justify-content: flex-start;

}



/*--------------------------------------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------------feature-info-box CONTENT----------------------------------------------------------*/

.feature-info-hero {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin-bottom: 8px;
}

.feature-logo {
    font-size: 2.8em;
    line-height: 1;
    display: inline-block;
}

.feature-logo-slash {
    font-size: 2.8em;
    line-height: 1;
    display: inline-block;
    color: #e53935;
    font-weight: bold;
    font-size: 2.4rem;
    vertical-align: middle; /* Optisch mittig ausrichten */
    margin-right: 17px;

}


.feature-title {
    font-size: 1.7em;
    font-weight: 700;
    letter-spacing: 1.2px;
    /* Eisblau-Verlauf im Text */
    background: linear-gradient(90deg, #70a1ff 10%, #d7edff 48%, #b6eaff 90%);
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    /* Soft Glow passend zur Kugel */
    text-shadow:
        0 0 10px #82e0ff88,
        0 0 18px #d0f4ff99,
        0 1px 8px #253a5b33;
    transition: background 0.3s, text-shadow 0.3s;
}


.feature-info-marketing {
    font-size: 1.2em;
    color: #e7e7e7;
    margin-top: 3px;
    font-weight: 400;
    letter-spacing: 0.05em;

    
}

.feature-container:hover {
    color: #dfdfdf;
}



/*--------------------------------------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------------------*/
/*-------------------------------------------------------- AGB Impressim Datenschutz ----------------------------------------------*/


/* Einheitlicher Stil für alle PDF-Links mit data-pdf (z. B. im Footer & Banner) */
a[data-pdf] {
    color: #fff;  /* Weiß */
    text-decoration: underline;
    margin: 0 0.5rem;
    transition: color 0.2s ease;
    font-size: 1em;
}

a[data-pdf]:hover {
    color: #b6eaff;  /* Eisblauer Hover-Effekt */
}


#legal-links-container span {
    color: #aaa;  /* Trennstrich dezent grau */
}



/*--------------------------------------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------------------*/
/*-------------------------------------------------------- 🧙‍♀️cOMMUNITY BUTTON EFFEKT ----------------------------------------------*/

.feature-link {
    color: #fff;
    text-decoration: none;
}


/*--------------------------------------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------------------*//*--------------------------------------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------------------*//*--------------------------------------------------------------------------------------------------------------------------------*/


/*--------------------------------------------------------------------------------------------------------------------------------*/
/*-------------------------------------------------------- Button zum weiterleiten auf landing pagge:----------------------------------------------*/

.info-header-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    padding: 40px 0 0 0;  /* oben/rechts/unten/links */
    gap: 20px;
    width: 90%;
    margin: 0 auto; /*Zentriert auf der Seite*/
}



/* gleiche optik wie bisher */
.ice-elf-info-link-login-page {
    font-size: 1.7em;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-decoration: none;
    background: linear-gradient(90deg, #70a1ff 10%, #d7edff 48%, #b6eaff 90%);
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow:
        0 0 10px #82e0ff88,
        0 0 18px #d0f4ff99,
        0 1px 8px #253a5b33;
    transition: background 0.3s, text-shadow 0.3s;
}

.ice-elf-info-link-login-page:hover {
    text-shadow:
        0 0 12px #b6eaffaa,
        0 0 22px #e4f9ff,
        0 2px 10px #47637a66;
    transform: scale(1.08);
}



/*#####################################################################################################*/
/*#####################################################################################################*/
/*########################################### HANDY Hauptanpassungen ##################################*/
/*#####################################################################################################*/

@media (max-width: 1024px) {
  #feature-info-box {

    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #141418;
    box-shadow: 0 0 24px 6px #a0e7ff66, 0 0 38px 12px #66afc733;
    width: 90vw;        /* z.B. 5% Abstand links/rechts */
    min-width: 95vw;
    max-width: 95vw;
    height: auto;
    box-sizing: border-box;
    flex: 0 0 auto;

  }
}




@media (max-width: 1024px) {

    /*------------------------ SCHRIFTEN ✒️✒️✒️✒️------------------------- START --------------------------*/

    .ice-elf-info-link-login-page {
    font-size: 1.5em;
    }
    .feature-title {
    font-size: 1.2em;
    }
    .feature-info-marketing {
    font-size: 0.8em;
    }
    .legal-links-class{
    font-size: 0.7em;
    }
    /*------------------------ SCHRIFTEN ✒️✒️✒️✒️------------------------- END --------------------------*/

    .info-header-bar {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 18px 0 0 0;
    gap: 8px;
    width: 98%;
    margin: 0 auto;
    text-align: center;
  }




}