/**
 * FM Basely Onboarding Frontend Styles
 * Version: 0.9.0
 *
 * This file contains all styles for the multi-step onboarding form.
 * It uses CSS variables derived from the DESIGN-TOKENS.md documentation
 * to ensure pixel-perfect consistency with the Figma designs.
 */

/* ============================================
   1. FONT DEFINITION
   ============================================ */
/* Note: Font files should be placed in the `assets/fonts/` directory. */
/* Using font-display: optional to prevent 404 errors from showing in console */
@font-face {
    font-family: 'Allotrope';
    font-style: normal;
    font-weight: 350; /* Light */
    font-display: optional;
    src: local('Allotrope Light');
}

@font-face {
    font-family: 'Allotrope';
    font-style: normal;
    font-weight: 400; /* Regular */
    font-display: optional;
    src: local('Allotrope Regular');
}

@font-face {
    font-family: 'Allotrope';
    font-style: normal;
    font-weight: 500; /* Medium/Bold depending on file */
    font-display: optional;
    src: local('Allotrope Medium');
}


/* ============================================
   2. CSS VARIABLES / DESIGN TOKENS
   ============================================ */
:root {
    /* 2.1. Global Colors (Consistent across all breakpoints) */
    --c-primary: #7856FF;
    --c-background: #FAFBFE;
    --c-text-primary: #001D57;
    --c-text-secondary: #1F3B74;
    --c-text-tertiary: #0B2965;
    --c-text-label: #8598C0;
    --c-white: #FFFFFF;

    --c-button-primary-bg: var(--c-primary);
    --c-button-primary-text: var(--c-white);
    --c-button-tag-border: #E3DCFD;

    --c-toggle-active-bg: #E8FFE5;
    --c-toggle-active-border: #85FF77;
    --c-toggle-inactive-bg: transparent;
    --c-toggle-inactive-border: #D4D7E0;

    --c-input-bg: var(--c-white);
    --c-input-border: #C4D2F0;
    --c-input-border-focus: var(--c-primary);
    --c-input-text: var(--c-text-primary);
    --c-input-placeholder: var(--c-text-label);

    --c-checkbox-unchecked-bg: #FCFCFF;
    --c-checkbox-unchecked-border: var(--c-primary);
    --c-checkbox-checked-bg: var(--c-toggle-active-bg);
    --c-checkbox-checked-border: var(--c-toggle-active-border);

    --c-stepper-active: var(--c-primary);
    --c-stepper-inactive: #ECEFF7;
    --c-stepper-line: #F3F5FA;

    --c-summary-card-bg: #F1FFEF;
    --c-thank-you-card-bg: linear-gradient(37.25deg, #E8FFE5 -14.12%, #FFFFFF 82.35%);
    --c-thank-you-card-border: var(--c-toggle-active-border);
    --c-form-section-bg: #F8F8F8;
    --c-backdrop-bg: rgba(0, 0, 0, 0.17);

    /* 2.2. Global Typography & Spacing */
    --font-family-fallback: "Inter", "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
    --font-family: 'Allotrope', var(--font-family-fallback);

    /* 2.3. Breakpoint-Specific Tokens (Desktop First) */

    /* Typography */
    --fs-h1: 41.75px;
    --fw-h1: 350;
    --fs-h3: 32px;
    --fw-h3: 400;
    --fs-h3-alt: 25px;
    --fs-h2-thankyou: 35px;
    --fs-p: 14px;
    --fw-p: 400;
    --fs-p-thankyou: 16.83px;
    --fw-p-thankyou: 350;
    --fs-small: 11.83px;
    --fw-small: 350;
    --fs-label: 13px;
    --fw-label: 400;
    --fs-input: 14px;
    --fs-input-placeholder: 13px;
    --fs-button: 15.14px;

    /* Layout & Spacing */
    --card-radius: 75px;
    --card-shadow: 0px 117px 47px rgba(10, 0, 51, 0.01), 0px 66px 39px rgba(10, 0, 51, 0.02), 0px 29px 29px rgba(10, 0, 51, 0.04), 0px 7px 16px rgba(10, 0, 51, 0.05);

    --btn-padding: 8px 15px;
    --btn-radius: 16px;
    --btn-border: 1px solid #F6F6F6;
    --btn-shadow: 36px 29px 18px rgba(0, 0, 0, 0.02), 20px 16px 16px rgba(0, 0, 0, 0.07), 9px 7px 11px rgba(0, 0, 0, 0.11), 2px 2px 6px rgba(0, 0, 0, 0.13);
    --btn-disabled-bg: #F3F5FA;
    --btn-disabled-text: #8598C0;
    --btn-tag-padding: 8px 12px 8px 16px;
    --btn-tag-radius: 8px;

    --input-height: 40px;
    --input-radius: 12px;
    --form-section-radius: 30px;

    --toggle-radius: 12px;
    --toggle-padding: 12px 16px;

    --swatch-radius: 4px;
    --swatch-border-selected: 1.25px solid #DAD1FF;
    --swatch-opacity: 1;

    --checkbox-radius: 4px;
    --checkbox-size: 16px;
}

/* Mobile Breakpoint Overrides */
/* Mobile styles - up to 767px */
@media (max-width: 767px) {
    :root {
        --fs-h3: 23px;
        --fs-h3-alt: 23px;
        --fs-p: 14px;
        --fw-p: 350;
        --fs-small: 14px;
        --fs-label: 12px;
        --fw-label: 350;
        --fs-input-placeholder: 15px;

        --card-radius: 45px;

        --btn-padding: 16px 15px;
        --btn-border: 2px solid #E3DCFD;
        --btn-shadow: 0px 14px 6px rgba(120, 86, 255, 0.02), 0px 8px 5px rgba(120, 86, 255, 0.07), 0px 4px 4px rgba(120, 86, 255, 0.11), 0px 1px 2px rgba(120, 86, 255, 0.13);
        --btn-disabled-bg: #F8F8F8;
        --btn-disabled-text: #A9A8AF;

        --input-height: 48px;
        --input-radius: 16px;
        --form-section-radius: 24px;
        
        --swatch-opacity: 0.3;
    }
}

/* ============================================
   3. BASE & LAYOUT STYLES (WIEDERKEHRENDE ELEMENTE)
   ============================================ */
/* 
 * Diese Styles gelten für alle Steps:
 * - Typography (Überschriften, Subtitles)
 * - Navigation (Topbar, Stepper, Zurück-Button)
 * - Form-Layout (Container, Wrapper)
 */
body {
    background: var(--c-background);
    font-family: var(--font-family);
    margin: 0;
    padding: 0;
    color: var(--c-text-primary);
}

#fm-onboarding-form-wrapper {
    /* The wrapper now assumes it's inside a styled container */
    width: 100%;
    max-width: 100%; /* Verhindert Überlauf */
    box-sizing: border-box;
    overflow: hidden; /* Verhindert, dass Inhalt über Container-Ränder hinausbricht */
}

/* DEPRECATED as of Elementor integration */
/*
.fm-card {
    background: var(--c-white);
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
    width: 100%;
    max-width: 641px;
    box-sizing: border-box;
    position: relative;
}
*/



/* ============================================
   4. INPUT FIELDS GENERAL
   ============================================ */
.fm-input {
    background: #FFFFFF;
}

/* ============================================
   5. HEADER & STEPPER
   ============================================ */
/* Navigation Base-Styling */
/* WICHTIG: Navigation wird initial via inline style="display: none" im Template versteckt */
/* JavaScript zeigt Navigation für Steps 1-6 an, versteckt sie für Step 0 und 7 */
.fm-card-topbar {
    justify-content: space-between;
    align-items: center;
    padding: 24px 40px; /* Consistent padding */
    position: relative;
}

.fm-stepper {
    max-width: 621px;
    margin: 0 auto;
    border-bottom: 2px solid var(--c-stepper-line);
}

.fm-back, .fm-step-count {
    font-size: 12px;
    font-weight: 400;
    color: var(--c-text-label);
}

.fm-back {
    color: var(--c-primary);
    text-decoration: underline;
    cursor: pointer;
    visibility: hidden; /* Hide by default, JS will make it visible */
    outline: none;
    border: none;
}

.fm-back:focus,
.fm-back:active {
    outline: none;
    border: none;
    box-shadow: none;
}
/* JS should add this class on steps > 0 */
.fm-back.is-visible {
    visibility: visible;
}

/* Stepper directly below the topbar - FULL WIDTH (no gaps to box edges) */
.fm-stepper {
    position: relative;
    height: 2px;
    width: 100%; /* Full width of form container */
    margin: -2px 0 0 0; /* overlap border line, NO auto centering */
    background: var(--c-stepper-line);
}

.fm-stepper-active {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: var(--c-stepper-active);
    width: 0%; /* Controlled by JS */
    transition: width 0.4s ease-in-out;
}


/* ============================================
   5. TYPOGRAPHY
   ============================================ */
.fm-h1 {
    font-size: var(--fs-h3); /* Using H3 token as it's the step headline */
    font-weight: var(--fw-h3);
    text-align: center;
    margin: 40px 0;
}


.fm-subtitle {
    font-size: var(--fs-small);
    font-weight: var(--fw-small);
    color: var(--c-text-tertiary);
    text-align: center;
    margin-top: -32px;
    margin-bottom: 24px;
}
.fm-subtitle.small {
    color: var(--c-text-label);
}

/* ============================================
   4. STEP-SPECIFIC STYLES (DESKTOP FIRST)
   Adapted for Elementor Container Integration
   ============================================ */
/* 
 * WICHTIG: Elementor-Container übernimmt:
 * - border-radius (75px)
 * - box-shadow
 * - background
 * Das Plugin-CSS stylt NUR den Inhalt!
 * 
 * STRUKTUR:
 * - Jeder Step hat Desktop-Styles (ab Zeile ~345)
 * - Mobile-Styles folgen im @media-Block (ab Zeile ~1790)
 * - Wiederkehrende Komponenten sind im BASE-Bereich (Zeilen ~165-314)
 */

/* ============================================
   FORM CONTAINER
   ============================================ */
.fm-onboarding-form {
    position: relative;
    width: 100%; /* Flexible Breite - passt sich an Elementor-Container an */
    max-width: 100%; /* Verhindert Überlauf */
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    overflow: hidden; /* Verhindert, dass Inhalt über Container-Ränder hinausbricht */
    transition: height 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* ============================================
   STEP 0: E-Mail-Eingabe (Frontpage) - DESKTOP
   ============================================ */
/* 
 * WICHTIG: Container-Styling (border-radius, box-shadow, background, padding, width, height)
 * wird von Elementor übernommen. Step 0 verwendet Container-ID #fmbaselyformco mit
 * custom CSS für Breite (400px) und border-radius (50px) via JavaScript.
 * 
 * Figma: Frame 319 (Haupt-Container) - 331px × 268px
 * Struktur: Frame 319 > Frame 318 > Frame 317
 */

.form-step[data-step="0"] {
    display: none; /* Hide by default */
}

/* Frame 319 - Haupt-Container für Step 0 Desktop */
/* Step 0: Padding oben 60.5px, unten 60.5px, links/rechts 0px */
/* Content-Breite: 331px */
.form-step[data-step="0"].active {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 60.5px 0 60.5px 0; /* Step 0 Desktop: oben 60.5px, unten 60.5px, links/rechts 0px */
    /* gap: 16px; ENTFERNT - Abstände werden durch margin der einzelnen Elemente gesteuert */
    width: 331px;
    max-width: 100%; /* Verhindert Überlauf bei kleineren Containern */
    /* height: 268px; - wird durch Inhalt bestimmt */
    flex: none;
    order: 0;
    flex-grow: 0;
    margin: 0 auto; /* Zentrierung innerhalb Elementor-Container */
    box-sizing: border-box;
    overflow: hidden; /* Verhindert, dass Inhalt über Container-Ränder hinausbricht */
}

/* Frame 318 - Überschrift-Container mit Überschrift */
/* Überschrift "Jetzt Mitarbeiterportal kostenlos testen" (Desktop) / "Mitarbeiterportal kostenlos testen" (Mobile) */
.form-step[data-step="0"] .fm-h1 {
    /* Frame 318 - Container (nur für Struktur, gap: 32px wird nicht benötigt da nur ein Element) */
    width: 331px;
    max-width: 100%; /* Verhindert Überlauf */
    height: 72px;
    font-family: 'Allotrope';
    font-style: normal;
    font-weight: 400;
    font-size: 30px;
    line-height: 120%; /* or 36px */
    text-align: center;
    color: #001D57;
    margin: 0 0 32px 0; /* Gap: 32px zu Frame 317 (Frame 318 gap in Figma) */
}

/* Überschrift: Desktop-Version anzeigen, Mobile-Version verstecken */
.form-step[data-step="0"] .step0-title-desktop {
    display: inline;
}

.form-step[data-step="0"] .step0-title-mobile {
    display: none;
}

/* Frame 317 - Input & Button Container */
/* WICHTIG: Frame 317 enthält Input (in .form-row) UND Button (außerhalb im HTML) */
/* Input ist Teil von Frame 317 */
.form-step[data-step="0"] .form-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 0; /* Gap wird durch Button margin-top gesteuert */
    width: 331px;
    max-width: 100%; /* Verhindert Überlauf */
    margin: 0; /* Gap wird von Frame 318 margin-bottom: 32px gesteuert */
    box-sizing: border-box;
}

/* Rectangle 80 - Input Field (Empty State) */
.form-step[data-step="0"] input[type="email"] {
    box-sizing: border-box;
    position: relative; /* Statt absolute, da wir kein Overlay brauchen */
    width: 331px;
    max-width: 100%; /* Verhindert Überlauf */
    height: 48px;
    border: 1px solid #C4D2F0;
    border-radius: 16px;
    font-family: 'Allotrope';
    font-style: normal;
    font-weight: 400;
    font-size: 13px;
    line-height: 12px; /* identical to box height, or 92% */
    color: #001D57;
    padding: 18px 0 18px 18.71px;
    flex: none;
    order: 0;
    flex-grow: 0;
}

/* Placeholder "Gewerbliche E-Mail" */
.form-step[data-step="0"] input[type="email"]::placeholder {
    position: relative; /* Statt absolute */
    width: auto;
    height: 12px;
    font-family: 'Allotrope';
    font-style: normal;
    font-weight: 400;
    font-size: 13px;
    line-height: 12px;
    display: flex;
    align-items: center;
    color: #8598C0;
}

/* Rectangle 80 + Rectangle 81 (Filled/Focus State) */
.form-step[data-step="0"] input[type="email"]:focus {
    outline: none;
    border: 1px solid #7856FF;
    /* Rectangle 81 - Innerer Border mit box-shadow simuliert */
    box-shadow: 0 0 0 2px rgba(120, 86, 255, 0.3);
    border-radius: 16px;
}

/* ============================================
   BUTTON: Step 0 Desktop EXKLUSIV
   ============================================ */
/* Button : BEFORE / FILLED (Empty State) - Teil von Frame 317 */
/* Button ist außerhalb .form-row im HTML, aber visuell Teil von Frame 317 (Frame 2) */
/* EXKLUSIV für Step 0 Desktop - Mobile hat eigene Klasse! */
.form-step[data-step="0"] .btn-primary {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 10px;
    width: 331px;
    max-width: 331px; /* Verhindert Verbreiterung */
    height: 48px;
    margin: 16px 0 0 0; /* Gap: 16px zu Input oben (gemäß Bild 1) */
    box-sizing: border-box;
    border-radius: 16px;
    font-family: 'Allotrope', sans-serif;
    font-weight: 400;
    font-size: 15.14px;
    line-height: 12px; /* identical to box height, or 79% */
    letter-spacing: 0.01em;
    text-align: center;
    white-space: nowrap; /* Verhindert Text-Umbruch im Button */
    /* Überschreibt Standard-Button-Farben (z.B. WordPress/Elementor rote Farbe) */
    color: #8598C0 !important; /* Empty State Text-Farbe (wird durch filled state überschrieben) */
}

/* Button Empty State */
.form-step[data-step="0"] .btn-primary.is-disabled {
    padding: 8px 15px !important;
    background: #F3F5FA !important;
    border-radius: 16px;
    border: none !important;
    box-shadow: none !important;
    color: #8598C0 !important; /* Empty State Text-Farbe */
}

/* Button Filled State (Frame 2) */
.form-step[data-step="0"] .btn-primary:not(.is-disabled) {
    box-sizing: border-box;
    padding: 5px 14px !important;
    background: #7856FF !important;
    border: 1px solid #F6F6F6 !important;
    box-shadow: 36px 29px 18px rgba(0, 0, 0, 0.02), 
                20px 16px 16px rgba(0, 0, 0, 0.07), 
                9px 7px 11px rgba(0, 0, 0, 0.11), 
                2px 2px 6px rgba(0, 0, 0, 0.13);
    border-radius: 12px;
    color: #FFFFFF !important; /* Filled State Text-Farbe */
}

/* Button Text (span) - Falls vorhanden, erbt Text-Farbe vom Button */
.form-step[data-step="0"] .btn-primary span {
    color: inherit !important; /* Erbt Text-Farbe vom Button */
    white-space: nowrap; /* Verhindert Text-Umbruch auch in span */
}

/* ============================================
   BUTTON: Steps 1-6 Desktop EXKLUSIV
   ============================================ */
/* Einheitliche Button-Klasse für alle Desktop Steps (1-6) */
/* EXKLUSIV für Steps 1-6 Desktop - Mobile hat eigene Klasse! */
.form-step[data-step="1"] .btn-primary,
.form-step[data-step="2"] .btn-primary,
.form-step[data-step="3"] .btn-primary,
.form-step[data-step="4"] .btn-primary,
.form-step[data-step="5"] .btn-primary,
.form-step[data-step="6"] .btn-primary {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 10px;
    width: 471px;
    max-width: 471px; /* Verhindert Verbreiterung */
    height: 48px;
    box-sizing: border-box;
    border-radius: 16px;
    font-family: 'Allotrope', sans-serif;
    font-weight: 400;
    font-size: 15.14px;
    line-height: 12px; /* identical to box height, or 79% */
    letter-spacing: 0.01em;
    text-align: center;
    white-space: nowrap; /* Verhindert Text-Umbruch im Button */
    /* Überschreibt Standard-Button-Farben (z.B. WordPress/Elementor rote Farbe) */
    color: #8598C0 !important; /* Empty State Text-Farbe (wird durch filled state überschrieben) */
}

/* Button Empty State */
.form-step[data-step="1"] .btn-primary.is-disabled,
.form-step[data-step="2"] .btn-primary.is-disabled,
.form-step[data-step="3"] .btn-primary.is-disabled,
.form-step[data-step="4"] .btn-primary.is-disabled,
.form-step[data-step="5"] .btn-primary.is-disabled,
.form-step[data-step="6"] .btn-primary.is-disabled,
.form-step[data-step="1"] .btn-primary:disabled,
.form-step[data-step="2"] .btn-primary:disabled,
.form-step[data-step="3"] .btn-primary:disabled,
.form-step[data-step="4"] .btn-primary:disabled,
.form-step[data-step="5"] .btn-primary:disabled,
.form-step[data-step="6"] .btn-primary:disabled {
    padding: 8px 15px !important;
    background: #F3F5FA !important;
    border-radius: 16px;
    border: none !important;
    box-shadow: none !important;
    color: #8598C0 !important; /* Empty State Text-Farbe */
}

