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

:root {
    --palette-navy: #1E3954;
    --palette-periwinkle: #AFBEE6;
    --palette-crimson: #4B1721;
    --palette-dusty-rose: #4B1721;
    --palette-sage: #757F74;
    --palette-ivory: #F6F1EB;
}

@font-face {
    font-family: "Catchy Mager";
    src: url("media.php?file=Catchy%20Mager.otf") format("opentype");
}

@font-face {
    font-family: "Mistrully";
    src: url("media.php?file=Mistrully.ttf") format("truetype");
}


/* =========================================
   GRUNDLAYOUT
   ========================================= */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;

    background-color: #F6F1EB;

    color: #1E3954;

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

    text-align: center;
}


/* =========================================
   NAVIGATION
   ========================================= */

nav {
    position: relative;

    z-index: 10;

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 42px;

    padding: 27px 20px;

    background-color: #F6F1EB;

    border-bottom: 1px solid #1E3954;
}

nav a {
    color: #1E3954;

    text-decoration: none;

    font-size: 26px;

    transition: opacity 0.3s ease;
}

nav a:hover {
    opacity: 0.5;
}


/* =========================================
   HERO
   ========================================= */

.hero {
    min-height: 680px;

    display: flex;

    justify-content: center;

    align-items: center;

    position: relative;

    overflow: hidden;

    background-image: url("media.php?file=hero.jpeg");

    background-size: cover;

    background-position: center;

    animation: fadeIn 1.5s ease-out;
}

.hero::before {
    content: "";

    position: absolute;

    inset: 0;

    background: rgba(30,57,84, 0.18);
}

.hero-content {
    position: relative;

    z-index: 1;

    color: #F6F1EB;

    animation: heroText 1.2s ease-out 0.4s both;
}

.hero-small {
    margin: 0 0 18px;

    font-size: 25px;

    color: #F6F1EB;
}

.hero h1 {
    margin: 0;

    font-size: clamp(70px, 9vw, 120px);

    font-weight: normal;

    line-height: 1;

    color: #1E3954;

    text-shadow:
        0 2px 12px rgba(246,241,235, 0.45);
}

.hero-ornament {
    width: 130px;

    height: 1px;

    margin: 30px auto 22px;

    background-color: #F6F1EB;
}

.hero-date {
    margin: 0;

    font-size: 22px;

    letter-spacing: 1px;

    color: #F6F1EB;
}


/* =========================================
   MAIN
   ========================================= */

main {
    width: min(1400px, 100%);

    margin: 0 auto;

    padding: 0 50px;
}

section {
    padding: 140px 0;
}


/* =========================================
   SECTION HEADINGS
   ========================================= */

.section-intro {
    margin-bottom: 110px;
}

.section-kicker {
    display: block;

    margin-bottom: 14px;

    font-size: 18px;

    letter-spacing: 1px;

    opacity: 0.7;
}

.section-intro h2 {
    display: inline-block;

    margin: 0;

    font-size: clamp(40px, 4vw, 56px);

    font-weight: normal;
}

.section-intro h2::after {
    content: "";

    display: block;

    width: 65px;

    height: 1px;

    margin: 18px auto 0;

    background-color: #1E3954;
}


/* =========================================
   HOCHZEITSTAG
   ========================================= */

.timeline {
    position: relative;

    max-width: 700px;

    margin: 0 auto;

    text-align: left;
}

.timeline::before {
    content: "";

    position: absolute;

    left: 7px;

    top: 10px;

    bottom: 10px;

    width: 1px;

    background-color: #1E3954;
}

.timeline-item {
    position: relative;

    padding: 0 0 65px 48px;
}

.timeline-item:last-child {
    padding-bottom: 0;
}

.timeline-item::before {
    content: "";

    position: absolute;

    left: 3px;

    top: 6px;

    width: 9px;

    height: 9px;

    border-radius: 50%;

    background-color: #1E3954;
}

.timeline-date {
    margin-bottom: 10px;

    font-size: 22px;
}

.timeline-item h3 {
    margin: 0 0 10px;

    font-size: 33px;

    font-weight: normal;
}

.timeline-item p {
    margin: 0;

    font-size: 20px;

    color: #1E3954;
}


/* =========================================
   LOCATION
   ========================================= */

.location-section {
    width: 100%;
}

.location-intro {
    margin-bottom: 110px;
}

.location-content {
    width: 100%;
}

.location-item {
    display: grid;

    grid-template-columns: 1fr 1fr;

    align-items: center;

    gap: 80px;

    margin-bottom: 190px;

    text-align: left;
}

.location-item:last-child {
    margin-bottom: 0;
}


/* =========================================
   LOCATION BILDER
   ========================================= */

.location-image {
    width: 100%;

    display: flex;

    justify-content: center;
}

.location-image img {
    display: block;

    width: 800px;

    height: 400px;

    max-width: 100%;

    object-fit: cover;
}


/* =========================================
   LOCATION TEXT
   ========================================= */

.location-text {
    max-width: 470px;
}

.location-date {
    margin-bottom: 10px;

    font-size: 22px;
}

.location-text h3 {
    margin: 0;

    font-size: 42px;

    font-weight: normal;

    line-height: 1.1;
}

.location-text h4 {
    margin: 9px 0 25px;

    font-size: 31px;

    font-weight: normal;
}

.location-line {
    width: 58px;

    height: 1px;

    margin-bottom: 27px;

    background-color: #1E3954;
}

.location-description {
    margin: 0 0 14px;

    font-size: 20px;

    line-height: 1.55;

    color: #1E3954;
}

.location-address {
    margin: 30px 0 0;

    font-size: 19px;

    line-height: 1.5;
}

.location-link {
    display: inline-block;

    margin-top: 29px;

    padding-bottom: 5px;

    border-bottom: 1px solid #1E3954;

    color: #1E3954;

    text-decoration: none;

    font-size: 19px;
}

.location-link:hover {
    opacity: 0.5;
}


