/* Globals & Protection */
* { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
}

body, html { 
    width: 100%; 
    font-family: 'Libre Baskerville', serif; 
    background: #fff; 
    overflow-x: hidden;
    /* Verhindert das Markieren und Kopieren von Text */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none; 
}

img {
    /* Verhindert das "Ziehen" von Bildern auf den Desktop */
    -webkit-user-drag: none;
}

/* Views */
#home-view { 
    width: 100%; 
    height: 100vh; 
    position: fixed; 
    inset: 0; 
    z-index: 10; 
    display: block; 
}

#pdf-view, #legal-view { 
    display: none; 
    width: 100%; 
    position: relative; 
    z-index: 5; 
    background: #fff; 
}
#legal-view {
    min-height: 100vh;
}

/* Legal */
.legal { 
    max-width: 900px; 
    padding: 15vh 5% 15vh 12%; 
    color: #000; 
    line-height: 1.6; 
    font-size: 14px; 
    text-align: left; 
}
.legal h1 { color: #d82e2e; font-size: 18px; margin-bottom: 25px; }
.legal h2 { font-size: 16px; margin-top: 40px; margin-bottom: 10px; }
.legal p { margin-bottom: 15px; }
.legal a { color: #d82e2e; text-decoration: none; transition: color 0.3s ease; }
.legal a:hover { color: #000; }

/* Gallery */
.gallery-container { 
    position: absolute; 
    top: 45%; 
    left: 12%; 
    transform: translateY(-50%); 
    display: flex; 
    gap: 2vw; 
    z-index: 20; 
}

.image-box { 
    position: relative; 
    height: 45vh; 
    cursor: pointer; 
    display: inline-block; 
    -webkit-tap-highlight-color: transparent; 
}

.img-normal { 
    height: 100%; 
    width: auto; 
    display: block; 
    transition: opacity 0.3s ease; 
}

.hover-image { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
    opacity: 0; 
    transition: opacity 0.3s ease; 
    z-index: 50; 
}

@media (hover: none) { 
    .image-box.touched .img-normal { opacity: 0; } 
    .image-box.touched .hover-image { opacity: 1; } 
}
@media (hover: hover) { 
    .image-box:hover .img-normal { opacity: 0; } 
    .image-box:hover .hover-image { opacity: 1; } 
}

/* Navigation */
nav { 
    position: fixed; 
    top: calc(45% + 26vh); 
    left: 12%; 
    display: flex; 
    gap: 120px; 
    align-items: center; 
    z-index: 1000; 
}
nav a { 
    text-decoration: none; 
    color: #d82e2e; 
    font-size: 13px; 
    font-weight: 700; 
    letter-spacing: 0.02em; 
    cursor: pointer; 
    transition: all 0.3s ease; 
}
nav a:hover { color: #000; }

footer { 
    position: fixed; 
    bottom: 2vh; 
    right: 2vw; 
    display: flex; 
    z-index: 1000; 
}
footer a { 
    text-decoration: none; 
    color: #d82e2e; 
    font-size: 10px; 
    font-weight: 400; 
    cursor: pointer; 
    transition: all 0.3s ease; 
}
footer a:hover { color: #000; }

/* PDF */
#pdf-container { width: 100%; display: flex; flex-direction: column; align-items: center; }
.pdf-page-wrapper { width: 100%; display: flex; justify-content: center; }
canvas { width: 100%; height: auto !important; display: block; }

/* Loading */
#loading-overlay { 
    position: fixed; 
    inset: 0; 
    background: #fff; 
    display: none; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center; 
    z-index: 2000; 
}
#loading-video { position: absolute; top: 6vh; left: 6vw; width: 140px; height: 140px; object-fit: cover; }

/* Mobile */
@media (max-width: 768px) {
    .gallery-container { left: 5%; width: 90%; gap: 5%; justify-content: center; }
    .image-box { height: auto; width: 47%; }
    .img-normal { width: 100%; height: auto; }
    
    nav { left: 3%; width: 94%; gap: 0; justify-content: space-between; }
    nav a { font-size: 10px; white-space: nowrap; }
    
    #loading-video { top: 2vh; left: 3%; width: 102px; height: 102px; }
    
    .legal { padding: 10vh 3% 10vh 3%; font-size: 10px; }
    .legal h1, .legal h2, .legal p { font-size: 10px; }
    .legal h1 { margin-bottom: 15px; }
    .legal h2 { margin-top: 20px; margin-bottom: 5px; }
}