/* Button Filled State */
.form-step[data-step="1"] .btn-primary:not(.is-disabled):not(:disabled),
.form-step[data-step="2"] .btn-primary:not(.is-disabled):not(:disabled),
.form-step[data-step="3"] .btn-primary:not(.is-disabled):not(:disabled),
.form-step[data-step="4"] .btn-primary:not(.is-disabled):not(:disabled),
.form-step[data-step="5"] .btn-primary:not(.is-disabled):not(:disabled),
.form-step[data-step="6"] .btn-primary:not(.is-disabled):not(:disabled) {
    box-sizing: border-box;
    padding: 8px 15px !important;
    background: #7856FF !important;
    border: 2px solid #E3DCFD !important;
    box-shadow: 0px 14px 6px rgba(120, 86, 255, 0.02),
                0px 8px 5px rgba(120, 86, 255, 0.07),
                0px 4px 4px rgba(120, 86, 255, 0.11),
                0px 1px 2px rgba(120, 86, 255, 0.13);
    border-radius: 16px;
    color: #FFFFFF !important; /* Filled State Text-Farbe */
}

/* Button Text (span) - Falls vorhanden, erbt Text-Farbe vom Button */
.form-step[data-step="1"] .btn-primary span,
.form-step[data-step="2"] .btn-primary span,
.form-step[data-step="3"] .btn-primary span,
.form-step[data-step="4"] .btn-primary span,
.form-step[data-step="5"] .btn-primary span,
.form-step[data-step="6"] .btn-primary span {
    color: inherit !important; /* Erbt Text-Farbe vom Button */
    white-space: nowrap; /* Verhindert Text-Umbruch auch in span */
}

/* Legal Text - direkt in Frame 319, order: 1 (nach Frame 317) */
.form-step[data-step="0"] .fm-legal {
    width: 248px;
    height: 36px;
    font-family: 'Allotrope';
    font-style: normal;
    font-weight: 350;
    font-size: 8px;
    line-height: 12px; /* or 150% */
    text-align: center;
    color: #001D57;
    margin: 16px 0 0 0; /* Gap: 16px zu Button oben (Frame 319 gap: 16px), keine horizontalen Abstände */
}

.form-step[data-step="0"] .fm-legal a {
    color: #001D57;
    text-decoration: underline;
}

/* ============================================
   HEADLINE: Steps 1-6 Desktop - Abstand zu Navigation
   ============================================ */
/* Einheitlicher Abstand zwischen Navigation (Stepper) und Headline für Steps 1-6 Desktop */
.form-step[data-step="1"] .fm-h1,
.form-step[data-step="2"] .fm-h1,
.form-step[data-step="3"] .fm-h1,
.form-step[data-step="4"] .fm-h1,
.form-step[data-step="5"] .fm-h1,
.form-step[data-step="6"] .fm-h1 {
    margin-top: 46px; /* Abstand zwischen Navigation (Stepper) und Headline */
}

/* ============================================
   STEP 1: Firmendaten - DESKTOP
   ============================================ */
.form-step[data-step="1"] {
    display: none; /* Hide by default */
}
.form-step[data-step="1"].active {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    width: 100%; /* Fill the parent form */
    max-width: 100%; /* Verhindert Überlauf */
    padding: 0 0 75px 0; /* Padding unten 75px - Container-Styling wird von Elementor übernommen */
    margin: 0 auto;
    box-sizing: border-box;
    overflow: hidden; /* Verhindert, dass Inhalt über Container-Ränder hinausbricht */
}

.form-step[data-step="1"] .fm-h1 {
    max-width: 471px;
    font-family: 'Allotrope';
    font-style: normal;
    font-weight: 400;
    font-size: 30px;
    line-height: 34px; /* 113% */
    text-align: center;
    color: #001D57;
    margin-bottom: 42px; /* margin-top wird von der einheitlichen Regel übernommen (46px) */
}

.form-step[data-step="1"] .form-grid {
    max-width: 472px;
    display: grid;
    grid-template-columns: 228px 229px;
    gap: 16px 15px;
    margin: 0; /* Kein margin-bottom - Abstand zum Button wird durch Button margin-top gesteuert */
}

/* Form Row: Kein margin-bottom - Abstände werden durch Grid gap gesteuert */
.form-step[data-step="1"] .form-row {
    margin-bottom: 0;
}

.form-step[data-step="1"] input[type="text"],
.form-step[data-step="1"] input[type="url"] {
    box-sizing: border-box;
    height: 40px;
    border: 1px solid #C4D2F0;
    border-radius: 12px;
    font-family: 'Allotrope';
    font-style: normal;
    font-weight: 400;
    font-size: 13px;
    line-height: 12px;
    color: #001D57;
    padding: 0 16px;
}

.form-step[data-step="1"] input::placeholder {
    font-family: 'Allotrope';
    font-style: normal;
    font-weight: 400;
    font-size: 13px;
    line-height: 12px;
    color: #8598C0;
}

.form-step[data-step="1"] input:focus {
    outline: none;
    border: 1px solid #7856FF;
    box-shadow: 0 0 0 2px rgba(120, 86, 255, 0.3);
}

/* Step 1 Button: Alle Styles werden von der einheitlichen Steps 1-6 Desktop-Button-Klasse übernommen */
/* Step-spezifische Margins können hier gesetzt werden, falls nötig */

/* ============================================
   STEP 2: Ansprache - DESKTOP
   ============================================ */
.form-step[data-step="2"] {
    display: none;
}
.form-step[data-step="2"].active {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 100%; /* Verhindert Überlauf */
    padding: 0 0 75px 0; /* Padding unten 75px - Container-Styling wird von Elementor übernommen */
    box-sizing: border-box;
    overflow: hidden; /* Verhindert, dass Inhalt über Container-Ränder hinausbricht */
}

/* Headline - From Figma: 471px × 34px */
.form-step[data-step="2"] .fm-h1 {
    width: 100%;
    max-width: 471px;
    font-family: 'Allotrope';
    font-style: normal;
    font-weight: 400;
    font-size: 30px;
    line-height: 34px; /* 113% */
    text-align: center;
    color: #001D57;
    margin-bottom: 40px; /* margin-top wird von der einheitlichen Regel übernommen (46px) */
}

/* Main content wrapper - Frame 322: 473px × 136px */
/* Abstände: Subtitle → Toggle-Group = 8px (via Subtitle margin-bottom), Toggle-Group 1 → Subtitle 2 = 53px */
.form-step[data-step="2"] .content-wrapper {
    width: 100%;
    max-width: 473px;
    display: flex;
    flex-direction: column;
    gap: 0; /* Abstände werden durch individuelle margin-Werte gesteuert */
    margin: 0 auto 0; /* Abstand zum Button entfernt */
}

/* Subtitle (Question labels) - Within Frame 322 */
/* margin-bottom: 8px = Abstand zwischen Subtitle und Toggle-Buttons */
.form-step[data-step="2"] .fm-subtitle {
    width: 100%;
    font-family: 'Allotrope';
    font-style: normal;
    font-weight: 400;
    font-size: 13px;
    line-height: 12px;
    text-align: center;
    color: #8598C0;
    margin: 0 0 8px 0; /* Abstand zu Toggle-Buttons: 8px */
}

/* Toggle Button Group */
/* Die erste Toggle-Group hat margin-bottom: 53px für Abstand zur zweiten Toggle-Group */
.form-step[data-step="2"] .toggle-group {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 8px;
    width: 100%;
}

/* Erste Toggle-Group: Abstand zur zweiten Toggle-Group = 53px */
.form-step[data-step="2"] .toggle-group:first-of-type {
    margin-bottom: 53px; /* Abstand zwischen den beiden Toggle-Groups */
}

/* Individual Toggle Button */
.form-step[data-step="2"] .toggle-btn {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 8px 20px;
    height: 36px;
    border: 1px solid #D4D7E0;
    border-radius: 12px;
    background: transparent;
    font-family: 'Allotrope';
    font-style: normal;
    font-weight: 400;
    font-size: 11.83px;
    line-height: 13px;
    color: #001D57;
    cursor: pointer;
    transition: all 0.2s ease;
    outline: none; /* Keine eckige Box beim Fokus */
    -webkit-tap-highlight-color: transparent; /* Keine eckige Box auf Mobile */
}

/* Toggle-Button Focus State - Keine eckige Box */
.form-step[data-step="2"] .toggle-btn:focus {
    outline: none;
    box-shadow: none;
}

.form-step[data-step="2"] .toggle-btn:focus-visible {
    outline: none;
    box-shadow: none;
}

/* Toggle Button Active State */
.form-step[data-step="2"] .toggle-btn.active {
    background: #E8FFE5;
    border-color: #85FF77;
}

/* ============================================
   STEP 3: Tonalität - DESKTOP
   ============================================ */
.form-step[data-step="3"] {
    display: none;
}
.form-step[data-step="3"].active {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 100%; /* Verhindert Überlauf */
    padding: 0 0 75px 0; /* Padding unten 75px - Container-Styling wird von Elementor übernommen */
    box-sizing: border-box;
    overflow: hidden; /* Verhindert, dass Inhalt über Container-Ränder hinausbricht */
}

/* Headline */
.form-step[data-step="3"] .fm-h1 {
    width: 100%;
    max-width: 472px;
    font-family: 'Allotrope';
    font-style: normal;
    font-weight: 400;
    font-size: 30px;
    line-height: 34px;
    text-align: center;
    color: #001D57;
    margin-bottom: 8px; /* margin-top wird von der einheitlichen Regel übernommen (46px) */
}

/* Subtitle */
.form-step[data-step="3"] .fm-subtitle {
    width: 100%;
    max-width: 472px;
    font-family: 'Allotrope';
    font-style: normal;
    font-weight: 350;
    font-size: 15px;
    line-height: 142%; /* or 21px */
    text-align: center;
    color: #001D57;
    margin: 0 0 40px 0; /* Gap: 40px zwischen Subtitle und Chip-Group (Frame 383 gap) */
}

/* Chip Group - Frame 252: 379px × 159px */
/* Layout: 3 Zeilen mit spezifischen Breiten nach Figma */
/* Zeile 1: 176px + 12px gap + 172px = 360px (Frame 251) */
/* Zeile 2: 154px + 12px gap + 208px = 374px (Frame 250) */
/* Zeile 3: 156px (allein) */
.form-step[data-step="3"] .chip-group {
    display: grid;
    grid-template-columns: 176px 172px; /* Zeile 1: Freundlich + Professionell */
    grid-template-rows: repeat(3, auto);
    gap: 12px; /* Gap zwischen allen Chips (Frame 252 gap) */
    width: 379px;
    max-width: 100%;
    margin: 0 auto 32px; /* Gap: 32px zwischen Chip-Group und Button (Frame 384 gap) */
    justify-content: center; /* Zentriert die Chips */
}

/* Zeile 1: Freundlich (176px) + Professionell (172px) = 360px */
.form-step[data-step="3"] .chip-group > .chip:nth-child(1) {
    grid-column: 1;
    grid-row: 1;
    width: 176px;
}

.form-step[data-step="3"] .chip-group > .chip:nth-child(2) {
    grid-column: 2;
    grid-row: 1;
    width: 172px;
}

/* Zeile 2: Seriös (154px) + Motivierend (208px) = 374px */
/* Neue Grid-Spalten für Zeile 2 */
.form-step[data-step="3"] .chip-group > .chip:nth-child(3) {
    grid-column: 1;
    grid-row: 2;
    width: 154px;
    justify-self: start; /* Startet links */
}

.form-step[data-step="3"] .chip-group > .chip:nth-child(4) {
    grid-column: 2;
    grid-row: 2;
    width: 208px;
    justify-self: start; /* Startet direkt nach Chip 3 mit 12px gap */
}

/* Zeile 3: Modern (156px) - allein, zentriert */
.form-step[data-step="3"] .chip-group > .chip:nth-child(5) {
    grid-column: 1 / -1; /* Spannt beide Spalten */
    grid-row: 3;
    width: 156px;
    justify-self: center; /* Zentriert */
}

/* Individual Chip - Figma: Verschiedene Breiten, 45px height */
.form-step[data-step="3"] .chip {
    box-sizing: border-box;
    position: relative; /* Für Radio-Button-Icon Positionierung */
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 16px 20px;
    gap: 8px;
    height: 45px;
    border: 1px solid #D4D7E0;
    border-radius: 16px; /* Figma: 16px (nicht 12px!) */
    background: transparent;
    font-family: 'Allotrope';
    font-style: normal;
    font-weight: 400;
    font-size: 11.83px;
    line-height: 12px; /* Figma: 12px (nicht 13px!) */
    text-align: center;
    color: #0B2965; /* Figma: #0B2965 (nicht #001D57!) */
    cursor: pointer;
    transition: all 0.2s ease;
    outline: none; /* Keine eckige Box beim Fokus */
    -webkit-tap-highlight-color: transparent; /* Keine eckige Box auf Mobile */
}

/* Chip Focus State - Keine eckige Box */
.form-step[data-step="3"] .chip:focus {
    outline: none;
    box-shadow: none;
}

.form-step[data-step="3"] .chip:focus-visible {
    outline: none;
    box-shadow: none;
}

/* Chip Active State */
.form-step[data-step="3"] .chip.active {
    background: #E8FFE5;
    border-color: #85FF77;
    color: #0B2965; /* Text-Farbe bleibt gleich */
}

/* Button */
/* Step 3 Button: Alle Styles werden von der einheitlichen Steps 1-6 Desktop-Button-Klasse übernommen */
/* Step-spezifische Margins können hier gesetzt werden, falls nötig */

/* ============================================
   STEP 4: Benefits - DESKTOP
   ============================================ */
.form-step[data-step="4"] {
    display: none;
}
.form-step[data-step="4"].active {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    max-width: 100%; /* Verhindert Überlauf */
    padding: 0 0 75px 0; /* Padding unten 75px - Container-Styling wird von Elementor übernommen */
    box-sizing: border-box;
    overflow: hidden; /* Verhindert, dass Inhalt über Container-Ränder hinausbricht */
}

/* Headline - Figma Frame 328: 472px × 84px, gap: 8px */
.form-step[data-step="4"] .fm-h1 {
    width: 100%;
    max-width: 472px;
    height: 34px; /* Figma: 34px height */
    font-family: 'Allotrope';
    font-style: normal;
    font-weight: 400;
    font-size: 30px;
    margin-top: 46px;
    margin-bottom: 8px;
    line-height: 34px; /* 113% or identical to box height */
    text-align: center;
    color: #001D57;
}

/* Subtitle - Figma: 472px × 42px, gap: 8px */
.form-step[data-step="4"] .fm-subtitle {
    width: 100%;
    max-width: 472px;
    height: 42px; /* Figma: 42px height */
    font-family: 'Allotrope';
    font-style: normal;
    font-weight: 350;
    font-size: 15px;
    line-height: 142%; /* or 21px */
    align-items: center;
    text-align: center;
    color: #001D57; /* Figma: #001D57 (nicht #8598C0!) */
    margin: 0 0 24px 0; /* Gap: 24px zwischen Subtitle und Tabs */
}

/* Tabs - Figma Group 328: 375px × 24px, erhöht auf 475px Breite */
/* NUR für Desktop - Mobile zeigt Category Toggle Buttons */
.form-step[data-step="4"] .tabs {
    position: relative; /* Container für absolut positionierte Tabs */
    width: 475px; /* 375px + 100px erhöht */
    max-width: 100%;
    height: 24px; /* Figma: 24px height */
    margin: 0 auto 24px; /* Gap: 24px zwischen Tabs und Pill-Group */
    box-sizing: border-box;
    overflow: hidden; /* Verhindert, dass Tabs aus der Box ragen */
}

/* Category Toggle Container auf Desktop ausblenden */
.form-step[data-step="4"] .category-toggle-container {
    display: none; /* Nur auf Mobile sichtbar */
}

/* Benefit Modal auf Desktop ausblenden */
.form-step[data-step="4"] .benefit-modal {
    display: none !important; /* Nur auf Mobile sichtbar */
}

/* Desktop/Mobile Text Toggle für Step 4 */
.form-step[data-step="4"] .fm-h1 .desktop-text,
.form-step[data-step="4"] .fm-subtitle .desktop-text {
    display: block;
}

.form-step[data-step="4"] .fm-h1 .mobile-text,
.form-step[data-step="4"] .fm-subtitle .mobile-text {
    display: none;
}

/* Tab Button - Figma: Absolut positioniert */
.form-step[data-step="4"] .tab {
    box-sizing: border-box;
    position: absolute;
    width: auto; /* Wird durch Text-Breite bestimmt */
    height: 24px; /* Figma: 24px height */
    font-family: 'Allotrope';
    font-style: normal;
    font-weight: 350; /* Empty State */
    font-size: 12px;
    line-height: 120%; /* or 14px */
    text-align: center;
    color: #465E8F; /* Empty State */
    background: transparent;
    border: none;
    border-bottom: none; /* Kein Border im Empty State */
    padding: 0;
    cursor: pointer;
    /* Keine Transition/Animation - einfache Umschaltung */
    transition: none;
    outline: none; /* Keine eckige Box beim Fokus */
    -webkit-tap-highlight-color: transparent; /* Keine eckige Box auf Mobile/Touch */
    /* Position wird durch JavaScript oder spezifische Selektoren gesetzt */
}

/* Tab Button Focus State - Keine eckige Box */
.form-step[data-step="4"] .tab:focus {
    outline: none;
    box-shadow: none;
}

.form-step[data-step="4"] .tab:focus-visible {
    outline: none;
    box-shadow: none;
}

/* Tab "Top 12" - Active State */
.form-step[data-step="4"] .tab[data-tab="top"] {
    left: 41.5px; /* Figma: left: 41.5px */
    top: 5px; /* Figma: top: 5px */
    width: 36px; /* Figma: 36px width */
    height: 14px; /* Figma: 14px height */
}

.form-step[data-step="4"] .tab[data-tab="top"].active {
    font-weight: 400;
    color: #001D57;
    background: #E8FFE5;
    border-bottom: 2px solid #85FF77;
    width: 51px; /* Figma: 51px width für Active State */
    height: 24px; /* Figma: 24px height für Active State */
    left: 33.5px; /* Figma: left: 33.5px für Active State */
    top: 0px; /* Figma: top: 0px für Active State */
}

/* Tab "Gesundheit" */
.form-step[data-step="4"] .tab[data-tab="health"] {
    left: 96.5px; /* Figma: left: 96.5px */
    top: 5px; /* Figma: top: 5px */
    width: 60px; /* Figma: 60px width */
    height: 14px; /* Figma: 14px height */
}