/* =========================================
   LOCATION REIHENFOLGE
   ========================================= */

.location-beachclub {
    grid-template-areas: "image text";
}

.location-beachclub .location-image {
    grid-area: image;
}

.location-beachclub .location-text {
    grid-area: text;
}


/* =========================================
   RSVP
   ========================================= */

.rsvp-section {
    max-width: 1000px;

    margin: 0 auto;
}

.rsvp-intro {
    max-width: 650px;

    margin: 0 auto 55px;
}

.rsvp-intro p {
    margin: 0 0 12px;

    font-size: 21px;

    line-height: 1.7;

    color: #1E3954;
}

.rsvp-hint {
    font-size: 18px !important;

    opacity: 0.7;
}


/* =========================================
   EINLADUNGSCODE
   ========================================= */

.rsvp-code-box {
    max-width: 700px;

    margin: 0 auto 90px;

    padding-bottom: 45px;

    border-bottom: 1px solid rgba(30,57,84, 0.25);
}

.rsvp-code-box label {
    display: block;

    margin-bottom: 18px;

    font-size: 21px;
}

.rsvp-code-row {
    display: flex;

    justify-content: center;

    gap: 12px;
}

.rsvp-code-row input {
    flex: 1;

    min-width: 0;

    padding: 17px 20px;

    border: 1px solid #1E3954;

    border-radius: 0;

    background-color: transparent;

    color: #1E3954;

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

    font-size: 19px;

    outline: none;
}

.rsvp-code-row input:focus {
    background-color: rgba(246,241,235, 0.35);
}

.rsvp-code-row button,
.rsvp-submit {
    padding: 17px 25px;

    border: 1px solid #1E3954;

    background-color: #1E3954;

    color: #F6F1EB;

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

    font-size: 19px;

    cursor: pointer;

    transition:
        background-color 0.3s ease,
        color 0.3s ease;
}

.rsvp-code-row button:hover,
.rsvp-submit:hover {
    background-color: transparent;

    color: #1E3954;
}

.rsvp-error {
    display: none;

    margin: 15px 0 0 !important;

    font-size: 17px !important;

    color: #4B1721 !important;
}

.rsvp-error.visible {
    display: block;
}


/* =========================================
   PERSONALISIERTE EINLADUNG
   ========================================= */

.rsvp-invitation {
    display: none;

    max-width: 850px;

    margin: 0 auto;

    padding: 65px 70px 75px;

    border-top: 1px solid #1E3954;

    border-bottom: 1px solid #1E3954;

    animation: invitationReveal 0.8s ease-out;
}

.rsvp-invitation.visible {
    display: block;
}

.rsvp-ornament {
    margin-bottom: 20px;

    font-size: 30px;

    letter-spacing: 5px;
}

.rsvp-welcome {
    margin: 0 0 10px;

    font-size: 20px;

    opacity: 0.75;
}

.rsvp-invitation h3 {
    margin: 0;

    font-size: 52px;

    font-weight: normal;

    line-height: 1.1;
}

.rsvp-welcome-text {
    max-width: 570px;

    margin: 25px auto 65px;

    font-size: 20px;

    line-height: 1.7;

    color: #1E3954;
}


/* =========================================
   RSVP VERANSTALTUNG
   ========================================= */

.rsvp-event {
    margin-bottom: 50px;

    padding: 35px 20px;

    border-top: 1px solid rgba(30,57,84, 0.25);

    border-bottom: 1px solid rgba(30,57,84, 0.25);
}

.rsvp-event-date {
    margin-bottom: 9px;

    font-size: 19px;

    letter-spacing: 0.5px;
}

.rsvp-event h4 {
    margin: 0 0 8px;

    font-size: 30px;

    font-weight: normal;
}

.rsvp-event p {
    margin: 0;

    font-size: 18px;

    color: #1E3954;
}


/* =========================================
   GÄSTELISTE
   ========================================= */

.guest-list {
    display: flex;

    flex-direction: column;

    gap: 18px;

    margin-bottom: 65px;
}

.guest-card {
    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 30px;

    padding: 25px 0;

    border-bottom: 1px solid rgba(30,57,84, 0.18);

    text-align: left;
}

.guest-info {
    flex: 1;
}

.guest-type {
    display: block;

    margin-bottom: 5px;

    font-size: 15px;

    letter-spacing: 0.8px;

    opacity: 0.65;
}

.guest-info h4 {
    margin: 0;

    font-size: 28px;

    font-weight: normal;
}

.guest-options {
    display: flex;

    gap: 10px;

    flex-wrap: wrap;

    justify-content: flex-end;
}

.guest-options label {
    cursor: pointer;
}

.guest-options input {
    position: absolute;

    opacity: 0;

    pointer-events: none;
}

.guest-options span {
    display: block;

    padding: 10px 17px;

    border: 1px solid rgba(30,57,84, 0.5);

    font-size: 17px;

    transition:
        background-color 0.25s ease,
        color 0.25s ease;
}

.guest-options input:checked + span {
    background-color: #1E3954;

    color: #F6F1EB;
}


/* =========================================
   KINDER / BABYS
   ========================================= */

.guest-child,
.guest-baby {
    padding-left: 25px;

    border-left: 1px solid rgba(30,57,84, 0.3);
}


/* =========================================
   STANDESAMT
   ========================================= */

.rsvp-standesamt {
    margin-bottom: 65px;

    padding: 45px 35px;

    border-top: 1px solid #1E3954;

    border-bottom: 1px solid #1E3954;
}

.rsvp-standesamt > h4 {
    margin: 0 0 10px;

    font-size: 31px;

    font-weight: normal;
}

.rsvp-standesamt > p {
    max-width: 560px;

    margin: 0 auto 35px;

    font-size: 18px;

    line-height: 1.6;

    color: #1E3954;
}

.standesamt-guest {
    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 30px;

    padding: 18px 0;

    border-top: 1px solid rgba(30,57,84, 0.15);

    text-align: left;
}

