@charset "utf-8";
/* Globale Zurücksetzung */
*,
*::before,
*::after {
    box-sizing: border-box; 
    margin: 0;
    padding: 0;
}
html { scroll-behavior: smooth; scroll-padding-top: 6rem; }
a { text-decoration: none; }
p { font-size: 1.0rem; }
ul {margin-left: 1.5rem;}
body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
    min-height: 100vh;
    overflow-x: hidden; 
    line-height: 1.6;
    transition: background-color 0.5s ease, color 0.5s ease; 
    padding: 1rem;
    color: var(--color-text-primary); 
}
@media (min-width: 768px) { body { padding: 2rem; } ul {margin-left: 2.5rem;} }

.main-container {
    max-width: 1280px; 
    margin-left: auto;
    margin-right: auto;
}

/* --- ANIMATIONEN DEFINITIONEN --- */
/* 1. Fade In + Move Up (Standard für Header & Hero) */
@keyframes fadeInMove { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } }
/* 2. Slide In from Left */
@keyframes slideInLeft { from { opacity: 0; transform: translateX(-80px); } to { opacity: 1; transform: translateX(0); } }
/* 3. Slide In from Right */
@keyframes slideInRight { from { opacity: 0; transform: translateX(80px); } to { opacity: 1; transform: translateX(0); } }
/* 4. Simple Fade In (Kein Versatz) */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
/* 5. Slide In from Bottom (Wird oft als Slide Up bezeichnet) */
@keyframes slideInUp { from { opacity: 0; transform: translateY(80px); } to { opacity: 1; transform: translateY(0); } }
/* 6. Slide In from Top (Wird oft als Slide Down bezeichnet) */
@keyframes slideInDown { from { opacity: 0; transform: translateY(-80px); } to { opacity: 1; transform: translateY(0); } }
/* 7. ANIMATION: Von Weit nach Nah (Zoom-Effekt) */
@keyframes fadeInZoom { from { opacity: 0; transform: scale(0.2); } to { opacity: 1; transform: scale(1); } }
/* 8.  ANIMATION: Von Weit nach Nah (Zoom-Effekt) yoyoefekt */
@keyframes fadeInYoyo { 
    0% { 
        opacity: 0; 
        transform: scale(0.2);
    } 
    80% { 
        opacity: 1; 
        transform: scale(1.1);
    }
    100% {
        opacity: 1; 
        transform: scale(1);     
    } 
}
/* GRUNDZUSTAND (Alle Elemente, die animiert werden können, starten so) */
.hidden-section { 
    opacity: 0; 
    /* Wichtig: Übergang für den Fall, dass die Animation nicht greift oder endet */
    transition: opacity 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                transform 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94); 
}

.main-content-wrapper { margin-top: 5rem; }

/* WICHTIG: header.animate-in-load verwendet diese Klasse und 'is-animated' */
.animate-in-load { animation: fadeInMove 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; animation-delay: 0.2s; }

main section.glass-card {
    margin-bottom: 7rem; 
}

main section.glass-card:last-of-type {
    margin-bottom: 5rem;
}


/* --- LIQUID GLASS (GLASMORPHISMUS) STYLING --- */
.glass-card {
    background: var(--color-glass-bg); 
    border-radius: 20px;
    border: 1px outset var(--color-glass-border); 
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    box-shadow: 0 10px 40px 0 var(--color-shadow-dark); 
    padding: 2rem;
    /* ***** WICHTIGER FIX FÜR CHROME/EDGE (Renderer-Ebene und Stacking Context): ***** */
    transform: translateZ(0); 
    -webkit-transform: translateZ(0);
    isolation: isolate; /* ERZWINGT EIGENEN STACKING CONTEXT */
}
@media (min-width: 768px) { .glass-card { padding: 3rem; } }

/* --- GLOW & AKZENTE --- */
.main-title-glow, .header-title a.logo {
    color: var(--color-text-primary);
    text-shadow: 0 0 20px var(--color-glow-shadow), 0 0 10px var(--color-glow-shadow); 
}
/* navigation */
.glow-link {
    color: var(--color-text-secondary); 
    position: relative;
    border-radius: 0.5rem;
    border: 1px inset transparent;
    padding: 0.5rem; 
    transition: all 0.4s linear;
    font-size: 1.125rem; 
    font-weight: 500;
    white-space: nowrap; 
}
.glow-link:hover {
    color: var(--color-text-primary);
}

.nav-active-link {
    color: var(--color-accent-base);
  /*  text-decoration: underline;
    text-underline-offset: 0.5rem;
    je nach geschmack*/
}

@media (min-width: 768px) { .glow-link { padding: 0.7rem 0.8rem; } }


