/**
 * Register wizard – mobile viewport: kein Abschneiden, ausreichend Platz unter fixen Buttons.
 * Global body nutzt 140px Padding + overflow:hidden → wizard mit 100dvh wurde unten abgeschnitten.
 * Hier: volle Höhe nur mit Safe-Area, Wizard flex-fill + internes Scrollen.
 */

/* Section nutzt die volle Breite (nicht style.css .container mit max-width:500px); Felder bleiben begrenzt */
body.page-register {
    --register-form-base-width: min(420px, 100%);
    --register-form-max-width: var(--register-form-base-width);
    --register-gender-menu-bg: #ffffff;
    --register-gender-menu-border: rgba(0, 0, 0, 0.06);
    --register-gender-page-bg: transparent;
    --register-gender-page-bg-solid: transparent;
    --register-grunddaten-flag-fade-to: #ffffff;
    --register-grunddaten-flag-fade-rgb: 255 255 255;
    align-items: stretch !important;
    justify-content: flex-start !important;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

body.page-register .wizard-layout {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

body.page-register .wizard-layout .wizard-form-layer {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

body.page-register .wizard-layout .wizard-form-layer .container {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box;
}

/* Schritt-Panels: nur einer sichtbar; Slide-Animation siehe register-wizard-layout.css */
body.page-register #registerForm .wizard-content__stage > div.hidden:not(.wizard-step-slide-animating) {
    display: none !important;
}

body.page-register #registerForm .wizard-content__stage > div:not(.hidden):not(.wizard-step-slide-animating) {
    display: block !important;
}

/* Slide-Layout (flex + vert. Mitte): register-wizard-layout.css — kein display:block auf .wizard-step-slide-animating */

/* Meldungen über dem Formular: lesbare Zeilenlänge */
body.page-register #registerForm > .error-message,
body.page-register #registerForm > .success-message {
    max-width: min(480px, 100%);
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

/* Alle Schritte: wie Account horizontal zentriert (Profil-Vorschau ausgenommen) */
body.page-register:not(.kinma-wizard-profile-preview-step):not(.kinma-wizard-register-success-step) #registerForm {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

body.page-register:not(.kinma-wizard-profile-preview-step):not(.kinma-wizard-register-success-step) #registerForm .wizard-content {
    width: 100%;
}

