@font-face {
    font-family: 'Poppins';
    src: url(font/Poppins-Bold.ttf);
    font-weight: 700;
}
@font-face {
    font-family: 'Poppins';
    src: url(font/Poppins-Medium.ttf);
    font-weight: 500;
}
@font-face {
    font-family: 'Poppins';
    src: url('font/Poppins-SemiBold.ttf');
    font-weight: 600;
}
/* Farben und Variablen */
:root {
    --primary-color: #ffffff;
    --accent-color: #606060;
    --hover-color: #ffffff;
}
::-webkit-scrollbar {
    display: none;
}


@keyframes glideInFromBottom {
    from {
        transform: translateY(100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}
/* Globales Styling */
body {
    background-color: #08090A;
    color: #FFF;
    margin: 0;
    padding: 0;
    font-family: 'Poppins', sans-serif;
    overflow-x: hidden;
}
::selection {
    background-color: #6464642d; /* Grau als Hintergrundfarbe */
}

/* Header Container */
.header-container {
    background-color: #080a0867;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 11px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 1000px;
    border-radius: 30px;
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    margin: 40px auto 0;
    transition: all 0.3s ease;
}

/* Header-Inhalt */
header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 1000px;
    background-color: transparent;
    padding: 0 20px;
    animation: glideInFromBottom 1s ease forwards;
}

/* Header-Titel */
.header-title {
    color: #FFF;
    font-size: 17px;
    font-weight: 500;
    flex-grow: 1;
    text-align: left;
    margin-left: 25px;
    cursor: pointer;
}

/* Logo */
.logo {
    width: 22px;
    height: auto;
    user-select: none; /* Verhindert die Textauswahl */
    z-index: 1001;
    cursor: pointer;
}

/* Navigation */
.nav {
    display: flex;
    align-items: center;
    transition: all 0.3s ease-in-out;
    user-select: none; /* Verhindert die Textauswahl */
}

.nav a {
    color: #dadada;
    font-size: 17px;
    font-weight: 500;
    text-decoration: none;
    margin-left: 28px;
    padding: 10px 15px;
    position: relative;
    overflow: hidden;
}


/* Linie-Effekt unter dem Link */
.nav a::after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 50%;
    width: 0;
    height: 2px;
    background-color: #FFF; /* Weiße Farbe der Linie */
    transition: width 0.3s ease-in-out;
    transform: translateX(-50%);
}

/* Hover-Effekt: Linie breitet sich von der Mitte aus nach links und rechts aus */
.nav a:hover::after {
    width: 60%; /* Linie breitet sich über die gesamte Breite aus */
}

/* Icons (menu button) for mobile */
.icons {
    display: none;
    cursor: pointer;
    font-size: 24px;
    color: #FFF;
    position: relative;
    z-index: 1001;
}

/* Responsive Design for Mobile */
@media (max-width: 616px) {
    .header-container {
        padding: 15px;
        width: 100%;
        max-width: 350px;
        margin: 30px auto;
        border-radius: 30px;
        left: 50%;
        transform: translateX(-50%);
    }

    header {
        justify-content: space-between;
    }

    .header-title {
        margin-left: -50px;
        text-align: center;
        flex-grow: 1;
        z-index: 1001;
    }

    /* Show menu icon and hide nav on mobile */
    .icons {
        display: block;
    }

    /* Hide nav by default on mobile */
    /* Mobile Menü - initial verstecken */
.nav {
    visibility: hidden;
    opacity: 0;
    position: absolute; /* Fixieren, damit Blur besser sichtbar wird */
    top: 0;
    right: 0;
    width: 100%;
    height: 100vh;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    z-index: 1000;
    background-color: rgb(8, 9, 10); /* Halbtransparent für den Hintergrund */
    z-index: 1000; /* Sicherstellen, dass der Hintergrund über anderen Inhalten liegt */

}

/* Klasse zur Anzeige des Menüs */
.nav.mobile-shown {
    visibility: visible;
    opacity: 1;
}

/* Menü-Link-Design für mobile Ansicht */
.nav a {
    font-size: 24px;
    color: #dadada;
    margin: 10px 0;
    text-decoration: none;
    padding: 10px;
    transition: color 0.3s;
}

/* Effekt beim Hover über Links */
.nav a:hover {
    color: #ffffff;
}

/* Icon im Header sichtbar in der mobilen Ansicht */
@media (max-width: 616px) {
    .icons {
        display: block;
    }
}

}
.divider-line {
    width: 1200px;
    height: 2px;
    background-color: #393A3B;
    margin: 20px auto 50px; /* Zentriert die Linie und sorgt für Abstand oben und unten */
}
* {
    box-sizing: border-box;
}
.product-container {
opacity: 0; /* Unsichtbar */
transform: translateY(30px); /* Nach unten verschoben */
transition: opacity 1s ease, transform 0.6s ease;
}

