* {
    box-sizing: border-box;
}

:root {
    --bg: #141414;
    --text: #f5f2ee;
    --muted: #c8c3bd;
    --gold: #c59b60;
    --gold-soft: rgba(197,155,96,.30);
    --success: #d7f5d8;
    --danger: #ffb0b0;
}

html {
    min-height: 100%;
    background: var(--bg);
}

body {
    margin: 0;
    min-height: 100vh;
    overflow-x: hidden;
    color: var(--text);
    background:
        radial-gradient(circle at 50% 0%, rgba(255,255,255,.035), transparent 42%),
        linear-gradient(rgba(14,14,14,.96), rgba(18,18,18,.985)),
        repeating-linear-gradient(0deg, rgba(255,255,255,.01) 0 1px, transparent 1px 3px);
    font-family: "Segoe UI", Arial, Helvetica, sans-serif;
}

#confettiCanvas {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999;
}

.page-shell {
    width: min(100%, 980px);
    margin: 0 auto;
    padding: 0 24px 56px;
}

/* =========================
   HERO – Basis
   ========================= */

.hero {
    position: relative;
    min-height: 620px;
    overflow: hidden;
    margin: 0 -24px;
    background: var(--bg);
}

.hero-photo {
    position: absolute;
    inset: 0;
    background-image: url("/assets/img/anika-tobi.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 55% center;
    filter: grayscale(100%) contrast(.92) brightness(.90);
    opacity: 1;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.hero-content {
    position: relative;
    z-index: 2;
    max-width: 560px;
    padding: 86px 34px 50px 60px;
}

.names {
    line-height: .78;
    margin-bottom: 24px;
}

.name-line {
    display: block;
    font-family: "Segoe Script", "Snell Roundhand", "Brush Script MT", cursive;
    font-size: clamp(68px, 12vw, 132px);
    font-weight: 300;
    letter-spacing: -.05em;
}

.name-line.second {
    margin-left: 124px;
    margin-top: 8px;
}

.amp {
    font-size: .42em;
    vertical-align: .52em;
    margin-left: 4px;
}

.tiny-heart {
    width: max-content;
    margin: -12px 0 18px 308px;
    font-size: 48px;
    font-weight: 200;
}

.eyebrow {
    margin-top: 20px;
    font-size: clamp(18px, 2.8vw, 27px);
    letter-spacing: .23em;
    text-transform: uppercase;
}

.script-subline,
.script-small,
.thanks-script,
footer p {
    font-family: "Segoe Script", "Snell Roundhand", "Brush Script MT", cursive;
}

.script-subline {
    margin: 4px 0 0 112px;
    font-size: clamp(35px, 5.5vw, 58px);
    font-weight: 300;
}

/* =========================
   INTRO
   ========================= */

.intro {
    max-width: 730px;
    margin: -16px auto 54px;
    text-align: center;
    position: relative;
    z-index: 3;
}

.ornament {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 18px;
    align-items: center;
    color: var(--gold);
    margin-bottom: 22px;
}

.ornament span {
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold));
}

.ornament span:last-child {
    background: linear-gradient(90deg, var(--gold), transparent);
}

.ornament b {
    font-size: 28px;
    font-weight: 300;
}

.intro p {
    margin: 7px 0;
    color: var(--muted);
    font-size: 17px;
    line-height: 1.6;
}

.intro .intro-lead {
    color: var(--text);
    text-transform: uppercase;
    letter-spacing: .16em;
    font-size: 14px;
}

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

.upload-card {
    max-width: 680px;
    margin: 0 auto;
    text-align: center;
}

.camera-mark svg,
.cloud-icon svg {
    width: 64px;
    height: 64px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.upload-card h1 {
    margin: 2px 0 28px;
    font-family: "Segoe Script", "Snell Roundhand", "Brush Script MT", cursive;
    font-size: clamp(42px, 7vw, 66px);
    font-weight: 300;
}

.field-label {
    display: block;
    margin: 0 0 8px;
    text-align: left;
    color: #d7d2cc;
    text-transform: uppercase;
    letter-spacing: .15em;
    font-size: 12px;
}

input[type="text"] {
    width: 100%;
    min-height: 54px;
    padding: 14px 17px;
    border: 1px solid rgba(255,255,255,.35);
    border-radius: 9px;
    outline: none;
    background: rgba(255,255,255,.025);
    color: var(--text);
    font: inherit;
    font-size: 17px;
}

input[type="text"]::placeholder {
    color: #8f8b87;
}

input[type="text"]:focus {
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(197,155,96,.10);
}

.drop-zone {
    margin-top: 20px;
    min-height: 190px;
    border: 1.5px dashed rgba(255,255,255,.72);
    border-radius: 16px;
    padding: 26px 22px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: rgba(255,255,255,.018);
    transition: .2s ease;
}

.drop-zone:hover,
.drop-zone:focus,
.drop-zone.dragging {
    border-color: var(--gold);
    background: rgba(197,155,96,.055);
    outline: none;
    transform: translateY(-1px);
}

.cloud-icon {
    color: var(--gold);
    margin-bottom: 8px;
}

.drop-zone strong {
    text-transform: uppercase;
    letter-spacing: .17em;
    font-size: 17px;
    font-weight: 500;
}

.script-small {
    color: var(--gold);
    font-size: 27px;
    margin-top: 3px;
}

.drop-secondary {
    color: var(--muted);
    margin-top: 3px;
}

#fileInput {
    display: none;
}