body.page-register:not(.kinma-wizard-profile-preview-step):not(.kinma-wizard-register-success-step)
    #registerForm
    .wizard-content__stage
    > div:not(:has(#profile-preview-wrapper)):not(.register-wizard-step-success):not(.wizard-step-grunddaten):not(.register-wizard-step-kinma) {
    width: 100%;
    max-width: var(--register-form-max-width);
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

/* Während Slide: Formularbreite beibehalten (kein Full-Width-Stretch) */
body.page-register:not(.kinma-wizard-profile-preview-step):not(.kinma-wizard-register-success-step)
    #registerForm
    .wizard-content__stage
    > div.wizard-step-slide-animating:not(:has(#profile-preview-wrapper)):not(.register-wizard-step-success):not(.wizard-step-grunddaten):not(.register-wizard-step-kinma),
body.page-register:not(.kinma-wizard-profile-preview-step):not(.kinma-wizard-register-success-step)
    #registerForm
    .wizard-content__stage
    > div.wizard-step-slide-current:not(:has(#profile-preview-wrapper)):not(.register-wizard-step-success):not(.wizard-step-grunddaten):not(.register-wizard-step-kinma) {
    max-width: var(--register-form-max-width) !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

body.page-register #registerForm .wizard-content__stage > div.register-wizard-step-account {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

body.page-register #registerForm .wizard-content__stage > div:has(#profile-preview-wrapper) {
    width: 100%;
    max-width: 100%;
}

/* ─── Schritt Grunddaten: Layout (Name breit, Zeilen, Herkunft unten) ─── */
body.page-register #registerForm .wizard-content__stage > div.wizard-step-grunddaten {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    overflow: visible;
}

body.page-register:not(.kinma-wizard-profile-preview-step)
    #registerForm
    .wizard-content__stage
    > div.wizard-step-grunddaten.wizard-step-slide-animating,
body.page-register:not(.kinma-wizard-profile-preview-step)
    #registerForm
    .wizard-content__stage
    > div.wizard-step-grunddaten.wizard-step-slide-current,
body.page-register:not(.kinma-wizard-profile-preview-step)
    #registerForm
    .wizard-content__stage
    > div.wizard-step-grunddaten:not(.hidden) {
    max-width: 100% !important;
}

body.page-register:not(.kinma-wizard-profile-preview-step)
    #registerForm
    .wizard-content__stage
    > div.wizard-step-grunddaten
    > .wizard-step-slide-motion {
    width: 100%;
    max-width: 100% !important;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

/* Kinma (Sprache/Rechtliches): volle Breite zwischen Nav-Buttons */
body.page-register #registerForm .wizard-content__stage > div.register-wizard-step-kinma {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

body.page-register:not(.kinma-wizard-profile-preview-step)
    #registerForm
    .wizard-content__stage
    > div.register-wizard-step-kinma.wizard-step-slide-animating,
body.page-register:not(.kinma-wizard-profile-preview-step)
    #registerForm
    .wizard-content__stage
    > div.register-wizard-step-kinma.wizard-step-slide-current,
body.page-register:not(.kinma-wizard-profile-preview-step)
    #registerForm
    .wizard-content__stage
    > div.register-wizard-step-kinma:not(.hidden) {
    max-width: 100% !important;
    width: 100% !important;
}

body.page-register.kinma-wizard-kinma-step .register-wizard-form-layer > .container {
    max-width: 100% !important;
    width: 100% !important;
}

body.page-register.kinma-wizard-kinma-step #registerForm {
    align-items: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* Grunddaten: volle Breite, vertikal zentriert im Viewport-Slot */
body.page-register.kinma-wizard-grunddaten-step {
    --register-name-preview-strip-width: 100%;
    --register-form-base-width: min(clamp(460px, 52vw, 640px), 100%);
    --register-form-max-width: var(--register-form-base-width);
}

body.page-register.kinma-wizard-grunddaten-step:not(.kinma-wizard-profile-preview-step):not(.kinma-wizard-register-success-step)
    .register-wizard-form-layer {
    align-items: center !important;
}

body.page-register.kinma-wizard-grunddaten-step #registerForm .wizard-content {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    min-height: 0 !important;
    max-height: none;
    overflow: visible;
    padding-top: 0;
    box-sizing: border-box;
}

body.page-register.kinma-wizard-grunddaten-step #registerForm .wizard-content__stage {
    justify-content: flex-start !important;
    align-items: stretch !important;
    max-height: none;
}

body.page-register.kinma-wizard-grunddaten-step.kinma-register-wizard-sliding #registerForm .wizard-content__stage {
    justify-content: center !important;
}

body.page-register.kinma-wizard-grunddaten-step .register-wizard-form-layer > .container {
    max-width: 100% !important;
    width: 100% !important;
}

body.page-register .wizard-step-grunddaten .name-preview-container {
    width: 100%;
    max-width: min(540px, 100%);
    margin: 0 auto 16px;
    padding: 18px 0;
    border-top: 1px solid #e9ecef;
    border-bottom: 1px solid #e9ecef;
    box-sizing: border-box;
    align-self: center;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    container-type: inline-size;
    container-name: register-name-preview;
}

/* Namens-Text: volle Breite zwischen Nav-Buttons; Eingaben/Karte bleiben bei --register-form-base-width */
body.page-register .wizard-step-grunddaten .name-preview-container--register-grunddaten {
    width: var(--register-name-preview-strip-width, 100%);
    min-width: 0;
    max-width: 100%;
    margin-top: 0;
    margin-bottom: clamp(24px, 3.5vh, 40px);
    margin-left: 0;
    margin-right: 0;
    padding: 0;
    border-top: none;
    border-bottom: none;
    align-self: stretch;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

body.page-register .wizard-step-grunddaten .register-name-fields-row {
    margin-top: clamp(12px, 2vh, 20px);
}

body.page-register .wizard-step-grunddaten .name-preview-container--register-grunddaten .name-preview-display {
    position: relative;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    height: auto;
    border-radius: 0;
    overflow: visible;
    background: transparent;
    gap: 0;
    padding: 0;
    min-height: clamp(3rem, 6vh, 4.5rem);
    aspect-ratio: auto;
    border: none;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

body.page-register .wizard-step-grunddaten .name-preview-display--register-grunddaten[data-gender="w"],
body.page-register .wizard-step-grunddaten .name-preview-display--register-grunddaten[data-gender="m"],
body.page-register .wizard-step-grunddaten .name-preview-display--register-grunddaten[data-gender="d"],
body.page-register .wizard-step-grunddaten .name-preview-display--register-grunddaten[data-gender='unknown'] {
    border: none;
    box-shadow: none;
}

/* Geschlecht: dezenter Menü-/Seitenhintergrund statt farbigem Namen */
body.page-register[data-kinma-register-gender="w"] {
    --register-gender-menu-bg: rgba(253, 242, 248, 0.97);
    --register-gender-menu-border: rgba(232, 121, 169, 0.24);
    --register-gender-page-bg: rgba(253, 242, 248, 0.42);
    --register-gender-page-bg-solid: #fdf2f8;
    --register-grunddaten-flag-fade-to: #fdf2f8;
    --register-grunddaten-flag-fade-rgb: 253 242 248;
}

body.page-register[data-kinma-register-gender="m"] {
    --register-gender-menu-bg: rgba(239, 246, 255, 0.97);
    --register-gender-menu-border: rgba(96, 165, 250, 0.24);
    --register-gender-page-bg: rgba(239, 246, 255, 0.42);
    --register-gender-page-bg-solid: #eff6ff;
    --register-grunddaten-flag-fade-to: #eff6ff;
    --register-grunddaten-flag-fade-rgb: 239 246 255;
}

body.page-register[data-kinma-register-gender="unknown"] {
    --register-gender-menu-bg: #ffffff;
    --register-gender-menu-border: rgba(0, 0, 0, 0.06);
    --register-gender-page-bg: transparent;
    --register-gender-page-bg-solid: #ffffff;
    --register-grunddaten-flag-fade-to: #ffffff;
    --register-grunddaten-flag-fade-rgb: 255 255 255;
}

body.dark-mode.page-register[data-kinma-register-gender="unknown"] {
    --register-gender-menu-bg: #ffffff;
    --register-gender-menu-border: rgba(148, 163, 184, 0.22);
    --register-gender-page-bg: transparent;
    --register-gender-page-bg-solid: #f3f4f6;
    --register-grunddaten-flag-fade-to: #f3f4f6;
    --register-grunddaten-flag-fade-rgb: 243 244 246;
}

/* Volle Viewport-Tint (Account / Grunddaten / Dateien) — fixe Ebene unter Flagge + Formular */
body.page-register .register-gender-page-backdrop {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    background: var(--register-gender-page-bg-solid, #ffffff);
    transition: none;
}

body.page-register[data-kinma-register-gender="unknown"] .register-gender-page-backdrop {
    opacity: 0 !important;
    visibility: hidden !important;
    background: transparent !important;
}

body.dark-mode.page-register[data-kinma-register-gender="w"] {
    --register-gender-menu-bg: rgba(76, 29, 52, 0.92);
    --register-gender-menu-border: rgba(244, 114, 182, 0.28);
    --register-gender-page-bg: rgba(76, 29, 52, 0.28);
    --register-gender-page-bg-solid: #2a1520;
    --register-grunddaten-flag-fade-to: #2a1520;
    --register-grunddaten-flag-fade-rgb: 42 21 32;
}

body.dark-mode.page-register[data-kinma-register-gender="m"] {
    --register-gender-menu-bg: rgba(23, 37, 84, 0.92);
    --register-gender-menu-border: rgba(96, 165, 250, 0.28);
    --register-gender-page-bg: rgba(23, 37, 84, 0.28);
    --register-gender-page-bg-solid: #141e32;
    --register-grunddaten-flag-fade-to: #141e32;
    --register-grunddaten-flag-fade-rgb: 20 30 50;
}

body.page-register.kinma-wizard-gender-tint-step[data-kinma-register-gender="w"]:not(.kinma-wizard-profile-preview-step):not(.kinma-wizard-register-success-step)
    .register-gender-page-backdrop,
body.page-register.kinma-wizard-gender-tint-step[data-kinma-register-gender="m"]:not(.kinma-wizard-profile-preview-step):not(.kinma-wizard-register-success-step)
    .register-gender-page-backdrop {
    opacity: 1;
    visibility: visible;
}

body.page-register.kinma-wizard-gender-tint-step[data-kinma-register-gender="w"]:not(.kinma-wizard-profile-preview-step):not(.kinma-wizard-register-success-step),
body.page-register.kinma-wizard-gender-tint-step[data-kinma-register-gender="m"]:not(.kinma-wizard-profile-preview-step):not(.kinma-wizard-register-success-step) {
    background: var(--register-gender-page-bg-solid) !important;
}

body.page-register.kinma-wizard-gender-tint-step[data-kinma-register-gender="unknown"]:not(.kinma-wizard-profile-preview-step):not(.kinma-wizard-register-success-step):has(.register-name-preview-flag:not([data-country-code=""])) {
    background: var(--register-gender-page-bg-solid, #ffffff) !important;
}

/* Geschlechts-Tint: Formular-Stack durchsichtig (style.css .container ist weiß) */
body.page-register.kinma-wizard-gender-tint-step[data-kinma-register-gender="w"]:not(.kinma-wizard-profile-preview-step):not(.kinma-wizard-register-success-step)
    .wizard-layout,
body.page-register.kinma-wizard-gender-tint-step[data-kinma-register-gender="m"]:not(.kinma-wizard-profile-preview-step):not(.kinma-wizard-register-success-step)
    .wizard-layout,
body.page-register.kinma-wizard-gender-tint-step[data-kinma-register-gender="w"]:not(.kinma-wizard-profile-preview-step):not(.kinma-wizard-register-success-step)
    .register-wizard-form-layer,
body.page-register.kinma-wizard-gender-tint-step[data-kinma-register-gender="m"]:not(.kinma-wizard-profile-preview-step):not(.kinma-wizard-register-success-step)
    .register-wizard-form-layer,
body.page-register.kinma-wizard-gender-tint-step[data-kinma-register-gender="w"]:not(.kinma-wizard-profile-preview-step):not(.kinma-wizard-register-success-step)
    .register-wizard-form-layer > .container,
body.page-register.kinma-wizard-gender-tint-step[data-kinma-register-gender="m"]:not(.kinma-wizard-profile-preview-step):not(.kinma-wizard-register-success-step)
    .register-wizard-form-layer > .container,
body.page-register.kinma-wizard-gender-tint-step[data-kinma-register-gender="w"]:not(.kinma-wizard-profile-preview-step):not(.kinma-wizard-register-success-step)
    #registerForm,
body.page-register.kinma-wizard-gender-tint-step[data-kinma-register-gender="m"]:not(.kinma-wizard-profile-preview-step):not(.kinma-wizard-register-success-step)
    #registerForm,
body.page-register.kinma-wizard-gender-tint-step[data-kinma-register-gender="w"]:not(.kinma-wizard-profile-preview-step):not(.kinma-wizard-register-success-step)
    #registerForm .wizard-content,
body.page-register.kinma-wizard-gender-tint-step[data-kinma-register-gender="m"]:not(.kinma-wizard-profile-preview-step):not(.kinma-wizard-register-success-step)
    #registerForm .wizard-content {
    background: transparent !important;
    background-color: transparent !important;
}

body.page-register:not(.kinma-wizard-profile-preview-step):not(.kinma-wizard-register-success-step):not(.kinma-register-wizard-sliding)
    .wizard-layout
    .wizard-form-layer.register-wizard-form-layer {
    z-index: 2 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    scroll-padding-top: 8px;
    scroll-padding-bottom: 12px;
}

body.page-register.kinma-wizard-profile-preview-step .register-wizard-form-layer,
body.page-register.kinma-wizard-register-success-step .register-wizard-form-layer,
body.page-register.kinma-register-wizard-sliding .register-wizard-form-layer {
    overflow-y: hidden !important;
}

body.page-register:not(.kinma-wizard-profile-preview-step):not(.kinma-wizard-register-success-step)
    .register-wizard-form-layer
    > .container,
body.page-register:not(.kinma-wizard-profile-preview-step):not(.kinma-wizard-register-success-step)
    .register-wizard-form-layer
    #registerForm {
    min-height: 0;
    max-height: none;
    overflow: visible;
}

body.page-register.kinma-wizard-profile-preview-step .register-wizard-form-layer > .container,
body.page-register.kinma-wizard-profile-preview-step .register-wizard-form-layer #registerForm,
body.page-register.kinma-wizard-register-success-step .register-wizard-form-layer > .container,
body.page-register.kinma-wizard-register-success-step .register-wizard-form-layer #registerForm {
    max-height: 100%;
    overflow: hidden;
}

body.page-register:not(.kinma-wizard-profile-preview-step):not(.kinma-wizard-register-success-step)
    .register-wizard-form-layer
    #registerForm
    .wizard-content,
body.page-register:not(.kinma-wizard-profile-preview-step):not(.kinma-wizard-register-success-step)
    .register-wizard-form-layer
    #registerForm
    .wizard-content__stage {
    min-height: 0;
    max-height: none;
    overflow: visible;
}

body.page-register.kinma-wizard-profile-preview-step .register-wizard-form-layer #registerForm .wizard-content,
body.page-register.kinma-wizard-profile-preview-step .register-wizard-form-layer #registerForm .wizard-content__stage {
    min-height: 0;
    max-height: 100%;
    overflow: visible;
}

body.page-register.kinma-wizard-register-success-step .register-wizard-form-layer #registerForm .wizard-content,
body.page-register.kinma-wizard-register-success-step .register-wizard-form-layer #registerForm .wizard-content__stage {
    min-height: 0;
    max-height: none;
    overflow: hidden;
}

body.page-register.kinma-wizard-grunddaten-step,
body.page-register.kinma-wizard-grunddaten-step .wizard-layout,
body.page-register.kinma-wizard-gender-tint-step .wizard-layout,
body.page-register.kinma-wizard-grunddaten-step .register-wizard-form-layer,
body.page-register.kinma-wizard-gender-tint-step .register-wizard-form-layer,
body.page-register .register-grunddaten-flag-backdrop::after {
    transition: none !important;
}

body.page-register.kinma-wizard-gender-tint-step:has(.register-name-preview-flag:not([data-country-code=""]))
    .register-wizard-form-layer,
body.page-register.kinma-wizard-grunddaten-step:has(.register-name-preview-flag:not([data-country-code=""]))
    .register-wizard-form-layer {
    background-color: transparent;
}

body.page-register.kinma-wizard-gender-tint-step .left-nav-cluster--auth .kinma-nav-island,
body.page-register.kinma-wizard-gender-tint-step .left-nav-cluster--auth .kinma-logo-island.kinma-logo-btn,
body.page-register.kinma-wizard-gender-tint-step .left-nav-cluster--auth .utility-island:not(.kinma-logo-island) {
    background: var(--register-gender-menu-bg) !important;
    border-color: var(--register-gender-menu-border) !important;
    transition: none;
}

body.dark-mode.page-register {
    --register-grunddaten-flag-fade-to: #f3f4f6;
    --register-grunddaten-flag-fade-rgb: 243 244 246;
}

body.page-register .register-grunddaten-flag-backdrop {
    --register-origin-flag-anim-dur: 0.52s;
    --register-origin-flag-anim-ease: cubic-bezier(0.22, 1, 0.36, 1);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100vw;
    height: calc(100vh / 3);
    max-height: calc(100dvh / 3);
    margin: 0;
    padding: 0;
    overflow: hidden;
    z-index: 1;
    pointer-events: none;
    visibility: hidden;
    opacity: 0;
    transition: opacity var(--register-origin-flag-anim-dur) var(--register-origin-flag-anim-ease);
}

body.page-register .register-grunddaten-flag-backdrop.is-visible,
body.page-register .register-grunddaten-flag-backdrop.is-entering,
body.page-register .register-grunddaten-flag-backdrop.is-exiting {
    visibility: visible;
}

body.page-register .register-grunddaten-flag-backdrop.is-visible:not(.is-exiting):not(.is-entering) {
    opacity: 1;
}

body.page-register .register-grunddaten-flag-backdrop.is-entering,
body.page-register .register-grunddaten-flag-backdrop.is-exiting {
    opacity: 0;
}

body.page-register.kinma-wizard-profile-preview-step .register-grunddaten-flag-backdrop,
body.page-register.kinma-wizard-register-success-step .register-grunddaten-flag-backdrop {
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Von den Seiten zur Mitte: --register-flag-side-gap 100% → 0% (Mitte füllt sich zuletzt) */
@property --register-flag-side-gap {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 100%;
}

/* Mit gesetzter Herkunft: kein weißer Container-Kasten — Flagge und Geschlechts-Tint sichtbar (unknown: weißer body, siehe oben) */
body.page-register.kinma-wizard-gender-tint-step:not([data-kinma-register-gender="unknown"]):has(.register-name-preview-flag:not([data-country-code=""])):not(.kinma-wizard-profile-preview-step):not(.kinma-wizard-register-success-step),
body.page-register:not([data-kinma-register-gender="unknown"]):has(.register-name-preview-flag:not([data-country-code=""])):not(.kinma-wizard-profile-preview-step):not(.kinma-wizard-register-success-step) {
    background: transparent !important;
}

body.page-register.kinma-wizard-gender-tint-step:has(.register-name-preview-flag:not([data-country-code=""])):not(.kinma-wizard-profile-preview-step):not(.kinma-wizard-register-success-step)
    .wizard-layout,
body.page-register:has(.register-name-preview-flag:not([data-country-code=""])):not(.kinma-wizard-profile-preview-step):not(.kinma-wizard-register-success-step)
    .wizard-layout,
body.page-register.kinma-wizard-gender-tint-step:has(.register-name-preview-flag:not([data-country-code=""])):not(.kinma-wizard-profile-preview-step):not(.kinma-wizard-register-success-step)
    .register-wizard-form-layer,
body.page-register:has(.register-name-preview-flag:not([data-country-code=""])):not(.kinma-wizard-profile-preview-step):not(.kinma-wizard-register-success-step)
    .register-wizard-form-layer,
body.page-register.kinma-wizard-gender-tint-step:has(.register-name-preview-flag:not([data-country-code=""])):not(.kinma-wizard-profile-preview-step):not(.kinma-wizard-register-success-step)
    .register-wizard-form-layer > .container,
body.page-register:has(.register-name-preview-flag:not([data-country-code=""])):not(.kinma-wizard-profile-preview-step):not(.kinma-wizard-register-success-step)
    .register-wizard-form-layer > .container,
body.page-register.kinma-wizard-gender-tint-step:has(.register-name-preview-flag:not([data-country-code=""])):not(.kinma-wizard-profile-preview-step):not(.kinma-wizard-register-success-step)
    #registerForm,
body.page-register:has(.register-name-preview-flag:not([data-country-code=""])):not(.kinma-wizard-profile-preview-step):not(.kinma-wizard-register-success-step)
    #registerForm,
body.page-register.kinma-wizard-gender-tint-step:has(.register-name-preview-flag:not([data-country-code=""])):not(.kinma-wizard-profile-preview-step):not(.kinma-wizard-register-success-step)
    #registerForm .wizard-content,
body.page-register:has(.register-name-preview-flag:not([data-country-code=""])):not(.kinma-wizard-profile-preview-step):not(.kinma-wizard-register-success-step)
    #registerForm .wizard-content {
    background: transparent !important;
    background-color: transparent !important;
}

/* Mit Herkunftsflagge: Geschlechts-Tint auf der ganzen Seite statt durchsichtigem Weiß */
body.page-register.kinma-wizard-grunddaten-step[data-kinma-register-gender="w"]:has(.register-name-preview-flag:not([data-country-code=""])):not(.kinma-wizard-profile-preview-step):not(.kinma-wizard-register-success-step),
body.page-register.kinma-wizard-grunddaten-step[data-kinma-register-gender="m"]:has(.register-name-preview-flag:not([data-country-code=""])):not(.kinma-wizard-profile-preview-step):not(.kinma-wizard-register-success-step) {
    background: transparent !important;
}

body.page-register:has(.register-name-preview-flag:not([data-country-code=""]))
    .wizard-step-grunddaten
    .name-preview-container--register-grunddaten {
    border-top: none;
    border-bottom: none;
}

body.page-register .register-grunddaten-flag-backdrop__clip {
    --register-flag-side-gap: 100%;
    /* Weiche Kante nur solange die Mitte noch geschlossen ist (bei 0% keine Lücke) */
    --register-flag-mask-feather: calc(var(--register-flag-side-gap) * 0.2);
    position: absolute;
    inset: 0;
    overflow: hidden;
    opacity: 0;
    -webkit-mask-image: linear-gradient(
        90deg,
        #000 0%,
        #000 calc(max(0%, 50% - var(--register-flag-side-gap) / 2 - var(--register-flag-mask-feather))),
        transparent calc(max(0%, 50% - var(--register-flag-side-gap) / 2)),
        transparent calc(min(100%, 50% + var(--register-flag-side-gap) / 2)),
        #000 calc(min(100%, 50% + var(--register-flag-side-gap) / 2 + var(--register-flag-mask-feather))),
        #000 100%
    );
    mask-image: linear-gradient(
        90deg,
        #000 0%,
        #000 calc(max(0%, 50% - var(--register-flag-side-gap) / 2 - var(--register-flag-mask-feather))),
        transparent calc(max(0%, 50% - var(--register-flag-side-gap) / 2)),
        transparent calc(min(100%, 50% + var(--register-flag-side-gap) / 2)),
        #000 calc(min(100%, 50% + var(--register-flag-side-gap) / 2 + var(--register-flag-mask-feather))),
        #000 100%
    );
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    transition:
        --register-flag-side-gap var(--register-origin-flag-anim-dur) var(--register-origin-flag-anim-ease),
        opacity var(--register-origin-flag-anim-dur) var(--register-origin-flag-anim-ease);
}

/* Start Einblendung: nur Seiten sichtbar (is-visible darf parallel gesetzt sein) */
body.page-register .register-grunddaten-flag-backdrop.is-entering .register-grunddaten-flag-backdrop__clip {
    --register-flag-side-gap: 100%;
    opacity: 0;
}

/* Nach is-entering entfernen: Gap 100% → 0% (Seiten zur Mitte) */
body.page-register .register-grunddaten-flag-backdrop.is-visible:not(.is-exiting):not(.is-entering):not(.is-country-swapping)
    .register-grunddaten-flag-backdrop__clip {
    --register-flag-side-gap: 0%;
    opacity: 1;
}

/* Landwechsel: alte Flagge bleibt unten, neue blendet von den Seiten darüber ein */
body.page-register .register-grunddaten-flag-backdrop.is-country-swapping {
    opacity: 1 !important;
    visibility: visible;
}

body.page-register .register-grunddaten-flag-backdrop__clip--retiring {
    z-index: 0;
    --register-flag-side-gap: 0%;
    opacity: 1;
    -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 100%);
    mask-image: linear-gradient(90deg, #000 0%, #000 100%);
    transition: none !important;
}

body.page-register .register-grunddaten-flag-backdrop.is-country-swapping
    .register-grunddaten-flag-backdrop__clip--swap-enter {
    z-index: 1;
    --register-flag-side-gap: 100%;
    opacity: 0;
    -webkit-mask-image: linear-gradient(
        90deg,
        #000 0%,
        #000 calc(max(0%, 50% - var(--register-flag-side-gap) / 2 - var(--register-flag-mask-feather))),
        transparent calc(max(0%, 50% - var(--register-flag-side-gap) / 2)),
        transparent calc(min(100%, 50% + var(--register-flag-side-gap) / 2)),
        #000 calc(min(100%, 50% + var(--register-flag-side-gap) / 2 + var(--register-flag-mask-feather))),
        #000 100%
    );
    mask-image: linear-gradient(
        90deg,
        #000 0%,
        #000 calc(max(0%, 50% - var(--register-flag-side-gap) / 2 - var(--register-flag-mask-feather))),
        transparent calc(max(0%, 50% - var(--register-flag-side-gap) / 2)),
        transparent calc(min(100%, 50% + var(--register-flag-side-gap) / 2)),
        #000 calc(min(100%, 50% + var(--register-flag-side-gap) / 2 + var(--register-flag-mask-feather))),
        #000 100%
    );
}

body.page-register .register-grunddaten-flag-backdrop.is-country-swapping
    .register-grunddaten-flag-backdrop__clip--swap-enter.is-swap-revealing {
    --register-flag-side-gap: 0%;
    opacity: 1;
}

/* Ruhezustand nach Animation: volle Maske, keine transparente Mitte */
body.page-register .register-grunddaten-flag-backdrop.is-revealed:not(.is-exiting):not(.is-country-swapping)
    .register-grunddaten-flag-backdrop__clip:not(.register-grunddaten-flag-backdrop__clip--swap-enter):not(.register-grunddaten-flag-backdrop__clip--retiring) {
    -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 100%);
    mask-image: linear-gradient(90deg, #000 0%, #000 100%);
}

body.page-register .register-grunddaten-flag-backdrop.is-exiting .register-grunddaten-flag-backdrop__clip {
    --register-flag-side-gap: 100%;
    opacity: 0;
}

body.page-register .register-grunddaten-flag-backdrop.is-instant {
    opacity: 1 !important;
    transition: none !important;
}

body.page-register .register-grunddaten-flag-backdrop.is-instant .register-grunddaten-flag-backdrop__clip {
    --register-flag-side-gap: 0% !important;
    opacity: 1 !important;
    transition: none !important;
    -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 100%) !important;
    mask-image: linear-gradient(90deg, #000 0%, #000 100%) !important;
}

/* Weicher Übergang in den Seitenhintergrund — eine Regel, Farbe nur über CSS-Variablen (Geschlechtswechsel synchron) */
body.page-register .register-grunddaten-flag-backdrop::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    background: linear-gradient(
        to bottom,
        rgb(var(--register-grunddaten-flag-fade-rgb) / 0) 0%,
        rgb(var(--register-grunddaten-flag-fade-rgb) / 0) 16%,
        rgb(var(--register-grunddaten-flag-fade-rgb) / 0.06) 28%,
        rgb(var(--register-grunddaten-flag-fade-rgb) / 0.16) 40%,
        rgb(var(--register-grunddaten-flag-fade-rgb) / 0.3) 52%,
        rgb(var(--register-grunddaten-flag-fade-rgb) / 0.46) 64%,
        rgb(var(--register-grunddaten-flag-fade-rgb) / 0.62) 76%,
        rgb(var(--register-grunddaten-flag-fade-rgb) / 0.78) 86%,
        rgb(var(--register-grunddaten-flag-fade-rgb) / 0.9) 93%,
        rgb(var(--register-grunddaten-flag-fade-rgb) / 0.97) 97%,
        var(--register-grunddaten-flag-fade-to, #ffffff) 100%
    );
}

body.page-register .register-grunddaten-flag-backdrop .register-name-preview-flag-layer {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    border-radius: 0;
    overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
    body.page-register .register-grunddaten-flag-backdrop__clip {
        --register-flag-side-gap: 0% !important;
        opacity: 1 !important;
        transition: none !important;
        -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 100%) !important;
        mask-image: linear-gradient(90deg, #000 0%, #000 100%) !important;
    }
}

body.page-register .register-grunddaten-flag-backdrop .register-name-preview-flag {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: 0;
    opacity: 1;
    z-index: 0;
    pointer-events: none;
    background-size: 100% 100%;
    background-position: center top;
    background-repeat: no-repeat;
}

body.page-register .register-grunddaten-flag-backdrop .register-name-preview-flag .kinma-flag-stars-overlay {
    position: absolute;
    pointer-events: none;
    z-index: 1;
    overflow: visible;
}

body.page-register .register-grunddaten-flag-backdrop .register-name-preview-flag[data-country-code=""] {
    background: transparent;
}

/* Wappen/Symbol: Wasserzeichen mittig auf Vollbild-Flagge */
body.page-register .register-grunddaten-flag-backdrop .register-name-preview-flag-layer .tree-person-flag-symbol-background.register-name-preview-flag-symbol {
    position: absolute;
    inset: 0;
    border-radius: 0;
    z-index: 1;
    opacity: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

body.page-register .register-grunddaten-flag-backdrop .register-name-preview-flag-symbol[data-symbol-type="emoji"] {
    font-size: clamp(2.5rem, 12vw, 6rem);
    line-height: 1;
    opacity: 1;
}

body.page-register .register-grunddaten-flag-backdrop .register-name-preview-flag-symbol[data-symbol-type="text"] {
    font-size: clamp(2rem, 9vw, 4.5rem);
    font-weight: 900;
    color: rgba(71, 85, 105, 0.92);
    line-height: 1;
    opacity: 1;
}

body.page-register.dark-mode .register-grunddaten-flag-backdrop .register-name-preview-flag-symbol[data-symbol-type="text"] {
    color: rgba(148, 163, 184, 0.9);
    opacity: 1;
}

body.page-register .register-grunddaten-flag-backdrop .register-name-preview-flag-symbol[data-symbol-type="svg"] svg {
    width: min(28vw, 200px);
    height: auto;
    max-height: 18vh;
    opacity: 1;
}

body.page-register .register-grunddaten-flag-backdrop .register-name-preview-flag-symbol[data-symbol-type="image"] img {
    width: min(24vw, 180px);
    height: auto;
    object-fit: contain;
    opacity: 1;
}

/* Stammbaum-Regel .tree-person-flag::after = weiße Innenkarte — hier nicht anwenden */
body.page-register .register-grunddaten-flag-backdrop .register-name-preview-flag::after,
body.page-register .register-grunddaten-flag-backdrop .register-name-preview-flag::before {
    display: none !important;
    content: none !important;
    background: none !important;
    border: none !important;
}

body.page-register .wizard-step-grunddaten .name-preview-display-inner--register-grunddaten {
    position: relative;
    z-index: 2;
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    /* Seitlicher Abstand: Text nicht in die Rundungen der Pille */
    --register-name-preview-inset-x: clamp(32px, 11cqi, 4.75rem);
    --register-name-preview-name-size: clamp(1.55rem, 7.25cqi, 2.65rem);
    --register-name-preview-birth-size: clamp(1.0625rem, 4.25cqi, 1.45rem);
    --register-name-preview-place-size: clamp(1rem, 3.85cqi, 1.3rem);
    padding: 12px var(--register-name-preview-inset-x) 14px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.28em;
    background: transparent;
    overflow: visible;
    min-height: 0;
}

body.page-register .wizard-step-grunddaten .register-name-preview-name-row,
body.page-register .wizard-step-grunddaten .register-name-preview-names-slot,
body.page-register .wizard-step-grunddaten .register-name-preview-names-slot .register-name-preview-row,
body.page-register .wizard-step-grunddaten .register-name-preview-names-slot .name-preview-primary-row {
    background: transparent;
}

/* Name-Vorschau: Geburt/Herkunft schwarz; Vor-/Nachname nach Geschlecht */
body.page-register .wizard-step-grunddaten .name-preview-display-inner--register-grunddaten {
    --register-name-preview-text-shadow: none;
    color: #1a1a1a;
}

body.page-register .wizard-step-grunddaten .name-preview-display-inner--register-grunddaten .name-preview-text,
body.page-register .wizard-step-grunddaten .name-preview-display-inner--register-grunddaten .register-name-preview-birth,
body.page-register .wizard-step-grunddaten .name-preview-display-inner--register-grunddaten .register-name-preview-place,
body.page-register .wizard-step-grunddaten .name-preview-display-inner--register-grunddaten .name-preview-part {
    text-shadow: none;
}

body.page-register .wizard-step-grunddaten .register-name-preview-birth,
body.page-register .wizard-step-grunddaten .register-name-preview-place {
    color: #1a1a1a;
}

body.page-register .wizard-step-grunddaten .name-preview-display--register-grunddaten[data-gender='unknown']
    .name-preview-part--vorname.name-preview-text,
body.page-register .wizard-step-grunddaten .name-preview-display--register-grunddaten[data-gender='unknown']
    .name-preview-part--nachname.name-preview-text,
body.page-register .wizard-step-grunddaten .name-preview-display--register-grunddaten[data-gender='m']
    .name-preview-part--vorname.name-preview-text,
body.page-register .wizard-step-grunddaten .name-preview-display--register-grunddaten[data-gender='m']
    .name-preview-part--nachname.name-preview-text,
body.page-register .wizard-step-grunddaten .name-preview-display--register-grunddaten[data-gender='w']
    .name-preview-part--vorname.name-preview-text,
body.page-register .wizard-step-grunddaten .name-preview-display--register-grunddaten[data-gender='w']
    .name-preview-part--nachname.name-preview-text,
body.page-register .wizard-step-grunddaten .name-preview-display--register-grunddaten[data-gender='d']
    .name-preview-part--vorname.name-preview-text,
body.page-register .wizard-step-grunddaten .name-preview-display--register-grunddaten[data-gender='d']
    .name-preview-part--nachname.name-preview-text {
    color: #1a1a1a;
}

body.page-register .wizard-step-grunddaten .name-preview-display--register-grunddaten
    .name-preview-part--vorname.name-placeholder-main,
body.page-register .wizard-step-grunddaten .name-preview-display--register-grunddaten
    .name-preview-part--nachname.name-placeholder-main,
body.page-register .wizard-step-grunddaten .register-name-preview-birth.name-placeholder-main,
body.page-register .wizard-step-grunddaten .register-name-preview-place.name-placeholder-main {
    font-family: inherit;
    font-style: inherit;
    letter-spacing: inherit;
    color: transparent;
    -webkit-text-fill-color: transparent;
    background-image: linear-gradient(
        to top,
        var(--register-name-field-placeholder, #737373) 0%,
        transparent 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

body.page-register .wizard-step-grunddaten .name-preview-display--register-grunddaten
    .name-preview-part--vorname.name-placeholder-main,
body.page-register .wizard-step-grunddaten .name-preview-display--register-grunddaten
    .name-preview-part--nachname.name-placeholder-main {
    font-weight: 700;
}

body.page-register .wizard-step-grunddaten .register-name-preview-names-slot,
body.page-register .wizard-step-grunddaten .register-name-preview-names-slot .register-name-preview-row,
body.page-register .wizard-step-grunddaten .register-name-preview-names-slot .name-preview-primary-row {
    font-size: var(--register-name-preview-name-size);
    line-height: 1.12;
}

body.page-register .wizard-step-grunddaten .name-preview-display-inner--register-grunddaten .name-preview-text {
    font-weight: 700;
}

body.page-register .wizard-step-grunddaten .register-name-preview-name-row {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: 0.35em;
    width: 100%;
    max-width: 100%;
    margin-inline: auto;
    box-sizing: border-box;
}

body.page-register .wizard-step-grunddaten .register-name-preview-names-slot {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    box-sizing: border-box;
}

body.page-register .wizard-step-grunddaten .register-name-preview-names-slot .register-name-preview-row,
body.page-register .wizard-step-grunddaten .register-name-preview-names-slot .name-preview-primary-row {
    margin: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

body.page-register .wizard-step-grunddaten .register-name-preview-birth {
    font-size: var(--register-name-preview-birth-size);
    font-weight: 600;
    line-height: 1.2;
    margin: 0.2em 0 0;
    padding: 0;
    margin-inline: auto;
    text-align: center;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

body.page-register .wizard-step-grunddaten .register-name-preview-place {
    font-size: var(--register-name-preview-place-size);
    font-weight: 500;
    line-height: 1.28;
    margin: 0.12em 0 0;
    padding: 0;
    margin-inline: auto;
    text-align: center;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    white-space: normal;
    overflow-wrap: break-word;
    word-break: normal;
}

body.dark-mode.page-register .wizard-step-grunddaten .name-preview-container--register-grunddaten .name-preview-display {
    background: transparent;
}

body.dark-mode.page-register .wizard-step-grunddaten .name-preview-display--register-grunddaten[data-gender='unknown'],
body.dark-mode.page-register .wizard-step-grunddaten .name-preview-display--register-grunddaten[data-gender='m'],
body.dark-mode.page-register .wizard-step-grunddaten .name-preview-display--register-grunddaten[data-gender='w'],
body.dark-mode.page-register .wizard-step-grunddaten .name-preview-display--register-grunddaten[data-gender='d'] {
    border: none;
    box-shadow: none;
}

body.dark-mode.page-register .wizard-step-grunddaten .name-preview-display-inner--register-grunddaten {
    color: #1a1a1a;
}

body.dark-mode.page-register .wizard-step-grunddaten .register-name-preview-birth,
body.dark-mode.page-register .wizard-step-grunddaten .register-name-preview-place {
    color: #1a1a1a;
}

body.dark-mode.page-register .wizard-step-grunddaten .name-preview-display--register-grunddaten[data-gender='unknown']
    .name-preview-part--vorname.name-preview-text,
body.dark-mode.page-register .wizard-step-grunddaten .name-preview-display--register-grunddaten[data-gender='unknown']
    .name-preview-part--nachname.name-preview-text,
body.dark-mode.page-register .wizard-step-grunddaten .name-preview-display--register-grunddaten[data-gender='m']
    .name-preview-part--vorname.name-preview-text,
body.dark-mode.page-register .wizard-step-grunddaten .name-preview-display--register-grunddaten[data-gender='m']
    .name-preview-part--nachname.name-preview-text,
body.dark-mode.page-register .wizard-step-grunddaten .name-preview-display--register-grunddaten[data-gender='w']
    .name-preview-part--vorname.name-preview-text,
body.dark-mode.page-register .wizard-step-grunddaten .name-preview-display--register-grunddaten[data-gender='w']
    .name-preview-part--nachname.name-preview-text,
body.dark-mode.page-register .wizard-step-grunddaten .name-preview-display--register-grunddaten[data-gender='d']
    .name-preview-part--vorname.name-preview-text,
body.dark-mode.page-register .wizard-step-grunddaten .name-preview-display--register-grunddaten[data-gender='d']
    .name-preview-part--nachname.name-preview-text {
    color: #1a1a1a;
}

body.dark-mode.page-register .wizard-step-grunddaten .name-preview-display--register-grunddaten
    .name-preview-part--vorname.name-placeholder-main,
body.dark-mode.page-register .wizard-step-grunddaten .name-preview-display--register-grunddaten
    .name-preview-part--nachname.name-placeholder-main,
body.dark-mode.page-register .wizard-step-grunddaten .register-name-preview-birth.name-placeholder-main,
body.dark-mode.page-register .wizard-step-grunddaten .register-name-preview-place.name-placeholder-main {
    font-family: inherit;
    font-style: inherit;
    letter-spacing: inherit;
    color: transparent;
    -webkit-text-fill-color: transparent;
    background-image: linear-gradient(
        to top,
        var(--register-name-field-placeholder, #9ca3af) 0%,
        transparent 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

body.dark-mode.page-register .wizard-step-grunddaten .name-preview-display--register-grunddaten
    .name-preview-part--vorname.name-placeholder-main,
body.dark-mode.page-register .wizard-step-grunddaten .name-preview-display--register-grunddaten
    .name-preview-part--nachname.name-placeholder-main {
    font-weight: 700;
}

body.page-register .wizard-step-grunddaten .name-preview-display--register-grunddaten {
    font-size: inherit;
    min-height: auto;
    line-height: normal;
    text-align: center;
}

body.page-register .wizard-step-grunddaten .register-name-preview-row,
body.page-register .wizard-step-grunddaten .name-preview-primary-row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;
    align-content: center;
    gap: 0 0.45em;
    width: max-content;
    max-width: 100%;
    margin-inline: auto;
    text-align: center;
    box-sizing: border-box;
}

body.page-register .wizard-step-grunddaten .name-preview-main {
    position: static;
    left: auto;
    transform: none;
}

body.page-register .wizard-step-grunddaten .name-preview-part {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 100%;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    white-space: normal;
    overflow-wrap: break-word;
    word-break: normal;
    text-align: center;
    text-wrap: pretty;
}

/* Passt nicht nebeneinander → volle Zeile, zentriert untereinander */
body.page-register .wizard-step-grunddaten .register-name-preview-row .name-preview-part--vorname,
body.page-register .wizard-step-grunddaten .register-name-preview-row .name-preview-part--nachname,
body.page-register .wizard-step-grunddaten .name-preview-primary-row .name-preview-part--vorname,
body.page-register .wizard-step-grunddaten .name-preview-primary-row .name-preview-part--nachname {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 100%;
    overflow: visible;
    text-overflow: clip;
}

/* JS-Fallback: Vorname/Nachname erzwingen untereinander — nur Zeilenhöhe, kein Extra-Abstand */
body.page-register .wizard-step-grunddaten .register-name-preview-row--stack-names,
body.page-register .wizard-step-grunddaten .register-name-preview-row--stack-names.name-preview-primary-row {
    display: block;
    width: 100%;
    max-width: 100%;
    text-align: center;
}

body.page-register .wizard-step-grunddaten .register-name-preview-row--stack-names .name-preview-part {
    display: block;
    flex: none;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    line-height: inherit;
}

body.page-register .wizard-step-grunddaten .name-preview-text,
body.page-register .wizard-step-grunddaten .name-placeholder-main,
body.page-register .wizard-step-grunddaten .name-preview-display .name-placeholder {
    white-space: normal;
    overflow-wrap: break-word;
    word-break: normal;
    line-height: inherit;
}

body.page-register .wizard-step-grunddaten .register-name-preview-names-slot .name-preview-text,
body.page-register .wizard-step-grunddaten .register-name-preview-names-slot .name-placeholder-main {
    font-size: inherit;
}

body.page-register .wizard-step-grunddaten .name-placeholder-geb,
body.page-register .wizard-step-grunddaten .name-placeholder-spitzname {
    display: none !important;
}

@container register-name-preview (min-width: 720px) {
    body.page-register .wizard-step-grunddaten .name-preview-display-inner--register-grunddaten {
        --register-name-preview-inset-x: clamp(20px, 3.5cqi, 2.75rem);
    }
}

@container register-name-preview (max-width: 480px) {
    body.page-register .wizard-step-grunddaten .name-preview-display-inner--register-grunddaten {
        --register-name-preview-inset-x: clamp(26px, 10cqi, 3.5rem);
        --register-name-preview-name-size: clamp(1.4rem, 6.75cqi, 2.25rem);
        --register-name-preview-birth-size: clamp(0.975rem, 3.85cqi, 1.3rem);
        --register-name-preview-place-size: clamp(0.9375rem, 3.5cqi, 1.15rem);
    }
}

@container register-name-preview (max-width: 360px) {
    body.page-register .wizard-step-grunddaten .name-preview-display-inner--register-grunddaten {
        --register-name-preview-inset-x: clamp(22px, 9cqi, 2.75rem);
        --register-name-preview-name-size: clamp(1.25rem, 6.25cqi, 2rem);
        --register-name-preview-birth-size: clamp(0.9375rem, 3.65cqi, 1.2rem);
        --register-name-preview-place-size: clamp(0.875rem, 3.35cqi, 1.0625rem);
    }
}

@container register-name-preview (max-width: 280px) {
    body.page-register .wizard-step-grunddaten .name-preview-display-inner--register-grunddaten {
        --register-name-preview-name-size: clamp(1.125rem, 6.75cqi, 1.75rem);
    }
}

@container register-name-preview (max-width: 200px) {
    body.page-register .wizard-step-grunddaten .name-preview-display-inner--register-grunddaten {
        --register-name-preview-name-size: clamp(1rem, 7cqi, 1.55rem);
    }
}

body.page-register .register-name-fields-row,
body.page-register .register-birth-gender-row {
    margin-bottom: 12px;
}

/* Grunddaten: Grid-Zellen gleich breit, Flatpickr bricht Layout nicht */
body.page-register .register-name-fields-row > .wizard-form-group,
body.page-register .register-birth-gender-row > .wizard-form-group {
    min-width: 0;
    width: 100%;
}

body.page-register .register-birth-gender-row .wizard-form-group--flatpickr-date,
body.page-register .register-birth-gender-row .kinma-flatpickr-date-wrap,
body.page-register .register-birth-gender-row .kinma-flatpickr-date-wrap .flatpickr-wrapper {
    min-width: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

body.page-register .register-birth-gender-row input.kinma-flatpickr-date-field--alt,
body.page-register .register-birth-gender-row .kinma-flatpickr-date-field--alt {
    width: 100% !important;
    max-width: 100% !important;
    min-height: var(--login-identifier-row-height, 48px);
    height: var(--login-identifier-row-height, 48px);
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    line-height: calc(var(--login-identifier-row-height, 48px) - 3px);
    box-sizing: border-box;
}

/* Grunddaten-Eingaben: dunkle Schrift nur bei eingegebenem Wert (Placeholder bleibt hell) */
body.page-register .wizard-step-grunddaten .register-name-fields-row input.input-field:not(:placeholder-shown),
body.page-register .wizard-step-grunddaten .register-birth-gender-row input.input-field,
body.page-register .wizard-step-grunddaten .register-birth-gender-row input.kinma-flatpickr-date-field--alt,
body.page-register .wizard-step-grunddaten .register-birth-gender-row .kinma-flatpickr-date-field--alt {
    color: #1a1a1a !important;
    -webkit-text-fill-color: #1a1a1a;
}

body.page-register .wizard-step-grunddaten .register-name-fields-row input.input-field::placeholder {
    color: var(--register-name-field-placeholder, #9ca3af) !important;
    font-weight: 400;
    opacity: 1;
    -webkit-text-fill-color: var(--register-name-field-placeholder, #9ca3af);
}

body.page-register .wizard-step-grunddaten .register-name-fields-row input.input-field::-webkit-input-placeholder {
    color: var(--register-name-field-placeholder, #9ca3af) !important;
    font-weight: 400;
    -webkit-text-fill-color: var(--register-name-field-placeholder, #9ca3af);
}

body.page-register .wizard-step-grunddaten .register-birth-gender-row input.input-field::placeholder,
body.page-register .wizard-step-grunddaten .register-birth-gender-row input.kinma-flatpickr-date-field--alt::placeholder,
body.page-register .wizard-step-grunddaten .register-birth-gender-row .kinma-flatpickr-date-field--alt::placeholder {
    color: var(--register-input-placeholder, #cbd5e1) !important;
    opacity: 1;
    -webkit-text-fill-color: var(--register-input-placeholder, #cbd5e1);
}

body.dark-mode.page-register .wizard-step-grunddaten .register-name-fields-row input.input-field:not(:placeholder-shown),
body.dark-mode.page-register .wizard-step-grunddaten .register-birth-gender-row input.input-field,
body.dark-mode.page-register .wizard-step-grunddaten .register-birth-gender-row input.kinma-flatpickr-date-field--alt,
body.dark-mode.page-register .wizard-step-grunddaten .register-birth-gender-row .kinma-flatpickr-date-field--alt {
    color: #f3f4f6 !important;
    -webkit-text-fill-color: #f3f4f6;
}

body.dark-mode.page-register .wizard-step-grunddaten .register-name-fields-row input.input-field::placeholder {
    color: var(--register-name-field-placeholder, #9ca3af) !important;
    font-weight: 400;
    -webkit-text-fill-color: var(--register-name-field-placeholder, #9ca3af);
}

body.dark-mode.page-register .wizard-step-grunddaten .register-name-fields-row input.input-field::-webkit-input-placeholder {
    color: var(--register-name-field-placeholder, #9ca3af) !important;
    font-weight: 400;
    -webkit-text-fill-color: var(--register-name-field-placeholder, #9ca3af);
}

body.dark-mode.page-register .wizard-step-grunddaten .register-birth-gender-row input.input-field::placeholder,
body.dark-mode.page-register .wizard-step-grunddaten .register-birth-gender-row input.kinma-flatpickr-date-field--alt::placeholder,
body.dark-mode.page-register .wizard-step-grunddaten .register-birth-gender-row .kinma-flatpickr-date-field--alt::placeholder {
    color: var(--register-input-placeholder, #64748b) !important;
    -webkit-text-fill-color: var(--register-input-placeholder, #64748b);
}

body.page-register .wizard-step-grunddaten .kinma-origin-map-group {
    margin-bottom: 8px;
}

@media (max-width: 380px) {
    body.page-register .register-name-fields-row {
        grid-template-columns: 1fr;
    }
}

/* Fallback ohne Container Queries */
@supports not (container-type: inline-size) {
    @media (max-width: 480px) {
        body.page-register .wizard-step-grunddaten .name-preview-display {
            --register-name-preview-size: clamp(1.5rem, 5vw, 2.75rem);
        }
    }

    @media (max-width: 360px) {
        body.page-register .wizard-step-grunddaten .name-preview-display {
            --register-name-preview-size: clamp(1.25rem, 6vw, 2.25rem);
        }
    }

    @media (max-width: 280px) {
        body.page-register .wizard-step-grunddaten .name-preview-display {
            --register-name-preview-size: clamp(1.05rem, 7vw, 1.85rem);
        }
    }
}

/* Pflichtfeld-Asterisk */
body.page-register .required-asterisk {
    color: #dc2626 !important;
}

/* Passwort: Label + 100px-Balken in einer Zeile, Balken nicht über der Rundung/Icons */
body.page-register .password-field-with-strength {
    position: relative;
    width: 100%;
}

body.page-register {
    --register-password-meter-width: 100px;
    /* Rechter Rand des Balkens = Beginn der oberen Rundung (Halbkreis ≈ halbe Zeilenhöhe) */
    --register-password-meter-offset-right: calc(var(--login-identifier-row-height, 48px) / 2);
    /* Abstand Validierungsbalken → Eingabe (enger als Label→Eingabe bei E-Mail) */
    --register-password-meter-input-gap: 4px;
}

body.page-register .wizard-form-group--password-strength .password-field-header {
    position: relative;
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin: 0 0 var(--register-password-meter-input-gap, 4px) 0 !important;
    padding: 0;
    min-height: 0;
    line-height: 1.35;
}

body.page-register .register-account-step__form.login-form
    .register-step-reveal
    .wizard-form-group--password-strength
    .password-field-header
    > label {
    display: block !important;
    min-height: 0 !important;
    min-width: 0;
    margin: 0 !important;
    padding: 0 !important;
    padding-right: calc(var(--register-password-meter-width) + 12px) !important;
    gap: 0 !important;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.35;
    color: #1f2937;
    cursor: default;
}

body.page-register .wizard-form-group--password-strength .password-field-header > .password-strength-meter {
    position: absolute;
    right: var(--register-password-meter-offset-right);
    bottom: 0;
    top: auto;
    transform: none;
    width: var(--register-password-meter-width);
    max-width: var(--register-password-meter-width);
    margin: 0;
    box-sizing: border-box;
    pointer-events: none;
}

body.page-register .wizard-form-group--password-strength > .password-field-with-strength {
    margin-top: 0;
}

body.page-register .wizard-form-group__label-text {
    flex: 0 0 auto;
}

body.page-register .password-strength-meter--requirements .password-strength-meter__match-track,
body.page-register .password-strength-meter--confirm .password-strength-meter__match-track {
    display: block;
    width: 100%;
    height: 6px;
    border-radius: 999px;
    background: #e5e7eb;
    overflow: hidden;
}

body.page-register .password-strength-meter--requirements .password-strength-meter__match-fill,
body.page-register .password-strength-meter--confirm .password-strength-meter__match-fill {
    display: block;
    height: 100%;
    width: 0;
    border-radius: 999px;
    background: #e5e7eb;
    transition: width 0.2s ease, background-color 0.2s ease;
}

body.page-register .password-strength-meter--requirements[data-match-tier='1'] .password-strength-meter__match-fill,
body.page-register .password-strength-meter--confirm[data-match-tier='1'] .password-strength-meter__match-fill {
    background: #ef4444;
}

body.page-register .password-strength-meter--requirements[data-match-tier='2'] .password-strength-meter__match-fill,
body.page-register .password-strength-meter--confirm[data-match-tier='2'] .password-strength-meter__match-fill {
    background: #f97316;
}

body.page-register .password-strength-meter--requirements[data-match-tier='3'] .password-strength-meter__match-fill,
body.page-register .password-strength-meter--confirm[data-match-tier='3'] .password-strength-meter__match-fill {
    background: #eab308;
}

body.page-register .password-strength-meter--requirements[data-match-tier='4'] .password-strength-meter__match-fill,
body.page-register .password-strength-meter--confirm[data-match-tier='4'] .password-strength-meter__match-fill {
    background: #84cc16;
}

body.page-register .password-strength-meter--requirements[data-match-tier='5'] .password-strength-meter__match-fill,
body.page-register .password-strength-meter--requirements[data-requirements-complete='1'] .password-strength-meter__match-fill,
body.page-register .password-strength-meter--confirm[data-match-tier='5'] .password-strength-meter__match-fill,
body.page-register .password-strength-meter--confirm[data-password-match='match'] .password-strength-meter__match-fill {
    background: #22c55e;
}

body.page-register .password-strength-meter--requirements[data-match-tier='mismatch'] .password-strength-meter__match-fill,
body.page-register .password-strength-meter--confirm[data-match-tier='mismatch'] .password-strength-meter__match-fill {
    background: #ef4444;
}

body.page-register .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

body.page-register .register-back-to-login-inline {
    display: block;
    width: 100%;
    text-align: center;
    font-size: 16px;
    font-weight: 500;
    color: #1a1a1a;
    text-decoration: none;
    margin: 14px 0 0 0;
}

body.page-register .register-back-to-login-inline:hover,
body.page-register .register-back-to-login-inline:focus {
    color: #1a1a1a;
    text-decoration: none;
}

body.page-register .register-back-to-login-below-content {
    margin-top: 10px;
    margin-bottom: 10px;
    width: 100%;
    text-align: center;
}

/* In preview step, hide back-to-login link completely */
body.page-register.kinma-wizard-profile-preview-step .register-back-to-login-below-content,
body.page-register:has(.wizard-content__stage > div:not(.hidden):has(#profile-preview-wrapper)) .register-back-to-login-below-content,
body.page-register:has(> #profile-preview-wrapper) .register-back-to-login-below-content,
body.page-register .wizard-layout:has(.btn-submit:not(.hidden)) .register-back-to-login-below-content {
    display: none !important;
}

/*
 * Fixe Weiter/Zurück-Leiste (wizard-buttons-island): Ohne extra Bodenabstand wird die letzte
 * Checkbox-Zeile (AGB) auf breiten/mittelhohen Laptops verdeckt — Mobile bekam das schon über
 * Media Queries, typische Laptop-Viewports (z. B. >1024px breit und >600px hoch) nicht.
 */
body.page-register .wizard-layout {
    scroll-padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px));
}

body.page-register:not(.kinma-wizard-profile-preview-step) .wizard-layout .wizard-form-layer,
body.page-register:not(.kinma-wizard-profile-preview-step) .register-wizard-form-layer {
    padding-bottom: 0 !important;
}

body.page-register.kinma-wizard-profile-preview-step .wizard-layout .wizard-form-layer,
body.page-register:has(.wizard-content__stage > div:not(.hidden):has(#profile-preview-wrapper)) .wizard-layout .wizard-form-layer,
body.page-register:has(> #profile-preview-wrapper) .wizard-layout .wizard-form-layer {
    background: #1a1a1a !important;
}

/* Account-Schritt: E-Mail/Passwort links, vertikale Trennlinie, Google rechts */
body.page-register .register-account-split {
    display: grid;
    grid-template-columns: minmax(300px, 400px) auto minmax(200px, 280px);
    gap: 0 24px;
    align-items: stretch;
    margin-bottom: 8px;
    width: fit-content;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

body.page-register .register-account-split__manual {
    min-width: 0;
}

body.page-register .register-account-split__oauth {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
}

body.page-register .register-account-split__oauth .login-button-google {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

body.page-register .register-account-split__divider {
    display: flex;
    flex-direction: column;
    align-items: center;
    align-self: stretch;
    width: 32px;
    flex-shrink: 0;
    margin: 4px 0;
}

body.page-register .register-account-split__divider-cap {
    flex: 1 1 0;
    min-height: 28px;
    width: 1px;
    background: #cbd5e1;
}

body.page-register .register-account-split__divider-label {
    flex: 0 0 auto;
    padding: 10px 0;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: #64748b;
    text-transform: uppercase;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    line-height: 1;
    user-select: none;
}

@media (max-width: 720px) {
    body.page-register .register-account-split {
        grid-template-columns: 1fr;
        gap: 18px 0;
        width: 100%;
        max-width: 100%;
    }

    body.page-register .register-account-split__oauth {
        order: -1;
        justify-content: stretch;
    }

    body.page-register .register-account-split__divider {
        flex-direction: row;
        width: 100%;
        height: auto;
        align-self: center;
        margin: 0;
    }

    body.page-register .register-account-split__divider-cap {
        flex: 1 1 0;
        min-height: 0;
        height: 1px;
        width: auto;
        min-width: 20px;
    }

    body.page-register .register-account-split__divider-label {
        writing-mode: horizontal-tb;
        transform: none;
        padding: 0 12px;
    }
}

body.dark-mode.page-register .register-account-split__divider-cap {
    background: #1a1a1a;
}

body.dark-mode.page-register .register-account-split__divider-label {
    color: #94a3b8;
}

/* Register wizard: pill inputs on all steps (Grunddaten look; overrides wizard underline) */
body.page-register #registerForm {
    --register-input-border: #e9ecef;
    --register-input-border-focus: #1a1a1a;
    --register-input-bg: #ffffff;
    /* Flat top-left when a label sits above the control (login-style pill) */
    --register-input-radius: 0 9999px 9999px 9999px;
    --register-input-padding-y: 12px;
    --register-input-padding-x: 18px;
    /* Unterkante: flacher Bereich beginnt nach der linken Abrundung (≈ halbe Feldhöhe) */
    --register-input-control-height: calc(var(--register-input-padding-y) * 2 + 1lh + 3px);
    --register-validation-inset-left: max(
        var(--register-input-padding-x),
        calc(var(--register-input-control-height) * 0.5)
    );
    --register-valid-border-color: #22c55e;
    --register-valid-ring: 0 0 0 3px rgba(34, 197, 94, 0.15);
    --register-valid-shadow: 0 2px 10px rgba(34, 197, 94, 0.08);
    --register-valid-outline: var(--register-valid-ring), var(--register-valid-shadow);
    --register-invalid-border-color: #ef4444;
    --register-invalid-ring: 0 0 0 3px rgba(239, 68, 68, 0.15);
    --register-invalid-shadow: 0 2px 10px rgba(239, 68, 68, 0.08);
    --register-invalid-outline: var(--register-invalid-ring), var(--register-invalid-shadow);
    --register-validating-border-color: #f59e0b;
    --register-validating-ring: 0 0 0 3px rgba(245, 158, 11, 0.18);
    --register-validating-shadow: 0 2px 10px rgba(245, 158, 11, 0.08);
    --register-validating-outline: var(--register-validating-ring), var(--register-validating-shadow);
    --register-input-placeholder: #cbd5e1;
    --register-name-field-placeholder: #737373;
}

body.dark-mode.page-register #registerForm {
    --register-input-placeholder: #64748b;
    --register-name-field-placeholder: #9ca3af;
}

body.page-register #registerForm input.input-field::placeholder,
body.page-register #registerForm textarea.input-field::placeholder,
body.page-register #registerForm .kinma-flatpickr-date-field--alt::placeholder {
    color: var(--register-input-placeholder) !important;
    opacity: 1;
    -webkit-text-fill-color: var(--register-input-placeholder);
}

body.page-register #registerForm input.input-field::-webkit-input-placeholder,
body.page-register #registerForm textarea.input-field::-webkit-input-placeholder,
body.page-register #registerForm .kinma-flatpickr-date-field--alt::-webkit-input-placeholder {
    color: var(--register-input-placeholder) !important;
    -webkit-text-fill-color: var(--register-input-placeholder);
}

body.page-register #registerForm .wizard-form-group:has(> label) .password-input-wrapper,
body.page-register #registerForm .wizard-form-group--gender-inline .password-input-wrapper {
    border-radius: var(--register-input-radius) !important;
    overflow: hidden !important;
}

body.page-register #registerForm .wizard-form-group:has(> label) input.input-field,
body.page-register #registerForm .wizard-form-group:has(> label) input[type="text"],
body.page-register #registerForm .wizard-form-group:has(> label) input[type="email"],
body.page-register #registerForm .wizard-form-group:has(> label) input[type="password"],
body.page-register #registerForm .kinma-date-input-wrap {
    position: relative;
    display: block;
    width: 100%;
}

body.page-register #registerForm .kinma-date-input-wrap .kinma-date-input-hint {
    position: absolute;
    left: var(--register-input-padding-x);
    right: 2.75rem;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    z-index: 1;
    color: var(--register-input-placeholder, #cbd5e1);
    font-size: inherit;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background: var(--register-input-bg, #fff);
}

body.page-register #registerForm .kinma-date-input-wrap.kinma-date-input--filled .kinma-date-input-hint {
    display: none;
}

body.page-register #registerForm .kinma-date-input-wrap.kinma-date-input--empty:focus-within .kinma-date-input-hint {
    display: none;
}

/* Leer + nicht fokussiert: nur ein Platzhalter (Overlay), natives Browser-Label ausblenden */
body.page-register #registerForm .kinma-date-input-wrap.kinma-date-input--empty:not(:focus-within) input[type="date"]::-webkit-datetime-edit,
body.page-register #registerForm .kinma-date-input-wrap.kinma-date-input--empty:not(:focus-within) input[type="date"]::-webkit-datetime-edit-fields-wrapper {
    display: none;
}

body.page-register #registerForm .kinma-date-input-wrap.kinma-date-input--empty:not(:focus-within) input[type="date"]::-webkit-calendar-picker-indicator {
    opacity: 1;
}

/* Geburtsdatum: Flatpickr (sichtbares Alt-Feld wie andere Pill-Inputs) */
body.page-register #registerForm .kinma-flatpickr-date-wrap {
    position: relative;
    width: 100%;
    box-sizing: border-box;
}

body.page-register #registerForm .kinma-flatpickr-date-wrap .flatpickr-wrapper {
    display: block;
    width: 100%;
    position: relative;
}

body.page-register #registerForm .kinma-flatpickr-date-wrap input.flatpickr-input:not(.kinma-flatpickr-date-field--alt),
body.page-register #registerForm .kinma-flatpickr-date-wrap > input.flatpickr-input:not(.kinma-flatpickr-date-field--alt),
body.page-register #registerForm .kinma-flatpickr-date-wrap input.kinma-flatpickr-date-field--store {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    border: 0 !important;
    clip: rect(0, 0, 0, 0);
    overflow: hidden;
}

@media (min-width: 1025px) {
    body.page-register #registerForm .kinma-mobile-date-field {
        display: none !important;
    }
}

body.page-register #registerForm .kinma-mobile-date-field {
    cursor: text !important;
}

body.page-register #registerForm .wizard-form-group--flatpickr-date input.kinma-flatpickr-date-field--alt,
body.page-register #registerForm .wizard-form-group--flatpickr-date .kinma-flatpickr-date-field--alt {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    cursor: pointer;
    border: 1.5px solid var(--register-input-border) !important;
    border-bottom: 1.5px solid var(--register-input-border) !important;
    border-radius: var(--register-input-radius) !important;
    background: var(--register-input-bg) !important;
    padding: var(--register-input-padding-y) var(--register-input-padding-x) !important;
}

body.page-register #registerForm .wizard-form-group--flatpickr-date input.kinma-flatpickr-date-field--alt:focus,
body.page-register #registerForm .wizard-form-group--flatpickr-date .kinma-flatpickr-date-field--alt:focus {
    outline: none;
    border-color: var(--register-input-border-focus) !important;
    border-bottom-color: var(--register-input-border-focus) !important;
    box-shadow: 0 0 0 3px rgba(26, 26, 26, 0.1);
}

body.page-register .flatpickr-calendar {
    z-index: 10050 !important;
    border-radius: 16px;
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.18);
    border: 1px solid #e5e7eb;
    font-family: inherit;
    width: 307.875px;
    max-width: 100%;
    box-sizing: border-box;
}

@media (max-width: 1024px) {
    body.page-register #registerForm .kinma-flatpickr-date-wrap > #geburtsdatum,
    body.page-register #registerForm .kinma-flatpickr-date-wrap input.kinma-flatpickr-date-field--store {
        display: none !important;
    }

    body.page-register #registerForm .kinma-flatpickr-date-wrap input.kinma-flatpickr-date-field--alt:not(.kinma-mobile-date-field),
    body.page-register #registerForm .kinma-flatpickr-date-wrap .flatpickr-wrapper {
        display: none !important;
    }

    body.page-register #registerForm .kinma-flatpickr-date-wrap .kinma-mobile-date-field {
        display: block !important;
        width: 100% !important;
    }

    body.page-register .flatpickr-calendar {
        width: min(307.875px, calc(100vw - 32px)) !important;
    }
}

body.page-register .flatpickr-innerContainer,
body.page-register .flatpickr-rContainer {
    display: block;
    width: 100%;
    box-sizing: border-box;
}

body.page-register .flatpickr-weekdays,
body.page-register .flatpickr-days,
body.page-register .dayContainer,
body.page-register .kinma-flatpickr-panel-picker {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    box-sizing: border-box;
}

body.page-register .flatpickr-months .flatpickr-month {
    color: #1f2937;
}

body.page-register .flatpickr-current-month .flatpickr-monthDropdown-months,
body.page-register .flatpickr-current-month input.cur-year {
    font-weight: 600;
    color: #1f2937;
}

body.page-register .flatpickr-weekday {
    color: #6b7280;
    font-weight: 600;
}

/* Kalender-Tage: gleiches Dunkelgrau wie Zurück/Weiter (#1a1a1a), Hover/Selected mit weißer Zahl */
body.page-register .flatpickr-day.selected,
body.page-register .flatpickr-day.startRange,
body.page-register .flatpickr-day.endRange,
body.page-register .flatpickr-day.selected:hover,
body.page-register .flatpickr-day.startRange:hover,
body.page-register .flatpickr-day.endRange:hover {
    background: #1a1a1a !important;
    border-color: #1a1a1a !important;
    color: #ffffff !important;
}

body.page-register .flatpickr-day:hover,
body.page-register .flatpickr-day:focus {
    background: #1a1a1a !important;
    border-color: #1a1a1a !important;
    color: #ffffff !important;
}

body.page-register .flatpickr-day.today {
    border-color: #1a1a1a;
}

body.page-register .flatpickr-day.today:hover {
    background: #1a1a1a !important;
    border-color: #1a1a1a !important;
    color: #ffffff !important;
}

body.page-register .flatpickr-day.selected.today,
body.page-register .flatpickr-day.today.selected {
    color: #ffffff !important;
}

body.page-register .flatpickr-months .flatpickr-prev-month:hover svg,
body.page-register .flatpickr-months .flatpickr-next-month:hover svg {
    fill: #1a1a1a;
}

body.dark-mode.page-register .flatpickr-calendar {
    background: #111827;
    border-color: #374151;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
}

body.dark-mode.page-register .flatpickr-months .flatpickr-month,
body.dark-mode.page-register .flatpickr-current-month .flatpickr-monthDropdown-months,
body.dark-mode.page-register .flatpickr-current-month input.cur-year {
    color: #f3f4f6;
}

body.dark-mode.page-register .flatpickr-weekday {
    color: #9ca3af;
}

body.dark-mode.page-register .flatpickr-day.selected,
body.dark-mode.page-register .flatpickr-day.startRange,
body.dark-mode.page-register .flatpickr-day.endRange,
body.dark-mode.page-register .flatpickr-day.selected:hover,
body.dark-mode.page-register .flatpickr-day:hover,
body.dark-mode.page-register .flatpickr-day:focus {
    background: #1a1a1a !important;
    border-color: #1a1a1a !important;
    color: #ffffff !important;
}

body.dark-mode.page-register .flatpickr-day.today {
    border-color: #9ca3af;
}

body.dark-mode.page-register .flatpickr-day.today:hover {
    background: #1a1a1a !important;
    border-color: #1a1a1a !important;
    color: #ffffff !important;
}

body.page-register .flatpickr-months {
    align-items: center;
    padding: 6px 0;
    overflow: hidden;
}

body.page-register .flatpickr-months .flatpickr-prev-month,
body.page-register .flatpickr-months .flatpickr-next-month {
    height: auto;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    padding: 10px;
    box-sizing: border-box;
}

body.page-register .flatpickr-months .flatpickr-month {
    height: auto;
    min-height: 44px;
    overflow: hidden;
    position: relative;
    display: block;
    padding: 0 34px;
    box-sizing: border-box;
}

body.page-register .flatpickr-current-month {
    position: relative;
    left: auto;
    width: 100%;
    max-width: 100%;
    height: auto;
    min-height: 0;
    min-width: 0;
    padding: 0;
    display: flex;
    align-items: stretch;
    justify-content: stretch;
    gap: 6px;
    overflow: hidden;
    line-height: 1.3;
}

body.page-register .flatpickr-current-month .numInputWrapper {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
    height: auto;
}

body.page-register .flatpickr-current-month .numInputWrapper span {
    display: none;
}

body.page-register .flatpickr-current-month .flatpickr-monthDropdown-months {
    display: none !important;
}

body.page-register .flatpickr-current-month .kinma-flatpickr-header-trigger {
    box-sizing: border-box;
    font-weight: 600;
    color: #1f2937;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #ffffff;
    cursor: pointer;
    line-height: 1.3;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

body.page-register .flatpickr-current-month .cur-month.kinma-flatpickr-header-trigger {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 0;
    min-width: 0;
    width: auto;
    min-height: 32px;
    padding: 6px 10px;
    margin-right: 0;
}

body.page-register .flatpickr-current-month input.cur-year.kinma-flatpickr-header-trigger {
    flex: none;
    width: 100% !important;
    min-width: 0;
    max-width: 100%;
    min-height: 32px;
    padding: 6px 10px;
    text-align: center;
    cursor: pointer;
}

body.page-register .flatpickr-current-month .kinma-flatpickr-header-trigger:hover,
body.page-register .flatpickr-current-month .kinma-flatpickr-header-trigger:focus-visible,
body.page-register .kinma-flatpickr--view-months .cur-month.kinma-flatpickr-header-trigger,
body.page-register .kinma-flatpickr--view-years input.cur-year.kinma-flatpickr-header-trigger {
    background: #f3f4f6;
    border-color: #1a1a1a;
    outline: none;
}

body.page-register .kinma-flatpickr-panel-picker {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
    padding: 6px 0 2px;
    box-sizing: border-box;
}

body.page-register .kinma-flatpickr--view-months .kinma-flatpickr-panel-picker,
body.page-register .kinma-flatpickr--view-years .kinma-flatpickr-panel-picker {
    min-height: 252px;
    align-content: start;
}

body.page-register .kinma-flatpickr-panel-picker[hidden] {
    display: none !important;
}

body.page-register .kinma-flatpickr-panel-cell {
    min-height: 38px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    color: #1f2937;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    padding: 6px 4px;
    cursor: pointer;
    overflow: visible;
    white-space: nowrap;
    text-overflow: clip;
}

body.page-register .kinma-flatpickr-panel-cell:hover:not(:disabled),
body.page-register .kinma-flatpickr-panel-cell:focus-visible:not(:disabled) {
    background: #f3f4f6;
    border-color: #e5e7eb;
    outline: none;
}

body.page-register .kinma-flatpickr-panel-cell--selected {
    background: #1a1a1a !important;
    border-color: #1a1a1a !important;
    color: #ffffff !important;
}

body.page-register .kinma-flatpickr-panel-cell--disabled,
body.page-register .kinma-flatpickr-panel-cell:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

body.page-register .kinma-flatpickr--view-months .flatpickr-weekdays,
body.page-register .kinma-flatpickr--view-months .flatpickr-days,
body.page-register .kinma-flatpickr--view-years .flatpickr-weekdays,
body.page-register .kinma-flatpickr--view-years .flatpickr-days {
    display: none !important;
}

body.dark-mode.page-register .flatpickr-current-month .kinma-flatpickr-header-trigger {
    background: #1f2937;
    border-color: #374151;
    color: #f3f4f6;
}

body.dark-mode.page-register .flatpickr-current-month .kinma-flatpickr-header-trigger:hover,
body.dark-mode.page-register .flatpickr-current-month .kinma-flatpickr-header-trigger:focus-visible,
body.dark-mode.page-register .kinma-flatpickr--view-months .cur-month.kinma-flatpickr-header-trigger,
body.dark-mode.page-register .kinma-flatpickr--view-years input.cur-year.kinma-flatpickr-header-trigger {
    background: #374151;
    border-color: #9ca3af;
}

body.dark-mode.page-register .kinma-flatpickr-panel-cell {
    color: #f3f4f6;
}

body.dark-mode.page-register .kinma-flatpickr-panel-cell:hover:not(:disabled),
body.dark-mode.page-register .kinma-flatpickr-panel-cell:focus-visible:not(:disabled) {
    background: #374151;
    border-color: #4b5563;
}

body.page-register .kinma-flatpickr-date-wrap--has-value .kinma-flatpickr-date-field--alt {
    padding-right: calc(var(--register-input-padding-x, 16px) + 34px) !important;
}

/* Grunddaten: Vorname/Nachname — × zum Leeren (Outline am Wrap wie Konto-Schritt) */
body.page-register .wizard-step-grunddaten .register-name-fields-row .kinma-text-input-clear-wrap {
    position: relative;
    display: block;
    width: 100%;
    box-sizing: border-box;
    border: 1.5px solid var(--register-input-border) !important;
    border-bottom: 1.5px solid var(--register-input-border) !important;
    border-radius: var(--register-input-radius) !important;
    background: var(--register-input-bg) !important;
    overflow: hidden;
}

body.page-register .wizard-step-grunddaten .register-name-fields-row .kinma-text-input-clear-wrap .input-field {
    border: none !important;
    border-bottom: none !important;
    background: transparent !important;
    box-shadow: none !important;
    width: 100%;
    padding: var(--register-input-padding-y) var(--register-input-padding-x) !important;
}

body.page-register .wizard-step-grunddaten .register-name-fields-row .kinma-text-input-clear-wrap--has-value .input-field,
body.page-register .wizard-step-grunddaten .register-name-fields-row .kinma-text-input-clear-wrap:has(.login-clear-btn:not([hidden])) .input-field {
    padding-right: calc(var(--register-input-padding-x, 18px) + 34px) !important;
}

body.page-register .wizard-step-grunddaten .register-name-fields-row .kinma-text-input-clear-wrap:focus-within {
    outline: none;
    border-color: var(--register-input-border-focus) !important;
    border-bottom-color: var(--register-input-border-focus) !important;
    box-shadow: 0 0 0 3px rgba(26, 26, 26, 0.1);
}

body.page-register .wizard-step-grunddaten .register-name-fields-row .kinma-text-input-clear-wrap .input-field:focus {
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

body.page-register .kinma-flatpickr-date-clear {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    border-radius: 9999px;
    background: transparent;
    color: #6b7280;
    cursor: pointer;
}

body.page-register .kinma-flatpickr-date-clear:hover,
body.page-register .kinma-flatpickr-date-clear:focus-visible {
    background: rgba(15, 23, 42, 0.06);
    color: #1f2937;
    outline: none;
}

body.page-register .kinma-flatpickr-date-clear[hidden] {
    display: none !important;
}

body.page-register .kinma-flatpickr-calendar-footer {
    display: flex;
    justify-content: center;
    padding: 8px 12px 12px;
    border-top: 1px solid #e5e7eb;
}

body.page-register .kinma-flatpickr-calendar-footer[hidden] {
    display: none !important;
}

body.page-register .kinma-flatpickr-calendar-clear {
    border: none;
    background: transparent;
    color: #6b7280;
    font-size: 13px;
    font-weight: 600;
    padding: 6px 10px;
    border-radius: 9999px;
    cursor: pointer;
}

body.page-register .kinma-flatpickr-calendar-clear:hover,
body.page-register .kinma-flatpickr-calendar-clear:focus-visible {
    background: rgba(15, 23, 42, 0.06);
    color: #1f2937;
    outline: none;
}

body.dark-mode.page-register .flatpickr-current-month .flatpickr-monthDropdown-months,
body.dark-mode.page-register .flatpickr-current-month input.cur-year {
    background: #1f2937;
    border-color: #374151;
    color: #f3f4f6;
}

body.dark-mode.page-register .kinma-flatpickr-calendar-footer {
    border-top-color: #374151;
}

body.page-register #registerForm .wizard-form-group:has(> label) input[type="date"],
body.page-register #registerForm .wizard-form-group:has(> label) input[type="tel"] {
    border: 1.5px solid var(--register-input-border) !important;
    border-bottom: 1.5px solid var(--register-input-border) !important;
    border-radius: var(--register-input-radius) !important;
    background: var(--register-input-bg) !important;
    padding: var(--register-input-padding-y) var(--register-input-padding-x) !important;
    box-sizing: border-box;
    overflow: hidden;
}

body.page-register #registerForm .wizard-form-group:has(> label) input.input-field:focus,
body.page-register #registerForm .wizard-form-group:has(> label) input[type="text"]:focus,
body.page-register #registerForm .wizard-form-group:has(> label) input[type="email"]:focus,
body.page-register #registerForm .wizard-form-group:has(> label) input[type="password"]:focus,
body.page-register #registerForm .wizard-form-group:has(> label) input[type="date"]:focus,
body.page-register #registerForm .wizard-form-group:has(> label) input[type="tel"]:focus {
    outline: none;
    border-color: var(--register-input-border-focus) !important;
    border-bottom-color: var(--register-input-border-focus) !important;
    box-shadow: 0 0 0 3px rgba(26, 26, 26, 0.1);
}

/* Border lives on wrapper containers, not inner fields */
body.page-register #registerForm .wizard-form-group .password-input-wrapper .input-field,
body.page-register #registerForm .wizard-form-group .login-identifier-input-wrap .input-field,
body.page-register #registerForm .wizard-form-group .login-identifier-phone-container .phone-number-input {
    border: none !important;
    border-bottom: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

body.page-register #registerForm .wizard-form-group .password-input-wrapper .input-field:focus,
body.page-register #registerForm .wizard-form-group .login-identifier-input-wrap .input-field:focus,
body.page-register #registerForm .wizard-form-group .login-identifier-phone-container .phone-number-input:focus {
    box-shadow: none !important;
}

body.page-register #registerForm .wizard-form-group:has(> label) select,
body.page-register #registerForm .wizard-form-group:has(> label) .country-combobox-wrapper,
body.page-register #registerForm .wizard-form-group:has(> label) .city-combobox-wrapper,
body.page-register #registerForm .wizard-form-group:has(> label) .password-input-wrapper,
body.page-register #registerForm .wizard-form-group:has(> label) .phone-input-container:not(.login-identifier-phone-container) {
    border: 1.5px solid var(--register-input-border) !important;
    border-bottom: 1.5px solid var(--register-input-border) !important;
    border-radius: var(--register-input-radius) !important;
    background: var(--register-input-bg) !important;
    overflow: hidden !important;
}

body.page-register #registerForm .wizard-form-group:has(> label) .country-combobox-wrapper,
body.page-register #registerForm .wizard-form-group:has(> label) .city-combobox-wrapper,
body.page-register #registerForm .wizard-form-group:has(> label) .phone-input-container:not(.login-identifier-phone-container) {
    padding: 0 12px !important;
    min-height: 48px;
    box-sizing: border-box;
}

body.page-register #registerForm .wizard-form-group .country-combobox-wrapper:has(.country-select-dropdown.open),
body.page-register #registerForm .wizard-form-group .city-combobox-wrapper:has(.city-select-dropdown.open) {
    overflow: visible !important;
    z-index: 3000;
}

body.page-register #registerForm .wizard-form-group .country-combobox-wrapper .country-select-dropdown,
body.page-register #registerForm .wizard-form-group .city-combobox-wrapper .city-select-dropdown {
    z-index: 3001;
}

body.page-register #registerForm .wizard-form-group .phone-input-container:not(.login-identifier-phone-container) {
    position: relative;
}

body.page-register #registerForm .wizard-form-group .phone-input-container:not(.login-identifier-phone-container) .phone-country-dropdown {
    z-index: 3000;
}