/* Tab "Mobilität" */
.form-step[data-step="4"] .tab[data-tab="mobility"] {
    left: 170.5px; /* Figma: left: 170.5px */
    top: 5px; /* Figma: top: 5px */
    width: 47px; /* Figma: 47px width */
    height: 14px; /* Figma: 14px height */
}

/* Tab "Freizeit" */
.form-step[data-step="4"] .tab[data-tab="leisure"] {
    left: 231.5px; /* Figma: left: 231.5px */
    top: 5px; /* Figma: top: 5px */
    width: 39px; /* Figma: 39px width */
    height: 14px; /* Figma: 14px height */
}

/* Tab "Flexibilität" */
.form-step[data-step="4"] .tab[data-tab="flex"] {
    left: 284.5px; /* Figma: left: 284.5px */
    top: 5px; /* Figma: top: 5px */
    width: 55px; /* Figma: 55px width */
    height: 14px; /* Figma: 14px height */
}

/* Tab "Vergütung" */
.form-step[data-step="4"] .tab[data-tab="pay"] {
    left: 353.5px; /* Figma: left: 353.5px */
    top: 5px; /* Figma: top: 5px */
    width: 55px; /* Figma: 55px width */
    height: 14px; /* Figma: 14px height */
}

/* Tab Active State - Allgemeine Styling */
/* Einfacher 1px Border unten bei aktivem Tab - keine Animation */
.form-step[data-step="4"] .tab.active {
    font-weight: 400;
    color: #001D57;
    background: #E8FFE5;
    border-bottom: 2px solid #85FF77 !important; /* Unterer Stripe: 1px Höhe mit #85FF77 - immer sichtbar bei aktivem Tab */
    height: 24px; /* Figma: 24px height für Active State */
    top: 0px; /* Figma: top: 0px für Active State */
    /* Keine Transition/Animation - einfache, sofortige Umschaltung */
    transition: none;
}

/* Tab Active State - ::after entfernt (border-bottom ist jetzt direkt in der Klasse) */
.form-step[data-step="4"] .tab.active::after {
    display: none; /* Entfernt das alte ::after Pseudo-Element - border-bottom ist jetzt direkt in .tab.active */
}

/* Pill Group - Figma: justify-content: center für multi */
.form-step[data-step="4"] .pill-group {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start; /* Default */
    gap: 12px;
    width: 100%;
    max-width: 471px;
    margin: 0 auto 40px; /* Added margin-bottom */
}

/* Pill Group Multi - Zentriert nach Figma */
.form-step[data-step="4"] .pill-group.multi {
    justify-content: center; /* Figma: Zentriert die Pills */
}

.form-step[data-step="4"] .pill {
    border: 1px solid #D4D7E0;
    border-radius: 12px;
    padding: 10px 16px;
    font-size: 11.83px;
    font-weight: 400;
    background-color: transparent;
    color: #001D57;
    text-align: center;
    outline: none; /* Keine eckige Box beim Fokus */
    -webkit-tap-highlight-color: transparent; /* Keine eckige Box auf Mobile/Touch */
    cursor: pointer;
    transition: none; /* Keine Animation */
}

/* Pill Focus State - Keine eckige Box */
.form-step[data-step="4"] .pill:focus {
    outline: none;
    box-shadow: none;
}

.form-step[data-step="4"] .pill:focus-visible {
    outline: none;
    box-shadow: none;
}

.form-step[data-step="4"] .pill.active {
    background: #E8FFE5;
    border: 1px solid #85FF77;
    color: #001D57;
}

/* Step 4 Button: Alle Styles werden von der einheitlichen Steps 1-6 Desktop-Button-Klasse übernommen */
/* Step-spezifische Margins können hier gesetzt werden, falls nötig */
.form-step[data-step="4"] .btn-primary {
    margin-top: auto; /* Auto margin-top für Positionierung am unteren Rand */
}

/* ============================================
   STEP 5: Branding (Logo & Farben) - DESKTOP
   ============================================ */
.form-step[data-step="5"] {
    display: none;
}
.form-step[data-step="5"].active {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    max-width: 100%; /* Verhindert Überlauf */
    padding: 0 0 75px 0; /* Padding unten 75px - Container-Styling wird von Elementor übernommen */
    box-sizing: border-box;
    overflow: hidden; /* Verhindert, dass Inhalt über Container-Ränder hinausbricht */
}

.form-step[data-step="5"] .fm-h1 {
    width: 100%;
    max-width: 471px;
    font-size: 30px;
    line-height: 34px;
    text-align: center;
    color: #001D57;
    margin-bottom: 8px; /* margin-top wird von der einheitlichen Regel übernommen (46px) */
}

.form-step[data-step="5"] .fm-subtitle {
    width: 100%;
    max-width: 471px;
    font-size: 13px;
    line-height: 1.4;
    text-align: center;
    color: #8598C0;
    margin: 0 0;
}

/* Desktop/Mobile Text-Toggle für Step 5 Subtitle */
.form-step[data-step="5"] .fm-subtitle .desktop-text {
    display: block;
}

.form-step[data-step="5"] .fm-subtitle .mobile-text {
    display: none;
}

.form-step[data-step="5"] .upload-section,
.form-step[data-step="5"] .color-section {
    width: 100%;
    max-width: 471px;
    margin: 0 auto;
    position: relative; /* For loading overlay */
}

.form-step[data-step="5"] .upload-section {
    margin-top: 40px; /* Figma: 40px */
    margin-bottom: 12px; /* Figma: 12px */
}

/* Upload Box Title - IN der Upload-Box links - NUR Desktop */
.form-step[data-step="5"] .upload-section:not(.upload-section-mobile) .upload-box-title {
    font-family: 'Allotrope', sans-serif;
    font-size: 13px;
    font-weight: 400;
    color: #465E8F;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Section Title Wrapper - Figma Group 276: 136px × 14px (Icon entfernt) */
/* NUR Desktop - wird auf Mobile durch @media versteckt */
.form-step[data-step="5"] .color-palette-desktop .section-title-wrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 136px; /* Figma: 136px */
    height: 14px; /* Figma: 14px */
    flex: none; /* Figma: flex: none */
    order: 0; /* Figma: order: 0 */
    flex-grow: 0; /* Figma: flex-grow: 0 */
    margin-bottom: 0; /* Position wird absolut gesteuert */
}

/* Section Title - Figma Group 276: 136px × 14px */
/* NUR Desktop - wird auf Mobile durch @media versteckt */
.form-step[data-step="5"] .color-palette-desktop .section-title {
    position: relative; /* Für absolute Positionierung innerhalb */
    width: 136px; /* Figma: 136px */
    height: 14px; /* Figma: 14px */
    font-family: 'Allotrope', sans-serif;
    font-style: normal;
    font-weight: 350;
    font-size: 12px;
    line-height: 120%; /* or 14px */
    color: #465E8F; /* Figma: #465E8F */
    margin: 0;
    padding: 0;
    white-space: nowrap; /* Text bleibt in einer Zeile */
    display: block; /* Desktop: immer sichtbar */
}

/* Upload Box - NUR Desktop (nicht Mobile) */
.form-step[data-step="5"] .upload-section:not(.upload-section-mobile) .upload-box {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    border: 1px solid #C4D2F0;
    border-radius: 16px;
    padding: 12px 16px;
    height: 69px;
    box-sizing: border-box;
    background: #F8F8F8;
}

/* Button "Datei auswählen"/"Ändern" - Figma: button-lila-sub.kontur - RECHTS in Upload-Box */
.form-step[data-step="5"] #fm-upload-btn {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 12px 20px;
    gap: 8px;
    margin: 0; /* Kein margin: 0 auto mehr, da rechts positioniert */
    width: 126px;
    height: 36px;
    background: #F6F4FF;
    border: 1px solid #E3DCFD;
    border-radius: 8px;
    font-family: 'Allotrope', sans-serif;
    font-size: 13px;
    font-weight: 400;
    color: #001D57;
    cursor: pointer;
    transition: none;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    flex-shrink: 0; /* Button bleibt rechts, wird nicht gequetscht */
}

/* Button Disabled State während KI-Analyse */
.form-step[data-step="5"] #fm-upload-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
}

.form-step[data-step="5"] #fm-upload-btn:focus,
.form-step[data-step="5"] #fm-upload-btn:focus-visible {
    outline: none;
    box-shadow: none;
}

/* Logo Placeholder Wrapper - MITTE der Upload-Box, responsive */
.form-step[data-step="5"] #logo-placeholder-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    flex: 1; /* Nimmt verfügbaren Platz zwischen Title und Button */
    min-width: 0; /* Ermöglicht Shrinking */
    height: 45px; /* Feste Höhe für Layout-Konsistenz */
}

/* Logo Placeholder - Unsichtbar, aber mit fester Größe für Layout */
.form-step[data-step="5"] #logo-placeholder {
    visibility: hidden; /* Unsichtbar, aber nimmt Platz ein */
    font-family: 'Allotrope', sans-serif;
    font-size: 12px;
    color: #465E8F;
    max-width: 200px; /* Maximale Breite für responsive Layout */
    max-height: 45px; /* Maximale Höhe */
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Logo Preview Wrapper - Zeigt hochgeladenes Logo, ersetzt Placeholder */
.form-step[data-step="5"] #logo-preview-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 100%;
    height: 100%;
}

/* Logo Preview Image - Größe begrenzt, damit andere Elemente nicht weggeschoben werden */
.form-step[data-step="5"] #logo-preview-img {
    max-height: 45px;
    max-width: 200px; /* Responsive, aber begrenzt */
    width: auto;
    height: auto;
    object-fit: contain; /* Ensures aspect ratio is maintained */
    position: relative; /* Für absolut positioniertes Remove-Button */
}

/* Logo Remove Button - Direkt an der rechten oberen Kante des Logo-Images */
/* Dauerhaft ausgeblendet für Step 5 Desktop */
.form-step[data-step="5"] #logo-remove-btn {
    display: none !important;
}

.form-step[data-step="5"] .logo-remove-btn {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #FF4444;
    color: #FFFFFF;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: all 0.2s ease;
    flex-shrink: 0;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); /* Dezenterer Schatten */
}

/* Mobile Logo Remove Button - Standardmäßig versteckt (wird durch JavaScript angezeigt wenn Logo vorhanden) */
.form-step[data-step="5"] #logo-remove-btn-mobile {
    display: none; /* Standardmäßig versteckt, kann durch JavaScript.show() überschrieben werden */
}

.form-step[data-step="5"] .logo-remove-btn svg {
    width: 10px;
    height: 10px;
    flex-shrink: 0;
}

/* Logo Remove Button - Disabled State während KI-Analyse */
.form-step[data-step="5"] .logo-remove-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* Logo Loading Overlay - Über Logo während KI-Analyse */
.form-step[data-step="5"] #logo-loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.9); /* Leicht transparentes Overlay */
    z-index: 5;
    border-radius: 8px;
}

.form-step[data-step="5"] .logo-remove-btn:hover {
    background: #CC0000;
    transform: scale(1.1);
}

.form-step[data-step="5"] .logo-remove-btn:active {
    transform: scale(0.95);
}

/* Desktop color palette - Figma Group 291/332: 471px × 105px */
/* NUR Desktop - wird auf Mobile durch @media versteckt */
.form-step[data-step="5"] .color-palette-desktop {
    box-sizing: border-box;
    position: relative; /* Für absolut positionierte Elemente */
    width: 471px;
    height: 105px;
    margin-top: 0; /* margin-top entfernt */
    border: 2px solid #F8F8F8; /* Figma: 2px solid #F8F8F8 */
    border-radius: 16px;
    background: transparent;
    padding: 0;
    overflow: visible; /* Swatches dürfen sichtbar sein */
    display: block; /* Desktop: immer sichtbar */
}

/* Mobile color palette (hidden on desktop) */
.form-step[data-step="5"] .color-palette {
    display: none;
}

/* Color Section Loading State - wird durch JavaScript gesteuert */
.form-step[data-step="5"] .color-section.is-loading .color-palette-desktop {
    opacity: 0.5;
    pointer-events: none;
}
/* Loading Spinner entfernt - wird nur über Logo angezeigt */


/* Section Title Position - Figma Frame 277: position: absolute, left: 24px, top: 108.5px */
/* Jetzt ohne margin-top: 81px, daher top: 27.5px vom Container */
/* NUR Desktop - wird auf Mobile durch @media versteckt */
.form-step[data-step="5"] .color-palette-desktop .section-title-wrapper {
    position: absolute;
    left: 24px;
    top: 27.5px;
    z-index: 1000; /* Sehr hoher z-index damit Text über allen anderen Elementen liegt */
    visibility: visible; /* Sicherstellen dass sichtbar */
    opacity: 1; /* Sicherstellen dass nicht transparent */
    display: flex; /* Desktop: immer sichtbar */
    pointer-events: none; /* Nicht klickbar, damit Swatches darunter funktionieren */
}

/* Loading Spinner Desktop - während KI-Analyse an Stelle der Color Pills (mittig zentriert) */
/* Nach Figma Group 330: position: absolute, width: 429px, height: 17px */
.form-step[data-step="5"] .color-palette-desktop #color-ai-loading-desktop {
    position: absolute;
    left: 50%; /* Mittig horizontal */
    top: 54px; /* Gleiche vertikale Position wie Color Swatches */
    transform: translateX(-50%); /* Zentriert horizontal */
    width: 429px; /* Nach Figma: 429px width (Group 330) */
    height: 17px; /* Nach Figma: 17px height (Group 330) */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100;
}

/* Desktop color swatches - Figma: Absolut positioniert, 15-16px × 17px, border-radius: 4px */
.form-step[data-step="5"] .color-palette-desktop .color-swatch {
    box-sizing: border-box;
    position: absolute;
    width: 15px; /* Default, wird durch JavaScript für einzelne Swatches angepasst */
    height: 17px; /* Figma: 17px */
    border-radius: 4px; /* Figma: 4px (nicht rund!) */
    border: none; /* Empty State: kein Border */
    background-color: transparent; /* Wird durch JavaScript gesetzt */
    cursor: pointer;
    transition: none; /* Keine Animation */
    outline: none;
    -webkit-tap-highlight-color: transparent;
    padding: 0 !important; /* Padding entfernen - verhindert Abstand zwischen Pills */
    margin: 0; /* Margin entfernen */
}

/* Color Swatches Disabled State während KI-Analyse */
.form-step[data-step="5"] .color-section.is-loading .color-palette-desktop .color-swatch {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* Standard: Alle Swatches normal sichtbar (opacity: 1) wenn KEINE ausgewählt ist */
.form-step[data-step="5"] .color-palette-desktop .color-swatch {
    opacity: 1; /* Standard: Alle Swatches normal sichtbar */
}

/* Aktiver Swatch - immer sichtbar (opacity: 1) */
.form-step[data-step="5"] .color-palette-desktop .color-swatch.active {
    opacity: 1 !important; /* Aktiver Swatch ist immer voll sichtbar */
    z-index: 10; /* Über anderen Swatches */
}

/* Inaktive Swatches - NUR wenn eine Farbe aktiv ist (mit :has() Selektoren) */
/* Wenn KEINE Farbe ausgewählt ist, bleiben alle normal sichtbar (opacity: 1) */
.form-step[data-step="5"] .color-palette-desktop:has(.color-swatch.active) .color-swatch:not(.active) {
    opacity: 0.4; /* Inaktive Swatches sind blass (wie im Bild) - NUR wenn eine aktiv ist */
}

/* Focus State - Keine eckige Box */
.form-step[data-step="5"] .color-palette-desktop .color-swatch:focus,
.form-step[data-step="5"] .color-palette-desktop .color-swatch:focus-visible {
    outline: none;
    box-shadow: none; /* Kein box-shadow mehr */
}

/* Step 5 Button: Alle Styles werden von der einheitlichen Steps 1-6 Desktop-Button-Klasse übernommen */
/* Step-spezifische Margins können hier gesetzt werden, falls nötig */
/* Button Margin Step 5 Desktop - NUR Desktop, nicht Mobile */
@media (min-width: 768px) {
    .form-step[data-step="5"] .btn-primary {
        margin-top: 32px; /* Figma: 32px */
    }
}

/* Hide mobile color picker button on desktop by default */
#open-color-modal-btn {
    display: none;
}

/* AI Color Loading State */
.color-ai-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 20px;
    margin: 16px auto;
}

