@import url('https://fonts.googleapis.com/css2?family=Allura&family=Cormorant+Garamond:wght@400;500;600;700&display=swap');

:root {
    --blue: #123f78;
    --blue2: #075796;
    --gold: #c49a50;
    --cream: #fbf8ef;
    --text: #173e70;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: #e9f3f7;
    color: var(--text);
    font-family: "Cormorant Garamond", Georgia, serif;
}

button,
a {
    -webkit-tap-highlight-color: transparent;
}


/* GESAMTSEITE */

.page {
    min-height: 100vh;
    position: relative;
    overflow: hidden;

    background:
        linear-gradient(
            rgba(255,255,255,.13),
            rgba(255,255,255,.35)
        ),
        url("../images/santorini.webp");

    background-position: center;
    background-size: cover;
    background-attachment: fixed;
}


/* Falls noch kein Hintergrundbild vorhanden ist */

.page {
    background-color: #dff2fc;
}


/* GRIECHISCHE BORDÜRE */

.greek-pattern {
    height: 24px;
    position: relative;
    z-index: 20;

    background-color: white;

    background-image:
        repeating-linear-gradient(
            90deg,
            var(--blue) 0 18px,
            white 18px 23px,
            var(--blue) 23px 28px,
            white 28px 35px
        );

    border-top: 4px solid var(--blue);
    border-bottom: 4px solid var(--blue);
}

.greek-pattern.bottom {
    margin-top: 30px;
}


/* EVENT */

.event {
    width: min(100%, 1100px);
    margin: auto;

    min-height: calc(100vh - 48px);

    position: relative;

    padding: 40px 20px 20px;
}


/* OLIVEN-DEKO */

.olive {
    position: absolute;
    z-index: 0;

    font-size: 9rem;

    opacity: .65;

    filter: saturate(.75);

    pointer-events: none;
}

.olive-left {
    left: -70px;
    top: 10px;

    transform: rotate(125deg);
}

.olive-right {
    right: -70px;
    top: 280px;

    transform: rotate(-55deg);
}


/* HERO */

.hero {
    text-align: center;
    position: relative;
    z-index: 2;

    max-width: 700px;
    margin: auto;
}

.small-olive {
    font-size: 3rem;
    color: var(--blue);
    height: 40px;
}

.age {
    color: var(--blue);

    font-size: clamp(8rem, 21vw, 13rem);

    font-weight: 500;

    line-height: .72;

    letter-spacing: -8px;

    text-shadow:
        0 2px 1px rgba(255,255,255,.7);
}

.age span {
    font-size: .45em;
}

.birthday {
    color: var(--gold);

    font-family: "Allura", cursive;

    font-size: clamp(4rem, 10vw, 6.5rem);

    line-height: 1;

    margin-top: 15px;

    transform: rotate(-2deg);
}

.welcome-title {
    color: var(--blue);

    font-size: clamp(1.8rem, 5vw, 2.8rem);

    letter-spacing: 5px;

    font-weight: 600;

    margin-top: 10px;
}

.ornament {
    display: flex;

    justify-content: center;
    align-items: center;

    gap: 15px;

    margin: 20px auto;
}

.ornament span {
    width: 110px;
    height: 2px;

    background: var(--blue);
}

.ornament b {
    font-size: 1.4rem;
}

.welcome-text {
    margin: 0 auto;

    max-width: 550px;

    font-size: 1.35rem;

    line-height: 1.3;

    font-weight: 500;

    text-shadow:
        0 1px 5px rgba(255,255,255,.9);
}


/* SLIDER */

.slider-area {
    position: relative;
    z-index: 5;

    max-width: 760px;

    margin: 55px auto 0;
}

.slider-window {
    overflow: hidden;

    border-radius: 25px;

    box-shadow:
        0 15px 45px rgba(15,47,75,.22),
        inset 0 0 0 2px rgba(196,154,80,.25);

    background: rgba(255,253,247,.96);

    border: 4px solid rgba(255,255,255,.9);

    touch-action: pan-y;
}

.slider-track {
    display: flex;

    transition: transform .5s cubic-bezier(.22,.75,.25,1);
}


/* EINZELNE KARTE */

.slide {
    min-width: 100%;

    padding: 35px 65px 30px;

    text-align: center;

    min-height: 400px;

    display: flex;
    flex-direction: column;
    align-items: center;
}

.slide-decoration {
    color: var(--blue);

    font-size: 3rem;

    line-height: 1;

    margin-bottom: 8px;
}

.slide h2 {
    margin: 5px 0;

    font-size: clamp(2rem, 5vw, 3rem);

    line-height: 1.05;

    font-weight: 500;

    letter-spacing: 1px;
}

.gold-divider {
    display: flex;

    justify-content: center;
    align-items: center;

    gap: 12px;

    margin: 17px 0;
}

.gold-divider span {
    width: 100px;
    height: 1px;

    background: var(--gold);
}

.gold-divider b {
    color: var(--gold);

    font-size: 1.6rem;
}

