/* --- DARK GLOW THEME --- */

/* 1. VARIABLEN */
:root {
    /* Farbpalette */
    --color-bg-primary: #000000;
    --color-bg-secondary: #002d3c;
    --color-accent-base: #00bcd4; /* Helles Cyan */
    --color-text-primary: #ffffff;
    --color-text-secondary: #b0b0b0;
    
    /* Glasmorphismus */
    --color-glass-bg: rgba(255, 255, 255, 0.03);
    --color-glass-border: rgba(0, 188, 212, 0.3);
    
    /* Schatten & Glow */
    --color-shadow-dark: rgba(0, 0, 0, 0.7);
    --color-glow-shadow: rgba(0, 188, 212, 0.4);
    --shadow-button-glow: 0 0 15px rgba(0, 188, 212, 0.6);
    
    /* Sonstiges */
    --color-section-divider: #333333;
    --color-button-bg: #007c91;
    --color-button-border: #00bcd4;
}

/* 2. BASIS-STILE */
body {
    background-color: #001213;
    padding: 0;
   /* background: conic-gradient(at 7% 3%, var(--color-bg-primary) 27%, var(--color-bg-secondary) 33%, var(--color-bg-primary) 45%); /*alternative*/
    /*background-image: radial-gradient(circle at 50% 30%, var(--color-bg-secondary) -15%, var(--color-bg-primary) 55%, var(--color-bg-secondary) 100%);*/
}
.full-site {
    min-height: 100vh;
    background-color: var(--color-bg-primary);
    background-image: radial-gradient(circle at 50% 30%, var(--color-bg-secondary) -15%, var(--color-bg-primary) 55%, var(--color-bg-secondary) 100%);
    padding: 1.0rem;
}

/*dynamische content bereich */
@media (min-width: 768px) {
   .main-container {
      max-width: 95%;
   }
   body {
    padding: 0;
   }
   .full-site {
    padding: 2.0rem;
   }
}

/* -------------------------------------- */
/* 4. ANIMATIONSKONTROLLE (NEUE LOGIK HIER!) */
/* -------------------------------------- */
/* WICHTIG: Verwenden Sie die ID und die Klasse .is-animated, um die Animation zu definieren. */
/* will-change: transform, opacity wird für Performance empfohlen. */

/* A) WELCOME SECTION (Animation beim Laden) */
#welcome-section.is-animated {
    animation: slideInDown 2.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; 
    will-change: opacity;
}

/* B&C) PROJECTS SECTION (Animation beim Scrollen) */
#projects.is-animated , #credibility.is-animated {
    animation: slideInUp 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; 
    will-change: transform, opacity;
}
/* B) CREDIBILITY SECTION (Animation beim Scrollen) für desktop */
@media (min-width: 768px) {
    #credibility.is-animated {
        animation: slideInLeft 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; 
        will-change: transform, opacity;
    }
}
/* Sie können auch den Header (main-header) hier überschreiben, um die Ladeanimation zu ändern. */
#main-header.animate-in-load.is-animated {
    animation: fadeInMove 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; 
    animation-delay: 0.3s;
}

#welcome-section.glass-card {
   background: transparent; 
    border-radius: none;
    border: none; 
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none; 
}
/* In dark-glow.css */
.header-scrolled .header-content-wrapper { 
    /* Überschreibt das Padding beim Scrollen */
    padding-top: 0.8rem;
    padding-bottom: 0.8rem; 
    margin-top: -3.5rem; /*sorgt bei mobilen geräten dafür dass der header kleiner dargestellt wird*/
}
/* In dark-glow.css */
@media (min-width: 768px) {
    .header-content-wrapper { 
        /* Überschreibt das initiale Padding auf Desktop */
        padding-top: 1.5rem; 
        padding-bottom: 1.5rem;
    }
    .header-scrolled .header-content-wrapper { 
         margin-top: 0; /* Deaktiviert den mobilen Fix auf dem Desktop */
    }
}
/* 3. THEME-SPEZIFISCHE STILE (z.B. Hover-Effekte) *//*
.glow-link:hover {
    background-color: rgba(255, 255, 255, 0.04); 
   /* color: var(--color-accent-base); */
   /* border-color: var(--color-accent-base); */
    /*box-shadow: 0 0 10px rgba(0, 188, 212, 0.4); *//*
    border: 1px inset #0f1d1f;
    transition: all 0.5s ease-in-out;
}*/

.service-card:hover {
    border-color: var(--color-accent-base);
    box-shadow: 0 0 15px var(--color-glow-shadow);
    transform: translateY(-5px) scale(1.02);
}
/* test####################################*/
/*  mit Glow-Effekt beim Hover */
.glow-link::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 0;
    height: 0px;
    background-color: rgba(255, 255, 255, 0.06); 
    transition: width 0.4s ease, left 0.4s ease;
    /* box-shadow: 0 0 10px 1px rgba(0, 107, 123, 0.7); Turquoise Glow */
    border: none;
    border-radius: 8px;
}

.glow-link:hover::after {
    width: 100%;
    height: 100%;
    left: 0;
    border: 1px inset #0f1d1f88;
}