body.page-register #registerForm .wizard-form-group .phone-input-container:not(.login-identifier-phone-container):has(.phone-country-dropdown.open) {
    overflow: visible !important;
}

body.page-register #registerForm .wizard-form-group .country-combobox-wrapper:focus-within,
body.page-register #registerForm .wizard-form-group .city-combobox-wrapper:focus-within,
body.page-register #registerForm .wizard-form-group .phone-input-container:not(.login-identifier-phone-container):focus-within {
    border-color: var(--register-input-border-focus) !important;
    border-bottom-color: var(--register-input-border-focus) !important;
    box-shadow: 0 0 0 3px rgba(26, 26, 26, 0.1);
}

body.page-register #registerForm .wizard-form-group .country-combobox-wrapper .country-text-input,
body.page-register #registerForm .wizard-form-group .city-combobox-wrapper .city-text-input,
body.page-register #registerForm .wizard-form-group .phone-input-container:not(.login-identifier-phone-container) .phone-number-input {
    border: none !important;
    border-bottom: none !important;
    background: transparent !important;
    box-shadow: none !important;
    padding-top: var(--register-input-padding-y) !important;
    padding-bottom: var(--register-input-padding-y) !important;
    padding-left: 4px !important;
    padding-right: 4px !important;
}

body.page-register #registerForm .wizard-form-group .input-field.validating,
body.page-register #registerForm .wizard-form-group input.validating,
body.page-register #registerForm .wizard-form-group textarea.validating,
body.page-register #registerForm .wizard-form-group .kinma-flatpickr-date-field--alt.validating {
    border-color: var(--register-validating-border-color) !important;
    border-bottom-color: var(--register-validating-border-color) !important;
    box-shadow: var(--register-validating-outline) !important;
    outline: none !important;
}

