/* Signup Form Styles - Liquid Glass Material Design */

.signup-container {
    width: 100%;
    max-width: 100%;
    padding: 40px;
    background: var(--gh-bg-primary);
    box-sizing: border-box;
    position: relative;
    min-height: 100vh;
}

/* Hero Section (wie Dashboard) */
.signup-container .hero-section {
    margin-bottom: 2rem;
    padding: 0;
}

.signup-container .page-title-wrapper {
    margin-bottom: 0;
}

.signup-container .page-title {
    font-family: var(--font-heading);
    font-size: 2rem;
    font-weight: 900;
    color: var(--gh-text-primary);
    display: flex;
    align-items: center;
    margin: 0;
}

.signup-container .title-accent {
    color: var(--gh-text-secondary);
    font-weight: 600;
}

.signup-header {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 1000;
}

.column-left.completed {
    border-left: 3px solid rgba(40, 167, 69, 0.5);
    background: rgba(40, 167, 69, 0.05);
}

/* Modal Mode - Volle Seitenbreite */
.signup-container.modal-mode {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    background: transparent;
    padding: 20px;
    overflow-y: auto;
    /* Liquid Glass Background gemäß Design Strategy */
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    width: 100%;
    max-width: 100%;
}

.signup-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #000000; /* Reines Schwarz gemäß Design Strategy */
    z-index: 9998;
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    animation: fadeIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0.95; /* Leichte Transparenz für Tiefe */
}

.signup-modal-header {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 10001;
}

.modal-close-btn {
    width: 30.8px; /* 44px * 0.7 */
    height: 30.8px; /* 44px * 0.7 */
    border-radius: 50%;
    background: var(--gh-bg-secondary);
    border: 1px solid var(--gh-border);
    color: var(--gh-text-primary);
    font-size: 16.8px; /* 24px * 0.7 */
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease; /* Konsistent mit Startseite */
    box-shadow: var(--gh-card-shadow-light, none);
}

.modal-close-btn:hover {
    background: var(--gh-bg-tertiary);
    border-color: var(--ios-blue-primary);
    transform: scale(1.05);
    box-shadow: 0 2px 8px rgba(40, 167, 69, 0.2);
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(-20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.signup-container.modal-mode .signup-card {
    animation: slideIn 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    /* Verstärkte 3D-Effekte gemäß Design Strategy */
    box-shadow: 
        0 20px 60px rgba(0, 0, 0, 0.8),
        0 10px 30px rgba(0, 0, 0, 0.6),
        0 0 0 1px rgba(255, 255, 255, 0.1) inset,
        var(--lg-shadow-combined);
    border: 1px solid var(--lg-border);
}

.signup-card {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transition: all 0.15s ease;
    box-sizing: border-box;
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* Überschreibe alle Styles für signup-card - muss transparent sein */
.signup-card,
.signup-card.liquid-card,
.liquid-glass .signup-card {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.signup-card::before,
.signup-card::after,
.signup-card.liquid-card::before,
.signup-card.liquid-card::after,
.liquid-glass .signup-card::before,
.liquid-glass .signup-card::after {
    display: none !important;
    content: none !important;
}

/* Progress Indicator - Liquid Glass Design */
.progress-indicator {
    margin-bottom: 20px;
    background: rgba(28, 28, 30, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.02);
    backdrop-filter: blur(120px) saturate(150%);
    -webkit-backdrop-filter: blur(120px) saturate(150%);
    border-radius: 18px;
    padding: 15px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: all 0.2s ease;
    flex-shrink: 0;
}

/* Global Progress Header - Konsistent mit Startseite */
.global-progress-header {
    background: var(--gh-bg-secondary);
    border: 1px solid var(--gh-border);
    border-radius: 6px; /* Konsistent mit Startseite */
    padding: 11.2px 14px; /* 16px/20px * 0.7 */
    margin-bottom: 15px;
    box-shadow: var(--gh-card-shadow-light, none);
    flex-shrink: 0;
}

.global-progress-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8.4px; /* 12px * 0.7 */
}

.global-progress-step {
    font-size: 9.8px; /* 14px * 0.7 */
    font-weight: 600;
    color: var(--gh-text-primary);
    letter-spacing: -0.02em;
}

.global-progress-percentage {
    font-size: 11.2px; /* 16px * 0.7 */
    font-weight: 700;
    color: var(--ios-blue-primary);
}

.global-progress-bar {
    width: 100%;
    height: 5.6px; /* 8px * 0.7 */
    background: var(--gh-bg-tertiary);
    border-radius: 3px; /* 4px * 0.7 */
    overflow: hidden;
}

.global-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--ios-blue-primary) 0%, #218838 100%);
    transition: width 0.15s ease; /* Konsistent mit Startseite */
    border-radius: 3px;
}

.progress-bar {
    width: 100%;
    height: 2.8px; /* 4px * 0.7 */
    background: var(--gh-bg-tertiary);
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 14px; /* 20px * 0.7 */
}

.progress-fill {
    height: 100%;
    background: var(--ios-blue-primary);
    transition: width 0.15s ease; /* Konsistent mit Startseite */
    width: 33.33%;
}

.progress-steps {
    display: flex;
    justify-content: space-between;
    margin-bottom: 7px; /* 10px * 0.7 */
}

.step-indicator {
    width: 22.4px; /* 32px * 0.7 */
    height: 22.4px; /* 32px * 0.7 */
    border-radius: 50%;
    background: var(--gh-bg-tertiary);
    border: 1.4px solid var(--gh-border); /* 2px * 0.7 */
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gh-text-tertiary);
    font-weight: 600;
    font-size: 9.8px; /* 14px * 0.7 */
    transition: all 0.15s ease; /* Konsistent mit Startseite */
}