.loading-spinner-small {
    width: 32px;
    height: 32px;
    border: 3px solid #E3DCFD;
    border-top: 3px solid #7856FF;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

.loading-text {
    font-family: 'Allotrope', sans-serif;
    font-size: 12px;
    color: #7856FF;
    font-weight: 400;
}

/* AI Badge on mobile button */
.ai-badge {
    position: absolute;
    top: -8px;
    right: -8px;
    background: linear-gradient(135deg, #7856FF 0%, #9F7AEA 100%);
    color: #FFFFFF;
    font-size: 10px;
    font-weight: 500;
    padding: 4px 8px;
    border-radius: 12px;
    box-shadow: 0px 2px 8px rgba(120, 86, 255, 0.3);
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

/* ============================================
   STEP 6: Zusammenfassung - DESKTOP
   ============================================ */
.form-step[data-step="6"] {
    display: none;
}
.form-step[data-step="6"].active {
    /* Frame 395: Auto layout */
    display: flex;
    flex-direction: column;
    align-items: center; /* Zentriert für bessere Lesbarkeit */
    padding: 0px;
    width: 100%;
    max-width: 100%; /* Entfernt: max-width: 472px - verhindert Verschiebung */
    height: auto;
    box-sizing: border-box;
    overflow: hidden; /* Verhindert, dass Inhalt über Container-Ränder hinausbricht */
}

/* Frame 328: Headline Container - Auto layout */
.form-step[data-step="6"] .fm-h1-wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 8px; /* Nach Figma: gap: 8px */
    width: 472px;
    height: auto; /* Nach Figma: height: 84px, aber flexibel */
    flex: none;
    order: 0;
    align-self: stretch;
    flex-grow: 0;
}

/* Headline - Nach Figma: "Nur noch einen Klick entfernt" */
.form-step[data-step="6"] .fm-h1 {
    width: 100%;
    max-width: 472px; /* Maximale Breite, aber nicht zwingend */
    height: auto; /* Flexibel für mehrzeilige Überschriften */
    min-height: 34px; /* Nach Figma: min-height: 34px */
    font-family: 'Allotrope';
    font-style: normal;
    font-weight: 400;
    font-size: 30px;
    line-height: 34px; /* identical to box height, or 113% */
    text-align: center;
    color: #001D57;
    margin: 46px 0 8px 0; /* margin-top: 46px, margin-bottom: 8px für gap */
}

/* Subtitle - Nach Figma */
.form-step[data-step="6"] .fm-subtitle {
    width: 100%;
    max-width: 472px; /* Maximale Breite, aber nicht zwingend */
    height: auto; /* Flexibel für mehrzeilige Texte */
    min-height: 42px; /* Nach Figma: min-height: 42px */
    font-family: 'Allotrope';
    font-style: normal;
    font-weight: 350;
    font-size: 15px;
    line-height: 142%; /* or 21px */
    text-align: center;
    color: #001D57; /* Nach Figma: color: #001D57 (nicht #8598C0) */
    margin: 0 0 40px 0; /* margin-bottom: 40px für gap zwischen Subtitle und Summary Box */
}

/* Group 298: Summary Box Container */
.form-step[data-step="6"] .summary-box {
    width: 100%;
    max-width: 471px; /* Maximale Breite, aber nicht zwingend */
    height: auto; /* Nach Figma: height: 108px, aber flexibel für Inhalt */
    min-height: 108px; /* Nach Figma: min-height: 108px */
    position: relative; /* Für absolut positionierte Pills (falls nötig) */
    background: #F1FFEF; /* Nach Figma: Rectangle 87 background */
    border-radius: 30px; /* Nach Figma: border-radius: 30px */
    padding: 25px 0 0; /* Nach Figma: top: 149px relativ zu Box (149px - 124px = 25px) */
    box-sizing: border-box;
    margin: 0 0 16px 0; /* margin-bottom: 16px für gap zwischen Summary Box und Consent Row */
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Summary Box Text - Nach Figma: "Alles, was neue und bestehende Mitarbeitende brauchen, an einem Ort:" */
.form-step[data-step="6"] .summary-box p {
    position: relative;
    width: 367px; /* Nach Figma: width: 367px */
    height: 16px; /* Nach Figma: height: 16px */
    font-family: 'Allotrope';
    font-style: normal;
    font-weight: 400;
    font-size: 11.83px;
    line-height: 16px; /* identical to box height, or 135% */
    display: flex;
    align-items: center;
    text-align: center;
    color: #0B2965; /* Nach Figma: color: #0B2965 (nicht #8598C0) */
    margin: 0 auto 12px; /* Nach Figma: top: 149px, dann 12px gap zu Pills (177px - 149px - 16px = 12px) */
    padding: 0;
}

/* Pill Row Container - Group 341 */
.form-step[data-step="6"] .pill-row {
    position: relative;
    width: 252px; /* Nach Figma: width: 252px */
    height: auto; /* Nach Figma: height: 25px, aber flexibel */
    margin: 0 auto; /* Zentriert */
    padding-bottom: 12px; /* Nach Figma: bottom padding für Abstand */
    display: flex;
    flex-wrap: wrap;
    gap: 8px; /* Nach Figma: gap zwischen Pills */
    justify-content: center;
}

/* Individual Pills - Nach Figma: button-lila-sub.kontur */
.form-step[data-step="6"] .pill.static {
    box-sizing: border-box;
    /* Auto layout */
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 8px 12px 8px 16px; /* Nach Figma: padding: 8px 12px 8px 16px */
    gap: 8px;
    height: 25px; /* Nach Figma: height: 25px */
    background: #E8FFE5; /* Nach Figma: background: #E8FFE5 */
    border: 1px solid #85FF77; /* Nach Figma: border: 1px solid #85FF77 */
    border-radius: 8px;
    font-family: 'Allotrope';
    font-style: normal;
    font-weight: 400;
    font-size: 10px; /* Nach Figma: font-size: 10px */
    line-height: 9px; /* identical to box height, or 90% */
    text-align: center;
    color: #0B2965; /* Nach Figma: color: #0B2965 */
    width: auto; /* Passt sich an Inhalt an */
    min-width: 0; /* Flexibel */
}

/* Empty Pill State (optional, if needed) */
.form-step[data-step="6"] .pill.static.empty {
    background: #F3F5FA;
    border-color: #E3E8F7;
    color: #8598C0;
}

/* Consent Row - Nach Figma (nicht in Figma, aber benötigt für Checkbox) */
.form-step[data-step="6"] .consent-row {
    width: 100%;
    max-width: 472px; /* Maximale Breite, aber nicht zwingend */
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 4px 0; /* margin-top: 4px, margin-bottom: 4px */
}

/* Checkbox (Custom Styled) */
.form-step[data-step="6"] .consent-row input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 4px;
    border: 1px solid #7856FF;
    background: #FCFCFF;
    flex-shrink: 0;
    margin: 2px 0 0 0; /* Slight top margin for alignment */
    cursor: pointer;
    position: relative;
}

.form-step[data-step="6"] .consent-row input[type="checkbox"]:checked {
    background-color: #E8FFE5;
    border-color: #85FF77;
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z' fill='%2385FF77'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
}

/* Checkbox Label */
.form-step[data-step="6"] .consent-row label {
    font-family: 'Allotrope';
    font-style: normal;
    font-weight: 350;
    font-size: 11.83px;
    line-height: 16px;
    color: #8598C0;
    cursor: pointer;
    flex: 1;
}

/* Submit Button - Nach Figma */
.form-step[data-step="6"] .btn-primary {
    width: 100%;
    max-width: 471px; /* Maximale Breite, aber nicht zwingend */
    margin: 16px 0 83px 0; /* margin-top: 16px, margin-bottom: 83px */
    position: relative; /* Für Spinner-Positionierung */
}

/* Loading Spinner für Step 6 Submit Button */
.form-step[data-step="6"] .btn-primary .btn-text {
    transition: opacity 0.2s ease;
}

.form-step[data-step="6"] .btn-primary .loading-spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #FFFFFF;
    border-radius: 50%;
    animation: spin-step6 0.8s linear infinite;
    display: none;
}

@keyframes spin-step6 {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}

.form-step[data-step="6"] .btn-primary.is-submitting .btn-text {
    opacity: 0;
}

.form-step[data-step="6"] .btn-primary.is-submitting .loading-spinner {
    display: block;
}

/* Datenschutz-Link - Eigene Klasse für blaue Farbe */
.form-step[data-step="6"] .fm-privacy-link {
    color: #7856FF !important; /* Blau statt rot (Standard WordPress-Link-Farbe) */
    text-decoration: underline;
    cursor: pointer;
}

.form-step[data-step="6"] .fm-privacy-link:hover {
    color: #5a3fd9 !important; /* Dunkleres Blau beim Hover */
    text-decoration: underline;
}

/* ============================================
   STEP 7: Thank You Page - DESKTOP
   ============================================ */
.fm-onboarding-form[data-active-step="7"] {
    background: transparent;
    box-shadow: none;
    max-width: 100%; /* Full width to not constrain inner content */
    min-height: auto;
    border-radius: 0; /* Remove radius to avoid weird edges */
}
.form-step[data-step="7"] {
    display: none;
}
.form-step[data-step="7"].active {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start; /* Aligns content to the top */
    width: 100%;
    padding: 0; /* No padding on the outer container */
    text-align: center;
}
.form-step[data-step="7"] .fm-h2 {
    font-size: 14px;
    font-weight: 400;
    color: #001D57;
    margin-bottom: 12px;
}
.form-step[data-step="7"] .loading-spinner {
    /* Basic spinner, can be replaced with SVG/animation */
    border: 4px solid #E3DCFD;
    border-top: 4px solid #7856FF;
    border-radius: 50%;
    width: 42px;
    height: 42px;
    animation: spin 1s linear infinite;
    margin-bottom: 32px;
}
.form-step[data-step="7"] .thankyou-box {
    width: 100%;
    max-width: 660px;
    background: linear-gradient(37.25deg, #E8FFE5 -14.12%, #FFFFFF 82.35%);
    border: 1px solid #85FF77;
    border-radius: 24px;
    padding: 40px;
    box-sizing: border-box;
}
.form-step[data-step="7"] .thankyou-box .fm-h1 {
    font-size: 35px;
    line-height: 38px;
    color: #0B2965;
    margin-bottom: 12px;
}
.form-step[data-step="7"] .thankyou-box p {
    font-size: 16.83px;
    line-height: 27px;
    color: #4C5D7F;
    max-width: 471px;
    margin: 0 auto;
}
.form-step[data-step="7"] .thankyou-links {
    display: flex;
    justify-content: space-between;
    width: 100%;
    max-width: 600px; /* Approximate based on layout */
    margin-top: 40px;
}
.form-step[data-step="7"] .thankyou-links a {
    font-size: 12px;
    color: #7856FF;
    text-decoration: underline;
}
.form-step[data-step="7"] .thankyou-links .help-link {
    color: #4C5D7F;
    text-decoration: none;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.form-step[data-step="6"] .summary-box {
    margin-bottom: 40px;
}

/* ============================================
   5. WIEDERKEHRENDE KOMPONENTEN (BASE)
   ============================================ */
/* 
 * Diese Komponenten werden in mehreren Steps verwendet.
 * Sie werden hier zentral definiert und können bei Bedarf
 * in den Step-spezifischen Styles überschrieben werden.
 */

/* General Input Styles (Restored) */
input[type="text"], input[type="email"], input[type="url"] {
    width: 100%;
    height: var(--input-height);
    padding: 0 16px;
    border: 1px solid var(--c-input-border);
    border-radius: var(--input-radius);
    font-family: var(--font-family);
    font-size: var(--fs-input);
    color: var(--c-input-text);
    background: var(--c-input-bg);
    transition: all 0.2s ease;
    box-sizing: border-box;
}
input::placeholder {
    color: var(--c-input-placeholder);
    font-size: var(--fs-input-placeholder);
}
input:focus {
    outline: none;
    border-color: var(--c-input-border-focus);
}

/* General Form Structure */
.form-row {
    position: relative;
    margin-bottom: 24px;
}
.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px 16px;
}
.form-grid .span-2 {
    grid-column: span 2;
}

/* --- Floating Label Styles --- */
.form-row label {
    position: absolute;
    top: 50%;
    left: 16px;
    transform: translateY(-50%);
    color: var(--c-input-placeholder);
    font-size: var(--fs-input-placeholder);
    font-weight: 350;
    transition: all 0.2s ease-in-out;
    pointer-events: none;
    background-color: var(--c-white);
    padding: 0 4px;
}

.form-row input:focus ~ label,
.form-row input:not(:placeholder-shown) ~ label {
    opacity: 0;
    visibility: hidden;
}

/* Specific adjustment for optional field placeholder */
.form-row input[placeholder="www.firmenwebseite.de"]:not(:focus):placeholder-shown ~ label {
    display: none;
}


/* Groups of elements */
.toggle-group {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 32px;
}
.toggle-btn {
    padding: var(--toggle-padding);
    border-radius: var(--toggle-radius);
    background: var(--c-toggle-inactive-bg);
    border: 1px solid var(--c-toggle-inactive-border);
    color: var(--c-text-primary);
}
.toggle-btn.active {
    background: var(--c-toggle-active-bg);
    border-color: var(--c-toggle-active-border);
}

.chip-group, .pill-group {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}
.chip, .pill {
    padding: 12px 16px;
    border-radius: 12px;
    background: transparent;
    border: 1px solid var(--c-toggle-inactive-border);
}
.chip.active, .pill.active {
    background: var(--c-toggle-active-bg);
    border-color: var(--c-toggle-active-border);
}
.pill.static {
    padding: var(--btn-tag-padding);
    border-radius: var(--btn-tag-radius);
    border-color: var(--c-button-tag-border);
    cursor: default;
}


/* ============================================
   5.2 BUTTONS (ALLE VARIANTEN)
   ============================================ */
.btn, .chip, .pill {
    font-family: var(--font-family);
    cursor: pointer;
    border: none;
    transition: all 0.2s ease-in-out;
}

/* Primary Button */
.btn-primary {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: var(--btn-padding);
    border-radius: var(--btn-radius);
    font-size: var(--fs-button);
    font-weight: 400;
    background: var(--btn-disabled-bg);
    color: var(--btn-disabled-text);
    border: var(--btn-border);
}
.btn-primary:not(.is-disabled) {
    background: var(--c-button-primary-bg);
    color: var(--c-button-primary-text);
    box-shadow: var(--btn-shadow);
}
.btn-primary.is-disabled {
    pointer-events: none;
    cursor: not-allowed;
}

/* ============================================
   STEP-SPEZIFISCHE BUTTON MARGINS (Steps 1-6 Desktop)
   ============================================ */
/* Alle Button-Styles werden von der einheitlichen Steps 1-6 Desktop-Button-Klasse übernommen */
/* Hier nur step-spezifische Margins für Desktop */

/* Step 1 Button: Spezifisches margin-top */
.form-step[data-step="1"] .btn-primary {
    margin-top: 32px;
}

/* Step 2 Button: Alle Styles werden von der einheitlichen Steps 1-6 Desktop-Button-Klasse übernommen */
/* Step-spezifische Margins können hier gesetzt werden, falls nötig */


/* Toggle Buttons (Du/Sie) */
/* Chips & Pills (Tonalität, Benefits) */


/* ============================================
   5.3 SPEZIFISCHE KOMPONENTEN
   ============================================ */
/* Step 4: Benefit Tabs */
.tabs {
    display: flex;
    justify-content: center;
    gap: 16px;
    border-bottom: 1px solid var(--c-stepper-line);
    margin-bottom: 24px;
}
.tab {
    background: none;
    border: none;
    padding-bottom: 8px;
    color: var(--c-text-label);
    position: relative;
}
.tab.active {
    color: var(--c-primary);
}
.tab.active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--c-primary);
}

/* Upload & Color Picker Komponenten */
.upload-row, .color-picker-inline {
    background: var(--c-form-section-bg);
    border-radius: var(--form-section-radius);
    padding: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

/* Step 6: Summary */
.summary-box {
    background: var(--c-summary-card-bg);
    border-radius: 30px;
    padding: 24px;
    margin: 32px 0;
}
.pill-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}

/* Consent Row (Step 6) */
.consent-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 24px 0;
}
.consent-row input[type="checkbox"] {
    width: var(--checkbox-size);
    height: var(--checkbox-size);
    border-radius: var(--checkbox-radius);
    appearance: none;
    border: 1px solid var(--c-checkbox-unchecked-border);
    background-color: var(--c-checkbox-unchecked-bg);
    cursor: pointer;
    flex-shrink: 0;
}
.consent-row input[type="checkbox"]:checked {
    background-color: var(--c-checkbox-checked-bg);
    border-color: var(--c-checkbox-checked-border);
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z' fill='%230B2965'/%3e%3c/svg%3e");
}
.consent-row label {
    font-size: 10.83px;
    font-weight: 350;
    color: var(--c-text-label);
    cursor: pointer;
}

/* Step 7: Thank You */
.thankyou-box {
    background: var(--c-thank-you-card-bg);
    border: 1px solid var(--c-thank-you-card-border);
    border-radius: 24px;
    padding: 40px;
    margin-top: 40px;
}

.fm-thank-you-page-body {
    background: #FAFBFE; /* Simpler background from Figma */
    font-family: 'Allotrope', sans-serif;
    color: #001D57;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    box-sizing: border-box;
    position: relative; /* Needed for pseudo-elements */
    overflow: hidden; /* Hide overflow from large pseudo-elements */
}

/* Right side gradient */
.fm-thank-you-page-body::before {
    content: '';
    position: absolute;
    width: 1228px;
    height: 2693px; /* Dimensions from Figma */
    left: 50%; /* Centered horizontally */
    margin-left: -120px; /* Adjusted positioning */
    top: -1222px;
    background-image: url('../figmadesign/Hintergrund-Gradient.png');
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 0.5;
    z-index: 1;
}

/* Left side gradient */
.fm-thank-you-page-body::after {
    content: '';
    position: absolute;
    width: 1049px;
    height: 1737px; /* Dimensions from Figma */
    left: -395px;
    top: -273px;
    background-image: url('../figmadesign/Hintergrund-Gradient.png');
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 0.5;
    transform: rotate(180deg);
    z-index: 1;
}

.thank-you-wrapper {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 1228px; /* Full width from Figma */
    height: 100vh; /* Full height */
    max-height: 720px; /* Max height from Figma */
    padding: 0 20px;
    box-sizing: border-box;
    position: relative;
    z-index: 2; /* Ensure content is above the background */
}

.thank-you-header {
    position: absolute;
    top: 19px;
    left: 50%;
    transform: translateX(-50%);
    width: 81px;
    height: 33px;
}

.thank-you-logo {
    width: 100%;
    height: auto;
}