body.page-register #registerForm .wizard-form-group .input-field.valid:not(.invalid):not(.validating),
body.page-register #registerForm .wizard-form-group input.valid:not(.invalid):not(.validating),
body.page-register #registerForm .wizard-form-group textarea.valid:not(.invalid):not(.validating),
body.page-register #registerForm .wizard-form-group .kinma-flatpickr-date-field--alt.valid:not(.invalid):not(.validating) {
    border-color: var(--register-valid-border-color) !important;
    border-bottom-color: var(--register-valid-border-color) !important;
    box-shadow: var(--register-valid-outline) !important;
    outline: none !important;
}

body.page-register #registerForm .wizard-form-group .input-field.invalid,
body.page-register #registerForm .wizard-form-group input.invalid,
body.page-register #registerForm .wizard-form-group textarea.invalid,
body.page-register #registerForm .wizard-form-group .kinma-flatpickr-date-field--alt.invalid {
    border-color: var(--register-invalid-border-color) !important;
    border-bottom-color: var(--register-invalid-border-color) !important;
    box-shadow: var(--register-invalid-outline) !important;
    outline: none !important;
}

body.page-register #registerForm .wizard-form-group .phone-input-container:not(.login-identifier-phone-container).valid:not(.invalid):not(.validating),
body.page-register #registerForm .wizard-form-group .phone-input-container:not(.login-identifier-phone-container):has(.phone-number-input.valid:not(.invalid):not(.validating)):not(.invalid):not(.validating) {
    border-color: var(--register-valid-border-color) !important;
    border-bottom-color: var(--register-valid-border-color) !important;
    box-shadow: var(--register-valid-outline) !important;
    outline: none !important;
}

