/* CSS Variables */
    :root {
        --white: #ffffff;
        --anthracite: #222222;
        --red: #F73542;
        
        --font-primary: "Azo Sans", azo-sans-web, sans-serif;
        --font-script: "Gloria Hallelujah";
    }

    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    body {
        background-color: var(--anthracite);
        font-family: var(--font-primary);
    }

    /* Navigation */
    .navigation {
        padding-top: clamp(25px, 2vw, 70px);
        text-align: center;
    }

    .logo {
        width: clamp(25px, 3.5vw, 50px);
        height: auto;
    }

    /* FONTS */

    h1 {
        color: var(--white);
        font-family: var(--font-primary);
        font-size: clamp(2.5rem, 7vw, 6.25rem); /* 40px - 100px */
        font-style: normal;
        font-weight: 400;
        line-height: normal;
    }

    .script-font {
        color: var(--red);
        font-family: var(--font-script);
        font-size: clamp(2rem, 4vw, 3.75rem); /* 32px - 60px */
        font-style: normal;
        font-weight: 400;
        line-height: 1.1;
    }

    h2 {
        color: var(--anthracite);
        font-family: var(--font-primary);
        font-size: clamp(1.75rem, 3.5vw, 3.125rem); /* 28px - 50px */
        font-style: normal;
        font-weight: 700;
        line-height: 1.1;
    }

    h3 {
        color: var(--anthracite);
        font-family: var(--font-primary);
        font-size: clamp(1.25rem, 1.75vw, 1.5625rem); /* 20px - 25px */
        font-style: normal;
        font-weight: 500;
        line-height: normal;
    }

    h4 {
        color: var(--anthracite);
        font-family: var(--font-primary);
        font-size: clamp(1rem, 1.25vw, 1.125rem); /* 16px - 18px */
        font-style: normal;
        font-weight: 700;
        line-height: normal;
    }

    p {
        color: var(--anthracite);
        font-family: var(--font-primary);
        font-size: clamp(1rem, 1.25vw, 1.125rem); /* 16px - 18px */
        font-style: normal;
        font-weight: 300;
        line-height: normal;
    }

    .small {
        color: var(--anthracite);
        font-family: var(--font-primary);
        font-size: clamp(0.75rem, 0.9vw, 0.8125rem); /* 12px - 13px */
        font-style: normal;
        font-weight: 300;
        line-height: 1.46;
    }


    /* Hero Section */
    .hero {
        min-height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 20px;
        overflow-x: hidden;
    }

    .hero-content {
        display: flex;
        align-items: center;
        gap: clamp(30px, 4vw, 60px);
    }

    .santa {
        width: clamp(150px, 20vw, 350px);
        height: auto;
        transition: transform 0.1s linear;
        z-index: 1;
        position: relative;
    }


    /* Hero: Strikethrough „fröhliche“ */

    /* Wrapper */
    .strikethrough-wrapper {
    position: relative;
    display: inline-block;
    }

    .strikethrough-line {
    position: absolute;
    top: 55%;
    left: 0;
    width: 100%;
    height: auto;
    transform: translateY(-50%);
    transform-origin: left center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease-out;
    }

    /* Pfad: Transition ist hier (nicht auf SVG!) */
    .hero-strike-path {
    fill: none;
    vector-effect: non-scaling-stroke;
    stroke: #F73542;
    stroke-width: 8px;
    /* Stroke kommt aus dem SVG-Attribut (dein stroke-width="8" ist ok) */

    /* WICHTIG: Transition muss wirklich hier sein */
    transition: stroke-dashoffset 4.0s ease-in-out;
    will-change: stroke-dashoffset;
    }

    @media (max-width: 600px) {
    .hero-strike-path {
        stroke-width: 4px;
    }
    }

    .strikethrough-line.is-visible {
    opacity: 1;
    }


    .typed-text {
        margin-top: 20px;
        min-height: 1.2em;
        min-width: 12ch;
        margin-left: 28%;
        display: inline-block;
        transform: rotate(-5deg) translate(10px, -5px); /* leicht geneigt + nach rechts oben */
        transform-origin: left center;
    }

    /* Cursor & leichtes Wackeln, wenn getippt wird */
    .script-font.typing::after {
        content: '|';
        animation: blink 0.7s infinite;
    }

    .script-font.typing {
        animation: handWriteJitter 0.12s infinite alternate;
    }

    /* ganz subtile Jitter-Animation */
    @keyframes handWriteJitter {
        from {
            transform: rotate(-5deg) translate(10px, -5px);
        }
        to {
            transform: rotate(-3deg) translate(12px, -3px);
        }
    }

    @keyframes blink {
        0%, 50% { opacity: 1; }
        51%, 100% { opacity: 0; }
    }

    @media (max-width: 600px) {
    .hero-content {
        flex-direction: column;
        gap: 24px;
    }

    .hero-text {
        display: flex;
        flex-direction: column;
    }

    .typed-text {
        margin-left: 0;
        transform: rotate(-5deg) translate(0, -4px);
    }
    }

    /* =========================
    ORDER SECTION – LAYOUT
    ========================= */
    .order-section {
        padding: 100px 20px;
        background-color: var(--anthracite);
        color: var(--anthracite);
        overflow: hidden;
        position: relative;
    }
    .order-section.fit-height {
        height: 100vh;
    }

    .order-wrapper {
        max-width: 1200px;
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0;
        position: relative;
        transform: translateX(0);                 /* Startposition */
        transition: transform 1.6s ease-in-out;   /* Transition IMMER aktiv */
    }

    .order-sock {
        flex: 0 0 30%;
        position: relative;
        z-index: 2;
        transform: translateX(-150vw) rotate(-15deg);
        display: flex;
        justify-content: center;
        align-items: center;
        opacity: 0;
        transition: transform 1.2s cubic-bezier(0.34, 1, 0.64, 1),
                    opacity 0.8s ease-out;
        z-index: 4;
    }

    .order-card {
        flex: 0 0 75%;
        background-color: var(--white);
        border-radius: 28px;
        padding: 40px 80px 48px 180px;
        position: relative;
        height: fit-content;
        margin-left: -150px;
        transform: translateX(150vw);
        opacity: 0;
        transition: transform 1.2s cubic-bezier(0.34, 1, 0.64, 1),
                    opacity 0.8s ease-out;
    }

    /* Sobald Section in View: Socke + Card reinfahren */
    .order-section.in-view .order-sock {
        transform: translateX(-20px) rotate(8deg);
        opacity: 1;
    }

    .order-section.in-view .order-card {
        transform: translateX(0);
        opacity: 1;
    }

    .order-sock img {
        width: 100%;
        height: auto;
        display: block;
    }

    /* Overlapping Santa oben rechts */
    .order-santa-sticker {
        position: absolute;
        top: clamp(-58px, 6vw, 48px);
        right: clamp(24px, 12vw, 148px);
        width: clamp(110px, 10vw, 120px);
        height: auto;
        pointer-events: none;
        z-index: 5;

        opacity: 0;
        transform: scale(0.9);
        transition:
      opacity 0.4s ease-out,
      transform 0.4s ease-out;
    }

    @media (max-width: 1000px) {
        .order-santa-sticker {
            top: clamp(-58px, 6vw, -44px);
        right: clamp(24px, 12vw, 148px);
        }
    }


    @media (max-width: 640px) {
        .order-santa-sticker {
            top: clamp(140px, 55vw, 560px);
            right: clamp(16px, 6vw, 48px);
        }
    }

    @media (max-width: 400px) {
        .order-santa-sticker {
            top: clamp(-500px, 40vw, 560px);
        }
    }

    /* Inhalt in der Karte */
    .order-content h2 {
        margin-bottom: 30px;
    }

    .order-content h3 {
        margin-bottom: 16px;
    }

    /* =========================
    SIZE OPTIONS (RADIOCARDS)
    ========================= */
    .size-options {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
        margin-bottom: 28px;
    }

    .size-card {
        position: relative;
        cursor: pointer;
        display: block;
    }

    /* Radio verstecken, aber zugänglich lassen */
    .size-card input[type="radio"] {
        position: absolute;
        opacity: 0;
        pointer-events: none;
    }

    .size-card-inner {
        border: 2px solid var(--anthracite);
        border-radius: 16px;
        padding: 18px 20px;
        display: flex;
        flex-direction: column;
        gap: 4px;
        transition: border-color 0.2s ease, box-shadow 0.2s ease,
                    background-color 0.2s ease, transform 0.1s ease;
    }

    .size-range {
        font-weight: 700;
        font-size: clamp(1.1rem, 1.3vw, 1.2rem);
    }

    .size-desc {
        font-family: var(--font-primary);
        font-size: clamp(1rem, 1.25vw, 1.125rem); /* 16px - 18px */
        font-style: normal;
        font-weight: 300;
        line-height: normal;
    }

    /* Hover-State */
    .size-card:hover .size-card-inner {
        border-color: rgba(0, 0, 0, 0.6);
        background-color: var(--anthracite);
        box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
        color: var(--white);
    }

    /* Active (Mousedown) */
    .size-card:active .size-card-inner {
        background-color: var(--anthracite);
        color: var(--white);
        transform: translateY(1px);
    }

    /* Checked-State */
    .size-card input[type="radio"]:checked + .size-card-inner {
        background-color: var(--anthracite);
        color: var(--white);
    }

    /* Focus für Tastatur */
    .size-card input[type="radio"]:focus-visible + .size-card-inner {
        transform: translateY(1px);
        background-color: var(--anthracite);
        color: var(--white);
}

    /* =========================
    BUTTONS – STATES
    ========================= */
    .btn {
    display: inline-flex;
    padding: 8px 16px;
    justify-content: center;
    align-items: center;
    font-family: var(--font-primary);
    font-weight: 700;
        font-size: clamp(1rem, 1.25vw, 1.125rem); /* 16px - 18px */
    transition: background-color 0.2s ease, color 0.2s ease,
                    border-color 0.2s ease, transform 0.1s ease;
    }

    /* Secondary (Step 1 – "weiter") */
    .btn-secondary {
        background-color: transparent;
        color: var(--anthracite);
        border-color: var(--anthracite);
    }

    .btn-secondary:hover:not(:disabled) {
        background-color: var(--anthracite);
        color: var(--white);
    }

    .btn-secondary:active:not(:disabled) {
        transform: translateY(1px);
    }

    /* Primary (Step 2 – "Socken erhalten") */
    .btn-primary {
        background-color: var(--anthracite);
        color: var(--white);
        border: none;
    }

    .btn-primary:hover:not(:disabled) {
        background-color: var(--red);
    }

    .btn-primary:active:not(:disabled) {
        transform: translateY(1px);
    }

    /* Disabled */
    .btn:disabled {
        opacity: 0.1;
        cursor: not-allowed;
        box-shadow: none;
    }

    /* =========================
    FORM FIELDS (STEP 2)
    ========================= */
    .form-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 24px;
        row-gap: 18px;
        margin-bottom: 18px;
    }

    .form-field {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .form-field--full {
        grid-column: 1 / -1;
    }

    .form-field label {
        font-size: 0.85rem;
        font-weight: 300;
    }

    .form-field input {
        border: none;
        border-bottom: 1px solid rgba(0, 0, 0, 0.4);
        padding: 6px 0;
        font-size: 0.95rem;
        font-family: var(--font-primary);
        background: transparent;
        outline: none;
        transition: border-color 0.2s ease;
    }

    .form-field input:focus {
        border-bottom-color: var(--anthracite);
    }

    .form-hinweis {
        padding-top: 24px;
        padding-bottom: 8px;
    }

    /* Steps ein/ausblenden */
    .order-step {
        display: none;
    }

    .order-step.is-active {
        display: block;
    }

    /* =========================
    SANTA PUSH + CONFIRMATION
    ========================= */

    /* Santa der rausschiebt */
    .order-santa-push {
        position: absolute;
        top: 50%;
        left: 0px;
        width: clamp(180px, 70vw, 800px);
        transform: translate(-120%, -50%) rotate(-8deg); 
        opacity: 0;
        z-index: 5;
        pointer-events: none;
        transition: transform 2.5s ease-in-out,
                    opacity 0.6s ease-out;
    }

    /* Wenn Submit geklickt -> Box rausfahren */
    /* Box fährt nach rechts raus, aber smooth */
    .order-section.leaving .order-wrapper {
        transform: translateX(calc(100vw + 300px));
    }

    /* Santa fliegt von ganz links nach ganz rechts */
    .order-section.leaving .order-santa-push {
        opacity: 1;
        transform: translateX(150vw);
    }

    /* Confirmation-Text */
/* =========================
   ORDER CONFIRMATION – CENTERED
   ========================= */

.order-confirmation {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -40%);

        max-width: 700px;
        width: 100%;
        padding: 40px 20px;

        opacity: 0;
        transition: opacity 0.6s ease-out, transform 0.6s ease-out;
        pointer-events: none; /* solange unsichtbar */
    }


    .white {
        padding-bottom: 20px;
        color: var(--white);
    }

    .order-section.show-confirmation .order-confirmation {
        opacity: 1;
        transform: translate(-50%, -50%); /* kleine Bewegung nach oben */
        pointer-events: auto;
    }

    /* =========================
    RESPONSIVE
    ========================= */
    @media (max-width: 900px) {
    .form-grid {
            grid-template-columns: 1fr;
        }

        .size-options {
            grid-template-columns: 1fr;
        }

        .order-card {
        padding: 40px 40px 48px 180px;
        }

    }


    @media (max-width: 640px) {
        .order-section {
            padding: 100px 24px;
        }

        .order-wrapper {
            flex-direction: column;
            align-items: center;
            position: relative;
        }

        .order-sock {
            flex: none;   
            width: 80vw;
            margin-bottom: -144px;
            margin-left: 0;
        }

        .order-section.in-view .order-sock {
            transform: translateX(0) rotate(8deg);
        }

        .order-card {
            flex: 0 0 auto;
            width: 100%;
            margin-left: 0;
            padding: 124px 24px 36px;
        }

        .order-confirmation {
            padding: 40px 15vw;
        }
    }

    @media (max-width: 440px) {
    .order-sock {
            margin-bottom: -104px;
        }
    }




    /* =========================
    FINAL SECTION
    ========================= */

    .final-section {
        min-height: 100svh; /* iOS-safe viewport */
        padding-bottom: calc(120px + env(safe-area-inset-bottom));
        padding: 120px 20px;
        position: relative;
        overflow: hidden;
        align-items: center;
        justify-content: center;
        display: none;
    }

    .final-section.show {
        display: flex;
    }

    /* Text in der Mitte des Screens */
    .final-content {
        position: relative;
        z-index: 2;
    }

    .final-headline {
        color: var(--white);
        font-size: clamp(2.5rem, 7vw, 6.25rem); /* 40px - 100px */
        font-weight: 400;
        line-height: normal;
    }

    /* Wrapper um das Wort „Meeting“ */
    .strike-wrapper {
        position: relative;
        display: inline-block;
    }

    /* Linie darüberlagern */
    .strike-line {
        position: absolute;
        top: 0.62em;  
        left: 0;
        width: 100%;
        height: 50px;
        transform: translateY(-50%);
        pointer-events: none;
        stroke-width: 8px;
    }

    /* @media (max-width: 600px) {
    .strike-line {
        stroke-width: 6px;
    }
    } */

    .final-script {
        display: inline-block;
        transform: rotate(-6deg);
        margin-left: 40%;
        margin-top: -2vw;
    }

    /* Santa liegt über dem Text und bekommt Parallax */
    .final-santa {
        position: absolute;
        bottom: 0;
        left: 50%;
        /* Basis: zentriert + Parallax-Offset als CSS-Variable */
        transform: translate(-50%, -50%) translateY(var(--parallax-offset, 0px));
        pointer-events: none;
        z-index: 2;
    }

    .final-santa-img {
        width: clamp(400px, 45vw, 600px);
        height: auto;
        display: block;
    }

    @media (max-width: 440px) {
    .final-santa-img {
            width: 80vw;
        }
    }