.standesamt-guest strong {
    display: block;

    font-size: 23px;

    font-weight: normal;
}


/* =========================================
   ZUSÄTZLICHE INFOS
   ========================================= */

.rsvp-extra {
    margin-bottom: 35px;

    text-align: left;
}

.rsvp-extra label {
    display: block;

    margin-bottom: 13px;

    font-size: 19px;
}

.rsvp-extra textarea {
    width: 100%;

    min-height: 140px;

    padding: 17px 18px;

    resize: vertical;

    border: 1px solid rgba(30,57,84, 0.55);

    border-radius: 0;

    background-color: transparent;

    color: #1E3954;

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

    font-size: 18px;

    outline: none;
}

.rsvp-extra textarea:focus {
    background-color: rgba(246,241,235, 0.35);
}


/* =========================================
   RSVP ABSENDEN
   ========================================= */

.rsvp-submit {
    min-width: 230px;
}

.rsvp-success {
    display: none;

    margin: 25px 0 0;

    font-size: 19px;

    opacity: 0.8;
}

.rsvp-success.visible {
    display: block;

    animation: successReveal 0.5s ease-out;
}

.rsvp-save-note {
    margin: 14px 0 0;
    font-size: 15px;
    opacity: 0.72;
}


/* =========================================
   FOTOS
   ========================================= */

#fotos {
    max-width: 850px;
    margin: 0 auto;
}

#fotos p {
    max-width: 650px;
    margin: 0 auto;
    font-size: 21px;
    line-height: 1.7;
    color: #1E3954;
}