body.page-register #registerForm .wizard-form-group .phone-input-container:not(.login-identifier-phone-container).invalid,
body.page-register #registerForm .wizard-form-group .phone-input-container:not(.login-identifier-phone-container):has(.phone-number-input.invalid) {
    border-color: var(--register-invalid-border-color) !important;
    border-bottom-color: var(--register-invalid-border-color) !important;
    box-shadow: var(--register-invalid-outline) !important;
    outline: none !important;
}

body.page-register #registerForm .wizard-form-group .phone-input-container:not(.login-identifier-phone-container).validating,
body.page-register #registerForm .wizard-form-group .phone-input-container:not(.login-identifier-phone-container):has(.phone-number-input.validating) {
    border-color: var(--register-validating-border-color) !important;
    border-bottom-color: var(--register-validating-border-color) !important;
    box-shadow: var(--register-validating-outline) !important;
    outline: none !important;
}

/* Dateien-Schritt: Drop-Zone — flache obere linke Ecke */
body.page-register #registerForm .file-uploads-form-group:has(> label) .file-upload-area,
body.page-register #registerForm .file-uploads-form-group--register-slots .file-upload-area {
    border: 1.5px dashed var(--register-input-border);
    border-radius: 0 24px 24px 24px;
    background: var(--register-input-bg);
}

/* Step 1 reveal animation: staged field reveal */
body.page-register .register-step-reveal {
    transition: max-height 240ms ease, opacity 180ms ease, transform 240ms ease, margin-top 240ms ease;
    transform-origin: top;
}

body.page-register .register-step-reveal.is-hidden {
    max-height: 0;
    opacity: 0;
    transform: translateY(-6px);
    overflow: hidden;
    pointer-events: none;
    margin-top: 0;
}

body.page-register .register-step-reveal.is-visible {
    max-height: 560px;
    opacity: 1;
    transform: translateY(0);
    overflow: visible;
    pointer-events: auto;
    margin-top: 0;
}

/*
 * Earlier account fields must stay above later reveal wrappers (confirm/oauth animate in below).
 * Without this, a later sibling’s box can intercept clicks on E-Mail / Passwort.
 */
body.page-register #register-identifier-field-reveal {
    position: relative;
    z-index: 31;
}

body.page-register #register_step1_password {
    position: relative;
    z-index: 20;
}

body.page-register #register_step1_password_confirm {
    position: relative;
    z-index: 10;
}

body.page-register #register-manual-account-fields {
    position: relative;
    z-index: 2;
}

body.page-register #register_step1_oauth,
body.page-register #register_step1_checkboxes {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
}

/* Options: Icon-Zeile oben, AGB-Toggle unten */
body.page-register #register_step1_checkboxes .register-account-step__options-icons {
    order: 1;
}

body.page-register #register_step1_checkboxes .register-account-step__option-row--terms {
    order: 2;
}

/* Checkbox-Gruppe: kompakte Karte (Toggle-Zeilen) */
body.page-register #register_step1_checkboxes.register-account-step__checkboxes {
    gap: 0;
}

body.page-register #register_step1_checkboxes .register-account-step__checkbox.wizard-form-group {
    margin-top: 0 !important;
    margin-bottom: 2px !important;
}

body.page-register #register_step1_checkboxes .register-account-step__checkbox.wizard-form-group:last-child {
    margin-bottom: 0 !important;
}

/*
 * Checkbox-Block: max-height von 0 → none lässt sich nicht sauber interpolieren; manche Engines
 * lassen dann nur die erste Zeile sichtbar (nur E-Mail-Hinweis, AGB wirkt „weg“).
 * Feste Deckelhöhe + keine max-height-Transition nur für dieses Element.
 */
body.page-register #register_step1_checkboxes.register-step-reveal {
    transition: opacity 180ms ease, transform 240ms ease, margin-top 240ms ease;
}

body.page-register #register_step1_checkboxes.register-step-reveal.is-visible {
    max-height: 2000px !important;
    overflow: visible !important;
}

/* Flex-Zeile Checkbox + Text: Text darf umbrechen und nicht auf 0 Breite kollabieren */
body.page-register #register_step1_checkboxes .wizard-form-group label > span {
    min-width: 0;
    flex: 1 1 auto;
}

/* Validierungstext unter jedem Feld — bündig mit Ende der linken Unterkanten-Rundung */
body.page-register #registerForm .validation-message {
    display: block;
    margin: var(--login-label-gap, 6px) 0 0;
    padding: 0 0 0 var(--register-validation-inset-left, 18px);
    min-height: 0;
    font-size: 13px;
    line-height: 1.35;
    font-weight: 500;
    color: #64748b;
    box-sizing: border-box;
}

body.page-register #registerForm .validation-message:empty {
    display: none;
    margin: 0;
    padding: 0;
}

body.page-register #registerForm .validation-message.invalid {
    color: #dc2626;
    white-space: pre-line;
}

body.page-register .login-identifier-group .validation-message {
    width: 100%;
    max-width: 100%;
    padding-left: var(--register-validation-inset-left, 18px);
}

body.page-register .register-account-step__checkbox .validation-message {
    display: none !important;
    width: 100%;
    margin-top: 0;
    padding-left: 0;
}

body.page-register .wizard-form-group--gender-inline .validation-message {
    width: 100%;
    margin-top: var(--register-account-label-gap, 6px);
}

/* Kein „Gültig“ / „Wird überprüft“-Text — Spinner sitzt in der Input-Leiste */
body.page-register #registerForm .validation-message.validating,
body.page-register #registerForm .validation-message.valid {
    display: none !important;
}

@keyframes register-field-validation-spin {
    to {
        transform: translateY(-50%) rotate(360deg);
    }
}

body.page-register #registerForm {
    --register-field-spinner-size: 18px;
    --register-field-spinner-inset: 14px;
    --register-field-spinner-color: #f59e0b;
}

body.page-register #registerForm .password-input-wrapper:has(.input-field.validating)::after,
body.page-register #registerForm .login-identifier-input-wrap:has(.input-field.validating)::after,
body.page-register #registerForm .phone-input-container.validating::after,
body.page-register #registerForm .wizard-form-group > .input-field.validating::after {
    content: '';
    position: absolute;
    top: 50%;
    right: var(--register-field-spinner-inset);
    width: var(--register-field-spinner-size);
    height: var(--register-field-spinner-size);
    margin: 0;
    border: 2px solid rgba(245, 158, 11, 0.28);
    border-top-color: var(--register-field-spinner-color);
    border-radius: 50%;
    transform: translateY(-50%);
    animation: register-field-validation-spin 0.65s linear infinite;
    pointer-events: none;
    z-index: 2;
    box-sizing: border-box;
}

body.page-register #registerForm .wizard-form-group > .input-field.validating {
    position: relative;
}

body.page-register #registerForm .login-identifier-input-wrap:has(.login-clear-btn:not([hidden])):has(.input-field.validating)::after {
    right: 40px;
}

body.page-register #registerForm .password-input-wrapper:has(.password-toggle-btn:not([hidden])):has(.input-field.validating)::after {
    right: 52px;
}

body.page-register #registerForm .password-input-wrapper:has(.login-clear-btn--password:not([hidden])):has(.input-field.validating)::after,
body.page-register #registerForm .password-input-wrapper.password-input-wrapper--has-clear:has(.input-field.validating)::after {
    right: 94px;
}

body.page-register #registerForm .login-identifier-input-wrap--phone-mode .login-identifier-phone-container.validating {
    position: relative;
}

body.page-register #registerForm .login-identifier-input-wrap--phone-mode .login-identifier-phone-container.validating::after {
    right: var(--register-field-spinner-inset);
}

body.page-register
    #registerForm
    .login-identifier-input-wrap--phone-mode:has(.login-clear-btn:not([hidden]))
    .login-identifier-phone-container.validating::after {
    right: 40px;
}

body.page-register #registerForm .wizard-form-group .phone-input-container:not(.login-identifier-phone-container).validating {
    position: relative;
}

body.dark-mode.page-register #registerForm {
    --register-field-spinner-color: #fbbf24;
}

/* Wrapper-Inputs: ein Ring am äußeren Balken (Farbe = Validierungszustand) */
body.page-register #registerForm .wizard-form-group .password-input-wrapper:has(.input-field.invalid),
body.page-register #registerForm .wizard-form-group .password-input-wrapper.invalid,
body.page-register #registerForm .login-identifier-input-wrap:not(.login-identifier-input-wrap--phone-mode):has(.input-field.invalid),
body.page-register #registerForm .login-identifier-input-wrap--phone-mode .login-identifier-phone-container.phone-input-container:has(.phone-number-input.invalid) {
    border-color: var(--register-invalid-border-color) !important;
    border-bottom-color: var(--register-invalid-border-color) !important;
    box-shadow: var(--register-invalid-outline) !important;
    outline: none !important;
}

body.page-register #registerForm .wizard-form-group .password-input-wrapper:has(.input-field.validating),
body.page-register #registerForm .wizard-form-group .password-input-wrapper.validating,
body.page-register #registerForm .login-identifier-input-wrap:not(.login-identifier-input-wrap--phone-mode):has(.input-field.validating),
body.page-register #registerForm .login-identifier-input-wrap--phone-mode .login-identifier-phone-container.phone-input-container.validating,
body.page-register #registerForm .login-identifier-input-wrap--phone-mode .login-identifier-phone-container.phone-input-container:has(.phone-number-input.validating) {
    border-color: var(--register-validating-border-color) !important;
    border-bottom-color: var(--register-validating-border-color) !important;
    box-shadow: var(--register-validating-outline) !important;
    outline: none !important;
}

body.page-register #registerForm .wizard-form-group .password-input-wrapper:has(.input-field.valid:not(.invalid):not(.validating)):not(.invalid):not(.validating),
body.page-register #registerForm .wizard-form-group .password-input-wrapper.valid:not(.invalid):not(.validating),
body.page-register #registerForm .login-identifier-input-wrap:not(.login-identifier-input-wrap--phone-mode):has(.input-field.valid:not(.invalid):not(.validating)):not(.invalid):not(.validating),
body.page-register #registerForm .login-identifier-input-wrap:not(.login-identifier-input-wrap--phone-mode).valid:not(.invalid):not(.validating),
body.page-register #registerForm .login-identifier-input-wrap--phone-mode .login-identifier-phone-container.valid:not(.invalid):not(.validating),
body.page-register #registerForm .login-identifier-input-wrap--phone-mode .login-identifier-phone-container:has(.phone-number-input.valid:not(.invalid):not(.validating)):not(.invalid):not(.validating) {
    border-color: var(--register-valid-border-color) !important;
    border-bottom-color: var(--register-valid-border-color) !important;
    box-shadow: var(--register-valid-outline) !important;
    outline: none !important;
}

body.page-register #registerForm .wizard-form-group .input-field.invalid:focus,
body.page-register #registerForm .wizard-form-group input.invalid:focus,
body.page-register #registerForm .wizard-form-group textarea.invalid:focus,
body.page-register #registerForm .wizard-form-group .kinma-flatpickr-date-field--alt.invalid:focus {
    border-color: var(--register-invalid-border-color) !important;
    box-shadow: var(--register-invalid-outline) !important;
    outline: none !important;
}

body.page-register #registerForm .wizard-form-group .input-field.validating:focus,
body.page-register #registerForm .wizard-form-group input.validating:focus,
body.page-register #registerForm .wizard-form-group textarea.validating:focus,
body.page-register #registerForm .wizard-form-group .kinma-flatpickr-date-field--alt.validating:focus {
    border-color: var(--register-validating-border-color) !important;
    box-shadow: var(--register-validating-outline) !important;
    outline: none !important;
}

/* Grüne Outline — ein Ring pro Feld (nur am äußeren Balken, nicht Input + Wrapper) */
body.page-register #registerForm .login-identifier-input-wrap .input-field.valid,
body.page-register #registerForm .login-identifier-input-wrap .input-field:focus,
body.page-register #registerForm .password-input-wrapper .input-field.valid,
body.page-register #registerForm .password-input-wrapper .input-field:focus,
body.page-register #registerForm .login-identifier-input-wrap .input-field.validating,
body.page-register #registerForm .login-identifier-input-wrap .input-field.invalid,
body.page-register #registerForm .password-input-wrapper .input-field.validating,
body.page-register #registerForm .password-input-wrapper .input-field.invalid {
    border: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
    outline: none !important;
}

body.page-register #registerForm .wizard-form-group > .input-field.valid:not(.invalid):not(.validating),
body.page-register #registerForm .wizard-form-group > input.input-field.valid:not(.invalid):not(.validating),
body.page-register #registerForm .wizard-form-group > textarea.input-field.valid:not(.invalid):not(.validating) {
    border-color: var(--register-valid-border-color) !important;
    border-bottom-color: var(--register-valid-border-color) !important;
    box-shadow: var(--register-valid-outline) !important;
    outline: none !important;
}

body.page-register #registerForm .wizard-form-group .phone-input-container:not(.login-identifier-phone-container).valid:not(.invalid):not(.validating),
body.page-register #registerForm .wizard-form-group .phone-input-container:not(.login-identifier-phone-container):has(.phone-number-input.valid:not(.invalid):not(.validating)):not(.invalid):not(.validating) {
    border-color: var(--register-valid-border-color) !important;
    border-bottom-color: var(--register-valid-border-color) !important;
    box-shadow: var(--register-valid-outline) !important;
    outline: none !important;
}

/* Telefon-Modus: kein zweiter Ring am äußeren Wrap */
body.page-register .register-account-step__form .login-identifier-input-wrap--phone-mode:has(.input-field.valid:not(.invalid):not(.validating)),
body.page-register .register-account-step__form .login-identifier-input-wrap--phone-mode.valid:not(.invalid):not(.validating) {
    border-color: transparent !important;
    box-shadow: none !important;
    background: transparent !important;
}

body.page-register #registerForm .register-account-step__checkbox input[type="checkbox"].valid {
    outline: none !important;
    box-shadow: var(--register-valid-outline) !important;
}

body.page-register #registerForm .register-account-step__checkbox input[type="checkbox"].invalid {
    outline: none !important;
    box-shadow: var(--register-invalid-outline) !important;
}

/* Toggle-Inputs: Validierung nur am Track, nicht als Ring um das unsichtbare Input */
body.page-register #registerForm .register-account-step__toggle input[type="checkbox"].valid,
body.page-register #registerForm .register-account-step__toggle input[type="checkbox"].invalid {
    box-shadow: none !important;
    border: 2px solid transparent !important;
}

body.page-register #registerForm .wizard-form-group > .input-field.valid:not(.invalid):not(.validating):focus,
body.page-register #registerForm .wizard-form-group .password-input-wrapper:has(.input-field.valid:not(.invalid):not(.validating)):not(.invalid):not(.validating):focus-within,
body.page-register #registerForm .login-identifier-input-wrap:not(.login-identifier-input-wrap--phone-mode):has(.input-field.valid:not(.invalid):not(.validating)):not(.invalid):not(.validating):focus-within,
body.page-register #registerForm .login-identifier-input-wrap--phone-mode .login-identifier-phone-container.valid:not(.invalid):not(.validating):focus-within,
body.page-register #registerForm .login-identifier-input-wrap--phone-mode .login-identifier-phone-container:has(.phone-number-input.valid:not(.invalid):not(.validating)):not(.invalid):not(.validating):focus-within {
    border-color: var(--register-valid-border-color) !important;
    box-shadow: var(--register-valid-outline) !important;
    outline: none !important;
}

body.page-register #registerForm .wizard-form-group .password-input-wrapper:has(.input-field.invalid):focus-within,
body.page-register #registerForm .wizard-form-group .password-input-wrapper.invalid:focus-within,
body.page-register #registerForm .login-identifier-input-wrap:not(.login-identifier-input-wrap--phone-mode):has(.input-field.invalid):focus-within,
body.page-register #registerForm .login-identifier-input-wrap--phone-mode .login-identifier-phone-container.phone-input-container:has(.phone-number-input.invalid):focus-within,
body.page-register #registerForm .wizard-form-group .phone-input-container:not(.login-identifier-phone-container):has(.phone-number-input.invalid):focus-within,
body.page-register #registerForm .wizard-form-group .phone-input-container:not(.login-identifier-phone-container).invalid:focus-within {
    border-color: var(--register-invalid-border-color) !important;
    box-shadow: var(--register-invalid-outline) !important;
    outline: none !important;
}

body.page-register #registerForm .wizard-form-group .password-input-wrapper:has(.input-field.validating):focus-within,
body.page-register #registerForm .wizard-form-group .password-input-wrapper.validating:focus-within,
body.page-register #registerForm .login-identifier-input-wrap:not(.login-identifier-input-wrap--phone-mode):has(.input-field.validating):focus-within,
body.page-register #registerForm .login-identifier-input-wrap--phone-mode .login-identifier-phone-container.phone-input-container.validating:focus-within,
body.page-register #registerForm .login-identifier-input-wrap--phone-mode .login-identifier-phone-container.phone-input-container:has(.phone-number-input.validating):focus-within,
body.page-register #registerForm .wizard-form-group .phone-input-container:not(.login-identifier-phone-container).validating:focus-within,
body.page-register #registerForm .wizard-form-group .phone-input-container:not(.login-identifier-phone-container):has(.phone-number-input.validating):focus-within {
    border-color: var(--register-validating-border-color) !important;
    box-shadow: var(--register-validating-outline) !important;
    outline: none !important;
}

body.dark-mode.page-register #registerForm {
    --register-valid-border-color: #4ade80;
    --register-valid-ring: 0 0 0 3px rgba(74, 222, 128, 0.22);
    --register-valid-shadow: 0 2px 10px rgba(74, 222, 128, 0.1);
    --register-valid-outline: var(--register-valid-ring), var(--register-valid-shadow);
    --register-invalid-border-color: #f87171;
    --register-invalid-ring: 0 0 0 3px rgba(248, 113, 113, 0.22);
    --register-invalid-shadow: 0 2px 10px rgba(248, 113, 113, 0.1);
    --register-invalid-outline: var(--register-invalid-ring), var(--register-invalid-shadow);
    --register-validating-border-color: #fbbf24;
    --register-validating-ring: 0 0 0 3px rgba(251, 191, 36, 0.24);
    --register-validating-shadow: 0 2px 10px rgba(251, 191, 36, 0.1);
    --register-validating-outline: var(--register-validating-ring), var(--register-validating-shadow);
}

/* Account step: gleiche Abstände wie Login */
body.page-register .register-account-step {
    --register-oder-above-gap: 10px;
    --register-google-checkboxes-gap: 28px;
}

body.page-register .register-account-step__form.login-form {
    --login-field-gap: 10px;
    --login-button-gap: 10px;
    --login-label-gap: 6px;
    --login-alt-divider-below-gap: 16px;
}

body.page-register .register-account-step__form .wizard-form-group.login-identifier-group,
body.page-register .register-account-step__form .register-step-reveal .wizard-form-group {
    margin-bottom: 0 !important;
}

/* Versteckte Reveals: keine Rand-Reste; sichtbare Passwort-Felder behalten Abstand (siehe unten) */
body.page-register .register-account-step__form .register-step-reveal.is-hidden,
body.page-register .register-account-step__form .login-field-reveal.is-hidden:not(#register-identifier-field-reveal) {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

body.page-register .register-account-step__form .wizard-form-group.login-identifier-group {
    position: relative;
    z-index: 30;
    margin-bottom: var(--login-field-gap, 10px) !important;
}

/* Passwort → Passwort bestätigen: gleicher Rhythmus wie Login (#login-password-field-wrap) */
body.page-register .register-account-step__form #register_step1_password.login-field-reveal.is-visible {
    margin-top: 0 !important;
    margin-bottom: var(--login-field-gap, 10px) !important;
    overflow: visible;
}

body.page-register .register-account-step__form #register_step1_password_confirm.login-field-reveal.is-visible {
    margin-top: 0 !important;
    margin-bottom: 14px !important;
    overflow: visible;
}

body.page-register .register-account-step__form .register-account-step__oauth-cluster.login-human-primary-cluster {
    margin-top: 0 !important;
}

