:root{
    --main-color: #7a001e;
    --main-deep:  #5f031a;
    --main-soft:  #f2e3e6;
    --accent:     #c8912f;
    --accent-soft:#f2e6cf;
    --paper:      #ffffff;
    --ink:        #1d2a31;
    --shadow:     0 18px 50px -18px rgba(122, 0, 30,.35);
    --radius:     16px;
    --wrap:       1400px;
}

@font-face{ font-family: main; src: url(Frutiger.ttf);      font-weight: 400; font-display: swap; }
@font-face{ font-family: main; src: url(Frutiger_bold.ttf); font-weight: 700; font-display: swap; }

*{ box-sizing: border-box; }

html, body{
    margin: 0;
    font-family: main, "Segoe UI", sans-serif;
    font-size: 18px;
    color: var(--ink);
    background: var(--paper);
    scroll-behavior: smooth;
}

img{ display: block; max-width: 100%; }

h1{ font-size: clamp(36px, 8vw, 82px); line-height: 1.08; margin: 0 0 24px; letter-spacing: -.01em; }
h2{ font-size: clamp(30px, 4.5vw, 47px); line-height: 1.15; margin: 0 0 20px; letter-spacing: -.01em; }
p{ margin: 0; }

.wrap{ width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: clamp(20px, 6vw, 90px); }

.eyebrow{
    display: inline-flex; align-items: center; gap: 10px;
    font-weight: 700; font-size: 14px; letter-spacing: .22em; text-transform: uppercase;
    color: var(--accent); margin: 0 0 18px;
}
.eyebrow::before{ content: ""; width: 34px; height: 2px; background: var(--accent); }
.eyebrow-center{ justify-content: center; }

.btn{
    display: inline-flex; align-items: center; gap: 10px;
    border-radius: 1000px;
    background: var(--main-color); color: #fff;
    padding: 14px 32px;
    font-family: main; font-size: 17px; font-weight: 700;
    border: none; cursor: pointer; text-decoration: none;
    box-shadow: 0 10px 24px -12px rgba(0,44,68,.6);
    transition: transform .25s ease, background-color .25s ease;
}
.btn:hover{ transform: translateY(-2px); background: var(--main-deep); }
.btn.ghost{ background: transparent; color: var(--main-color); box-shadow: inset 0 0 0 2px var(--main-color); }
.btn.ghost:hover{ background: var(--main-color); color: #fff; }

.hero{
    min-height: 88vh;
    background: url("./img/Wellen.jpg") no-repeat 0 0 / 100vw auto;
    overflow: hidden;
    display: flex; align-items: center;
}
.hero-inner{
    display: grid; grid-template-columns: 1.05fr .95fr;
    align-items: center; gap: clamp(30px, 5vw, 80px);
}
.hero-tagline{
    font-size: clamp(26px, 4vw, 47px); line-height: 1.2; margin: 0 0 18px;
    color: var(--main-color); font-weight: 700;
}
.hero-cta{ display: flex; gap: 16px; flex-wrap: wrap; }
.hero-img{ border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.hero-img img{ width: 100%; height: 100%; object-fit: cover; }

.reveal{ opacity: 0; transform: translateY(20px); animation: rise .8s cubic-bezier(.2,.7,.2,1) forwards; }
.reveal:nth-child(2){ animation-delay: .1s; }
.reveal:nth-child(3){ animation-delay: .2s; }
.hero-img.reveal{ animation-delay: .15s; }
@keyframes rise{ to{ opacity: 1; transform: translateY(0); } }

.intro{
    padding-block: clamp(70px, 10vw, 130px);
    display: flex; flex-direction: column; align-items: center;
    gap: clamp(36px, 5vw, 64px); text-align: center;
}
.intro-text{ max-width: 70ch; }
.intro-text p{ font-size: 20px; line-height: 1.7; }
.intro-media{ width: 100%; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.intro-media img{ width: 100%; height: auto; }

.gallery{ padding-block: clamp(50px, 8vw, 110px); background: var(--main-soft); }
.gallery-head{ margin-bottom: clamp(34px, 5vw, 56px); }

.masonry{ column-count: 3; column-gap: 22px; }
.tile{
    break-inside: avoid; margin-bottom: 22px;
    border-radius: var(--radius); overflow: hidden;
    cursor: pointer; box-shadow: 0 10px 30px -18px rgba(0,44,68,.5);
}
.tile img{ width: 100%; height: auto; }

.footer{
    color: var(--ink); text-align: center;
    padding-block: clamp(60px, 9vw, 110px);
}
.footer p{ max-width: 52ch; margin: 0 auto 30px; line-height: 1.6; }

.lightbox{
    position: fixed; inset: 0; z-index: 100;
    background: rgba(35, 0, 9, 0.811);
    display: flex; align-items: center; justify-content: center;
    padding: 4vh 5vw;
    opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility .3s ease;
}
.lightbox.open{ opacity: 1; visibility: visible; }
.lightbox-img{ max-width: 92vw; max-height: 82vh; border-radius: 10px; box-shadow: 0 30px 80px -20px #000; }
.lb-btn{
    position: absolute; top: 50%; transform: translateY(-50%);
    background: rgba(255,255,255,.12); color: #fff; border: none; cursor: pointer;
    width: 56px; height: 56px; border-radius: 50%; font-size: 26px;
    display: flex; align-items: center; justify-content: center;
    transition: background .2s ease;
}
.lb-btn:hover{ background: var(--accent); }
.lb-prev{ left: 3vw; }
.lb-next{ right: 3vw; }
.lb-close{ top: 3vh; right: 3vw; transform: none; width: 48px; height: 48px; font-size: 22px; }

@media (max-width: 1100px){
    .masonry{ column-count: 2; }
}

@media (max-width: 900px){
    .hero{ min-height: auto; padding-block: 8vh 12vh; background-size: 160vw auto; }
    .hero-inner{ grid-template-columns: 1fr; gap: 40px; }
    .hero-img{ order: 2; }
}

@media (max-width: 560px){
    body{ font-size: 16px; }
    .masonry{ column-count: 1; }
    .hero-content{ padding-top: 20vh; }
    .hero-cta{ flex-direction: column; align-items: stretch; }
    .btn{ justify-content: center; }
    .lb-btn{ width: 44px; height: 44px; }
    .lb-prev{ left: 2vw; }
    .lb-next{ right: 2vw; }
}

@media (prefers-reduced-motion: reduce){
    .reveal{ animation: none; opacity: 1; transform: none; }
}