.file-summary {
    min-height: 24px;
    padding-top: 12px;
    color: var(--muted);
    font-size: 14px;
}

.primary-button {
    width: 100%;
    min-height: 54px;
    margin-top: 10px;
    border: 1px solid var(--gold);
    border-radius: 9px;
    background: transparent;
    color: var(--text);
    text-transform: uppercase;
    letter-spacing: .16em;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: .2s ease;
}

.primary-button:hover:not(:disabled) {
    background: var(--gold);
    color: #171717;
}

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

.progress-wrap {
    margin-top: 22px;
    text-align: left;
}

.progress-top {
    display: flex;
    justify-content: space-between;
    color: var(--muted);
    font-size: 13px;
    margin-bottom: 8px;
}

.progress-track {
    width: 100%;
    height: 7px;
    border-radius: 999px;
    background: rgba(255,255,255,.10);
    overflow: hidden;
}

.progress-bar {
    width: 0;
    height: 100%;
    background: linear-gradient(90deg, #8d6c43, var(--gold), #ead4ad);
    transition: width .15s linear;
}

.progress-text {
    margin-top: 8px;
    color: #aaa49f;
    font-size: 13px;
    overflow-wrap: anywhere;
}

.message {
    display: none;
    margin-top: 20px;
    padding: 16px;
    border-radius: 10px;
    line-height: 1.5;
}

.message.success {
    display: block;
    color: var(--success);
    border: 1px solid rgba(157,216,159,.35);
    background: rgba(80,130,82,.12);
}

.message.error {
    display: block;
    color: var(--danger);
    border: 1px solid rgba(255,120,120,.30);
    background: rgba(130,50,50,.12);
}

.accepted {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: 18px;
    color: var(--muted);
    font-size: 14px;
}

.accepted i {
    height: 17px;
    width: 1px;
    background: rgba(255,255,255,.25);
}

.microcopy {
    margin-top: 7px;
    color: #a9a39e;
    font-size: 13px;
}

/* V2 Dateiliste */
.selection-summary {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    margin-top: 4px;
    color: #d8d3ce;
}

.selection-summary strong {
    font-weight: 600;
}

.selection-summary span {
    color: #a9a39e;
    white-space: nowrap;
}

.selection-list {
    margin-top: 10px;
    border-top: 1px solid rgba(255,255,255,.08);
    padding-top: 8px;
}

.selection-file {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding: 4px 0;
    font-size: 13px;
    color: #aaa49f;
}

.selection-file-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
}

.selection-file-size {
    flex: 0 0 auto;
    white-space: nowrap;
}

.selection-more {
    margin-top: 5px;
    color: var(--gold);
    font-size: 13px;
    text-align: left;
}

/* =========================
   BENEFITS
   ========================= */

.benefits {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin: 66px auto 44px;
    max-width: 820px;
}

.benefits article {
    padding: 0 28px;
    text-align: center;
    position: relative;
}

.benefits article + article::before {
    content: "";
    position: absolute;
    left: 0;
    top: 12px;
    bottom: 8px;
    width: 1px;
    background: var(--gold-soft);
}

.benefit-icon {
    color: var(--gold);
    font-size: 48px;
    line-height: 1;
}

