.register-hero {
    background: var(--color-ink);
    color: var(--color-white);
    padding: clamp(72px, 10vw, 128px) 0 clamp(46px, 8vw, 76px);
}

.register-hero__grid {
    align-items: end;
    display: grid;
    gap: clamp(28px, 5vw, 68px);
    grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
}

.register-hero h1 {
    font-size: clamp(2.5rem, 6.5vw, 5.7rem);
    line-height: 0.94;
    max-width: 840px;
}

.register-hero__intro {
    color: rgba(255, 255, 255, 0.78);
    font-size: clamp(1rem, 2vw, 1.25rem);
    margin-top: 18px;
    max-width: 680px;
    overflow-wrap: anywhere;
}

.register-trust {
    display: grid;
    gap: 10px;
    list-style: none;
    margin-top: 24px;
    max-width: 740px;
}

.register-trust li {
    padding-left: 22px;
    position: relative;
}

.register-trust li::before {
    background: var(--color-lime);
    border-radius: 999px;
    content: "";
    height: 8px;
    left: 0;
    position: absolute;
    top: 0.65em;
    width: 8px;
}

.registration-status {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: var(--radius-md);
    display: grid;
    gap: 8px;
    padding: 22px;
}

.registration-status strong {
    color: var(--color-lime);
    font-size: 1.2rem;
}

.registration-status span {
    color: rgba(255, 255, 255, 0.76);
}

.registration-status a {
    color: var(--color-lime);
}

.consent-item--required .checkbox-item a {
    color: inherit;
}

/* K4/F10: "Kollegen einladen" on the thank-you page */
.success-invite {
    background: var(--color-paper);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-md);
    margin-top: 28px;
    padding: clamp(20px, 4vw, 32px);
    text-align: left;
}

.success-invite h2 {
    font-size: clamp(1.35rem, 3vw, 1.9rem);
}

.success-invite p {
    margin-top: 10px;
}

.success-invite__link {
    display: grid;
    gap: 6px;
}

.success-invite__link input {
    border: 1px solid var(--color-field);
    border-radius: var(--radius-sm);
    min-height: 44px;
    padding: 0.6rem 0.8rem;
    width: 100%;
}

.register-page {
    background: var(--color-soft);
    padding: clamp(46px, 8vw, 84px) 0;
}

.register-container {
    max-width: 900px;
}

.step-indicator {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    list-style: none;
    margin: 0 0 28px;
    padding: 0;
}

.step-dot {
    align-items: center;
    background: var(--color-paper);
    border: 1px solid var(--color-line);
    border-radius: 999px;
    display: inline-flex;
    gap: 8px;
    min-height: 38px;
    padding: 0 14px;
}

.step-dot span {
    align-items: center;
    background: var(--color-soft);
    border-radius: 999px;
    display: inline-flex;
    font-weight: 900;
    height: 24px;
    justify-content: center;
    width: 24px;
}

.step-dot small {
    color: var(--color-muted);
    font-size: 0.8rem;
    font-weight: 700;
}

.step-dot--active {
    background: var(--color-lime);
    border-color: var(--color-lime);
}

.step-dot--active small {
    color: var(--color-ink);
}

.step-line {
    background: var(--color-line);
    height: 2px;
    width: 44px;
}

.form-card {
    background: var(--color-paper);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: clamp(22px, 4vw, 36px);
}

.form-card__header {
    margin-bottom: 24px;
}

