/* styles.css */
/* GRUNDLAGEN */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* --- 3D LOADER ANIMATION --- */
#page-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: #111111; /* ink color */
    z-index: 99999;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: opacity 0.8s ease-out, visibility 0.8s ease-out;
}

.cube-wrapper {
    width: 60px;
    height: 60px;
    perspective: 800px;
}

.cube {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    animation: spinCube 2.5s infinite linear;
}

.cube-face {
    position: absolute;
    width: 60px;
    height: 60px;
    border: 2px solid #ff3c00; /* accent color */
    background: rgba(255, 60, 0, 0.05); /* very subtle fill */
}

/* Position the 6 faces to form a 3D cube */
.cube-face.front  { transform: rotateY(  0deg) translateZ(30px); }
.cube-face.right  { transform: rotateY( 90deg) translateZ(30px); }
.cube-face.back   { transform: rotateY(180deg) translateZ(30px); }
.cube-face.left   { transform: rotateY(-90deg) translateZ(30px); }
.cube-face.top    { transform: rotateX( 90deg) translateZ(30px); }
.cube-face.bottom { transform: rotateX(-90deg) translateZ(30px); }

@keyframes spinCube {
    0% { transform: rotateX(0deg) rotateY(0deg); }
    100% { transform: rotateX(360deg) rotateY(360deg); }
}

/* SCROLLBAR VERSTECKEN ABER FUNKTION BEIBEHALTEN */
.hide-scroll::-webkit-scrollbar {
    display: none;
}
.hide-scroll {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

/* TEXT OUTLINE EFFEKT (Brutalist Typo) */
.text-outline {
    -webkit-text-stroke: 2px #111111; /* Outline in Ink-Farbe */
    color: transparent;
    transition: all 0.5s ease;
}
.text-outline:hover {
    color: #111111;
}

/* GALERIE HORIZONTAL SCROLL */
.gallery-track {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding-bottom: 2rem;
    align-items: flex-start;
}

.gallery-item {
    flex: 0 0 85vw; /* Mobile: Fast die ganze Breite */
    scroll-snap-align: start; /* Links ausrichten sieht technischer aus */
    margin-right: 2rem;
    position: relative;
}

@media (min-width: 768px) {
    .gallery-item { 
        flex: 0 0 45vw; 
        margin-right: 4rem;
    }
}

@media (min-width: 1280px) {
    .gallery-item { 
        flex: 0 0 30vw; 
    }
}

/* MARQUEE ANIMATION */
.marquee {
    white-space: nowrap;
    overflow: hidden;
    display: flex;
    width: 100%;
}
.marquee-content {
    display: flex;
    flex-shrink: 0;
    animation: scroll 20s linear infinite;
}
@keyframes scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-100%); }
}

.footer-link {
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: rgba(17, 17, 17, 0.2); /* Dezent im Normalzustand */
    transition: color 0.3s ease, text-decoration-color 0.3s ease;
}

.footer-link:hover {
    color: #ff3c00; /* Accent Color */
    text-decoration-color: #ff3c00;
}