/* Flappy Bird */
#flappy {
    max-width: 1100px;
    margin: 0 auto;
}
#flappy .flappy-content { min-width: 0; }
#flappy .flappy-intro { margin: 0 auto 20px; max-width: 650px; text-align: center; }
.flappy-card {
    max-width: 620px;
    margin: 0 auto;
    padding: 20px;
    border: 1px solid rgba(75, 23, 33, .24);
    border-radius: 22px;
    background: rgba(246, 241, 235, .82);
    box-shadow: 0 10px 30px rgba(30, 57, 84, .08);
}
.flappy-scorebar { display:flex; justify-content:space-between; gap:16px; margin:0 auto 12px; color:#1E3954; font-size:17px; }
.flappy-scorebar strong { color:#4B1721; font-size:20px; }
.flappy-stage { position:relative; overflow:hidden; width:100%; border:1px solid rgba(75,23,33,.3); border-radius:16px; background:#AFBEE6; }
#flappy-canvas { display:block; width:100%; height:auto; aspect-ratio:7 / 9; touch-action:manipulation; }
.flappy-start { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); padding:13px 24px; border:0; border-radius:999px; background:#1E3954; color:#F6F1EB; font:inherit; font-size:17px; cursor:pointer; box-shadow:0 5px 18px rgba(30,57,84,.22); }
.flappy-start:hover { background:#4B1721; }
.flappy-start[hidden] { display:none; }
.flappy-controls { margin:14px 0 0; text-align:center; font-size:16px; }
@media (min-width:1101px) {
    #flappy { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); align-items:start; column-gap:clamp(38px,6vw,90px); max-width:none; margin:0; }
    #flappy > .section-intro { grid-column:1; grid-row:1; position:sticky; top:105px; align-self:start; margin:0; text-align:left; }
    #flappy > .section-intro h2::after { margin-left:0; }
    #flappy .flappy-content { grid-column:2; grid-row:1; width:100%; }
    #flappy .flappy-intro { text-align:left; }
}
@media (max-width:1100px) {
    #flappy > .section-intro { margin-bottom:46px; text-align:left; }
    #flappy > .section-intro h2::after { margin-left:0; }
}
@media (max-width:700px) {
    .flappy-card { padding:13px; border-radius:17px; }
    .flappy-controls { font-size:15px; }
}
/* =========================================
   FOOTER
   ========================================= */

footer {
    padding: 90px 20px 110px;

    border-top: 1px solid rgba(30,57,84, 0.3);
}

.footer-ornament {
    margin-bottom: 15px;

    font-size: 30px;

    letter-spacing: 4px;
}

footer p {
    margin: 0;

    font-size: 18px;

    opacity: 0.7;
}


/* =========================================
   ANIMATIONEN
   ========================================= */

@keyframes fadeIn {

    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }

}


@keyframes heroText {

    from {
        opacity: 0;

        transform: translateY(25px);
    }

    to {
        opacity: 1;

        transform: translateY(0);
    }

}


@keyframes invitationReveal {

    from {
        opacity: 0;

        transform: translateY(25px);
    }

    to {
        opacity: 1;

        transform: translateY(0);
    }

}


@keyframes successReveal {

    from {
        opacity: 0;

        transform: translateY(10px);
    }

    to {
        opacity: 1;

        transform: translateY(0);
    }

}


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

@media (max-width: 950px) {

    nav {
        gap: 25px;
    }

    nav a {
        font-size: 22px;
    }

    main {
        padding: 0 30px;
    }

    .location-item {
        gap: 45px;
    }

    .location-image img {
        width: 100%;

        height: 330px;
    }

    .rsvp-invitation {
        padding-left: 45px;

        padding-right: 45px;
    }

}


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

@media (max-width: 700px) {

    nav {
        gap: 15px;

        padding: 20px 10px;

        flex-wrap: wrap;
    }

    nav a {
        font-size: 19px;
    }


    .hero {
        min-height: 540px;
    }

    .hero-small {
        font-size: 20px;
    }

    .hero-date {
        font-size: 18px;
    }


    main {
        padding: 0 18px;
    }

    section {
        padding: 85px 0;
    }


    .section-intro {
        margin-bottom: 60px;
    }


    .timeline-item {
        padding-left: 32px;

        padding-bottom: 50px;
    }

    .timeline-item h3 {
        font-size: 28px;
    }

    .timeline-date {
        font-size: 19px;
    }


    /* LOCATION */

    .location-item,
    .location-beachclub {
        display: flex;

        flex-direction: column;

        gap: 40px;

        margin-bottom: 110px;
    }

    .location-text {
        width: 100%;

        max-width: 600px;

        text-align: center;
    }

    .location-line {
        margin: 0 auto 25px;
    }

    .location-image img {
        width: 100%;

        height: auto;
    }

    .location-text h3 {
        font-size: 33px;
    }

    .location-text h4 {
        font-size: 25px;
    }

    .location-description {
        font-size: 18px;
    }

    .location-address {
        font-size: 17px;
    }


    /* RSVP */

    .rsvp-code-row {
        flex-direction: column;
    }

    .rsvp-code-row button {
        width: 100%;
    }

    .rsvp-invitation {
        padding: 50px 18px 60px;
    }

    .rsvp-invitation h3 {
        font-size: 40px;
    }

    .rsvp-welcome-text {
        font-size: 18px;

        margin-bottom: 50px;
    }

    .guest-card {
        flex-direction: column;

        align-items: flex-start;

        gap: 18px;

        padding: 25px 0;
    }

    .guest-options {
        justify-content: flex-start;
    }

    .guest-child,
    .guest-baby {
        padding-left: 18px;
    }

    .rsvp-standesamt {
        padding: 35px 18px;
    }

    .standesamt-guest {
        flex-direction: column;

        align-items: flex-start;

        gap: 15px;
    }

    .rsvp-submit {
        width: 100%;
    }

}

/* =========================================
   EINLADUNGS-INTRO – FOTOGRAFISCHE PAPIEROPTIK
   ========================================= */

.invite-gate {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: grid;
    place-items: center;
    overflow: hidden;
    padding: 32px 22px;
    background: #F6F1EB;
    isolation: isolate;
    opacity: 1;
    visibility: visible;
    transition: opacity 1s ease, visibility 1s ease;
}
.invite-gate[hidden] { display: none; }
.invite-photo {
    position: absolute;
    z-index: -2;
    inset: -2%;
    background-image: url("media.php?file=einladung-flatlay-crimson.png");
    background-size: cover;
    background-position: center 48%;
    transform: scale(1.015);
    transition: transform 2.2s cubic-bezier(.2,.75,.2,1), filter 1.2s ease;
}
.invite-shade {
    position: absolute;
    z-index: -1;
    inset: 0;
    background: linear-gradient(180deg, rgba(246,241,235,.08), rgba(246,241,235,.04) 48%, rgba(246,241,235,.36));
}
.invite-content {
    width: min(650px, 100%);
    margin-top: min(43vh, 390px);
    padding: 20px 24px 0;
    text-align: center;
    color: #1E3954;
    animation: introSoftRise 1s ease both;
}
.invite-eyebrow {
    margin: 0 0 12px;
    font-size: clamp(17px, 2.4vw, 24px);
    letter-spacing: 2px;
    text-shadow: 0 1px 8px rgba(246,241,235,.85);
}
.invite-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin: 0 auto 18px;
    color: #757F74;
}
.invite-divider::before, .invite-divider::after {
    content: "";
    width: 64px;
    height: 1px;
    background: rgba(117,127,116,.55);
}
.invite-divider span { font-size: 19px; }
.gate-form {
    width: min(580px, 100%);
    margin: 0 auto;
    padding: 18px 22px 8px;
    background: rgba(246,241,235,.78);
    border: 1px solid rgba(246,241,235,.72);
    box-shadow: 0 10px 32px rgba(30,57,84,.08);
    backdrop-filter: blur(5px);
}
.gate-form > label {
    display: block;
    margin-bottom: 6px;
    font-size: clamp(24px, 3vw, 32px);
    font-weight: normal;
    color: #1E3954;
}
.gate-form > p {
    margin: 0 0 17px;
    color: #1E3954;
    font-size: clamp(15px, 1.8vw, 18px);
    line-height: 1.5;
}
.gate-input-row { display: flex; gap: 10px; }
.gate-input-row input {
    flex: 1;
    min-width: 0;
    padding: 15px 17px;
    border: 1px solid rgba(30,57,84,.58);
    border-radius: 0;
    background: rgba(246,241,235,.84);
    color: #1E3954;
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 17px;
    outline: none;
}
.gate-input-row input:focus {
    border-color: #1E3954;
    box-shadow: 0 0 0 2px rgba(30,57,84,.12);
}
.gate-input-row button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 15px 20px;
    border: 1px solid #1E3954;
    background: #1E3954;
    color: #F6F1EB;
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 17px;
    #F6F1EB-space: nowrap;
    cursor: pointer;
    transition: background .25s ease, color .25s ease, transform .25s ease;
}
.gate-input-row button:hover {
    background: #F6F1EB;
    color: #1E3954;
    transform: translateY(-1px);
}
.gate-error { display: none; margin: 12px 0 0 !important; color: #4B1721 !important; }
.gate-error.visible { display: block; }
.invite-divider-bottom { margin-top: 20px; margin-bottom: 0; }
.invite-gate.is-opening .invite-photo {
    transform: scale(1.09);
    filter: brightness(1.05) saturate(.92);
}
.invite-gate.is-opening .invite-content {
    animation: inviteCardLift 1.35s cubic-bezier(.2,.75,.2,1) both;
}
.invite-gate.is-leaving { opacity: 0; visibility: hidden; pointer-events: none; }
@keyframes inviteCardLift {
    0% { opacity: 1; transform: translateY(0) scale(1); }
    45% { opacity: 1; transform: translateY(-22px) scale(1.025); }
    100% { opacity: 0; transform: translateY(-75px) scale(1.06); }
}
@keyframes introSoftRise {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 700px) {
    .invite-gate { padding: 18px 12px; }
    .invite-photo { background-position: center center; }
    .invite-content { margin-top: min(48vh, 360px); padding: 10px 8px 0; }
    .gate-form { padding: 16px 13px 8px; }
    .gate-input-row { flex-direction: column; }
    .gate-input-row button { width: 100%; }
    .invite-eyebrow { letter-spacing: 1px; }
}
@media (max-height: 760px) and (min-width: 701px) {
    .invite-content { margin-top: 36vh; }
}
@media (prefers-reduced-motion: reduce) {
    .invite-gate, .invite-photo, .invite-content { animation: none !important; transition: none !important; }
}

/* =========================================
   LOOK: GEÖFFNETER HOCHZEITSBRIEF
   Ergänzende Gestaltung – vorhandene Inhalte bleiben erhalten.
   ========================================= */
:root {
    --letter-paper: #F6F1EB;
    --letter-ink: #1E3954;
    --letter-rose: #4B1721;
    --letter-edge: #AFBEE6;
}

html {
    background: #F6F1EB;
    scroll-padding-top: 90px;
}

body {
    position: relative;
    background: #F6F1EB;
    padding: clamp(10px, 2.6vw, 34px);
}

.hero,
main,
footer {
    position: relative;
    z-index: 1;
}

.page-background {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 0;
    pointer-events: none;
    background-color: #F6F1EB;
    background-image: url("media.php?file=hochzeit-hintergrund-crimson.png");
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
}

body::before {
    content: "";
    position: fixed;
    top: 12px;
    right: 12px;
    bottom: 12px;
    left: 12px;
    z-index: 2;
    border: 1px solid rgba(117,127,116,.28);
    pointer-events: none;
}

nav {
    width: min(1400px, 100%);
    margin: 0 auto;
    gap: clamp(12px, 3vw, 42px);
    padding: 24px clamp(14px, 3vw, 42px);
    background: var(--letter-paper);
    border: 1px solid var(--letter-edge);
    border-bottom: 0;
    box-shadow: 0 12px 28px rgba(30,57,84,.06);
}

nav a {
    font-size: clamp(16px, 1.8vw, 24px);
    letter-spacing: .015em;
}

.hero {
    width: min(1400px, 100%);
    min-height: clamp(390px, 55vw, 680px);
    margin: 0 auto;
    border: 1px solid var(--letter-edge);
    border-top: 0;
    box-shadow: 0 22px 48px rgba(30,57,84,.10);
}

.hero::before {
    background: linear-gradient(180deg, rgba(30,57,84,.12), rgba(30,57,84,.34));
}

.hero h1 {
    color: #F6F1EB;
    text-shadow: 0 2px 18px rgba(30,57,84,.28);
}

main {
    position: relative;
    width: min(1400px, 100%);
    padding: 0 clamp(22px, 6vw, 90px);
    margin: 0 auto;
    background:
        repeating-linear-gradient(0deg, rgba(117,127,116,.018) 0, rgba(117,127,116,.018) 1px, transparent 1px, transparent 5px),
        var(--letter-paper);
    border: 1px solid var(--letter-edge);
    border-top: 0;
    box-shadow: 0 25px 55px rgba(30,57,84,.10);
}

/* Dekoratives T-Herz-J-Element entfernt. */

main section {
    position: relative;
    padding: clamp(70px, 9vw, 130px) 0;
}

main section + section {
    border-top: 1px solid rgba(75,23,33,.32);
}

.section-kicker {
    color: #4B1721;
    text-transform: uppercase;
    font-size: 15px;
    letter-spacing: .18em;
}

.section-intro {
    margin-bottom: clamp(48px, 7vw, 90px);
}

.section-intro h2 {
    color: var(--letter-ink);
}

.section-intro h2::after {
    width: 92px;
    height: 1px;
    background: var(--letter-rose);
}

.timeline-item,
.location-item,
.rsvp-card,
.guest-card,
.rsvp-standesamt {
    border-color: var(--letter-edge);
}

#fotos,
footer {
    width: min(1400px, 100%);
    margin: 0 auto;
    padding: 32px 20px;
    background: var(--letter-paper);
    border: 1px solid var(--letter-edge);
    border-top: 0;
    color: #1E3954;
}

@media (max-width: 700px) {
    body { padding: 8px; }
    body::before { top: 5px; right: 5px; bottom: 5px; left: 5px; }
    nav { flex-wrap: wrap; gap: 10px 18px; padding: 18px 12px; }
    nav a { font-size: 16px; }
    main { padding: 0 20px; }
    main section { padding: 64px 0; }
}

@media (max-width: 700px) {
    .page-background {
        background-position: 38% top;
    }
}

@media (orientation: portrait) {
    .page-background {
        background-position: 38% center;
    }
}

@media (max-width: 700px) and (orientation: portrait) {
    .page-background {
        background-position: 38% top;
    }
}


/* Catchy Mager wieder für die großen Überschriften */
.hero h1,
.section-intro h2,
.timeline-item h3,
.location-text h3,
.rsvp-invitation h3 {
    font-family: "Catchy Mager", Georgia, serif;
}

/* Hero-Foto: mehr Luft über den Köpfen und großzügigerer Bildausschnitt */
.hero {
    min-height: clamp(560px, 48vw, 720px);
    background-position: center 16%;
    background-size: cover;
}

.hero-content {
    transform: translateY(28px);
}

@media (max-width: 700px) {
    .hero {
        min-height: 590px;
        background-position: center 12%;
    }

    .hero-content {
        transform: translateY(24px);
    }
}

/* Feinschliff Hero: Schrift dezenter und etwas tiefer platzieren */
.hero-content {
    transform: translateY(54px);
}

.hero h1 {
    font-size: clamp(48px, 6.2vw, 84px);
    color: #F6F1EB;
    text-shadow: 0 2px 14px rgba(30,57,84, 0.35);
}

.hero-small {
    font-size: clamp(16px, 1.5vw, 21px);
    margin-bottom: 12px;
}

.hero-ornament {
    width: 100px;
    margin: 22px auto 16px;
}

.hero-date {
    font-size: clamp(15px, 1.35vw, 19px);
}

@media (max-width: 700px) {
    .hero-content {
        transform: translateY(42px);
        padding: 0 12px;
    }

    .hero h1 {
        font-size: clamp(42px, 10vw, 64px);
    }

    .hero-small {
        font-size: 16px;
    }

    .hero-date {
        font-size: 15px;
    }
}

/* HERO-FEINSCHLIFF: Schrift aus den Gesichtern herausnehmen */
.hero-content {
    top: 72px;
}

.hero h1 {
    font-size: clamp(48px, 5.2vw, 76px);
    line-height: 1.05;
}

.hero-small {
    font-size: 19px;
    margin-bottom: 12px;
}

.hero-ornament {
    width: 90px;
    margin: 20px auto 14px;
}

.hero-date {
    font-size: 18px;
}

@media (max-width: 700px) {
    .hero-content {
        top: 34px;
    }

    .hero h1 {
        font-size: clamp(38px, 9vw, 58px);
    }

    .hero-small {
        font-size: 16px;
    }

    .hero-date {
        font-size: 16px;
    }
}

/* Finale Positionierung: Schriftblock weiter unter die Gesichter setzen */
.hero-content {
    top: 172px;
}

@media (max-width: 700px) {
    .hero-content {
        top: 110px;
    }
}

/* Letzter Feinschliff: Namen etwas tiefer, Unterzeile näher an die Namen */
.hero-content {
    top: 197px;
}
.hero-small {
    margin-bottom: 5px;
}
@media (max-width: 700px) {
    .hero-content {
        top: 130px;
    }
    .hero-small {
        margin-bottom: 5px;
    }
}


/* Hero: Linie und Datum näher an die Namen rücken */
.hero-ornament {
    margin: 10px auto 8px;
}

.hero-date {
    margin-top: 0;
}

/* Feinschliff nach dem Screenshot: Hero-Schrift etwas höher, erster Abschnitt kompakter */
.hero-content {
    top: 177px;
}

#hochzeitstag {
    padding-top: 90px;
}

@media (max-width: 700px) {
    .hero-content {
        top: 115px;
    }

    #hochzeitstag {
        padding-top: 70px;
    }
}