.form-card__header > span {
    color: var(--color-magenta);
    display: block;
    font-size: 0.78rem;
    font-weight: 700;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.form-card__header p {
    color: var(--color-muted);
    margin-top: 8px;
}

.form-card__title {
    font-size: clamp(1.45rem, 3vw, 2.1rem);
    line-height: 1.04;
}

.form-row--2col {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.form-group,
.checkbox-group {
    border: 0;
    display: grid;
    gap: 8px;
    margin: 0 0 18px;
    padding: 0;
}

.form-group label,
.checkbox-group__label,
.consent-item {
    color: var(--color-ink-2);
    font-weight: 700;
}

.form-group input,
.form-group select,
.survey-textarea {
    background: var(--color-paper);
    border: 1px solid var(--color-field);
    border-radius: var(--radius-sm);
    color: var(--color-ink);
    min-height: 46px;
    padding: 0.75rem 0.9rem;
    width: 100%;
}

.form-group input:focus,
.form-group select:focus {
    border-color: var(--color-ink);
    outline: 3px solid var(--color-focus);
    outline-offset: 2px;
}

.form-group [aria-invalid="true"],
.consent-item [aria-invalid="true"] {
    border-color: #9d1241;
    box-shadow: 0 0 0 1px #9d1241;
}

.field-error {
    color: var(--color-magenta);
    display: none;
    font-size: 0.86rem;
}

.form-group--invalid .field-error {
    display: block;
}

.checkbox-grid {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.checkbox-item {
    align-items: flex-start;
    background: var(--color-soft);
    border: 1px solid var(--color-field);
    border-radius: var(--radius-sm);
    display: flex;
    gap: 10px;
    padding: 12px;
}

.checkbox-item input {
    flex: 0 0 auto;
    margin-top: 3px;
}

.checkbox-item span {
    font-weight: 700;
    hyphens: auto;
    min-width: 0;
    overflow-wrap: break-word;
}

.consent-item {
    margin-bottom: 12px;
}

.form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: flex-end;
    margin-top: 22px;
}

.btn--form-primary,
.btn--form-secondary,
.btn--form-ghost {
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-weight: 900;
    min-height: 46px;
    padding: 0.78rem 1.1rem;
}

.btn--form-primary {
    background: var(--color-lime);
    color: var(--color-ink);
}

.btn--form-secondary {
    background: var(--color-ink);
    color: var(--color-white);
}

.btn--form-ghost {
    background: transparent;
    border-color: var(--color-line);
    color: var(--color-ink);
    margin-top: 12px;
}

.btn--form-wide {
    width: 100%;
}

.form-status {
    border-radius: var(--radius-sm);
    font-weight: 700;
    margin-bottom: 16px;
    padding: 14px 16px;
}

.form-status--info {
    background: #edf5ff;
    color: #155080;
}

.form-status--success {
    background: #ecf9df;
    color: #315d10;
}

.form-status--error {
    background: #fff0f4;
    color: #9d1241;
}

.success-page {
    background: var(--color-soft);
    padding: clamp(64px, 9vw, 112px) 0;
}

.success-page__inner {
    max-width: 940px;
    text-align: center;
}

.success-checkmark {
    align-items: center;
    background: var(--color-lime);
    border-radius: 999px;
    display: inline-flex;
    height: 72px;
    justify-content: center;
    margin-bottom: 22px;
    width: 72px;
}

.success-checkmark svg {
    fill: none;
    height: 34px;
    stroke: var(--color-ink);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2.4;
    width: 34px;
}

.success-page h1 {
    font-size: clamp(2.25rem, 5vw, 4.5rem);
    line-height: 0.98;
    margin: 0 auto;
    max-width: 780px;
}

.success-page__lead {
    color: var(--color-muted);
    font-size: 1.12rem;
    margin: 18px auto 0;
    max-width: 720px;
}

.calendar-section,
.success-next,
.event-reminder {
    margin-top: 36px;
}

.calendar-section h2,
.success-next h2 {
    font-size: 1.35rem;
    margin-bottom: 16px;
}

.calendar-links,
.next-steps {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.calendar-link,
.next-step-card {
    background: var(--color-paper);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-md);
    color: var(--color-ink);
    display: grid;
    font-weight: 900;
    min-height: 86px;
    padding: 16px;
    place-items: center;
    text-decoration: none;
}

.next-step-card__icon {
    color: var(--color-magenta);
    font-size: 0.86rem;
    font-weight: 900;
}

.event-reminder {
    background: var(--color-ink);
    border-radius: var(--radius-md);
    color: var(--color-white);
    padding: 24px;
}

.event-reminder p {
    color: rgba(255, 255, 255, 0.76);
    margin-top: 8px;
}

@media (max-width: 820px) {
    .register-hero__grid,
    .form-row--2col,
    .calendar-links,
    .next-steps {
        grid-template-columns: 1fr;
    }

    .step-indicator {
        align-items: stretch;
        display: grid;
        grid-template-columns: 1fr;
    }

    .step-line {
        display: none;
    }
}

@media (max-width: 620px) {
    .register-hero__copy,
    .registration-status {
        min-width: 0;
        max-width: 100%;
        overflow-wrap: anywhere;
    }

    .register-hero__copy > * {
        max-width: calc(100vw - 32px);
    }

    .register-hero h1 {
        font-size: clamp(1.72rem, 7.2vw, 1.9rem);
        line-height: 1;
        max-width: 15ch;
        overflow-wrap: anywhere;
    }

    .register-hero__intro,
    .register-trust {
        max-width: 34ch;
    }

    .form-actions,
    .btn--form-primary,
    .btn--form-secondary,
    .btn--form-ghost {
        width: 100%;
    }
}

/* Interest chips (step 2): one per row on phones, the labels stay inside their chip in all
   languages (E2E P2a, E17/W-05; two columns left about 100px for "Neuromarketing"). */
@media (max-width: 560px) {
    .checkbox-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ── Ticket als durchgehendes Objekt (Motion Stufe 1, components/ticket.html, ticket.js) ── */
.register-container--ticket {
    max-width: 1120px;
}

.register-layout {
    align-items: start;
    display: grid;
    gap: clamp(20px, 3vw, 36px);
    grid-template-columns: minmax(0, 1fr) 340px;
}

.register-layout > * {
    min-width: 0;
}

.live-ticket {
    position: sticky;
    top: 96px;
}

.ticket {
    --stub: 104px;
    --notch: 11px;
    -webkit-mask:
        radial-gradient(circle var(--notch) at calc(100% - var(--stub)) 0, transparent 98%, #000) top / 100% 51% no-repeat,
        radial-gradient(circle var(--notch) at calc(100% - var(--stub)) 100%, transparent 98%, #000) bottom / 100% 51% no-repeat;
    mask:
        radial-gradient(circle var(--notch) at calc(100% - var(--stub)) 0, transparent 98%, #000) top / 100% 51% no-repeat,
        radial-gradient(circle var(--notch) at calc(100% - var(--stub)) 100%, transparent 98%, #000) bottom / 100% 51% no-repeat;
    background: var(--color-ink);
    border-radius: 14px;
    box-shadow: var(--shadow-md);
    color: var(--color-white);
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--stub);
    overflow: hidden;
    position: relative;
    text-align: left;
    transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
    transition: transform 0.25s ease-out;
}

/* Glanz, der dem Zeiger folgt (Tilt nur mit feinem Zeiger, ticket.js) */
.ticket::before {
    background: radial-gradient(circle at var(--mx, 30%) var(--my, 0%), rgba(229, 255, 75, 0.16), transparent 55%);
    content: "";
    inset: 0;
    pointer-events: none;
    position: absolute;
}

.ticket__main {
    display: grid;
    gap: 6px;
    padding: 20px 20px 18px 22px;
}

.ticket__top {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-bottom: 6px;
}

.ticket__logo .logo {
    display: block;
    height: 14px;
    width: auto;
}

.ticket__label {
    border: 1px solid rgba(229, 255, 75, 0.6);
    border-radius: 999px;
    color: var(--color-lime);
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    padding: 3px 9px;
    text-transform: uppercase;
}

.ticket__kind {
    color: var(--color-muted-on-dark);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.ticket__name {
    font-size: 1.32rem;
    font-weight: 900;
    line-height: 1.12;
    min-height: 1.12em;
    overflow-wrap: anywhere;
}

.ticket__name.is-empty {
    color: rgba(255, 255, 255, 0.34);
}

.ticket--issued .ticket__name.is-empty,
.ticket__company:empty {
    display: none;
}

.ticket.is-typing .ticket__name::after {
    animation: s7-caret 1s steps(1) infinite;
    background: var(--color-lime);
    content: "";
    display: inline-block;
    height: 0.95em;
    margin-left: 3px;
    vertical-align: -0.1em;
    width: 3px;
}

@keyframes s7-caret {
    50% { opacity: 0; }
}

.ticket__company {
    color: var(--color-muted-on-dark);
    font-size: 0.86rem;
    font-weight: 700;
}

.ticket__when,
.ticket__where {
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.84rem;
}

.ticket__when {
    margin-top: 8px;
}

.ticket__bars {
    align-items: flex-end;
    display: flex;
    gap: 3px;
    height: 18px;
    margin-top: 10px;
}

.ticket__bars i {
    background: rgba(255, 255, 255, 0.18);
    border-radius: 1px;
    display: block;
    transform-origin: 50% 100%;
    transition: background-color 0.25s ease;
    width: 5px;
}

.ticket__bars i:nth-child(1) { --d: 0ms; height: 34%; }
.ticket__bars i:nth-child(2) { --d: 120ms; height: 45%; }
.ticket__bars i:nth-child(3) { --d: 240ms; height: 56%; }
.ticket__bars i:nth-child(4) { --d: 360ms; height: 67%; }
.ticket__bars i:nth-child(5) { --d: 480ms; height: 78%; }
.ticket__bars i:nth-child(6) { --d: 840ms; height: 89%; }
.ticket__bars i:nth-child(7) { --d: 920ms; height: 100%; }

.ticket__bars i.is-on,
.ticket--issued .ticket__bars i {
    background: var(--color-lime);
}

.ticket__stub {
    align-items: center;
    border-left: 2px dashed rgba(255, 255, 255, 0.22);
    display: flex;
    flex-direction: column;
    gap: 8px;
    justify-content: center;
    padding: 16px 10px;
    position: relative;
    text-align: center;
}

.ticket__code {
    display: grid;
    gap: 3px;
    grid-template-columns: repeat(5, 9px);
}

.ticket__code i {
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 2px;
    display: block;
    height: 9px;
    width: 9px;
}

/* abstract pattern (no scannable code): these cells fill in when the ticket is issued */
.ticket--issued .ticket__code i:is(:nth-child(1), :nth-child(2), :nth-child(3), :nth-child(5), :nth-child(6), :nth-child(8),
    :nth-child(11), :nth-child(13), :nth-child(14), :nth-child(17), :nth-child(19), :nth-child(20), :nth-child(21),
    :nth-child(22), :nth-child(24), :nth-child(25)) {
    background: var(--color-lime);
    border-color: var(--color-lime);
}

.ticket__code-note {
    color: var(--color-muted-on-dark);
    font-size: 0.66rem;
    font-weight: 700;
    line-height: 1.2;
}

.ticket__stamp {
    border: 2px solid var(--color-lime);
    border-radius: 6px;
    color: var(--color-lime);
    display: none;
    font-size: 0.66rem;
    font-weight: 900;
    line-height: 1.15;
    padding: 4px 6px;
    text-transform: uppercase;
    transform: rotate(-8deg);
}

.ticket--issued .ticket__stamp {
    display: block;
}

@media (prefers-reduced-motion: no-preference) {
    /* «Druck»: Lichtkante läuft über das Ticket, die Balken steigen im Rhythmus des Sound-Logos,
       das Muster füllt sich Zelle für Zelle, der Stempel landet zuletzt */
    .ticket.is-printing::after {
        animation: s7-print-sweep 0.7s cubic-bezier(0.4, 0, 0.2, 1) both;
        background: linear-gradient(100deg, transparent 30%, rgba(229, 255, 75, 0.35) 50%, transparent 70%);
        content: "";
        inset: 0;
        pointer-events: none;
        position: absolute;
    }

    .ticket--issued .ticket__bars i {
        animation: s7-bar-rise 0.36s cubic-bezier(0.2, 0.9, 0.3, 1) var(--d) both;
    }

    .ticket--issued .ticket__code i {
        animation: s7-cell 0.3s ease-out calc(var(--k, 0) * 22ms) both;
    }

    .ticket--issued .ticket__stamp {
        animation: s7-stamp 0.42s cubic-bezier(0.2, 1.4, 0.4, 1) 0.95s both;
    }

    .success-ticket .ticket {
        animation: s7-ticket-arrive 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
    }
}

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

@keyframes s7-cell {
    from { opacity: 0; transform: scale(0.3); }
}

@keyframes s7-stamp {
    from { opacity: 0; transform: rotate(-8deg) scale(1.9); }
    to { opacity: 1; transform: rotate(-8deg) scale(1); }
}

@keyframes s7-ticket-arrive {
    from { opacity: 0; transform: translateY(-26px) rotate(-2deg); }
}

.success-ticket {
    margin: 0 auto 30px;
    max-width: 440px;
}

@media (max-width: 960px) {
    .register-layout {
        grid-template-columns: 1fr;
    }

    .live-ticket {
        margin: 0 auto;
        max-width: 480px;
        order: -1;
        position: static;
        width: 100%;
    }
}

@media (max-width: 560px) {
    .ticket {
        --stub: 88px;
    }

    .ticket__main {
        padding: 16px 14px 14px 16px;
    }

    .ticket__name {
        font-size: 1.15rem;
    }

    .live-ticket .ticket__where {
        display: none;
    }

    .ticket__stamp {
        font-size: 0.58rem;
        padding: 3px 4px;
    }
}

/* E1 «5 Dinge vor dem 9. März» auf der Danke-Seite (nur mit Klick, mit Ton) */
.success-video {
    background: var(--color-ink);
    border-radius: var(--radius-md);
    color: var(--color-white);
    margin-top: 36px;
    overflow: hidden;
    text-align: left;
}

.success-video video {
    aspect-ratio: 16 / 9;
    background: var(--color-ink);
    display: block;
    height: auto;
    width: 100%;
}

.success-video__text {
    display: grid;
    gap: 6px;
    padding: 16px clamp(16px, 3vw, 24px) 18px;
}

.success-video__text h2 {
    font-size: 1.2rem;
}

.success-video__text p,
.success-video__text summary {
    color: var(--color-muted-on-dark);
    font-size: 0.9rem;
}

.success-video__text summary {
    cursor: pointer;
    font-weight: 700;
}

.success-video__text details p {
    color: rgba(255, 255, 255, 0.86);
    margin-top: 8px;
}