/*
 Theme Name:   AdbitesAI
 Theme URI:    https://www.adbites.de
 Description:  Adbites AI theme
 Author:       Heiko Schneider
 Author URI:   https://www.adbites.de
 Template:     generatepress
 Version:      0.1
*/


/* Nordic Schriftart laden */
@font-face {
    font-family: 'Nordic';
    src: url('fonts/Nordic.woff2') format('woff2'),
         url('fonts/Nordic.woff') format('woff'),
         url('fonts/Nordic.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}






.gradient-heading {
    background: linear-gradient(to bottom, #00d4ff 0%,#4db8ff 50%, #6392ed 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0;

}


.glassmorphism-container {
    /* Glassmorphism effect with dark gradient background */
    background: #d16a4b;
    background: radial-gradient(circle at top center, rgba(209, 106, 75, 0.19) 0%, rgba(5, 5, 36, 1) 94%);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    /* Border styling */
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;

    /* Shadow for depth */
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);

    /* Padding and spacing */
    padding: 40px;
    margin: 20px 0;
}


.orbtest {
background-color: var(--token-4f00a517-d75a-4557-9433-caf4536a911d, rgb(245, 245, 245)) !important;
width: 100%;
border-radius: 16px !important;
box-shadow: rgba(0, 0, 0, 0.08) 0px 0.706592px 0.706592px -0.666667px, rgba(0, 0, 0, 0.08) 0px 1.806562px 1.806562px -1.333333px, rgba(0, 0, 0, 0.07) 0px 3.621759px 3.621759px -2px, rgba(0, 0, 0, 0.07) 0px 6.8656px 6.8656px -2.666667px, rgba(0, 0, 0, 0.05) 0px 13.646761px 13.646761px -3.333333px, rgba(0, 0, 0, 0.02) 0px 30px 30px -4px, rgb(255, 255, 255) 0px 3px 1px 0px inset !important;
opacity: 1;
}


 .gradient-heading {
    /* Definiere den Farbverlauf */
    background: linear-gradient(to top, #000000, #636363); /* Beispiel: Orange zu Pfirsich */
    /* Du kannst auch andere Verläufe nutzen, z.B. radial-gradient() */

    /* Schneidet den Hintergrund auf den Text zu */
    -webkit-background-clip: text; /* Für Webkit-Browser (Chrome, Safari, Edge) */
    background-clip: text;

    /* Macht den Text transparent, damit der Hintergrund sichtbar wird */
    color: transparent;

    /* Optional: Fallback-Farbe für ältere Browser, die background-clip: text nicht unterstützen */
    /* color: #ff7e5f; */ 
}


/* Milchglaseffekt für sticky Navigation */
#sticky-navigation.is_stuck {
    background: rgba(255, 255, 255, 0.25) !important;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.18);

    transition: all 0.3s ease-in-out;
}

/* Für noch besseren Effekt - Navigation Container */
#sticky-navigation.is_stuck .inside-navigation {
    background: transparent !important;
}

/* Optional: Textfarbe anpassen für bessere Lesbarkeit */
#sticky-navigation.is_stuck .main-nav a {
    color: #333 !important;
    text-shadow: 0 1px 3px rgba(255, 255, 255, 0.8);
}

#sticky-navigation.is_stuck .navigation-branding a {
    filter: none;
}

/* Mobile Menu Button styling */
#sticky-navigation.is_stuck .menu-toggle {
    color: #333 !important;
}

.minibutton { 
--border-bottom-width: 1px;
--border-color: var(--token-4f00a517-d75a-4557-9433-caf4536a911d, rgb(245, 245, 245));
--border-left-width: 1px;
--border-right-width: 1px;
--border-style: solid;
--border-top-width: 1px;
background-color: var(--token-4f00a517-d75a-4557-9433-caf4536a911d, rgb(245, 245, 245));
border-radius: 60px;
box-shadow: 0px 0.7065919983928324px 0.7065919983928324px -0.5416666666666666px rgba(0, 0, 0, 0.1), 0px 1.8065619053231785px 1.8065619053231785px -1.0833333333333333px rgba(0, 0, 0, 0.09), 0px 3.6217592146567767px 3.6217592146567767px -1.625px rgba(0, 0, 0, 0.09), 0px 6.8655999097303715px 6.8655999097303715px -2.1666666666666665px rgba(0, 0, 0, 0.09), 0px 13.646761411524492px 13.646761411524492px -2.7083333333333335px rgba(0, 0, 0, 0.08), 0px 30px 30px -3.25px rgba(0, 0, 0, 0.05), inset 0px 3px 1px 0px var(--token-d4c0a0e6-8fba-45bc-8f6f-215e608cd0df, rgb(255, 255, 255));
opacity: 1;
}

.minibutton .gb-icon {
    color: #939393 !important;
}

.whiteneobutton {
    background-color: var(--token-4f00a517-d75a-4557-9433-caf4536a911d, rgb(245, 245, 245));
border-radius: 10px;
box-shadow: rgba(158, 158, 158, 0.69) 0px 0.706592px 0.706592px -0.583333px, rgba(158, 158, 158, 0.68) 0px 1.806562px 1.806562px -1.166667px, rgba(158, 158, 158, 0.65) 0px 3.621759px 3.621759px -1.75px, rgba(158, 158, 158, 0.61) 0px 6.8656px 6.8656px -2.333333px, rgba(158, 158, 158, 0.52) 0px 13.646761px 13.646761px -2.916667px, rgba(158, 158, 158, 0.3) 0px 30px 30px -3.5px, rgb(255, 255, 255) 0px 3px 1px 0px inset;
opacity: 1;
will-change: auto;
}

.darkneobutton {
    background-color: var(--token-6396e7f2-0645-4f69-9a36-80e94f8ee015, rgb(0, 0, 0));
border-radius: 10px;
box-shadow: rgba(61, 61, 61, 0.72) 0px 0.602187px 1.083937px -1.25px, rgba(61, 61, 61, 0.64) 0px 2.288533px 4.11936px -2.5px, rgba(61, 61, 61, 0.25) 0px 10px 18px -3.75px, rgba(0, 0, 0, 0.35) 0px 0.706592px 0.706592px -0.583333px, rgba(0, 0, 0, 0.34) 0px 1.806562px 1.806562px -1.166667px, rgba(0, 0, 0, 0.33) 0px 3.621759px 3.621759px -1.75px, rgba(0, 0, 0, 0.3) 0px 6.8656px 6.8656px -2.333333px, rgba(0, 0, 0, 0.26) 0px 13.646761px 13.646761px -2.916667px, rgba(0, 0, 0, 0.15) 0px 30px 30px -3.5px;
opacity: 1;
will-change: auto;
}


body {
    
}

body {
    background-color: #f7f8f9;
    background-image: url('images/grain.webp');
    background-repeat: repeat;
    background-size: 150px auto; /* Je kleiner, desto feiner */
    background-blend-mode: overlay; /* Optional: sorgt für subtileren Look */
}


#heroanimation_hype_container {
    min-height: 500px; /* oder 100vh */
}