.thank-you-main {
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.thank-you-main .fm-h2 {
    position: static;
    font-size: 14px;
    line-height: 18px;
    font-weight: 400;
    color: #001D57;
    margin-top: 115px; /* Approximate from Figma */
    margin-bottom: 12px;
}

.thank-you-main .loading-spinner {
    margin-top: 0;
    margin-bottom: 32px;
}

.thank-you-main .thankyou-box {
    width: 100%;
    max-width: 660px;
    padding: 40px;
    box-sizing: border-box;
}

.thank-you-main .thankyou-box .fm-h1 {
    font-size: 35px;
    line-height: 38px;
    color: #0B2965;
    margin: 0 0 12px 0;
}

.thank-you-main .thankyou-box p {
    font-size: 16.83px;
    line-height: 27px;
    font-weight: 350;
    color: #4C5D7F;
    max-width: 471px;
    margin: 0 auto;
}

.thank-you-footer {
    position: absolute;
    bottom: 60px; /* Approximate from Figma */
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    max-width: 660px; /* Aligns with the thankyou-box width */
    margin: 0 auto;
    font-size: 12px;
}

.thank-you-footer a {
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 8px;
}

.thank-you-footer a:first-child {
    color: #7856FF;
    text-decoration: underline;
    font-weight: 350;
}

.thank-you-footer .help-link {
    color: #4C5D7F;
    font-weight: 400;
}


/* ============================================
   5.4 UTILITIES & STATES
   ============================================ */
.form-step {
    display: none; /* Hide by default */
    flex-direction: column;
    /* min-height: 490px; ENTFERNT - Steps sollen sich an Inhalt anpassen */
    /* padding: 40px; ENTFERNT - wird step-spezifisch gesetzt (Step 0: 60.5px oben, Steps 1-6: 0px) */
    box-sizing: border-box;
    max-width: 100%; /* Verhindert Überlauf */
    overflow: hidden; /* Verhindert, dass Inhalt über Container-Ränder hinausbricht */
}

.form-step > .btn-primary {
    margin-top: auto; /* Pushes button to the bottom */
}

.form-step.active {
    display: flex; /* Changed from block to flex */
    animation: fadeIn 0.5s ease-in-out;
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

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

.hidden, .form-navigation {
    display: none;
}

/* ============================================
   6. STEP-SPECIFIC STYLES (MOBILE)
   ============================================ */
/* 
 * BREAKPOINT: max-width: 767px (Mobile & Tablet)
 * Alle Mobile-Styles für Steps 0-7 folgen hier.
 * Container (Elementor) übernimmt Box-Styling (radius, shadow, bg).
 * Plugin-CSS stylt nur Content (text, inputs, buttons, spacing).
 */

@media (max-width: 767px) {
    
    /* ============================================
       MOBILE NAVIGATION - PROGRESSBAR AUSBLENDEN
       ============================================ */
    /* Progressbar wird in Mobile nicht verwendet - komplett ausblenden */
    .fm-stepper {
        display: none !important;
    }
    
    /* ============================================
       MOBILE STEP CONTAINER - EINHEITLICHER UNTERER ABSTAND
       ============================================ */
    /* Einheitlicher Abstand vom Container zum unteren Rand für alle Mobile Steps 1-6 */
    /* WICHTIG: Nur für Mobile, Desktop nicht betroffen! */
    .form-step[data-step="1"].active,
    .form-step[data-step="2"].active,
    .form-step[data-step="3"].active,
    .form-step[data-step="4"].active,
    .form-step[data-step="5"].active,
    .form-step[data-step="6"].active {
        padding-bottom: 40px !important; /* Padding unten 40px für Mobile Steps 1-6 */
    }
    
    /* ============================================
       MOBILE BUTTONS (GEMEINSAM FÜR ALLE STEPS 0-6)
       ============================================ */
    /* 
     * Einheitliche Mobile-Button-Klasse für alle Steps (0-6)
     * Figma: 270px Breite, 48px Höhe, border-radius 16px
     * Empty State: background #F3F5FA, Text #8598C0
     * Filled State: background #7856FF, Text #FFFFFF, border 2px solid #E3DCFD, box-shadow
     */
    .form-step .btn-primary {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 10px;
        width: 270px !important; /* IMMER 270px auf Mobile, keine Variable Breite */
        max-width: 270px !important; /* Verhindert Verbreiterung */
        height: 48px !important;
        box-sizing: border-box;
        border-radius: 16px;
        font-family: 'Allotrope', sans-serif;
        font-weight: 400;
        font-size: 15px;
        line-height: 12px; /* identical to box height, or 80% */
        letter-spacing: 0.01em;
        text-align: center;
        /* Überschreibt Standard-Button-Farben (z.B. WordPress/Elementor rote Farbe) */
        color: #8598C0 !important; /* Empty State Text-Farbe (wird durch filled state überschrieben) */
    }
    
    /* Button Empty State */
    .form-step .btn-primary.is-disabled,
    .form-step .btn-primary:disabled {
        padding: 8px 15px !important;
        background: #F3F5FA !important;
        border: none !important;
        box-shadow: none !important;
        color: #8598C0 !important; /* Empty State Text-Farbe */
    }
    
    /* Button Filled State */
    .form-step .btn-primary:not(.is-disabled):not(:disabled) {
        box-sizing: border-box;
        padding: 16px 15px !important;
        background: #7856FF !important;
        border: 2px solid #E3DCFD !important;
        box-shadow: 0px 14px 6px rgba(120, 86, 255, 0.02),
                    0px 8px 5px rgba(120, 86, 255, 0.07),
                    0px 4px 4px rgba(120, 86, 255, 0.11),
                    0px 1px 2px rgba(120, 86, 255, 0.13);
        border-radius: 16px;
        color: #FFFFFF !important; /* Filled State Text-Farbe */
        font-size: 15.14px; /* Filled State Font-Size */
    }
    
    /* Button Text (span) - Falls vorhanden, überschreibt Text-Farbe */
    .form-step .btn-primary span {
        color: inherit !important; /* Erbt Text-Farbe vom Button */
    }
    
    /* ============================================
       STEP 0: E-Mail-Eingabe (Frontpage) - MOBILE
       ============================================ */
    /* 
     * Figma: Frame 368 (Container) - 350px × 423px, padding: 40px, border-radius: 32px
     * Figma: Frame 367 (Content) - 270px × 343px, gap: 57px (wird ignoriert - "Zurück" Button nicht vorhanden)
     * Figma: Frame 333 (Überschrift + Input/Button Container) - 270px × 274px, gap: 32px
     * Figma: Frame 332 (Input/Button Container) - 270px × 180px, gap: 16px
     * Figma: Frame 331 (Input + Button) - 270px × 108px, gap: 12px
     * 
     * WICHTIG: Überschrift "Mitarbeiterportal kostenlos testen" (OHNE "Jetzt" auf Mobile!)
     * Container-Styling (border-radius, box-shadow, background, padding) wird von Elementor übernommen.
     * Der Step-Container muss volle Breite nutzen (nicht Desktop 331px).
     */
    
    /* Step 0 Container: Volle Breite auf Mobile (überschreibt Desktop 331px) */
    /* Figma Frame 368: padding: 40px (alle 4 Richtungen), border-radius: 32px */
    /* WICHTIG: Links/rechts Padding wird von Elementor übernommen, oben/unten setzen wir selbst */
    .form-step[data-step="0"].active {
        width: 100% !important; /* Volle Container-Breite nutzen */
        max-width: 100% !important;
        padding: 40px 0 !important; /* Oben/unten: 40px, links/rechts: 0px (Elementor übernimmt) */
        margin: 0 !important; /* Desktop margin: 0 auto entfernen */
        box-sizing: border-box;
        align-items: center; /* Zentrierung der Content-Elemente */
        overflow: hidden; /* Zusätzlicher Schutz vor Overflow */
    }
    
    /* Step 0 Mobile: Border-radius auf Elementor-Container setzen */
    /* Figma Frame 368: border-radius: 32px (nur Mobile) */
    /* WICHTIG: Border-radius muss auf #fmbaselyformco gesetzt werden, nicht auf .form-step */
    /* WICHTIG: Nur auf Mobile, da Desktop border-radius (50px) via JavaScript gesetzt wird */
    #fmbaselyformco {
        border-radius: 32px !important; /* Figma Frame 368: 32px border-radius (nur Mobile) */
    }
    
    /* Frame 333 - Überschrift */
    .form-step[data-step="0"] .fm-h1 {
        width: 270px;
        max-width: 100%;
        height: 62px;
        font-family: 'Allotrope', sans-serif;
        font-size: 26px;
        line-height: 120%; /* or 31px */
        font-weight: 400;
        text-align: center;
        color: #001D57;
        margin: 0 0 32px 0; /* Gap: 32px zu Frame 332 (Frame 333 gap in Figma) */
    }
    
    /* Überschrift: Mobile-Version anzeigen, Desktop-Version verstecken */
    .form-step[data-step="0"] .step0-title-desktop {
        display: none;
    }
    
    .form-step[data-step="0"] .step0-title-mobile {
        display: inline;
    }
    
    /* Frame 331 - Input Container */
    .form-step[data-step="0"] .form-row {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding: 0px;
        gap: 0; /* Gap wird durch Button margin-top gesteuert */
        width: 270px;
        max-width: 100%;
        margin: 0;
        box-sizing: border-box;
    }
    
    /* Rectangle 80 - Input Field (Empty State) */
    .form-step[data-step="0"] input[type="email"] {
        box-sizing: border-box;
        position: relative;
        width: 270px;
        max-width: 100%;
        height: 48px;
        border: 1px solid #C4D2F0;
        border-radius: 16px;
        font-family: 'Allotrope', sans-serif;
        font-size: 15px;
        line-height: 12px; /* identical to box height, or 80% */
        font-weight: 400;
        color: #001D57;
        padding: 18px 0 18px 20.75px;
        flex: none;
        order: 0;
        flex-grow: 0;
    }
    
    /* Placeholder "Gewerbliche E-Mail" */
    .form-step[data-step="0"] input[type="email"]::placeholder {
        position: relative;
        width: auto;
        height: 12px;
        font-family: 'Allotrope', sans-serif;
        font-size: 15px;
        line-height: 12px;
        display: flex;
        align-items: center;
        color: #8598C0;
    }
    
    /* Rectangle 80 + Rectangle 81 (Filled/Focus State) */
    .form-step[data-step="0"] input[type="email"]:focus {
        outline: none;
        border: 1px solid #7856FF;
        /* Rectangle 81 - Innerer Border mit box-shadow simuliert */
        box-shadow: 0 0 0 2px rgba(120, 86, 255, 0.3);
        border-radius: 16px;
    }
    
    /* Step 0 Button: Spezifisches margin-top (12px zu Input) */
    /* Alle anderen Button-Styles werden von der allgemeinen Mobile-Button-Klasse übernommen */
    .form-step[data-step="0"] .btn-primary {
        margin: 12px 0 0 0; /* Gap: 12px zu Input oben (Frame 331 gap in Figma) */
    }
    
    /* Legal Text - Teil von Frame 332 */
    .form-step[data-step="0"] .fm-legal {
        width: 270px;
        max-width: 100%;
        min-height: 56px; /* Statt height für flexibleren Umbruch */
        font-family: 'Allotrope', sans-serif;
        font-size: 10px;
        line-height: 142%; /* or 14px */
        font-weight: 350;
        text-align: center;
        color: #001D57;
        margin: 16px auto 0; /* Gap: 16px zu Button oben (Frame 332 gap in Figma), horizontal zentriert */
        word-break: normal; /* Normale Wortumbrüche (nicht mitten in Wörtern) */
        overflow-wrap: break-word; /* Umbruch nur bei langen Wörtern, die nicht in Zeile passen */
        hyphens: none; /* Keine automatische Silbentrennung - verhindert "Ba-" / "sely" Umbruch */
    }
    
    .form-step[data-step="0"] .fm-legal a {
        color: #001D57;
        text-decoration: underline;
        white-space: nowrap; /* Verhindert Umbruch in Links */
    }
    
    /* ============================================
       MOBILE NAVIGATION - EINHEITLICHER ABSTAND FÜR STEPS 1-6
       ============================================ */
    /* Einheitlicher Abstand Navigation → Headline: 56px für alle Mobile Steps 1-6 */
    .form-step[data-step="1"] .fm-card-topbar,
    .form-step[data-step="2"] .fm-card-topbar,
    .form-step[data-step="3"] .fm-card-topbar,
    .form-step[data-step="4"] .fm-card-topbar,
    .form-step[data-step="5"] .fm-card-topbar,
    .form-step[data-step="6"] .fm-card-topbar {
        margin-bottom: 56px !important; /* Abstand Navigation → Headline: 56px (einheitlich für Mobile Steps 1-6) */
    }
    
    /* ============================================
       STEP 1: Firmendaten - MOBILE
       ============================================ */
    /* 
     * Figma: Frame 347 (Container) - 270px × 508px
     * Figma: Frame 336 (Navigation) - 270px × 13px, gap: 150px
     * Figma: Frame 333 (Content Container) - 270px × 439px, gap: 40px
     * Figma: Frame 332 (Headline + Form Container) - 270px × 368px, gap: 16px
     * Figma: Frame 331 (Form Fields Container) - 270px × 368px, gap: 32px
     * Figma: Frame 338 (Input Fields Container) - 270px × 288px, gap: 12px
     * Figma: Frame 337 (PLZ + Ort Container) - 270px × 48px, gap: 12px, flex-direction: row
     */
    
    /* Navigation - Frame 336 */
    .form-step[data-step="1"] .fm-card-topbar {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
        padding: 0px;
        gap: 150px;
        width: 270px;
        height: 13px;
        /* margin-bottom wird von der einheitlichen Regel übernommen (56px) */
        box-sizing: border-box;
    }
    
    .form-step[data-step="1"] .back-link {
        width: 36px;
        height: 12px;
        font-family: 'Allotrope', sans-serif;
        font-size: 12px;
        line-height: 12px; /* identical to box height, or 100% */
        font-weight: 350;
        color: #7856FF;
        text-decoration: underline;
        display: flex;
        align-items: center;
    }
    
    .form-step[data-step="1"] .fm-stepper-info {
        width: 60px;
        height: 13px;
        font-family: 'Allotrope', sans-serif;
        font-size: 12px;
        line-height: 13px; /* identical to box height, or 108% */
        font-weight: 400;
        color: #4C5D7F;
        text-align: right;
    }
    
    /* Content Container - Frame 333: gap 40px */
    /* Headline - Frame 332: gap 40px zu Form Container (Vorname-Eingabefeld) */
    .form-step[data-step="1"] .fm-h1 {
        width: 270px;
        max-width: 100%;
        height: 31px;
        font-family: 'Allotrope', sans-serif;
        font-size: 26px;
        line-height: 120%; /* or 31px */
        font-weight: 400;
        text-align: center;
        color: #001D57;
        margin: 0 0 40px 0; /* Abstand Headline → Vorname-Eingabefeld: 40px in Step 1 Mobile */
    }
    
    /* Form Grid - Frame 331: gap 32px, Frame 338: gap 12px */
    /* 12-Grid-System: PLZ (4/12) und Ort (8/12) nebeneinander */
    .form-step[data-step="1"] .form-grid {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        align-items: flex-start;
        padding: 0px;
        gap: 12px; /* Frame 338 gap: 12px zwischen Input-Feldern */
        width: 270px;
        max-width: 100%;
        margin: 0;
        box-sizing: border-box;
    }
    
    /* Form Row: Alle Felder full-width (span-12) außer PLZ/Ort */
    .form-step[data-step="1"] .form-row {
        grid-column: span 12;
        width: 100%;
        margin: 0;
        position: relative;
    }
    
    /* PLZ Field - 4/12 Grid (4. Row im Grid) */
    .form-step[data-step="1"] .form-row:nth-of-type(4) {
        grid-column: span 4;
    }
    
    /* Ort Field - 8/12 Grid (5. Row im Grid) */
    .form-step[data-step="1"] .form-row:nth-of-type(5) {
        grid-column: span 8;
    }
    
    /* Input Fields - Alle haben 270px Breite (full-width rows) */
    .form-step[data-step="1"] input[type="text"],
    .form-step[data-step="1"] input[type="url"] {
        box-sizing: border-box;
        width: 100%;
        max-width: 100%;
        height: 48px;
        border: 1px solid #C4D2F0;
        border-radius: 16px;
        font-family: 'Allotrope', sans-serif;
        font-size: 15px;
        line-height: 12px; /* identical to box height, or 80% */
        font-weight: 400;
        color: #001D57;
        padding: 18px 0 18px 17.75px; /* top/bottom: 18px, left: 17.75px */
    }
    
    /* PLZ Input: padding-left 17px (nach Figma) */
    .form-step[data-step="1"] #zip {
        padding-left: 17px;
    }
    
    /* Ort Input: padding-left 17.75px (nach Figma) */
    .form-step[data-step="1"] #city {
        padding-left: 17.75px;
    }
    
    /* Placeholder */
    .form-step[data-step="1"] input::placeholder {
        font-family: 'Allotrope', sans-serif;
        font-size: 15px;
        line-height: 12px;
        color: #8598C0;
    }
    
    /* Focus State */
    .form-step[data-step="1"] input:focus {
        outline: none;
        border: 1px solid #7856FF;
        box-shadow: 0 0 0 2px rgba(120, 86, 255, 0.3);
        border-radius: 16px;
    }
    
    /* Filled State: Border ändert sich zu #7856FF */
    .form-step[data-step="1"] input:not(:placeholder-shown) {
        border-color: #7856FF;
    }
    
    /* Step 1 Button: Spezifisches margin-top */
    /* Alle anderen Button-Styles werden von der allgemeinen Mobile-Button-Klasse übernommen */
    .form-step[data-step="1"] .btn-primary {
        margin: 32px 0 0 0; /* Abstand Website-Eingabefeld → Button: 32px in Step 1 Mobile */
    }
    
    /* ============================================
       STEP 2: Ansprache - MOBILE
       ============================================ */
    
    .form-step[data-step="2"] .fm-card-topbar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 48px;
        /* margin-bottom wird von der einheitlichen Regel übernommen (56px) */
        padding: 0 24px;
    }
    
    .form-step[data-step="2"] .back-link {
        font-family: 'Allotrope', sans-serif;
        font-size: 12px;
        line-height: 12px;
        font-weight: 350;
        color: #7856FF;
        text-decoration: underline;
    }
    
    .form-step[data-step="2"] .fm-stepper-info {
        font-family: 'Allotrope', sans-serif;
        font-size: 12px;
        line-height: 13px;
        font-weight: 400;
        color: #4C5D7F;
        text-align: right;
    }
    
    .form-step[data-step="2"] .fm-step-title {
        width: 246px;
        max-width: 100%;
        font-family: 'Allotrope', sans-serif;
        font-size: 23px;
        line-height: 30px; /* 130% */
        font-weight: 400;
        text-align: center;
        color: #001D57;
        margin: 0 auto 32px;
    }
    
    /* Content-Wrapper für Step 2 Mobile */
    /* Abstände werden durch individuelle margin-Werte gesteuert, nicht durch gap */
    .form-step[data-step="2"] .content-wrapper {
        width: 270px;
        max-width: 100%;
        display: flex;
        flex-direction: column;
        gap: 0; /* Gap entfernt - Abstände werden durch margin-Werte gesteuert */
        margin: 0 auto;
    }
    
    /* Subtitle (Headline der Buttons) - Figma Frame 321/Frame 247 */
    /* Empty State: font-size 12px, height 17px | Filled State: font-size 11px, height 16px */
    /* display: flex entfernt - nur Text, kein Flex-Container */
    .form-step[data-step="2"] .fm-subtitle {
        width: 270px;
        max-width: 100%;
        font-family: 'Allotrope', sans-serif;
        font-size: 12px; /* Empty State - wird für Filled State auf 11px überschrieben */
        line-height: 142%; /* 17px für Empty State */
        height: 17px; /* Empty State */
        font-weight: 350;
        text-align: center;
        color: #001D57; /* Nicht #8598C0 wie Desktop, sondern #001D57 nach Figma */
        margin: 0 0 12px 0; /* Gap: 12px zwischen Subtitle und Toggle-Group (bleibt bestehen) */
    }
    
    /* Filled State: Subtitle wird kleiner (11px font-size, 16px height) */
    .form-step[data-step="2"] .content-wrapper:has(.toggle-btn.active) .fm-subtitle {
        font-size: 11px;
        line-height: 142%; /* 16px für Filled State */
        height: 16px;
    }
    
    /* Toggle-Group - Figma Frame 246/Frame 245 */
    /* Erste Toggle-Group hat margin-bottom: 49px für Abstand zur zweiten Toggle-Group */
    .form-step[data-step="2"] .toggle-group {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        gap: 8px;
        width: 270px;
        max-width: 100%;
        margin: 0;
    }
    
    /* Erste Toggle-Group: Abstand zur zweiten Toggle-Group = 49px */
    /* Abstand zwischen den beiden Toggle-Groups: 49px (Buttons in den Boxen haben oben und unten 49px Abstand) */
    .form-step[data-step="2"] .toggle-group:first-of-type {
        margin-bottom: 49px; /* Abstand zwischen den beiden Toggle-Groups: 49px (Buttons haben unten 49px Abstand) */
    }
    
    /* Zweite Toggle-Group: Kein margin-bottom (Abstand zum Button wird durch Button margin-top gesteuert) */
    .form-step[data-step="2"] .toggle-group:last-of-type {
        margin-bottom: 0; /* Kein margin-bottom - Abstand zum Button wird durch Button margin-top gesteuert */
    }
    
    /* Toggle-Button - Figma: 36px height, padding: 8px 20px, font-size: 15px, line-height: 13px */
    /* Button-Breiten variieren: Du: 58px, Sie: 60px, Ja: 55px, Nein: 70px */
    .form-step[data-step="2"] .toggle-btn {
        box-sizing: border-box;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        padding: 8px 20px;
        gap: 8px;
        height: 36px; /* Figma: 36px (nicht 37px!) */
        border: 1px solid #D4D7E0;
        border-radius: 12px;
        background: transparent; /* Empty State */
        font-family: 'Allotrope', sans-serif;
        font-size: 15px; /* Figma: 15px (nicht 14px!) */
        line-height: 13px; /* Figma: 13px (87% of 15px) */
        font-weight: 400;
        color: #001D57;
        text-align: center;
        /* Button-Breite wird automatisch durch padding und Text-Breite bestimmt */
        width: auto;
        min-width: fit-content;
        outline: none; /* Keine eckige Box beim Fokus */
        -webkit-tap-highlight-color: transparent; /* Keine eckige Box auf Mobile */
    }
    
    /* Toggle-Button Focus State - Keine eckige Box */
    .form-step[data-step="2"] .toggle-btn:focus {
        outline: none;
        box-shadow: none;
    }
    
    .form-step[data-step="2"] .toggle-btn:focus-visible {
        outline: none;
        box-shadow: none;
    }
    
    /* Spezifische Button-Breiten nach Figma */
    /* Du Button: 58px */
    .form-step[data-step="2"] .toggle-group[data-name="salutation"] .toggle-btn[data-value="du"] {
        width: 58px;
    }
    
    /* Sie Button: 60px */
    .form-step[data-step="2"] .toggle-group[data-name="salutation"] .toggle-btn[data-value="sie"] {
        width: 60px;
    }
    
    /* Ja Button: 55px */
    .form-step[data-step="2"] .toggle-group[data-name="gendering"] .toggle-btn[data-value="ja"] {
        width: 55px;
    }
    
    /* Nein Button: 70px */
    .form-step[data-step="2"] .toggle-group[data-name="gendering"] .toggle-btn[data-value="nein"] {
        width: 70px;
    }
    
    .form-step[data-step="2"] .toggle-btn.active {
        background: #E8FFE5;
        border: 1px solid #85FF77;
        color: #001D57;
    }
    
    /* Step 2 Button: Abstand von unterer Toggle-Group = 49px */
    /* Alle anderen Button-Styles werden von der allgemeinen Mobile-Button-Klasse übernommen */
    .form-step[data-step="2"] .btn-primary {
        margin: 49px auto 0; /* Abstand von unterer Toggle-Group zum Button "Fortfahren": 49px (Buttons haben unten 49px Abstand) */
    }
    
    /* ============================================
       STEP 3: Tonalität - MOBILE
       ============================================ */
    
    .form-step[data-step="3"] .fm-card-topbar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 48px;
        /* margin-bottom wird von der einheitlichen Regel übernommen (56px) */
        padding: 0 24px;
    }
    
    .form-step[data-step="3"] .back-link {
        font-family: 'Allotrope', sans-serif;
        font-size: 12px;
        line-height: 12px;
        font-weight: 350;
        color: #7856FF;
        text-decoration: underline;
    }
    
    .form-step[data-step="3"] .fm-stepper-info {
        font-family: 'Allotrope', sans-serif;
        font-size: 12px;
        line-height: 13px;
        font-weight: 400;
        color: #4C5D7F;
        text-align: right;
    }
    
    /* Headline - Figma Frame 349: 270px × 62px, gap: 12px */
    .form-step[data-step="3"] .fm-step-title {
        width: 270px;
        max-width: 100%;
        height: 62px; /* Figma: 62px height */
        font-family: 'Allotrope', sans-serif;
        font-size: 26px; /* Figma: 26px (nicht 23px!) */
        line-height: 120%; /* or 31px - Figma: 120% (nicht 130%!) */
        font-weight: 400;
        text-align: center;
        color: #001D57;
        margin: 0 0 12px 0; /* Gap: 12px zwischen Headline und Subtitle (Frame 349 gap) */
    }
    
    /* Subtitle - Figma: 270px × 12px, gap: 12px */
    .form-step[data-step="3"] .fm-subtitle {
        width: 270px;
        max-width: 100%;
        height: 12px; /* Figma: 12px height */
        font-family: 'Allotrope', sans-serif;
        font-size: 12px; /* Figma: 12px (nicht 14px!) */
        line-height: 142%; /* or 17px - Figma: 142% (nicht 20px!) */
        font-weight: 350;
        text-align: center;
        color: #001D57; /* Figma: #001D57 (nicht #8598C0!) */
        margin: 0 0 40px 0; /* Gap: 40px zwischen Subtitle und Chip-Group (Frame 333 gap) */
        /* display: flex entfernt - nur Text, kein Flex-Container */
    }
    
    /* Chip Group - Figma Frame 254: 240px × 273px, gap: 12px */
    .form-step[data-step="3"] .chip-group {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12px; /* Gap zwischen den Chips (Frame 254 gap) */
        width: 240px;
        max-width: 100%;
        margin: 0 auto 16px; /* Gap: 16px zwischen Chip-Group und Button (Frame 332 gap) */
    }
    
    /* Chip - Figma: Verschiedene Breiten, 45px height */
    /* Spezifische Breiten: 199px, 194px, 171px, 240px, 173px */
    .form-step[data-step="3"] .chip {
        box-sizing: border-box;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        padding: 16px; /* Figma: 16px (nicht 12px 16px!) */
        gap: 8px;
        height: 45px; /* Figma: 45px (nicht 37px!) */
        border: 1px solid #D4D7E0;
        border-radius: 12px;
        background: transparent; /* Empty State */
        font-family: 'Allotrope', sans-serif;
        font-size: 15px; /* Figma: 15px (nicht 14px!) */
        line-height: 13px; /* Figma: 13px (87% of 15px) */
        font-weight: 400;
        color: #001D57;
        text-align: center;
        outline: none; /* Keine eckige Box beim Fokus */
        -webkit-tap-highlight-color: transparent; /* Keine eckige Box auf Mobile */
        cursor: pointer;
        transition: all 0.2s ease;
    }
    
    /* Spezifische Chip-Breiten nach Figma */
    .form-step[data-step="3"] .chip-group > .chip:nth-child(1) {
        width: 199px; /* "Freundlich und nahbar" */
    }
    
    .form-step[data-step="3"] .chip-group > .chip:nth-child(2) {
        width: 194px; /* "Professionell und klar" */
    }
    
    .form-step[data-step="3"] .chip-group > .chip:nth-child(3) {
        width: 171px; /* "Seriös und formell" */
    }
    
    .form-step[data-step="3"] .chip-group > .chip:nth-child(4) {
        width: 240px; /* "Motivierend und inspirierend" */
    }
    
    .form-step[data-step="3"] .chip-group > .chip:nth-child(5) {
        width: 173px; /* "Modern und direkt" */
    }
    
    /* Chip Focus State - Keine eckige Box */
    .form-step[data-step="3"] .chip:focus {
        outline: none;
        box-shadow: none;
    }
    
    .form-step[data-step="3"] .chip:focus-visible {
        outline: none;
        box-shadow: none;
    }
    
    /* Chip Active State */
    .form-step[data-step="3"] .chip.active {
        background: #E8FFE5;
        border: 1px solid #85FF77;
        color: #001D57;
    }
    
    /* Step 3 Button: Spezifisches margin (16px auto 0) */
    /* Alle anderen Button-Styles werden von der allgemeinen Mobile-Button-Klasse übernommen */
    .form-step[data-step="3"] .btn-primary {
        margin: 16px auto 0; /* Gap: 16px zwischen Chip-Group und Button (Frame 332 gap) */
    }
    
    /* ============================================
       STEP 4: Benefits - MOBILE
       ============================================ */
    
    .form-step[data-step="4"] .fm-card-topbar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 48px;
        /* margin-bottom wird von der einheitlichen Regel übernommen (56px) */
        padding: 0 24px;
    }
    
    .form-step[data-step="4"] .back-link {
        font-family: 'Allotrope', sans-serif;
        font-size: 12px;
        line-height: 12px;
        font-weight: 350;
        color: #7856FF;
        text-decoration: underline;
    }
    
    .form-step[data-step="4"] .fm-stepper-info {
        font-family: 'Allotrope', sans-serif;
        font-size: 12px;
        line-height: 13px;
        font-weight: 400;
        color: #4C5D7F;
        text-align: right;
    }
    
    /* Headline - Figma Frame 349: 270px × 62px, font-size: 26px, line-height: 120% (31px) */
    /* Behandelt sowohl .fm-h1 als auch .fm-step-title (für Kompatibilität) */
    .form-step[data-step="4"] .fm-h1,
    .form-step[data-step="4"] .fm-step-title {
        width: 270px;
        max-width: 100%;
        height: 62px; /* Figma: 62px height */
        font-family: 'Allotrope', sans-serif;
        font-style: normal;
        font-weight: 400;
        font-size: 26px; /* Figma: 26px */
        line-height: 120%; /* or 31px - Figma: 120% */
        text-align: center;
        color: #001D57; /* Figma: #001D57 */
        margin: 56px auto 12px; /* Abstand oben: 56px (Navigation → Headline), Gap: 12px zwischen Headline und Subtitle (Frame 349 gap) */
        padding: 0;
        box-sizing: border-box;
    }
    
    /* Subtitle - Figma Frame 349: 270px × 34px, font-size: 12px, line-height: 142% (17px) */
    .form-step[data-step="4"] .fm-subtitle {
        width: 270px;
        max-width: 100%;
        height: 34px; /* Figma: 34px height */
        font-family: 'Allotrope', sans-serif;
        font-style: normal;
        font-weight: 350; /* Figma: 350 */
        font-size: 12px; /* Figma: 12px */
        line-height: 142%; /* or 17px - Figma: 142% */
        text-align: center; /* Figma: text-align: center */
        color: #001D57; /* Figma: #001D57 (nicht #8598C0!) */
        margin: 0 auto 0; /* Gap wird durch Container gap gesteuert */
        padding: 0;
        box-sizing: border-box;
    }
    
    /* Subtitle Small - display: flex entfernt für Step 4 Mobile */
    .form-step[data-step="4"] .fm-subtitle.small {
        display: block; /* display: flex entfernt */
        width: 270px;
        max-width: 100%;
        height: 34px; /* Figma: 34px height */
        font-family: 'Allotrope', sans-serif;
        font-style: normal;
        font-weight: 350; /* Figma: 350 */
        font-size: 12px; /* Figma: 12px */
        line-height: 142%; /* or 17px - Figma: 142% */
        text-align: center; /* Figma: text-align: center */
        color: #001D57; /* Figma: #001D57 (nicht #8598C0!) */
        margin: 0 auto 0; /* Gap wird durch Container gap gesteuert */
        padding: 0;
        box-sizing: border-box;
    }
    
    /* Category Toggle Container - Figma Frame 354: 270px × 219px, gap: 12px */
    /* NUR für Step 4 Mobile - ersetzt Tabs und Pill-Group */
    .form-step[data-step="4"] .tabs,
    .form-step[data-step="4"] .pill-group {
        display: none !important; /* Tabs und Pill-Group für Mobile ausblenden */
    }
    
    /* Category Toggle Container - Figma Frame 354 */
    /* NUR für Mobile sichtbar - Desktop zeigt weiterhin Tabs + Pills */
    .form-step[data-step="4"] .category-toggle-container {
        display: flex; /* Nur auf Mobile sichtbar (im Mobile-Block) */
        flex-direction: column;
        align-items: flex-start;
        gap: 12px; /* Gap zwischen den Zeilen */
        width: 270px;
        max-width: 100%;
        height: 219px; /* Figma: 219px height */
        margin: 40px auto 0; /* Nur nach oben: 40px Außenabstand */
    }
    
    /* Category Toggle Row - Figma Frame 352/353/354: 270px × 65px, gap: 12px */
    .form-step[data-step="4"] .category-toggle-row {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 12px; /* Gap zwischen Row und Buttons */
        width: 270px;
        max-width: 100%;
        height: 65px; /* Figma: 65px height */
    }
    
    /* Category Toggle Buttons Container - Figma Frame 350: 270px × 65px, gap: 12px */
    .form-step[data-step="4"] .category-toggle-buttons {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: flex-start;
        align-content: flex-start;
        gap: 12px; /* Gap zwischen den Buttons */
        width: 270px;
        max-width: 100%;
        height: 65px; /* Figma: 65px height */
    }
    
    /* Category Toggle Button - Figma: 129px × 65px */
    .form-step[data-step="4"] .category-toggle-btn {
        box-sizing: border-box;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        padding: 26px 16px; /* Figma: 26px 16px */
        gap: 8px;
        width: 129px; /* Figma: 129px width */
        height: 65px; /* Figma: 65px height */
        border: 1px solid #D4D7E0; /* Empty State */
        border-radius: 12px;
        background: transparent; /* Empty State */
        font-family: 'Allotrope', sans-serif;
        font-style: normal;
        font-weight: 400;
        font-size: 15px;
        line-height: 13px; /* 87% of 15px, identical to box height */
        text-align: center;
        color: #001D57;
        cursor: pointer;
        transition: none; /* Keine Animation */
        outline: none; /* Keine eckige Box beim Fokus */
        -webkit-tap-highlight-color: transparent; /* Keine eckige Box auf Mobile/Touch */
        flex: 1; /* Flex-grow: 1 für gleichmäßige Verteilung */
        flex-grow: 1;
    }
    
    /* Category Toggle Button Active State */
    .form-step[data-step="4"] .category-toggle-btn.active {
        background: #F6FFF5; /* Figma: #F6FFF5 */
        border: 1px solid #85FF77; /* Figma: #85FF77 */
        color: #001D57;
    }
    
    /* Category Toggle Button Focus State - Keine eckige Box */
    .form-step[data-step="4"] .category-toggle-btn:focus {
        outline: none;
        box-shadow: none;
    }
    
    .form-step[data-step="4"] .category-toggle-btn:focus-visible {
        outline: none;
        box-shadow: none;
    }
    
    /* Benefit Modal - Figma Frame 362: 350px × 486px */
    /* NUR für Step 4 Mobile */
    .form-step[data-step="4"] .benefit-modal {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 10000;
        display: none; /* Wird durch JavaScript gesteuert */
    }
    
    .form-step[data-step="4"] .benefit-modal.active {
        display: block !important; /* Überschreibt Desktop display: none */
    }
    
    /* Desktop/Mobile Text Toggle für Step 4 Mobile */
    .form-step[data-step="4"] .fm-h1 .desktop-text,
    .form-step[data-step="4"] .fm-subtitle .desktop-text {
        display: none; /* Desktop-Text auf Mobile ausblenden */
    }
    
    .form-step[data-step="4"] .fm-h1 .mobile-text,
    .form-step[data-step="4"] .fm-subtitle .mobile-text {
        display: block; /* Mobile-Text auf Mobile anzeigen */
    }
    
    /* Modal Overlay */
    .form-step[data-step="4"] .benefit-modal-overlay {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
    }
    
    /* Modal Content - Figma Frame 362 */
    /* Height passt sich an Inhalt an - alle Pills müssen sichtbar sein */
    .form-step[data-step="4"] .benefit-modal-content {
        position: absolute;
        left: 13px;
        bottom: 0;
        width: 350px;
        max-width: calc(100% - 26px);
        height: auto; /* Auto height - passt sich an Inhalt an */
        min-height: 486px; /* Min height nach Figma */
        max-height: 90vh; /* Max height: 90% der Viewport-Höhe */
        background: #FFFFFF;
        box-shadow: 0px -199px 79px rgba(29, 32, 53, 0.01), 0px -112px 67px rgba(29, 32, 53, 0.05), 0px -50px 50px rgba(29, 32, 53, 0.09), 0px -12px 27px rgba(29, 32, 53, 0.1);
        border-radius: 32px 32px 0px 0px;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: flex-end;
        padding: 40px; /* Padding: 40px überall */
        gap: 10px;
        box-sizing: border-box;
        overflow: visible; /* Pills müssen sichtbar sein */
    }
    
    /* Modal Body - Figma Frame 361: 270px × 406px */
    /* Height passt sich an Inhalt an - alle Pills müssen sichtbar sein */
    .form-step[data-step="4"] .benefit-modal-body {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 32px;
        width: 270px;
        max-width: 100%;
        height: auto; /* Auto height - passt sich an Inhalt an */
        min-height: 0;
        max-height: none; /* Keine max-height - alle Pills müssen sichtbar sein */
        order: 0;
        flex-grow: 0;
        box-sizing: border-box;
        overflow: visible; /* Pills dürfen sichtbar sein */
    }
    
    /* Modal Header - Figma Frame 363: 270px × 12px */
    .form-step[data-step="4"] .benefit-modal-header {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        gap: 32px;
        width: 270px;
        max-width: 100%;
        height: 12px;
        margin-bottom: 0; /* Gap wird durch content-inner gap gesteuert */
    }
    
    /* Modal Content Inner - Figma Frame 360: 270px × 326px */
    /* Height passt sich an Inhalt an - alle Pills müssen sichtbar sein */
    .form-step[data-step="4"] .benefit-modal-content-inner {
        width: 270px;
        max-width: 100%;
        height: auto; /* Auto height - passt sich an Inhalt an */
        min-height: 0;
        max-height: none; /* Keine max-height - alle Pills müssen sichtbar sein */
        box-sizing: border-box;
        overflow: visible; /* Pills dürfen sichtbar sein */
    }
    
    /* Modal Close Button */
    .form-step[data-step="4"] .benefit-modal-close {
        width: 50px;
        height: 12px;
        font-family: 'Allotrope', sans-serif;
        font-style: normal;
        font-weight: 350;
        font-size: 12px;
        line-height: 12px; /* 100% */
        display: flex;
        align-items: center;
        text-decoration-line: underline;
        color: #7856FF;
        background: transparent;
        border: none;
        padding: 0;
        cursor: pointer;
        outline: none;
        -webkit-tap-highlight-color: transparent;
    }
    
    .form-step[data-step="4"] .benefit-modal-close:focus {
        outline: none;
        box-shadow: none;
    }
    
    /* Modal Title - "Benefits auswählen" */
    .form-step[data-step="4"] .benefit-modal-title {
        width: auto;
        min-width: 127px;
        height: 11px;
        font-family: 'Allotrope', sans-serif;
        font-style: normal;
        font-weight: 400;
        font-size: 14.83px;
        line-height: 11px; /* 74% */
        display: flex;
        align-items: center;
        color: #001D57;
        margin: 0 0 20px 0;
        white-space: nowrap; /* Text in einer Zeile */
    }
    
    /* Modal Pills Container - Figma Frame 263: 240px × 251px */
    /* Scrollbar entfernt - alle Pills müssen sichtbar sein, bleiben in Box */
    .form-step[data-step="4"] .benefit-modal-pills {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: flex-start;
        align-content: flex-start;
        gap: 8px;
        width: 240px;
        max-width: 100%;
        height: auto; /* Auto height - passt sich an Inhalt an, alle Pills sichtbar */
        min-height: 0;
        max-height: none; /* Keine max-height - alle Pills müssen sichtbar sein */
        overflow: visible; /* Kein Scrollbar - alle Pills sichtbar, bleiben in Box durch Container overflow */
        box-sizing: border-box;
    }
    
    /* Modal Pill Button - Figma: Verschiedene Breiten, 29px height */
    .form-step[data-step="4"] .benefit-modal-pill {
        box-sizing: border-box;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        padding: 10px 12px;
        gap: 8px;
        height: 29px; /* Figma: 29px height */
        border: 1px solid #D4D7E0;
        border-radius: 8px;
        background: transparent; /* Empty State */
        font-family: 'Allotrope', sans-serif;
        font-style: normal;
        font-weight: 400;
        font-size: 13px;
        line-height: 9px; /* 69% */
        text-align: center;
        color: #0B2965;
        cursor: pointer;
        transition: none;
        outline: none;
        -webkit-tap-highlight-color: transparent;
        /* Width wird durch Text-Breite bestimmt */
        width: auto;
        min-width: fit-content;
    }
    
    /* Modal Pill Active State */
    .form-step[data-step="4"] .benefit-modal-pill.active {
        background: #E8FFE5;
        border: 1px solid #85FF77;
        color: #0B2965;
    }
    
    /* Modal Pill Focus State */
    .form-step[data-step="4"] .benefit-modal-pill:focus {
        outline: none;
        box-shadow: none;
    }
    
    /* Modal Footer - Figma: 270px × 48px */
    .form-step[data-step="4"] .benefit-modal-footer {
        width: 270px;
        max-width: 100%;
        height: 48px;
        margin-top: 0; /* Kein Abstand nach oben */
        margin-bottom: 0; /* Kein doppelter Abstand - wird durch Modal Content padding-bottom (40px) gesteuert */
    }
    
    /* Modal Apply Button - Figma: 270px × 48px */
    .form-step[data-step="4"] .benefit-modal-apply {
        box-sizing: border-box;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        padding: 8px 15px;
        gap: 10px;
        width: 270px;
        max-width: 100%;
        height: 48px;
        background: #F3F5FA;
        border: 2px solid #7856FF;
        border-radius: 16px;
        font-family: 'Allotrope', sans-serif;
        font-style: normal;
        font-weight: 400;
        font-size: 15px;
        line-height: 12px; /* 80% */
        letter-spacing: 0.01em;
        color: #001D57;
        cursor: pointer;
        outline: none;
        -webkit-tap-highlight-color: transparent;
    }
    
    .form-step[data-step="4"] .benefit-modal-apply:focus {
        outline: none;
        box-shadow: none;
    }
    
    /* Step 4 Button: Spezifisches margin (40px auto 0) */
    /* Alle anderen Button-Styles werden von der allgemeinen Mobile-Button-Klasse übernommen */
    .form-step[data-step="4"] .btn-primary {
        margin: 40px auto 0; /* Abstand oben: 40px (statt 16px) */
    }
    
    /* Extra small screens (320px) - Category Toggle Buttons anpassen */
    @media (max-width: 375px) {
        .form-step[data-step="4"] .fm-step-title {
            font-size: 16px;
            line-height: 22px;
        }
        
        .form-step[data-step="4"] .fm-subtitle {
            font-size: 11px;
            line-height: 15px;
        }
        
        /* Category Toggle Buttons für sehr kleine Screens */
        .form-step[data-step="4"] .category-toggle-btn {
            font-size: 14px;
            padding: 24px 12px;
        }
    
    /* ============================================
       STEP 5: Branding (Logo & Farben) - MOBILE
       ============================================ */
    /* 
     * WICHTIG: Alle Mobile Step 5 Styles wurden entfernt und werden komplett neu aufgebaut.
     * Siehe Neuer Aufbau unten.
     */
    
    /* ============================================
       MOBILE: Desktop-Elemente verstecken - STEP 5
       ============================================ */
    /* Mobile: Desktop-Upload-Section komplett verstecken */
    .form-step[data-step="5"] .upload-section:not(.upload-section-mobile) {
        display: none !important;
    }
    
    /* Mobile: Desktop-Color-Section komplett verstecken */
    .form-step[data-step="5"] .color-section:not(.color-section-mobile) {
        display: none !important;
    }
    
    /* ============================================
       STEP 5 MOBILE: Kompletter Neubau nach Figma
       ============================================ */
    
    /* Frame 357: Container für beide Boxen - Empty State */
    .form-step[data-step="5"] .step5-mobile-container {
        display: flex !important; /* Überschreibt inline-style="display: none" */
        flex-direction: column;
        align-items: flex-start;
        padding: 0px;
        gap: 12px; /* Nach Figma: 12px gap zwischen Boxen */
        width: 270px; /* Nach Figma: 270px width */
        height: auto; /* Auto height, passt sich an Inhalt an (Empty State) */
        flex: none;
        order: 1 !important; /* Nach Headline/Subtitle, VOR Button */
        align-self: stretch;
        flex-grow: 0;
        margin: 40px auto 0; /* Nach Figma: 40px margin-top, zentriert */
        visibility: visible !important;
    }
    
    /* Frame 359: Container für beide Boxen - Flexible Height durch Abstände */
    .form-step[data-step="5"] .step5-mobile-container {
        height: auto; /* Flexible Höhe, passt sich an Inhalt an */
    }
    
    /* Frame 289: Upload-Box Mobile - Flexible Height durch Abstände */
    .form-step[data-step="5"] .step5-mobile-upload-box {
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        justify-content: flex-start; /* Start oben, nicht zentriert */
        align-items: center;
        padding: 20px; /* 20px oben (zum Title), 20px unten (zum Button), 20px links/rechts */
        gap: 10px; /* Nach Figma: 10px gap zwischen Elementen */
        width: 270px; /* Nach Figma: 270px width */
        height: auto; /* Flexible Höhe, passt sich an Inhalt an */
        border: 1px solid #D4D7E0;
        border-radius: 16px;
        background: transparent;
        flex: none;
        order: 0;
        align-self: stretch;
        flex-grow: 0;
    }
    
    /* Frame 289: Upload-Box Mobile - Filled State */
    .form-step[data-step="5"] .step5-mobile-upload-box.has-logo {
        height: auto; /* Flexible Höhe, passt sich an Inhalt an */
        background: #F6FFF5;
        border: 1px solid #85FF77;
    }
    
    /* Frame 277: Title Wrapper Mobile */
    .form-step[data-step="5"] .step5-mobile-title-wrapper {
        display: flex;
        flex-direction: row;
        align-items: center;
        padding: 0px;
        gap: 8px; /* Nach Figma: 8px gap */
        width: 135px; /* Nach Figma: 135px width */
        height: 13px; /* Nach Figma: 13px height */
        flex: none;
        order: 0;
        flex-grow: 0;
    }
    
    /* Group 276: Upload-Box Title Mobile - "Firmenlogo hochladen" */
    .form-step[data-step="5"] .step5-mobile-upload-box .upload-box-title {
        font-family: 'Allotrope', sans-serif;
        font-style: normal;
        font-weight: 400;
        font-size: 11.83px; /* Nach Figma: 11.83px */
        line-height: 11px; /* Nach Figma: 11px line-height (identical to box height, or 93%) */
        display: flex;
        align-items: center;
        color: #001D57;
        width: 114px; /* Nach Figma: 114px width */
        height: 11px; /* Nach Figma: 11px height */
        white-space: nowrap; /* Verhindert Text-Umbruch */
        flex: none;
        order: 0;
        flex-grow: 0;
    }
    
    /* Logo Placeholder Wrapper Mobile - sichtbar (Container für Placeholder UND Preview) */
    .form-step[data-step="5"] .step5-mobile-upload-box #logo-placeholder-wrapper-mobile {
        display: flex !important; /* Immer sichtbar, enthält Placeholder ODER Preview */
        flex-direction: column;
        justify-content: center;
        align-items: center;
        flex: none;
        order: 1; /* Zwischen Title (order: 0) und Button (order: 2) */
        flex-grow: 0;
        min-height: 0; /* Verhindert, dass versteckte Kinder die Höhe beeinflussen */
    }
    
    /* Logo Placeholder Mobile - verstecken wenn Logo vorhanden */
    .form-step[data-step="5"] .step5-mobile-upload-box #logo-placeholder-mobile {
        display: none; /* Wird durch JavaScript versteckt wenn Logo vorhanden */
    }
    
    /* Frame 275: Logo Preview Wrapper Mobile - Initial versteckt, wird durch JavaScript angezeigt */
    .form-step[data-step="5"] .step5-mobile-upload-box #logo-preview-wrapper-mobile {
        display: none; /* Initial versteckt, wird durch JavaScript.show() angezeigt */
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 0px;
        gap: 7px; /* Nach Figma: 7px gap */
        width: 126px; /* Nach Figma: 126px width */
        height: auto; /* Auto height, passt sich an Logo-Größe an */
        flex: none;
        order: 0; /* Innerhalb des Wrappers */
        flex-grow: 0;
    }
    
    /* Logo Preview Wrapper Mobile - Sichtbar wenn Logo vorhanden (wird durch JavaScript gesteuert) */
    .form-step[data-step="5"] .step5-mobile-upload-box #logo-preview-wrapper-mobile[style*="display: flex"],
    .form-step[data-step="5"] .step5-mobile-upload-box #logo-preview-wrapper-mobile[style*="display:block"] {
        display: flex !important; /* Sichtbar wenn durch JavaScript angezeigt */
    }
    
    /* Logo Preview Image Mobile - Größenbegrenzung */
    .form-step[data-step="5"] .step5-mobile-upload-box #logo-preview-img-mobile {
        max-width: 100px; /* Sinnvolle Begrenzung */
        max-height: 60px; /* Sinnvolle Begrenzung */
        width: auto;
        height: auto;
        object-fit: contain;
        flex: none;
        order: 0;
        flex-grow: 0;
        position: relative; /* Für absolut positioniertes Remove-Button */
    }
    
    /* Mobile Logo Remove Button - IMMER versteckt (wird durch JavaScript gesteuert) */
    .form-step[data-step="5"] .step5-mobile-upload-box #logo-remove-btn-mobile {
        display: none !important; /* Standardmäßig IMMER versteckt, nur JavaScript kann es anzeigen */
    }
    
    /* Logo Filename Mobile - Filled State */
    .form-step[data-step="5"] .step5-mobile-upload-box #logo-preview-wrapper-mobile::after {
        content: attr(data-filename);
        font-family: 'Allotrope', sans-serif;
        font-style: normal;
        font-weight: 500;
        font-size: 8px; /* Nach Figma: 8px */
        line-height: 13px; /* Nach Figma: 13px line-height (identical to box height, or 162%) */
        display: flex;
        align-items: center;
        color: #001D57;
        width: 56px; /* Nach Figma: 56px width */
        height: 13px; /* Nach Figma: 13px height */
        flex: none;
        order: 1;
        flex-grow: 0;
    }
    
    /* Desktop/Mobile Text-Toggle für Step 5 Subtitle Mobile */
    .form-step[data-step="5"] .fm-subtitle .desktop-text {
        display: none;
    }
    
    .form-step[data-step="5"] .fm-subtitle .mobile-text {
        display: block;
    }
    
    /* button-lila-sub.kontur: Upload Button Mobile - "Logo auswählen" / "Logo ändern" */
    .form-step[data-step="5"] .step5-mobile-upload-btn {
        box-sizing: border-box;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        padding: 12px 20px; /* Nach Figma: 12px 20px padding */
        gap: 8px; /* Nach Figma: 8px gap */
        width: 126px; /* Nach Figma: 126px width */
        height: 36px; /* Nach Figma: 36px height */
        background: rgba(246, 244, 255, 0.37); /* Nach Figma */
        border: 1px solid #E3DCFD;
        border-radius: 12px; /* Nach Figma: 12px border-radius */
        font-family: 'Allotrope', sans-serif;
        font-style: normal;
        font-weight: 400;
        font-size: 11.83px; /* Nach Figma: 11.83px */
        line-height: 12px; /* Nach Figma: 12px line-height (identical to box height, or 101%) */
        flex: none;
        order: 2; /* Nach Logo Preview (order: 1) */
        flex-grow: 0;
        text-align: center;
        color: #0B2965;
        cursor: pointer;
        margin: 0;
        outline: none;
        -webkit-tap-highlight-color: transparent;
    }
    
    /* Upload Button Mobile - Filled State (Border ändert sich) */
    .form-step[data-step="5"] .step5-mobile-upload-box.has-logo .step5-mobile-upload-btn {
        order: 2; /* Filled State: order 2 */
        border: 1px solid #7856FF; /* Nach Figma: 1px solid #7856FF */
    }
    
    /* Upload Button Mobile - Disabled State */
    .form-step[data-step="5"] .step5-mobile-upload-btn:disabled {
        opacity: 0.6;
        cursor: not-allowed;
        pointer-events: none;
    }
    
    /* Frame 290: Color-Box Mobile - Empty State */
    .form-step[data-step="5"] .step5-mobile-color-box {
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 20px; /* Nach Figma: 20px padding */
        gap: 10px; /* Nach Figma: 10px gap */
        width: 270px; /* Nach Figma: 270px width */
        height: 99px; /* Nach Figma: 99px height (Empty State) */
        border: 1px solid #D4D7E0;
        border-radius: 16px;
        background: transparent;
        flex: none;
        order: 1;
        align-self: stretch;
        flex-grow: 0;
    }
    
    /* Frame 290: Color-Box Mobile - Filled State */
    .form-step[data-step="5"] .step5-mobile-color-box.has-color {
        height: 99.46px; /* Nach Figma: 99.46px height (Filled State) */
        background: #F6FFF5;
        border: 1px solid #85FF77;
    }
    
    /* Frame 292: Color Preview Wrapper Mobile - Filled State - sichtbar machen */
    .form-step[data-step="5"] .step5-mobile-color-box.has-color .step5-mobile-color-preview-wrapper {
        display: flex !important; /* Sichtbar machen wenn Farbe ausgewählt */
    }
    
    /* Frame 277: Color Title Wrapper Mobile */
    .form-step[data-step="5"] .step5-mobile-color-title-wrapper {
        display: flex;
        flex-direction: row;
        align-items: center;
        padding: 0px;
        gap: 8px; /* Nach Figma: 8px gap */
        width: 156px; /* Nach Figma: 156px width */
        height: 13px; /* Nach Figma: 13px height */
        flex: none;
        order: 0;
        flex-grow: 0;
    }
    
    /* Group 276: Color Title Mobile - "Wählen Sie eine Farbe aus" */
    .form-step[data-step="5"] .step5-mobile-color-title {
        font-family: 'Allotrope', sans-serif;
        font-style: normal;
        font-weight: 400;
        font-size: 11.83px; /* Nach Figma: 11.83px */
        line-height: 11px; /* Nach Figma: 11px line-height (identical to box height, or 93%) */
        width: 135px; /* Nach Figma: 135px width */
        height: 11px; /* Nach Figma: 11px height */
        display: flex;
        align-items: center;
        color: #001D57;
        white-space: nowrap; /* Verhindert Text-Umbruch */
        flex: none;
        order: 0;
        flex-grow: 0;
    }
    
    /* Frame 292: Preview + Button Row Container Mobile */
    .form-step[data-step="5"] .step5-mobile-color-preview-button-wrapper {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: flex-start;
        padding: 0px;
        gap: 10px; /* Nach Figma: 10px gap zwischen Preview und Button */
        width: 170.31px; /* Nach Figma: 170.31px width */
        height: 36.46px; /* Nach Figma: 36.46px height */
        flex: none;
        order: 1;
        flex-grow: 0;
    }
    
    /* Frame 292: Color Preview Wrapper Mobile - Filled State */
    .form-step[data-step="5"] .step5-mobile-color-preview-wrapper {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: flex-start;
        padding: 0px;
        gap: 0px;
        width: auto; /* Passt sich an Inhalt an */
        height: 36px; /* Nach Figma: 36.46px height */
        flex: none;
        order: 0; /* Links neben Button */
        flex-grow: 0;
    }
    
    /* Rectangle 97: Color Preview Swatch Mobile */
    .form-step[data-step="5"] .step5-mobile-color-preview {
        width: 34px; /* Nach Figma: 34.31px width */
        height: 36px; /* Nach Figma: 36.46px height */
        background: #651FFF; /* Wird durch JavaScript gesetzt */
        border: 2px solid #DAD1FF;
        border-radius: 4px;
        flex: none;
        order: 0;
        flex-grow: 0;
    }
    
    /* Loading Spinner Mobile - während KI-Analyse an Stelle des Buttons */
    .form-step[data-step="5"] .step5-mobile-color-preview-button-wrapper #color-ai-loading-mobile {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 126px; /* Gleiche Breite wie Button */
        height: 36px; /* Gleiche Höhe wie Button */
        flex: none;
        order: 1; /* Gleiche Position wie Button */
        flex-grow: 0;
    }
    
    /* button-lila-sub.kontur: Color Button Mobile - "Farbwähler" / "Farbe ändern" */
    .form-step[data-step="5"] .step5-mobile-color-preview-button-wrapper .step5-mobile-color-btn {
        box-sizing: border-box;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        padding: 12px 20px; /* Nach Figma: 12px 20px padding */
        gap: 8px; /* Nach Figma: 8px gap */
        width: 126px; /* Nach Figma: 126px width */
        height: 36px; /* Nach Figma: 36px height */
        background: rgba(246, 244, 255, 0.37); /* Nach Figma */
        border: 1px solid #E3DCFD;
        border-radius: 12px; /* Nach Figma: 12px border-radius */
        font-family: 'Allotrope', sans-serif;
        font-style: normal;
        font-weight: 400;
        font-size: 11.83px; /* Nach Figma: 11.83px */
        flex: none;
        order: 1; /* Rechts neben Preview */
        flex-grow: 0;
        line-height: 12px; /* Nach Figma: 12px line-height (identical to box height, or 101%) */
        text-align: center;
        color: #0B2965;
        cursor: pointer;
        margin: 0;
        outline: none;
        -webkit-tap-highlight-color: transparent;
    }
    
    /* Color Button Mobile - Filled State (Border ändert sich) */
    .form-step[data-step="5"] .step5-mobile-color-box.has-color .step5-mobile-color-btn {
        order: 1; /* Bleibt order: 1 */
        border: 1px solid #7856FF; /* Nach Figma: 1px solid #7856FF */
    }
    
    /* Color Button Mobile - Disabled State */
    .form-step[data-step="5"] .step5-mobile-color-btn:disabled {
        opacity: 0.6;
        cursor: not-allowed;
        pointer-events: none;
    }
    
    /* Button "Fortfahren" Mobile - NACH Mobile-Container (Frame 357) */
    /* Nach Figma: gap von 40px zwischen Frame 357 und Button */
    /* WICHTIG: Button ist außerhalb des Containers, daher Adjacent-Selektor */
    .form-step[data-step="5"] .step5-mobile-container + .btn-primary {
        margin-top: 40px !important; /* Nach Figma: 40px gap zwischen Container und Button */
        width: 270px !important; /* Nach Figma: 270px width */
        height: 48px !important; /* Nach Figma: 48px height */
        margin-left: auto; /* Zentriert */
        margin-right: auto; /* Zentriert */
        display: flex !important; /* Sicherstellen dass Button sichtbar ist */
    }
    
    /* Sicherstellen: Button kommt NACH Container (nicht innerhalb) */
    /* WICHTIG: Button ist außerhalb des Containers im HTML, daher muss der Container nicht order haben */
    .form-step[data-step="5"].active {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }
    
    /* Button sollte NACH Container kommen (Mobile) */
    .form-step[data-step="5"].active .btn-primary {
        order: 2 !important; /* Nach Container (Container hat order: 1) */
        margin-top: 40px !important; /* Nach Figma: 40px gap zwischen Container und Button */
    }
    
    /* Button Empty State Mobile - Step 5 */
    .form-step[data-step="5"] .btn-primary.is-disabled,
    .form-step[data-step="5"] .btn-primary:disabled {
        padding: 8px 15px !important; /* Nach Figma: 8px 15px padding (Empty State) */
        background: #F3F5FA !important; /* Nach Figma: #F3F5FA */
        border-radius: 16px;
        border: none !important;
        box-shadow: none !important;
        color: #8598C0 !important; /* Nach Figma: #8598C0 (Empty State) */
        font-size: 15px !important; /* Nach Figma: 15px */
        line-height: 12px !important; /* Nach Figma: 12px line-height (identical to box height, or 80%) */
        letter-spacing: 0.01em;
    }
    
    /* Button Filled State Mobile - Step 5 */
    .form-step[data-step="5"] .btn-primary:not(.is-disabled):not(:disabled) {
        box-sizing: border-box;
        padding: 16px 15px !important; /* Nach Figma: 16px 15px padding (Filled State) */
        background: #7856FF !important; /* Nach Figma: #7856FF */
        border: 2px solid #E3DCFD !important; /* Nach Figma: 2px solid #E3DCFD */
        box-shadow: 0px 14px 6px rgba(120, 86, 255, 0.02),
                    0px 8px 5px rgba(120, 86, 255, 0.07),
                    0px 4px 4px rgba(120, 86, 255, 0.11),
                    0px 1px 2px rgba(120, 86, 255, 0.13) !important; /* Nach Figma */
        border-radius: 16px;
        color: #FFFFFF !important; /* Nach Figma: #FFFFFF (Filled State) */
        font-size: 15.14px !important; /* Nach Figma: 15.14px (Filled State) */
        line-height: 12px !important; /* Nach Figma: 12px line-height (identical to box height, or 79%) */
        letter-spacing: 0.01em;
    }
    
    /* ============================================
       GENERAL MOBILE ADJUSTMENTS
       ============================================ */
    
    .fm-content {
        padding: 24px 16px 32px;
    }
    
    .form-grid {
        grid-template-columns: 1fr;
    }
    
    .form-grid .span-2 {
        grid-column: span 1;
    }
}