.step-indicator.active {
    background: var(--ios-blue-primary);
    border-color: var(--ios-blue-primary);
    color: white;
}

.progress-text {
    text-align: center;
    color: var(--gh-text-secondary);
    font-size: 9.8px; /* 14px * 0.7 */
}

/* Signup Steps */
.signup-step {
    display: none;
}

.signup-step.active {
    display: block;
}

.signup-step {
    flex: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.signup-step h1 {
    font-size: 19.6px; /* 28px * 0.7 */
    font-weight: 700;
    margin-bottom: 15px;
    color: var(--gh-text-primary);
    letter-spacing: -0.02em;
    flex-shrink: 0;
}

/* Form Styles - Konsistent mit Startseite */
.form-group {
    margin-bottom: 16.8px; /* 24px * 0.7 */
}

.form-group label {
    display: block;
    margin-bottom: 5.6px; /* 8px * 0.7 */
    color: var(--gh-text-primary);
    font-weight: 600;
    font-size: 9.8px; /* 14px * 0.7 */
    letter-spacing: -0.02em;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 8.4px 11.2px; /* 12px/16px * 0.7 */
    background: var(--gh-bg-tertiary);
    border: 1px solid var(--gh-border);
    border-radius: 6px; /* Konsistent mit Startseite */
    color: var(--gh-text-primary);
    font-size: 11.2px; /* 16px * 0.7 */
    transition: all 0.15s ease; /* Konsistent mit Startseite */
    box-sizing: border-box;
    font-family: var(--font-family-ios, 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', sans-serif);
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--ios-blue-primary);
    background: var(--gh-bg-secondary);
    box-shadow: 0 0 0 2px rgba(40, 167, 69, 0.1);
}

.form-group textarea {
    resize: vertical;
    min-height: 105px; /* 150px * 0.7 */
    font-family: inherit;
    font-size: 10.5px; /* 15px * 0.7 */
    line-height: 1.5;
}

.form-group textarea::placeholder {
    color: var(--gh-text-tertiary);
    opacity: 0.7;
}

.form-hint {
    display: block;
    margin-top: 4.2px; /* 6px * 0.7 */
    color: var(--gh-text-tertiary);
    font-size: 8.4px; /* 12px * 0.7 */
}

/* Buttons - Liquid Glass Design */
.btn-primary {
    width: 100%;
    padding: 16px 28px;
    background: linear-gradient(135deg, 
        rgba(40, 167, 69, 0.9) 0%,
        rgba(40, 167, 69, 1) 50%,
        rgba(40, 167, 69, 0.9) 100%
    );
    color: white;
    border: 1px solid rgba(40, 167, 69, 0.5);
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    margin-top: 24px;
    box-shadow: 
        0 4px 16px rgba(40, 167, 69, 0.3),
        0 0 0 1px rgba(255, 255, 255, 0.1) inset;
    position: relative;
    overflow: hidden;
}

.btn-primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(180deg,
        rgba(255, 255, 255, 0.15) 0%,
        transparent 100%
    );
    pointer-events: none;
}