/* OAuth-Block unten: kein Extra-Abstand — „ODER“-Divider bringt margin-top mit */
body.page-register .register-account-step__oauth-reveal.register-step-reveal.is-visible {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

body.page-register .register-account-step__oauth-reveal .login-passkey-google-row {
    margin-bottom: 0 !important;
}

/* „ODER“ mit Linien (OAuth liegt außerhalb .register-account-step__form) */
body.page-register .register-account-step .login-alt-divider,
body.page-register .register-account-step__oauth-reveal .login-alt-divider,
body.page-register .register-account-step__oauth-cluster .login-alt-divider {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin-top: var(--register-oder-above-gap, var(--login-button-gap, 10px)) !important;
    margin-bottom: var(--login-alt-divider-below-gap, 16px) !important;
}

body.page-register .register-account-step .login-alt-divider__line {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    height: 1px !important;
    background: #e5e7eb !important;
    display: block !important;
}

body.page-register .register-account-step .login-alt-divider__text {
    flex: 0 0 auto !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    color: #6b7280 !important;
    line-height: 1 !important;
}

body.page-register .register-account-step__checkboxes.register-step-reveal.is-visible {
    margin-top: 0 !important;
}

body.page-register .register-account-step__title,
body.page-register .register-account-step__oauth-reveal,
body.page-register .register-account-step__checkboxes {
    width: 100%;
    max-width: var(--register-form-max-width, min(420px, 100%));
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

body.page-register .register-account-step .login-passkey-google-row,
body.page-register .register-account-step .login-passkey-google-row__pair,
body.page-register .register-account-step .login-google-oauth-circle-wrap--connected {
    width: 100%;
    max-width: 100%;
    margin: 0;
    display: block;
    justify-content: stretch;
    box-sizing: border-box;
}

/* Register Account: E-Mail/Telefon → Passwort → Checkboxen → Google (unten) */
body.page-register .register-account-step {
    display: flex;
    flex-direction: column;
}

body.page-register .register-account-step__form.login-form {
    order: 1;
}

body.page-register .register-account-step__checkboxes.register-step-reveal {
    order: 2;
}

body.page-register .register-account-step__oauth-reveal.register-step-reveal {
    order: 3;
}

/* Google bereits verbunden: OAuth oben, dann Checkboxen */
body.page-register #registerForm[data-google-connected="true"] .register-account-step__oauth-reveal.register-step-reveal {
    order: 1;
}

body.page-register #registerForm[data-google-connected="true"] .register-account-step__checkboxes.register-step-reveal {
    order: 2;
}

body.page-register #registerForm[data-google-connected="true"] .register-account-step__oauth-reveal.register-step-reveal.is-visible {
    margin-top: 0 !important;
    margin-bottom: var(--login-alt-divider-below-gap, 16px) !important;
}

/* Wizard-Menü (Progress + Nav): ein Layout — siehe register-wizard-layout.css */

/* Profil-Vorschau: Detail-Overrides in style.css + auth-mobile (Klasse kinma-wizard-profile-preview-step) */

/* Person erstellen (page-persons): gleiche .container-Regel — lädt nach style.css, überschreibt .container 48px/32px */
body.page-persons:has(#createPersonForm).kinma-wizard-profile-preview-step .wizard-layout .wizard-form-layer .container,
body.page-persons:has(#createPersonForm):has(> #profile-preview-wrapper) .wizard-layout .wizard-form-layer .container,
body.page-persons:has(#createPersonForm):has(.wizard-content > div:not(.hidden):has(#profile-preview-wrapper)) .wizard-layout .wizard-form-layer .container {
    padding: 0 !important;
    margin: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Person erstellen: breiterer Formularbereich (v. a. Beziehungen zweispaltig) */
body.page-persons:has(#createPersonForm) .wizard-layout .wizard-form-layer .container {
    max-width: min(1200px, 100%);
    width: 100%;
    box-sizing: border-box;
}

/* Register Step 3: compact profile, banner, documents */
body.page-register .file-uploads-form-group {
    max-width: var(--register-form-max-width, min(420px, 100%));
    margin-left: auto;
    margin-right: auto;
}

body.page-register .file-uploads-form-group--register-slots {
    width: 100%;
    max-width: min(480px, 100%);
}

body.page-register .file-uploads-form-group--register-slots .file-uploads-form-group__heading {
    display: block;
    margin: 0 0 10px;
    font-size: 14px;
    font-weight: 600;
    color: #0f172a;
    text-align: center;
}

body.page-register .file-uploads-form-group--register-slots .file-uploads-slots {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

body.page-register .file-uploads-form-group--register-slots .file-uploads-slots-media {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 10px 12px;
    align-items: end;
}

body.page-register .file-uploads-form-group--register-slots .file-uploads-slot__label {
    display: block;
    margin: 0 0 4px;
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

body.page-register .file-uploads-form-group--register-slots .file-uploads-slot--profile {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-width: 0;
}

body.page-register .file-uploads-form-group--register-slots .file-uploads-slot--profile .file-upload-area.file-upload-profile {
    width: 88px;
    height: 88px;
    min-height: 0;
    padding: 0;
    margin: 0;
    border-radius: 50%;
}

body.page-register .file-uploads-form-group--register-slots .file-uploads-slot--profile .file-upload-content {
    gap: 4px;
    padding: 8px;
}

body.page-register .file-uploads-form-group--register-slots .file-uploads-slot--profile .file-upload-icon {
    font-size: 22px;
    line-height: 1;
}

body.page-register .file-uploads-form-group--register-slots .file-uploads-slot--profile .file-upload-primary {
    font-size: 10px;
    font-weight: 500;
    line-height: 1.2;
    color: #64748b;
}

body.page-register .file-uploads-form-group--register-slots .file-uploads-slot--profile .file-upload-secondary {
    display: none;
}

body.page-register .file-uploads-form-group--register-slots .file-uploads-slot--profile .file-upload-remove {
    top: 4px;
    right: 4px;
    width: 24px;
    height: 24px;
    font-size: 16px;
}

body.page-register .file-uploads-form-group--register-slots .file-uploads-slot--banner {
    min-width: 0;
}

body.page-register .file-uploads-form-group--register-slots .file-uploads-slot--banner .file-upload-area.file-upload-banner {
    width: 100%;
    min-height: 72px;
    max-height: 88px;
    height: 88px;
    padding: 8px 10px;
    border-radius: 0 16px 16px 16px;
}

body.page-register .file-uploads-form-group--register-slots .file-uploads-slot--banner .file-upload-content {
    flex-direction: row;
    gap: 8px;
}

body.page-register .file-uploads-form-group--register-slots .file-uploads-slot--banner .file-upload-icon {
    font-size: 22px;
}

body.page-register .file-uploads-form-group--register-slots .file-uploads-slot--banner .file-upload-primary {
    font-size: 12px;
    font-weight: 500;
}

body.page-register .file-uploads-form-group--register-slots .file-uploads-slot--banner .file-upload-secondary {
    display: none;
}

body.page-register .file-uploads-form-group--register-slots .file-uploads-slot--banner .file-upload-banner .file-upload-image {
    object-fit: cover;
}

body.page-register .file-uploads-form-group--register-slots .file-upload-area.file-upload-area--documents {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
    min-height: 56px;
    padding: 8px;
    box-sizing: border-box;
    cursor: default;
    border-radius: 0 16px 16px 16px;
}

body.page-register .file-uploads-form-group--register-slots .file-upload-area.file-upload-area--documents .file-upload-content--documents {
    flex: 1 1 100%;
    min-height: 0;
    padding: 2px 4px;
    cursor: pointer;
}

body.page-register .file-uploads-form-group--register-slots .file-upload-area.file-upload-area--documents .file-upload-content--documents .file-upload-secondary {
    font-size: 11px;
    line-height: 1.35;
}

body.page-register .file-uploads-form-group--register-slots .file-upload-area.file-upload-area--documents.file-upload-area--has-documents .file-upload-content--documents {
    display: none;
}

body.page-register .file-uploads-form-group--register-slots .file-upload-documents-panel {
    display: none;
    flex: 1 1 auto;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 8px;
    min-width: 0;
    width: auto;
    max-width: 100%;
    padding: 0;
    margin: 0;
}

body.page-register .file-uploads-form-group--register-slots .file-upload-documents-panel .file-upload-items {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 8px;
    max-height: min(24vh, 168px);
    overflow-x: hidden;
    overflow-y: auto;
    padding: 0 2px 0 0;
    margin: 0;
}

body.page-register .file-uploads-form-group--register-slots .file-upload-area.file-upload-area--documents .file-upload-item.file-upload-item--with-purpose {
    display: flex;
    flex-direction: row;
    flex: 0 0 auto;
    width: auto;
    max-width: min(168px, 42vw);
    margin: 0;
    padding: 4px 6px 4px 4px;
    align-items: center;
    gap: 6px;
    border-radius: 10px;
}

body.page-register .file-uploads-form-group--register-slots .file-upload-item-thumb {
    width: 32px;
    height: 32px;
    min-width: 32px;
    border-radius: 8px;
}

body.page-register .file-uploads-form-group--register-slots .file-upload-item-body {
    flex: 1 1 auto;
    min-width: 0;
    gap: 0;
}

body.page-register .file-uploads-form-group--register-slots .file-upload-item-info {
    gap: 1px;
}

body.page-register .file-uploads-form-group--register-slots .file-upload-item-name {
    font-size: 11px;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body.page-register .file-uploads-form-group--register-slots .file-upload-item-size {
    font-size: 10px;
    line-height: 1.2;
}

body.page-register .file-uploads-form-group--register-slots .file-upload-item-remove {
    width: 22px;
    height: 22px;
    min-width: 22px;
    margin: 0;
    padding: 0;
    font-size: 14px;
    flex-shrink: 0;
}

body.page-register .file-uploads-form-group--register-slots .file-upload-add-tile {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin: 0;
    padding: 0;
    border: 1.5px dashed #94a3b8;
    border-radius: 10px;
    background: #f8fafc;
    color: #475569;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

body.page-register .file-uploads-form-group--register-slots .file-upload-add-tile:hover,
body.page-register .file-uploads-form-group--register-slots .file-upload-add-tile:focus-visible {
    border-color: #0f172a;
    background: #f1f5f9;
    color: #0f172a;
    outline: none;
}

body.page-register .file-uploads-form-group--register-slots .file-upload-add-tile__icon {
    font-size: 22px;
    font-weight: 300;
    line-height: 1;
}

@media (max-width: 360px) {
    body.page-register .file-uploads-form-group--register-slots .file-uploads-slots-media {
        grid-template-columns: 1fr;
        justify-items: center;
    }

    body.page-register .file-uploads-form-group--register-slots .file-uploads-slot--banner .file-upload-area.file-upload-banner {
        max-height: 72px;
        height: 72px;
    }
}

body.page-register .file-upload-area.all-files {
    border: 1px solid #dbe3ef;
    border-radius: 18px;
    background: #ffffff;
    padding: 12px;
}

body.page-register .file-upload-list {
    margin-top: 2px;
}

body.page-register .file-upload-items {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: min(54vh, 460px);
    overflow-y: auto;
    padding-right: 4px;
}

body.page-register .file-upload-item.file-upload-item--with-purpose {
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    background: #f8fafc;
    padding: 10px 12px;
    align-items: flex-start;
    gap: 10px;
}

body.page-register .file-upload-item-thumb {
    width: 44px;
    height: 44px;
    border-radius: 10px;
}

body.page-register .file-upload-item-body {
    gap: 8px;
}

body.page-register .file-upload-item-name {
    font-size: 13px;
    line-height: 1.3;
}

body.page-register .file-upload-item-size {
    font-size: 11px;
    opacity: 0.72;
}

body.page-register .file-upload-item-purpose-row {
    margin-top: 2px;
    gap: 8px;
}

body.page-register .file-upload-item-purpose-label {
    font-size: 11px;
    color: #64748b;
    min-width: 82px;
}

body.page-register .file-upload-item-purpose-select {
    min-height: 34px;
    border-radius: 9999px;
    border: 1px solid #d5dbe3;
    background: #fff;
    padding: 6px 12px;
    font-size: 12px;
}

body.page-register .file-upload-item-remove {
    width: 26px;
    height: 26px;
    border-radius: 9999px;
    font-size: 16px;
    line-height: 1;
    margin-top: 2px;
}

/* Person aus Stammbaum: Name + Formular links, „Geplante Verknüpfung“ rechts (nicht darüber) */
.wizard-layout .persons-create-slot-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 320px);
    gap: 16px 22px;
    align-items: start;
    width: 100%;
    box-sizing: border-box;
}

.wizard-layout .persons-create-slot-layout__main {
    min-width: 0;
}

.wizard-layout .persons-create-slot-layout__aside {
    min-width: 0;
}

.wizard-layout .persons-create-slot-layout__aside .persons-slot-context-preview {
    margin-bottom: 0;
    position: sticky;
    top: 10px;
}

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

    .wizard-layout .persons-create-slot-layout__aside .persons-slot-context-preview {
        position: relative;
        top: auto;
    }
}

/* Create-from-tree slot: relationship context summary (step 1)
   .wizard-layout: immer gültig auf der Personen-Wizard-Seite (unabhängig von body.page-register). */
body.page-register .persons-slot-context-preview,
.wizard-layout .persons-slot-context-preview {
    position: relative;
    z-index: 2;
    margin: 0 0 20px 0;
    padding: 14px 16px;
    border-radius: 12px;
    border: 1px solid #c7d2fe;
    background: linear-gradient(135deg, #eef2ff 0%, #f5f3ff 100%);
    color: #1e1b4b;
}

body.page-register .persons-slot-context-preview__title,
.wizard-layout .persons-slot-context-preview__title {
    margin: 0 0 8px 0;
    font-size: 1rem;
    font-weight: 600;
}

body.page-register .persons-slot-context-preview__primary,
.wizard-layout .persons-slot-context-preview__primary {
    margin: 0 0 6px 0;
    font-size: 0.95rem;
    line-height: 1.45;
}

body.page-register .persons-slot-context-preview__primary:last-child,
.wizard-layout .persons-slot-context-preview__primary:last-child {
    margin-bottom: 0;
}

/* Titel + Kurztext links, Detail-Raster rechts (nicht alles untereinander) */
body.page-register .persons-slot-context-preview__head,
.wizard-layout .persons-slot-context-preview__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 14px 20px;
}

body.page-register .persons-slot-context-preview__head-main,
.wizard-layout .persons-slot-context-preview__head-main {
    flex: 1 1 200px;
    min-width: 0;
}

body.page-register .persons-slot-context-preview__grid--compact,
.wizard-layout .persons-slot-context-preview__grid--compact {
    flex: 1 1 260px;
    min-width: min(100%, 280px);
    margin: 0;
    font-size: 0.9rem;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

body.page-register .persons-slot-context-preview__grid-row,
.wizard-layout .persons-slot-context-preview__grid-row {
    display: grid;
    grid-template-columns: minmax(0, 7.5rem) 1fr;
    gap: 8px 12px;
    align-items: start;
}

body.page-register .persons-slot-context-preview__grid-row--parents,
.wizard-layout .persons-slot-context-preview__grid-row--parents {
    grid-template-columns: minmax(0, 7.5rem) 1fr;
}

body.page-register .persons-slot-context-preview__grid dt,
.wizard-layout .persons-slot-context-preview__grid dt {
    margin: 0;
    font-weight: 600;
    color: #4338ca;
    font-size: 0.82rem;
    line-height: 1.3;
    padding-top: 2px;
}

body.page-register .persons-slot-context-preview__grid dd,
.wizard-layout .persons-slot-context-preview__grid dd {
    margin: 0;
    min-width: 0;
}

/* Zwei Elternplätze nebeneinander, getrennt */
body.page-register .persons-slot-context-preview__two-slots--parents,
.wizard-layout .persons-slot-context-preview__two-slots--parents {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    width: 100%;
}

body.page-register .persons-slot-context-preview__slot,
.wizard-layout .persons-slot-context-preview__slot {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid rgba(67, 56, 202, 0.35);
    background: rgba(255, 255, 255, 0.55);
    min-width: 0;
}

body.page-register .persons-slot-context-preview__slot-label,
.wizard-layout .persons-slot-context-preview__slot-label {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #5b21b6;
    opacity: 0.95;
}

body.page-register .persons-slot-context-preview__slot-value,
.wizard-layout .persons-slot-context-preview__slot-value {
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.35;
    word-break: break-word;
}

body.page-register .persons-slot-context-preview__list,
.wizard-layout .persons-slot-context-preview__list {
    margin: 0;
    padding-left: 1.15em;
}

body.page-register .persons-slot-context-preview__list--inline,
.wizard-layout .persons-slot-context-preview__list--inline {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    padding-left: 0;
    list-style: none;
}

body.page-register .persons-slot-context-preview__list--inline li,
.wizard-layout .persons-slot-context-preview__list--inline li {
    margin: 0;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(67, 56, 202, 0.22);
    font-size: 0.88rem;
}

@media (max-width: 520px) {
    body.page-register .persons-slot-context-preview__two-slots--parents,
    .wizard-layout .persons-slot-context-preview__two-slots--parents {
        grid-template-columns: 1fr;
    }

    body.page-register .persons-slot-context-preview__grid-row,
    .wizard-layout .persons-slot-context-preview__grid-row {
        grid-template-columns: 1fr;
    }
}

body.page-register .persons-slot-context-preview__note,
.wizard-layout .persons-slot-context-preview__note {
    margin: 12px 0 0 0;
    font-size: 0.8rem;
    line-height: 1.4;
    color: #4c1d95;
    opacity: 0.92;
}

/* ─── Account step: Login-Formular-Parität ─────────────────────────────────── */

body.page-register .register-account-step__form.login-form {
    margin-top: 0;
    width: 100%;
    max-width: 100%;
    --login-field-gap: 10px;
    --login-button-gap: 10px;
    --login-label-gap: 6px;
    --login-alt-divider-below-gap: 16px;
}

body.page-register .register-account-step__oauth-reveal.is-visible {
    margin-bottom: var(--login-alt-divider-below-gap, 16px) !important;
}

body.page-register .register-account-step__checkbox-label {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    cursor: pointer;
    font-size: 14px;
    line-height: 1.35;
    min-height: 0;
    padding: 1px 0;
    margin: 0;
}

/* Kompakte Options-Karte: Toggle rechts, Text links */
body.page-register .register-account-step__options-compact {
    --register-option-toggle-w: 52px;
    --register-option-toggle-w-wide: 52px;
    --register-option-toggle-h: 28px;
    --register-option-toggle-thumb: 22px;
    --register-option-toggle-pad: 3px;
    --register-option-toggle-motion: 0.22s cubic-bezier(0.33, 1, 0.68, 1);
}

body.page-register .register-account-step__options-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    border: none;
    background: transparent;
    overflow: visible;
    box-sizing: border-box;
}

body.page-register .register-account-step__options-icons {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    padding: 0;
    border-bottom: none;
}

body.page-register .register-account-step__icon-option-label {
    display: block;
    position: relative;
    margin: 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

body.page-register .register-account-step__icon-option-label input[type="checkbox"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    outline: none !important;
    appearance: none;
    -webkit-appearance: none;
    z-index: 1;
}

body.page-register .register-account-step__icon-option-btn {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    width: 100%;
    min-height: 42px;
    padding: 5px 14px 5px 5px;
    border-radius: 9999px;
    border: 1.5px solid #e2e8f0;
    background: #f8fafc;
    color: #475569;
    box-sizing: border-box;
    transition:
        background-color var(--register-option-toggle-motion, 0.22s cubic-bezier(0.33, 1, 0.68, 1)),
        border-color var(--register-option-toggle-motion, 0.22s cubic-bezier(0.33, 1, 0.68, 1)),
        color var(--register-option-toggle-motion, 0.22s cubic-bezier(0.33, 1, 0.68, 1)),
        box-shadow var(--register-option-toggle-motion, 0.22s cubic-bezier(0.33, 1, 0.68, 1)),
        transform 0.14s ease;
    pointer-events: none;
}

body.page-register .register-account-step__icon-option-icon {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.92);
    color: inherit;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
    transition:
        background-color var(--register-option-toggle-motion, 0.22s cubic-bezier(0.33, 1, 0.68, 1)),
        color var(--register-option-toggle-motion, 0.22s cubic-bezier(0.33, 1, 0.68, 1)),
        box-shadow var(--register-option-toggle-motion, 0.22s cubic-bezier(0.33, 1, 0.68, 1));
}

body.page-register .register-account-step__icon-option-text {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.01em;
    text-align: left;
    color: inherit;
}

body.page-register .register-account-step__icon-option-label:has(input[type="checkbox"]:checked) .register-account-step__icon-option-btn {
    background: #22c55e;
    border-color: #22c55e;
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(34, 197, 94, 0.28);
}

body.page-register .register-account-step__icon-option-label:has(input[type="checkbox"]:checked) .register-account-step__icon-option-icon {
    background: rgba(255, 255, 255, 0.22);
    color: #ffffff;
    box-shadow: none;
}

body.page-register .register-account-step__icon-option-label:has(input[type="checkbox"]:focus-visible) .register-account-step__icon-option-btn {
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.35);
}

body.page-register .register-account-step__icon-option-label:active .register-account-step__icon-option-btn {
    transform: scale(0.98);
}

body.page-register .register-account-step__icon-option.wizard-form-group {
    margin: 0 !important;
    min-width: 0;
}

body.page-register .register-account-step__option-row--terms {
    border-bottom: none !important;
}

body.page-register .register-account-step__toggle--wide {
    --register-option-toggle-active-w: var(--register-option-toggle-w-wide);
}

body.page-register .register-account-step__toggle:not(.register-account-step__toggle--wide) {
    --register-option-toggle-active-w: var(--register-option-toggle-w);
}

body.page-register .register-account-step__toggle {
    --register-option-toggle-travel: calc(
        var(--register-option-toggle-active-w, var(--register-option-toggle-w)) -
            var(--register-option-toggle-thumb) - (2 * var(--register-option-toggle-pad))
    );
    position: relative;
    display: block;
    flex: 0 0 var(--register-option-toggle-active-w, var(--register-option-toggle-w)) !important;
    width: var(--register-option-toggle-active-w, var(--register-option-toggle-w)) !important;
    min-width: var(--register-option-toggle-active-w, var(--register-option-toggle-w)) !important;
    max-width: var(--register-option-toggle-active-w, var(--register-option-toggle-w)) !important;
    height: var(--register-option-toggle-h) !important;
    flex-shrink: 0 !important;
    box-sizing: border-box;
    overflow: visible;
}

body.page-register .register-account-step__toggle input[type="checkbox"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
    border: 2px solid transparent !important;
    background: transparent !important;
    box-shadow: none !important;
    outline: none !important;
    appearance: none;
    -webkit-appearance: none;
    box-sizing: border-box;
    z-index: 1;
}

body.page-register .register-account-step__toggle-track {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: 9999px;
    background: #cbd5e1;
    box-shadow: 0 0 0 2px transparent;
    transition:
        background-color var(--register-option-toggle-motion),
        box-shadow var(--register-option-toggle-motion);
    pointer-events: none;
    box-sizing: border-box;
    overflow: visible;
}

body.page-register .register-account-step__toggle-track::before {
    content: "";
    position: absolute;
    top: 50%;
    left: var(--register-option-toggle-pad);
    width: var(--register-option-toggle-thumb);
    height: var(--register-option-toggle-thumb);
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.2);
    transform: translateY(-50%) translateX(0);
    transition:
        transform var(--register-option-toggle-motion),
        box-shadow var(--register-option-toggle-motion);
    will-change: transform;
}

body.page-register .register-account-step__toggle input[type="checkbox"]:checked + .register-account-step__toggle-track {
    background: #22c55e;
    box-shadow: 0 0 0 2px transparent;
}

body.page-register .register-account-step__toggle input[type="checkbox"]:checked + .register-account-step__toggle-track::before {
    transform: translateY(-50%) translateX(var(--register-option-toggle-travel));
}

body.page-register .register-account-step__toggle input[type="checkbox"]:focus-visible + .register-account-step__toggle-track {
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.35);
}

body.page-register .register-account-step__toggle input[type="checkbox"].invalid + .register-account-step__toggle-track {
    background: #fecaca;
    box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.45);
}