.product-container.reveal {
opacity: 1; /* Sichtbar */
transform: translateY(0); /* Zurück an den ursprünglichen Platz */
}



.main-text,
.caption-text,
.divider-line {
    max-width: 100vw;
    overflow: hidden;
}

    .main-text {
        text-align: center;
        font-size: 28px;
        font-weight: 400;
        font-family: 'Poppins', sans-serif;
 
        opacity: 0; /* Startet unsichtbar */
        transform: translateY(30px); /* Startet leicht nach unten verschoben */
        animation: revealAnimation 1s forwards; /* Animation beim Laden der Seite */
        user-select: none;
        }
        @media (max-width: 615px) {
        .main-text {
        font-size: 27px;
        line-height: 7.1vh;
        margin: 300px auto 0; /* Keine untere Margin */
        }
        }

        @media (max-width: 896px) {
            .main-text {
                margin-top: 170px;
                font-size: 23px;
                font-weight: 200;
                line-height: 1.5;
                max-width: 400px;
                margin-left: auto;
                margin-right: auto; /* Zentriert horizontal */
                text-align: center; /* Textzentrierung */
            }
        }



@keyframes revealAnimation {
0% {
opacity: 0;
transform: translateY(30px); /* Startet unterhalb der Endposition */
}
100% {
opacity: 1;
transform: translateY(0); /* Endposition: Normal */
}
}


.caption-text {
text-align: center;
font-size: 22px;
font-weight: 500;
color: #666;
font-family: 'Poppins', sans-serif;
margin-top: 20px;
opacity: 0; /* Startet unsichtbar */
transform: translateY(30px); /* Startet leicht nach unten verschoben */
animation: revealAnimationCaption 1s forwards; /* Animation beim Laden der Seite */
animation-delay: 0.5s; /* Verzögert das Erscheinen der Caption */
user-select: none;
}

/* Keyframes für die Reveal-Animation des Main Texts */
@keyframes revealAnimationMain {
0% {
opacity: 0;
transform: translateY(30px); /* Startet unterhalb der Endposition */
}
100% {
opacity: 1;
transform: translateY(0); /* Endposition: Normal */
}
}

/* Keyframes für die Reveal-Animation der Caption */
@keyframes revealAnimationCaption {
0% {
opacity: 0;
transform: translateY(30px); /* Startet unterhalb der Endposition */
}
100% {
opacity: 1;
transform: translateY(0); /* Endposition: Normal */
}
}

.divider-line {
width: 0; /* Startet unsichtbar */
height: 2px;
background-color: #333;
margin: 30px auto;
transform-origin: center center; /* Mittelpunkt als Ursprung */
animation: grow-line 1s ease-out forwards;
}

@keyframes grow-line {
0% {
width: 0;
}
100% {
width: 50%; /* Linie wächst nach links und rechts */
}
}


.work-process-container {
    text-align: center;
    margin-top: 80px;
}

.work-process-rectangle {
    display: inline-block;
    background-color: #0B0D0E;
    width: 210px;
    color: #fff;
    height: 50px;
    font-size: 16px;
    font-weight: 100;
    line-height: 50px;
    border-radius: 50px;
    border: 1px solid #222;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    text-align: center;
    user-select: none;
}

.shop-nav {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-top: 40px;
    user-select: none;
}

.shop-nav a {
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    font-size: 16px;
    color: #666;
    text-decoration: none;
    padding: 10px 15px;
    transition: color 0.3s;
}

.shop-nav a:hover {
    color: #FFF;
}

.shop-nav .active {
    color: #FFF;
}

.product-row {
display: flex;
justify-content: center;
gap: 20px;
margin-top: 50px;
flex-wrap: wrap; /* Fügt eine Umbruchfunktion hinzu, damit Elemente auf kleineren Bildschirmen in die nächste Reihe springen können */
}

.product-container {
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
width: 100%; /* Stellt sicher, dass der Container auf mobilen Geräten die volle Breite nutzt */
max-width: 300px; /* Maximale Breite auf größeren Geräten */
}

.product-rectangle {
background-color: #0B0D0E;
width: 250px;
height: 230px;
border-radius: 40px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
display: flex;
justify-content: center;
align-items: center;
position: relative;
overflow: hidden;
transition: transform 0.3s ease, box-shadow 0.3s ease;
margin: 0 auto; /* Zentriert das Rechteck innerhalb des Containers */
cursor: pointer;
        background-image: url('framee.png');
                    border: 1px solid #222;
        background-size: cover; /* Das Bild vollständig abdecken */
        background-position: center; /* Das Bild in der Mitte ausrichten */
}