/* ============================================
   DESKTOP: Mobile-Elemente verstecken - STEP 5
   ============================================ */
/* 
 * WICHTIG: Diese Regeln stehen AUSSERHALB des Mobile-Blocks
 * und greifen nur auf Desktop (min-width: 768px)
 */
@media (min-width: 768px) {
    /* ============================================
       DESKTOP: Mobile-Container KOMPLETT verstecken
       ============================================ */
    /* Desktop: Mobile-Container selbst verstecken (mehrfache Absicherung) */
    .form-step[data-step="5"] .step5-mobile-container {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        width: 0 !important;
        overflow: hidden !important;
        position: absolute !important;
        left: -9999px !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
    
    /* Desktop: ALLE Mobile-Elemente innerhalb des Mobile-Containers verstecken (universeller Selektor) */
    .form-step[data-step="5"] .step5-mobile-container,
    .form-step[data-step="5"] .step5-mobile-container *,
    .form-step[data-step="5"] .step5-mobile-container::before,
    .form-step[data-step="5"] .step5-mobile-container::after {
        display: none !important;
        visibility: hidden !important;
    }
    
    /* Desktop: Alle Mobile-spezifischen Elemente verstecken (explizite Liste) */
    .form-step[data-step="5"] .step5-mobile-upload-box,
    .form-step[data-step="5"] .step5-mobile-color-box,
    .form-step[data-step="5"] .upload-section-mobile,
    .form-step[data-step="5"] .color-section-mobile,
    .form-step[data-step="5"] .step5-mobile-title-wrapper,
    .form-step[data-step="5"] .step5-mobile-color-title-wrapper,
    .form-step[data-step="5"] .step5-mobile-color-preview-wrapper {
        display: none !important;
        visibility: hidden !important;
    }
    
    /* Desktop: Mobile-Buttons verstecken */
    .form-step[data-step="5"] .step5-mobile-upload-btn,
    .form-step[data-step="5"] .step5-mobile-color-btn,
    .form-step[data-step="5"] #fm-upload-btn-mobile,
    .form-step[data-step="5"] #open-color-modal-btn-mobile {
        display: none !important;
        visibility: hidden !important;
    }
    
    /* Desktop: Mobile-Logo-Elemente verstecken */
    .form-step[data-step="5"] #logo-placeholder-wrapper-mobile,
    .form-step[data-step="5"] #logo-placeholder-mobile,
    .form-step[data-step="5"] #logo-preview-wrapper-mobile,
    .form-step[data-step="5"] #logo-preview-img-mobile,
    .form-step[data-step="5"] #logo-remove-btn-mobile,
    .form-step[data-step="5"] #logo-loading-overlay-mobile,
    .form-step[data-step="5"] #company_logo_mobile {
        display: none !important;
        visibility: hidden !important;
    }
    
    /* Desktop: Mobile-Color-Elemente verstecken */
    .form-step[data-step="5"] #selected-color-swatch-display-mobile,
    .form-step[data-step="5"] #color-picker-btn-text-mobile,
    .form-step[data-step="5"] #ai-badge-mobile,
    .form-step[data-step="5"] #brand_color_input_mobile,
    .form-step[data-step="5"] .step5-mobile-color-preview {
        display: none !important;
        visibility: hidden !important;
    }
    
    /* Desktop: Desktop-Struktur sichtbar machen */
    .form-step[data-step="5"] .upload-section:not(.upload-section-mobile) {
        display: block !important;
        visibility: visible !important;
    }
    
    .form-step[data-step="5"] .color-section:not(.color-section-mobile) {
        display: block !important;
        visibility: visible !important;
    }
    
    /* Desktop: Desktop-Upload-Box sichtbar machen */
    .form-step[data-step="5"] .upload-section:not(.upload-section-mobile) .upload-box {
        display: flex !important;
        visibility: visible !important;
    }
    
    /* Desktop: Desktop-Color-Palette sichtbar machen */
    .form-step[data-step="5"] .color-section:not(.color-section-mobile) .color-palette-desktop {
        display: block !important;
        visibility: visible !important;
    }
    
    /* Desktop: Desktop-Color-Picker-Button verstecken (wird nur auf Mobile verwendet) */
    .form-step[data-step="5"] .color-section:not(.color-section-mobile) #open-color-modal-btn {
        display: none !important;
    }
}

