:root {
    --paper: #f7f2eb;
    --paper-2: #efe5d8;

    --white: #fffdf9;
    --polaroid: #fffefa;

    --ink: #24211f;
    --muted: #746d66;

    --champagne: #c7a77a;
    --champagne-dark: #9d7a4a;

    --line: rgba(36, 33, 31, .12);

    --shadow:
        0 24px 80px rgba(44, 36, 28, .10);

    --polaroid-shadow:
        0 8px 22px rgba(39, 32, 26, .15),
        0 2px 5px rgba(39, 32, 26, .08);
}


/* ================================================================
   GRUNDLAGEN
================================================================ */

* {
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body {
    margin: 0;

    color: var(--ink);

    background:
        radial-gradient(
            circle at 80% 2%,
            rgba(199, 167, 122, .12),
            transparent 25rem
        ),
        linear-gradient(
            180deg,
            #faf7f2 0%,
            var(--paper) 100%
        );

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
}


button,
input,
textarea {
    font: inherit;
}


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


.page {
    width: min(
        1100px,
        calc(100% - 32px)
    );

    margin: 0 auto;

    padding:
        24px
        0
        80px;
}


.page-small {
    width: min(
        680px,
        calc(100% - 34px)
    );

    min-height: 100vh;

    display: grid;

    place-items: center;
}


/* ================================================================
   TYPOGRAFIE
================================================================ */

.eyebrow {
    margin:
        0
        0
        14px;

    color: var(--muted);

    text-transform: uppercase;

    letter-spacing: .19em;

    font-size: .77rem;

    font-weight: 700;
}


h1,
h2,
h3 {
    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-weight: 500;
}


h1 {
    margin: 0;

    font-size:
        clamp(
            3.4rem,
            7vw,
            6.4rem
        );

    line-height: .94;

    letter-spacing: -.045em;
}


h1 span {
    color: var(--champagne-dark);

    font-style: italic;

    font-weight: 400;
}


/* ================================================================
   STARTSEITE
================================================================ */

.hero {
    position: relative;

    min-height: 760px;

    display: grid;

    grid-template-columns:
        1.08fr
        .92fr;

    align-items: center;

    gap: 10px;

    overflow: hidden;
}


.hero-copy {
    position: relative;

    z-index: 3;

    padding:
        72px
        0;
}


.hero-text {
    max-width: 620px;

    margin:
        26px
        0
        0;

    color: var(--muted);

    font-size:
        clamp(
            1.03rem,
            1.8vw,
            1.24rem
        );

    line-height: 1.65;
}


.couple-wrap {
    position: relative;

    height: 720px;

    align-self: end;

    display: flex;

    align-items: flex-end;

    justify-content: center;
}


.couple-glow {
    position: absolute;

    width: 76%;

    aspect-ratio: 1;

    left: 50%;

    bottom: 70px;

    transform:
        translateX(-50%);

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(199, 167, 122, .28) 0%,
            rgba(199, 167, 122, .10) 45%,
            transparent 72%
        );

    filter: blur(8px);
}


.couple-photo {
    position: relative;

    z-index: 2;

    max-width: 100%;

    max-height: 720px;

    object-fit: contain;

    object-position:
        bottom
        center;

    filter:
        drop-shadow(
            0
            28px
            42px
            rgba(30, 26, 22, .14)
        );
}


/* ================================================================
   COUNTDOWN
================================================================ */

.countdown-card,
.opened-card {
    width: min(
        690px,
        100%
    );

    margin:
        32px
        0
        14px;

    padding: 22px;

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

    border-radius: 26px;

    background:
        rgba(
            255,
            253,
            249,
            .82
        );

    backdrop-filter:
        blur(14px);

    box-shadow:
        var(--shadow);
}


.countdown-title {
    margin:
        0
        0
        15px;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 1.1rem;
}


#countdown {
    display: grid;

    grid-template-columns:
        repeat(
            4,
            1fr
        );

    gap: 9px;
}


#countdown > div {
    padding:
        13px
        6px;

    text-align: center;

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

    border-radius: 18px;

    background:
        rgba(
            255,
            255,
            255,
            .78
        );
}


#countdown strong {
    display: block;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(
            1.75rem,
            4vw,
            2.65rem
        );

    font-weight: 500;
}


#countdown small {
    display: block;

    margin-top: 3px;

    color: var(--muted);

    font-size: .73rem;
}


.quiet {
    margin:
        14px
        0
        0;

    color: var(--muted);

    font-size: .9rem;
}