/* Q&A – passend zum bestehenden Hochzeitsdesign */
.qa-section {
    padding: 100px 24px;
    background: #F6F1EB;
}
.qa-intro {
    max-width: 650px;
    margin: -12px auto 38px;
    color: #1E3954;
    font-size: 20px;
}
.qa-list {
    max-width: 850px;
    margin: 0 auto;
    text-align: left;
    border-top: 1px solid #AFBEE6;
}
.qa-item {
    border-bottom: 1px solid #AFBEE6;
    padding: 0 8px;
}
.qa-item summary {
    position: relative;
    cursor: pointer;
    list-style: none;
    padding: 22px 38px 22px 4px;
    color: #1E3954;
    font-size: 22px;
}
.qa-item summary::-webkit-details-marker { display: none; }
.qa-item summary::after {
    content: '+';
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    color: #4B1721;
    font-size: 28px;
}
.qa-item[open] summary::after { content: '−'; }
.qa-item p {
    margin: -2px 38px 24px 4px;
    color: #1E3954;
    font-size: 18px;
    line-height: 1.7;
}
@media (max-width: 700px) {
    .qa-section { padding: 70px 18px; }
    .qa-item summary { font-size: 19px; padding-top: 18px; padding-bottom: 18px; }
    .qa-item p { font-size: 17px; margin-right: 12px; }
    .qa-intro { font-size: 18px; }
}


