/* ---------------------------------------------------------------------------
   Sommerparty RSVP
   Farben und Typo greifen das Plakat auf: Papierhintergrund, dunkelgraue
   fette Grotesk-Typo, Regenbogen als Akzent. Keine externen Fonts.
--------------------------------------------------------------------------- */

:root {
    --ink:        #3a3a38;
    --ink-soft:   #6f6d69;
    --ink-faint:  #a09d97;
    --paper:      #f1efe9;
    --card:       #ffffff;
    --line:       #e2ded6;
    --focus:      #4a7fd4;
    --error:      #c0392b;

    --rainbow: linear-gradient(100deg,
        #ffd166 0%, #ff9f6e 22%, #ff8fa8 44%,
        #b79cff 66%, #7ec8f2 86%, #9be0c4 100%);

    --radius: 1rem;
    --shadow: 0 2px 10px rgba(58, 58, 56, .08);
}

* { box-sizing: border-box; }

/* [hidden] muss jede display-Regel überstimmen, sonst zeigt sich der
   Stepper trotz hidden-Attribut. */
[hidden] { display: none !important; }

html {
    -webkit-text-size-adjust: 100%;
    /* Die Seite darf nie seitlich scrollen. */
    overflow-x: hidden;
}

body {
    margin: 0;
    min-height: 100vh;
    padding: clamp(1rem, 4vw, 3rem);
    font-family: "Helvetica Neue", Helvetica, -apple-system, BlinkMacSystemFont,
                 "Segoe UI", system-ui, Arial, sans-serif;
    font-size: 17px;
    line-height: 1.55;
    color: var(--ink);
    background: var(--paper);
    /* zarter Regenbogenschimmer am Rand, wie auf dem Plakat */
    background-image:
        radial-gradient(120% 80% at 8% 100%, rgba(155, 224, 196, .30), transparent 55%),
        radial-gradient(110% 70% at 95% 5%,  rgba(183, 156, 255, .26), transparent 55%),
        radial-gradient(90% 60% at 50% 120%, rgba(255, 209, 102, .22), transparent 60%);
    background-attachment: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* --------------------------------------------------------------- Layout --- */

.page {
    display: grid;
    /* minmax(0,…) statt 1fr: sonst schrumpfen die Spalten nicht unter die
       Breite ihres Inhalts und die Seite läuft seitlich über. */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(1.25rem, 3vw, 2.5rem);
    align-items: start;
    width: 100%;
    max-width: 68rem;
}

.poster img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--radius);
    box-shadow: 0 6px 28px rgba(58, 58, 56, .16);
}

/* Handy / schmales Fenster: einspaltig, Plakat oben */
@media (max-width: 820px) {
    body { align-items: flex-start; }

    .page {
        grid-template-columns: 1fr;
        max-width: 32rem;
    }
}

/* ----------------------------------------------------------------- Karte --- */

.card {
    background: var(--card);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: clamp(1.4rem, 3vw, 2.25rem);
}

.card-head { margin-bottom: 1.75rem; }

.eyebrow {
    margin: 0 0 .35rem;
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--ink-faint);
}

h1 {
    margin: 0 0 .4rem;
    font-size: clamp(2rem, 5vw, 2.75rem);
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1.05;
}

.meta {
    margin: 0;
    color: var(--ink-soft);
    font-size: .95rem;
}

/* --------------------------------------------------------------- Felder --- */

.field { margin-bottom: 1.5rem; }

label { display: block; }

.field > label {
    margin-bottom: .4rem;
    font-size: .88rem;
    font-weight: 650;
    letter-spacing: .01em;
}

.optional {
    font-weight: 400;
    color: var(--ink-faint);
}

input[type="text"],
input[type="number"],
textarea {
    width: 100%;
    padding: .7rem .85rem;
    font: inherit;
    font-size: 1rem;
    color: var(--ink);
    background: #fbfaf8;
    border: 1.5px solid var(--line);
    border-radius: .6rem;
    transition: border-color .15s, background .15s;
}

textarea {
    resize: vertical;
    min-height: 3.5rem;
}