.opened-card {
    display: flex;

    align-items: center;

    gap: 14px;

    flex-wrap: wrap;
}


.heart,
.big-heart {
    color:
        var(--champagne-dark);
}


.heart {
    font-size: 1.6rem;
}


.hero-actions {
    margin-top: 12px;
}


/* ================================================================
   BUTTONS
================================================================ */

.button {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 49px;

    padding:
        12px
        21px;

    margin:
        7px
        5px
        7px
        0;

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

    border-radius: 999px;

    background:
        var(--ink);

    color: white;

    text-decoration: none;

    cursor: pointer;

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


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

    box-shadow:
        0
        12px
        30px
        rgba(36, 33, 31, .13);
}


.button-light {
    color:
        var(--ink);

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

    border-color:
        var(--line);
}


.button-full {
    width: 100%;

    margin:
        8px
        0
        0;
}


/* ================================================================
   UPLOAD
================================================================ */

.upload-card,
.thankyou-card,
.empty-state {
    border:
        1px
        solid
        var(--line);

    background:
        rgba(
            255,
            253,
            249,
            .91
        );

    box-shadow:
        var(--shadow);
}


.upload-card {
    width:
        min(
            810px,
            100%
        );

    margin:
        40px
        auto
        0;

    padding:
        clamp(
            24px,
            5vw,
            48px
        );

    border-radius:
        32px;
}


.section-heading {
    text-align: center;

    max-width: 620px;

    margin:
        0
        auto
        28px;
}


