<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Atelier Caro Hill</title>

<!-- Favicon -->
<link rel="icon" type="image/jpeg" sizes="32x32" href="img/favicon_Logo_CaroHill-32x32.jpg">

<style>
/* Basis */
* { margin:0; padding:0; box-sizing:border-box; font-family:sans-serif; }
html, body { width:100%; height:100%; overflow-x: visible; overflow-y: hidden; }

/* Hintergrundvideo klickfrei */
.bg-video {
    position:fixed;
    top:0; left:0;
    width:100%; height:100%;
    object-fit:cover;
    z-index:-1;
    pointer-events:none;
}

/* Seiten */
.page {
    position:absolute;
    top:0; left:0;
    width:100%; height:100%;
    display:flex; flex-direction:column; justify-content:flex-start; align-items:center;
    opacity:0;
    pointer-events:none;
    visibility:hidden;
    transition:opacity 0.6s;
}
.page.active {
    opacity:1;
    pointer-events:auto;
    visibility:visible;
}

/* Logo */
.logo {
    width:20vw;
    max-width:308px;
    height:auto;
    margin-top:120px;
    object-fit:contain;
    opacity:0;
    transform: translateY(30px);
    transition:opacity 0.6s, transform 0.6s;
}
.page.active .logo { opacity:1; transform: translateY(0); }

/* Responsives Logo */
@media (max-width:1100px){ .logo{ width:40vw; margin-top:80px; } }
@media (max-width:700px){ .logo{ width:55vw; margin-top:60px; } }
@media (max-width:500px){ .logo{ width:65vw; margin-top:50px; } }

/* Textblock Startseite */
.text-block {
    position:absolute; bottom:20%;
    max-width:450px;
    font-size:1.4rem;
    text-align:left;
    line-height:1.5;
    opacity:0; transform: translateY(30px);
    transition:opacity 0.6s, transform 0.6s;
}
.page.active .text-block { opacity:1; transform: translateY(0); }
.start-page .text-block { color:white; right:60px; }

/* Footer / Buttons */
.bottom-bar {
    position:absolute;
    bottom:7.5%;
    width:100%;
    display:flex;
    justify-content:space-between;
    padding:0 7.5%;
    align-items:center;
    opacity:0; transform: translateY(30px);
    transition:opacity 0.6s, transform 0.6s;
}
.page.active .bottom-bar { opacity:1; transform: translateY(0); }

/* Kontakt Button */
.contact-btn {
    background:none;
    border:none;
    cursor:pointer;
    font-size:1.4rem;
    color:white;
    pointer-events: auto; 
    z-index:30;
}

/* Instagram */
.instagram { width:40px; height:40px; display:inline-block; }
.start-page .instagram img { filter: brightness(0) invert(1); }
.kontakt-page .instagram img { filter: brightness(0.5); }

/* Kontaktseite */
.kontakt-page { background:white; color:gray; }
.contact-info {
    position:absolute;
    bottom:7.5%;
    left:7.5%;
    font-size:1.3rem;
    line-height:1.6;
    color:gray;
    text-align:left;
    pointer-events:auto;
    z-index:20;
}

/* Kontakt-Links als span, kein Unterstrich & Mobil-fest */
.contact-link {
    color: gray;
    text-decoration: none;
    cursor: pointer;
    display: inline;
    -webkit-text-decoration-skip: objects; /* Safari */
}

/* Verhindert iOS/Android Link-Farben */
a[href^="tel"], a[href^="mailto"] {
    color: gray !important;
    text-decoration: none !important;
    -webkit-text-decoration: none !important;
}

/* Responsive Kontaktseite */
@media (max-width:1100px){ .contact-info{ left:10vw; } .bottom-bar{ padding:0 10vw; } }
@media (max-width:700px){ .contact-info{ left:10vw; } }
@media (max-width:500px){ .contact-info{ left:8vw; } }
</style>
</head>

<body>

<!-- Hintergrundvideo -->
<video autoplay muted loop playsinline class="bg-video">
    <source src="video/background.mp4" type="video/mp4">
</video>

<!-- STARTSEITE -->
<div class="page start-page active">
    <img src="img/logo-white.svg" class="logo" alt="Logo Startseite">

    <div class="text-block">
        <p style="text-transform: uppercase;">
            berührt<br>
            bewegt<br>
            transformiert<br><br>
            neue<br>
            Lieblingsstücke
        </p>
    </div>

    <div class="bottom-bar">
        <button id="kontaktBtn" class="contact-btn">Kontakt</button>
        <a href="https://www.instagram.com/caro_hill_fashion/" target="_blank" class="instagram">
            <img src="img/instagram.svg" alt="Instagram">
        </a>
    </div>
</div>

<!-- KONTAKTSEITE -->
<div class="page kontakt-page">
    <img src="img/logo-grey.svg" class="logo" id="kontaktLogo" alt="Logo Kontaktseite">

    <div class="contact-info">
        <strong>Kontakt</strong><br><br>

        <span class="contact-link" onclick="location.href='https://maps.app.goo.gl/LCkwBwrDJdXZbpNw8'">
            Caro Hill Fashion & Remake<br>
            Wisa Gloria Lenzburg
        </span>
        <br><br>

        Termin nach Vereinbarung:<br>
        <span class="contact-link" onclick="location.href='tel:+41786253899'">078 625 38 99</span><br><br>

        <span class="contact-link" onclick="location.href='mailto:now@carohill.ch'">now@carohill.ch</span>
    </div>

    <div class="bottom-bar">
        <div></div>
        <a href="https://www.instagram.com/caro_hill_fashion/" target="_blank" class="instagram">
            <img src="img/instagram.svg" alt="Instagram">
        </a>
    </div>
</div>

<script>
// Seitenwechsel
const kontaktBtn = document.getElementById("kontaktBtn");
const kontaktPage = document.querySelector(".kontakt-page");
const startPage = document.querySelector(".start-page");
const kontaktLogo = document.getElementById("kontaktLogo");

kontaktBtn.addEventListener("click", () => {
    startPage.classList.remove("active");
    kontaktPage.classList.add("active");
});
kontaktLogo.addEventListener("click", () => {
    kontaktPage.classList.remove("active");
    startPage.classList.add("active");
});
</script>

</body>
</html>