/* HOCHZEITSTAG – bewährtes zweispaltiges Editorial-Layout wiederhergestellt */
#hochzeitstag .wedding-editorial-grid {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    align-items: start;
    gap: clamp(38px, 7vw, 110px);
}
#hochzeitstag .wedding-editorial-heading {
    position: sticky;
    top: 105px;
    padding-top: 12px;
    text-align: left;
}
#hochzeitstag .wedding-editorial-heading h2 {
    margin: 0;
    color: #1E3954;
    font-family: "Catchy Mager", Georgia, serif;
    font-size: clamp(48px, 6vw, 82px);
    font-weight: 400;
    line-height: 1.02;
    letter-spacing: -.045em;
}
#hochzeitstag .wedding-editorial-heading h2::after {
    content: "";
    display: block;
    width: 52px;
    height: 1px;
    margin-top: 26px;
    background: #4B1721;
}
#hochzeitstag .paper-flourish {
    margin: 24px 0 20px;
    color: #4B1721;
    font-size: 34px;
}
#hochzeitstag .wedding-intro-note {
    max-width: 390px;
    margin: 0;
    color: #1E3954;
    font-size: clamp(19px, 2vw, 23px);
    line-height: 1.65;
    text-align: left;
}
#hochzeitstag .timeline {
    position: relative;
    max-width: none;
    margin: 0;
    padding: 4px 0 0 30px;
    border-left: 1px solid rgba(75,23,33, .55);
}
#hochzeitstag .timeline::before {
    display: none;
}
#hochzeitstag .timeline-item {
    position: relative;
    padding: 0 0 58px 26px;
}
#hochzeitstag .timeline-item:last-child {
    padding-bottom: 0;
}
#hochzeitstag .timeline-item::before {
    left: -35px;
    top: 5px;
    width: 12px;
    height: 12px;
    border: 0;
    border-radius: 50%;
    background: #4B1721;
    box-shadow: 0 0 0 5px #F6F1EB;
}
#hochzeitstag .timeline-date {
    margin-bottom: 10px;
    color: #4B1721;
    font-size: 13px;
    letter-spacing: .18em;
    text-transform: uppercase;
}
#hochzeitstag .timeline-item h3 {
    margin: 0 0 9px;
    font-family: "Catchy Mager", Georgia, serif;
    font-size: clamp(26px, 2.8vw, 36px);
    font-weight: 400;
    line-height: 1.2;
}
#hochzeitstag .timeline-item p {
    margin: 0;
    color: #1E3954;
    font-size: 18px;
}
@media (max-width: 760px) {
    #hochzeitstag .wedding-editorial-grid {
        grid-template-columns: 1fr;
        gap: 46px;
    }
    #hochzeitstag .wedding-editorial-heading {
        position: static;
    }
    #hochzeitstag .wedding-editorial-heading h2 {
        font-size: clamp(48px, 13vw, 70px);
    }
    #hochzeitstag .timeline {
        margin-left: 4px;
    }
}