.section-heading h2 {
    margin:
        0
        0
        12px;

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


.section-heading p:last-child {
    color:
        var(--muted);

    line-height:
        1.6;
}


.upload-form label {
    display: block;

    margin:
        18px
        0;

    font-weight: 650;
}


.upload-form label > span {
    display: flex;

    justify-content:
        space-between;

    gap: 12px;
}


.upload-form em {
    color:
        var(--muted);

    font-size:
        .82rem;

    font-style:
        normal;

    font-weight:
        500;
}


.upload-form input[type="text"],
.upload-form input:not([type]),
.upload-form textarea {
    width: 100%;

    margin-top: 8px;

    padding:
        14px
        16px;

    color:
        var(--ink);

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

    border-radius:
        15px;

    outline: none;

    background:
        white;
}


.upload-form input:focus,
.upload-form textarea:focus {
    border-color:
        rgba(
            157,
            122,
            74,
            .55
        );

    box-shadow:
        0
        0
        0
        4px
        rgba(
            199,
            167,
            122,
            .12
        );
}


.file-picker {
    position: relative;

    min-height: 160px;

    margin-top:
        24px !important;

    padding: 25px;

    display:
        grid !important;

    place-items: center;

    text-align: center;

    border:
        1px
        dashed
        rgba(
            157,
            122,
            74,
            .65
        );

    border-radius:
        22px;

    background:
        rgba(
            247,
            242,
            235,
            .65
        );

    cursor: pointer;
}


.file-picker > span {
    display:
        block !important;
}


.file-picker strong,
.file-picker small {
    display: block;
}


.file-picker small {
    margin-top: 4px;

    color:
        var(--muted);

    font-weight:
        500;
}


.file-icon {
    margin-bottom: 7px;

    color:
        var(--champagne-dark);

    font-size:
        2.2rem;

    line-height: 1;
}


.file-picker input {
    position: absolute;

    inset: 0;

    opacity: 0;

    cursor: pointer;
}


.file-summary {
    margin:
        10px
        0;

    padding:
        10px
        14px;

    border-radius:
        13px;

    background:
        var(--paper);

    color:
        var(--muted);

    font-size:
        .9rem;
}


/* ================================================================
   DANKE-SEITE
================================================================ */

.thankyou-card,
.empty-state {
    width: 100%;

    padding:
        42px
        30px;

    text-align: center;

    border-radius:
        30px;
}


.big-heart {
    font-size: 3rem;

    margin-bottom:
        12px;
}


.small-title {
    margin:
        0
        0
        14px;

    font-size:
        clamp(
            2.4rem,
            8vw,
            4rem
        );
}


/* ================================================================
   PRIVATER ZUGANG
================================================================ */

.private-banner {
    max-width: 920px;

    margin:
        18px
        auto
        0;

    padding:
        14px
        18px;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-wrap: wrap;

    gap:
        6px
        12px;

    text-align: center;

    border:
        1px
        solid
        rgba(
            157,
            122,
            74,
            .35
        );

    border-radius:
        16px;

    background:
        rgba(
            255,
            248,
            234,
            .92
        );

    color:
        var(--ink);

    font-size:
        .9rem;
}


.private-banner a {
    color:
        var(--champagne-dark);

    font-weight: 700;
}


/* ================================================================
   GALERIE-KOPF
================================================================ */

.gallery-header {
    padding:
        56px
        0
        44px;

    text-align: center;
}


.gallery-header h1 {
    font-size:
        clamp(
            3.1rem,
            8vw,
            5.4rem
        );
}


.gallery-intro {
    margin:
        18px
        auto
        5px;

    color:
        var(--muted);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-style:
        italic;

    font-size:
        clamp(
            1rem,
            2vw,
            1.25rem
        );
}


.gallery-meta {
    margin:
        8px
        0
        17px;

    color:
        var(--muted);

    font-size:
        .9rem;
}


/* ================================================================
   POLAROID-GRID
   IMMER GENAU ZWEI BILDER NEBENEINANDER
================================================================ */

.polaroid-grid {
    width:
        min(
            980px,
            100%
        );

    margin:
        10px
        auto
        0;

    display: grid;

    /*
     * Wichtig:
     * Egal ob PC, Tablet oder Handy:
     * IMMER zwei Spalten.
     */
    grid-template-columns:
        repeat(
            2,
            minmax(
                0,
                1fr
            )
        );

    gap:
        clamp(
            12px,
            2.4vw,
            30px
        );

    align-items:
        start;
}


.memory-card {
    width: 100%;

    /*
     * Kleine unterschiedliche Drehungen.
     * Dadurch wirken die Karten wie echte
     * ausgelegte Polaroids.
     */
    transform:
        rotate(-.55deg);

    transform-origin:
        center;

    transition:
        transform .25s ease;
}


.memory-card:nth-child(2n) {
    transform:
        rotate(.65deg);
}


.memory-card:nth-child(4n) {
    transform:
        rotate(-.3deg);
}


.memory-card:nth-child(5n) {
    transform:
        rotate(.4deg);
}


.memory-card:hover {
    transform:
        rotate(0deg)
        translateY(-3px);

    z-index: 4;
}


/* ================================================================
   POLAROID FLIP-CARD
================================================================ */

.flip-card {
    width: 100%;

    /*
     * Klassisches Polaroid-Format.
     */
    aspect-ratio:
        4 / 5;

    perspective:
        1500px;
}


.flip-inner {
    position: relative;

    width: 100%;

    height: 100%;

    transform-style:
        preserve-3d;

    transition:
        transform
        .72s
        cubic-bezier(
            .2,
            .72,
            .2,
            1
        );
}


.flip-card.flipped
.flip-inner {
    transform:
        rotateY(180deg);
}


.flip-face {
    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    backface-visibility:
        hidden;

    -webkit-backface-visibility:
        hidden;
}


/* ================================================================
   POLAROID VORDERSEITE
================================================================ */

.flip-front {
    background:
        transparent;
}


.polaroid-paper {
    width: 100%;

    height: 100%;

    padding:
        clamp(
            8px,
            1.4vw,
            14px
        );

    padding-bottom:
        clamp(
            14px,
            2vw,
            22px
        );

    display: flex;

    flex-direction:
        column;

    background:
        linear-gradient(
            145deg,
            #ffffff 0%,
            #fffefa 55%,
            #faf7f1 100%
        );

    border:
        1px
        solid
        rgba(
            70,
            60,
            50,
            .09
        );

    box-shadow:
        var(--polaroid-shadow);
}


.polaroid-photo-area {
    position: relative;

    flex: 1;

    min-height: 0;

    overflow: hidden;

    background:
        #e9e6e1;
}


.open-photo {
    width: 100%;

    height: 100%;

    padding: 0;

    margin: 0;

    display: block;

    border: 0;

    background:
        transparent;

    cursor:
        zoom-in;
}


.polaroid-photo-area img,
.polaroid-photo-area video {
    width: 100%;

    height: 100%;

    display: block;

    object-fit:
        cover;
}


.polaroid-bottom {
    min-height:
        clamp(
            52px,
            8vw,
            86px
        );

    padding:
        clamp(
            8px,
            1.4vw,
            16px
        )
        2px
        0;

    display: flex;

    align-items: center;

    justify-content:
        space-between;

    gap: 8px;
}


.polaroid-writing {
    min-width: 0;

    display: flex;

    flex-direction: column;

    text-align: left;
}


.polaroid-name {
    overflow: hidden;

    white-space: nowrap;

    text-overflow:
        ellipsis;

    color:
        var(--ink);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(
            .74rem,
            2.2vw,
            1.18rem
        );

    font-style:
        italic;
}


.polaroid-date {
    margin-top: 2px;

    color:
        var(--muted);

    font-size:
        clamp(
            .54rem,
            1.7vw,
            .78rem
        );

    letter-spacing:
        .07em;
}


/* ================================================================
   UMDREHEN-BUTTON
================================================================ */

.flip-button {
    flex:
        0
        0
        auto;

    width:
        clamp(
            31px,
            5vw,
            41px
        );

    height:
        clamp(
            31px,
            5vw,
            41px
        );

    padding: 0;

    display: grid;

    place-items: center;

    border:
        1px
        solid
        rgba(
            36,
            33,
            31,
            .12
        );

    border-radius:
        50%;

    background:
        rgba(
            247,
            242,
            235,
            .84
        );

    color:
        var(--ink);

    font-size:
        clamp(
            .85rem,
            2vw,
            1.1rem
        );

    cursor: pointer;

    transition:
        transform .2s ease,
        background .2s ease;
}


.flip-button:hover {
    transform:
        rotate(-18deg);

    background:
        var(--paper-2);
}


/* ================================================================
   POLAROID RÜCKSEITE
================================================================ */

.flip-back {
    transform:
        rotateY(180deg);
}


.polaroid-back-paper {
    width: 100%;

    height: 100%;

    padding:
        clamp(
            14px,
            4vw,
            40px
        );

    overflow:
        auto;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

    background:
        radial-gradient(
            circle
            at
            50%
            20%,
            rgba(
                199,
                167,
                122,
                .13
            ),
            transparent
            13rem
        ),
        linear-gradient(
            145deg,
            #fffefa,
            #f8f3eb
        );

    border:
        1px
        solid
        rgba(
            70,
            60,
            50,
            .09
        );

    box-shadow:
        var(--polaroid-shadow);
}


.back-heart {
    margin-bottom:
        clamp(
            5px,
            1vw,
            12px
        );

    color:
        var(--champagne-dark);

    font-size:
        clamp(
            1rem,
            4vw,
            2rem
        );
}


.back-label {
    margin:
        0
        0
        4px;

    color:
        var(--muted);

    text-transform:
        uppercase;

    letter-spacing:
        .13em;

    font-size:
        clamp(
            .48rem,
            1.7vw,
            .72rem
        );
}


.flip-back h3 {
    margin:
        3px
        0
        8px;

    color:
        var(--ink);

    font-size:
        clamp(
            1rem,
            3.4vw,
            2rem
        );
}


.flip-back blockquote {
    max-width: 90%;

    max-height:
        5.5em;

    margin:
        clamp(
            5px,
            1.5vw,
            15px
        )
        auto;

    overflow-y: auto;

    color:
        var(--muted);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(
            .66rem,
            2.1vw,
            1rem
        );

    font-style:
        italic;

    line-height:
        1.45;
}


.memory-date {
    margin:
        5px
        0;

    color:
        var(--muted);

    font-size:
        clamp(
            .55rem,
            1.7vw,
            .85rem
        );
}


.signature {
    margin:
        5px
        0;

    color:
        var(--champagne-dark);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(
            .7rem,
            2vw,
            1.05rem
        );

    font-style:
        italic;
}


.flip-button-back {
    width: auto;

    height: auto;

    margin-top:
        clamp(
            5px,
            1vw,
            12px
        );

    padding:
        7px
        13px;

    border-radius:
        999px;

    font-size:
        clamp(
            .6rem,
            1.6vw,
            .8rem
        );
}


/* ================================================================
   HEIC-PLATZHALTER
================================================================ */

.heic-placeholder {
    width: 100%;

    height: 100%;

    padding:
        clamp(
            10px,
            3vw,
            30px
        );

    display: grid;

    place-content: center;

    text-align: center;

    background:
        linear-gradient(
            145deg,
            #ece8e1,
            #ded9d0
        );
}


.heic-placeholder span {
    display: block;

    margin-bottom: 8px;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(
            .8rem,
            2.6vw,
            1.5rem
        );
}


.heic-placeholder small {
    color:
        var(--muted);

    font-size:
        clamp(
            .55rem,
            1.7vw,
            .8rem
        );

    line-height:
        1.4;
}


/* ================================================================
   FOTO-GROẞANSICHT
================================================================ */

.photo-lightbox {
    position: fixed;

    inset: 0;

    z-index: 9999;

    padding:
        24px;

    display: none;

    align-items: center;

    justify-content: center;

    background:
        rgba(
            18,
            16,
            15,
            .93
        );

    backdrop-filter:
        blur(10px);
}


.photo-lightbox.open {
    display: flex;
}


.lightbox-content {
    width:
        min(
            1100px,
            100%
        );

    height:
        min(
            86vh,
            100%
        );

    display: flex;

    align-items: center;

    justify-content: center;
}


.lightbox-content img {
    max-width: 100%;

    max-height: 100%;

    object-fit: contain;

    border:
        8px
        solid
        #fff;

    box-shadow:
        0
        30px
        90px
        rgba(
            0,
            0,
            0,
            .38
        );
}


.lightbox-close {
    position: fixed;

    top: 17px;

    right: 19px;

    z-index: 10001;

    width: 44px;

    height: 44px;

    display: grid;

    place-items: center;

    border:
        1px
        solid
        rgba(
            255,
            255,
            255,
            .25
        );

    border-radius:
        50%;

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

    color:
        white;

    font-size: 1.8rem;

    cursor: pointer;
}


/* ================================================================
   FOOTER
================================================================ */

footer {
    display: flex;

    justify-content: center;

    gap: 12px;

    flex-wrap: wrap;

    padding:
        72px
        0
        0;

    color:
        var(--muted);

    font-size:
        .9rem;
}


footer strong {
    color:
        var(--ink);
}


/* ================================================================
   TABLET / HANDY
================================================================ */

@media (max-width: 820px) {

    .page {
        width:
            min(
                100% - 18px,
                1100px
            );
    }


    .hero {
        min-height:
            auto;

        grid-template-columns:
            1fr;

        padding-top:
            15px;
    }


    .hero-copy {
        padding:
            36px
            0
            5px;

        text-align:
            center;
    }


    .hero-text {
        margin-left:
            auto;

        margin-right:
            auto;
    }


    .countdown-card,
    .opened-card {
        margin-left:
            auto;

        margin-right:
            auto;
    }


    .hero-actions {
        text-align:
            center;
    }


    .couple-wrap {
        order: -1;

        height:
            410px;

        margin-bottom:
            -30px;
    }


    .couple-photo {
        max-height:
            430px;
    }


    .couple-glow {
        bottom:
            20px;
    }


    /*
     * AUCH AUF TABLETS:
     * exakt zwei Polaroids.
     */
    .polaroid-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(
                    0,
                    1fr
                )
            );
    }
}