.product-rectangle img {
max-width: 95%;
max-height: 40%;
object-fit: contain;
}

.product-container:hover .product-rectangle {
transform: scale(1.03);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
}

.product-details {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 10px;
width: 250px;
margin: 10px auto;
}

.product-name {
font-family: 'Poppins', sans-serif;
font-size: 15px;
font-weight: 500;
color: #fff;
margin: 0;
cursor: pointer;
}

.product-price {
font-family: 'Poppins', sans-serif;
font-size: 16px;
font-weight: 500;
color: #888888;
margin: 0;
cursor: pointer;
}

.product-image {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 10;
max-width: 80%;
max-height: 80%;
user-select: none; /* Verhindert die Textauswahl */
}

/* Responsive Anpassungen für kleinere Bildschirme */
@media (max-width: 768px) {
.product-row {
gap: 20px; /* Kleineren Abstand zwischen den Produkten auf mobilen Geräten */
margin-top: 30px;
}

.product-container {
max-width: 90%; /* Lässt mehr Platz für den Container auf kleinen Geräten */
}

.product-rectangle {
width: 200px; /* Kleinere Größe für die Produktrechtecke auf mobilen Geräten */
height: 200px;
}

.product-details {
width: 200px; /* Weniger Breite für die Details auf mobilen Geräten */
}

.product-name {
font-size: 14px; /* Kleinere Schriftgröße */
}

.product-price {
font-size: 14px; /* Kleinere Schriftgröße */
}
}

@media (max-width: 480px) {
.product-row {
gap: 15px; /* Noch kleinere Lücke zwischen den Produkten */
margin-top: 20px;
}

.product-container {
max-width: 100%; /* Container auf der vollen Breite auf kleinen Geräten */
}

.product-rectangle {
width: 180px; /* Noch kleinere Größe für das Produkt */
height: 180px;
}

.product-details {
width: 180px; /* Verkleinerte Breite */
}

.product-name {
font-size: 13px; /* Noch kleinere Schriftgröße */
}

.product-price {
font-size: 13px; /* Noch kleinere Schriftgröße */
}
}.footer {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 50px;
    padding: 20px;
}

/* Footer Rectangle mit abgerundeten Ecken */
.footer-rectangle {
    background-color: #0B0D0E; /* Dunkler Hintergrund für das Rechteck */
    color: white;
    padding: 60px 130px;
    border-radius: 15px; /* Abgerundete Ecken */
    text-align: center;
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
}

/* Footer Text */
.footer-rectangle p {
    margin: 0;
    font-size: 14px;
}
    /* Footer Logo Style */
    .footer-logo {
        width: 35px; /* Adjust this value as needed */
        height: auto; /* Keeps the aspect ratio */
        user-select: none;
    }
    .footer-text {
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    color: rgb(250, 250, 250);
    font-size: 15px;
    user-select: none;
}
@media (max-width: 600px) {
    .footer-text {
        width: 355px;
        height: 280px;
    }
}
@media (max-width: 600px) {
    .footer-rectangle {
    background-color: #0B0D0E; /* Dunkler Hintergrund für das Rechteck */
    color: white;
    padding: 60px 10px;
    height: 200px;
    border-radius: 15px; /* Abgerundete Ecken */
    text-align: center;
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    }
}
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Fade-out-Animation */
@keyframes fadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

/* Fade-in beim Laden */
body.fade-in {
    animation: fadeIn 0.5s ease-in; /* Dauer: 0.5 Sekunden */
}

/* Fade-out beim Verlassen */
body.fade-out {
    animation: fadeOut 0.5s ease-out forwards; /* Dauer: 0.5 Sekunden */
}


/* Stil für den umfassenden Container */
.discorduser {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh; /* Nutzt die gesamte Höhe des Viewports */
    text-align: center;
}

/* Stil für das Bild */
.discordimage {
    width: 150px; /* oder jede andere Größe */
    height: 150px; /* Muss gleich der Breite sein für ein rundes Bild */
    border-radius: 50%; /* Erzeugt das runde Aussehen */
    object-fit: cover; /* Stellt sicher, dass das Bild das Element vollständig ausfüllt */
    border: 3px solid white; /* Optional: weißer Rand um das Bild */
    margin-bottom: 10px; /* Abstand zwischen Bild und Text */
}

/* Stil für den Namen */
.discordname {
    font-size: 20px; /* oder jede andere passende Größe */
    color: white; /* oder jede andere Farbe */
    font-family: 'Poppins', sans-serif; /* Ihre gewählte Schriftart */
}