.benefits h2 {
    margin: 12px 0 8px;
    font-size: 13px;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.benefits p {
    margin: 0;
    color: var(--muted);
    line-height: 1.5;
    font-size: 14px;
}

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

.thanks-panel {
    max-width: 850px;
    margin: 30px auto 0;
    padding: 26px 20px 30px;
    text-align: center;
    border: 1px solid rgba(197,155,96,.35);
    border-radius: 13px;
    background: rgba(255,255,255,.018);
}

.thanks-script {
    font-size: 52px;
    line-height: 1;
}

.thanks-panel p {
    margin: 12px 0 10px;
    color: var(--muted);
}

.thanks-panel strong {
    color: var(--gold);
    letter-spacing: .22em;
    font-size: 13px;
}

footer {
    text-align: center;
    margin-top: 26px;
}

footer > div {
    font-size: 28px;
}

footer p {
    margin: 2px 0 0;
    font-size: clamp(24px, 4vw, 38px);
    font-weight: 300;
    color: #e8e4df;
}

/* ============================================================
   FINALER DESKTOP HERO
   Der Hero löst sich vom 980px-Inhaltsbereich und darf breiter
   werden. Das Foto läuft an beiden Seiten weich ins Seiten-Schwarz.
   ============================================================ */

@media (min-width: 761px) {
    .hero {
        width: min(100vw, 1600px);
        min-height: 700px;
        left: 50%;
        transform: translateX(-50%);
        margin: 0;
        background: #141414;
    }

    .hero-photo {
        inset: 0;
        background-size: cover;
        background-position: 56% center;
        filter: grayscale(100%) contrast(.93) brightness(.94);
        transform: scale(1.015);
    }

    .hero-overlay {
        background:
            /* Bottom: natürlicher Übergang in den Seiteninhalt */
            linear-gradient(
                0deg,
                #141414 0%,
                rgba(20,20,20,.86) 5%,
                rgba(20,20,20,.38) 18%,
                rgba(20,20,20,.08) 34%,
                rgba(20,20,20,0) 62%
            ),

            /* Rand links + rechts weich in Schwarz */
            linear-gradient(
                90deg,
                #141414 0%,
                rgba(20,20,20,.96) 2%,
                rgba(20,20,20,.80) 6%,
                rgba(20,20,20,.48) 12%,
                rgba(20,20,20,.16) 20%,
                rgba(20,20,20,0) 31%,
                rgba(20,20,20,0) 70%,
                rgba(20,20,20,.12) 80%,
                rgba(20,20,20,.42) 88%,
                rgba(20,20,20,.78) 95%,
                #141414 100%
            ),

            /* etwas Schatten unter der linken Schrift */
            radial-gradient(
                ellipse at 25% 38%,
                rgba(20,20,20,.36) 0%,
                rgba(20,20,20,.18) 28%,
                rgba(20,20,20,0) 58%
            );
    }

    .hero-content {
        width: min(calc(100% - 48px), 980px);
        max-width: none;
        margin: 0 auto;
        padding: 88px 0 56px 20px;
    }

    .hero-content > * {
        max-width: 560px;
    }

    .name-line {
        font-size: clamp(76px, 8vw, 126px);
    }

    .intro {
        margin-top: -22px;
    }
}

/* =========================
   MOBILE – unverändert
   ========================= */

@media (max-width: 760px) {
    .page-shell {
        padding-inline: 16px;
    }

    .hero {
        margin-inline: -16px;
        min-height: 610px;
    }

    .hero-photo {
        background-position: 55% center;
        filter: grayscale(100%) contrast(.92) brightness(.88);
        opacity: 1;
    }

    .hero-overlay {
        background:
            linear-gradient(
                90deg,
                rgba(18,18,18,.48) 0%,
                rgba(18,18,18,.34) 28%,
                rgba(18,18,18,.18) 52%,
                rgba(18,18,18,.12) 72%,
                rgba(18,18,18,.35) 100%
            ),
            linear-gradient(
                0deg,
                #141414 0%,
                rgba(20,20,20,.12) 35%,
                rgba(20,20,20,.02) 75%,
                rgba(20,20,20,.20) 100%
            );
    }

    .hero-content {
        padding: 54px 20px 40px 22px;
        max-width: 94%;
    }

    .name-line.second {
        margin-left: 76px;
    }

    .tiny-heart {
        margin-left: 228px;
    }

    .script-subline {
        margin-left: 50px;
    }

    .intro {
        margin-top: -28px;
    }

    .benefits {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .benefits article {
        padding: 0 14px;
    }

    .benefits article + article::before {
        display: none;
    }
}

@media (max-width: 480px) {
    .hero {
        min-height: 540px;
    }

    .hero-photo {
        background-size: auto 100%;
        background-position: 55% center;
    }

    .hero-content {
        padding-top: 38px;
    }

    .name-line {
        font-size: 74px;
    }

    .name-line.second {
        margin-left: 54px;
        margin-top: 13px;
    }

    .tiny-heart {
        margin-left: 198px;
        margin-top: -4px;
        font-size: 38px;
    }

    .eyebrow {
        font-size: 14px;
        letter-spacing: .18em;
    }

    .script-subline {
        font-size: 34px;
        margin-left: 30px;
    }

    .intro p {
        font-size: 15px;
    }

    .accepted {
        flex-direction: column;
        gap: 5px;
    }

    .accepted i {
        display: none;
    }

    .upload-card h1 {
        font-size: 44px;
    }

    .drop-zone {
        min-height: 180px;
    }
}



/* Upload geschlossen */
.closed-card {
    max-width: 680px;
    margin: 0 auto;
    padding: 42px 24px;
    text-align: center;
    border: 1px solid rgba(197,155,96,.28);
    border-radius: 16px;
    background: rgba(255,255,255,.018);
}

.closed-card .camera-mark {
    color: var(--gold);
    font-size: 54px;
    line-height: 1;
}

.closed-card h1 {
    margin: 10px 0 18px;
}

.closed-lead {
    margin: 0;
    color: var(--text);
    font-size: 18px;
    line-height: 1.55;
}

.closed-copy {
    margin: 10px 0 0;
    color: var(--muted);
    line-height: 1.55;
}