/* ================================================================
   KLEINE HANDYS
================================================================ */

@media (max-width: 560px) {

    .page {
        width:
            calc(
                100% - 12px
            );

        padding-top:
            10px;
    }


    .hero-copy {
        padding-top:
            18px;
    }


    h1 {
        font-size:
            clamp(
                3rem,
                15vw,
                4.5rem
            );
    }


    .couple-wrap {
        height:
            350px;
    }


    .couple-photo {
        max-height:
            370px;
    }


    #countdown {
        grid-template-columns:
            repeat(
                2,
                1fr
            );
    }


    .countdown-card,
    .opened-card,
    .upload-card {
        border-radius:
            23px;
    }


    .upload-card {
        padding:
            24px
            18px;
    }


    .gallery-header {
        padding:
            35px
            4px
            30px;
    }


    .gallery-header h1 {
        font-size:
            clamp(
                2.6rem,
                14vw,
                4rem
            );
    }


    /*
     * Ganz wichtig:
     * NICHT auf eine Spalte wechseln.
     *
     * Auch auf kleinen iPhones:
     * IMMER zwei Bilder nebeneinander.
     */
    .polaroid-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(
                    0,
                    1fr
                )
            );

        gap:
            10px;
    }


    .polaroid-paper {
        padding:
            6px;

        padding-bottom:
            8px;
    }


    .polaroid-bottom {
        min-height:
            48px;

        padding-top:
            7px;
    }


    .polaroid-name {
        font-size:
            .67rem;
    }


    .polaroid-date {
        font-size:
            .5rem;
    }


    .flip-button {
        width:
            29px;

        height:
            29px;

        font-size:
            .78rem;
    }


    .photo-lightbox {
        padding:
            10px;
    }


    .lightbox-content img {
        border-width:
            5px;
    }

}


/* ================================================================
   SEHR KLEINE HANDYS
================================================================ */

@media (max-width: 370px) {

    .polaroid-grid {
        gap:
            7px;
    }


    .polaroid-name {
        font-size:
            .61rem;
    }


    .polaroid-date {
        font-size:
            .46rem;
    }


    .flip-button {
        width:
            26px;

        height:
            26px;
    }

}