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

:root {
    --rosa: #c98f9d;
    --dunkelrosa: #986674;
    --anrede-rosa: #b76e79;
    --text: #4f3d42;
    --weiss: #ffffff;
--glas: rgba(252,240,244,.40);
}

* {
    box-sizing: border-box;
}

html,
body {
    min-height: 100%;
    margin: 0;
}

body {
    font-family: "Cormorant Garamond", Georgia, serif;
    color: var(--text);
}

/* STARTSEITE */

.startseite {
    min-height: 100svh;
    background:
        linear-gradient(
            rgba(126, 78, 91, 0.08),
            rgba(126, 78, 91, 0.14)
        ),
        url("Rosen.png") center center / cover no-repeat;
    animation: hintergrundEinblenden 1.3s ease both;
}

.einladung {
    min-height: 100svh;
    display: grid;
    place-items: center;
    padding:
        max(24px, env(safe-area-inset-top))
        18px
        max(24px, env(safe-area-inset-bottom));
}

/* TRANSPARENTE KARTE */

.karte {
    width: min(100%, 430px);
    padding: 38px 28px 32px;
    text-align: center;

    position: relative;
    overflow: hidden;

    /* Kein backdrop-filter mehr */
    background: rgba(255, 246, 249, 0.50);

    border: 1px solid rgba(255, 255, 255, 0.48);
    border-radius: 30px;

    box-shadow:
        0 20px 60px rgba(83, 48, 58, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}


/* ANNA & ROBIN */

.brautpaar {

    margin: 0 0 24px;

    font-family: "Allura", cursive;

    font-size: clamp(62px, 11vw, 82px);

    font-weight: 400;

    line-height: 1;

    /* etwas dunkler */
    color: #9b5c69;

    /* dunkle, feine Kontur */
    -webkit-text-stroke: 0.35px rgba(92,58,66,.55);

    text-shadow:
        -0.4px -0.4px 0 rgba(92,58,66,.22),
         0.4px -0.4px 0 rgba(92,58,66,.22),
        -0.4px  0.4px 0 rgba(92,58,66,.22),
         0.4px  0.4px 0 rgba(92,58,66,.22),
         0 2px 8px rgba(92,58,66,.12);

    white-space: nowrap;

    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;

    opacity: 0;

    animation:
        brautpaarEinblenden
        1.4s
        .55s
        ease
        forwards;
}

/* PERSÖNLICHE ANREDE MIT LICHTSCHEIN */

.anrede-container {
    display: flex;
    justify-content: center;
    overflow: hidden;
    margin: 0 -8px;
    padding: 4px 8px 8px;
}

.anrede-reveal {
    position: relative;
    display: inline-block;
    margin: 0;

    font-size: clamp(27px, 7vw, 38px);
    font-weight: 600;
    line-height: 1.3;

    color: var(--anrede-rosa);

    text-shadow:
        0 1px 1px rgba(255, 255, 255, 0.65),
        0 3px 9px rgba(183, 110, 121, 0.16);

    opacity: 0;

    animation:
        anredeEinblenden
        1.35s
        1.35s
        ease
        forwards;
}

.anrede-reveal::after {
    content: "";
    position: absolute;
    top: -10%;
    left: -35%;
    width: 24%;
    height: 120%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, 0.78),
            transparent
        );

    transform: skewX(-18deg);
    opacity: 0;
    pointer-events: none;

    animation:
        lichtschein
        1.7s
        1.75s
        ease-in-out
        forwards;
}

/* RESTLICHER INHALT */

.inhalt-einblenden {
    opacity: 0;

    animation:
        inhaltEinblenden
        1.2s
        2.95s
        ease
        forwards;
}

.einladungstext {
    margin: 22px auto 0;
    max-width: 340px;
    font-size: 22px;
    line-height: 1.38;
}

.trennlinie {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 22px auto 18px;
    width: 85%;
    color: var(--dunkelrosa);
}

.trennlinie::before,
.trennlinie::after {
    content: "";
    flex: 1;
    height: 1px;
    background:
        linear-gradient(
            to right,
            transparent,
            rgba(152, 102, 116, 0.45),
            transparent
        );
}

.trennlinie span {
    font-size: 14px;
    opacity: 0.8;
}

.hinweis {
    margin: 0 auto;
    max-width: 340px;
    font-size: 17px;
    line-height: 1.5;
}

/* PIN-FORMULAR */