.btn-primary:hover {
    background: linear-gradient(135deg, 
        rgba(40, 167, 69, 1) 0%,
        rgba(46, 184, 79, 1) 50%,
        rgba(40, 167, 69, 1) 100%
    );
    transform: translateY(-2px) scale(1.02);
    box-shadow: 
        0 8px 24px rgba(40, 167, 69, 0.4),
        0 0 0 1px rgba(255, 255, 255, 0.15) inset;
}

.btn-primary:active {
    transform: translateY(0) scale(1);
    box-shadow: 
        0 2px 8px rgba(40, 167, 69, 0.3),
        0 0 0 1px rgba(255, 255, 255, 0.1) inset;
}

/* Website Analysis - Konsistent mit Startseite */
.website-analysis {
    margin: 21px 0; /* 30px * 0.7 */
    padding: 14px; /* 20px * 0.7 */
    background: var(--gh-bg-secondary);
    border-radius: 6px; /* Konsistent mit Startseite */
    border: 1px solid var(--gh-border);
}

.analysis-loading {
    text-align: center;
    padding: 28px 14px; /* 40px/20px * 0.7 */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--gh-text-secondary);
}

.learnings-container {
    margin-top: 1.4rem; /* 2rem * 0.7 */
    width: 100%;
    max-width: 350px; /* 500px * 0.7 */
}

.learnings-table {
    display: flex;
    flex-direction: column;
    gap: 5.6px; /* 8px * 0.7 */
}

.learning-row {
    padding: 8.4px 11.2px; /* 12px/16px * 0.7 */
    background: var(--gh-bg-secondary);
    border-left: 2.1px solid var(--ios-blue-primary); /* 3px * 0.7 */
    border-radius: 6px; /* Konsistent mit Startseite */
    color: var(--gh-text-primary);
    font-size: 9.45px; /* 13.5px * 0.7 (0.9rem ≈ 13.5px) */
    line-height: 1.5;
    text-align: left;
    transition: all 0.15s ease; /* Konsistent mit Startseite */
    border: 1px solid var(--gh-border);
}

