:root {
    --text-primary: #111111;
    --text-secondary: #555555;
    --glass-bg: rgba(255, 255, 255, 0.65);
    --glass-border: rgba(255, 255, 255, 0.85);
    --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.05);
    --transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Outfit', sans-serif;
    color: var(--text-primary);
    background-color: #f0f2f5;
    line-height: 1.5;
    overflow-x: hidden;
    position: relative;
}

/* Fluid Typography für SE und große Screens */
h1 { font-size: clamp(2.2rem, 8vw, 4.5rem); font-weight: 700; line-height: 1.05; letter-spacing: -1px; }
h2 { font-size: clamp(1.8rem, 6vw, 3rem); font-weight: 600; letter-spacing: -0.5px; }
h3 { font-size: clamp(1.2rem, 4vw, 1.5rem); font-weight: 500; }
p { font-size: clamp(0.95rem, 3vw, 1.1rem); color: var(--text-secondary); font-weight: 300; }

.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 5vw;
}

a { text-decoration: none; color: inherit; }
ul { list-style: none; }

/* --- Realistic Mountain Background & Animated Sun Orbit --- */
.bg-mesh {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -2;
    background-image: url('bg_mountains.png');
    background-size: cover;
    background-position: center top; /* Top zeigt den Himmel */
    background-repeat: no-repeat;
    animation: panBg 40s alternate infinite ease-in-out;
}

@keyframes panBg {
    0% { transform: scale(1.0); }
    100% { transform: scale(1.05); }
}

.sun-orbit {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
}

.sun-container {
    position: absolute;
    width: 40vw;
    height: 40vw;
    min-width: 400px;
    min-height: 400px;
    max-width: 600px;
    max-height: 600px;
    animation: sunPath 60s linear infinite;
}

.sun-glow-massive {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 150%;
    height: 150%;
    background: radial-gradient(circle, rgba(255,160,50,0.5) 0%, rgba(255,120,20,0.15) 40%, rgba(255,255,255,0) 70%);
    border-radius: 50%;
    filter: blur(60px);
}

.sun-corona {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50%;
    height: 50%;
    background: radial-gradient(circle, rgba(255,220,100,0.95) 0%, rgba(255,100,0,0.7) 40%, rgba(255,255,255,0) 70%);
    border-radius: 50%;
    filter: blur(30px);
    animation: pulseCorona 4s infinite alternate ease-in-out;
}

.sun-core {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 12%;
    height: 12%;
    background: #ffffff;
    border-radius: 50%;
    box-shadow: 0 0 50px 20px #fff, 0 0 120px 40px #ffdd88;
    filter: blur(2px);
}

.sun-rays {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 140%;
    height: 140%;
    transform: translate(-50%, -50%);
    background: conic-gradient(from 0deg, transparent 0deg, rgba(255,200,100,0.15) 10deg, transparent 20deg, transparent 40deg, rgba(255,220,150,0.2) 50deg, transparent 60deg, transparent 100deg, rgba(255,180,50,0.1) 120deg, transparent 140deg, transparent 180deg, rgba(255,240,200,0.2) 190deg, transparent 200deg, transparent 250deg, rgba(255,200,50,0.15) 260deg, transparent 280deg, transparent 320deg, rgba(255,220,100,0.1) 340deg, transparent 360deg);
    border-radius: 50%;
    filter: blur(10px);
    animation: rotateRays 60s linear infinite;
    mask-image: radial-gradient(circle, #fff 20%, transparent 60%);
    -webkit-mask-image: radial-gradient(circle, #fff 20%, transparent 60%);
}

@keyframes pulseCorona {
    0% { transform: translate(-50%, -50%) scale(0.95); opacity: 0.8; }
    100% { transform: translate(-50%, -50%) scale(1.05); opacity: 1; }
}

@keyframes rotateRays {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes sunPath {
    0% { top: -5vh; left: -20vw; transform: scale(0.8); }
    50% { top: -30vh; left: 50vw; transform: translateX(-50%) scale(1.2); }
    100% { top: -5vh; left: 120vw; transform: scale(0.8); }
}

/* --- Glassmorphism --- */
.glass {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.glass-card {
    background: var(--glass-bg);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid var(--glass-border);
    border-radius: 28px;
    box-shadow: var(--glass-shadow);
    padding: 40px;
    transition: var(--transition);
}

.glass-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px 0 rgba(0, 0, 0, 0.08);
    background: rgba(255, 255, 255, 0.85);
}

.glass-btn {
    display: inline-block;
    padding: 14px 32px;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(10px);
    color: white;
    border-radius: 50px;
    font-weight: 500;
    letter-spacing: 0.5px;
    border: 1px solid rgba(255,255,255,0.2);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    transition: var(--transition);
}

.glass-btn:hover {
    background: rgba(0, 0, 0, 1);
    transform: scale(1.02);
    box-shadow: 0 15px 25px rgba(0,0,0,0.15);
}

.glass-placeholder {
    background: rgba(255,255,255,0.4);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.8);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #888;
    font-weight: 300;
    overflow: hidden;
    box-shadow: inset 0 0 20px rgba(0,0,0,0.02);
}

/* --- Header --- */
.header {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
    border-bottom: 1px solid rgba(255,255,255,0.6);
    transition: var(--transition);
}

.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 90px;
}

.logo img {
    height: 55px;
    max-width: 70vw;
    object-fit: contain;
    display: block;
}

.nav-links {
    display: flex;
    gap: 2vw;
}

.nav-links a {
    font-weight: 500;
    font-size: 0.95rem;
    padding: 8px 16px;
    border-radius: 20px;
    transition: var(--transition);
}

.nav-links a:hover {
    background: rgba(255,255,255,0.5);
}

.mobile-menu-btn {
    display: none;
    background: none;
    border: none;
    width: 40px;
    height: 40px;
    position: relative;
    z-index: 1001;
    cursor: pointer;
    margin-left: auto;
}

.mobile-menu-btn span {
    position: absolute;
    left: 8px;
    width: 24px;
    height: 2px;
    background: var(--text-primary);
    transition: var(--transition);
    border-radius: 2px;
}

.mobile-menu-btn span:nth-child(1) { top: 12px; }
.mobile-menu-btn span:nth-child(2) { top: 19px; }
.mobile-menu-btn span:nth-child(3) { top: 26px; }

/* --- Hero Section --- */
.hero {
    padding-top: 120px;
    min-height: 100vh;
    display: flex;
    align-items: center;
    margin-bottom: 40px;
}

.hero-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 100px 40px;
}