/* COUNTDOWN – ruhige Papierkarte unter dem Titelbild */
#countdown.countdown-section {
    padding: clamp(42px, 6vw, 76px) 0;
    text-align: center;
}
#countdown .countdown-shell {
    max-width: 1050px;
    margin: 0 auto;
    padding: clamp(24px, 4.5vw, 48px) clamp(14px, 3vw, 32px);
    border-top: 1px solid rgba(75,23,33, .55);
    border-bottom: 1px solid rgba(75,23,33, .55);
    background: rgba(246,241,235, .58);
}
#countdown .countdown-shell > .section-kicker {
    display: block;
    margin-bottom: 10px;
}
#countdown h2 {
    margin: 0;
    color: #1E3954;
    font-family: "Catchy Mager", Georgia, serif;
    font-size: clamp(30px, 4vw, 48px);
    font-weight: 400;
}
#countdown .countdown-date {
    margin: 8px 0 32px;
    color: #4B1721;
    font-size: 18px;
    letter-spacing: .08em;
}
#countdown .countdown-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
#countdown .countdown-unit {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 0 12px;
    border-right: 1px solid rgba(75,23,33, .4);
}
#countdown .countdown-unit:last-child {
    border-right: 0;
}
#countdown .countdown-value {
    color: #1E3954;
    font-family: "Catchy Mager", Georgia, serif;
    font-size: clamp(42px, 7vw, 76px);
    line-height: 1.05;
    font-variant-numeric: tabular-nums;
}
#countdown .countdown-label {
    color: #4B1721;
    font-size: 14px;
    letter-spacing: .13em;
    text-transform: uppercase;
}
#countdown .countdown-complete {
    margin: 24px 0 0;
    color: #4B1721;
    font-family: "Catchy Mager", Georgia, serif;
    font-size: clamp(26px, 4vw, 38px);
}
@media (max-width: 600px) {
    #countdown .countdown-date {
        margin-bottom: 24px;
        font-size: 15px;
    }
    #countdown .countdown-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        row-gap: 18px;
    }
    #countdown .countdown-unit {
        padding: 8px 6px;
        border-right: 0;
    }
    #countdown .countdown-unit:nth-child(odd) {
        border-right: 1px solid rgba(75,23,33, .4);
    }
    #countdown .countdown-value {
        font-size: clamp(42px, 13vw, 62px);
    }
}

/* Die übrigen Hauptabschnitte folgen derselben Editorial-Aufteilung. */
@media (min-width: 1101px) {
    #location,
    #rsvp,
    #qa,
    #fotos {
        display: grid;
        grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
        align-items: start;
        column-gap: clamp(38px, 6vw, 90px);
    }

    #fotos {
        max-width: none;
        margin: 0;
    }

    #location > .section-intro,
    #rsvp > .section-intro,
    #qa > .section-intro,
    #fotos > .section-intro {
        grid-column: 1;
        grid-row: 1;
        position: sticky;
        top: 105px;
        align-self: start;
        margin: 0;
        text-align: left;
    }

    #location > .section-intro h2::after,
    #rsvp > .section-intro h2::after,
    #qa > .section-intro h2::after,
    #fotos > .section-intro h2::after {
        margin-left: 0;
    }

    #location > .location-content {
        grid-column: 2;
        grid-row: 1;
    }

    #location .location-item {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "image" "text";
        gap: 24px;
        margin-bottom: 64px;
    }

    #location .location-image img {
        width: 100%;
        height: auto;
        max-height: 440px;
    }

    #location .location-text {
        max-width: none;
    }

    #rsvp {
        max-width: none;
        margin: 0;
    }

    #rsvp > .rsvp-intro,
    #rsvp > .rsvp-code-box,
    #rsvp > .rsvp-invitation {
        grid-column: 2;
        max-width: none;
        width: 100%;
    }

    #rsvp > .rsvp-intro {
        grid-row: 1;
        position: static;
        margin: 0 0 24px;
        text-align: left;
    }

    #rsvp > .rsvp-code-box {
        grid-row: 2;
        margin: 0 0 44px;
        padding-bottom: 32px;
    }

    #rsvp > .rsvp-invitation {
        grid-row: 3;
        padding: 42px 32px;
    }

    #qa > .qa-intro {
        grid-column: 1;
        grid-row: 2;
        position: sticky;
        top: 105px;
        align-self: start;
        margin: 18px 0 0;
        text-align: left;
    }

    #qa > .qa-list {
        grid-column: 2;
        grid-row: 1 / span 2;
        width: 100%;
    }

    #fotos > p {
        grid-column: 2;
        grid-row: 1;
        width: 100%;
        margin: 0;
        padding: 34px;
        border: 1px solid rgba(175, 190, 230, .8);
        background: rgba(246, 241, 235, .7);
        text-align: left;
    }
}