body.page-register .register-account-step__toggle input[type="checkbox"].valid:not(.invalid) + .register-account-step__toggle-track {
    background: #86efac;
    box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.35);
}

body.page-register .register-account-step__toggle input[type="checkbox"].valid:not(.invalid):checked + .register-account-step__toggle-track {
    background: #22c55e;
    box-shadow: 0 0 0 2px transparent;
}

body.page-register .register-account-step__toggle input[type="checkbox"].valid,
body.page-register .register-account-step__toggle input[type="checkbox"].invalid {
    border: 2px solid transparent !important;
    outline: none !important;
    box-shadow: none !important;
}

body.page-register .register-account-step__option-row.wizard-form-group {
    margin: 0 !important;
    padding: 0;
}

body.page-register .register-account-step__option-row:not(:last-child) {
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}

body.page-register .register-account-step__option-row .register-account-step__checkbox-label {
    align-items: center;
    gap: 10px;
    padding: 0;
    font-size: 12px;
    line-height: 1.25;
}

body.page-register .register-account-step__option-row--terms .register-account-step__checkbox-label {
    flex-wrap: nowrap;
    overflow: visible;
}

body.page-register .register-account-step__option-row--terms .register-account-step__toggle {
    margin-left: auto;
    overflow: visible;
}

body.page-register .register-account-step__option-text {
    flex: 1 1 auto;
    min-width: 0;
    color: #334155;
}

body.dark-mode.page-register .register-account-step__options-icons {
    border-bottom: none;
}

body.dark-mode.page-register .register-account-step__icon-option-btn {
    background: rgba(30, 41, 59, 0.72);
    border-color: rgba(148, 163, 184, 0.28);
    color: #cbd5e1;
}

body.dark-mode.page-register .register-account-step__icon-option-icon {
    background: rgba(15, 23, 42, 0.55);
    box-shadow: none;
}

body.dark-mode.page-register .register-account-step__icon-option-label:has(input[type="checkbox"]:checked) .register-account-step__icon-option-btn {
    background: #22c55e;
    border-color: #4ade80;
    color: #ffffff;
    box-shadow: 0 2px 10px rgba(74, 222, 128, 0.22);
}

body.dark-mode.page-register .register-account-step__icon-option-label:has(input[type="checkbox"]:checked) .register-account-step__icon-option-icon {
    background: rgba(255, 255, 255, 0.22);
    color: #ffffff;
}

body.dark-mode.page-register .register-account-step__icon-option-text {
    color: inherit;
}

body.dark-mode.page-register .register-account-step__options-card {
    background: transparent;
    border: none;
}

body.dark-mode.page-register .register-account-step__option-row:not(:last-child) {
    border-bottom-color: rgba(148, 163, 184, 0.16);
}

body.dark-mode.page-register .register-account-step__option-text {
    color: #e2e8f0;
}

body.dark-mode.page-register .register-account-step__toggle-track {
    background: #475569;
}

body.dark-mode.page-register .register-account-step__toggle input[type="checkbox"]:checked + .register-account-step__toggle-track {
    background: #4ade80;
}

/* AGB / Checkbox: Label-Text rot oder grün; Links (AGB, Datenschutz) bleiben blau */
body.page-register .register-account-step__checkbox-label > input[type="checkbox"].invalid {
    border-color: var(--register-invalid-border-color) !important;
    border-width: 2px;
    outline: none !important;
    box-shadow: var(--register-invalid-outline) !important;
}

body.page-register .register-account-step__checkbox-label > input[type="checkbox"].valid:not(.invalid) {
    outline: none !important;
    border-color: var(--register-valid-border-color) !important;
    box-shadow: var(--register-valid-outline) !important;
}

body.page-register .register-account-step__checkbox-label > input[type="checkbox"].invalid + span,
body.page-register .register-account-step__checkbox-label:has(input[type="checkbox"].invalid) > span,
body.page-register .register-account-step__checkbox-label:has(input[type="checkbox"].invalid) .register-account-step__option-text {
    color: #dc2626 !important;
}

body.page-register .register-account-step__checkbox-label > input[type="checkbox"].valid:not(.invalid) + span,
body.page-register .register-account-step__checkbox-label:has(input[type="checkbox"].valid:not(.invalid)) > span,
body.page-register .register-account-step__checkbox-label:has(input[type="checkbox"].valid:not(.invalid)) .register-account-step__option-text {
    color: #22c55e !important;
}

body.page-register .register-account-step__option-text a,
body.page-register .register-account-step__checkbox-label > span a {
    color: #2563eb !important;
    text-decoration: underline;
}

body.page-register .register-account-step__option-text a:hover,
body.page-register .register-account-step__checkbox-label > span a:hover {
    color: #1d4ed8 !important;
}

body.dark-mode.page-register .register-account-step__option-text a,
body.dark-mode.page-register .register-account-step__checkbox-label > span a {
    color: #60a5fa !important;
}

body.dark-mode.page-register .register-account-step__option-text a:hover,
body.dark-mode.page-register .register-account-step__checkbox-label > span a:hover {
    color: #93c5fd !important;
}

/* Google-Button-Styling auch außerhalb .register-account-step__form (OAuth-Zeile) */
body.page-register .register-account-step a.login-button.login-button-secondary.login-button-google,
body.page-register .register-account-step div.login-button.login-button-secondary.login-button-google.is-google-connected {
    background-color: #ffffff;
    color: #1a1a1a;
    border-radius: 9999px;
    min-height: var(--login-primary-submit-min-height, 48px);
    position: relative;
    overflow: hidden;
    border: none;
    box-shadow:
        0 1px 4px rgba(66, 133, 244, 0.1),
        0 1px 5px rgba(234, 67, 53, 0.06),
        0 1px 5px rgba(251, 188, 4, 0.07),
        0 1px 4px rgba(52, 168, 83, 0.08);
    transition:
        transform 0.22s ease,
        box-shadow 0.22s ease,
        background-color 0.22s ease,
        background-image 0.22s ease;
}

/* Idle „Mit Google registrieren“: Hover wie Login (OAuth liegt außerhalb __form) */
body.page-register .register-account-step a.login-button.login-button-secondary.login-button-google:not(.is-google-connected):hover,
body.page-register .register-account-step a.login-button.login-button-secondary.login-button-google:not(.is-google-connected):focus-visible {
    transform: scale(0.98);
    background-color: #ffffff;
    background-image: linear-gradient(
        118deg,
        rgba(66, 133, 244, 0.08) 0%,
        rgba(234, 67, 53, 0.06) 18%,
        rgba(251, 188, 4, 0.065) 38%,
        rgba(52, 168, 83, 0.06) 58%,
        rgba(66, 133, 244, 0.07) 78%,
        rgba(234, 67, 53, 0.055) 100%
    );
    background-size: 260% 260%;
    background-repeat: no-repeat;
    animation: kinma-google-login-bg-flow 10s cubic-bezier(0.42, 0.08, 0.38, 0.96) infinite;
    box-shadow:
        0 2px 10px rgba(66, 133, 244, 0.14),
        0 2px 11px rgba(234, 67, 53, 0.09),
        0 2px 11px rgba(251, 188, 4, 0.09),
        0 2px 10px rgba(52, 168, 83, 0.1);
}

body.page-register .register-account-step a.login-button.login-button-secondary.login-button-google:not(.is-google-connected):hover .login-icon-google-g,
body.page-register .register-account-step a.login-button.login-button-secondary.login-button-google:not(.is-google-connected):hover .login-button__text,
body.page-register .register-account-step a.login-button.login-button-secondary.login-button-google:not(.is-google-connected):focus-visible .login-icon-google-g,
body.page-register .register-account-step a.login-button.login-button-secondary.login-button-google:not(.is-google-connected):focus-visible .login-button__text {
    filter: drop-shadow(0 0 1px rgba(255, 255, 255, 0.95)) drop-shadow(0 0 8px rgba(255, 255, 255, 0.55))
        drop-shadow(0 0 14px rgba(255, 255, 255, 0.28));
}

body.page-register .register-account-step a.login-button.login-button-secondary.login-button-google::before,
body.page-register .register-account-step div.login-button.login-button-secondary.login-button-google.is-google-connected::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 2px;
    background: linear-gradient(118deg, #4285f4, #ea4335, #fbbc05, #34a853, #4285f4);
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    mask-composite: exclude;
    pointer-events: none;
    z-index: 0;
}

body.page-register .register-account-step .login-button-google > * {
    position: relative;
    z-index: 1;
}

/* Google verbunden: Pill-Button mit Profil, Name, E-Mail, Wechsel-Icon */
body.page-register .register-account-step .login-button-google.is-google-connected {
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 100%;
    min-height: var(--login-primary-submit-min-height, 48px);
    padding: 0;
    cursor: pointer;
    text-decoration: none;
    pointer-events: auto;
    box-sizing: border-box;
    transition:
        transform 0.2s ease,
        box-shadow 0.22s ease,
        background-color 0.22s ease;
}

body.page-register .register-account-step .login-button-google.is-google-connected:hover {
    transform: scale(0.98);
    background-color: #ffffff;
    background-image: linear-gradient(
        118deg,
        rgba(66, 133, 244, 0.08) 0%,
        rgba(234, 67, 53, 0.06) 18%,
        rgba(251, 188, 4, 0.065) 38%,
        rgba(52, 168, 83, 0.06) 58%,
        rgba(66, 133, 244, 0.07) 78%,
        rgba(234, 67, 53, 0.055) 100%
    );
}

body.page-register .register-account-step .login-button-google.is-google-connected:focus-visible {
    outline: none;
}

body.page-register .register-account-step .login-button-google.is-google-connected:focus-visible .login-button-google__idle.login-button-google__connected {
    outline: 2px solid #4285f4;
    outline-offset: 2px;
    border-radius: 9999px;
}

body.page-register .register-account-step .login-button-google.is-google-connected.is-google-oauth-waiting {
    cursor: wait;
}

body.page-register .register-account-step .login-button-google__idle.login-button-google__connected {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 8px;
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    min-height: var(--login-primary-submit-min-height, 48px);
    padding: 0 14px 0 12px;
    box-sizing: border-box;
    pointer-events: none;
}

body.page-register .register-account-step .register-google-btn__profile {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    overflow: hidden;
}

body.page-register .register-account-step .register-google-btn__avatar {
    width: 36px;
    height: 36px;
    border-radius: 999px;
    object-fit: cover;
    flex-shrink: 0;
}

body.page-register .register-account-step .register-google-btn__avatar--initials {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #e2e8f0;
    color: #1a1a1a;
    font-weight: 700;
    font-size: 15px;
}

body.page-register .register-account-step .register-google-btn__meta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    min-width: 0;
    flex: 1 1 auto;
    text-align: left;
}

