/* --- BASIS RESET --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

@font-face {
    font-family: 'Cal Sans';
    src: url('fonts/CalSans-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Open Sans Local';
    src: url('fonts/OpenSans-Light.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

body {
    font-family: 'Open Sans Local', sans-serif;
    background-color: #111;
    color: white;
    -webkit-font-smoothing: antialiased;
}

/* --- SCROLL LOGIK --- */
.scroll-container {
    height: 100vh;
    overflow-y: scroll;
    scroll-snap-type: y proximity; /* 'proximity' ist sanfter bei langen Texten */
    scroll-behavior: smooth;
}

.fullscreen-section {
    height: 100vh;
    width: 100%;
    scroll-snap-align: start;
    display: flex;
    background-size: cover;
    background-position: center;
}

.long-section {
    min-height: 100vh; /* Mindestens Screen-Höhe, darf aber wachsen */
    width: 100%;
    scroll-snap-align: start; /* Rastet beim Reinscrollen oben ein */
    display: flex;
    background-size: cover;
    background-position: center;
    padding: 80px 0;
}

/* --- TYPOGRAFIE --- */
.content {
    width: 90%;
    max-width: 1200px;
    padding: 20px;
    z-index: 10;
}

h1, h2 {
    font-family: 'Cal Sans', sans-serif;
    text-transform: uppercase;
    font-size: clamp(2.5rem, 7vw, 4.5rem);
    letter-spacing: -0.01em;
    line-height: 0.95;
    font-weight: 600;
}

p {
    font-family: 'Open Sans Local', sans-serif;
    font-weight: 300;
    font-size: 0.95rem;
    line-height: 1.8;
    color: #999999;
}

a {    color: white;}

/* --- SEKTIONS-LAYOUTS (DESKTOP) --- */

/* S1: Rechts Oben */
.section-1 { justify-content: flex-end; align-items: flex-start; text-align: right; padding: 60px; }

/* S2: Links, 55% Breite */
.section-2 { justify-content: flex-start; align-items: center; padding-left: 8%; }
.section-2 .content { max-width: 55%; }

/* S3: Rechts, volle Breite möglich */
.section-3 { justify-content: flex-end; align-items: center; padding-right: 5%; }
.section-3 .content { max-width: 80%; text-align: right; }

.mobile-only-image {
    display: none;
}

/* --- MAIL BUTTON STYLING --- */
.mail-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 30px;
    height: 50px;
    border-radius: 25px;     
    padding: 0 40px;
    background-color: #000;  /* Schwarzer Hintergrund */
    border: 1px solid #666666; /* Grauer Rahmen */
    color: #666666;          /* Grauer Text */
    text-decoration: none;   /* Entfernt Unterstreichung */
    font-family: 'Oswald', sans-serif;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s ease; /* Weicher Übergang beim Hover */
    cursor: pointer;
}

/* Hover-Effekt (onmouse) */
.mail-button:hover {
    border-color: #ffffff;   /* Weißer Rahmen */
    color: #ffffff;          /* Weißer Text */
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.2); /* Optionaler sanfter Glow */
}



/* --- MOBILE ANPASSUNGEN (< 768px) --- */
@media (max-width: 768px) {
    .section-1, .section-2, .section-3 {
        justify-content: center !important;
        align-items: flex-start !important;
        text-align: center !important;
        padding: 60px 5px !important;
    }

.section-2 {
        background-image: none !important; /* Entfernt das Hintergrundbild mobil */
        background-color: #000000;         /* Erzwingt tiefschwarzen Hintergrund */
        padding-bottom: 0 !important;      /* Damit das Bild unten bündig abschließt */
    }

    .section-2 .content {
        width: 100%;
        max-width: 100%;
        padding-bottom: 0;                 /* Kein Abstand zwischen Text und Bild */
    }

    .mobile-only-image {
        display: block;                    /* Bild mobil anzeigen */
        width: 100vw;                      /* Volle Bildschirmbreite */
        margin-left: -15px;                /* Hebt das Padding des Contents auf (falls nötig) */
        height: 33vh;                      /* Ca. ein Drittel der Bildschirmhöhe */
        object-fit: cover;                 /* Bild wird beschnitten, nicht verzerrt */
        object-position: center;           /* Fokus auf die Bildmitte */
        margin-top: 30px;                  /* Abstand nach dem Text */
    }

    /* Section 3: Bleibt wie besprochen */
    .section-3 {
        background-image: url('images/bg03_mobile.jpg');
        background-size: cover;
        background-position: center;
        min-height: 100vh;
    }

    p { font-size: 0.9rem; }

    /* Hintergrundbilder Mobile */
    .section-1 { background-image: url('images/bg01_mobile.jpg'); }

    .mail-button {
        height: 45px;
        padding: 0 30px;
        border-radius: 22.5px;
        font-size: 0.8rem;
    }
}

/* Hintergrundbilder Desktop */
@media (min-width: 769px) {
    .section-1 { background-image: url('images/bg01.jpg'); }
    .section-2 { background-image: url('images/bg02.jpg'); }
    .section-3 { background-image: url('images/bg03.jpg'); }
}