.spinner {
    width: 33.6px; /* 48px * 0.7 */
    height: 33.6px; /* 48px * 0.7 */
    border: 2.8px solid var(--gh-border); /* 4px * 0.7 */
    border-top-color: var(--ios-blue-primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto;
    box-shadow: 0 0 14px rgba(40, 167, 69, 0.2); /* 20px * 0.7 */
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.analysis-results h3 {
    font-size: 12.6px; /* 18px * 0.7 */
    margin-bottom: 11.2px; /* 16px * 0.7 */
    color: var(--gh-text-primary);
    letter-spacing: -0.02em;
}

.suggestion-group {
    margin-bottom: 14px; /* 20px * 0.7 */
}

.suggestion-group label {
    display: block;
    margin-bottom: 7px; /* 10px * 0.7 */
    color: var(--gh-text-primary);
    font-weight: 600;
    font-size: 9.8px; /* 14px * 0.7 */
    letter-spacing: -0.02em;
}

.checkbox-group {
    display: flex;
    flex-wrap: wrap;
    gap: 7px; /* 10px * 0.7 */
}

.checkbox-item {
    display: flex;
    align-items: center;
    padding: 5.6px 8.4px; /* 8px/12px * 0.7 */
    background: var(--gh-bg-tertiary);
    border: 1px solid var(--gh-border);
    border-radius: 6px; /* Konsistent mit Startseite */
    cursor: pointer;
    transition: all 0.15s ease; /* Konsistent mit Startseite */
    font-size: 9.1px; /* 13px * 0.7 */
}

.checkbox-item:hover {
    background: var(--gh-bg-secondary);
    border-color: var(--ios-blue-primary);
}

.checkbox-item input[type="checkbox"] {
    margin-right: 5.6px; /* 8px * 0.7 */
    cursor: pointer;
}

.checkbox-item.checked {
    background: rgba(40, 167, 69, 0.2);
    border-color: var(--ios-blue-primary);
}

.feed-count {
    font-size: 9.8px; /* 14px * 0.7 */
    color: var(--gh-text-secondary);
    margin-bottom: 7px; /* 10px * 0.7 */
}

.feed-list {
    max-height: 140px; /* 200px * 0.7 */
    overflow-y: auto;
    padding: 7px; /* 10px * 0.7 */
    background: var(--gh-bg-tertiary);
    border-radius: 6px; /* Konsistent mit Startseite */
    border: 1px solid var(--gh-border);
}

.feed-item {
    padding: 5.6px; /* 8px * 0.7 */
    margin-bottom: 4.2px; /* 6px * 0.7 */
    background: var(--gh-bg-secondary);
    border-radius: 4px;
    font-size: 9.1px; /* 13px * 0.7 */
    color: var(--gh-text-primary);
    border: 1px solid var(--gh-border);
}

/* Company Definition Styles */
.company-definition {
    padding: 14px 0; /* 20px * 0.7 */
}

.definition-section {
    margin-bottom: 21px; /* 30px * 0.7 */
}

.definition-section h3 {
    font-size: 12.6px; /* 18px * 0.7 */
    font-weight: 700;
    color: var(--gh-text-primary);
    margin-bottom: 10.5px; /* 15px * 0.7 */
    letter-spacing: -0.02em;
}

.bullets-list {
    background: var(--gh-bg-secondary);
    border: 1px solid var(--gh-border);
    border-radius: 6px;
    padding: 10.5px; /* 15px * 0.7 */
    min-height: 70px; /* 100px * 0.7 */
}

.bullet-item {
    padding: 7px 0; /* 10px * 0.7 */
    color: var(--gh-text-primary);
    font-size: 10.5px; /* 15px * 0.7 */
    line-height: 1.5;
    border-bottom: 1px solid var(--gh-border);
    display: flex;
    align-items: flex-start;
}

.bullet-item:last-child {
    border-bottom: none;
}

.bullet-item::before {
    content: "•";
    color: var(--ios-blue-primary);
    font-weight: 700;
    margin-right: 7px; /* 10px * 0.7 */
    flex-shrink: 0;
}

.bullet-item.editable {
    cursor: text;
    padding: 5.6px 7px; /* 8px/10px * 0.7 */
    border-radius: 4px;
    transition: background 0.15s ease;
}

.bullet-item.editable:hover {
    background: var(--gh-bg-tertiary);
}

.bullet-item.editable:focus {
    outline: none;
    background: var(--gh-bg-tertiary);
    border: 1px solid var(--ios-blue-primary);
}

.definition-actions {
    display: flex;
    gap: 7px; /* 10px * 0.7 */
    margin-top: 21px; /* 30px * 0.7 */
    padding-top: 14px; /* 20px * 0.7 */
    border-top: 1px solid var(--gh-border);
}

.btn-accept,
.btn-edit {
    flex: 1;
    padding: 7px 14px; /* 10px/20px * 0.7 */
    font-size: 9.8px; /* 14px * 0.7 */
    font-weight: 600;
    border-radius: 6px;
    border: 1px solid var(--gh-border);
    cursor: pointer;
    transition: all 0.15s ease;
    letter-spacing: -0.01em;
}

.btn-accept {
    background: linear-gradient(135deg, 
        rgba(40, 167, 69, 0.15) 0%,
        rgba(40, 167, 69, 0.1) 100%
    );
    border-color: rgba(40, 167, 69, 0.3);
    color: var(--color-green-primary);
}

.btn-accept:hover {
    background: linear-gradient(135deg, 
        rgba(40, 167, 69, 0.25) 0%,
        rgba(40, 167, 69, 0.2) 100%
    );
    border-color: rgba(40, 167, 69, 0.5);
    transform: translateY(-1px);
    box-shadow: 
        0 4px 12px rgba(40, 167, 69, 0.2),
        0 0 0 1px rgba(40, 167, 69, 0.1) inset;
}

.btn-edit {
    background: var(--gh-bg-secondary);
    color: var(--gh-text-primary);
    border-color: var(--gh-border);
}

.btn-edit:hover {
    background: var(--gh-bg-tertiary);
    border-color: var(--ios-blue-primary);
    transform: translateY(-1px);
    box-shadow: 
        0 4px 12px rgba(0, 122, 255, 0.1),
        0 0 0 1px rgba(0, 122, 255, 0.1) inset;
}

/* Summary - Konsistent mit Startseite */
.summary {
    margin: 14px 0; /* 20px * 0.7 */
    padding: 14px; /* 20px * 0.7 */
    background: var(--gh-bg-secondary);
    border-radius: 6px; /* Konsistent mit Startseite */
    border: 1px solid var(--gh-border);
}

.summary-item {
    margin-bottom: 11.2px; /* 16px * 0.7 */
    padding-bottom: 11.2px; /* 16px * 0.7 */
    border-bottom: 1px solid var(--gh-border);
}

.summary-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.summary-item label {
    display: block;
    font-size: 8.4px; /* 12px * 0.7 */
    color: var(--gh-text-tertiary);
    margin-bottom: 2.8px; /* 4px * 0.7 */
}

.summary-item value {
    display: block;
    font-size: 11.2px; /* 16px * 0.7 */
    color: var(--gh-text-primary);
    font-weight: 600;
}

/* QR Code */
.qr-code-container {
    margin: 30px 0;
    text-align: center;
}

.qr-code-container h3 {
    font-size: 18px;
    margin-bottom: 20px;
    color: var(--text-white);
}

.qr-code-wrapper {
    position: relative;
    display: inline-block;
    padding: 20px;
    background: white;
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.qr-code-dots {
    position: absolute;
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
    background: radial-gradient(circle, rgba(40, 167, 69, 0.3) 2px, transparent 2px);
    background-size: 20px 20px;
    border-radius: 20px;
    animation: pulse 2s ease-in-out infinite;
    pointer-events: none;
}

@keyframes pulse {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 0.6; }
}

.qr-code-wrapper img {
    display: block;
    width: 300px;
    height: 300px;
    position: relative;
    z-index: 1;
}

.qr-instruction {
    margin-top: 20px;
    color: rgba(255, 255, 255, 0.8);
    font-size: 16px;
    font-weight: 600;
}

.qr-countdown {
    margin-top: 10px;
    color: rgba(255, 255, 255, 0.5);
    font-size: 14px;
}

/* 3-Spalten Layout für Step 2 - 30/40/30 (IMMER sichtbar) */
.three-column-layout {
    display: grid;
    grid-template-columns: 30% 40% 30%;
    gap: 20px;
    margin-top: 20px;
    min-height: calc(100vh - 300px);
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    flex: 1;
}

.column-left {
    background: rgba(28, 28, 30, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.02) !important;
    backdrop-filter: blur(120px) saturate(150%);
    -webkit-backdrop-filter: blur(120px) saturate(150%);
    border-radius: 18px;
    padding: 20px 24px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: all 0.2s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow-y: auto;
}

.column-left > * {
    position: relative;
    z-index: 1;
}

.column-center {
    background: rgba(28, 28, 30, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.02) !important;
    backdrop-filter: blur(120px) saturate(150%);
    -webkit-backdrop-filter: blur(120px) saturate(150%);
    border-radius: 18px;
    padding: 20px 24px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: all 0.2s ease;
    height: 100%;
    display: flex; /* IMMER sichtbar - 30/40/30 Layout */
    flex-direction: column;
    position: relative;
    overflow-y: auto;
}

.column-center > * {
    position: relative;
    z-index: 1;
}

.column-right {
    background: rgba(28, 28, 30, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.02) !important;
    backdrop-filter: blur(120px) saturate(150%);
    -webkit-backdrop-filter: blur(120px) saturate(150%);
    border-radius: 18px;
    padding: 20px 24px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: all 0.2s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow-y: auto;
}

.column-right > * {
    position: relative;
    z-index: 1;
}

.column-left:hover,
.column-center:hover,
.column-right:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    border-color: rgba(255, 255, 255, 0.05);
    background: rgba(28, 28, 30, 0.1);
}

.dark.liquid-glass .column-left:hover,
.dark.liquid-glass .column-center:hover,
.dark.liquid-glass .column-right:hover {
    background: rgba(35, 35, 40, 0.75);
    border-color: rgba(255, 255, 255, 0.05);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    transform: translateY(-1px);
}

.column-header {
    margin-bottom: 14px; /* 20px * 0.7 */
    padding-bottom: 11.2px; /* 16px * 0.7 */
    border-bottom: 1px solid var(--gh-border);
}

.column-header h2 {
    font-size: 14px; /* 20px * 0.7 */
    font-weight: 700;
    color: var(--gh-text-primary);
    margin: 0;
    letter-spacing: -0.02em;
}

/* Progress Bar für Analyse - Konsistent mit Startseite */
.progress-bar-container {
    margin-top: 1.05rem; /* 1.5rem * 0.7 */
    width: 100%;
}

.progress-bar-analysis {
    width: 100%;
    height: 5.6px; /* 8px * 0.7 */
    background: var(--gh-bg-tertiary);
    border-radius: 3px; /* 4px * 0.7 */
    overflow: hidden;
    margin-bottom: 5.6px; /* 8px * 0.7 */
}

.progress-fill-analysis {
    height: 100%;
    background: var(--ios-blue-primary);
    transition: width 0.15s ease; /* Konsistent mit Startseite */
    border-radius: 3px;
}

.progress-text-analysis {
    text-align: center;
    color: var(--gh-text-secondary);
    font-size: 8.4px; /* 12px * 0.7 */
    font-weight: 600;
}

/* Prozess-Status (Rechte Spalte) */
.process-status {
    margin-bottom: 16.8px; /* 24px * 0.7 */
}

.process-item {
    display: flex;
    align-items: center;
    gap: 8.4px; /* 12px * 0.7 */
    padding: 8.4px; /* 12px * 0.7 */
    margin-bottom: 5.6px; /* 8px * 0.7 */
    background: var(--gh-bg-secondary);
    border-radius: 6px; /* Konsistent mit Startseite */
    border-left: 2.1px solid var(--gh-border); /* 3px * 0.7 */
    transition: all 0.15s ease; /* Konsistent mit Startseite */
}

.process-item.active {
    border-left-color: var(--ios-blue-primary);
    background: rgba(40, 167, 69, 0.1);
}

.process-item.completed {
    border-left-color: #28A745;
    background: rgba(40, 167, 69, 0.15);
}

.process-item.completed .process-icon {
    content: '✅';
}

.process-icon {
    font-size: 14px; /* 20px * 0.7 */
    width: 16.8px; /* 24px * 0.7 */
    text-align: center;
}

.process-content {
    flex: 1;
}

.process-title {
    font-size: 9.8px; /* 14px * 0.7 */
    font-weight: 600;
    color: var(--gh-text-primary);
    margin-bottom: 2.8px; /* 4px * 0.7 */
    letter-spacing: -0.02em;
}

.process-time {
    font-size: 8.4px; /* 12px * 0.7 */
    color: var(--gh-text-tertiary);
}

/* Badges */
.badges-container {
    margin-bottom: 16.8px; /* 24px * 0.7 */
}

.badges-container h3,
.insights-container h3,
.explanations-container h3 {
    font-size: 9.8px; /* 14px * 0.7 */
    font-weight: 700;
    color: var(--gh-text-primary);
    margin-bottom: 8.4px; /* 12px * 0.7 */
    letter-spacing: -0.02em;
}

.badges-list {
    display: flex;
    flex-wrap: wrap;
    gap: 5.6px; /* 8px * 0.7 */
}

.badge {
    padding: 4.2px 8.4px; /* 6px/12px * 0.7 */
    border-radius: 6px; /* Konsistent mit Startseite */
    font-size: 7.7px; /* 11px * 0.7 */
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.35px; /* 0.5px * 0.7 */
    animation: slideIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.badge.new {
    background: rgba(40, 167, 69, 0.2);
    color: #28A745;
    border: 1px solid rgba(40, 167, 69, 0.3);
}

.badge.update {
    background: rgba(0, 122, 255, 0.2);
    color: #007AFF;
    border: 1px solid rgba(0, 122, 255, 0.3);
}

.badge.insight {
    background: rgba(255, 149, 0, 0.2);
    color: #FF9500;
    border: 1px solid rgba(255, 149, 0, 0.3);
}

.badge.complete {
    background: rgba(40, 167, 69, 0.2);
    color: #28A745;
    border: 1px solid rgba(40, 167, 69, 0.3);
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateX(-10px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Erkenntnisse - Konsistent mit Startseite */
.insights-container {
    margin-bottom: 16.8px; /* 24px * 0.7 */
}

.insights-list {
    display: flex;
    flex-direction: column;
    gap: 5.6px; /* 8px * 0.7 */
}

.insight-item {
    padding: 8.4px; /* 12px * 0.7 */
    background: var(--gh-bg-secondary);
    border-radius: 6px; /* Konsistent mit Startseite */
    border-left: 2.1px solid rgba(255, 149, 0, 0.5); /* 3px * 0.7 */
    font-size: 9.1px; /* 13px * 0.7 */
    color: var(--gh-text-primary);
    line-height: 1.5;
    animation: fadeIn 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid var(--gh-border);
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Erklärungen - Konsistent mit Startseite */
.explanations-container {
    margin-bottom: 16.8px; /* 24px * 0.7 */
}

.explanations-list {
    display: flex;
    flex-direction: column;
    gap: 8.4px; /* 12px * 0.7 */
}

.explanation-item {
    padding: 8.4px; /* 12px * 0.7 */
    background: var(--gh-bg-secondary);
    border-radius: 6px; /* Konsistent mit Startseite */
    font-size: 8.4px; /* 12px * 0.7 */
    color: var(--gh-text-secondary);
    line-height: 1.5;
    border: 1px solid var(--gh-border);
}

.explanation-item .explanation-title {
    font-weight: 600;
    color: var(--gh-text-primary);
    margin-bottom: 2.8px; /* 4px * 0.7 */
}

.explanation-item .explanation-text {
    color: var(--gh-text-tertiary);
}

/* Responsive */
@media (max-width: 1800px) {
    .signup-card:has(#step2.active) {
        max-width: 1050px; /* 1500px * 0.7 */
    }
}

@media (max-width: 1600px) {
    .signup-card:has(#step2.active) {
        max-width: 980px; /* 1400px * 0.7 */
    }
    
    .three-column-layout {
        grid-template-columns: 32% 36% 32%;
        gap: 16.8px; /* 24px * 0.7 */
    }
}

@media (max-width: 1200px) {
    .signup-card:has(#step2.active) {
        max-width: 700px; /* 1000px * 0.7 */
    }
    
    .three-column-layout {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto;
        gap: 14px; /* 20px * 0.7 */
    }
    
    .column-left {
        grid-column: 1 / 2;
    }
    
    .column-center {
        grid-column: 2 / 3;
    }
    
    .column-right {
        grid-column: 1 / 3;
        grid-row: 2;
    }
}

@media (max-width: 768px) {
    .signup-card {
        padding: 16.8px; /* 24px * 0.7 */
        max-width: 100%;
    }

    .signup-step h1 {
        font-size: 16.8px; /* 24px * 0.7 */
    }

    .three-column-layout {
        grid-template-columns: 1fr !important;
        grid-template-rows: auto;
        gap: 14px; /* 20px * 0.7 */
    }
    
    .column-left,
    .column-center,
    .column-right {
        grid-column: 1;
    }

    .qr-code-wrapper img {
        width: 175px; /* 250px * 0.7 */
        height: 175px; /* 250px * 0.7 */
    }
}