/* ============================================
   7. MOBILE COLOR PICKER MODAL
   ============================================ */
/* 
 * Versteckt standardmäßig, wird nur auf Mobile angezeigt.
 * Bottom-Sheet Design für Step 5 (Branding).
 */
.fm-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
}
.fm-modal.is-open {
    display: block;
    animation: fadeIn 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
.fm-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 29, 87, 0.15);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.fm-modal-content {
    /* Nach Figma Frame 361: Auto layout */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 40px; /* Padding für Inhalt */
    gap: 32px;
    width: 90%;
    max-width: 376px; /* Breiter für bessere Sichtbarkeit */
    min-height: 325.46px; /* Min-Höhe statt feste Höhe */
    height: auto; /* Passt sich an Inhalt an */
    /* Inside auto layout */
    flex: none;
    order: 0;
    flex-grow: 1;
    /* Positionierung (bestehend) */
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%) translateY(100%);
    background: #FFFFFF;
    border-radius: 45px 45px 0 0;
    box-shadow: 0px 117px 47px rgba(10, 0, 51, 0.01), 0px 66px 39px rgba(10, 0, 51, 0.02), 0px 29px 29px rgba(10, 0, 51, 0.04), 0px 7px 16px rgba(10, 0, 51, 0.05);
    box-sizing: border-box;
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    overflow-y: auto; /* Scrollbar falls nötig */
}
.fm-modal.is-open .fm-modal-content {
    transform: translateX(-50%) translateY(0);
    animation: slideUp 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}