.pin-formular {
    margin-top: 25px;
}

.pin-formular label {
    display: block;
    margin-bottom: 9px;

    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;

    color: var(--dunkelrosa);
}

.pin-formular input {
    width: 100%;
    height: 57px;
    padding: 0 16px;

    text-align: center;

    font-family: "Cormorant Garamond", serif;
    font-size: 25px;
    font-weight: 600;
    letter-spacing: 0.35em;

    color: var(--text);
background: rgba(255, 246, 249, 0.50);

    border: 1px solid rgba(152, 102, 116, 0.32);
    border-radius: 16px;
    outline: none;

    transition:
        border-color 0.25s ease,
        box-shadow 0.25s ease,
        background 0.25s ease;
}

.pin-formular input::placeholder {
    color: rgba(79, 61, 66, 0.38);
}

.pin-formular input:focus {
    background: rgba(255, 255, 255, 0.88);
    border-color: var(--dunkelrosa);

    box-shadow:
        0 0 0 4px rgba(152, 102, 116, 0.12);
}

.pin-formular button {
    width: 100%;
    margin-top: 15px;
    padding: 16px 20px;

    border: 0;
    border-radius: 16px;

    font-family: "Cormorant Garamond", serif;
    font-size: 19px;
    font-weight: 600;

    color: var(--weiss);

    background:
        linear-gradient(
            135deg,
            rgba(201, 143, 157, 0.96),
            rgba(152, 102, 116, 0.96)
        );

    box-shadow:
        0 11px 26px rgba(152, 102, 116, 0.24);

    cursor: pointer;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        filter 0.2s ease;
}

.pin-formular button:hover {
    transform: translateY(-2px);
    box-shadow:
        0 14px 30px rgba(152, 102, 116, 0.3);
    filter: brightness(1.03);
}

.pin-formular button:active {
    transform: translateY(0);
}

/* FEHLERMELDUNG */

.fehler {
    margin: 12px 0 0;
    font-size: 16px;
    color: #9e3248;
}

/* ZWEITE SEITE */

.detailseite {
    min-height: 100svh;

    background:
        linear-gradient(
            180deg,
            #f9edef,
            #f3e1e6
        );
}

.bildseite {
    min-height: 100svh;
    display: grid;
    place-items: center;

    padding:
        max(12px, env(safe-area-inset-top))
        12px
        max(12px, env(safe-area-inset-bottom));
}

.bildseite img {
    display: block;
    width: 100%;
    max-width: 900px;
    max-height: calc(100svh - 24px);

    object-fit: contain;
    border-radius: 20px;

    box-shadow:
        0 18px 50px rgba(79, 61, 66, 0.2);

    opacity: 0;

    animation:
        bildEinblenden
        1.2s
        ease
        forwards;
}

/* ANIMATIONEN */