.hero-content {
    width: 100%;
    max-width: 800px;
}

.hero-logo {
    width: 100%;
    max-width: 550px; /* Schön groß auf PC */
    height: auto;
    display: block;
    margin: 0 auto 30px auto; /* Mehr Luft nach unten */
}

.hero-subtitle {
    margin: 20px auto 40px;
    font-size: clamp(1.1rem, 3vw, 1.4rem);
}

/* --- Features --- */
.features {
    padding: 60px 0;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}

.feature-card {
    padding: 40px 30px;
    text-align: center;
}

.feature-icon {
    font-size: 2.8rem;
    font-weight: 700;
    background: linear-gradient(135deg, #111, #666);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 15px;
    display: inline-block;
}

/* --- Studio Section --- */
.studio-section {
    padding: 80px 0;
}

.studio-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
}

.section-title {
    margin-bottom: 25px;
}

.image-gallery {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.gallery-item {
    aspect-ratio: 1;
}

/* --- Pricing Section --- */
.pricing-section {
    padding: 80px 0 120px;
    text-align: center;
}

.pricing-card {
    max-width: 700px;
    margin: 40px auto 0;
    text-align: left;
}

.product-img {
    width: 100%;
    height: 200px;
    object-fit: contain;
    margin-bottom: 15px;
    border-radius: 12px;
    background: #ffffff;
    cursor: pointer;
    padding: 10px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

.product-img.large {
    height: 280px;
    border-radius: 16px;
}

.price-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 25px 0;
    border-bottom: 1px solid rgba(0,0,0,0.08);
}

.price-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.price-item .time {
    font-size: 1.2rem;
    font-weight: 500;
}

.price-item .cost {
    font-size: 1.4rem;
    font-weight: 700;
}

/* --- Footer --- */
.footer {
    border-top: 1px solid rgba(255,255,255,0.6);
    padding: 60px 0 30px;
    background: rgba(255,255,255,0.5);
    backdrop-filter: blur(20px);
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 40px;
    margin-bottom: 50px;
}

.footer-logo {
    height: 70px;
    margin-bottom: 20px;
    /* Da das Logo schwarz ist, lassen wir es schwarz, da der Footer nun hell und glass ist! */
}

.contact-details p {
    margin-bottom: 10px;
}

.footer-bottom {
    text-align: center;
    font-size: 0.85rem;
    color: #999;
}

/* --- Mobile / iPhone SE --- */
@media (max-width: 900px) {
    .hero-card {
        padding: 60px 30px;
    }
    
    .studio-container {
        grid-template-columns: 1fr;
        padding: 40px 30px;
    }
    
    .hero {
        padding-top: 120px;
        min-height: auto;
    }
}

@media (max-width: 768px) {
    .footer-info, .footer-contact {
        text-align: center;
    }
    .footer-logo {
        display: block;
        margin: 0 auto 20px auto;
    }
    .bg-mesh {
        background-size: cover;
        height: 100vh;
        background-position: center 20%;
    }

    .nav-links {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 30px;
        opacity: 0;
        pointer-events: none;
        transition: var(--transition);
        z-index: 1000;
    }

    .nav-links.active {
        opacity: 1;
        pointer-events: all;
    }

    .nav-links a {
        font-size: 1.5rem;
    }

    .mobile-menu-btn {
        display: block;
    }

    .mobile-menu-btn.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .mobile-menu-btn.active span:nth-child(2) { opacity: 0; }
    .mobile-menu-btn.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

    .glass-card {
        padding: 30px 20px;
        border-radius: 24px;
    }

    .sun-container {
        animation: sunPathMobile 60s linear infinite;
        min-width: 300px;
        min-height: 300px;
    }

    .hero-logo {
        max-width: 320px; /* Auf dem Handy sicher und klein halten */
        margin-bottom: 20px;
    }
}

@keyframes sunPathMobile {
    0% { top: -2vh; left: -250px; transform: scale(0.7); }
    100% { top: -2vh; left: calc(100vw + 250px); transform: scale(0.7); }
}

/* Extremer iPhone SE Fokus (320px) */
@media (max-width: 375px) {
    .container { padding: 0 15px; }
    
    .hero-card {
        padding: 25px 15px;
        border-radius: 20px;
    }
    
    .glass-btn {
        padding: 12px 24px;
        font-size: 0.9rem;
    }

    .price-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
        padding: 20px 0;
    }

    .feature-card {
        padding: 30px 15px;
    }
    .features-grid {
        gap: 15px;
    }
}