/* --- HEADER --- */
.header-nav {
    position: sticky; top: 0; margin-bottom: 3rem; z-index: 50; 
    padding: 0; 
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
/* Header beim Scrollen wird nun nur in der Höhe angepasst */
.header-scrolled {
    padding-top: 0.5rem; padding-bottom: 0.5rem; 
    box-shadow: 0 4px 15px var(--color-glow-shadow); 
}
/* Die Klasse header-hidden-mobile wurde entfernt. */

@media (min-width: 768px) {
    /* Wichtig: Padding hier entfernen oder auf 0 setzen, da es auf .header-content-wrapper ist */
    .header-nav { padding: 0; } 
    .header-title, a.logo { transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
    .header-scrolled .header-title { font-size: 1.3rem; }
    .header-scrolled .glow-link { padding-top: 0.5rem; padding-bottom: 0.5rem; }
}

.header-content-wrapper { 
    max-width: 1280px; 
    margin-left: auto;
    margin-right: auto;
    padding: 1rem; 
    display: flex; 
    flex-direction: column; 
    justify-content: space-between; 
    align-items: center; 
    transition: all 0.5s linear;
}
@media (min-width: 768px) {
    .header-content-wrapper { 
        padding: 1.5rem 2rem; 
        flex-direction: row; 
    }
}
.header-scrolled .header-content-wrapper {
    /* Reduziert das vertikale Padding beim Scrollen auf dem Desktop */
    padding-top: 0.5rem; 
    padding-bottom: 0.5rem; 
}

.header-title { font-size: 1.6rem; font-weight: 800; letter-spacing: -0.05em; margin-bottom: 1rem; }
.nav-list { display: flex; list-style: none; padding: 0; margin: 0; gap: 0.5rem; }
@media (min-width: 768px) {
    .header-content-wrapper { flex-direction: row; }
    .header-title { margin-bottom: 0; }
    .nav-list { gap: 1.5rem; }
}

/* --- HERO SECTION --- */
.hero-section { text-align: center; padding-top: 6rem; padding-bottom: 6rem; }
.hero-title {
    font-size: 2.5rem; font-weight: 800; margin-bottom: 1rem; line-height: 1.1; 
}
@media (min-width: 768px) { .hero-title { font-size: 3.5rem; } }
.hero-subtitle {
    font-size: 1.1rem; max-width: 48rem; margin: 0 auto; color: var(--color-text-secondary);
}
@media (min-width: 768px) { .hero-subtitle { font-size: 1.25rem; } }

/* --- ABSCHNITTE --- */
.section-title {
    font-size: 1.8rem; font-weight: 700; margin-bottom: 1.5rem; 
    border-bottom: 1px solid var(--color-section-divider); 
    padding-bottom: 0.75rem; 
}
@media (min-width: 768px) { .section-title { font-size: 2.25rem; } }
.section-text { margin-bottom: 2rem; color: var(--color-text-secondary); }

/* --- BUTTONS (CTA in Hero) --- */
.button-group { 
    display: flex; 
    flex-direction: column; 
    gap: 1.5rem; 
    margin-top: 2rem; 
}
@media (min-width: 640px) { 
    .button-group { 
        flex-direction: row; 
        justify-content: center;
    } 
}
.button {
    text-align: center; 
    padding: 0.75rem 1.5rem; 
    font-weight: 600; 
    border-radius: 0.5rem; 
    transition: all 0.4s linear; 
    flex: 1 1 0%; 
    text-decoration: none;
}
@media (min-width: 640px) {
    .button {
        max-width: 22rem; 
        flex: 0 1 22rem; 
    }
}
.button-primary {
    background-color: var(--color-button-bg); 
    color: #ffffff;
    border: 1px solid var(--color-button-border);
}
.button-primary:hover {
    background-color: #002e37;
    border: 1px solid #00a4bd; 
    box-shadow: var(--shadow-button-glow);
}

/* --- SERVICE GRID (PROJECTS) --- */
.service-grid {
    display: grid; grid-template-columns: 1fr; gap: 1.5rem;
}
@media (min-width: 768px) { .service-grid { grid-template-columns: repeat(3, 1fr); } }
.service-card {
    display: block; padding: 1.5rem; border-radius: 0.5rem; 
    transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94); 
    border: 1px solid transparent; text-align: center; 
    color: var(--color-text-primary); 
    cursor: pointer;
}

.service-icon{
    font-size: 2rem;
    color: var(--color-accent-base);
}

.service-card:focus, .service-card:focus-visible { 
    outline: 2px solid var(--color-accent-base); 
    outline-offset: 2px;
}
.service-title {
    font-size: 1.15rem; font-weight: 700; margin-bottom: 0.25rem; margin-top: 1.5rem;
}
@media (min-width: 768px) { .service-title { font-size: 1.25rem; } }
.service-description {
    font-size: 0.9rem; color: var(--color-text-secondary);

    margin-bottom: 1rem; 
}

/* --- FOOTER --- */
.footer {
    margin-top: 5rem; padding-top: 2rem; padding-bottom: 2rem;
    text-align: center; border-top: 1px solid var(--color-section-divider); 
}
.footer-copy { margin-bottom: 1rem; color: var(--color-text-secondary); font-size: 0.9rem; }
.footer-nav { display: flex; justify-content: center; gap: 1.5rem; margin-bottom: 1rem; }
.footer-link {
    font-size: 0.875rem; color: var(--color-text-primary); text-decoration: none;
}
.footer-link:hover { color: var(--color-accent-base); }

#theme-select {
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    border: 1px solid var(--color-glass-border);
    background-color: var(--color-glass-bg);
    color: var(--color-text-primary);
    cursor: pointer;
    transition: all 0.3s ease;
}
#theme-select:hover {
    border-color: var(--color-accent-base);
}