@keyframes slideUp {
    from {
        transform: translateX(-50%) translateY(100%);
    }
    to {
        transform: translateX(-50%) translateY(0);
    }
}
.fm-modal-header {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 0;
    width: 100%;
}

/* Schließen Button - Nach Figma */
.fm-modal-close {
    width: auto; /* Passt sich an Text an */
    height: 12px;
    font-family: 'Allotrope', sans-serif;
    font-style: normal;
    font-weight: 350;
    font-size: 12px;
    line-height: 12px;
    /* identical to box height, or 100% */
    display: flex;
    align-items: center;
    text-decoration-line: underline;
    color: #7856FF !important; /* Lila Farbe, keine rote */
    /* Inside auto layout */
    flex: none;
    order: 0;
    align-self: flex-start; /* Links ausrichten */
    flex-grow: 0;
    background: none !important;
    border: none !important;
    cursor: pointer;
    padding: 0 !important;
    outline: none; /* Keine Focus-Umrandung */
    box-shadow: none !important; /* Keine Box-Shadow */
}

/* Schließen Button - Keine Active/Focus/Hover States mit Umrandung */
.fm-modal-close:hover,
.fm-modal-close:focus,
.fm-modal-close:active,
.fm-modal-close:focus-visible {
    color: #7856FF !important; /* Lila bleibt */
    text-decoration-line: underline;
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
    background: none !important;
}

.fm-modal-body {
    padding: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex: 1; /* Nimmt verfügbaren Platz ein */
}

/* Titel "Farbe wählen" - jetzt im Body über den Swatches */
.fm-modal-title {
    font-family: 'Allotrope', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #0B2965;
    margin: 0;
    padding: 0;
    width: 100%;
}
.fm-modal-body .color-palette {
    display: grid;
    grid-template-columns: repeat(5, 1fr); /* 5 Spalten für 20 Swatches */
    gap: 8.58px; /* Seitlicher Abstand zwischen Swatches */
    row-gap: 9.54px; /* Vertikaler Abstand zwischen Swatches */
    width: 100%;
    max-width: 100%; /* Keine Begrenzung der Breite */
    margin-top: 15px; /* Oberer Margin zum Text "Farbe wählen" */
    margin-bottom: 32px; /* Abstand nach unten zum "Farbe verwenden" Button */
    box-sizing: border-box;
}

.fm-modal-body .color-swatch {
    width: 2.8rem;
    height: 2.8rem;
    border-radius: 4px;
    border: 2px solid transparent;
    cursor: pointer;
    transition: all 0.2s ease;
    opacity: 1; /* Standard: Alle Swatches normal sichtbar wenn keine aktiv */
    box-sizing: border-box;
}

/* Aktiver Swatch - immer sichtbar (opacity: 1) */
.fm-modal-body .color-swatch.active {
    opacity: 1 !important; /* Aktiver Swatch ist immer voll sichtbar */
    border-color: #7856FF; /* Border bleibt für aktiven Swatch */
}

/* Inaktive Swatches - NUR wenn eine Farbe aktiv ist (mit :has() Selektoren) */
/* Wenn KEINE Farbe ausgewählt ist, bleiben alle normal sichtbar (opacity: 1) */
.fm-modal-body .color-palette:has(.color-swatch.active) .color-swatch:not(.active) {
    opacity: 0.4; /* Inaktive Swatches sind blass (wie im Bild) - NUR wenn eine aktiv ist */
}
.fm-modal-footer {
    margin-top: 0; /* Gap wird durch gap: 32px im Modal-Content gesteuert */
    margin-bottom: 0; /* Margin wird durch Modal-Content padding unten gesteuert */
    padding: 0;
    width: 100%;
    flex-shrink: 0; /* Footer wird nicht geschrumpft */
}
.fm-modal-footer .btn-primary {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 16px 15px;
    width: 100%;
    max-width: 246px;
    height: 48px;
    margin: 0 auto;
    background: #7856FF;
    border: 2px solid #E3DCFD;
    box-shadow: 0px 14px 6px rgba(120, 86, 255, 0.02), 0px 8px 5px rgba(120, 86, 255, 0.07), 0px 4px 4px rgba(120, 86, 255, 0.11), 0px 1px 2px rgba(120, 86, 255, 0.13);
    border-radius: 16px;
    font-family: 'Allotrope', sans-serif;
    font-size: 15px;
    font-weight: 400;
    color: #FFFFFF;
    cursor: pointer;
    box-sizing: border-box;
}
.fm-modal-footer .btn-primary.is-disabled {
    background: #F8F8F8;
    border: none;
    box-shadow: none;
    color: #8598C0;
    cursor: not-allowed;
}

/* Responsive adjustments for modal on very small screens */
@media (max-width: 360px) {
    .fm-modal-content {
        max-width: 100%;
        padding: 20px 12px 28px;
    }
    .fm-modal-body .color-palette {
        grid-template-columns: repeat(5, 1fr);
        gap: 10px;
        max-width: 240px;
    }
    .fm-modal-footer .btn-primary {
        max-width: 220px;
    }
}

/* Hide modal completely on desktop */
/* Desktop styles - from 768px */
@media (min-width: 768px) {
    .fm-modal,
    #open-color-modal-btn {
        display: none !important; /* Desktop: Modal und Mobile-Button verstecken */
    }
    
    /* Desktop: Color Palette und Title immer sichtbar - schützt vor Mobile-Overrides */
    .form-step[data-step="5"] .color-palette-desktop {
        display: block !important; /* Desktop: immer sichtbar */
    }
    
    .form-step[data-step="5"] .color-palette-desktop .section-title-wrapper {
        display: flex !important; /* Desktop: immer sichtbar */
    }
    
    .form-step[data-step="5"] .color-palette-desktop .section-title {
        display: block !important; /* Desktop: immer sichtbar */
    }
}

/* Prevent body scroll when modal is open */
body.fm-modal-open {
    overflow: hidden;
}

/* ============================================
   7.1 MOBILE COLOR PICKER (STEP 5) - ERWEITERTE STYLES
   ============================================ */
/* 
 * Zusätzliche Mobile-Styles für Step 5 Color Picker.
 * Ergänzt die allgemeinen Mobile-Styles im @media-Block oben.
 */

@media (max-width: 767px) {
    /* Desktop Color Palette auf Mobile verstecken - NUR Mobile */
    .form-step[data-step="5"] .color-palette-desktop {
         display: none !important; /* Verstecken auf Mobile */
    }
    
    /* Desktop Section Title auf Mobile verstecken - NUR Mobile */
    .form-step[data-step="5"] .color-palette-desktop .section-title-wrapper {
         display: none !important; /* Verstecken auf Mobile */
    }
    
    /* Hide mobile color palette on mobile - only show modal button */
    .form-step[data-step="5"] .color-palette {
        display: none;
    }
    
    
    /* Show and style mobile color picker button */
    #open-color-modal-btn {
        display: flex;
        position: relative;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        padding: 16px 15px;
        gap: 10px;
        width: 100%;
        max-width: 246px;
        height: 48px;
        margin: 0 auto;
        background: #F8F8F8;
        border: none;
        border-radius: 16px;
        font-family: 'Allotrope', sans-serif;
        font-size: 14px;
        font-weight: 400;
        color: #8598C0;
        cursor: pointer;
        box-sizing: border-box;
        transition: all 0.3s ease;
    }
    
    #open-color-modal-btn.has-ai-colors {
        background: linear-gradient(135deg, #F6F4FF 0%, #E3DCFD 100%);
        border: 2px solid #7856FF;
        color: #7856FF;
    }
    
    #open-color-modal-btn:disabled {
        background: #F8F8F8;
        border: 2px solid #E3DCFD;
        color: #8598C0;
        cursor: not-allowed;
        transform: none;
        box-shadow: none;
    }
    
    #open-color-modal-btn:disabled:hover {
        background: #F8F8F8;
        border: 2px solid #E3DCFD;
        color: #8598C0;
        transform: none;
        box-shadow: none;
    }
    
    #selected-color-swatch-display {
        width: 24px;
        height: 24px;
        border-radius: 8px;
        border: 1px solid #E3DCFD;
        flex-shrink: 0;
    }
}


/* ============================================
   8. FORM FEEDBACK NOTIFICATION
   ============================================ */
/* 
 * Zentrale Benachrichtigung für Formular-Feedback.
 * Wird bei erfolgreicher/fehlgeschlagener Übermittlung angezeigt.
 */
#fm-onboarding-form-feedback {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.9);
    color: #FFFFFF;
    padding: 16px 24px;
    border-radius: 12px;
    font-family: var(--font-family);
    font-size: 14px;
    font-weight: 400;
    z-index: 9999;
    display: none;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(10px);
    max-width: 300px;
    text-align: center;
    line-height: 1.4;
}

#fm-onboarding-form-feedback.show {
    display: block;
    animation: feedbackFadeIn 0.3s ease-out;
}

@keyframes feedbackFadeIn {
    from {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.9);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

/* Mobile adjustments for feedback */
/* Mobile styles - up to 767px */
@media (max-width: 767px) {
    #fm-onboarding-form-feedback {
        top: 40%;
        max-width: 280px;
        padding: 14px 20px;
        font-size: 13px;
        margin: 0 20px;
        left: 50%;
        transform: translateX(-50%);
    }
    
    /* ============================================
       STEP 6: Zusammenfassung - MOBILE
       ============================================ */
    /* Step 6 Mobile: Summary Box - Padding entfernen */
    .form-step[data-step="6"] .summary-box {
        padding: 0; /* Padding entfernen */
    }
    
    /* Step 6 Mobile: Summary Box Text - Margin links/rechts, display flex entfernen */
    .form-step[data-step="6"] .summary-box p {
        margin: 0 24px; /* Links und rechts je 24px */
        display: block; /* display flex entfernen */
        align-items: unset; /* align-items entfernen */
    }
    
    /* Step 6 Mobile: Submit Button - margin-bottom entfernen */
    .form-step[data-step="6"] .btn-primary {
        margin-bottom: 0; /* margin-bottom entfernen */
    }
}

@media (max-width: 375px) {
    #fm-onboarding-form-feedback {
        max-width: 260px;
        padding: 12px 16px;
        font-size: 12px;
        margin: 0 15px;
    }
}

/* Desktop styles - from 768px */
@media (min-width: 768px) {
    .fm-modal {
        display: none;
    }
}