@keyframes hintergrundEinblenden {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes brautpaarEinblenden {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes anredeEinblenden {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes lichtschein {
    0% {
        left: -35%;
        opacity: 0;
    }

    18% {
        opacity: 0.85;
    }

    82% {
        opacity: 0.85;
    }

    100% {
        left: 112%;
        opacity: 0;
    }
}

@keyframes inhaltEinblenden {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes bildEinblenden {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* IPHONE UND KLEINE DISPLAYS */

@media (max-width: 480px) {
    .einladung {
        padding-left: 14px;
        padding-right: 14px;
    }

    .karte {
        padding: 31px 21px 27px;
        border-radius: 25px;

        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    .brautpaar {
        margin-bottom: 21px;
    }

    .anrede-reveal {
        font-size: clamp(25px, 7vw, 34px);
    }

    .einladungstext {
        font-size: 20px;
    }

    .hinweis {
        font-size: 16px;
    }

    .pin-formular input {
        height: 55px;
    }
}

/* SEHR KLEINE DISPLAYS */

@media (max-width: 360px) {
    .karte {
        padding: 27px 18px 23px;
    }

    .brautpaar {
        font-size: 45px;
    }

    .anrede-reveal {
        font-size: 24px;
    }

    .einladungstext {
        font-size: 19px;
    }
}

/* WENIGER ANIMATIONEN */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-delay: 0ms !important;
        scroll-behavior: auto !important;
    }
}

.hochzeitsringe{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    margin:0 10px;
    vertical-align:middle;
}

.hochzeitsringe svg{
    width:38px;
    height:22px;
    overflow:visible;
    filter:
        drop-shadow(0 1px 2px rgba(255,255,255,.6))
        drop-shadow(0 2px 5px rgba(0,0,0,.10));
}

.emoji-ringe{
    font-size: 0.60em;
    vertical-align: middle;
    margin: 0 2px;
}

/* =========================================
   DETAILSEITE – SAVE THE DATE
========================================= */

.detailseite {
    min-height: 100svh;

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

    color: var(--text);

    background:
        linear-gradient(
            rgba(126, 78, 91, 0.08),
            rgba(126, 78, 91, 0.14)
        ),
        url("Rosen.png")
        center center
        / cover
        no-repeat;
}


/* GESAMTER SEITENBEREICH */

.details-bereich {
    min-height: 100svh;

    display: grid;
    place-items: center;

    padding:
        max(24px, env(safe-area-inset-top))
        18px
        max(24px, env(safe-area-inset-bottom));
}


/* TRANSPARENTE KARTE */

.details-karte {
    width: min(100%, 620px);

    padding:
        42px
        34px
        38px;

    text-align: center;

    background:
        rgba(255, 246, 249, 0.60);

    border:
        1px
        solid
        rgba(255, 255, 255, 0.60);

    border-radius: 30px;

    box-shadow:
        0 20px 60px
        rgba(83, 48, 58, 0.14),
        inset 0 1px 0
        rgba(255, 255, 255, 0.30);

    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}


/* DATUM */

.details-datum {
    margin:
        22px
        0
        10px;

    font-family:
        "Allura",
        cursive;

    font-size:
        clamp(
            48px,
            10vw,
            72px
        );

    line-height: 1;

    color: #9b5c69;

    -webkit-text-stroke:
        0.25px
        rgba(92, 58, 66, 0.45);

    text-shadow:
        -0.4px -0.4px 0 rgba(92, 58, 66, 0.18),
         0.4px -0.4px 0 rgba(92, 58, 66, 0.18),
        -0.4px  0.4px 0 rgba(92, 58, 66, 0.18),
         0.4px  0.4px 0 rgba(92, 58, 66, 0.18),
         0 2px 8px rgba(92, 58, 66, 0.12);

    opacity: 0;

    animation:
        detailsEinblenden
        1.3s
        0.75s
        ease
        forwards;
}


/* SAVE THE DATE */

.details-titel {
    margin: 0;

    font-size:
        clamp(
            27px,
            6vw,
            38px
        );

    font-weight: 600;

    letter-spacing: 0.10em;

    text-transform: uppercase;

    color: var(--anrede-rosa);

    opacity: 0;

    animation:
        detailsEinblenden
        1.2s
        0.25s
        ease
        forwards;
}


/* TRENNLINIE */

.details-trenner {
    display: flex;
    align-items: center;

    gap: 12px;

    width: 82%;

    margin:
        24px
        auto
        20px;

    color: var(--dunkelrosa);

    opacity: 0;

    animation:
        detailsEinblenden
        1.1s
        1.05s
        ease
        forwards;
}

.details-trenner-zwei {

    opacity: 0;

    animation:
        detailsEinblenden
        1.1s
        1.70s
        ease
        forwards;

}


.details-trenner::before,
.details-trenner::after {
    content: "";

    flex: 1;

    height: 1px;

    background:
        linear-gradient(
            to right,
            transparent,
            rgba(152, 102, 116, 0.48),
            transparent
        );
}


.details-trenner span {
    font-size: 14px;
}


/* ORT */

.details-ort-label {
    margin:
        0
        0
        4px;

    font-size: 14px;

    font-weight: 600;

    letter-spacing: 0.22em;

    text-transform: uppercase;

    color: var(--dunkelrosa);

    opacity: 0;

    animation:
        detailsEinblenden
        1.1s
        1.25s
        ease
        forwards;
}


.details-ort {
    margin: 0;

    font-size:
        clamp(
            25px,
            6vw,
            36px
        );

    font-weight: 600;

    line-height: 1.2;

    color: var(--text);

    opacity: 0;

    animation:
        detailsEinblenden
        1.1s
        1.45s
        ease
        forwards;
}


/* TEXT */

.details-text {
    max-width: 510px;

    margin:
        28px
        auto
        0;

    font-size: 19px;

    line-height: 1.55;

    opacity: 0;

    animation:
        detailsEinblenden
        1.3s
        1.75s
        ease
        forwards;
}


.details-text p {
    margin:
        0
        0
        18px;
}


.details-text p:last-child {
    margin-bottom: 0;
}


.details-anrede {
    font-size: 21px;

    font-weight: 600;

    color: var(--anrede-rosa);
}


/* ABSCHLUSS */

.details-abschluss {

    margin: 18px 0 2px;

    font-size: 22px;

    font-weight: 600;

    font-style: normal;

    color: #9b5c69;

    opacity: 0;

    animation:
        detailsEinblenden
        1.1s
        2.15s
        ease
        forwards;
}


.details-namen {
   margin: 10px 0 0;

    font-family: "Allura", cursive;

    font-size: clamp(50px, 10vw, 70px);

    font-weight: 400;

    line-height: 1;

    color: #9b5c69;

    -webkit-text-stroke: 0.35px rgba(92,58,66,.55);

    text-shadow:
        -0.4px -0.4px 0 rgba(92,58,66,.22),
         0.4px -0.4px 0 rgba(92,58,66,.22),
        -0.4px  0.4px 0 rgba(92,58,66,.22),
         0.4px  0.4px 0 rgba(92,58,66,.22),
         0 2px 8px rgba(92,58,66,.12);

    white-space: nowrap;

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

    gap: 10px;

    opacity: 0;

    animation:
        detailsEinblenden
        1.2s
        2.35s
        ease
        forwards;
}


/* SANFTES EINBLENDEN */

@keyframes detailsEinblenden {

    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }

}


/* IPHONE */

@media (max-width: 480px) {

    .details-bereich {
        padding-left: 14px;
        padding-right: 14px;
    }


    .details-karte {
        padding:
            34px
            22px
            30px;

        border-radius: 25px;

        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }


    .details-datum {
        font-size:
            clamp(
                48px,
                13vw,
                68px
            );
    }


    .details-titel {
        font-size: 25px;
    }


    .details-text {
        font-size: 17px;

        line-height: 1.5;
    }


    .details-anrede {
        font-size: 19px;
    }


    .details-text p {
        margin-bottom: 16px;
    }

.details-ort a {

    color: #9b5c69;

    text-decoration: none;

    transition:
        color .25s ease;

}

.details-ort a:hover {

    color: #7f4956;

}

.details-ps{

    margin-top: 28px;

    padding-top: 20px;

    border-top: 1px solid rgba(152,102,116,.20);

    font-size: 15px;

    line-height: 1.5;

    color: rgba(79,61,66,.80);

    opacity: 0;

    animation:
        detailsEinblenden
        1.2s
        2.85s
        ease
        forwards;

}
.brautpaar-herz {
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 24px;
    font-weight: 400;

    /* exakt dieselbe Farbe wie Anna & Robin */
    color: #9b5c69;
    -webkit-text-fill-color: #9b5c69;

    /* gleiche dunkle Kontur */
    -webkit-text-stroke: 0.35px rgba(92, 58, 66, 0.55);

    text-shadow:
        -0.4px -0.4px 0 rgba(92, 58, 66, 0.22),
         0.4px -0.4px 0 rgba(92, 58, 66, 0.22),
        -0.4px  0.4px 0 rgba(92, 58, 66, 0.22),
         0.4px  0.4px 0 rgba(92, 58, 66, 0.22),
         0 2px 8px rgba(92, 58, 66, 0.12);

    opacity: 1;

margin-left: 2px;
margin-right: -2px;

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

transform: translateY(-2px);
}

.details-datum-container {
    display: flex;
    justify-content: center;
}

.details-datum {
    position: relative;
    display: inline-block;
    overflow: hidden;

    width: fit-content;
    max-width: 100%;

    margin: 22px 0 10px;

    padding: 0 8px 4px;
}

.details-datum::after {
    content: "";

    position: absolute;
    top: -10%;
    left: -35%;

    width: 24%;
    height: 120%;

    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.78),
        transparent
    );

    transform: skewX(-18deg);
    opacity: 0;
    pointer-events: none;

    animation:
        lichtschein
        1.7s
        1.65s
        ease-in-out
        forwards;
}

/* =========================================
   ZU- UND ABSAGE
========================================= */

.rsvp-block {
    margin-top: 32px;
    padding-top: 24px;

    border-top:
        1px solid
        rgba(152, 102, 116, 0.22);

    opacity: 0;

    animation:
        detailsEinblenden
        1.2s
        2.85s
        ease
        forwards;
}

.rsvp-text{
    margin: 0;

    font-size:16px;

    line-height:1.6;

    color:#4f3d42;

    font-weight:500;
}

.rsvp-buttons {
    display: flex;
    justify-content: center;
    gap: 12px;
}

.rsvp-buttons form {
    flex: 1;
    max-width: 190px;
    margin: 0;
}

.rsvp-btn {
    width: 100%;
    padding: 14px 16px;

    border:
        1px solid
        rgba(152, 102, 116, 0.35);

    border-radius: 16px;

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

    font-size: 18px;
    font-weight: 600;

    cursor: pointer;

    box-shadow:
        0 9px 22px
        rgba(152, 102, 116, 0.18);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        filter 0.2s ease;
}

.rsvp-zusage {
    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            rgba(201, 143, 157, 0.96),
            rgba(152, 102, 116, 0.96)
        );
}

.rsvp-absage {
    color: #8d5965;
    background: rgba(255, 246, 249, 0.68);
}

.rsvp-btn:hover {
    transform: translateY(-2px);

    box-shadow:
        0 13px 28px
        rgba(152, 102, 116, 0.25);
}

.rsvp-btn:active {
    transform: translateY(0);
}


/* =========================================
   BESTÄTIGUNGSSEITE
========================================= */

.antwortseite {
    min-height: 100svh;

    background:
        linear-gradient(
            rgba(126, 78, 91, 0.08),
            rgba(126, 78, 91, 0.14)
        ),
        url("Rosen.png")
        center center
        / cover
        no-repeat;
}

.antwort-bereich {
    min-height: 100svh;

    display: grid;
    place-items: center;

    padding:
        max(24px, env(safe-area-inset-top))
        18px
        max(24px, env(safe-area-inset-bottom));
}

.antwort-karte {
    width: min(100%, 500px);
    padding: 40px 30px;

    text-align: center;

    background:
        rgba(255, 246, 249, 0.58);

    border:
        1px solid
        rgba(255, 255, 255, 0.65);

    border-radius: 30px;

    box-shadow:
        0 20px 60px
        rgba(83, 48, 58, 0.14);
}

.antwort-karte h1 {
    margin: 0 0 18px;

    font-family: "Allura", cursive;
    font-size: clamp(52px, 12vw, 76px);
    font-weight: 400;

    color: #9b5c69;
}

.antwort-karte p {
    margin: 0;

    font-size: 19px;
    line-height: 1.55;
}

.antwort-zurueck {
    display: inline-block;

    margin-top: 26px;
    padding: 13px 20px;

    color: #ffffff;
    text-decoration: none;

    border-radius: 15px;

    background:
        linear-gradient(
            135deg,
            rgba(201, 143, 157, 0.96),
            rgba(152, 102, 116, 0.96)
        );
}

@media (max-width: 480px) {
    .rsvp-buttons {
        gap: 9px;
    }

    .rsvp-btn {
        padding: 13px 8px;
        font-size: 17px;
    }

    .antwort-karte {
        padding: 34px 22px;
        border-radius: 25px;
    }
}

/* =========================================
   RSVP – TEXT UND DATUM
========================================= */

.rsvp-copy {

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 8px;

}

.rsvp-copy .rsvp-text {

    margin: 0;

    font-size: 16px;

    line-height: 1.55;

    font-weight: 500;

    color: #4f3d42;

    text-align: center;

}

.rsvp-copy .rsvp-datum {

    margin: 4px 0;

    padding: 0;

    font-family: "Allura", cursive;

font-size: clamp(26px, 5vw, 30px);

    font-weight: 400;

    line-height: 1;

    color: #9b5c69;

    -webkit-text-stroke: 0.25px rgba(92, 58, 66, 0.45);

    text-shadow:
        -0.4px -0.4px 0 rgba(92, 58, 66, 0.18),
         0.4px -0.4px 0 rgba(92, 58, 66, 0.18),
        -0.4px  0.4px 0 rgba(92, 58, 66, 0.18),
         0.4px  0.4px 0 rgba(92, 58, 66, 0.18),
         0 2px 8px rgba(92, 58, 66, 0.12);

    text-align: center;

}

/* Abstand zu den Buttons */

.rsvp-buttons {

    margin-top: 20px;

}

/* =========================================
   ANTWORTSEITE
========================================= */

.antwortseite {
    min-height: 100svh;

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

    color: var(--text);

    background:
        linear-gradient(
            rgba(126, 78, 91, 0.08),
            rgba(126, 78, 91, 0.14)
        ),
        url("Rosen.png")
        center center
        / cover
        no-repeat;
}

.antwort-bereich {
    min-height: 100svh;

    display: grid;
    place-items: center;

    padding:
        max(24px, env(safe-area-inset-top))
        18px
        max(24px, env(safe-area-inset-bottom));
}

.antwort-karte {
    width: min(100%, 520px);

    padding:
        40px
        30px
        34px;

    text-align: center;

    background:
        rgba(255, 246, 249, 0.58);

    border:
        1px solid
        rgba(255, 255, 255, 0.68);

    border-radius: 30px;

    box-shadow:
        0 20px 60px
        rgba(83, 48, 58, 0.14);

    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.antwort-namen {
    margin:
        0
        0
        22px;

    font-family:
        "Allura",
        cursive;

    font-size:
        clamp(
            52px,
            11vw,
            74px
        );

    line-height: 1;

    color: #9b5c69;

    -webkit-text-stroke:
        0.35px
        rgba(92, 58, 66, 0.55);

    text-shadow:
        -0.4px -0.4px 0 rgba(92, 58, 66, 0.22),
         0.4px -0.4px 0 rgba(92, 58, 66, 0.22),
        -0.4px  0.4px 0 rgba(92, 58, 66, 0.22),
         0.4px  0.4px 0 rgba(92, 58, 66, 0.22),
         0 2px 8px rgba(92, 58, 66, 0.12);

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

    gap: 6px;

    white-space: nowrap;

    opacity: 0;

    animation:
        antwortEinblenden
        1.2s
        0.25s
        ease
        forwards;
}

.antwort-titel {

    margin: 0;

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

    font-size: clamp(30px, 6vw, 42px);

    font-weight: 600;

    line-height: 1.2;

    letter-spacing: 0.02em;

    text-transform: none;

    color: var(--anrede-rosa);

    opacity: 0;

    animation:
        antwortEinblenden
        1.2s
        0.75s
        ease
        forwards;
}

.antwort-trenner {
    display: flex;
    align-items: center;

    gap: 12px;

    width: 82%;

    margin:
        24px
        auto
        22px;

    color: var(--dunkelrosa);

    opacity: 0;

    animation:
        antwortEinblenden
        1.1s
        1.10s
        ease
        forwards;
}

.antwort-trenner::before,
.antwort-trenner::after {
    content: "";

    flex: 1;

    height: 1px;

    background:
        linear-gradient(
            to right,
            transparent,
            rgba(152, 102, 116, 0.48),
            transparent
        );
}

.antwort-trenner span {
    font-size: 14px;
    opacity: 0.8;
}

.antwort-text {
    margin:
        0
        auto;

    max-width: 440px;

    font-size: 20px;
    line-height: 1.55;
    font-weight: 500;

    opacity: 0;

    animation:
        antwortEinblenden
        1.2s
        1.40s
        ease
        forwards;
}

.antwort-hinweis {
    margin:
        20px
        auto
        0;

    max-width: 420px;

    font-size: 17px;
    line-height: 1.5;

    color: #9b5c69;

    opacity: 0;

    animation:
        antwortEinblenden
        1.2s
        1.75s
        ease
        forwards;
}

.antwort-zurueck {
    display: inline-block;

    margin-top: 28px;

    padding:
        14px
        22px;

    border-radius: 16px;

    color: #ffffff;

    font-size: 17px;
    font-weight: 600;

    text-decoration: none;

    background:
        linear-gradient(
            135deg,
            rgba(201, 143, 157, 0.96),
            rgba(152, 102, 116, 0.96)
        );

    box-shadow:
        0 10px 24px
        rgba(152, 102, 116, 0.22);

    opacity: 0;

    animation:
        antwortEinblenden
        1.2s
        2.05s
        ease
        forwards;
}

@keyframes antwortEinblenden {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@media (max-width: 480px) {
    .antwort-bereich {
        padding-left: 14px;
        padding-right: 14px;
    }

    .antwort-karte {
        padding:
            34px
            22px
            30px;

        border-radius: 25px;
    }

    .antwort-text {
        font-size: 18px;
    }

    .antwort-hinweis {
        font-size: 16px;
    }
}