.slide p {
    max-width: 580px;

    margin: 0 auto 25px;

    font-size: 1.2rem;

    line-height: 1.35;
}


/* HAUPTBUTTON */

.main-button {
    width: min(100%, 450px);

    min-height: 72px;

    margin-top: auto;

    padding: 7px 25px 7px 9px;

    border: 2px solid var(--gold);
    border-radius: 50px;

    background:
        linear-gradient(
            135deg,
            #174b84,
            #075897
        );

    color: white;

    display: flex;

    align-items: center;

    gap: 40px;

    text-decoration: none;

    font-family: "Cormorant Garamond", Georgia, serif;

    font-size: 1.55rem;

    letter-spacing: 1px;

    cursor: pointer;

    box-shadow:
        0 8px 20px rgba(18,63,120,.18);

    transition:
        transform .2s ease,
        box-shadow .2s ease;
}

.button-camera {
    width: 54px;
    height: 54px;
    flex: 0 0 54px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.45);
}

.button-camera svg {
    width: 27px;
    height: 27px;

    fill: none;
    stroke: white;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.main-button:hover {
    transform: translateY(-2px);

    box-shadow:
        0 12px 25px rgba(18,63,120,.27);
}

.button-icon {
    flex: 0 0 55px;

    width: 55px;
    height: 55px;

    display: grid;
    place-items: center;

    background: white;

    color: var(--gold);

    border-radius: 50%;

    font-size: 1.7rem;
}

.security {
    margin-top: 17px;

    font-size: 1rem;

    font-weight: 600;
}


/* PFEILE */

.slider-arrow {
    position: absolute;

    top: 50%;

    transform: translateY(-50%);

    z-index: 10;

    width: 54px;
    height: 54px;

    border-radius: 50%;

    border: 2px solid var(--gold);

    background: rgba(255,255,255,.94);

    color: var(--blue);

    font-family: Georgia, serif;

    font-size: 2.6rem;

    line-height: 1;

    cursor: pointer;

    box-shadow: 0 5px 15px rgba(0,0,0,.12);
}

.slider-prev {
    left: -27px;
}

.slider-next {
    right: -27px;
}


/* PUNKTE */

.slider-nav {
    display: flex;

    justify-content: center;

    gap: 10px;

    margin-top: 22px;
}

.dot {
    width: 11px;
    height: 11px;

    padding: 0;

    border: 1px solid var(--blue);

    border-radius: 50%;

    background: rgba(255,255,255,.8);

    cursor: pointer;
}

.dot.active {
    background: var(--blue);

    transform: scale(1.2);
}

.swipe-hint {
    margin-top: 12px;

    display: flex;

    justify-content: center;

    gap: 13px;

    color: var(--blue);

    font-size: .85rem;

    letter-spacing: 2px;

    font-weight: 600;
}


/* FOOTER */

footer {
    position: relative;
    z-index: 2;

    text-align: center;

    padding: 55px 20px 25px;

    text-shadow: 0 1px 4px white;
}

.footer-ornament {
    color: var(--gold);

    font-size: 2rem;
}

footer strong {
    display: block;

    margin-top: 5px;

    font-size: 1.7rem;

    letter-spacing: 3px;
}

footer p {
    margin-top: 5px;

    font-size: 1.1rem;
}


/* HANDY */

@media (max-width: 650px) {

    .event {
        padding:
            32px 14px 10px;
    }

    .age {
        font-size: 9rem;

        letter-spacing: -6px;
    }

    .birthday {
        font-size: 4.3rem;

        margin-top: 12px;
    }

    .welcome-title {
        font-size: 1.6rem;

        letter-spacing: 3px;
    }

    .welcome-text {
        font-size: 1.12rem;
    }

    .ornament span {
        width: 65px;
    }

    .slider-area {
        margin-top: 40px;
    }

    .slider-window {
        border-radius: 20px;
    }

    .slide {
        padding:
            28px 27px 25px;

        min-height: 410px;
    }

    .slide h2 {
        font-size: 2rem;
    }

    .slide p {
        font-size: 1.08rem;
    }

    .main-button {
        min-height: 64px;

        font-size: 1.25rem;

        padding-right: 16px;

        gap: 12px;
    }

    .button-icon {
        flex-basis: 49px;

        width: 49px;
        height: 49px;

        font-size: 1.4rem;
    }

    .slider-arrow {
        width: 43px;
        height: 43px;

        font-size: 2rem;
    }

    .slider-prev {
        left: -9px;
    }

    .slider-next {
        right: -9px;
    }

    .olive {
        font-size: 6rem;

        opacity: .35;
    }

}


/* SEHR KLEINE HANDYS */

@media (max-width: 370px) {

    .age {
        font-size: 7.5rem;
    }

    .birthday {
        font-size: 3.7rem;
    }

    .slide {
        padding-left: 22px;
        padding-right: 22px;
    }

    .main-button {
        font-size: 1.05rem;
    }

}