body.page-register .register-account-step .register-google-btn__name {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    color: #1a1a1a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

body.page-register .register-account-step .register-google-btn__email {
    font-size: 12px;
    font-weight: 400;
    line-height: 1.25;
    color: #64748b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

body.page-register .register-account-step .register-google-btn__change {
    grid-column: 2;
    justify-self: end;
    align-self: center;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: #64748b;
    pointer-events: none;
}

body.page-register .register-account-step .register-google-btn__change-icon {
    display: block;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

body.page-register .register-account-step .login-google-oauth-circle-wrap--connected .login-google-oauth-cancel {
    pointer-events: auto;
}

body.page-register .register-wizard-head {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1005;
    display: flex;
    align-items: flex-start;
    gap: 0;
    margin: 0;
    padding: var(--register-wizard-rail-inset-top, max(20px, env(safe-area-inset-top, 0px)))
        max(24px, env(safe-area-inset-right, 0px))
        calc(var(--register-wizard-step-label-size, 12px) + 12px)
        max(16px, env(safe-area-inset-left, 0px));
    box-sizing: border-box;
    background: transparent !important;
    background-color: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: none !important;
    border-bottom: none !important;
    border-radius: 0;
    box-shadow: none !important;
    min-width: 0;
    max-width: none;
    width: 100%;
    transform: none;
}

/* Desktop: Kinma in der Progress-Zeile ausgeblendet (settings-controls links) */
body.page-register .register-wizard-progress-carousel {
    width: 100%;
    overflow: visible;
}

body.page-register .register-wizard-progress-carousel__track {
    display: flex;
    align-items: flex-start;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

body.page-register .register-wizard-progress-carousel__track > .register-wizard-steps {
    flex: 1 1 auto;
    min-width: 0;
}

body.page-register .register-wizard-head__kinma {
    display: none;
    flex: 0 0 auto;
    width: 0;
    min-width: 0;
    overflow: hidden;
    margin: 0;
    padding: 0;
}

body.page-register .register-wizard-head__progress {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
}

/* Nav: seitliche Icon-Buttons (Desktop) — Mobile: register-wizard-layout.css */
@media (min-width: 1025px) {
body.page-register .register-wizard-buttons-island {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    transform: none;
    width: auto;
    max-width: none;
    min-width: 0;
    margin: 0;
    padding: 0;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    gap: 0;
    pointer-events: none;
    z-index: 1000;
}

body.page-register .register-wizard-buttons {
    display: block;
    width: 100%;
    height: 0;
    margin: 0;
    padding: 0;
    gap: 0;
    pointer-events: none;
}

body.page-register .register-wizard-buttons .btn {
    position: fixed;
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
    pointer-events: auto;
    margin: 0;
    z-index: 1001;
}

body.page-register .register-wizard-buttons .btn-prev {
    left: max(24px, env(safe-area-inset-left, 0px));
    right: auto;
}

body.page-register .register-wizard-buttons .btn-next,
body.page-register .register-wizard-buttons .btn-submit {
    right: max(24px, env(safe-area-inset-right, 0px));
    left: auto;
}
}

/* Account step: same symmetric pills as Grunddaten (inner fields stay borderless in wrappers) */
body.page-register .register-account-step__form .wizard-form-group .phone-input-container:not(.login-identifier-phone-container),
body.page-register .register-account-step__form .wizard-form-group input[type="text"],
body.page-register .register-account-step__form .wizard-form-group input[type="email"],
body.page-register .register-account-step__form .wizard-form-group input[type="password"] {
    border: 1.5px solid var(--register-input-border, #e9ecef) !important;
    border-bottom: 1.5px solid var(--register-input-border, #e9ecef) !important;
    background: var(--register-input-bg, #ffffff) !important;
    padding: 14px !important;
    border-radius: var(--register-input-radius) !important;
}

body.page-register .register-account-step__form .login-identifier-input-wrap .input-field {
    border: none !important;
    background: transparent !important;
    padding: 14px !important;
}

body.page-register .register-account-step__form .login-identifier-phone-container.phone-input-container {
    padding: 0 !important;
    overflow: visible !important;
}

body.page-register .register-account-step__form .login-identifier-phone-container .phone-number-input {
    border: none !important;
    background: transparent !important;
    padding: 0 40px 0 8px !important;
}

/* E-Mail-Modus: eine Outline am Wrap */
body.page-register .register-account-step__form .login-identifier-input-wrap:not(.login-identifier-input-wrap--phone-mode) {
    border: 1.5px solid var(--register-input-border, #e9ecef) !important;
    border-bottom: 1.5px solid var(--register-input-border, #e9ecef) !important;
    background: var(--register-input-bg, #ffffff) !important;
    border-radius: var(--register-input-radius) !important;
}

/* Telefon-Modus: Outline nur an der Telefon-Pille, nicht am Wrap */
body.page-register .register-account-step__form .login-identifier-input-wrap--phone-mode {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

body.page-register .register-account-step__form .login-identifier-input-wrap--phone-mode .login-identifier-phone-container.phone-input-container {
    border: 1.5px solid var(--register-input-border, #e9ecef) !important;
    border-bottom: 1.5px solid var(--register-input-border, #e9ecef) !important;
    background: var(--register-input-bg, #ffffff) !important;
    border-radius: var(--register-input-radius) !important;
}

body.page-register .register-account-step__form .password-input-wrapper {
    border: 1.5px solid var(--register-input-border, #e9ecef) !important;
    background: var(--register-input-bg, #ffffff) !important;
    border-radius: var(--register-input-radius) !important;
    overflow: hidden !important;
}

body.page-register .register-account-step__form .password-input-wrapper.password-input-wrapper--has-toggle .input-field {
    border-radius: var(--register-input-radius) !important;
    padding-right: 52px !important;
}

body.page-register
    .register-account-step__form
    .password-input-wrapper:not(.password-input-wrapper--has-toggle):not(.password-input-wrapper--has-clear)
    .input-field {
    border-radius: var(--register-input-radius) !important;
    padding-right: 14px !important;
}

body.page-register
    .register-account-step__form
    .password-input-wrapper:has(.login-clear-btn--password:not([hidden]))
    .input-field,
body.page-register
    .register-account-step__form
    .password-input-wrapper.password-input-wrapper--has-clear
    .input-field {
    padding-right: var(--password-field-actions-width, 90px) !important;
}

body.page-register .register-account-step__form .password-input-wrapper {
    position: relative;
}

body.page-register #register_step1_oauth.register-step-reveal.is-visible {
    max-height: 320px;
}

/* Identifier embed phone — beat style.css .phone-input-* (reload / draft restore) */
body.page-register .register-account-step__form .login-identifier-input-wrap.login-identifier-input-wrap--phone-mode {
    overflow: visible !important;
}

body.page-register .register-account-step__form .login-identifier-input-wrap--phone-mode .login-identifier-phone-slot {
    display: flex !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    overflow: visible !important;
}

body.page-register .register-account-step__form .login-identifier-input-wrap--phone-mode .login-identifier-phone-slot .login-identifier-phone-container {
    width: 100% !important;
}

body.page-register .register-account-step__form .login-identifier-input-wrap--phone-mode .login-identifier-phone-container.phone-input-container:not(.invalid):not(.valid):not(.validating):not(:has(.phone-number-input.invalid)):not(:has(.phone-number-input.valid)):not(:has(.phone-number-input.validating)) {
    display: flex !important;
    align-items: stretch !important;
    gap: 0 !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1.5px solid var(--register-input-border, #e9ecef) !important;
    border-bottom: 1.5px solid var(--register-input-border, #e9ecef) !important;
    border-radius: var(--register-input-radius) !important;
    background: var(--register-input-bg, #ffffff) !important;
    box-shadow: none !important;
    outline: none !important;
    overflow: visible !important;
    min-height: var(--login-identifier-row-height, 48px) !important;
    max-height: var(--login-identifier-row-height, 48px) !important;
}

body.page-register .register-account-step__form .login-identifier-input-wrap--phone-mode .login-identifier-phone-container.phone-input-container {
    display: flex !important;
    align-items: stretch !important;
    gap: 0 !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: var(--register-input-radius) !important;
    overflow: visible !important;
    min-height: var(--login-identifier-row-height, 48px) !important;
    max-height: var(--login-identifier-row-height, 48px) !important;
}

body.page-register .register-account-step__form .login-identifier-input-wrap--phone-mode .login-identifier-phone-container .phone-input-inner {
    display: flex !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: 100% !important;
    align-items: center !important;
    overflow: hidden !important;
    border-radius: inherit !important;
    gap: 0 !important;
}

body.page-register .register-account-step__form .login-identifier-input-wrap--phone-mode .login-identifier-phone-container .phone-country-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 0 10px !important;
    margin: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    flex-shrink: 0 !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

body.page-register .register-account-step__form .login-identifier-input-wrap--phone-mode .login-identifier-phone-container .phone-number-input,
body.page-register .register-account-step__form .login-identifier-input-wrap--phone-mode .login-identifier-phone-container .phone-number-input.input-field {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: auto !important;
    padding: 0 40px 0 8px !important;
    margin: 0 !important;
    border: none !important;
    border-bottom: none !important;
    background: transparent !important;
    font-size: 16px !important;
    line-height: 1.25 !important;
    min-height: 0 !important;
    height: auto !important;
    align-self: center !important;
    box-shadow: none !important;
    outline: none !important;
}

body.page-register .register-account-step__form .login-identifier-input-wrap--phone-mode .login-clear-btn--identifier {
    z-index: 4 !important;
}

/* Google account already exists — login prompt modal (kein backdrop-filter: volle Seite würde sonst ruckeln) */
.google-register-exists-backdrop.open {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(15, 23, 42, 0.55);
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.google-register-exists-backdrop.backdrop-fade-out {
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

body.google-register-exists-modal-open {
    overflow: hidden;
}

.google-register-exists-dialog {
    position: relative;
    width: 100%;
    max-width: min(380px, calc(100vw - 32px));
    margin: 0 auto;
    padding: 28px 24px 22px;
    text-align: center;
    background: #ffffff;
    border-radius: 20px;
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.18);
    border: 1px solid rgba(15, 23, 42, 0.06);
    box-sizing: border-box;
    contain: layout style paint;
}

.google-register-exists-dialog__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    background: none;
    border: none;
}

.google-register-exists-dialog__icon svg {
    display: block;
}

.google-register-exists-dialog__text {
    margin: 0 0 22px;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.5;
    color: #1f2937;
    letter-spacing: -0.01em;
}

.google-register-exists-dialog__text .login-google-word {
    display: inline;
    font-weight: 600;
}

.google-register-exists-dialog .login-google-word .login-google-letter:nth-child(6n + 1) {
    color: #4285f4;
}

.google-register-exists-dialog .login-google-word .login-google-letter:nth-child(6n + 2) {
    color: #ea4335;
}

.google-register-exists-dialog .login-google-word .login-google-letter:nth-child(6n + 3) {
    color: #fbbc05;
}

.google-register-exists-dialog .login-google-word .login-google-letter:nth-child(6n + 4) {
    color: #4285f4;
}

.google-register-exists-dialog .login-google-word .login-google-letter:nth-child(6n + 5) {
    color: #34a853;
}

.google-register-exists-dialog .login-google-word .login-google-letter:nth-child(6n + 6) {
    color: #ea4335;
}

.google-register-exists-dialog__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    width: 100%;
}

.google-register-exists-dialog__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 11px 18px;
    border-radius: 9999px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none !important;
    text-underline-offset: unset;
    border: 1.5px solid transparent;
    cursor: pointer;
    box-sizing: border-box;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}

.google-register-exists-dialog__btn:focus {
    outline: none;
}

.google-register-exists-dialog__btn:focus-visible {
    outline: 2px solid #1a1a1a;
    outline-offset: 2px;
}

.google-register-exists-dialog__btn--yes {
    background: #1a1a1a;
    color: #ffffff;
    border-color: #1a1a1a;
}

.google-register-exists-dialog__btn--yes:hover {
    background: #2d2d2d;
    border-color: #2d2d2d;
    color: #ffffff;
}

.google-register-exists-dialog__btn--no {
    background: #ffffff;
    color: #374151;
    border-color: #e5e7eb;
}

.google-register-exists-dialog__btn--no:hover {
    background: #f9fafb;
    border-color: #d1d5db;
}

body.dark-mode .google-register-exists-backdrop.open {
    background: rgba(0, 0, 0, 0.72);
}

body.dark-mode .google-register-exists-dialog {
    background: #1f2937;
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.45);
}

body.dark-mode .google-register-exists-dialog__text {
    color: #f3f4f6;
}

body.dark-mode .google-register-exists-dialog__btn--yes {
    background: #f9fafb;
    color: #111827;
    border-color: #f9fafb;
}

body.dark-mode .google-register-exists-dialog__btn--yes:hover {
    background: #ffffff;
    color: #111827;
}

body.dark-mode .google-register-exists-dialog__btn--no {
    background: transparent;
    color: #e5e7eb;
    border-color: #4b5563;
}

body.dark-mode .google-register-exists-dialog__btn--no:hover {
    background: #374151;
    border-color: #6b7280;
}

@media (max-width: 360px) {
    .google-register-exists-dialog__actions {
        grid-template-columns: 1fr;
    }
}

/* ─── Reload / Boot: Pop-in wie Login (kinma-login-enter-pop aus login-page.css) ─── */
body.page-register.kinma-register-wizard-enter:not(.kinma-register-wizard-restoring):not(.kinma-google-oauth-busy)
    .settings-logo-group,
body.page-register.kinma-register-wizard-enter:not(.kinma-register-wizard-restoring):not(.kinma-google-oauth-busy)
    .left-nav-cluster--auth,
body.page-register.kinma-register-wizard-enter:not(.kinma-register-wizard-restoring):not(.kinma-google-oauth-busy)
    #chatPopup.chat-popup,
body.page-register.kinma-register-wizard-enter:not(.kinma-register-wizard-restoring):not(.kinma-google-oauth-busy)
    #kinma-hw-accel-nav-island,
body.page-register.kinma-register-wizard-enter:not(.kinma-register-wizard-restoring):not(.kinma-google-oauth-busy)
    .register-wizard-head__progress,
body.page-register.kinma-register-wizard-enter:not(.kinma-register-wizard-restoring):not(.kinma-google-oauth-busy)
    #registerForm
    .wizard-content__stage
    > div.wizard-step-slide-current.register-wizard-step-account
    .register-account-step
    > h1.login-page__title,
body.page-register.kinma-register-wizard-enter:not(.kinma-register-wizard-restoring):not(.kinma-google-oauth-busy)
    #registerForm
    .wizard-content__stage
    > div.wizard-step-slide-current.register-wizard-step-account
    .register-account-step
    > .links.auth-account-switch-links,
body.page-register.kinma-register-wizard-enter:not(.kinma-register-wizard-restoring):not(.kinma-google-oauth-busy)
    #registerForm
    .wizard-content__stage
    > div.wizard-step-slide-current.register-wizard-step-account
    .register-account-step__form
    > .wizard-form-group.login-identifier-group
    > label,
body.page-register.kinma-register-wizard-enter:not(.kinma-register-wizard-restoring):not(.kinma-google-oauth-busy)
    #registerForm
    .wizard-content__stage
    > div.wizard-step-slide-current.register-wizard-step-account
    .login-identifier-field-with-actions
    > .login-identifier-input-wrap,
body.page-register.kinma-register-wizard-enter:not(.kinma-register-wizard-restoring):not(.kinma-google-oauth-busy)
    #registerForm
    .wizard-content__stage
    > div.wizard-step-slide-current.register-wizard-step-account
    #register_step1_password.is-visible
    > .wizard-form-group,
body.page-register.kinma-register-wizard-enter:not(.kinma-register-wizard-restoring):not(.kinma-google-oauth-busy)
    #registerForm
    .wizard-content__stage
    > div.wizard-step-slide-current.register-wizard-step-account
    #register_step1_password_confirm.is-visible
    > .wizard-form-group,
body.page-register.kinma-register-wizard-enter:not(.kinma-register-wizard-restoring):not(.kinma-google-oauth-busy)
    #registerForm
    .wizard-content__stage
    > div.wizard-step-slide-current.register-wizard-step-account
    #register_step1_oauth.is-visible,
body.page-register.kinma-register-wizard-enter:not(.kinma-register-wizard-restoring):not(.kinma-google-oauth-busy)
    #registerForm
    .wizard-content__stage
    > div.wizard-step-slide-current.register-wizard-step-account
    #register_step1_checkboxes.is-visible,
body.page-register.kinma-register-wizard-enter:not(.kinma-register-wizard-restoring):not(.kinma-google-oauth-busy)
    #registerForm
    .wizard-content__stage
    > div.wizard-step-slide-current.wizard-step-grunddaten
    .name-preview-container--register-grunddaten,
body.page-register.kinma-register-wizard-enter:not(.kinma-register-wizard-restoring):not(.kinma-google-oauth-busy)
    #registerForm
    .wizard-content__stage
    > div.wizard-step-slide-current.wizard-step-grunddaten
    .register-name-fields-row,
body.page-register.kinma-register-wizard-enter:not(.kinma-register-wizard-restoring):not(.kinma-google-oauth-busy)
    #registerForm
    .wizard-content__stage
    > div.wizard-step-slide-current.wizard-step-grunddaten
    .register-birth-gender-row,
body.page-register.kinma-register-wizard-enter:not(.kinma-register-wizard-restoring):not(.kinma-google-oauth-busy)
    #registerForm
    .wizard-content__stage
    > div.wizard-step-slide-current.wizard-step-grunddaten
    [data-kinma-origin-map-group],
body.page-register.kinma-register-wizard-enter:not(.kinma-register-wizard-restoring):not(.kinma-google-oauth-busy)
    #registerForm
    .wizard-content__stage
    > div.wizard-step-slide-current:not(.register-wizard-step-account):not(.wizard-step-grunddaten):not(
        :has(#profile-preview-wrapper)
    )
    .file-uploads-form-group__heading,
body.page-register.kinma-register-wizard-enter:not(.kinma-register-wizard-restoring):not(.kinma-google-oauth-busy)
    #registerForm
    .wizard-content__stage
    > div.wizard-step-slide-current:not(.register-wizard-step-account):not(.wizard-step-grunddaten):not(
        :has(#profile-preview-wrapper)
    )
    .file-uploads-slots-media,
body.page-register.kinma-register-wizard-enter:not(.kinma-register-wizard-restoring):not(.kinma-google-oauth-busy)
    #registerForm
    .wizard-content__stage
    > div.wizard-step-slide-current:not(.register-wizard-step-account):not(.wizard-step-grunddaten):not(
        :has(#profile-preview-wrapper)
    )
    .file-upload-area.file-upload-area--documents,
body.page-register.kinma-register-wizard-enter:not(.kinma-register-wizard-restoring):not(.kinma-google-oauth-busy)
    #registerForm
    .wizard-content__stage
    > div.wizard-step-slide-current:has(#profile-preview-wrapper)
    #profile-preview-wrapper {
    animation: kinma-login-enter-pop 0.5s cubic-bezier(0.22, 1.12, 0.36, 1) both;
    animation-delay: var(--kinma-register-enter-delay, 0ms);
}

/* Side nav: own keyframes — must preserve translateY(-50%) centering (conflicts with kinma-login-enter-pop). */
@keyframes kinma-register-nav-prev-enter {
    from {
        opacity: 0;
        transform: translate3d(-10px, -50%, 0) scale(0.94);
    }
    to {
        opacity: 1;
        transform: translate3d(0, -50%, 0) scale(1);
    }
}

@keyframes kinma-register-nav-next-enter {
    from {
        opacity: 0;
        transform: translate3d(10px, -50%, 0) scale(0.94);
    }
    to {
        opacity: 1;
        transform: translate3d(0, -50%, 0) scale(1);
    }
}

body.page-register.kinma-register-wizard-enter:not(.kinma-register-wizard-restoring):not(.kinma-google-oauth-busy)
    .register-wizard-buttons
    .wizard-nav-btn--prev:not(.is-wizard-nav-hidden):not(.hidden) {
    animation: kinma-register-nav-prev-enter 0.5s cubic-bezier(0.22, 1.12, 0.36, 1) both !important;
    animation-delay: var(--kinma-register-nav-enter-delay, 520ms) !important;
}

body.page-register.kinma-register-wizard-enter:not(.kinma-register-wizard-restoring):not(.kinma-google-oauth-busy)
    .register-wizard-buttons
    .wizard-nav-btn--next:not(.is-wizard-nav-hidden):not(.hidden),
body.page-register.kinma-register-wizard-enter:not(.kinma-register-wizard-restoring):not(.kinma-google-oauth-busy)
    .register-wizard-buttons
    .wizard-nav-btn--submit:not(.is-wizard-nav-hidden):not(.hidden) {
    animation: kinma-register-nav-next-enter 0.5s cubic-bezier(0.22, 1.12, 0.36, 1) both !important;
    animation-delay: var(--kinma-register-nav-enter-delay, 520ms) !important;
}

body.page-register.kinma-register-wizard-enter:not(.kinma-register-wizard-restoring):not(.kinma-google-oauth-busy)
    .settings-logo-group {
    --kinma-register-enter-delay: 0ms;
}

body.page-register.kinma-register-wizard-enter:not(.kinma-register-wizard-restoring):not(.kinma-google-oauth-busy)
    .left-nav-cluster--auth {
    --kinma-register-enter-delay: 60ms;
}

body.page-register.kinma-register-wizard-enter:not(.kinma-register-wizard-restoring):not(.kinma-google-oauth-busy)
    #chatPopup.chat-popup {
    --kinma-register-enter-delay: 90ms;
}

body.page-register.kinma-register-wizard-enter:not(.kinma-register-wizard-restoring):not(.kinma-google-oauth-busy)
    #kinma-hw-accel-nav-island {
    --kinma-register-enter-delay: 120ms;
}

body.page-register.kinma-register-wizard-enter:not(.kinma-register-wizard-restoring):not(.kinma-google-oauth-busy)
    .register-wizard-head__progress {
    --kinma-register-enter-delay: 140ms;
}

body.page-register.kinma-register-wizard-enter:not(.kinma-register-wizard-restoring):not(.kinma-google-oauth-busy)
    #registerForm
    .wizard-content__stage
    > div.wizard-step-slide-current.register-wizard-step-account
    .register-account-step
    > h1.login-page__title {
    --kinma-register-enter-delay: 180ms;
}

body.page-register.kinma-register-wizard-enter:not(.kinma-register-wizard-restoring):not(.kinma-google-oauth-busy)
    #registerForm
    .wizard-content__stage
    > div.wizard-step-slide-current.register-wizard-step-account
    .register-account-step
    > .links.auth-account-switch-links {
    --kinma-register-enter-delay: 240ms;
}

body.page-register.kinma-register-wizard-enter:not(.kinma-register-wizard-restoring):not(.kinma-google-oauth-busy)
    #registerForm
    .wizard-content__stage
    > div.wizard-step-slide-current.register-wizard-step-account
    .register-account-step__form
    > .wizard-form-group.login-identifier-group
    > label {
    --kinma-register-enter-delay: 300ms;
}

body.page-register.kinma-register-wizard-enter:not(.kinma-register-wizard-restoring):not(.kinma-google-oauth-busy)
    #registerForm
    .wizard-content__stage
    > div.wizard-step-slide-current.register-wizard-step-account
    .login-identifier-field-with-actions
    > .login-identifier-input-wrap {
    --kinma-register-enter-delay: 330ms;
}

body.page-register.kinma-register-wizard-enter:not(.kinma-register-wizard-restoring):not(.kinma-google-oauth-busy)
    #registerForm
    .wizard-content__stage
    > div.wizard-step-slide-current.register-wizard-step-account
    #register_step1_password.is-visible
    > .wizard-form-group {
    --kinma-register-enter-delay: 380ms;
}

body.page-register.kinma-register-wizard-enter:not(.kinma-register-wizard-restoring):not(.kinma-google-oauth-busy)
    #registerForm
    .wizard-content__stage
    > div.wizard-step-slide-current.register-wizard-step-account
    #register_step1_password_confirm.is-visible
    > .wizard-form-group {
    --kinma-register-enter-delay: 450ms;
}

/* Reveal-Wrapper nicht gleichzeitig mit Enter-Pop animieren (Transform-Konflikt) */
body.page-register.kinma-register-wizard-enter:not(.kinma-register-wizard-restoring):not(.kinma-google-oauth-busy)
    #registerForm
    .wizard-content__stage
    > div.wizard-step-slide-current.register-wizard-step-account
    #register_step1_password.is-visible,
body.page-register.kinma-register-wizard-enter:not(.kinma-register-wizard-restoring):not(.kinma-google-oauth-busy)
    #registerForm
    .wizard-content__stage
    > div.wizard-step-slide-current.register-wizard-step-account
    #register_step1_password_confirm.is-visible {
    transition: none !important;
    transform: translateY(0) !important;
}

body.page-register.kinma-register-wizard-enter:not(.kinma-register-wizard-restoring):not(.kinma-google-oauth-busy)
    #registerForm
    .wizard-content__stage
    > div.wizard-step-slide-current.register-wizard-step-account
    #register_step1_oauth.is-visible {
    --kinma-register-enter-delay: 440ms;
}

body.page-register.kinma-register-wizard-enter:not(.kinma-register-wizard-restoring):not(.kinma-google-oauth-busy)
    #registerForm
    .wizard-content__stage
    > div.wizard-step-slide-current.register-wizard-step-account
    #register_step1_checkboxes.is-visible {
    --kinma-register-enter-delay: 500ms;
}

body.page-register.kinma-register-wizard-enter:not(.kinma-register-wizard-restoring):not(.kinma-google-oauth-busy)
    #registerForm
    .wizard-content__stage
    > div.wizard-step-slide-current.wizard-step-grunddaten
    .name-preview-container--register-grunddaten {
    --kinma-register-enter-delay: 180ms;
}

body.page-register.kinma-register-wizard-enter:not(.kinma-register-wizard-restoring):not(.kinma-google-oauth-busy)
    #registerForm
    .wizard-content__stage
    > div.wizard-step-slide-current.wizard-step-grunddaten
    .register-name-fields-row {
    --kinma-register-enter-delay: 300ms;
}

body.page-register.kinma-register-wizard-enter:not(.kinma-register-wizard-restoring):not(.kinma-google-oauth-busy)
    #registerForm
    .wizard-content__stage
    > div.wizard-step-slide-current.wizard-step-grunddaten
    .register-birth-gender-row {
    --kinma-register-enter-delay: 380ms;
}

body.page-register.kinma-register-wizard-enter:not(.kinma-register-wizard-restoring):not(.kinma-google-oauth-busy)
    #registerForm
    .wizard-content__stage
    > div.wizard-step-slide-current.wizard-step-grunddaten
    [data-kinma-origin-map-group] {
    --kinma-register-enter-delay: 460ms;
}

body.page-register.kinma-register-wizard-enter:not(.kinma-register-wizard-restoring):not(.kinma-google-oauth-busy)
    #registerForm
    .wizard-content__stage
    > div.wizard-step-slide-current:not(.register-wizard-step-account):not(.wizard-step-grunddaten):not(
        :has(#profile-preview-wrapper)
    )
    .file-uploads-form-group__heading {
    --kinma-register-enter-delay: 180ms;
}

body.page-register.kinma-register-wizard-enter:not(.kinma-register-wizard-restoring):not(.kinma-google-oauth-busy)
    #registerForm
    .wizard-content__stage
    > div.wizard-step-slide-current:not(.register-wizard-step-account):not(.wizard-step-grunddaten):not(
        :has(#profile-preview-wrapper)
    )
    .file-uploads-slots-media {
    --kinma-register-enter-delay: 320ms;
}

body.page-register.kinma-register-wizard-enter:not(.kinma-register-wizard-restoring):not(.kinma-google-oauth-busy)
    #registerForm
    .wizard-content__stage
    > div.wizard-step-slide-current:not(.register-wizard-step-account):not(.wizard-step-grunddaten):not(
        :has(#profile-preview-wrapper)
    )
    .file-upload-area.file-upload-area--documents {
    --kinma-register-enter-delay: 420ms;
}

body.page-register.kinma-register-wizard-enter:not(.kinma-register-wizard-restoring):not(.kinma-google-oauth-busy)
    #registerForm
    .wizard-content__stage
    > div.wizard-step-slide-current:has(#profile-preview-wrapper)
    #profile-preview-wrapper {
    --kinma-register-enter-delay: 200ms;
}

/* Nav pop-in timing — stagger after last content block of each section */
body.page-register.kinma-register-wizard-enter:not(.kinma-register-wizard-restoring):not(.kinma-google-oauth-busy):has(
        #registerForm .wizard-content__stage > div.wizard-step-slide-current.register-wizard-step-account
    )
    .register-wizard-buttons
    .wizard-nav-btn:not(.is-wizard-nav-hidden):not(.hidden) {
    --kinma-register-nav-enter-delay: 520ms;
}

body.page-register.kinma-register-wizard-enter:not(.kinma-register-wizard-restoring):not(.kinma-google-oauth-busy):has(
        #registerForm .wizard-content__stage > div.wizard-step-slide-current.wizard-step-grunddaten
    )
    .register-wizard-buttons
    .wizard-nav-btn:not(.is-wizard-nav-hidden):not(.hidden) {
    --kinma-register-nav-enter-delay: 460ms;
}

body.page-register.kinma-register-wizard-enter:not(.kinma-register-wizard-restoring):not(.kinma-google-oauth-busy):has(
        #registerForm .wizard-content__stage > div.wizard-step-slide-current:has(#profile-preview-wrapper)
    )
    .register-wizard-buttons
    .wizard-nav-btn:not(.is-wizard-nav-hidden):not(.hidden) {
    --kinma-register-nav-enter-delay: 480ms;
}

@media (prefers-reduced-motion: reduce) {
    body.page-register.kinma-register-wizard-enter .settings-logo-group,
    body.page-register.kinma-register-wizard-enter .left-nav-cluster--auth,
    body.page-register.kinma-register-wizard-enter #chatPopup.chat-popup,
    body.page-register.kinma-register-wizard-enter #kinma-hw-accel-nav-island,
    body.page-register.kinma-register-wizard-enter .register-wizard-head__progress,
    body.page-register.kinma-register-wizard-enter .register-wizard-buttons .wizard-nav-btn,
    body.page-register.kinma-register-wizard-enter #registerForm .wizard-content__stage > div.wizard-step-slide-current * {
        animation: none !important;
    }
}

/* WebKit autofill does not fire input/change — hook via zero-duration animation. */
@keyframes kinma-onAutoFillStart {
    from {
        opacity: 1;
    }
    to {
        opacity: 1;
    }
}

body.page-register [data-kinma-auth-identifier-email]:-webkit-autofill {
    animation-name: kinma-onAutoFillStart;
    animation-duration: 0.001s;
}