/* --- Lightbox Modal --- */
.lightbox {
    display: none;
    position: fixed;
    z-index: 2000;
    padding-top: 50px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.lightbox.active {
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 1;
}

.lightbox-content {
    margin: auto;
    display: block;
    max-width: 90%;
    max-height: 90vh;
    border-radius: 10px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.5);
    transform: scale(0.9);
    transition: transform 0.3s ease;
}

.lightbox.active .lightbox-content {
    transform: scale(1);
}

.lightbox-close {
    position: absolute;
    top: 20px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.3s;
    z-index: 2001;
}

.lightbox-close:hover,
.lightbox-close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}

/* --- Hauttyp Schema --- */
.skin-table-container {
    width: 100%;
    overflow-x: auto;
    margin-top: 20px;
}
.skin-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 800px;
    color: var(--text-primary);
}
.skin-table th, .skin-table td {
    padding: 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    text-align: left;
    vertical-align: top;
}
.skin-table th {
    font-weight: 700;
    font-size: 1.1rem;
    text-align: center;
}
.skin-table td:first-child {
    font-weight: 700;
    width: 20%;
}

.type-1 { background-color: rgba(255, 235, 225, 0.4); border-radius: 10px 0 0 0; }
.type-2 { background-color: rgba(255, 220, 200, 0.4); }
.type-3 { background-color: rgba(230, 185, 150, 0.4); }
.type-4 { background-color: rgba(180, 130, 100, 0.4); border-radius: 0 10px 0 0; }

.skin-table td:nth-child(2) { background-color: rgba(255, 235, 225, 0.1); text-align: center;}
.skin-table td:nth-child(3) { background-color: rgba(255, 220, 200, 0.1); text-align: center;}
.skin-table td:nth-child(4) { background-color: rgba(230, 185, 150, 0.1); text-align: center;}
.skin-table td:nth-child(5) { background-color: rgba(180, 130, 100, 0.1); text-align: center;}

.skin-model-img {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: 50%;
    border: 3px solid rgba(255,255,255,0.5);
    margin-bottom: 10px;
}



@media (max-width: 768px) {
    .glass-card {
        padding: 25px 15px; /* Mehr Platz auf dem Handy */
    }
    .skin-table-container {
        margin-top: 10px;
    }
    .skin-table { 
        min-width: 100%; 
        table-layout: fixed; /* Zwingt die Tabelle in die Bildschirmbreite */
    }
    .skin-table th, .skin-table td { 
        padding: 6px 2px; 
        font-size: 0.65rem; 
        word-wrap: break-word;
        hyphens: auto;
    }
    .skin-table th { 
        font-size: 0.7rem; 
    }
    .skin-table td:first-child, .skin-table th:first-child {
        width: 22%; /* Die Merkmal-Spalte etwas breiter */
        font-size: 0.65rem;
    }
    .skin-model-img { 
        width: 38px; 
        height: 38px; 
        border-width: 1px;
        margin-bottom: 5px;
    }

    .skin-model-img { 
        width: 38px; 
        height: 38px; 
        border-width: 1px;
        margin-bottom: 5px;
    }
}