@media (max-width: 1100px) {
    #location > .section-intro,
    #rsvp > .section-intro,
    #qa > .section-intro,
    #fotos > .section-intro {
        margin-bottom: 46px;
        text-align: left;
    }

    #location > .section-intro h2::after,
    #rsvp > .section-intro h2::after,
    #qa > .section-intro h2::after,
    #fotos > .section-intro h2::after {
        margin-left: 0;
    }

    #location .location-item {
        margin-bottom: 70px;
    }
}
/* Aufklappbare Hauptnavigation */
nav.site-nav {
    position: relative;
    z-index: 100;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    min-height: 68px;
}
nav.site-nav .menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 44px;
    padding: 0;
    border: 1px solid rgba(75, 23, 33, .38);
    border-radius: 8px;
    background: #F6F1EB;
    color: #4B1721;
    cursor: pointer;
}
nav.site-nav .menu-toggle:hover {
    background: #AFBEE6;
}
nav.site-nav .burger-icon {
    position: relative;
    display: block;
    width: 22px;
    height: 18px;
}
nav.site-nav .burger-icon span,
nav.site-nav .burger-icon span::before,
nav.site-nav .burger-icon span::after {
    position: absolute;
    left: 0;
    width: 22px;
    height: 2px;
    border-radius: 2px;
    background: #4B1721;
    transition: transform .2s ease, opacity .2s ease;
}
nav.site-nav .burger-icon span {
    top: 8px;
}
nav.site-nav .burger-icon span::before,
nav.site-nav .burger-icon span::after {
    content: "";
}
nav.site-nav .burger-icon span::before {
    top: -7px;
}
nav.site-nav .burger-icon span::after {
    top: 7px;
}
nav.site-nav.menu-open .burger-icon span {
    background: transparent;
}
nav.site-nav.menu-open .burger-icon span::before {
    transform: translateY(7px) rotate(45deg);
}
nav.site-nav.menu-open .burger-icon span::after {
    transform: translateY(-7px) rotate(-45deg);
}
nav.site-nav .nav-links {
    position: absolute;
    top: calc(100% - 1px);
    right: clamp(12px, 3vw, 42px);
    display: none;
    flex-direction: column;
    min-width: 250px;
    padding: 8px 18px;
    border: 1px solid #AFBEE6;
    border-radius: 0 0 12px 12px;
    background: rgba(246, 241, 235, .98);
    box-shadow: 0 16px 32px rgba(30, 57, 84, .16);
}
nav.site-nav.menu-open .nav-links {
    display: flex;
}
nav.site-nav .nav-links a {
    width: 100%;
    padding: 12px 4px;
    border-bottom: 1px solid rgba(175, 190, 230, .65);
    color: #1E3954;
    font-family: "Cormorant Garamond", Georgia, serif;
    text-align: left;
}
nav.site-nav .nav-links a:last-child {
    border-bottom: 0;
}
nav.site-nav .nav-links a:hover {
    color: #4B1721;
    opacity: 1;
}
nav.site-nav :focus-visible {
    outline: 2px solid #4B1721;
    outline-offset: 3px;
}
@media (max-width: 600px) {
    nav.site-nav {
        min-height: 58px;
        padding: 10px 12px;
    }
    nav.site-nav .nav-links {
        right: 12px;
        width: min(320px, calc(100vw - 40px));
        min-width: 0;
    }
}

/* Das Menü liegt über dem Hero statt in einer eigenen Leiste. */
.hero nav.site-nav {
    position: absolute;
    top: 22px;
    right: clamp(18px, 4vw, 48px);
    width: auto;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}
.hero nav.site-nav .menu-toggle {
    border-color: rgba(246, 241, 235, .9);
    background: rgba(30, 57, 84, .2);
    color: #F6F1EB;
}
.hero nav.site-nav .menu-toggle:hover {
    background: rgba(246, 241, 235, .18);
}
.hero nav.site-nav .burger-icon span,
.hero nav.site-nav .burger-icon span::before,
.hero nav.site-nav .burger-icon span::after {
    background: #F6F1EB;
}
.hero nav.site-nav.menu-open .burger-icon span {
    background: transparent;
}
.hero nav.site-nav .nav-links {
    top: calc(100% + 8px);
    right: 0;
}
.hero nav.site-nav :focus-visible {
    outline-color: #F6F1EB;
}

/* Sieben leere Polaroid-Rahmen liegen locker am Rand des Hintergrunds. */
@media (min-width: 1900px) {
    .polaroid-backdrop {
        position: fixed;
        z-index: 0;
        inset: 0;
        overflow: hidden;
        pointer-events: none;
    }

    .polaroid-frame {
        position: absolute;
        display: block;
        width: clamp(190px, 10vw, 250px);
        aspect-ratio: 0.79;
        background: #F6F1EB;
        box-shadow: 0 9px 22px rgba(30, 57, 84, .24);
    }

    .polaroid-frame img {
        position: absolute;
        inset: 12px 12px 34px;
        width: calc(100% - 24px);
        height: calc(100% - 46px);
        display: block;
        object-fit: cover;
        border: 1px solid rgba(30, 57, 84, .12);
    }

    .polaroid-frame-1 {
        top: 60%;
        left: clamp(24px, 6vw, 150px);
        transform: rotate(-8deg);
    }

    .polaroid-frame-2 {
        top: 5%;
        right: clamp(24px, 3vw, 72px);
        transform: rotate(6deg);
    }

    .polaroid-frame-3 {
        top: 79%;
        left: calc((100vw - 1400px) / 5);
        width: clamp(280px, 14vw, 350px);
        aspect-ratio: 1.34;
        transform: rotate(4deg);
    }

    .polaroid-frame-4 {
        top: 27%;
        right: calc((100vw - 1400px) / 5);
        transform: rotate(-7deg);
    }

    .polaroid-frame-5 {
        top: 69%;
        left: clamp(22px, 2.5vw, 64px);
        transform: rotate(10deg);
    }

    .polaroid-frame-6 {
        top: 50%;
        right: clamp(22px, 2.5vw, 64px);
        transform: rotate(-3deg);
    }

    .polaroid-frame-7 {
        top: 73%;
        right: calc((100vw - 1400px) / 3.5);
        transform: rotate(8deg);
    }
}
@media (max-width: 600px) {
    .hero nav.site-nav {
        top: 14px;
        right: 14px;
    }
}