input[type="text"]:hover,
textarea:hover { border-color: #cfcac0; }

input[type="text"]:focus,
input[type="number"]:focus,
textarea:focus {
    outline: none;
    background: #fff;
    border-color: var(--ink);
}

::placeholder { color: #b8b4ad; }

/* Feld mit Fehler */
input.invalid,
textarea.invalid { border-color: var(--error); }

/* ---------------------------------------------------- Antwort-Optionen --- */

.options {
    margin: 0 0 1.5rem;
    padding: 0;
    border: 0;
}

.options legend {
    padding: 0;
    margin-bottom: .55rem;
    font-size: .88rem;
    font-weight: 650;
}

.option { cursor: pointer; }

/* Der echte Radio-Button bleibt für Screenreader/Tastatur vorhanden,
   ist aber visuell durch .box ersetzt. */
.option input {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.box {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    padding: .85rem 1rem;
    margin-bottom: .5rem;
    background: #fbfaf8;
    border: 1.5px solid var(--line);
    border-radius: .7rem;
    transition: border-color .15s, background .15s, transform .08s;
}

.option:hover .box { border-color: #c9c4ba; background: #fff; }
.option:active .box { transform: scale(.995); }

.tick {
    flex: 0 0 auto;
    width: 1.15rem;
    height: 1.15rem;
    margin-top: .18rem;
    border: 1.5px solid #c4bfb5;
    border-radius: 50%;
    background: #fff;
    transition: border-color .15s, border-width .15s;
}

.text { flex: 1; }

/* Gewählt */
.option input:checked + .box {
    border-color: var(--ink);
    background: #fff;
    box-shadow: inset 0 0 0 1px var(--ink);
}

.option input:checked + .box .tick {
    border-color: var(--ink);
    border-width: .36rem;
}

/* Tastaturfokus */
.option input:focus-visible + .box {
    outline: 2.5px solid var(--focus);
    outline-offset: 2px;
}

/* Das "X" in "bringe X Menschen mit" wird zur echten Zahl */
.count-inline {
    display: inline-block;
    min-width: 1.35em;
    padding: 0 .3em;
    text-align: center;
    font-weight: 700;
    background: var(--paper);
    border-radius: .35rem;
}

.option input:checked + .box .count-inline {
    background: var(--ink);
    color: #fff;
}

/* ------------------------------------------------------------- Stepper --- */

.stepper-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .6rem 1rem;
    /* leicht eingerückt, damit die Zugehörigkeit zur Option sichtbar ist */
    margin: -.15rem 0 .5rem 1.85rem;
    padding: .7rem .85rem;
    background: var(--paper);
    border-radius: .6rem;
}

.stepper-label {
    font-size: .88rem;
    font-weight: 650;
}

.stepper {
    display: flex;
    align-items: center;
    gap: .3rem;
    background: #fff;
    border: 1.5px solid var(--line);
    border-radius: .6rem;
    padding: .2rem;
}

.step {
    width: 2.1rem;
    height: 2.1rem;
    flex: 0 0 auto;
    font: inherit;
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1;
    color: var(--ink);
    background: var(--paper);
    border: 0;
    border-radius: .45rem;
    cursor: pointer;
    transition: background .15s, opacity .15s;
}

.step:hover:not(:disabled) { background: #e4e0d8; }

.step:disabled {
    opacity: .35;
    cursor: not-allowed;
}

.step:focus-visible {
    outline: 2.5px solid var(--focus);
    outline-offset: 1px;
}

.stepper input[type="number"] {
    width: 3rem;
    padding: .3rem 0;
    text-align: center;
    font-weight: 700;
    font-size: 1.05rem;
    background: transparent;
    border: 0;
    /* Die Pfeilchen des Browsers stören neben unseren eigenen Buttons */
    -moz-appearance: textfield;
    appearance: textfield;
}

.stepper input[type="number"]::-webkit-outer-spin-button,
.stepper input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* ------------------------------------------------- Honeypot / Fehler --- */

.hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.error {
    margin: 0 0 1rem;
    padding: .7rem .9rem;
    font-size: .9rem;
    color: #8c2f22;
    background: #fdecea;
    border-radius: .5rem;
}

/* ---------------------------------------------------------- Absenden --- */

.submit {
    position: relative;
    display: block;
    width: 100%;
    padding: .95rem 1.25rem;
    font: inherit;
    font-size: 1.05rem;
    font-weight: 750;
    letter-spacing: .01em;
    color: var(--ink);
    background: var(--rainbow);
    border: 0;
    border-radius: .7rem;
    cursor: pointer;
    overflow: hidden;
    transition: filter .15s, transform .08s;
}

.submit:hover:not(:disabled) { filter: saturate(1.15) brightness(1.03); }
.submit:active:not(:disabled) { transform: scale(.99); }

.submit:focus-visible {
    outline: 2.5px solid var(--ink);
    outline-offset: 2px;
}

.submit:disabled {
    cursor: progress;
    filter: saturate(.55) opacity(.75);
}

/* Wischender Streifen während des Sendens */
.submit.sending::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
        transparent, rgba(255, 255, 255, .65), transparent);
    animation: sweep 1.1s linear infinite;
}

@keyframes sweep {
    from { transform: translateX(-100%); }
    to   { transform: translateX(100%); }
}

/* ------------------------------------------------------ Bestätigung --- */

.done { text-align: center; padding: 1rem 0 .5rem; }

.done-mark {
    width: 3.5rem;
    height: 3.5rem;
    margin: 0 auto 1.1rem;
    border-radius: 50%;
    background: var(--rainbow);
    position: relative;
}

.done-mark::after {
    content: "";
    position: absolute;
    top: 46%;
    left: 50%;
    width: 1.35rem;
    height: .7rem;
    border-left: 3px solid var(--ink);
    border-bottom: 3px solid var(--ink);
    border-radius: 1px;
    transform: translate(-50%, -60%) rotate(-45deg);
}

.done h2 {
    margin: 0 0 .5rem;
    font-size: 1.75rem;
    font-weight: 800;
    letter-spacing: -.02em;
}

.done p {
    margin: 0 auto 1.5rem;
    max-width: 22rem;
    color: var(--ink-soft);
}

.again {
    padding: .6rem 1.1rem;
    font: inherit;
    font-size: .92rem;
    font-weight: 600;
    color: var(--ink-soft);
    background: transparent;
    border: 1.5px solid var(--line);
    border-radius: .6rem;
    cursor: pointer;
    transition: border-color .15s, color .15s;
}

.again:hover { border-color: var(--ink-soft); color: var(--ink); }

.again:focus-visible {
    outline: 2.5px solid var(--focus);
    outline-offset: 2px;
}

/* ------------------------------------------------------- Feinheiten --- */

@media (prefers-reduced-motion: reduce) {
    * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* Sehr kleine Handys: Stepper nicht einrücken, sonst wird es eng */
@media (max-width: 380px) {
    .stepper-wrap {
        margin-left: 0;
        flex-direction: column;
        align-items: stretch;
        gap: .55rem;
    }
}