/* _content/BotomixNew/Components/Account/Pages/AccessDenied.razor.rz.scp.css */
/* AccessDenied.razor scoped styles */

.access-denied-card[b-qzc5zu4nr6] {
    background: white;
    border-radius: 16px;
    padding: 3rem 2rem;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
    border: 1px solid #e9ecef;
    animation: slideUp-b-qzc5zu4nr6 0.6s ease-out;
}

@keyframes slideUp-b-qzc5zu4nr6 {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.access-denied-icon[b-qzc5zu4nr6] {
    font-size: 4rem;
    color: #dc3545;
    margin-bottom: 1.5rem;
    animation: pulse-b-qzc5zu4nr6 2s infinite;
}

@keyframes pulse-b-qzc5zu4nr6 {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.7;
    }
}

.access-denied-title[b-qzc5zu4nr6] {
    font-size: 2.25rem;
    font-weight: 700;
    color: #dc3545;
    margin-bottom: 0.75rem;
}

.access-denied-subtitle[b-qzc5zu4nr6] {
    font-size: 1.1rem;
    color: #6c757d;
    font-weight: 500;
    margin-bottom: 0;
}

.access-denied-content[b-qzc5zu4nr6] {
    text-align: left;
}

.access-denied-suggestions[b-qzc5zu4nr6] {
    margin: 2rem 0;
}

    .access-denied-suggestions h5[b-qzc5zu4nr6] {
        font-weight: 600;
        color: #495057;
        margin-bottom: 1rem;
    }

.suggestion-list[b-qzc5zu4nr6] {
    list-style: none;
    padding: 0;
}

    .suggestion-list li[b-qzc5zu4nr6] {
        padding: 0.5rem 0;
        padding-left: 1.5rem;
        position: relative;
        color: #6c757d;
    }

        .suggestion-list li[b-qzc5zu4nr6]::before {
            content: '→';
            position: absolute;
            left: 0;
            color: #0066ff;
            font-weight: bold;
        }

.access-denied-actions[b-qzc5zu4nr6] {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: center;
    margin: 2rem 0;
}

    .access-denied-actions .btn[b-qzc5zu4nr6] {
        border-radius: 10px;
        font-weight: 600;
        padding: 0.75rem 1.5rem;
        transition: all 0.2s ease;
    }

        .access-denied-actions .btn:hover[b-qzc5zu4nr6] {
            transform: translateY(-2px);
        }

.access-denied-support[b-qzc5zu4nr6] {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid #e9ecef;
}

@media (max-width: 768px) {
    .access-denied-card[b-qzc5zu4nr6] {
        padding: 2rem 1.5rem;
    }

    .access-denied-title[b-qzc5zu4nr6] {
        font-size: 1.875rem;
    }

    .access-denied-actions[b-qzc5zu4nr6] {
        flex-direction: column;
    }

        .access-denied-actions .btn[b-qzc5zu4nr6] {
            width: 100%;
        }
}
/* _content/BotomixNew/Components/Account/Pages/ConfirmEmail.razor.rz.scp.css */
/* Email Confirmation Page Styling */

.confirm-email-container[b-13xdh9t6kq] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    background: linear-gradient(135deg, #f0f7ff 0%, #e6f3ff 100%);
    animation: fadeIn-b-13xdh9t6kq 0.6s ease-out;
}

@keyframes fadeIn-b-13xdh9t6kq {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Confirmation Card */
.confirm-card[b-13xdh9t6kq] {
    max-width: 600px;
    width: 100%;
    background: white;
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    padding: 3rem 2.5rem;
    animation: slideUp-b-13xdh9t6kq 0.6s ease-out;
    border: 1px solid #e9ecef;
}

@keyframes slideUp-b-13xdh9t6kq {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Loading Section */
.loading-section[b-13xdh9t6kq] {
    text-align: center;
    padding: 2rem 0;
}

.spinner-large[b-13xdh9t6kq] {
    width: 60px;
    height: 60px;
    border: 4px solid #e9ecef;
    border-top-color: #0066ff;
    border-radius: 50%;
    animation: spin-b-13xdh9t6kq 1s linear infinite;
    margin: 0 auto 1.5rem;
}

@keyframes spin-b-13xdh9t6kq {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.loading-section h3[b-13xdh9t6kq] {
    font-size: 1.5rem;
    font-weight: 600;
    color: #111827;
    margin-bottom: 0.5rem;
}

.loading-section p[b-13xdh9t6kq] {
    color: #6b7280;
    font-size: 1rem;
}

/* Success Section */
.success-section[b-13xdh9t6kq] {
    text-align: center;
}

.success-icon[b-13xdh9t6kq] {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #dcfce7, #bbf7d0);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    animation: scaleIn-b-13xdh9t6kq 0.5s ease-out 0.2s both;
}

@keyframes scaleIn-b-13xdh9t6kq {
    from {
        opacity: 0;
        transform: scale(0);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.success-icon i[b-13xdh9t6kq] {
    font-size: 2.5rem;
    color: #22c55e;
}

.success-section h2[b-13xdh9t6kq] {
    font-size: 1.75rem;
    font-weight: 700;
    color: #166534;
    margin-bottom: 1rem;
}

.success-message[b-13xdh9t6kq] {
    font-size: 1.1rem;
    color: #374151;
    line-height: 1.6;
    margin-bottom: 2rem;
}

/* Error Section */
.error-section[b-13xdh9t6kq] {
    text-align: center;
}

.error-icon[b-13xdh9t6kq] {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #fee2e2, #fecaca);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    animation: shake-b-13xdh9t6kq 0.5s ease-out;
}

@keyframes shake-b-13xdh9t6kq {
    0%, 100% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-10px);
    }

    75% {
        transform: translateX(10px);
    }
}

.error-icon i[b-13xdh9t6kq] {
    font-size: 2.5rem;
    color: #dc2626;
}

.error-section h2[b-13xdh9t6kq] {
    font-size: 1.75rem;
    font-weight: 700;
    color: #dc2626;
    margin-bottom: 1rem;
}

.error-message[b-13xdh9t6kq] {
    font-size: 1.1rem;
    color: #6b7280;
    line-height: 1.6;
    margin-bottom: 2rem;
}

/* Help Box */
.help-box[b-13xdh9t6kq] {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-left: 4px solid #f59e0b;
    border-radius: 8px;
    padding: 1.5rem;
    margin: 2rem 0;
    text-align: left;
}

    .help-box h4[b-13xdh9t6kq] {
        font-size: 1.1rem;
        font-weight: 600;
        color: #111827;
        margin-bottom: 1rem;
        display: flex;
        align-items: center;
    }

    .help-box ul[b-13xdh9t6kq] {
        margin: 0;
        padding-left: 1.5rem;
        color: #6b7280;
    }

    .help-box li[b-13xdh9t6kq] {
        margin-bottom: 0.5rem;
        line-height: 1.5;
    }

/* Action Buttons */
.action-buttons[b-13xdh9t6kq] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 2rem;
}

    .action-buttons .btn[b-13xdh9t6kq] {
        padding: 0.875rem 2rem;
        font-size: 1rem;
        font-weight: 600;
        border-radius: 10px;
        transition: all 0.2s ease;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        text-decoration: none;
        border: none;
    }

    .action-buttons .btn-primary[b-13xdh9t6kq] {
        background: linear-gradient(135deg, #0066ff, #0052cc);
        color: white;
    }

        .action-buttons .btn-primary:hover[b-13xdh9t6kq] {
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(0, 102, 255, 0.3);
            background: linear-gradient(135deg, #0052cc, #003d99);
        }

    .action-buttons .btn-outline-primary[b-13xdh9t6kq] {
        background: white;
        border: 2px solid #0066ff;
        color: #0066ff;
    }

        .action-buttons .btn-outline-primary:hover[b-13xdh9t6kq] {
            background: #f0f7ff;
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0, 102, 255, 0.15);
        }

/* Responsive Design */
@media (max-width: 768px) {
    .confirm-email-container[b-13xdh9t6kq] {
        padding: 1rem;
    }

    .confirm-card[b-13xdh9t6kq] {
        padding: 2rem 1.5rem;
        border-radius: 12px;
    }

    .success-icon[b-13xdh9t6kq],
    .error-icon[b-13xdh9t6kq] {
        width: 70px;
        height: 70px;
    }

        .success-icon i[b-13xdh9t6kq],
        .error-icon i[b-13xdh9t6kq] {
            font-size: 2rem;
        }

    .success-section h2[b-13xdh9t6kq],
    .error-section h2[b-13xdh9t6kq] {
        font-size: 1.5rem;
    }

    .success-message[b-13xdh9t6kq],
    .error-message[b-13xdh9t6kq] {
        font-size: 1rem;
    }

    .help-box[b-13xdh9t6kq] {
        padding: 1rem;
    }
}

@media (max-width: 480px) {
    .confirm-card[b-13xdh9t6kq] {
        padding: 1.5rem 1rem;
    }

    .success-section h2[b-13xdh9t6kq],
    .error-section h2[b-13xdh9t6kq] {
        font-size: 1.25rem;
    }

    .action-buttons .btn[b-13xdh9t6kq] {
        font-size: 0.9rem;
        padding: 0.75rem 1.5rem;
    }
}

/* Focus States */
.action-buttons .btn:focus[b-13xdh9t6kq] {
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 102, 255, 0.25);
}
/* _content/BotomixNew/Components/Account/Pages/ConfirmEmailChange.razor.rz.scp.css */
/* Email Confirmation Page Styling */

.confirm-email-container[b-kubcs5qpge] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    background: linear-gradient(135deg, #f0f7ff 0%, #e6f3ff 100%);
    animation: fadeIn-b-kubcs5qpge 0.6s ease-out;
}

@keyframes fadeIn-b-kubcs5qpge {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Confirmation Card */
.confirm-card[b-kubcs5qpge] {
    max-width: 600px;
    width: 100%;
    background: white;
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    padding: 3rem 2.5rem;
    animation: slideUp-b-kubcs5qpge 0.6s ease-out;
    border: 1px solid #e9ecef;
}

@keyframes slideUp-b-kubcs5qpge {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Loading Section */
.loading-section[b-kubcs5qpge] {
    text-align: center;
    padding: 2rem 0;
}

.spinner-large[b-kubcs5qpge] {
    width: 60px;
    height: 60px;
    border: 4px solid #e9ecef;
    border-top-color: #0066ff;
    border-radius: 50%;
    animation: spin-b-kubcs5qpge 1s linear infinite;
    margin: 0 auto 1.5rem;
}

@keyframes spin-b-kubcs5qpge {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.loading-section h3[b-kubcs5qpge] {
    font-size: 1.5rem;
    font-weight: 600;
    color: #111827;
    margin-bottom: 0.5rem;
}

.loading-section p[b-kubcs5qpge] {
    color: #6b7280;
    font-size: 1rem;
}

/* Success Section */
.success-section[b-kubcs5qpge] {
    text-align: center;
}

.success-icon[b-kubcs5qpge] {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #dcfce7, #bbf7d0);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    animation: scaleIn-b-kubcs5qpge 0.5s ease-out 0.2s both;
}

@keyframes scaleIn-b-kubcs5qpge {
    from {
        opacity: 0;
        transform: scale(0);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.success-icon i[b-kubcs5qpge] {
    font-size: 2.5rem;
    color: #22c55e;
}

.success-section h2[b-kubcs5qpge] {
    font-size: 1.75rem;
    font-weight: 700;
    color: #166534;
    margin-bottom: 1rem;
}

.success-message[b-kubcs5qpge] {
    font-size: 1.1rem;
    color: #374151;
    line-height: 1.6;
    margin-bottom: 2rem;
}

/* Info Box */
.info-box[b-kubcs5qpge] {
    background: #f0f7ff;
    border: 1px solid #e1f0ff;
    border-left: 4px solid #0066ff;
    border-radius: 8px;
    padding: 1.25rem;
    margin: 1.5rem 0;
    text-align: left;
    color: #374151;
}

    .info-box i[b-kubcs5qpge] {
        color: #0066ff;
    }

/* Error Section */
.error-section[b-kubcs5qpge] {
    text-align: center;
}

.error-icon[b-kubcs5qpge] {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #fee2e2, #fecaca);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    animation: shake-b-kubcs5qpge 0.5s ease-out;
}

@keyframes shake-b-kubcs5qpge {
    0%, 100% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-10px);
    }

    75% {
        transform: translateX(10px);
    }
}

.error-icon i[b-kubcs5qpge] {
    font-size: 2.5rem;
    color: #dc2626;
}

.error-section h2[b-kubcs5qpge] {
    font-size: 1.75rem;
    font-weight: 700;
    color: #dc2626;
    margin-bottom: 1rem;
}

.error-message[b-kubcs5qpge] {
    font-size: 1.1rem;
    color: #6b7280;
    line-height: 1.6;
    margin-bottom: 2rem;
}

/* Help Box */
.help-box[b-kubcs5qpge] {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-left: 4px solid #f59e0b;
    border-radius: 8px;
    padding: 1.5rem;
    margin: 2rem 0;
    text-align: left;
}

    .help-box h4[b-kubcs5qpge] {
        font-size: 1.1rem;
        font-weight: 600;
        color: #111827;
        margin-bottom: 1rem;
        display: flex;
        align-items: center;
    }

    .help-box ul[b-kubcs5qpge] {
        margin: 0;
        padding-left: 1.5rem;
        color: #6b7280;
    }

    .help-box li[b-kubcs5qpge] {
        margin-bottom: 0.5rem;
        line-height: 1.5;
    }

/* Action Buttons */
.action-buttons[b-kubcs5qpge] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 2rem;
}

    .action-buttons .btn[b-kubcs5qpge] {
        padding: 0.875rem 2rem;
        font-size: 1rem;
        font-weight: 600;
        border-radius: 10px;
        transition: all 0.2s ease;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        text-decoration: none;
        border: none;
    }

    .action-buttons .btn-primary[b-kubcs5qpge] {
        background: linear-gradient(135deg, #0066ff, #0052cc);
        color: white;
    }

        .action-buttons .btn-primary:hover[b-kubcs5qpge] {
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(0, 102, 255, 0.3);
            background: linear-gradient(135deg, #0052cc, #003d99);
        }

    .action-buttons .btn-outline-primary[b-kubcs5qpge] {
        background: white;
        border: 2px solid #0066ff;
        color: #0066ff;
    }

        .action-buttons .btn-outline-primary:hover[b-kubcs5qpge] {
            background: #f0f7ff;
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0, 102, 255, 0.15);
        }

/* Responsive Design */
@media (max-width: 768px) {
    .confirm-email-container[b-kubcs5qpge] {
        padding: 1rem;
    }

    .confirm-card[b-kubcs5qpge] {
        padding: 2rem 1.5rem;
        border-radius: 12px;
    }

    .success-icon[b-kubcs5qpge],
    .error-icon[b-kubcs5qpge] {
        width: 70px;
        height: 70px;
    }

        .success-icon i[b-kubcs5qpge],
        .error-icon i[b-kubcs5qpge] {
            font-size: 2rem;
        }

    .success-section h2[b-kubcs5qpge],
    .error-section h2[b-kubcs5qpge] {
        font-size: 1.5rem;
    }

    .success-message[b-kubcs5qpge],
    .error-message[b-kubcs5qpge] {
        font-size: 1rem;
    }

    .help-box[b-kubcs5qpge] {
        padding: 1rem;
    }
}

@media (max-width: 480px) {
    .confirm-card[b-kubcs5qpge] {
        padding: 1.5rem 1rem;
    }

    .success-section h2[b-kubcs5qpge],
    .error-section h2[b-kubcs5qpge] {
        font-size: 1.25rem;
    }

    .action-buttons .btn[b-kubcs5qpge] {
        font-size: 0.9rem;
        padding: 0.75rem 1.5rem;
    }
}

/* Focus States */
.action-buttons .btn:focus[b-kubcs5qpge] {
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 102, 255, 0.25);
}
/* _content/BotomixNew/Components/Account/Pages/Dashboard.razor.rz.scp.css */
/* Modernes Dashboard Design für Botomix B2B Plattform - Mit Favoriten */
.dashboard-container[b-cf67p5sw7r] {
    padding: 2rem;
    max-width: 1400px;
    margin: 0 auto;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 50%, #f1f3f4 100%);
    min-height: calc(100vh - 120px);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Header Section */
.dashboard-header[b-cf67p5sw7r] {
    text-align: center;
    margin-bottom: 3rem;
    animation: fadeInUp-b-cf67p5sw7r 0.6s ease-out;
}

@keyframes fadeInUp-b-cf67p5sw7r {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.welcome-title[b-cf67p5sw7r] {
    font-size: 2.75rem;
    font-weight: 700;
    color: #111827;
    margin-bottom: 0.75rem;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    position: relative;
}

    .welcome-title[b-cf67p5sw7r]::before {
        content: '👋';
        font-size: 2.5rem;
        margin-right: 1rem;
        animation: wave-b-cf67p5sw7r 1s ease-in-out infinite alternate;
    }

@keyframes wave-b-cf67p5sw7r {
    0% {
        transform: rotate(-10deg);
    }

    100% {
        transform: rotate(10deg);
    }
}

.welcome-subtitle[b-cf67p5sw7r] {
    font-size: 1.2rem;
    color: #6b7280;
    font-weight: 500;
    margin: 0;
}

/* Dashboard Grid */
.dashboard-grid[b-cf67p5sw7r] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2rem;
    margin-bottom: 3rem;
}

/* Dashboard Cards */
.dashboard-card[b-cf67p5sw7r] {
    background: white;
    border-radius: 16px;
    padding: 2rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border: 1px solid #e9ecef;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    animation: slideInUp-b-cf67p5sw7r 0.6s ease-out;
    animation-fill-mode: both;
}

    .dashboard-card:nth-child(1)[b-cf67p5sw7r] {
        animation-delay: 0.1s;
    }

    .dashboard-card:nth-child(2)[b-cf67p5sw7r] {
        animation-delay: 0.2s;
    }

    .dashboard-card:nth-child(3)[b-cf67p5sw7r] {
        animation-delay: 0.3s;
    }

@keyframes slideInUp-b-cf67p5sw7r {
    from {
        opacity: 0;
        transform: translateY(40px) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.dashboard-card:hover[b-cf67p5sw7r] {
    transform: translateY(-8px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

.dashboard-card[b-cf67p5sw7r]::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(0, 102, 255, 0.03), transparent);
    transition: left 0.6s ease;
    z-index: 1;
}

.dashboard-card:hover[b-cf67p5sw7r]::before {
    left: 100%;
}

.dashboard-card > *[b-cf67p5sw7r] {
    position: relative;
    z-index: 2;
}

/* Card Icons */
.card-icon[b-cf67p5sw7r] {
    font-size: 3rem;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    border-radius: 20px;
    background: linear-gradient(135deg, #f0f7ff, #e6f3ff);
    border: 2px solid #e1f0ff;
    transition: all 0.3s ease;
}

.roboter-icon[b-cf67p5sw7r] {
    background: linear-gradient(135deg, #0066ff, #0052cc);
    color: white;
    box-shadow: 0 8px 25px rgba(0, 102, 255, 0.3);
}

.profile-icon[b-cf67p5sw7r] {
    background: linear-gradient(135deg, #059669, #047857);
    color: white;
    box-shadow: 0 8px 25px rgba(5, 150, 105, 0.3);
}

.stats-icon[b-cf67p5sw7r] {
    background: linear-gradient(135deg, #7c3aed, #6d28d9);
    color: white;
    box-shadow: 0 8px 25px rgba(124, 58, 237, 0.3);
}

.dashboard-card:hover .card-icon[b-cf67p5sw7r] {
    transform: scale(1.1) rotate(5deg);
}

/* Card Content */
.card-content[b-cf67p5sw7r] {
    text-align: left;
}

.card-title[b-cf67p5sw7r] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #111827;
    margin-bottom: 1rem;
    line-height: 1.3;
}

.card-description[b-cf67p5sw7r] {
    font-size: 1rem;
    color: #6b7280;
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

/* Favoriten-Sektion */
.favorites-section[b-cf67p5sw7r] {
    margin-bottom: 3rem;
    animation: fadeInUp-b-cf67p5sw7r 0.6s ease-out 0.4s both;
}

.no-favorites-section[b-cf67p5sw7r] {
    margin-bottom: 3rem;
    animation: fadeInUp-b-cf67p5sw7r 0.6s ease-out 0.4s both;
}

.section-header[b-cf67p5sw7r] {
    text-align: center;
    margin-bottom: 2rem;
}

.section-title[b-cf67p5sw7r] {
    font-size: 2rem;
    font-weight: 700;
    color: #111827;
    margin-bottom: 0.5rem;
}

.section-subtitle[b-cf67p5sw7r] {
    font-size: 1.1rem;
    color: #6b7280;
    font-weight: 500;
    margin: 0;
}

/* Favoriten Grid */
.favorites-grid[b-cf67p5sw7r] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

/* Favoriten Robot Cards */
.favorite-robot-card[b-cf67p5sw7r] {
    background: white;
    border-radius: 16px;
    padding: 1.5rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border: 1px solid #e9ecef;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

    .favorite-robot-card:hover[b-cf67p5sw7r] {
        transform: translateY(-4px);
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
        border-color: #0066ff;
    }

/* FavoriteButton Position */
.favorite-btn-container[b-cf67p5sw7r] {
    position: absolute;
    top: 15px;
    right: 15px;
    z-index: 10;
}

/* Category Badge */
.robot-category-badge[b-cf67p5sw7r] {
    position: absolute;
    top: 15px;
    left: 15px;
    background: #0066ff;
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Robot Icon */
.robot-icon-container[b-cf67p5sw7r] {
    text-align: center;
    font-size: 3rem;
    color: #cbd5e0;
    margin: 2rem 0 1.5rem;
}

/* Robot Info */
.robot-info[b-cf67p5sw7r] {
    text-align: center;
}

.robot-name[b-cf67p5sw7r] {
    font-size: 1.25rem;
    font-weight: 700;
    color: #111827;
    margin-bottom: 0.5rem;
    line-height: 1.3;
}

.robot-manufacturer[b-cf67p5sw7r] {
    font-size: 0.9rem;
    color: #6b7280;
    font-weight: 500;
    margin-bottom: 1rem;
}

/* Robot Specifications */
.robot-specs[b-cf67p5sw7r] {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.spec-item[b-cf67p5sw7r] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.8rem;
    color: #6b7280;
    font-weight: 500;
}

    .spec-item i[b-cf67p5sw7r] {
        font-size: 0.9em;
        color: #9ca3af;
    }

/* Robot Actions */
.robot-actions[b-cf67p5sw7r] {
    display: flex;
    justify-content: center;
}

/* Favorites Footer */
.favorites-footer[b-cf67p5sw7r] {
    text-align: center;
    padding-top: 1rem;
    border-top: 1px solid #e9ecef;
}

/* No Favorites State */
.no-favorites-card[b-cf67p5sw7r] {
    background: white;
    border-radius: 16px;
    padding: 3rem 2rem;
    text-align: center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border: 1px solid #e9ecef;
    max-width: 500px;
    margin: 0 auto;
}

.no-favorites-icon[b-cf67p5sw7r] {
    font-size: 4rem;
    margin-bottom: 1.5rem;
    opacity: 0.7;
}

.no-favorites-title[b-cf67p5sw7r] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #111827;
    margin-bottom: 1rem;
}

.no-favorites-description[b-cf67p5sw7r] {
    font-size: 1rem;
    color: #6b7280;
    line-height: 1.6;
    margin-bottom: 2rem;
}

/* Buttons */
.btn[b-cf67p5sw7r] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 10px;
    text-decoration: none;
    border: 2px solid transparent;
    transition: all 0.2s ease;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.btn-sm[b-cf67p5sw7r] {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
}

.btn-primary[b-cf67p5sw7r] {
    background: linear-gradient(135deg, #0066ff, #0052cc);
    color: white;
    border: none;
}

    .btn-primary:hover[b-cf67p5sw7r] {
        color: white;
        text-decoration: none;
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(0, 102, 255, 0.4);
    }

.btn-outline-primary[b-cf67p5sw7r] {
    background: white;
    color: #0066ff;
    border-color: #0066ff;
}

    .btn-outline-primary:hover[b-cf67p5sw7r] {
        background: #0066ff;
        color: white;
        text-decoration: none;
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(0, 102, 255, 0.3);
    }

.btn-outline-secondary[b-cf67p5sw7r] {
    background: white;
    color: #6b7280;
    border-color: #d1d5db;
}

    .btn-outline-secondary:hover[b-cf67p5sw7r] {
        background: #f9fafb;
        color: #374151;
        border-color: #9ca3af;
        text-decoration: none;
        transform: translateY(-1px);
    }

.btn:active[b-cf67p5sw7r] {
    transform: scale(0.98);
}

/* Responsive Design */
@media (max-width: 1200px) {
    .dashboard-container[b-cf67p5sw7r] {
        max-width: 1000px;
        padding: 1.5rem;
    }

    .dashboard-grid[b-cf67p5sw7r] {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 1.5rem;
    }

    .favorites-grid[b-cf67p5sw7r] {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 1.25rem;
    }
}

@media (max-width: 768px) {
    .dashboard-container[b-cf67p5sw7r] {
        padding: 1rem;
    }

    .welcome-title[b-cf67p5sw7r] {
        font-size: 2.25rem;
    }

        .welcome-title[b-cf67p5sw7r]::before {
            font-size: 2rem;
            margin-right: 0.5rem;
        }

    .dashboard-grid[b-cf67p5sw7r] {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .favorites-grid[b-cf67p5sw7r] {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }

    .dashboard-card[b-cf67p5sw7r] {
        padding: 1.5rem;
    }

    .favorite-robot-card[b-cf67p5sw7r] {
        padding: 1.25rem;
    }

    .card-icon[b-cf67p5sw7r] {
        width: 64px;
        height: 64px;
        font-size: 2.5rem;
    }

    .robot-specs[b-cf67p5sw7r] {
        flex-direction: column;
        gap: 0.5rem;
    }
}

@media (max-width: 480px) {
    .welcome-title[b-cf67p5sw7r] {
        font-size: 1.875rem;
    }

    .section-title[b-cf67p5sw7r] {
        font-size: 1.75rem;
    }

    .dashboard-card[b-cf67p5sw7r] {
        padding: 1.25rem;
    }

    .favorite-robot-card[b-cf67p5sw7r] {
        padding: 1rem;
    }

    .card-icon[b-cf67p5sw7r] {
        width: 56px;
        height: 56px;
        font-size: 2rem;
    }

    .card-title[b-cf67p5sw7r] {
        font-size: 1.25rem;
    }

    .no-favorites-card[b-cf67p5sw7r] {
        padding: 2rem 1.5rem;
    }
}

/* Loading States */
@media (prefers-reduced-motion: no-preference) {
    .dashboard-card[b-cf67p5sw7r],
    .favorites-section[b-cf67p5sw7r],
    .no-favorites-section[b-cf67p5sw7r] {
        animation-duration: 0.6s;
        animation-timing-function: ease-out;
        animation-fill-mode: both;
    }
}

@media (prefers-reduced-motion: reduce) {
    *[b-cf67p5sw7r],
    *[b-cf67p5sw7r]::before,
    *[b-cf67p5sw7r]::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Focus States für Accessibility */
.btn:focus[b-cf67p5sw7r],
.dashboard-card:focus[b-cf67p5sw7r],
.favorite-robot-card:focus[b-cf67p5sw7r] {
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 102, 255, 0.25);
}

/* Print Styles */
@media print {
    .dashboard-container[b-cf67p5sw7r] {
        padding: 0;
        background: white;
    }

    .dashboard-card[b-cf67p5sw7r],
    .favorite-robot-card[b-cf67p5sw7r] {
        box-shadow: none;
        border: 1px solid #ddd;
        break-inside: avoid;
    }

    .btn[b-cf67p5sw7r] {
        display: none;
    }
}
/* _content/BotomixNew/Components/Account/Pages/ExternalLogin.razor.rz.scp.css */
/* Modernes ExternalLogin Design */
.external-login-container[b-ykjktw62o4] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 85vh;
    background: linear-gradient(135deg, #f0f7ff 0%, #e6f3ff 50%, #f8f9fa 100%);
    padding: 2rem;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.external-login-card[b-ykjktw62o4] {
    width: 100%;
    max-width: 560px;
    background: white;
    padding: 2.5rem;
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    border: 1px solid #e9ecef;
    position: relative;
    overflow: hidden;
    animation: slideUp-b-ykjktw62o4 0.6s ease-out;
}

@keyframes slideUp-b-ykjktw62o4 {
    from {
        opacity: 0;
        transform: translateY(30px) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.external-login-card[b-ykjktw62o4]::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(0, 102, 255, 0.03), transparent);
    transition: left 0.8s ease;
    z-index: 1;
}

.external-login-card:hover[b-ykjktw62o4]::before {
    left: 100%;
}

.external-login-card > *[b-ykjktw62o4] {
    position: relative;
    z-index: 2;
}

.external-login-header[b-ykjktw62o4] {
    text-align: center;
    margin-bottom: 2rem;
}

.brand-name[b-ykjktw62o4] {
    font-size: 2.25rem;
    font-weight: 700;
    color: #111827;
    margin-bottom: 0.5rem;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.brand-subtitle[b-ykjktw62o4] {
    font-size: 1.1rem;
    color: #6b7280;
    font-weight: 500;
}

.provider-info[b-ykjktw62o4] {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    background: linear-gradient(135deg, #f0fdf4, #dcfce7);
    padding: 1.5rem;
    border-radius: 12px;
    margin-bottom: 2rem;
    border: 1px solid #bbf7d0;
    animation: fadeInUp-b-ykjktw62o4 0.6s ease-out 0.2s both;
}

.provider-icon[b-ykjktw62o4] {
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    background: linear-gradient(135deg, #22c55e, #16a34a);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.8rem;
    box-shadow: 0 8px 25px rgba(34, 197, 94, 0.3);
    animation: pulse-b-ykjktw62o4 2s infinite;
}

@keyframes pulse-b-ykjktw62o4 {
    0%, 100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }
}

.provider-content h3[b-ykjktw62o4] {
    font-size: 1.4rem;
    font-weight: 700;
    color: #059669;
    margin-bottom: 0.5rem;
}

.provider-content p[b-ykjktw62o4] {
    color: #065f46;
    line-height: 1.6;
    margin: 0;
}

.form-section[b-ykjktw62o4] {
    animation: fadeInUp-b-ykjktw62o4 0.6s ease-out 0.4s both;
}

.info-notice[b-ykjktw62o4] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    background: linear-gradient(135deg, #eff6ff, #dbeafe);
    padding: 1rem 1.25rem;
    border-radius: 10px;
    margin-bottom: 1.5rem;
    border: 1px solid #93c5fd;
}

.info-icon[b-ykjktw62o4] {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 0.9rem;
}

.info-text[b-ykjktw62o4] {
    color: #1e40af;
    font-size: 0.9rem;
    line-height: 1.4;
}

    .info-text strong[b-ykjktw62o4] {
        color: #1d4ed8;
    }

.form-control[b-ykjktw62o4] {
    height: 58px;
    border-radius: 10px;
    border: 2px solid #e5e7eb;
    transition: all 0.2s ease;
    font-size: 1rem;
    background: white;
}

    .form-control:focus[b-ykjktw62o4] {
        border-color: #0066ff;
        box-shadow: 0 0 0 4px rgba(0, 102, 255, 0.1);
        transform: translateY(-1px);
    }

    .form-control:hover:not(:focus)[b-ykjktw62o4] {
        border-color: #cbd5e1;
    }

    .form-control:disabled[b-ykjktw62o4] {
        background-color: #f8f9fa;
        border-color: #e9ecef;
        color: #6c757d;
    }

.form-floating > label[b-ykjktw62o4] {
    color: #6b7280;
    font-weight: 500;
}

.form-floating > .form-control:focus ~ label[b-ykjktw62o4],
.form-floating > .form-control:not(:placeholder-shown) ~ label[b-ykjktw62o4] {
    color: #0066ff;
    font-weight: 600;
}

.form-text[b-ykjktw62o4] {
    font-size: 0.85rem;
    color: #6b7280;
    margin-top: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.form-check[b-ykjktw62o4] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem;
    background: #f8f9fa;
    border-radius: 10px;
    border: 1px solid #e9ecef;
}

.form-check-input[b-ykjktw62o4] {
    width: 1.125rem;
    height: 1.125rem;
    margin: 0;
    accent-color: #0066ff;
    flex-shrink: 0;
}

    .form-check-input:checked[b-ykjktw62o4] {
        background-color: #0066ff;
        border-color: #0066ff;
    }

    .form-check-input:hover[b-ykjktw62o4] {
        border-color: #0066ff;
    }

.form-check-label[b-ykjktw62o4] {
    font-size: 0.9rem;
    color: #374151;
    cursor: pointer;
    margin: 0;
    line-height: 1.4;
}

    .form-check-label a[b-ykjktw62o4] {
        color: #0066ff;
        text-decoration: none;
        font-weight: 500;
        transition: all 0.2s ease;
    }

        .form-check-label a:hover[b-ykjktw62o4] {
            text-decoration: underline;
            color: #0052cc;
        }

.btn-primary[b-ykjktw62o4] {
    background: linear-gradient(135deg, #0066ff, #0052cc);
    border: none;
    padding: 1rem 1.5rem;
    font-size: 1.1rem;
    font-weight: 600;
    border-radius: 10px;
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

    .btn-primary:hover:not(:disabled)[b-ykjktw62o4] {
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(0, 102, 255, 0.4);
        color: white;
    }

    .btn-primary:disabled[b-ykjktw62o4] {
        background: #9ca3af;
        transform: none;
        box-shadow: none;
        cursor: not-allowed;
    }

    .btn-primary:active[b-ykjktw62o4] {
        transform: scale(0.98);
    }

.security-info[b-ykjktw62o4] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    background: linear-gradient(135deg, #fef7e7, #fef3e2);
    padding: 1rem 1.25rem;
    border-radius: 10px;
    margin-bottom: 2rem;
    border: 1px solid #fde68a;
    font-size: 0.9rem;
    animation: fadeInUp-b-ykjktw62o4 0.6s ease-out 0.6s both;
}

.security-icon[b-ykjktw62o4] {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, #f59e0b, #d97706);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 0.9rem;
}

.security-text[b-ykjktw62o4] {
    color: #92400e;
    line-height: 1.4;
}

    .security-text strong[b-ykjktw62o4] {
        color: #78350f;
    }

.alert[b-ykjktw62o4] {
    padding: 1rem 1.25rem;
    border-radius: 10px;
    margin-bottom: 1.5rem;
    font-weight: 500;
    border: none;
    animation: slideDown-b-ykjktw62o4 0.3s ease-out;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

@keyframes slideDown-b-ykjktw62o4 {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.alert-danger[b-ykjktw62o4] {
    background: linear-gradient(135deg, #fef2f2, #fee2e2);
    color: #991b1b;
    border-left: 4px solid #ef4444;
}

.alert-warning[b-ykjktw62o4] {
    background: linear-gradient(135deg, #fffbeb, #fef3c7);
    color: #92400e;
    border-left: 4px solid #f59e0b;
    align-items: flex-start;
    flex-direction: column;
}

    .alert-warning .btn[b-ykjktw62o4] {
        margin-top: 0.5rem;
    }

    .alert-warning p[b-ykjktw62o4] {
        margin: 0;
    }


.links-section[b-ykjktw62o4] {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid #e9ecef;
    text-align: center;
    animation: fadeInUp-b-ykjktw62o4 0.6s ease-out 0.8s both;
}

.back-link[b-ykjktw62o4] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: #0066ff;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    transition: all 0.2s ease;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    margin-bottom: 1rem;
}

    .back-link:hover[b-ykjktw62o4] {
        color: #0052cc;
        background: rgba(0, 102, 255, 0.05);
        text-decoration: none;
        transform: translateX(-2px);
    }

.help-text[b-ykjktw62o4] {
    font-size: 0.9rem;
    color: #6b7280;
    margin-top: 1rem;
}

.support-link[b-ykjktw62o4] {
    color: #0066ff;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.2s ease;
}

    .support-link:hover[b-ykjktw62o4] {
        color: #0052cc;
        text-decoration: underline;
    }

.spinner-border-sm[b-ykjktw62o4] {
    width: 1rem;
    height: 1rem;
    animation: spin-b-ykjktw62o4 1s linear infinite;
}

@keyframes spin-b-ykjktw62o4 {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.text-danger[b-ykjktw62o4] {
    font-size: 0.85rem;
    font-weight: 500;
    margin-top: 0.25rem;
    color: #dc3545;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

    .text-danger[b-ykjktw62o4]::before {
        content: '⚠';
        font-size: 0.8rem;
    }

@keyframes fadeInUp-b-ykjktw62o4 {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 768px) {
    .external-login-container[b-ykjktw62o4] {
        padding: 1rem;
        align-items: flex-start;
        padding-top: 2rem;
    }

    .external-login-card[b-ykjktw62o4] {
        padding: 2rem 1.5rem;
        max-width: 100%;
    }

    .brand-name[b-ykjktw62o4] {
        font-size: 2rem;
    }

    .provider-info[b-ykjktw62o4] {
        flex-direction: column;
        text-align: center;
        gap: 1rem;
    }

    .provider-icon[b-ykjktw62o4] {
        align-self: center;
        width: 56px;
        height: 56px;
        font-size: 1.5rem;
    }

    .provider-content h3[b-ykjktw62o4] {
        font-size: 1.25rem;
    }

    .info-notice[b-ykjktw62o4], .security-info[b-ykjktw62o4] {
        flex-direction: column;
        text-align: center;
        gap: 0.75rem;
    }

    .info-icon[b-ykjktw62o4], .security-icon[b-ykjktw62o4] {
        align-self: center;
    }

    .form-check[b-ykjktw62o4] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .form-check-input[b-ykjktw62o4] {
        align-self: flex-start;
    }
}

@media (max-width: 480px) {
    .external-login-card[b-ykjktw62o4] {
        padding: 1.5rem 1rem;
    }

    .brand-name[b-ykjktw62o4] {
        font-size: 1.75rem;
    }

    .provider-icon[b-ykjktw62o4] {
        width: 48px;
        height: 48px;
        font-size: 1.3rem;
    }

    .provider-content h3[b-ykjktw62o4] {
        font-size: 1.1rem;
    }

    .btn-primary[b-ykjktw62o4] {
        padding: 0.875rem 1.25rem;
        font-size: 1rem;
    }

    .row .col-md-6 .form-floating[b-ykjktw62o4] {
        margin-bottom: 1rem;
    }
}

.btn:focus[b-ykjktw62o4], .form-control:focus[b-ykjktw62o4], .form-check-input:focus[b-ykjktw62o4] {
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 102, 255, 0.25);
}

.external-login-card[b-ykjktw62o4] {
    transition: box-shadow 0.3s ease;
}

    .external-login-card:hover[b-ykjktw62o4] {
        box-shadow: 0 15px 50px rgba(0, 0, 0, 0.15);
    }

*[b-ykjktw62o4] {
    transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

@media print {
    .external-login-container[b-ykjktw62o4] {
        padding: 0;
        background: white;
    }

    .external-login-card[b-ykjktw62o4] {
        box-shadow: none;
        border: 1px solid #ddd;
    }

    .btn[b-ykjktw62o4] {
        display: none;
    }

    .provider-icon[b-ykjktw62o4], .info-icon[b-ykjktw62o4], .security-icon[b-ykjktw62o4] {
        animation: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    *[b-ykjktw62o4], *[b-ykjktw62o4]::before, *[b-ykjktw62o4]::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}
/* _content/BotomixNew/Components/Account/Pages/ForgotPassword.razor.rz.scp.css */
/* Modernes Design für Passwort-Vergessen-Seite */
.forgot-password-container[b-mk1g18ulpm] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 85vh;
    background: linear-gradient(135deg, #f0f7ff 0%, #e6f3ff 50%, #f8f9fa 100%);
    padding: 2rem;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.forgot-password-card[b-mk1g18ulpm] {
    width: 100%;
    max-width: 500px;
    background: white;
    padding: 2.5rem;
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    border: 1px solid #e9ecef;
    position: relative;
    overflow: hidden;
    animation: slideUp-b-mk1g18ulpm 0.6s ease-out;
}

@keyframes slideUp-b-mk1g18ulpm {
    from {
        opacity: 0;
        transform: translateY(30px) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Subtiler Glanz-Effekt */
.forgot-password-card[b-mk1g18ulpm]::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(0, 102, 255, 0.03), transparent);
    transition: left 0.8s ease;
    z-index: 1;
}

.forgot-password-card:hover[b-mk1g18ulpm]::before {
    left: 100%;
}

.forgot-password-card > *[b-mk1g18ulpm] {
    position: relative;
    z-index: 2;
}

/* Header Styling */
.forgot-password-header[b-mk1g18ulpm] {
    text-align: center;
    margin-bottom: 2rem;
}

.brand-name[b-mk1g18ulpm] {
    font-size: 2.25rem;
    font-weight: 700;
    color: #111827;
    margin-bottom: 0.5rem;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.brand-subtitle[b-mk1g18ulpm] {
    font-size: 1.1rem;
    color: #6b7280;
    font-weight: 500;
}

/* Info Section */
.info-section[b-mk1g18ulpm] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    background: linear-gradient(135deg, #f0f7ff, #e6f3ff);
    padding: 1.5rem;
    border-radius: 12px;
    margin-bottom: 2rem;
    border: 1px solid #e1f0ff;
    position: relative;
}

    .info-section[b-mk1g18ulpm]::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 4px;
        background: linear-gradient(180deg, #0066ff, #0052cc);
        border-radius: 2px;
    }

.info-icon[b-mk1g18ulpm] {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #0066ff, #0052cc);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.2rem;
    box-shadow: 0 4px 12px rgba(0, 102, 255, 0.3);
    animation: pulse-b-mk1g18ulpm 2s infinite;
}

@keyframes pulse-b-mk1g18ulpm {
    0%, 100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }
}

.info-content h4[b-mk1g18ulpm] {
    margin: 0 0 0.5rem 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: #1f2937;
}

.info-content p[b-mk1g18ulpm] {
    margin: 0;
    color: #6b7280;
    line-height: 1.5;
}

/* Success Section */
.success-section[b-mk1g18ulpm] {
    text-align: center;
    padding: 2rem 1rem;
    background: linear-gradient(135deg, #f0fdf4, #dcfce7);
    border-radius: 12px;
    margin-bottom: 2rem;
    border: 1px solid #bbf7d0;
    animation: successFadeIn-b-mk1g18ulpm 0.6s ease-out;
}

@keyframes successFadeIn-b-mk1g18ulpm {
    from {
        opacity: 0;
        transform: scale(0.9);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.success-icon[b-mk1g18ulpm] {
    width: 64px;
    height: 64px;
    background: linear-gradient(135deg, #22c55e, #16a34a);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.8rem;
    margin: 0 auto 1.5rem;
    box-shadow: 0 8px 25px rgba(34, 197, 94, 0.3);
    animation: successPop-b-mk1g18ulpm 0.6s ease-out 0.2s both;
}

@keyframes successPop-b-mk1g18ulpm {
    0% {
        transform: scale(0);
        opacity: 0;
    }

    50% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.success-content h3[b-mk1g18ulpm] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #059669;
    margin-bottom: 1rem;
}

.success-content p[b-mk1g18ulpm] {
    color: #065f46;
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

.next-steps[b-mk1g18ulpm] {
    background: white;
    padding: 1.5rem;
    border-radius: 10px;
    margin-bottom: 1rem;
    border: 1px solid #bbf7d0;
    text-align: left;
}

    .next-steps h5[b-mk1g18ulpm] {
        font-size: 1rem;
        font-weight: 600;
        color: #059669;
        margin-bottom: 1rem;
        display: flex;
        align-items: center;
    }

    .next-steps ol[b-mk1g18ulpm] {
        margin: 0;
        padding-left: 1.5rem;
        color: #065f46;
    }

    .next-steps li[b-mk1g18ulpm] {
        margin-bottom: 0.5rem;
        line-height: 1.4;
    }

.help-note[b-mk1g18ulpm] {
    background: rgba(34, 197, 94, 0.1);
    padding: 1rem;
    border-radius: 8px;
    color: #059669;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Form Styling */
.form-control[b-mk1g18ulpm] {
    height: 58px;
    border-radius: 10px;
    border: 2px solid #e5e7eb;
    transition: all 0.2s ease;
    font-size: 1rem;
    background: white;
}

    .form-control:focus[b-mk1g18ulpm] {
        border-color: #0066ff;
        box-shadow: 0 0 0 4px rgba(0, 102, 255, 0.1);
        transform: translateY(-1px);
    }

    .form-control:hover:not(:focus)[b-mk1g18ulpm] {
        border-color: #cbd5e1;
    }

    .form-control:disabled[b-mk1g18ulpm] {
        background-color: #f8f9fa;
        border-color: #e9ecef;
        color: #6c757d;
    }

.form-floating > label[b-mk1g18ulpm] {
    color: #6b7280;
    font-weight: 500;
}

.form-text[b-mk1g18ulpm] {
    font-size: 0.85rem;
    color: #6b7280;
    margin-top: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

/* Button Styling */
.btn-primary[b-mk1g18ulpm] {
    background: linear-gradient(135deg, #0066ff, #0052cc);
    border: none;
    padding: 0.875rem 1.5rem;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 10px;
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

    .btn-primary:hover:not(:disabled)[b-mk1g18ulpm] {
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(0, 102, 255, 0.3);
    }

    .btn-primary:active[b-mk1g18ulpm] {
        transform: scale(0.98);
    }

    .btn-primary:disabled[b-mk1g18ulpm] {
        background: #9ca3af;
        transform: none;
        box-shadow: none;
        cursor: not-allowed;
    }

.btn-outline-primary[b-mk1g18ulpm] {
    background: white;
    border: 2px solid #0066ff;
    color: #0066ff;
    padding: 0.875rem 1.5rem;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 10px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

    .btn-outline-primary:hover[b-mk1g18ulpm] {
        background: #0066ff;
        color: white;
        transform: translateY(-1px);
        box-shadow: 0 4px 15px rgba(0, 102, 255, 0.2);
    }

/* Security Info Section */
.security-info[b-mk1g18ulpm] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    background: linear-gradient(135deg, #fef7e7, #fef3e2);
    padding: 1rem 1.25rem;
    border-radius: 10px;
    margin-bottom: 1.5rem;
    border: 1px solid #fde68a;
    font-size: 0.9rem;
}

.security-icon[b-mk1g18ulpm] {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, #f59e0b, #d97706);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 0.9rem;
}

.security-text[b-mk1g18ulpm] {
    color: #92400e;
    line-height: 1.4;
}

    .security-text strong[b-mk1g18ulpm] {
        color: #78350f;
    }

/* Alert Styling */
.alert[b-mk1g18ulpm] {
    padding: 1rem 1.25rem;
    border-radius: 10px;
    margin-bottom: 1.5rem;
    font-weight: 500;
    border: none;
    animation: slideDown-b-mk1g18ulpm 0.3s ease-out;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

@keyframes slideDown-b-mk1g18ulpm {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.alert-success[b-mk1g18ulpm] {
    background: linear-gradient(135deg, #f0fdf4, #dcfce7);
    color: #166534;
    border-left: 4px solid #22c55e;
}

.alert-danger[b-mk1g18ulpm] {
    background: linear-gradient(135deg, #fef2f2, #fee2e2);
    color: #991b1b;
    border-left: 4px solid #ef4444;
}

/* Links Section */
.links-section[b-mk1g18ulpm] {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid #e9ecef;
    text-align: center;
}

.back-link[b-mk1g18ulpm] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: #0066ff;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    transition: all 0.2s ease;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    margin-bottom: 1rem;
}

    .back-link:hover[b-mk1g18ulpm] {
        color: #0052cc;
        background: rgba(0, 102, 255, 0.05);
        text-decoration: none;
        transform: translateX(-2px);
    }

.help-text[b-mk1g18ulpm] {
    font-size: 0.9rem;
    color: #6b7280;
    margin-top: 1rem;
}

.register-link[b-mk1g18ulpm] {
    color: #0066ff;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.2s ease;
}

    .register-link:hover[b-mk1g18ulpm] {
        color: #0052cc;
        text-decoration: underline;
    }

/* Loading Spinner */
.spinner-border-sm[b-mk1g18ulpm] {
    width: 1rem;
    height: 1rem;
    animation: spin-b-mk1g18ulpm 1s linear infinite;
}

@keyframes spin-b-mk1g18ulpm {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Validation Errors */
.text-danger[b-mk1g18ulpm] {
    font-size: 0.85rem;
    font-weight: 500;
    margin-top: 0.25rem;
    color: #dc3545;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

    .text-danger[b-mk1g18ulpm]::before {
        content: '⚠';
        font-size: 0.8rem;
    }

/* Responsive Design */
@media (max-width: 768px) {
    .forgot-password-container[b-mk1g18ulpm] {
        padding: 1rem;
        align-items: flex-start;
        padding-top: 2rem;
    }

    .forgot-password-card[b-mk1g18ulpm] {
        padding: 2rem 1.5rem;
        max-width: 100%;
    }

    .brand-name[b-mk1g18ulpm] {
        font-size: 2rem;
    }

    .info-section[b-mk1g18ulpm] {
        padding: 1.25rem;
        margin-bottom: 1.5rem;
    }

    .info-icon[b-mk1g18ulpm] {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }

    .success-section[b-mk1g18ulpm] {
        padding: 1.5rem 1rem;
    }

    .success-icon[b-mk1g18ulpm] {
        width: 56px;
        height: 56px;
        font-size: 1.5rem;
    }
}

@media (max-width: 480px) {
    .forgot-password-card[b-mk1g18ulpm] {
        padding: 1.5rem 1rem;
    }

    .brand-name[b-mk1g18ulpm] {
        font-size: 1.75rem;
    }

    .info-section[b-mk1g18ulpm] {
        flex-direction: column;
        text-align: center;
        gap: 1rem;
    }

    .info-icon[b-mk1g18ulpm] {
        align-self: center;
    }

    .security-info[b-mk1g18ulpm] {
        flex-direction: column;
        text-align: center;
        gap: 0.75rem;
    }

    .security-icon[b-mk1g18ulpm] {
        align-self: center;
    }

    .next-steps[b-mk1g18ulpm] {
        padding: 1rem;
    }

    .success-content h3[b-mk1g18ulpm] {
        font-size: 1.3rem;
    }
}

/* Focus Styles für Accessibility */
.btn:focus[b-mk1g18ulpm],
.form-control:focus[b-mk1g18ulpm] {
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 102, 255, 0.25);
}

/* Hover-Effekte für bessere Interaktivität */
.forgot-password-card[b-mk1g18ulpm] {
    transition: box-shadow 0.3s ease;
}

    .forgot-password-card:hover[b-mk1g18ulpm] {
        box-shadow: 0 15px 50px rgba(0, 0, 0, 0.15);
    }

/* Smooth Transitions für alle interaktiven Elemente */
*[b-mk1g18ulpm] {
    transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

/* Form Floating Label Enhancement */
.form-floating > .form-control:focus ~ label[b-mk1g18ulpm],
.form-floating > .form-control:not(:placeholder-shown) ~ label[b-mk1g18ulpm] {
    color: #0066ff;
    font-weight: 600;
}

/* Button Press Animation */
.btn:active[b-mk1g18ulpm] {
    transform: scale(0.98);
}

/* Success Animation Delay */
.success-content > *[b-mk1g18ulpm] {
    animation: fadeInUp-b-mk1g18ulpm 0.4s ease-out;
}

    .success-content > *:nth-child(1)[b-mk1g18ulpm] {
        animation-delay: 0.1s;
    }

    .success-content > *:nth-child(2)[b-mk1g18ulpm] {
        animation-delay: 0.2s;
    }

    .success-content > *:nth-child(3)[b-mk1g18ulpm] {
        animation-delay: 0.3s;
    }

@keyframes fadeInUp-b-mk1g18ulpm {
    from {
        opacity: 0;
        transform: translateY(15px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* _content/BotomixNew/Components/Account/Pages/InvalidUser.razor.rz.scp.css */
body[b-55l5rmxria] {
}
/* Modernes InvalidUser Design - konsistent mit Botomix Design */
.invalid-user-container[b-55l5rmxria] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 85vh;
    background: linear-gradient(135deg, #f0f7ff 0%, #e6f3ff 50%, #f8f9fa 100%);
    padding: 2rem;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.invalid-user-card[b-55l5rmxria] {
    width: 100%;
    max-width: 600px;
    background: white;
    padding: 3rem 2.5rem;
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    border: 1px solid #e9ecef;
    position: relative;
    overflow: hidden;
    animation: slideUp-b-55l5rmxria 0.6s ease-out;
    text-align: center;
}

@keyframes slideUp-b-55l5rmxria {
    from {
        opacity: 0;
        transform: translateY(30px) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Subtiler Glanz-Effekt */
.invalid-user-card[b-55l5rmxria]::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(220, 53, 69, 0.03), transparent);
    transition: left 0.8s ease;
    z-index: 1;
}

.invalid-user-card:hover[b-55l5rmxria]::before {
    left: 100%;
}

.invalid-user-card > *[b-55l5rmxria] {
    position: relative;
    z-index: 2;
}

/* Icon Styling */
.invalid-user-icon[b-55l5rmxria] {
    font-size: 5rem;
    color: #dc3545;
    margin-bottom: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    animation: iconPulse-b-55l5rmxria 2s ease-in-out infinite;
}

@keyframes iconPulse-b-55l5rmxria {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.05);
        opacity: 0.8;
    }
}

/* Header Styling */
.invalid-user-header[b-55l5rmxria] {
    margin-bottom: 2.5rem;
}

.invalid-user-title[b-55l5rmxria] {
    font-size: 2.5rem;
    font-weight: 700;
    color: #dc3545;
    margin-bottom: 0.75rem;
    text-shadow: 0 2px 4px rgba(220, 53, 69, 0.1);
}

.invalid-user-subtitle[b-55l5rmxria] {
    font-size: 1.2rem;
    color: #6b7280;
    font-weight: 500;
    margin: 0;
}

/* Content Sections */
.invalid-user-content[b-55l5rmxria] {
    margin-bottom: 3rem;
    text-align: left;
}

.error-details[b-55l5rmxria] {
    margin-bottom: 2.5rem;
    padding: 2rem;
    background: linear-gradient(135deg, #fef2f2, #fee2e2);
    border-radius: 12px;
    border-left: 4px solid #dc3545;
}

.error-title[b-55l5rmxria] {
    font-size: 1.25rem;
    font-weight: 700;
    color: #991b1b;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.error-reasons[b-55l5rmxria] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.reason-item[b-55l5rmxria] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1rem;
    color: #7f1d1d;
    font-weight: 500;
}

    .reason-item i[b-55l5rmxria] {
        color: #dc3545;
        width: 20px;
        text-align: center;
    }

/* Help Section */
.help-section[b-55l5rmxria] {
    padding: 2rem;
    background: linear-gradient(135deg, #f0fdf4, #dcfce7);
    border-radius: 12px;
    border-left: 4px solid #22c55e;
}

.help-title[b-55l5rmxria] {
    font-size: 1.25rem;
    font-weight: 700;
    color: #166534;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.help-actions[b-55l5rmxria] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

.action-card[b-55l5rmxria] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem;
    background: white;
    border-radius: 10px;
    border: 1px solid #bbf7d0;
    transition: all 0.2s ease;
}

    .action-card:hover[b-55l5rmxria] {
        transform: translateY(-2px);
        box-shadow: 0 4px 15px rgba(34, 197, 94, 0.15);
        border-color: #22c55e;
    }

.action-icon[b-55l5rmxria] {
    font-size: 1.5rem;
    color: #22c55e;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: linear-gradient(135deg, #f0fdf4, #dcfce7);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.action-content h4[b-55l5rmxria] {
    font-size: 1rem;
    font-weight: 600;
    color: #111827;
    margin-bottom: 0.25rem;
}

.action-content p[b-55l5rmxria] {
    font-size: 0.9rem;
    color: #6b7280;
    margin: 0;
    line-height: 1.4;
}

/* Action Buttons */
.invalid-user-actions[b-55l5rmxria] {
    margin-bottom: 2rem;
}

.primary-actions[b-55l5rmxria] {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.secondary-actions[b-55l5rmxria] {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* Button Styling */
.btn[b-55l5rmxria] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.875rem 1.5rem;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 10px;
    text-decoration: none;
    border: 2px solid transparent;
    transition: all 0.2s ease;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.btn-lg[b-55l5rmxria] {
    padding: 1rem 2rem;
    font-size: 1.1rem;
}

.btn-primary[b-55l5rmxria] {
    background: linear-gradient(135deg, #0066ff, #0052cc);
    color: white;
    border: none;
}

    .btn-primary:hover[b-55l5rmxria] {
        color: white;
        text-decoration: none;
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(0, 102, 255, 0.4);
    }

.btn-outline-primary[b-55l5rmxria] {
    background: white;
    color: #0066ff;
    border-color: #0066ff;
}

    .btn-outline-primary:hover[b-55l5rmxria] {
        background: #0066ff;
        color: white;
        text-decoration: none;
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(0, 102, 255, 0.3);
    }

.btn-outline-secondary[b-55l5rmxria] {
    background: white;
    color: #6b7280;
    border-color: #d1d5db;
}

    .btn-outline-secondary:hover[b-55l5rmxria] {
        background: #f9fafb;
        color: #374151;
        border-color: #9ca3af;
        text-decoration: none;
        transform: translateY(-1px);
    }

.btn:active[b-55l5rmxria] {
    transform: scale(0.98);
}

/* Additional Info Section */
.additional-info[b-55l5rmxria] {
    width: 100%;
    max-width: 600px;
    margin-top: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.info-card[b-55l5rmxria] {
    background: white;
    padding: 1.5rem;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    border: 1px solid #e9ecef;
    animation: fadeInUp-b-55l5rmxria 0.6s ease-out 0.3s both;
}

@keyframes fadeInUp-b-55l5rmxria {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.info-header[b-55l5rmxria] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

    .info-header i[b-55l5rmxria] {
        color: #0066ff;
        font-size: 1.2rem;
    }

    .info-header h5[b-55l5rmxria] {
        font-size: 1.1rem;
        font-weight: 600;
        color: #111827;
        margin: 0;
    }

.info-card p[b-55l5rmxria] {
    font-size: 0.95rem;
    color: #6b7280;
    line-height: 1.6;
    margin: 0;
}

/* Contact Info */
.contact-info[b-55l5rmxria] {
    background: linear-gradient(135deg, #f8f9fa, #e9ecef);
    padding: 1.5rem;
    border-radius: 12px;
    text-align: center;
    animation: fadeInUp-b-55l5rmxria 0.6s ease-out 0.4s both;
}

    .contact-info h6[b-55l5rmxria] {
        font-size: 1rem;
        font-weight: 600;
        color: #111827;
        margin-bottom: 1rem;
    }

.contact-methods[b-55l5rmxria] {
    display: flex;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap;
}

.contact-method[b-55l5rmxria] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    color: #374151;
    font-weight: 500;
}

    .contact-method i[b-55l5rmxria] {
        color: #0066ff;
        width: 16px;
        text-align: center;
    }

/* StatusMessage Styling */
[b-55l5rmxria] .alert {
    margin-top: 1.5rem;
    padding: 1rem;
    border-radius: 10px;
    font-weight: 500;
    border: none;
    animation: slideDown-b-55l5rmxria 0.3s ease-out;
}

@keyframes slideDown-b-55l5rmxria {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

[b-55l5rmxria] .alert-danger {
    background: linear-gradient(135deg, #fef2f2, #fee2e2);
    color: #991b1b;
    border-left: 4px solid #ef4444;
}

[b-55l5rmxria] .alert-info {
    background: linear-gradient(135deg, #eff6ff, #dbeafe);
    color: #1e40af;
    border-left: 4px solid #3b82f6;
}

/* Responsive Design */
@media (max-width: 768px) {
    .invalid-user-container[b-55l5rmxria] {
        padding: 1rem;
        align-items: flex-start;
        padding-top: 2rem;
    }

    .invalid-user-card[b-55l5rmxria] {
        padding: 2rem 1.5rem;
        max-width: 100%;
    }

    .invalid-user-title[b-55l5rmxria] {
        font-size: 2rem;
    }

    .invalid-user-icon[b-55l5rmxria] {
        font-size: 4rem;
        margin-bottom: 1.5rem;
    }

    .primary-actions[b-55l5rmxria],
    .secondary-actions[b-55l5rmxria] {
        flex-direction: column;
        align-items: stretch;
    }

    .btn[b-55l5rmxria] {
        justify-content: center;
    }

    .contact-methods[b-55l5rmxria] {
        flex-direction: column;
        gap: 1rem;
    }

    .help-actions[b-55l5rmxria] {
        gap: 0.75rem;
    }

    .action-card[b-55l5rmxria] {
        padding: 1rem;
    }

    .action-icon[b-55l5rmxria] {
        width: 36px;
        height: 36px;
        font-size: 1.25rem;
    }
}

@media (max-width: 480px) {
    .invalid-user-card[b-55l5rmxria] {
        padding: 1.5rem 1rem;
    }

    .invalid-user-title[b-55l5rmxria] {
        font-size: 1.75rem;
    }

    .invalid-user-icon[b-55l5rmxria] {
        font-size: 3.5rem;
    }

    .error-details[b-55l5rmxria],
    .help-section[b-55l5rmxria] {
        padding: 1.5rem;
    }

    .btn[b-55l5rmxria] {
        padding: 0.75rem 1.25rem;
        font-size: 0.95rem;
    }

    .btn-lg[b-55l5rmxria] {
        padding: 0.875rem 1.5rem;
        font-size: 1rem;
    }
}

/* Focus States für Accessibility */
.btn:focus[b-55l5rmxria],
.action-card:focus[b-55l5rmxria] {
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 102, 255, 0.25);
}

/* Print Styles */
@media print {
    .invalid-user-container[b-55l5rmxria] {
        padding: 0;
        background: white;
    }

    .invalid-user-card[b-55l5rmxria],
    .info-card[b-55l5rmxria],
    .contact-info[b-55l5rmxria] {
        box-shadow: none;
        border: 1px solid #ddd;
    }

    .btn[b-55l5rmxria] {
        display: none;
    }

    .invalid-user-icon[b-55l5rmxria] {
        animation: none;
    }
}

/* Hover-Effekte für bessere Interaktivität */
.invalid-user-card[b-55l5rmxria] {
    transition: box-shadow 0.3s ease;
}

    .invalid-user-card:hover[b-55l5rmxria] {
        box-shadow: 0 15px 50px rgba(0, 0, 0, 0.15);
    }

/* Smooth Transitions für alle interaktiven Elemente */
*[b-55l5rmxria] {
    transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

/* Animation für bessere UX */
@media (prefers-reduced-motion: reduce) {
    *[b-55l5rmxria],
    *[b-55l5rmxria]::before,
    *[b-55l5rmxria]::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}
/* _content/BotomixNew/Components/Account/Pages/Login.razor.rz.scp.css */
/* Modernes Login Design mit Google OAuth */
.login-container[b-77wxf5x78b] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 85vh;
    background: linear-gradient(135deg, #f0f7ff 0%, #e6f3ff 50%, #f8f9fa 100%);
    padding: 2rem;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.login-card[b-77wxf5x78b] {
    width: 100%;
    max-width: 450px;
    background: white;
    padding: 2.5rem;
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    border: 1px solid #e9ecef;
    position: relative;
    overflow: hidden;
    animation: slideUp-b-77wxf5x78b 0.6s ease-out;
}

@keyframes slideUp-b-77wxf5x78b {
    from {
        opacity: 0;
        transform: translateY(30px) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Subtiler Glanz-Effekt */
.login-card[b-77wxf5x78b]::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(0, 102, 255, 0.03), transparent);
    transition: left 0.8s ease;
    z-index: 1;
}

.login-card:hover[b-77wxf5x78b]::before {
    left: 100%;
}

.login-card > *[b-77wxf5x78b] {
    position: relative;
    z-index: 2;
}

/* Header Styling */
.login-header[b-77wxf5x78b] {
    text-align: center;
    margin-bottom: 2rem;
}

.brand-name[b-77wxf5x78b] {
    font-size: 2.25rem;
    font-weight: 700;
    color: #111827;
    margin-bottom: 0.5rem;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.brand-subtitle[b-77wxf5x78b] {
    font-size: 1.1rem;
    color: #6b7280;
    font-weight: 500;
}

/* Form Styling */
.form-control[b-77wxf5x78b] {
    height: 58px;
    border-radius: 10px;
    border: 2px solid #e5e7eb;
    transition: all 0.2s ease;
    font-size: 1rem;
    background: white;
}

    .form-control:focus[b-77wxf5x78b] {
        border-color: #0066ff;
        box-shadow: 0 0 0 4px rgba(0, 102, 255, 0.1);
        transform: translateY(-1px);
    }

    .form-control:hover:not(:focus)[b-77wxf5x78b] {
        border-color: #cbd5e1;
    }

    .form-control:disabled[b-77wxf5x78b] {
        background-color: #f8f9fa;
        border-color: #e9ecef;
        color: #6c757d;
    }

.form-floating > label[b-77wxf5x78b] {
    color: #6b7280;
    font-weight: 500;
}

.form-floating > .form-control:focus ~ label[b-77wxf5x78b],
.form-floating > .form-control:not(:placeholder-shown) ~ label[b-77wxf5x78b] {
    color: #0066ff;
    font-weight: 600;
}

/* Remember Me & Forgot Password Section */
.login-remember-forgot[b-77wxf5x78b] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.form-check[b-77wxf5x78b] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.form-check-input[b-77wxf5x78b] {
    width: 1.125rem;
    height: 1.125rem;
    margin: 0;
    accent-color: #0066ff;
}

    .form-check-input:checked[b-77wxf5x78b] {
        background-color: #0066ff;
        border-color: #0066ff;
    }

    .form-check-input:hover[b-77wxf5x78b] {
        border-color: #0066ff;
    }

.form-check-label[b-77wxf5x78b] {
    font-size: 0.9rem;
    color: #374151;
    cursor: pointer;
    margin: 0;
}

.forgot-password-link[b-77wxf5x78b] {
    font-size: 0.9rem;
    color: #0066ff;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.2s ease;
}

    .forgot-password-link:hover[b-77wxf5x78b] {
        color: #0052cc;
        text-decoration: underline;
    }

/* Button Styling */
.btn-primary[b-77wxf5x78b] {
    background: linear-gradient(135deg, #0066ff, #0052cc);
    border: none;
    padding: 0.875rem 1.5rem;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 10px;
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

    .btn-primary:hover:not(:disabled)[b-77wxf5x78b] {
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(0, 102, 255, 0.3);
    }

    .btn-primary:active[b-77wxf5x78b] {
        transform: scale(0.98);
    }

    .btn-primary:disabled[b-77wxf5x78b] {
        background: #9ca3af;
        transform: none;
        box-shadow: none;
        cursor: not-allowed;
    }

/* Divider Section */
.divider-section[b-77wxf5x78b] {
    display: flex;
    align-items: center;
    margin: 2rem 0;
    position: relative;
}

.divider-line[b-77wxf5x78b] {
    flex: 1;
    height: 1px;
    background: #e5e7eb;
}

.divider-text[b-77wxf5x78b] {
    padding: 0 1rem;
    color: #9ca3af;
    font-size: 0.9rem;
    font-weight: 500;
    background: white;
    z-index: 1;
}

/* Google OAuth Button */
.social-login-section[b-77wxf5x78b] {
    margin-bottom: 1.5rem;
}

.btn-google[b-77wxf5x78b] {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 0.875rem 1.5rem;
    background: white;
    border: 2px solid #e5e7eb;
    border-radius: 10px;
    font-size: 1rem;
    font-weight: 600;
    color: #374151;
    transition: all 0.2s ease;
    cursor: pointer;
    position: relative;
}

    .btn-google:hover:not(:disabled)[b-77wxf5x78b] {
        background: #f9fafb;
        border-color: #cbd5e1;
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
        color: #111827;
    }

    .btn-google:active[b-77wxf5x78b] {
        transform: scale(0.98);
        box-shadow: none;
    }

    .btn-google:disabled[b-77wxf5x78b] {
        background: #f8f9fa;
        border-color: #e9ecef;
        color: #9ca3af;
        cursor: not-allowed;
        transform: none;
        box-shadow: none;
    }

.google-icon[b-77wxf5x78b] {
    flex-shrink: 0;
}

/* Social Login Info */
.social-login-info[b-77wxf5x78b] {
    text-align: center;
    font-size: 0.85rem;
    color: #6b7280;
    margin-top: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
}

/* Alert Styling */
.alert[b-77wxf5x78b] {
    padding: 1rem 1.25rem;
    border-radius: 10px;
    margin-bottom: 1.5rem;
    font-weight: 500;
    border: none;
    animation: slideDown-b-77wxf5x78b 0.3s ease-out;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

@keyframes slideDown-b-77wxf5x78b {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.alert-danger[b-77wxf5x78b] {
    background: linear-gradient(135deg, #fef2f2, #fee2e2);
    color: #991b1b;
    border-left: 4px solid #ef4444;
}

.alert-success[b-77wxf5x78b] {
    background: linear-gradient(135deg, #f0fdf4, #dcfce7);
    color: #166534;
    border-left: 4px solid #22c55e;
}

/* Links Section */
.links-section[b-77wxf5x78b] {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid #e9ecef;
    text-align: center;
    font-size: 0.9rem;
    color: #6b7280;
}

    .links-section a[b-77wxf5x78b] {
        color: #0066ff;
        text-decoration: none;
        font-weight: 600;
        transition: all 0.2s ease;
    }

        .links-section a:hover[b-77wxf5x78b] {
            text-decoration: underline;
            color: #0052cc;
        }

/* Help Section */
.help-section[b-77wxf5x78b] {
    margin-top: 1.5rem;
    text-align: center;
}

.help-text[b-77wxf5x78b] {
    font-size: 0.85rem;
    color: #6b7280;
    margin: 0;
}

.support-link[b-77wxf5x78b] {
    color: #0066ff;
    text-decoration: none;
    font-weight: 500;
}

    .support-link:hover[b-77wxf5x78b] {
        text-decoration: underline;
        color: #0052cc;
    }

/* Loading Spinner */
.spinner-border-sm[b-77wxf5x78b] {
    width: 1rem;
    height: 1rem;
    border: 2px solid white;
    border-top: 2px solid transparent;
    border-radius: 50%;
    animation: spin-b-77wxf5x78b 1s linear infinite;
}

@keyframes spin-b-77wxf5x78b {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Validation Errors */
.text-danger[b-77wxf5x78b] {
    font-size: 0.85rem;
    font-weight: 500;
    margin-top: 0.25rem;
    color: #dc3545;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

    .text-danger[b-77wxf5x78b]::before {
        content: '⚠';
        font-size: 0.8rem;
    }

/* Responsive Design */
@media (max-width: 768px) {
    .login-container[b-77wxf5x78b] {
        padding: 1rem;
        align-items: flex-start;
        padding-top: 2rem;
    }

    .login-card[b-77wxf5x78b] {
        padding: 2rem 1.5rem;
        max-width: 100%;
    }

    .brand-name[b-77wxf5x78b] {
        font-size: 2rem;
    }

    .login-remember-forgot[b-77wxf5x78b] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    .btn-google[b-77wxf5x78b] {
        font-size: 0.95rem;
        padding: 0.75rem 1.25rem;
    }
}

@media (max-width: 480px) {
    .login-card[b-77wxf5x78b] {
        padding: 1.5rem 1rem;
    }

    .brand-name[b-77wxf5x78b] {
        font-size: 1.75rem;
    }

    .btn-google[b-77wxf5x78b] {
        font-size: 0.9rem;
        padding: 0.7rem 1rem;
        gap: 0.5rem;
    }

    .google-icon[b-77wxf5x78b] {
        width: 18px;
        height: 18px;
    }
}

/* Focus Styles für Accessibility */
.btn:focus[b-77wxf5x78b],
.form-control:focus[b-77wxf5x78b],
.form-check-input:focus[b-77wxf5x78b] {
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 102, 255, 0.25);
}

/* Hover-Effekte für bessere Interaktivität */
.login-card[b-77wxf5x78b] {
    transition: box-shadow 0.3s ease;
}

    .login-card:hover[b-77wxf5x78b] {
        box-shadow: 0 15px 50px rgba(0, 0, 0, 0.15);
    }

/* Smooth Transitions für alle interaktiven Elemente */
*[b-77wxf5x78b] {
    transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

/* Button Press Animation */
.btn:active[b-77wxf5x78b] {
    transform: scale(0.98);
}

/* Print Styles */
@media print {
    .login-container[b-77wxf5x78b] {
        padding: 0;
        background: white;
    }

    .login-card[b-77wxf5x78b] {
        box-shadow: none;
        border: 1px solid #ddd;
    }

    .btn[b-77wxf5x78b] {
        display: none;
    }
}

/* Motion Reduction */
@media (prefers-reduced-motion: reduce) {
    *[b-77wxf5x78b], *[b-77wxf5x78b]::before, *[b-77wxf5x78b]::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}
/* _content/BotomixNew/Components/Account/Pages/LoginModal.razor.rz.scp.css */
/* LoginModal - Modern & Accessible Design - VERGRÖSSERTE VERSION */

/* Modal Backdrop */
.login-modal[b-sk8uf3x470] {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    z-index: 9999;
    opacity: 0;
    transition: opacity 0.3s ease;
}

    .login-modal.show[b-sk8uf3x470] {
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 1;
        animation: fadeIn-b-sk8uf3x470 0.3s ease;
    }

@keyframes fadeIn-b-sk8uf3x470 {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Modal Dialog - VERGRÖSSERT */
.login-modal-dialog[b-sk8uf3x470] {
    position: relative;
    max-width: 650px; /* Von 500px auf 650px erhöht */
    width: 92%; /* Von 90% auf 92% erhöht für mehr Platz */
    max-height: 92vh; /* Von 90vh auf 92vh erhöht */
    overflow-y: auto;
    animation: slideUp-b-sk8uf3x470 0.3s ease;
}

@keyframes slideUp-b-sk8uf3x470 {
    from {
        transform: translateY(50px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Modal Content - MEHR PADDING */
.login-modal-content[b-sk8uf3x470] {
    background: white;
    border-radius: 24px;
    padding: 45px 40px 35px; /* Von 40px 30px 30px auf 45px 40px 35px erhöht */
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    position: relative;
}

/* Close Button - GRÖSSER UND BESSER SICHTBAR */
.login-modal-close[b-sk8uf3x470] {
    position: absolute;
    top: 22px; /* Von 20px auf 22px */
    right: 22px; /* Von 20px auf 22px */
    background: transparent;
    border: none;
    color: #6c757d;
    font-size: 1.75rem; /* Von 1.5rem auf 1.75rem erhöht */
    cursor: pointer;
    width: 42px; /* Von 36px auf 42px erhöht */
    height: 42px; /* Von 36px auf 42px erhöht */
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s ease;
    z-index: 10;
}

    .login-modal-close:hover[b-sk8uf3x470],
    .login-modal-close:focus[b-sk8uf3x470] {
        background: #f8f9fa;
        color: #0066ff;
        transform: rotate(90deg);
        outline: 2px solid #0066ff;
        outline-offset: 2px;
    }

    .login-modal-close:active[b-sk8uf3x470] {
        transform: rotate(90deg) scale(0.95);
    }

/* Header - GRÖSSERE ELEMENTE */
.login-modal-header[b-sk8uf3x470] {
    text-align: center;
    margin-bottom: 35px; /* Von 30px auf 35px erhöht */
}

.login-modal-icon[b-sk8uf3x470] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px; /* Von 64px auf 72px erhöht */
    height: 72px; /* Von 64px auf 72px erhöht */
    background: linear-gradient(135deg, #0066ff 0%, #0052cc 100%);
    border-radius: 50%;
    margin-bottom: 22px; /* Von 20px auf 22px erhöht */
    box-shadow: 0 8px 20px rgba(0, 102, 255, 0.3);
}

    .login-modal-icon i[b-sk8uf3x470] {
        font-size: 2.2rem; /* Von 2rem auf 2.2rem erhöht */
        color: white;
    }

.login-modal-title[b-sk8uf3x470] {
    font-size: 2rem; /* Von 1.75rem auf 2rem erhöht */
    font-weight: 700;
    color: #2d3748;
    margin-bottom: 12px; /* Von 10px auf 12px erhöht */
    line-height: 1.3;
}

.login-modal-subtitle[b-sk8uf3x470] {
    color: #718096;
    font-size: 1.05rem; /* Von 0.95rem auf 1.05rem erhöht */
    line-height: 1.5;
    margin: 0;
}

/* Tabs - GRÖSSERE TABS */
.login-modal-tabs[b-sk8uf3x470] {
    display: flex;
    gap: 12px; /* Von 10px auf 12px erhöht */
    margin-bottom: 35px; /* Von 30px auf 35px erhöht */
    background: #f8f9fa;
    padding: 7px; /* Von 6px auf 7px erhöht */
    border-radius: 14px; /* Von 12px auf 14px erhöht */
}

.login-tab[b-sk8uf3x470] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px; /* Von 8px auf 10px erhöht */
    background: transparent;
    border: none;
    color: #6c757d;
    padding: 14px 24px; /* Von 12px 20px auf 14px 24px erhöht */
    border-radius: 10px; /* Von 8px auf 10px erhöht */
    font-weight: 600;
    font-size: 1.05rem; /* Von 0.95rem auf 1.05rem erhöht */
    cursor: pointer;
    transition: all 0.2s ease;
}

    .login-tab:hover:not(.active)[b-sk8uf3x470] {
        background: rgba(0, 102, 255, 0.1);
        color: #0066ff;
    }

    .login-tab.active[b-sk8uf3x470] {
        background: white;
        color: #0066ff;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

    .login-tab:focus-visible[b-sk8uf3x470] {
        outline: 2px solid #0066ff;
        outline-offset: 2px;
    }

    .login-tab i[b-sk8uf3x470] {
        font-size: 1.1rem; /* Von 1rem auf 1.1rem erhöht */
    }

/* Form Groups - MEHR ABSTAND */
.login-panel[b-sk8uf3x470] {
    animation: fadeInPanel-b-sk8uf3x470 0.3s ease;
}

@keyframes fadeInPanel-b-sk8uf3x470 {
    from {
        opacity: 0;
        transform: translateX(-10px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.login-form-group[b-sk8uf3x470] {
    margin-bottom: 22px; /* Von 20px auf 22px erhöht */
}

.login-label[b-sk8uf3x470] {
    display: flex;
    align-items: center;
    gap: 10px; /* Von 8px auf 10px erhöht */
    font-weight: 600;
    color: #2d3748;
    margin-bottom: 10px; /* Von 8px auf 10px erhöht */
    font-size: 1rem; /* Von 0.9rem auf 1rem erhöht */
}

    .login-label i[b-sk8uf3x470] {
        color: #0066ff;
        font-size: 1rem; /* Von 0.9rem auf 1rem erhöht */
    }

.login-input[b-sk8uf3x470] {
    width: 100%;
    padding: 14px 18px; /* Von 12px 16px auf 14px 18px erhöht */
    border: 2px solid #e2e8f0;
    border-radius: 12px; /* Von 10px auf 12px erhöht */
    font-size: 1.05rem; /* Von 0.95rem auf 1.05rem erhöht */
    transition: all 0.2s ease;
    background: #f8f9fa;
}

    .login-input:focus[b-sk8uf3x470] {
        outline: none;
        border-color: #0066ff;
        background: white;
        box-shadow: 0 0 0 4px rgba(0, 102, 255, 0.1);
    }

    .login-input[b-sk8uf3x470]::placeholder {
        color: #a0aec0;
    }

.login-help-text[b-sk8uf3x470] {
    display: block;
    margin-top: 7px; /* Von 6px auf 7px erhöht */
    color: #718096;
    font-size: 0.9rem; /* Von 0.8rem auf 0.9rem erhöht */
}

/* Checkbox - GRÖSSERE CHECKBOX */
.login-form-check[b-sk8uf3x470] {
    display: flex;
    align-items: flex-start;
    gap: 12px; /* Von 10px auf 12px erhöht */
    margin-bottom: 22px; /* Von 20px auf 22px erhöht */
}

.login-checkbox[b-sk8uf3x470] {
    margin-top: 3px;
    width: 20px; /* Von 18px auf 20px erhöht */
    height: 20px; /* Von 18px auf 20px erhöht */
    border: 2px solid #cbd5e0;
    border-radius: 5px; /* Von 4px auf 5px erhöht */
    cursor: pointer;
    transition: all 0.2s ease;
}

    .login-checkbox:checked[b-sk8uf3x470] {
        background: #0066ff;
        border-color: #0066ff;
    }

    .login-checkbox:focus-visible[b-sk8uf3x470] {
        outline: 2px solid #0066ff;
        outline-offset: 2px;
    }

.login-checkbox-label[b-sk8uf3x470] {
    font-size: 1rem; /* Von 0.9rem auf 1rem erhöht */
    color: #4a5568;
    cursor: pointer;
    line-height: 1.4;
}

/* Buttons - GRÖSSERE BUTTONS */
.login-modal-btn[b-sk8uf3x470] {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px; /* Von 10px auf 12px erhöht */
    padding: 16px 28px; /* Von 14px 24px auf 16px 28px erhöht */
    border: none;
    border-radius: 14px; /* Von 12px auf 14px erhöht */
    font-weight: 600;
    font-size: 1.1rem; /* Von 1rem auf 1.1rem erhöht */
    cursor: pointer;
    transition: all 0.2s ease;
}

.login-modal-btn-primary[b-sk8uf3x470] {
    background: linear-gradient(135deg, #0066ff 0%, #0052cc 100%);
    color: white;
    box-shadow: 0 4px 12px rgba(0, 102, 255, 0.3);
}

    .login-modal-btn-primary:hover[b-sk8uf3x470],
    .login-modal-btn-primary:focus[b-sk8uf3x470] {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(0, 102, 255, 0.4);
        outline: 2px solid #ffd700;
        outline-offset: 2px;
    }

    .login-modal-btn-primary:active[b-sk8uf3x470] {
        transform: translateY(0);
    }

.login-modal-btn-google[b-sk8uf3x470] {
    background: white;
    color: #4a5568;
    border: 2px solid #e2e8f0;
}

    .login-modal-btn-google:hover[b-sk8uf3x470],
    .login-modal-btn-google:focus[b-sk8uf3x470] {
        background: #f8f9fa;
        border-color: #cbd5e0;
        transform: translateY(-2px);
        outline: 2px solid #0066ff;
        outline-offset: 2px;
    }

    .login-modal-btn-google i[b-sk8uf3x470] {
        color: #4285F4;
        font-size: 1.2rem; /* Icon etwas größer */
    }

/* Divider */
.login-divider[b-sk8uf3x470] {
    display: flex;
    align-items: center;
    margin: 24px 0; /* Von 20px auf 24px erhöht */
    color: #a0aec0;
    font-size: 0.95rem; /* Von 0.85rem auf 0.95rem erhöht */
}

    .login-divider[b-sk8uf3x470]::before,
    .login-divider[b-sk8uf3x470]::after {
        content: '';
        flex: 1;
        height: 1px;
        background: #e2e8f0;
    }

    .login-divider span[b-sk8uf3x470] {
        padding: 0 18px; /* Von 15px auf 18px erhöht */
        font-weight: 500;
    }

/* Links */
.login-link[b-sk8uf3x470] {
    color: #0066ff;
    text-decoration: none;
    font-weight: 600;
    font-size: 1rem; /* Von 0.9rem auf 1rem erhöht */
    transition: all 0.2s ease;
}

    .login-link:hover[b-sk8uf3x470],
    .login-link:focus[b-sk8uf3x470] {
        text-decoration: underline;
        color: #0052cc;
        outline: 2px solid #0066ff;
        outline-offset: 2px;
    }

.login-link-inline[b-sk8uf3x470] {
    color: #0066ff;
    text-decoration: underline;
    font-weight: 600;
}

    .login-link-inline:hover[b-sk8uf3x470],
    .login-link-inline:focus[b-sk8uf3x470] {
        color: #0052cc;
    }

/* Footer Text */
.login-modal-footer-text[b-sk8uf3x470] {
    text-align: center;
    margin-top: 24px; /* Von 20px auf 24px erhöht */
}

.login-info-text[b-sk8uf3x470] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px; /* Von 8px auf 10px erhöht */
    color: #718096;
    font-size: 0.95rem; /* Von 0.85rem auf 0.95rem erhöht */
    margin: 0;
}

    .login-info-text i[b-sk8uf3x470] {
        color: #10b981;
        font-size: 1.1rem; /* Icon größer */
    }

/* Benefits Section */
.login-modal-benefits[b-sk8uf3x470] {
    margin-top: 32px; /* Von 30px auf 32px erhöht */
    padding-top: 28px; /* Von 25px auf 28px erhöht */
    border-top: 1px solid #e2e8f0;
    display: flex;
    flex-direction: column;
    gap: 14px; /* Von 12px auf 14px erhöht */
}

.login-benefit[b-sk8uf3x470] {
    display: flex;
    align-items: center;
    gap: 14px; /* Von 12px auf 14px erhöht */
    color: #4a5568;
    font-size: 1rem; /* Von 0.9rem auf 1rem erhöht */
}

    .login-benefit i[b-sk8uf3x470] {
        color: #10b981;
        font-size: 1.2rem; /* Von 1.1rem auf 1.2rem erhöht */
    }

/* Responsive Design */
@media (max-width: 768px) {
    .login-modal-dialog[b-sk8uf3x470] {
        max-width: 550px; /* Für Tablets */
        width: 90%;
    }

    .login-modal-content[b-sk8uf3x470] {
        padding: 35px 30px 28px;
    }

    .login-modal-title[b-sk8uf3x470] {
        font-size: 1.75rem;
    }

    .login-tab[b-sk8uf3x470] {
        padding: 12px 20px;
        font-size: 1rem;
    }

    .login-modal-btn[b-sk8uf3x470] {
        padding: 14px 24px;
        font-size: 1.05rem;
    }
}

@media (max-width: 576px) {
    .login-modal-dialog[b-sk8uf3x470] {
        max-width: calc(100% - 2rem);
        width: 95%;
    }

    .login-modal-content[b-sk8uf3x470] {
        padding: 30px 20px 20px;
    }

    .login-modal-close[b-sk8uf3x470] {
        top: 15px;
        right: 15px;
        width: 38px;
        height: 38px;
        font-size: 1.5rem;
    }

    .login-modal-icon[b-sk8uf3x470] {
        width: 64px;
        height: 64px;
    }

        .login-modal-icon i[b-sk8uf3x470] {
            font-size: 2rem;
        }

    .login-modal-title[b-sk8uf3x470] {
        font-size: 1.5rem;
    }

    .login-modal-subtitle[b-sk8uf3x470] {
        font-size: 0.95rem;
    }

    .login-tab[b-sk8uf3x470] {
        padding: 11px 14px;
        font-size: 0.9rem;
    }

        .login-tab i[b-sk8uf3x470] {
            font-size: 1rem;
        }

    .login-modal-btn[b-sk8uf3x470] {
        padding: 13px 20px;
        font-size: 1rem;
    }

    .login-benefit[b-sk8uf3x470] {
        font-size: 0.9rem;
    }

    .login-label[b-sk8uf3x470] {
        font-size: 0.95rem;
    }

    .login-input[b-sk8uf3x470] {
        padding: 12px 16px;
        font-size: 1rem;
    }
}

/* Accessibility - Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    .login-modal[b-sk8uf3x470],
    .login-modal-dialog[b-sk8uf3x470],
    .login-panel[b-sk8uf3x470],
    .login-modal-close[b-sk8uf3x470],
    .login-tab[b-sk8uf3x470],
    .login-modal-btn[b-sk8uf3x470] {
        animation: none;
        transition: none;
    }

        .login-modal-btn:hover[b-sk8uf3x470],
        .login-modal-close:hover[b-sk8uf3x470] {
            transform: none;
        }
}

/* High Contrast Mode */
@media (prefers-contrast: high) {
    .login-modal-content[b-sk8uf3x470] {
        border: 2px solid currentColor;
    }

    .login-input[b-sk8uf3x470] {
        border-width: 3px;
    }

    .login-modal-btn[b-sk8uf3x470] {
        border: 2px solid currentColor;
    }

    .login-modal-close[b-sk8uf3x470] {
        border: 2px solid currentColor;
    }
}

/* Print Styles */
@media print {
    .login-modal[b-sk8uf3x470] {
        display: none !important;
    }
}
/* _content/BotomixNew/Components/Account/Pages/Manage/ChangePassword.razor.rz.scp.css */
/* Modern Password Management Styling - B2B Design */

.password-container[b-rp61xn6tcc] {
    max-width: 900px;
    margin: 0 auto;
    animation: fadeInUp-b-rp61xn6tcc 0.6s ease-out;
}

@keyframes fadeInUp-b-rp61xn6tcc {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Header Section */
.password-header[b-rp61xn6tcc] {
    margin-bottom: 2rem;
    text-align: center;
}

.section-title[b-rp61xn6tcc] {
    font-size: 1.75rem;
    font-weight: 600;
    color: #111827;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.section-description[b-rp61xn6tcc] {
    font-size: 1rem;
    color: #6b7280;
    font-weight: 500;
    margin: 0;
}

/* Content Container */
.password-content[b-rp61xn6tcc] {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

/* Loading Container */
.loading-container[b-rp61xn6tcc] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    text-align: center;
}

/* Card Components */
.form-card[b-rp61xn6tcc],
.tips-card[b-rp61xn6tcc],
.options-card[b-rp61xn6tcc] {
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border: 1px solid #e9ecef;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

    .form-card:hover[b-rp61xn6tcc],
    .tips-card:hover[b-rp61xn6tcc],
    .options-card:hover[b-rp61xn6tcc] {
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
        transform: translateY(-2px);
    }

    /* Card Before Effect */
    .form-card[b-rp61xn6tcc]::before,
    .tips-card[b-rp61xn6tcc]::before,
    .options-card[b-rp61xn6tcc]::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(0, 102, 255, 0.02), transparent);
        transition: left 0.8s ease;
        z-index: 1;
    }

    .form-card:hover[b-rp61xn6tcc]::before,
    .tips-card:hover[b-rp61xn6tcc]::before,
    .options-card:hover[b-rp61xn6tcc]::before {
        left: 100%;
    }

    .form-card > *[b-rp61xn6tcc],
    .tips-card > *[b-rp61xn6tcc],
    .options-card > *[b-rp61xn6tcc] {
        position: relative;
        z-index: 2;
    }

/* Card Headers */
.card-header[b-rp61xn6tcc] {
    padding: 1.5rem 2rem 1rem;
    border-bottom: 1px solid #e9ecef;
}

.card-title[b-rp61xn6tcc] {
    font-size: 1.25rem;
    font-weight: 600;
    color: #111827;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Card Bodies */
.card-body[b-rp61xn6tcc] {
    padding: 2rem;
}

/* Form Styling */
.form-floating[b-rp61xn6tcc] {
    margin-bottom: 0;
}

.form-control[b-rp61xn6tcc] {
    height: 58px;
    border-radius: 10px;
    border: 2px solid #e5e7eb;
    transition: all 0.2s ease;
    font-size: 1rem;
    background: white;
}

    .form-control:focus[b-rp61xn6tcc] {
        border-color: #0066ff;
        box-shadow: 0 0 0 4px rgba(0, 102, 255, 0.1);
        transform: translateY(-1px);
    }

    .form-control:hover:not(:focus):not(:disabled)[b-rp61xn6tcc] {
        border-color: #cbd5e1;
    }

    .form-control:disabled[b-rp61xn6tcc] {
        background-color: #f8f9fa;
        border-color: #e9ecef;
        color: #6c757d;
        cursor: not-allowed;
    }

.form-floating > label[b-rp61xn6tcc] {
    color: #6b7280;
    font-weight: 500;
}

.form-floating > .form-control:focus ~ label[b-rp61xn6tcc],
.form-floating > .form-control:not(:placeholder-shown) ~ label[b-rp61xn6tcc] {
    color: #0066ff;
    font-weight: 600;
}

/* Form Text */
.form-text[b-rp61xn6tcc] {
    font-size: 0.85rem;
    color: #6b7280;
    margin-top: 0.5rem;
    font-style: normal;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

/* Form Actions */
.form-actions[b-rp61xn6tcc] {
    margin-top: 1.5rem;
    display: flex;
    justify-content: center;
}

/* Button Styling */
.btn-primary[b-rp61xn6tcc] {
    background: linear-gradient(135deg, #0066ff, #0052cc);
    border: none;
    padding: 0.875rem 2rem;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 10px;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 200px;
    justify-content: center;
}

    .btn-primary:hover:not(:disabled)[b-rp61xn6tcc] {
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(0, 102, 255, 0.3);
        background: linear-gradient(135deg, #0052cc, #003d99);
    }

    .btn-primary:active[b-rp61xn6tcc] {
        transform: scale(0.98);
    }

    .btn-primary:disabled[b-rp61xn6tcc] {
        background: #9ca3af;
        transform: none;
        box-shadow: none;
        cursor: not-allowed;
    }

/* Security Tips Grid */
.tips-grid[b-rp61xn6tcc] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
}

.tip-item[b-rp61xn6tcc] {
    display: flex;
    gap: 1rem;
    padding: 1.5rem;
    background: #f8f9fa;
    border-radius: 10px;
    border: 1px solid #e9ecef;
    transition: all 0.2s ease;
}

    .tip-item:hover[b-rp61xn6tcc] {
        background: #f0f7ff;
        border-color: #e1f0ff;
        transform: translateY(-2px);
    }

.tip-icon[b-rp61xn6tcc] {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #0066ff, #0052cc);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.2rem;
}

.tip-content[b-rp61xn6tcc] {
    flex: 1;
}

    .tip-content h6[b-rp61xn6tcc] {
        font-size: 1rem;
        font-weight: 600;
        color: #111827;
        margin-bottom: 0.5rem;
    }

    .tip-content p[b-rp61xn6tcc] {
        font-size: 0.9rem;
        color: #6b7280;
        line-height: 1.5;
        margin: 0;
    }

/* Security Actions */
.security-actions[b-rp61xn6tcc] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.security-action-item[b-rp61xn6tcc] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem;
    background: #f8f9fa;
    border-radius: 10px;
    border: 1px solid #e9ecef;
    text-decoration: none;
    color: inherit;
    transition: all 0.2s ease;
}

    .security-action-item:hover[b-rp61xn6tcc] {
        background: #f0f7ff;
        border-color: #e1f0ff;
        transform: translateX(4px);
        text-decoration: none;
        color: inherit;
    }

.action-icon[b-rp61xn6tcc] {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #0066ff, #0052cc);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.2rem;
}

.action-content[b-rp61xn6tcc] {
    flex: 1;
}

    .action-content h6[b-rp61xn6tcc] {
        font-size: 1rem;
        font-weight: 600;
        color: #111827;
        margin-bottom: 0.25rem;
    }

    .action-content p[b-rp61xn6tcc] {
        font-size: 0.9rem;
        color: #6b7280;
        margin: 0;
    }

.action-arrow[b-rp61xn6tcc] {
    color: #0066ff;
    font-size: 1.1rem;
    opacity: 0.7;
    transition: all 0.2s ease;
}

.security-action-item:hover .action-arrow[b-rp61xn6tcc] {
    opacity: 1;
    transform: translateX(4px);
}

/* Alert Styling */
.alert[b-rp61xn6tcc] {
    padding: 1rem 1.25rem;
    border-radius: 10px;
    margin-bottom: 1.5rem;
    font-weight: 500;
    border: none;
    animation: slideDown-b-rp61xn6tcc 0.3s ease-out;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

@keyframes slideDown-b-rp61xn6tcc {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.alert-success[b-rp61xn6tcc] {
    background: linear-gradient(135deg, #f0fdf4, #dcfce7);
    color: #166534;
    border-left: 4px solid #22c55e;
}

.alert-danger[b-rp61xn6tcc] {
    background: linear-gradient(135deg, #fef2f2, #fee2e2);
    color: #991b1b;
    border-left: 4px solid #ef4444;
}

/* Validation Messages */
.text-danger[b-rp61xn6tcc] {
    font-size: 0.85rem;
    font-weight: 500;
    margin-top: 0.5rem;
    color: #dc3545;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

    .text-danger[b-rp61xn6tcc]::before {
        content: '⚠';
        font-size: 0.8rem;
    }

/* Loading Spinner */
.spinner-border-sm[b-rp61xn6tcc] {
    width: 1rem;
    height: 1rem;
    border: 2px solid currentColor;
    border-top: 2px solid transparent;
    border-radius: 50%;
    animation: spin-b-rp61xn6tcc 1s linear infinite;
}

@keyframes spin-b-rp61xn6tcc {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Responsive Design */
@media (max-width: 768px) {
    .password-container[b-rp61xn6tcc] {
        padding: 0 1rem;
    }

    .section-title[b-rp61xn6tcc] {
        font-size: 1.5rem;
        flex-direction: column;
        gap: 0.25rem;
    }

    .card-header[b-rp61xn6tcc] {
        padding: 1rem 1.5rem 0.75rem;
    }

    .card-body[b-rp61xn6tcc] {
        padding: 1.5rem;
    }

    .card-title[b-rp61xn6tcc] {
        font-size: 1.1rem;
    }

    .tips-grid[b-rp61xn6tcc] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .tip-item[b-rp61xn6tcc] {
        padding: 1rem;
        flex-direction: column;
        text-align: center;
        gap: 0.75rem;
    }

    .tip-icon[b-rp61xn6tcc] {
        align-self: center;
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }

    .security-action-item[b-rp61xn6tcc] {
        padding: 1rem;
        gap: 0.75rem;
    }

    .action-icon[b-rp61xn6tcc] {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }

    .btn-primary[b-rp61xn6tcc] {
        width: 100%;
        min-width: auto;
    }
}

@media (max-width: 480px) {
    .password-header[b-rp61xn6tcc] {
        margin-bottom: 1.5rem;
    }

    .section-title[b-rp61xn6tcc] {
        font-size: 1.25rem;
    }

    .card-header[b-rp61xn6tcc] {
        padding: 0.75rem 1rem 0.5rem;
    }

    .card-body[b-rp61xn6tcc] {
        padding: 1rem;
    }

    .card-title[b-rp61xn6tcc] {
        font-size: 1rem;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
    }

    .form-control[b-rp61xn6tcc] {
        height: 52px;
        font-size: 0.9rem;
    }

    .btn-primary[b-rp61xn6tcc] {
        font-size: 0.9rem;
        padding: 0.75rem 1rem;
    }

    .tip-item[b-rp61xn6tcc] {
        padding: 0.75rem;
    }

    .tip-content h6[b-rp61xn6tcc] {
        font-size: 0.9rem;
    }

    .tip-content p[b-rp61xn6tcc] {
        font-size: 0.85rem;
    }

    .security-action-item[b-rp61xn6tcc] {
        padding: 0.75rem;
        flex-direction: column;
        text-align: center;
        gap: 0.5rem;
    }

    .action-content h6[b-rp61xn6tcc] {
        font-size: 0.9rem;
    }

    .action-content p[b-rp61xn6tcc] {
        font-size: 0.85rem;
    }
}

/* Focus States für Accessibility */
.btn-primary:focus[b-rp61xn6tcc],
.security-action-item:focus[b-rp61xn6tcc] {
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 102, 255, 0.25);
}

/* Smooth Transitions */
*[b-rp61xn6tcc] {
    transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

/* Password Strength Indicator (optional enhancement) */
.password-strength[b-rp61xn6tcc] {
    margin-top: 0.5rem;
    height: 4px;
    background: #e9ecef;
    border-radius: 2px;
    overflow: hidden;
}

.password-strength-bar[b-rp61xn6tcc] {
    height: 100%;
    background: linear-gradient(to right, #dc3545, #ffc107, #28a745);
    transition: width 0.3s ease;
    width: 0%;
}

/* Additional Security Enhancements */
.security-warning[b-rp61xn6tcc] {
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    border: 1px solid #f59e0b;
    color: #92400e;
    padding: 1rem;
    border-radius: 8px;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.security-success[b-rp61xn6tcc] {
    background: linear-gradient(135deg, #dcfce7, #bbf7d0);
    border: 1px solid #22c55e;
    color: #166534;
    padding: 1rem;
    border-radius: 8px;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
/* _content/BotomixNew/Components/Account/Pages/Manage/DeletePersonalData.razor.rz.scp.css */
/* Delete Account Page Styling - B2B Design */

.delete-account-container[b-7m0gy9pyxe] {
    max-width: 800px;
    margin: 2rem auto;
    padding: 0 1rem;
    animation: fadeInUp-b-7m0gy9pyxe 0.6s ease-out;
}

@keyframes fadeInUp-b-7m0gy9pyxe {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Header Section */
.delete-account-header[b-7m0gy9pyxe] {
    text-align: center;
    margin-bottom: 2rem;
    padding: 2rem;
    background: linear-gradient(135deg, #fef2f2, #fee2e2);
    border-radius: 12px;
    border: 2px solid #fecaca;
}

.warning-icon-large[b-7m0gy9pyxe] {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #ef4444, #dc2626);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    color: white;
    font-size: 2.5rem;
    box-shadow: 0 8px 20px rgba(239, 68, 68, 0.3);
    animation: pulse-b-7m0gy9pyxe 2s infinite;
}

@keyframes pulse-b-7m0gy9pyxe {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 8px 20px rgba(239, 68, 68, 0.3);
    }

    50% {
        transform: scale(1.05);
        box-shadow: 0 10px 30px rgba(239, 68, 68, 0.4);
    }
}

.page-title[b-7m0gy9pyxe] {
    font-size: 2rem;
    font-weight: 700;
    color: #991b1b;
    margin-bottom: 0.5rem;
}

.page-subtitle[b-7m0gy9pyxe] {
    font-size: 1.1rem;
    color: #b91c1c;
    font-weight: 500;
    margin: 0;
}

/* Content Area */
.delete-content[b-7m0gy9pyxe] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Critical Warning Box */
.critical-warning-box[b-7m0gy9pyxe] {
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    border: 2px solid #f59e0b;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(245, 158, 11, 0.2);
}

.warning-header[b-7m0gy9pyxe] {
    background: #f59e0b;
    color: white;
    padding: 1rem 1.5rem;
    font-size: 1.1rem;
    font-weight: 600;
    display: flex;
    align-items: center;
}

.warning-body[b-7m0gy9pyxe] {
    padding: 1.5rem;
}

.warning-text[b-7m0gy9pyxe] {
    color: #92400e;
    line-height: 1.6;
    margin: 0;
    font-size: 1rem;
}

/* Deletion Info Card */
.deletion-info-card[b-7m0gy9pyxe] {
    background: white;
    border-radius: 12px;
    padding: 2rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border: 1px solid #e9ecef;
}

.section-title[b-7m0gy9pyxe] {
    font-size: 1.3rem;
    font-weight: 600;
    color: #111827;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
}

.deletion-list[b-7m0gy9pyxe] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.deletion-item[b-7m0gy9pyxe] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem;
    background: #fef2f2;
    border-radius: 8px;
    border: 1px solid #fecaca;
    transition: all 0.2s ease;
}

    .deletion-item:hover[b-7m0gy9pyxe] {
        background: #fee2e2;
        border-color: #fca5a5;
    }

.deletion-icon[b-7m0gy9pyxe] {
    color: #ef4444;
    font-size: 1.3rem;
    flex-shrink: 0;
    margin-top: 2px;
}

.deletion-content[b-7m0gy9pyxe] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

    .deletion-content strong[b-7m0gy9pyxe] {
        color: #991b1b;
        font-size: 1rem;
    }

    .deletion-content span[b-7m0gy9pyxe] {
        color: #b91c1c;
        font-size: 0.9rem;
    }

/* Recommendation Box */
.recommendation-box[b-7m0gy9pyxe] {
    display: flex;
    gap: 1rem;
    padding: 1.5rem;
    background: linear-gradient(135deg, #f0f7ff, #e1f0ff);
    border-radius: 10px;
    border: 1px solid #0066ff;
    align-items: center;
}

.recommendation-icon[b-7m0gy9pyxe] {
    font-size: 2rem;
    color: #0066ff;
    flex-shrink: 0;
}

.recommendation-content[b-7m0gy9pyxe] {
    flex: 1;
    color: #1e40af;
    font-size: 0.95rem;
    line-height: 1.5;
}

    .recommendation-content strong[b-7m0gy9pyxe] {
        display: block;
        margin-bottom: 0.5rem;
        font-size: 1rem;
    }

.recommendation-link[b-7m0gy9pyxe] {
    display: inline-flex;
    align-items: center;
    color: #0066ff;
    text-decoration: none;
    font-weight: 600;
    margin-top: 0.5rem;
    transition: all 0.2s ease;
}

    .recommendation-link:hover[b-7m0gy9pyxe] {
        text-decoration: underline;
        color: #0052cc;
    }

/* Deletion Form Card */
.deletion-form-card[b-7m0gy9pyxe] {
    background: white;
    border-radius: 12px;
    padding: 2rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border: 2px solid #fecaca;
}

.form-description[b-7m0gy9pyxe] {
    color: #6b7280;
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

.deletion-form[b-7m0gy9pyxe] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.form-group[b-7m0gy9pyxe] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.form-label[b-7m0gy9pyxe] {
    font-size: 1rem;
    font-weight: 600;
    color: #111827;
    display: flex;
    align-items: center;
}

.form-control[b-7m0gy9pyxe] {
    padding: 0.875rem 1rem;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    font-size: 1rem;
    transition: all 0.2s ease;
    background: white;
    width: 100%;
}

    .form-control:focus[b-7m0gy9pyxe] {
        outline: none;
        border-color: #0066ff;
        box-shadow: 0 0 0 3px rgba(0, 102, 255, 0.1);
    }

.confirmation-instruction[b-7m0gy9pyxe] {
    color: #6b7280;
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
}

.confirmation-word[b-7m0gy9pyxe] {
    color: #ef4444;
    font-weight: 700;
    padding: 0 0.25rem;
    background: #fee2e2;
    border-radius: 4px;
}

/* Form Actions */
.form-actions[b-7m0gy9pyxe] {
    display: flex;
    gap: 1rem;
    margin-top: 1rem;
    flex-wrap: wrap;
}

.btn[b-7m0gy9pyxe] {
    padding: 0.875rem 1.5rem;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    flex: 1;
    min-width: 150px;
}

.cancel-btn[b-7m0gy9pyxe] {
    background: #e5e7eb;
    color: #374151;
}

    .cancel-btn:hover[b-7m0gy9pyxe] {
        background: #d1d5db;
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        text-decoration: none;
    }

.delete-submit-btn[b-7m0gy9pyxe] {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: white;
}

    .delete-submit-btn:hover:not(:disabled)[b-7m0gy9pyxe] {
        background: linear-gradient(135deg, #dc2626, #b91c1c);
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(239, 68, 68, 0.3);
    }

    .delete-submit-btn:active:not(:disabled)[b-7m0gy9pyxe],
    .cancel-btn:active[b-7m0gy9pyxe] {
        transform: scale(0.98);
    }

    .delete-submit-btn:disabled[b-7m0gy9pyxe] {
        opacity: 0.6;
        cursor: not-allowed;
        transform: none;
    }

/* Legal Notice */
.legal-notice[b-7m0gy9pyxe] {
    padding: 1rem;
    background: #f9fafb;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    color: #6b7280;
    font-size: 0.9rem;
    line-height: 1.6;
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

    .legal-notice i[b-7m0gy9pyxe] {
        margin-top: 2px;
        flex-shrink: 0;
    }

/* Alert Styling */
.alert[b-7m0gy9pyxe] {
    padding: 1rem 1.25rem;
    border-radius: 10px;
    margin-bottom: 1.5rem;
    font-weight: 500;
    border: none;
    animation: slideDown-b-7m0gy9pyxe 0.3s ease-out;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

@keyframes slideDown-b-7m0gy9pyxe {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.alert-success[b-7m0gy9pyxe] {
    background: linear-gradient(135deg, #f0fdf4, #dcfce7);
    color: #166534;
    border-left: 4px solid #22c55e;
}

.alert-danger[b-7m0gy9pyxe] {
    background: linear-gradient(135deg, #fef2f2, #fee2e2);
    color: #991b1b;
    border-left: 4px solid #ef4444;
}

/* Validation Errors */
.validation-message[b-7m0gy9pyxe] {
    color: #ef4444;
    font-size: 0.875rem;
    margin-top: 0.5rem;
    display: block;
    font-weight: 500;
}

/* Loading Spinner */
.spinner-border-sm[b-7m0gy9pyxe] {
    width: 1rem;
    height: 1rem;
    border: 2px solid currentColor;
    border-top: 2px solid transparent;
    border-radius: 50%;
    animation: spin-b-7m0gy9pyxe 1s linear infinite;
}

@keyframes spin-b-7m0gy9pyxe {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Responsive Design */
@media (max-width: 768px) {
    .delete-account-container[b-7m0gy9pyxe] {
        padding: 0 1rem;
        margin: 1rem auto;
    }

    .delete-account-header[b-7m0gy9pyxe] {
        padding: 1.5rem;
    }

    .warning-icon-large[b-7m0gy9pyxe] {
        width: 60px;
        height: 60px;
        font-size: 2rem;
    }

    .page-title[b-7m0gy9pyxe] {
        font-size: 1.5rem;
    }

    .page-subtitle[b-7m0gy9pyxe] {
        font-size: 1rem;
    }

    .deletion-info-card[b-7m0gy9pyxe],
    .deletion-form-card[b-7m0gy9pyxe] {
        padding: 1.5rem;
    }

    .section-title[b-7m0gy9pyxe] {
        font-size: 1.1rem;
    }

    .deletion-item[b-7m0gy9pyxe] {
        flex-direction: column;
        text-align: center;
        gap: 0.75rem;
    }

    .recommendation-box[b-7m0gy9pyxe] {
        flex-direction: column;
        text-align: center;
    }

    .recommendation-icon[b-7m0gy9pyxe] {
        font-size: 1.5rem;
    }

    .form-actions[b-7m0gy9pyxe] {
        flex-direction: column;
    }

    .btn[b-7m0gy9pyxe] {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .delete-account-header[b-7m0gy9pyxe] {
        padding: 1rem;
    }

    .warning-icon-large[b-7m0gy9pyxe] {
        width: 50px;
        height: 50px;
        font-size: 1.5rem;
    }

    .page-title[b-7m0gy9pyxe] {
        font-size: 1.25rem;
    }

    .deletion-info-card[b-7m0gy9pyxe],
    .deletion-form-card[b-7m0gy9pyxe] {
        padding: 1rem;
    }

    .deletion-content strong[b-7m0gy9pyxe] {
        font-size: 0.95rem;
    }

    .deletion-content span[b-7m0gy9pyxe] {
        font-size: 0.85rem;
    }

    .form-control[b-7m0gy9pyxe] {
        padding: 0.75rem;
        font-size: 0.95rem;
    }

    .btn[b-7m0gy9pyxe] {
        padding: 0.75rem 1rem;
        font-size: 0.95rem;
    }
}

/* Focus States für Accessibility */
.form-control:focus[b-7m0gy9pyxe],
.btn:focus[b-7m0gy9pyxe] {
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 102, 255, 0.25);
}

.delete-submit-btn:focus[b-7m0gy9pyxe] {
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.25);
}

/* Smooth Transitions */
*[b-7m0gy9pyxe] {
    transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}
/* _content/BotomixNew/Components/Account/Pages/Manage/Email.razor.rz.scp.css */
/* Modern Email Management Styling - B2B Design */

.email-container[b-h6kqwsqkwe] {
    max-width: 800px;
    margin: 0 auto;
    animation: fadeInUp-b-h6kqwsqkwe 0.6s ease-out;
}

@keyframes fadeInUp-b-h6kqwsqkwe {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Header Section */
.email-header[b-h6kqwsqkwe] {
    margin-bottom: 2rem;
    text-align: center;
}

.section-title[b-h6kqwsqkwe] {
    font-size: 1.75rem;
    font-weight: 600;
    color: #111827;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.section-description[b-h6kqwsqkwe] {
    font-size: 1rem;
    color: #6b7280;
    font-weight: 500;
    margin: 0;
}

/* Content Container */
.email-content[b-h6kqwsqkwe] {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

/* Email Sections */
.email-section[b-h6kqwsqkwe] {
    background: white;
    border-radius: 12px;
    padding: 2rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border: 1px solid #e9ecef;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

    .email-section:hover[b-h6kqwsqkwe] {
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
        transform: translateY(-2px);
    }

    .email-section[b-h6kqwsqkwe]::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(0, 102, 255, 0.02), transparent);
        transition: left 0.8s ease;
        z-index: 1;
    }

    .email-section:hover[b-h6kqwsqkwe]::before {
        left: 100%;
    }

    .email-section > *[b-h6kqwsqkwe] {
        position: relative;
        z-index: 2;
    }

/* Section Headers */
.section-header[b-h6kqwsqkwe] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #e9ecef;
}

.section-subtitle[b-h6kqwsqkwe] {
    font-size: 1.25rem;
    font-weight: 600;
    color: #111827;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Email Status Badge */
.email-status-badge[b-h6kqwsqkwe] {
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

    .email-status-badge.verified[b-h6kqwsqkwe] {
        background: linear-gradient(135deg, #dcfce7, #bbf7d0);
        color: #166534;
        border: 1px solid #22c55e;
    }

    .email-status-badge.unverified[b-h6kqwsqkwe] {
        background: linear-gradient(135deg, #fef3c7, #fde68a);
        color: #92400e;
        border: 1px solid #f59e0b;
    }

/* Current Email Display */
.current-email-display[b-h6kqwsqkwe] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.email-field[b-h6kqwsqkwe] {
    display: flex;
    align-items: center;
    padding: 1rem;
    background: #f8f9fa;
    border-radius: 8px;
    border: 1px solid #e9ecef;
    gap: 0.75rem;
}

.field-icon[b-h6kqwsqkwe] {
    color: #6b7280;
    font-size: 1.1rem;
    width: 20px;
    text-align: center;
    flex-shrink: 0;
}

.email-address[b-h6kqwsqkwe] {
    font-size: 1.1rem;
    font-weight: 500;
    color: #111827;
    flex: 1;
    word-break: break-all;
}

.verified-icon[b-h6kqwsqkwe] {
    color: #22c55e;
    font-size: 1.2rem;
    flex-shrink: 0;
}

/* Verification Section */
.verification-section[b-h6kqwsqkwe] {
    padding: 1.5rem;
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    border-radius: 8px;
    border: 1px solid #f59e0b;
}

.verification-text[b-h6kqwsqkwe] {
    color: #92400e;
    font-size: 0.95rem;
    font-weight: 500;
    margin-bottom: 1rem;
    line-height: 1.5;
}

.verification-form[b-h6kqwsqkwe] {
    margin: 0;
}

.verification-btn[b-h6kqwsqkwe] {
    border: 2px solid #f59e0b;
    color: #92400e;
    background: white;
    font-weight: 600;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

    .verification-btn:hover:not(:disabled)[b-h6kqwsqkwe] {
        background: #f59e0b;
        color: white;
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
    }

    .verification-btn:disabled[b-h6kqwsqkwe] {
        opacity: 0.7;
        cursor: not-allowed;
        transform: none;
    }

/* Change Email Form */
.change-email-form[b-h6kqwsqkwe] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.form-floating[b-h6kqwsqkwe] {
    margin-bottom: 0;
}

.form-control[b-h6kqwsqkwe] {
    height: 58px;
    border-radius: 10px;
    border: 2px solid #e5e7eb;
    transition: all 0.2s ease;
    font-size: 1rem;
    background: white;
}

    .form-control:focus[b-h6kqwsqkwe] {
        border-color: #0066ff;
        box-shadow: 0 0 0 4px rgba(0, 102, 255, 0.1);
        transform: translateY(-1px);
    }

    .form-control:hover:not(:focus):not(:disabled)[b-h6kqwsqkwe] {
        border-color: #cbd5e1;
    }

    .form-control:disabled[b-h6kqwsqkwe] {
        background-color: #f8f9fa;
        border-color: #e9ecef;
        color: #6c757d;
        cursor: not-allowed;
    }

.form-floating > label[b-h6kqwsqkwe] {
    color: #6b7280;
    font-weight: 500;
}

.form-floating > .form-control:focus ~ label[b-h6kqwsqkwe],
.form-floating > .form-control:not(:placeholder-shown) ~ label[b-h6kqwsqkwe] {
    color: #0066ff;
    font-weight: 600;
}

/* Form Text */
.form-text[b-h6kqwsqkwe] {
    font-size: 0.9rem;
    color: #6b7280;
    line-height: 1.5;
    padding: 1rem;
    background: #f8f9fa;
    border-radius: 8px;
    border-left: 4px solid #0066ff;
    margin: 0;
}

/* Form Actions */
.form-actions[b-h6kqwsqkwe] {
    margin-top: 1rem;
    display: flex;
    justify-content: center;
}

.change-email-btn[b-h6kqwsqkwe] {
    background: linear-gradient(135deg, #0066ff, #0052cc);
    border: none;
    padding: 0.875rem 2rem;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 10px;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 200px;
    justify-content: center;
}

    .change-email-btn:hover:not(:disabled)[b-h6kqwsqkwe] {
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(0, 102, 255, 0.3);
        background: linear-gradient(135deg, #0052cc, #003d99);
    }

    .change-email-btn:active[b-h6kqwsqkwe] {
        transform: scale(0.98);
    }

    .change-email-btn:disabled[b-h6kqwsqkwe] {
        background: #9ca3af;
        transform: none;
        box-shadow: none;
        cursor: not-allowed;
    }

/* Security Notice */
.security-notice[b-h6kqwsqkwe] {
    background: linear-gradient(135deg, #f0f7ff, #e6f3ff);
    border-radius: 12px;
    border: 1px solid #e1f0ff;
    padding: 2rem;
    margin-top: 1rem;
}

.notice-content[b-h6kqwsqkwe] {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.notice-icon[b-h6kqwsqkwe] {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #0066ff, #0052cc);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.2rem;
}

.notice-text[b-h6kqwsqkwe] {
    flex: 1;
}

.notice-title[b-h6kqwsqkwe] {
    font-size: 1.1rem;
    font-weight: 600;
    color: #0066ff;
    margin-bottom: 0.5rem;
}

.notice-description[b-h6kqwsqkwe] {
    color: #374151;
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0;
}

/* Alert Styling */
.alert[b-h6kqwsqkwe] {
    padding: 1rem 1.25rem;
    border-radius: 10px;
    margin-bottom: 1.5rem;
    font-weight: 500;
    border: none;
    animation: slideDown-b-h6kqwsqkwe 0.3s ease-out;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

@keyframes slideDown-b-h6kqwsqkwe {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.alert-success[b-h6kqwsqkwe] {
    background: linear-gradient(135deg, #f0fdf4, #dcfce7);
    color: #166534;
    border-left: 4px solid #22c55e;
}

.alert-info[b-h6kqwsqkwe] {
    background: linear-gradient(135deg, #f0f7ff, #e6f3ff);
    color: #0066ff;
    border-left: 4px solid #0066ff;
}

/* Validation Messages */
.text-danger[b-h6kqwsqkwe] {
    font-size: 0.85rem;
    font-weight: 500;
    margin-top: 0.5rem;
    color: #dc3545;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

    .text-danger[b-h6kqwsqkwe]::before {
        content: '⚠';
        font-size: 0.8rem;
    }

/* Loading Spinner */
.spinner-border-sm[b-h6kqwsqkwe] {
    width: 1rem;
    height: 1rem;
    border: 2px solid currentColor;
    border-top: 2px solid transparent;
    border-radius: 50%;
    animation: spin-b-h6kqwsqkwe 1s linear infinite;
}

@keyframes spin-b-h6kqwsqkwe {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Responsive Design */
@media (max-width: 768px) {
    .email-container[b-h6kqwsqkwe] {
        padding: 0 1rem;
    }

    .section-title[b-h6kqwsqkwe] {
        font-size: 1.5rem;
        flex-direction: column;
        gap: 0.25rem;
        text-align: center;
    }

    .email-section[b-h6kqwsqkwe] {
        padding: 1.5rem;
        margin-bottom: 1rem;
    }

    .section-header[b-h6kqwsqkwe] {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .email-status-badge[b-h6kqwsqkwe] {
        align-self: stretch;
        justify-content: center;
    }

    .email-field[b-h6kqwsqkwe] {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .email-address[b-h6kqwsqkwe] {
        font-size: 1rem;
        word-break: break-all;
        min-width: 0;
    }

    .verification-section[b-h6kqwsqkwe] {
        padding: 1rem;
    }

    .verification-btn[b-h6kqwsqkwe] {
        width: 100%;
        justify-content: center;
        padding: 1rem;
    }

    .change-email-btn[b-h6kqwsqkwe] {
        width: 100%;
        min-width: auto;
    }

    .notice-content[b-h6kqwsqkwe] {
        flex-direction: column;
        text-align: center;
        gap: 1rem;
    }

    .notice-icon[b-h6kqwsqkwe] {
        align-self: center;
    }
}

@media (max-width: 480px) {
    .email-section[b-h6kqwsqkwe] {
        padding: 1rem;
        border-radius: 8px;
    }

    .section-title[b-h6kqwsqkwe] {
        font-size: 1.25rem;
    }

    .section-subtitle[b-h6kqwsqkwe] {
        font-size: 1.1rem;
    }

    .form-control[b-h6kqwsqkwe] {
        height: 52px;
        font-size: 0.9rem;
    }

    .change-email-btn[b-h6kqwsqkwe],
    .verification-btn[b-h6kqwsqkwe] {
        font-size: 0.9rem;
        padding: 0.75rem 1rem;
    }

    .notice-title[b-h6kqwsqkwe] {
        font-size: 1rem;
    }

    .notice-description[b-h6kqwsqkwe] {
        font-size: 0.9rem;
    }
}

/* Focus States für Accessibility */
.verification-btn:focus[b-h6kqwsqkwe],
.change-email-btn:focus[b-h6kqwsqkwe] {
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 102, 255, 0.25);
}

/* Smooth Transitions */
*[b-h6kqwsqkwe] {
    transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
/* _content/BotomixNew/Components/Account/Pages/Manage/ExternalLogins.razor.rz.scp.css */
/* Modern External Logins Management Styling - B2B Design */

.external-logins-container[b-ntqke60t1r] {
    max-width: 1000px;
    margin: 0 auto;
    animation: fadeInUp-b-ntqke60t1r 0.6s ease-out;
}

@keyframes fadeInUp-b-ntqke60t1r {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Header Section */
.external-logins-header[b-ntqke60t1r] {
    margin-bottom: 2rem;
    text-align: center;
}

.section-title[b-ntqke60t1r] {
    font-size: 1.75rem;
    font-weight: 600;
    color: #111827;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.section-description[b-ntqke60t1r] {
    font-size: 1rem;
    color: #6b7280;
    font-weight: 500;
    margin: 0;
}

/* Content Container */
.external-logins-content[b-ntqke60t1r] {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

/* Loading Container */
.loading-container[b-ntqke60t1r] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    text-align: center;
}

/* Card Components */
.logins-card[b-ntqke60t1r],
.add-card[b-ntqke60t1r],
.no-logins-card[b-ntqke60t1r],
.tips-card[b-ntqke60t1r] {
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border: 1px solid #e9ecef;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

    .logins-card:hover[b-ntqke60t1r],
    .add-card:hover[b-ntqke60t1r],
    .no-logins-card:hover[b-ntqke60t1r],
    .tips-card:hover[b-ntqke60t1r] {
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
        transform: translateY(-2px);
    }

    /* Card Before Effect */
    .logins-card[b-ntqke60t1r]::before,
    .add-card[b-ntqke60t1r]::before,
    .no-logins-card[b-ntqke60t1r]::before,
    .tips-card[b-ntqke60t1r]::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(0, 102, 255, 0.02), transparent);
        transition: left 0.8s ease;
        z-index: 1;
    }

    .logins-card:hover[b-ntqke60t1r]::before,
    .add-card:hover[b-ntqke60t1r]::before,
    .no-logins-card:hover[b-ntqke60t1r]::before,
    .tips-card:hover[b-ntqke60t1r]::before {
        left: 100%;
    }

    .logins-card > *[b-ntqke60t1r],
    .add-card > *[b-ntqke60t1r],
    .no-logins-card > *[b-ntqke60t1r],
    .tips-card > *[b-ntqke60t1r] {
        position: relative;
        z-index: 2;
    }

/* Card Headers */
.card-header[b-ntqke60t1r] {
    padding: 1.5rem 2rem 1rem;
    border-bottom: 1px solid #e9ecef;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.card-title[b-ntqke60t1r] {
    font-size: 1.25rem;
    font-weight: 600;
    color: #111827;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.login-count-badge[b-ntqke60t1r] {
    background: linear-gradient(135deg, #dcfce7, #bbf7d0);
    color: #166534;
    border: 1px solid #22c55e;
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 600;
}

/* Card Bodies */
.card-body[b-ntqke60t1r] {
    padding: 2rem;
}

/* Current Logins List */
.current-logins-list[b-ntqke60t1r] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.login-item[b-ntqke60t1r] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem;
    background: #f8f9fa;
    border-radius: 10px;
    border: 1px solid #e9ecef;
    transition: all 0.2s ease;
}

    .login-item:hover[b-ntqke60t1r] {
        background: #f0f7ff;
        border-color: #e1f0ff;
        transform: translateY(-1px);
    }

.login-info[b-ntqke60t1r] {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex: 1;
}

.provider-icon[b-ntqke60t1r] {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: white;
    flex-shrink: 0;
}

    .provider-icon .fa-google[b-ntqke60t1r] {
        background: linear-gradient(135deg, #db4437, #e94d3d);
    }

    .provider-icon .fa-microsoft[b-ntqke60t1r] {
        background: linear-gradient(135deg, #00a1f1, #0078d4);
    }

    .provider-icon .fa-facebook[b-ntqke60t1r] {
        background: linear-gradient(135deg, #1877f2, #42a5f5);
    }

    .provider-icon .fa-user[b-ntqke60t1r] {
        background: linear-gradient(135deg, #6b7280, #9ca3af);
    }

.provider-details[b-ntqke60t1r] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.provider-name[b-ntqke60t1r] {
    font-size: 1.1rem;
    font-weight: 600;
    color: #111827;
    margin: 0;
}

.provider-status[b-ntqke60t1r] {
    font-size: 0.85rem;
    color: #22c55e;
    font-weight: 500;
    margin: 0;
}

.login-actions[b-ntqke60t1r] {
    display: flex;
    align-items: center;
}

.remove-form[b-ntqke60t1r] {
    margin: 0;
}

.remove-btn[b-ntqke60t1r] {
    border: 2px solid #ef4444;
    color: #ef4444;
    background: white;
    font-weight: 600;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.85rem;
}

    .remove-btn:hover:not(:disabled)[b-ntqke60t1r] {
        background: #ef4444;
        color: white;
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
    }

    .remove-btn:disabled[b-ntqke60t1r] {
        opacity: 0.7;
        cursor: not-allowed;
        transform: none;
    }

.cannot-remove-text[b-ntqke60t1r] {
    font-size: 0.85rem;
    color: #6b7280;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

/* Security Notice */
.security-notice[b-ntqke60t1r] {
    margin-top: 1.5rem;
    padding: 1rem;
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    border-radius: 8px;
    border: 1px solid #f59e0b;
}

.notice-content[b-ntqke60t1r] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.notice-icon[b-ntqke60t1r] {
    color: #f59e0b;
    font-size: 1.2rem;
    margin-top: 0.1rem;
    flex-shrink: 0;
}

.notice-text[b-ntqke60t1r] {
    color: #92400e;
    font-size: 0.9rem;
    line-height: 1.5;
}

/* Add Logins Section */
.add-logins-info[b-ntqke60t1r] {
    margin-bottom: 2rem;
}

.add-description[b-ntqke60t1r] {
    font-size: 1rem;
    color: #374151;
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

.benefits-list[b-ntqke60t1r] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.benefit-item[b-ntqke60t1r] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.95rem;
    color: #374151;
}

.benefit-icon[b-ntqke60t1r] {
    color: #22c55e;
    font-size: 1rem;
    width: 20px;
    text-align: center;
    flex-shrink: 0;
}

/* Providers Grid */
.providers-grid[b-ntqke60t1r] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
}

.provider-btn[b-ntqke60t1r] {
    padding: 1.5rem;
    border: 2px solid #e9ecef;
    border-radius: 10px;
    background: white;
    transition: all 0.2s ease;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: inherit;
}

    .provider-btn:hover:not(:disabled)[b-ntqke60t1r] {
        border-color: #0066ff;
        background: #f0f7ff;
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(0, 102, 255, 0.15);
    }

    .provider-btn:disabled[b-ntqke60t1r] {
        opacity: 0.7;
        cursor: not-allowed;
        transform: none;
    }

.provider-btn-content[b-ntqke60t1r] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.provider-btn-icon[b-ntqke60t1r] {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: white;
    flex-shrink: 0;
}

    .provider-btn-icon .fa-google[b-ntqke60t1r] {
        background: linear-gradient(135deg, #db4437, #e94d3d);
    }

    .provider-btn-icon .fa-microsoft[b-ntqke60t1r] {
        background: linear-gradient(135deg, #00a1f1, #0078d4);
    }

    .provider-btn-icon .fa-facebook[b-ntqke60t1r] {
        background: linear-gradient(135deg, #1877f2, #42a5f5);
    }

    .provider-btn-icon .fa-sign-in-alt[b-ntqke60t1r] {
        background: linear-gradient(135deg, #6b7280, #9ca3af);
    }

.provider-btn-text[b-ntqke60t1r] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    text-align: left;
}

.provider-action[b-ntqke60t1r] {
    font-size: 0.85rem;
    color: #6b7280;
    font-weight: 500;
}

.provider-name[b-ntqke60t1r] {
    font-size: 1.1rem;
    font-weight: 600;
    color: #111827;
}

/* No Logins Section */
.no-logins-content[b-ntqke60t1r] {
    text-align: center;
    padding: 2rem;
}

.no-logins-icon[b-ntqke60t1r] {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, #f3f4f6, #e5e7eb);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    font-size: 2rem;
    color: #9ca3af;
}

.no-logins-title[b-ntqke60t1r] {
    font-size: 1.25rem;
    font-weight: 600;
    color: #111827;
    margin-bottom: 1rem;
}

.no-logins-description[b-ntqke60t1r] {
    font-size: 1rem;
    color: #6b7280;
    line-height: 1.6;
    margin: 0;
}

/* Security Tips Grid */
.tips-grid[b-ntqke60t1r] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
}

.tip-item[b-ntqke60t1r] {
    display: flex;
    gap: 1rem;
    padding: 1.5rem;
    background: #f8f9fa;
    border-radius: 10px;
    border: 1px solid #e9ecef;
    transition: all 0.2s ease;
}

    .tip-item:hover[b-ntqke60t1r] {
        background: #f0f7ff;
        border-color: #e1f0ff;
        transform: translateY(-2px);
    }

.tip-icon[b-ntqke60t1r] {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #0066ff, #0052cc);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.2rem;
}

.tip-content[b-ntqke60t1r] {
    flex: 1;
}

    .tip-content h6[b-ntqke60t1r] {
        font-size: 1rem;
        font-weight: 600;
        color: #111827;
        margin-bottom: 0.5rem;
    }

    .tip-content p[b-ntqke60t1r] {
        font-size: 0.9rem;
        color: #6b7280;
        line-height: 1.5;
        margin: 0;
    }

/* Alert Styling */
.alert[b-ntqke60t1r] {
    padding: 1rem 1.25rem;
    border-radius: 10px;
    margin-bottom: 1.5rem;
    font-weight: 500;
    border: none;
    animation: slideDown-b-ntqke60t1r 0.3s ease-out;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

@keyframes slideDown-b-ntqke60t1r {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.alert-success[b-ntqke60t1r] {
    background: linear-gradient(135deg, #f0fdf4, #dcfce7);
    color: #166534;
    border-left: 4px solid #22c55e;
}

.alert-danger[b-ntqke60t1r] {
    background: linear-gradient(135deg, #fef2f2, #fee2e2);
    color: #991b1b;
    border-left: 4px solid #ef4444;
}

/* Loading Spinner */
.spinner-border-sm[b-ntqke60t1r] {
    width: 1rem;
    height: 1rem;
    border: 2px solid currentColor;
    border-top: 2px solid transparent;
    border-radius: 50%;
    animation: spin-b-ntqke60t1r 1s linear infinite;
}

@keyframes spin-b-ntqke60t1r {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Responsive Design */
@media (max-width: 768px) {
    .external-logins-container[b-ntqke60t1r] {
        padding: 0 1rem;
    }

    .section-title[b-ntqke60t1r] {
        font-size: 1.5rem;
        flex-direction: column;
        gap: 0.25rem;
    }

    .card-header[b-ntqke60t1r] {
        padding: 1rem 1.5rem 0.75rem;
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .card-body[b-ntqke60t1r] {
        padding: 1.5rem;
    }

    .card-title[b-ntqke60t1r] {
        font-size: 1.1rem;
    }

    .login-item[b-ntqke60t1r] {
        flex-direction: column;
        gap: 1rem;
        align-items: flex-start;
        padding: 1rem;
    }

    .login-actions[b-ntqke60t1r] {
        align-self: stretch;
        justify-content: center;
    }

    .remove-btn[b-ntqke60t1r] {
        width: 100%;
        justify-content: center;
    }

    .providers-grid[b-ntqke60t1r] {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .provider-btn[b-ntqke60t1r] {
        padding: 1rem;
    }

    .provider-btn-content[b-ntqke60t1r] {
        gap: 0.75rem;
    }

    .provider-btn-icon[b-ntqke60t1r] {
        width: 40px;
        height: 40px;
        font-size: 1.2rem;
    }

    .tips-grid[b-ntqke60t1r] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .tip-item[b-ntqke60t1r] {
        padding: 1rem;
        flex-direction: column;
        text-align: center;
        gap: 0.75rem;
    }

    .tip-icon[b-ntqke60t1r] {
        align-self: center;
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    .external-logins-header[b-ntqke60t1r] {
        margin-bottom: 1.5rem;
    }

    .section-title[b-ntqke60t1r] {
        font-size: 1.25rem;
    }

    .card-header[b-ntqke60t1r] {
        padding: 0.75rem 1rem 0.5rem;
    }

    .card-body[b-ntqke60t1r] {
        padding: 1rem;
    }

    .card-title[b-ntqke60t1r] {
        font-size: 1rem;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
    }

    .login-item[b-ntqke60t1r] {
        padding: 0.75rem;
    }

    .provider-icon[b-ntqke60t1r],
    .provider-btn-icon[b-ntqke60t1r] {
        width: 36px;
        height: 36px;
        font-size: 1rem;
    }

    .provider-name[b-ntqke60t1r] {
        font-size: 1rem;
    }

    .provider-btn[b-ntqke60t1r] {
        padding: 0.75rem;
    }

    .provider-btn-text[b-ntqke60t1r] {
        gap: 0.1rem;
    }

    .provider-action[b-ntqke60t1r] {
        font-size: 0.8rem;
    }

    .provider-name[b-ntqke60t1r] {
        font-size: 0.95rem;
    }

    .remove-btn[b-ntqke60t1r] {
        font-size: 0.8rem;
        padding: 0.5rem 0.75rem;
    }

    .no-logins-icon[b-ntqke60t1r] {
        width: 60px;
        height: 60px;
        font-size: 1.5rem;
    }

    .no-logins-title[b-ntqke60t1r] {
        font-size: 1.1rem;
    }

    .tip-content h6[b-ntqke60t1r] {
        font-size: 0.9rem;
    }

    .tip-content p[b-ntqke60t1r] {
        font-size: 0.85rem;
    }
}

/* Focus States für Accessibility */
.remove-btn:focus[b-ntqke60t1r],
.provider-btn:focus[b-ntqke60t1r] {
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 102, 255, 0.25);
}

.remove-btn:focus[b-ntqke60t1r] {
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.25);
}

/* Smooth Transitions */
*[b-ntqke60t1r] {
    transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
/* _content/BotomixNew/Components/Account/Pages/Manage/Index.razor.rz.scp.css */
/* Modern Profile Page Styling - Inspired by E-Mail Management */

.profile-container[b-ku5v4nedvd] {
    max-width: 1000px;
    margin: 0 auto;
    padding: 3rem 2rem;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: #f5f7fa;
    min-height: 100vh;
}

/* Header Section */
.profile-header[b-ku5v4nedvd] {
    text-align: center;
    margin-bottom: 3rem;
    padding: 0;
}

.profile-title[b-ku5v4nedvd] {
    font-size: 2.25rem;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 0.75rem;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.profile-subtitle[b-ku5v4nedvd] {
    font-size: 1.1rem;
    color: #6b7280;
    font-weight: 400;
    margin: 0;
}

/* Main Content Container */
.profile-content[b-ku5v4nedvd] {
    background: white;
    border-radius: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    border: 1px solid #e5e7eb;
    padding: 0;
    animation: slideUp-b-ku5v4nedvd 0.5s ease-out;
    overflow: hidden;
}

@keyframes slideUp-b-ku5v4nedvd {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Form Container - Inner Padding */
.profile-content form[b-ku5v4nedvd] {
    padding: 3rem;
}

/* Form Sections - Card Style */
.form-section[b-ku5v4nedvd] {
    margin-bottom: 2rem;
    padding: 2.5rem;
    background: #fafbfc;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    animation: fadeInUp-b-ku5v4nedvd 0.4s ease-out;
    transition: all 0.2s ease;
}

    .form-section:hover[b-ku5v4nedvd] {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    }

    .form-section:last-of-type[b-ku5v4nedvd] {
        margin-bottom: 0;
    }

@keyframes fadeInUp-b-ku5v4nedvd {
    from {
        opacity: 0;
        transform: translateY(15px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Section Headers */
.section-header[b-ku5v4nedvd] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    padding-bottom: 1.25rem;
    border-bottom: 2px solid #e5e7eb;
}

    .section-header h3[b-ku5v4nedvd] {
        font-size: 1.35rem;
        font-weight: 600;
        color: #111827;
        margin: 0;
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }

        .section-header h3 i[b-ku5v4nedvd] {
            font-size: 1.25rem;
            color: #6b7280;
        }

/* Verification Badge */
.verification-badge[b-ku5v4nedvd] {
    padding: 0.5rem 1rem;
    border-radius: 24px;
    font-size: 0.875rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

    .verification-badge.verified[b-ku5v4nedvd] {
        background: #d1fae5;
        color: #065f46;
        border: 1px solid #10b981;
    }

    .verification-badge.unverified[b-ku5v4nedvd] {
        background: #fef3c7;
        color: #92400e;
        border: 1px solid #f59e0b;
    }

    .verification-badge i[b-ku5v4nedvd] {
        font-size: 0.9rem;
    }

/* Form Controls - Modern Input Style */
.form-control[b-ku5v4nedvd] {
    height: 56px;
    border-radius: 8px;
    border: 1.5px solid #d1d5db;
    transition: all 0.2s ease;
    font-size: 1rem;
    background: white;
    padding: 0.75rem 1rem;
}

    .form-control:focus[b-ku5v4nedvd] {
        border-color: #3b82f6;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
        outline: none;
    }

    .form-control:hover:not(:focus):not(:disabled)[b-ku5v4nedvd] {
        border-color: #9ca3af;
    }

    .form-control:disabled[b-ku5v4nedvd] {
        background-color: #f9fafb;
        border-color: #e5e7eb;
        color: #6b7280;
        cursor: not-allowed;
    }

/* Floating Labels */
.form-floating[b-ku5v4nedvd] {
    margin-bottom: 1.5rem;
}

    .form-floating > label[b-ku5v4nedvd] {
        color: #6b7280;
        font-weight: 500;
        font-size: 0.95rem;
        padding-left: 1rem;
    }

    .form-floating > .form-control:focus ~ label[b-ku5v4nedvd],
    .form-floating > .form-control:not(:placeholder-shown) ~ label[b-ku5v4nedvd] {
        color: #3b82f6;
        font-weight: 600;
    }

/* Form Helper Text */
.form-text[b-ku5v4nedvd] {
    font-size: 0.875rem;
    color: #6b7280;
    margin-top: 0.5rem;
    padding-left: 0.25rem;
    display: block;
}

/* Form Actions Section */
.form-actions[b-ku5v4nedvd] {
    margin-top: 2.5rem;
    padding-top: 2rem;
    border-top: 2px solid #e5e7eb;
    text-align: center;
}

/* Primary Button - Modern Style */
.btn-primary[b-ku5v4nedvd] {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    border: none;
    padding: 0.875rem 2.5rem;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 8px;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    min-width: 220px;
    box-shadow: 0 2px 4px rgba(59, 130, 246, 0.2);
}

    .btn-primary:hover:not(:disabled)[b-ku5v4nedvd] {
        background: linear-gradient(135deg, #2563eb, #1d4ed8);
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
    }

    .btn-primary:active[b-ku5v4nedvd] {
        transform: translateY(0);
    }

    .btn-primary:disabled[b-ku5v4nedvd] {
        background: #9ca3af;
        transform: none;
        box-shadow: none;
        cursor: not-allowed;
    }

    .btn-primary i[b-ku5v4nedvd] {
        font-size: 1rem;
    }

/* Alert Messages */
.alert[b-ku5v4nedvd] {
    padding: 1rem 1.5rem;
    border-radius: 8px;
    margin-bottom: 2rem;
    font-weight: 500;
    border: none;
    animation: slideDown-b-ku5v4nedvd 0.3s ease-out;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.95rem;
}

@keyframes slideDown-b-ku5v4nedvd {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.alert-success[b-ku5v4nedvd] {
    background: #d1fae5;
    color: #065f46;
    border-left: 4px solid #10b981;
}

.alert-danger[b-ku5v4nedvd] {
    background: #fee2e2;
    color: #991b1b;
    border-left: 4px solid #ef4444;
}

.alert i[b-ku5v4nedvd] {
    font-size: 1.1rem;
}

/* Loading Spinner */
.spinner-border-sm[b-ku5v4nedvd] {
    width: 1rem;
    height: 1rem;
    border: 2px solid white;
    border-top: 2px solid transparent;
    border-radius: 50%;
    animation: spin-b-ku5v4nedvd 0.8s linear infinite;
}

@keyframes spin-b-ku5v4nedvd {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Validation Errors */
.text-danger[b-ku5v4nedvd] {
    font-size: 0.875rem;
    font-weight: 500;
    margin-top: 0.375rem;
    color: #dc2626;
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding-left: 0.25rem;
}

    .text-danger[b-ku5v4nedvd]::before {
        content: '⚠';
        font-size: 0.85rem;
    }

/* Row & Column Spacing */
.row[b-ku5v4nedvd] {
    margin-left: -0.5rem;
    margin-right: -0.5rem;
}

    .row > [class*="col-"][b-ku5v4nedvd] {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

/* TextArea Specific Styling */
textarea.form-control[b-ku5v4nedvd] {
    min-height: 120px;
    resize: vertical;
    padding-top: 1rem;
    line-height: 1.6;
}

/* Custom Select Styling */
select.form-control[b-ku5v4nedvd] {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 0.75rem center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
    appearance: none;
    padding-right: 2.75rem;
    cursor: pointer;
}

    select.form-control:focus[b-ku5v4nedvd] {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%233b82f6' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    }

/* Loading State */
.text-center.py-5[b-ku5v4nedvd] {
    padding: 4rem 0;
}

.spinner-border[b-ku5v4nedvd] {
    width: 3rem;
    height: 3rem;
    border: 0.3rem solid #e5e7eb;
    border-top-color: #3b82f6;
    border-radius: 50%;
    animation: spin-b-ku5v4nedvd 1s linear infinite;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .profile-container[b-ku5v4nedvd] {
        padding: 2rem 1.5rem;
    }

    .profile-content form[b-ku5v4nedvd] {
        padding: 2.5rem;
    }

    .form-section[b-ku5v4nedvd] {
        padding: 2rem;
    }
}

@media (max-width: 768px) {
    .profile-container[b-ku5v4nedvd] {
        padding: 1.5rem 1rem;
    }

    .profile-title[b-ku5v4nedvd] {
        font-size: 2rem;
    }

    .profile-content form[b-ku5v4nedvd] {
        padding: 2rem;
    }

    .form-section[b-ku5v4nedvd] {
        padding: 1.75rem;
    }

    .section-header[b-ku5v4nedvd] {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .verification-badge[b-ku5v4nedvd] {
        align-self: stretch;
        justify-content: center;
    }

    .row > [class*="col-"][b-ku5v4nedvd] {
        margin-bottom: 0.5rem;
    }
}

@media (max-width: 480px) {
    .profile-container[b-ku5v4nedvd] {
        padding: 1rem 0.5rem;
    }

    .profile-title[b-ku5v4nedvd] {
        font-size: 1.75rem;
    }

    .profile-content[b-ku5v4nedvd] {
        border-radius: 12px;
    }

        .profile-content form[b-ku5v4nedvd] {
            padding: 1.5rem;
        }

    .form-section[b-ku5v4nedvd] {
        padding: 1.5rem;
        margin-bottom: 1.5rem;
    }

    .section-header h3[b-ku5v4nedvd] {
        font-size: 1.25rem;
    }

    .btn-primary[b-ku5v4nedvd] {
        padding: 0.75rem 2rem;
        font-size: 0.95rem;
        min-width: 100%;
    }

    .form-control[b-ku5v4nedvd] {
        height: 52px;
        font-size: 0.95rem;
    }
}

/* Focus Styles for Accessibility */
.btn:focus[b-ku5v4nedvd],
.form-control:focus[b-ku5v4nedvd] {
    outline: none;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

/* Hover Effects for Cards */
.profile-content[b-ku5v4nedvd] {
    transition: box-shadow 0.3s ease;
}

/* Smooth Transitions */
*[b-ku5v4nedvd] {
    transition-property: color, background-color, border-color, transform, box-shadow;
    transition-duration: 0.15s;
    transition-timing-function: ease-in-out;
}

/* Print Styles */
@media print {
    .profile-container[b-ku5v4nedvd] {
        background: white;
    }

    .form-section[b-ku5v4nedvd] {
        background: white;
        border: 1px solid #dee2e6;
        page-break-inside: avoid;
    }

    .btn-primary[b-ku5v4nedvd],
    .alert[b-ku5v4nedvd] {
        display: none;
    }
}
/* _content/BotomixNew/Components/Account/Pages/Manage/PersonalData.razor.rz.scp.css */
/* Modern Personal Data Management Styling - B2B Design */

.personal-data-container[b-1qn3azv7sy] {
    max-width: 1000px;
    margin: 0 auto;
    animation: fadeInUp-b-1qn3azv7sy 0.6s ease-out;
}

@keyframes fadeInUp-b-1qn3azv7sy {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Header Section */
.personal-data-header[b-1qn3azv7sy] {
    margin-bottom: 2rem;
    text-align: center;
}

.section-title[b-1qn3azv7sy] {
    font-size: 1.75rem;
    font-weight: 600;
    color: #111827;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.section-description[b-1qn3azv7sy] {
    font-size: 1rem;
    color: #6b7280;
    font-weight: 500;
    margin: 0;
}

/* Content Container */
.personal-data-content[b-1qn3azv7sy] {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

/* Loading Container */
.loading-container[b-1qn3azv7sy] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    text-align: center;
}

/* Card Components */
.overview-card[b-1qn3azv7sy],
.download-card[b-1qn3azv7sy],
.delete-card[b-1qn3azv7sy],
.gdpr-card[b-1qn3azv7sy] {
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border: 1px solid #e9ecef;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

    /* Hover nur für download-card und gdpr-card */
    .download-card:hover[b-1qn3azv7sy],
    .gdpr-card:hover[b-1qn3azv7sy] {
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
        transform: translateY(-2px);
    }

.delete-card[b-1qn3azv7sy] {
    border-color: #fecaca;
}

    .delete-card:hover[b-1qn3azv7sy] {
        box-shadow: 0 8px 30px rgba(239, 68, 68, 0.15);
        transform: translateY(-2px);
    }

/* Card Before Effect - nur für download-card und gdpr-card */
.download-card[b-1qn3azv7sy]::before,
.gdpr-card[b-1qn3azv7sy]::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(0, 102, 255, 0.02), transparent);
    transition: left 0.8s ease;
    z-index: 1;
}

.delete-card[b-1qn3azv7sy]::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(239, 68, 68, 0.02), transparent);
    transition: left 0.8s ease;
    z-index: 1;
}

.download-card:hover[b-1qn3azv7sy]::before,
.delete-card:hover[b-1qn3azv7sy]::before,
.gdpr-card:hover[b-1qn3azv7sy]::before {
    left: 100%;
}

.overview-card > *[b-1qn3azv7sy],
.download-card > *[b-1qn3azv7sy],
.delete-card > *[b-1qn3azv7sy],
.gdpr-card > *[b-1qn3azv7sy] {
    position: relative;
    z-index: 2;
}

/* Card Headers */
.card-header[b-1qn3azv7sy] {
    padding: 1.5rem 2rem 1rem;
    border-bottom: 1px solid #e9ecef;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.danger-header[b-1qn3azv7sy] {
    border-bottom-color: #fecaca;
}

.card-title[b-1qn3azv7sy] {
    font-size: 1.25rem;
    font-weight: 600;
    color: #111827;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Card Bodies */
.card-body[b-1qn3azv7sy] {
    padding: 2rem;
}

/* Data Overview */
.data-info[b-1qn3azv7sy] {
    margin-bottom: 2rem;
}

.info-text[b-1qn3azv7sy] {
    font-size: 1rem;
    color: #374151;
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

.data-types-title[b-1qn3azv7sy] {
    font-size: 1.1rem;
    font-weight: 600;
    color: #111827;
    margin-bottom: 1rem;
}

.data-types-grid[b-1qn3azv7sy] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
}

.data-type-item[b-1qn3azv7sy] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    background: #f8f9fa;
    border-radius: 8px;
    border: 1px solid #e9ecef;
    transition: all 0.2s ease;
}

.data-type-icon[b-1qn3azv7sy] {
    color: #0066ff;
    font-size: 1.1rem;
    width: 20px;
    text-align: center;
    flex-shrink: 0;
}

/* Download Section */
.download-info[b-1qn3azv7sy] {
    margin-bottom: 2rem;
}

.download-description[b-1qn3azv7sy] {
    font-size: 1rem;
    color: #374151;
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

.download-benefits[b-1qn3azv7sy] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 2rem;
}

.benefit-item[b-1qn3azv7sy] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.95rem;
    color: #374151;
}

.benefit-icon[b-1qn3azv7sy] {
    color: #22c55e;
    font-size: 1rem;
    width: 20px;
    text-align: center;
    flex-shrink: 0;
}

.download-form[b-1qn3azv7sy] {
    display: flex;
    justify-content: center;
}

.download-btn[b-1qn3azv7sy] {
    background: linear-gradient(135deg, #0066ff, #0052cc);
    border: none;
    padding: 0.875rem 2rem;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 10px;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 200px;
    justify-content: center;
}

    .download-btn:hover:not(:disabled)[b-1qn3azv7sy] {
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(0, 102, 255, 0.3);
        background: linear-gradient(135deg, #0052cc, #003d99);
    }

    .download-btn:active[b-1qn3azv7sy] {
        transform: scale(0.98);
    }

    .download-btn:disabled[b-1qn3azv7sy] {
        background: #9ca3af;
        transform: none;
        box-shadow: none;
        cursor: not-allowed;
    }

/* Delete Section */
.delete-warning[b-1qn3azv7sy] {
    margin-bottom: 2rem;
}

.warning-content[b-1qn3azv7sy] {
    display: flex;
    gap: 1rem;
    padding: 1.5rem;
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    border-radius: 10px;
    border: 1px solid #f59e0b;
}

.warning-icon[b-1qn3azv7sy] {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    background: #f59e0b;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.2rem;
}

.warning-text[b-1qn3azv7sy] {
    flex: 1;
}

.warning-title[b-1qn3azv7sy] {
    font-size: 1.1rem;
    font-weight: 600;
    color: #92400e;
    margin-bottom: 0.5rem;
}

.warning-description[b-1qn3azv7sy] {
    color: #92400e;
    line-height: 1.6;
    margin: 0;
}

.delete-consequences[b-1qn3azv7sy] {
    margin-bottom: 2rem;
}

.consequences-title[b-1qn3azv7sy] {
    font-size: 1rem;
    font-weight: 600;
    color: #111827;
    margin-bottom: 1rem;
}

.consequences-list[b-1qn3azv7sy] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.consequence-item[b-1qn3azv7sy] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.95rem;
    color: #374151;
}

.consequence-icon[b-1qn3azv7sy] {
    color: #ef4444;
    font-size: 1rem;
    width: 20px;
    text-align: center;
    flex-shrink: 0;
}

.delete-actions[b-1qn3azv7sy] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    align-items: center;
}

.delete-recommendation[b-1qn3azv7sy] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem;
    background: #f0f7ff;
    border-radius: 8px;
    color: #0066ff;
    font-size: 0.95rem;
    font-weight: 500;
    text-align: center;
}

.delete-btn[b-1qn3azv7sy] {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    border: none;
    padding: 0.875rem 2rem;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 10px;
    color: white;
    text-decoration: none;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 220px;
    justify-content: center;
}

    .delete-btn:hover[b-1qn3azv7sy] {
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(239, 68, 68, 0.3);
        background: linear-gradient(135deg, #dc2626, #b91c1c);
        text-decoration: none;
        color: white;
    }

    .delete-btn:active[b-1qn3azv7sy] {
        transform: scale(0.98);
    }

/* GDPR Section */
.rights-grid[b-1qn3azv7sy] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.right-item[b-1qn3azv7sy] {
    display: flex;
    gap: 1rem;
    padding: 1.5rem;
    background: #f8f9fa;
    border-radius: 10px;
    border: 1px solid #e9ecef;
    transition: all 0.2s ease;
}

    .right-item:hover[b-1qn3azv7sy] {
        background: #f0f7ff;
        border-color: #e1f0ff;
        transform: translateY(-2px);
    }

.right-icon[b-1qn3azv7sy] {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #0066ff, #0052cc);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.2rem;
}

.right-content[b-1qn3azv7sy] {
    flex: 1;
}

    .right-content h6[b-1qn3azv7sy] {
        font-size: 1rem;
        font-weight: 600;
        color: #111827;
        margin-bottom: 0.5rem;
    }

    .right-content p[b-1qn3azv7sy] {
        font-size: 0.9rem;
        color: #6b7280;
        line-height: 1.5;
        margin: 0;
    }

.contact-info[b-1qn3azv7sy] {
    padding: 1.5rem;
    background: #f0f7ff;
    border-radius: 10px;
    border: 1px solid #e1f0ff;
    text-align: center;
}

.contact-content h6[b-1qn3azv7sy] {
    font-size: 1rem;
    font-weight: 600;
    color: #0066ff;
    margin-bottom: 0.5rem;
}

.contact-content p[b-1qn3azv7sy] {
    color: #374151;
    margin: 0;
}

.contact-link[b-1qn3azv7sy] {
    color: #0066ff;
    text-decoration: none;
    font-weight: 600;
}

    .contact-link:hover[b-1qn3azv7sy] {
        text-decoration: underline;
    }

/* Alert Styling */
.alert[b-1qn3azv7sy] {
    padding: 1rem 1.25rem;
    border-radius: 10px;
    margin-bottom: 1.5rem;
    font-weight: 500;
    border: none;
    animation: slideDown-b-1qn3azv7sy 0.3s ease-out;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

@keyframes slideDown-b-1qn3azv7sy {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.alert-success[b-1qn3azv7sy] {
    background: linear-gradient(135deg, #f0fdf4, #dcfce7);
    color: #166534;
    border-left: 4px solid #22c55e;
}

.alert-danger[b-1qn3azv7sy] {
    background: linear-gradient(135deg, #fef2f2, #fee2e2);
    color: #991b1b;
    border-left: 4px solid #ef4444;
}

/* Loading Spinner */
.spinner-border-sm[b-1qn3azv7sy] {
    width: 1rem;
    height: 1rem;
    border: 2px solid currentColor;
    border-top: 2px solid transparent;
    border-radius: 50%;
    animation: spin-b-1qn3azv7sy 1s linear infinite;
}

@keyframes spin-b-1qn3azv7sy {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Responsive Design */
@media (max-width: 768px) {
    .personal-data-container[b-1qn3azv7sy] {
        padding: 0 1rem;
    }

    .section-title[b-1qn3azv7sy] {
        font-size: 1.5rem;
        flex-direction: column;
        gap: 0.25rem;
    }

    .card-header[b-1qn3azv7sy] {
        padding: 1rem 1.5rem 0.75rem;
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .card-body[b-1qn3azv7sy] {
        padding: 1.5rem;
    }

    .card-title[b-1qn3azv7sy] {
        font-size: 1.1rem;
    }

    .data-types-grid[b-1qn3azv7sy] {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .data-type-item[b-1qn3azv7sy] {
        padding: 0.75rem;
    }

    .download-benefits[b-1qn3azv7sy] {
        gap: 0.5rem;
    }

    .warning-content[b-1qn3azv7sy] {
        flex-direction: column;
        text-align: center;
        gap: 1rem;
        padding: 1rem;
    }

    .warning-icon[b-1qn3azv7sy] {
        align-self: center;
    }

    .rights-grid[b-1qn3azv7sy] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .right-item[b-1qn3azv7sy] {
        padding: 1rem;
        flex-direction: column;
        text-align: center;
        gap: 0.75rem;
    }

    .right-icon[b-1qn3azv7sy] {
        align-self: center;
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }

    .download-btn[b-1qn3azv7sy],
    .delete-btn[b-1qn3azv7sy] {
        width: 100%;
        min-width: auto;
    }
}

@media (max-width: 480px) {
    .personal-data-header[b-1qn3azv7sy] {
        margin-bottom: 1.5rem;
    }

    .section-title[b-1qn3azv7sy] {
        font-size: 1.25rem;
    }

    .card-header[b-1qn3azv7sy] {
        padding: 0.75rem 1rem 0.5rem;
    }

    .card-body[b-1qn3azv7sy] {
        padding: 1rem;
    }

    .card-title[b-1qn3azv7sy] {
        font-size: 1rem;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
    }

    .data-type-item[b-1qn3azv7sy] {
        flex-direction: column;
        text-align: center;
        gap: 0.5rem;
        padding: 0.75rem 0.5rem;
    }

    .benefit-item[b-1qn3azv7sy],
    .consequence-item[b-1qn3azv7sy] {
        flex-direction: column;
        text-align: center;
        gap: 0.5rem;
    }

    .warning-content[b-1qn3azv7sy] {
        padding: 0.75rem;
    }

    .warning-title[b-1qn3azv7sy] {
        font-size: 1rem;
    }

    .contact-info[b-1qn3azv7sy] {
        padding: 1rem;
    }

    .download-btn[b-1qn3azv7sy],
    .delete-btn[b-1qn3azv7sy] {
        font-size: 0.9rem;
        padding: 0.75rem 1rem;
    }
}

/* Focus States für Accessibility */
.download-btn:focus[b-1qn3azv7sy],
.delete-btn:focus[b-1qn3azv7sy],
.contact-link:focus[b-1qn3azv7sy] {
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 102, 255, 0.25);
}

.delete-btn:focus[b-1qn3azv7sy] {
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.25);
}

/* Smooth Transitions */
*[b-1qn3azv7sy] {
    transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

/* Additional Security Features */
.security-note[b-1qn3azv7sy] {
    background: linear-gradient(135deg, #f0f7ff, #e6f3ff);
    border: 1px solid #e1f0ff;
    color: #0066ff;
    padding: 1rem;
    border-radius: 8px;
    margin: 1rem 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    font-weight: 500;
}
/* _content/BotomixNew/Components/Account/Pages/Manage/SetPassword.razor.rz.scp.css */
/* SetPassword.razor - Modernes Design konsistent mit Login/Register */
.setpassword-container[b-gc7cs5u7qd] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 85vh;
    background: linear-gradient(135deg, #f0f7ff 0%, #e6f3ff 50%, #f8f9fa 100%);
    padding: 2rem;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.setpassword-card[b-gc7cs5u7qd] {
    width: 100%;
    max-width: 500px;
    background: white;
    padding: 2.5rem;
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    border: 1px solid #e9ecef;
    position: relative;
    overflow: hidden;
    animation: slideUp-b-gc7cs5u7qd 0.6s ease-out;
}

@keyframes slideUp-b-gc7cs5u7qd {
    from {
        opacity: 0;
        transform: translateY(30px) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Subtiler Glanz-Effekt */
.setpassword-card[b-gc7cs5u7qd]::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(0, 102, 255, 0.03), transparent);
    transition: left 0.8s ease;
    z-index: 1;
}

.setpassword-card:hover[b-gc7cs5u7qd]::before {
    left: 100%;
}

.setpassword-card > *[b-gc7cs5u7qd] {
    position: relative;
    z-index: 2;
}

/* Header Styling */
.setpassword-header[b-gc7cs5u7qd] {
    text-align: center;
    margin-bottom: 2rem;
}

.icon-wrapper[b-gc7cs5u7qd] {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #0066ff, #0052cc);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    box-shadow: 0 8px 25px rgba(0, 102, 255, 0.25);
    animation: iconPulse-b-gc7cs5u7qd 2s ease-in-out infinite;
}

    .icon-wrapper i[b-gc7cs5u7qd] {
        font-size: 2rem;
        color: white;
    }

@keyframes iconPulse-b-gc7cs5u7qd {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 8px 25px rgba(0, 102, 255, 0.25);
    }

    50% {
        transform: scale(1.05);
        box-shadow: 0 12px 35px rgba(0, 102, 255, 0.35);
    }
}

.page-title[b-gc7cs5u7qd] {
    font-size: 2rem;
    font-weight: 700;
    color: #111827;
    margin-bottom: 0.5rem;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.page-subtitle[b-gc7cs5u7qd] {
    font-size: 1rem;
    color: #6b7280;
    font-weight: 500;
    line-height: 1.5;
}

/* Info Section */
.info-section[b-gc7cs5u7qd] {
    background: linear-gradient(135deg, #f8fbff, #f0f7ff);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 2rem;
    border-left: 4px solid #0066ff;
}

.info-item[b-gc7cs5u7qd] {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

    .info-item i[b-gc7cs5u7qd] {
        color: #0066ff;
        font-size: 1.25rem;
        margin-top: 0.25rem;
        flex-shrink: 0;
    }

    .info-item strong[b-gc7cs5u7qd] {
        color: #111827;
        font-size: 1rem;
        display: block;
        margin-bottom: 0.5rem;
    }

    .info-item p[b-gc7cs5u7qd] {
        color: #6b7280;
        margin: 0;
        font-size: 0.9rem;
        line-height: 1.5;
    }

/* Form Styling - Konsistent mit Login/Register */
.form-control[b-gc7cs5u7qd] {
    height: 58px;
    border-radius: 10px;
    border: 2px solid #e5e7eb;
    transition: all 0.2s ease;
    font-size: 1rem;
    background: white;
}

    .form-control:focus[b-gc7cs5u7qd] {
        border-color: #0066ff;
        box-shadow: 0 0 0 4px rgba(0, 102, 255, 0.1);
        transform: translateY(-1px);
    }

    .form-control:hover:not(:focus)[b-gc7cs5u7qd] {
        border-color: #cbd5e1;
    }

    .form-control:disabled[b-gc7cs5u7qd] {
        background-color: #f8f9fa;
        border-color: #e9ecef;
        color: #6c757d;
    }

.form-floating > label[b-gc7cs5u7qd] {
    color: #6b7280;
    font-weight: 500;
}

.form-floating > .form-control:focus ~ label[b-gc7cs5u7qd],
.form-floating > .form-control:not(:placeholder-shown) ~ label[b-gc7cs5u7qd] {
    color: #0066ff;
    font-weight: 600;
}

/* Password Requirements */
.password-requirements[b-gc7cs5u7qd] {
    margin-top: 0.75rem;
    padding: 0.75rem;
    background: #f8f9fa;
    border-radius: 8px;
    border: 1px solid #e9ecef;
}

.requirement[b-gc7cs5u7qd] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: #6b7280;
    margin-bottom: 0.5rem;
    transition: all 0.3s ease;
}

    .requirement:last-child[b-gc7cs5u7qd] {
        margin-bottom: 0;
    }

    .requirement i[b-gc7cs5u7qd] {
        font-size: 0.75rem;
        width: 16px;
        color: #dc3545;
        transition: all 0.3s ease;
    }

    .requirement.met[b-gc7cs5u7qd] {
        color: #059669;
    }

        .requirement.met i[b-gc7cs5u7qd] {
            color: #059669;
        }

/* Button Styling - Konsistent */
.btn-primary[b-gc7cs5u7qd] {
    background: linear-gradient(135deg, #0066ff, #0052cc);
    border: none;
    padding: 0.875rem 1.5rem;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 10px;
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

    .btn-primary:hover:not(:disabled)[b-gc7cs5u7qd] {
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(0, 102, 255, 0.3);
    }

    .btn-primary:active[b-gc7cs5u7qd] {
        transform: scale(0.98);
    }

    .btn-primary:disabled[b-gc7cs5u7qd] {
        background: #9ca3af;
        transform: none;
        box-shadow: none;
        cursor: not-allowed;
    }

.btn-outline-secondary[b-gc7cs5u7qd] {
    border: 2px solid #e5e7eb;
    color: #6b7280;
    background: white;
    font-weight: 500;
    border-radius: 10px;
    padding: 0.75rem 1.5rem;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    text-decoration: none;
}

    .btn-outline-secondary:hover[b-gc7cs5u7qd] {
        background: #f8f9fa;
        border-color: #0066ff;
        color: #0066ff;
        transform: translateY(-1px);
        text-decoration: none;
    }

/* Alert Styling */
.alert[b-gc7cs5u7qd] {
    padding: 1rem 1.25rem;
    border-radius: 10px;
    margin-bottom: 1.5rem;
    font-weight: 500;
    border: none;
    animation: slideDown-b-gc7cs5u7qd 0.3s ease-out;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

@keyframes slideDown-b-gc7cs5u7qd {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.alert-danger[b-gc7cs5u7qd] {
    background: linear-gradient(135deg, #fef2f2, #fee2e2);
    color: #991b1b;
    border-left: 4px solid #ef4444;
}

.alert-success[b-gc7cs5u7qd] {
    background: linear-gradient(135deg, #f0fdf4, #dcfce7);
    color: #166534;
    border-left: 4px solid #22c55e;
}

/* Navigation Section */
.navigation-section[b-gc7cs5u7qd] {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid #e9ecef;
    text-align: center;
}

/* Loading Spinner */
.spinner-border-sm[b-gc7cs5u7qd] {
    width: 1rem;
    height: 1rem;
    border: 2px solid white;
    border-top: 2px solid transparent;
    border-radius: 50%;
    animation: spin-b-gc7cs5u7qd 1s linear infinite;
}

@keyframes spin-b-gc7cs5u7qd {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Validation Errors */
.text-danger[b-gc7cs5u7qd] {
    font-size: 0.85rem;
    font-weight: 500;
    margin-top: 0.25rem;
    color: #dc3545;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

    .text-danger[b-gc7cs5u7qd]::before {
        content: '⚠';
        font-size: 0.8rem;
    }

/* Responsive Design */
@media (max-width: 768px) {
    .setpassword-container[b-gc7cs5u7qd] {
        padding: 1rem;
        align-items: flex-start;
        padding-top: 2rem;
    }

    .setpassword-card[b-gc7cs5u7qd] {
        padding: 2rem 1.5rem;
        max-width: 100%;
    }

    .page-title[b-gc7cs5u7qd] {
        font-size: 1.75rem;
    }

    .icon-wrapper[b-gc7cs5u7qd] {
        width: 70px;
        height: 70px;
        margin-bottom: 1rem;
    }

        .icon-wrapper i[b-gc7cs5u7qd] {
            font-size: 1.75rem;
        }
}

@media (max-width: 480px) {
    .setpassword-card[b-gc7cs5u7qd] {
        padding: 1.5rem 1rem;
    }

    .page-title[b-gc7cs5u7qd] {
        font-size: 1.5rem;
    }

    .icon-wrapper[b-gc7cs5u7qd] {
        width: 60px;
        height: 60px;
    }

        .icon-wrapper i[b-gc7cs5u7qd] {
            font-size: 1.5rem;
        }

    .info-section[b-gc7cs5u7qd] {
        padding: 1rem;
    }

    .info-item[b-gc7cs5u7qd] {
        flex-direction: column;
        gap: 0.5rem;
    }
}

/* Focus Styles für Accessibility */
.btn:focus[b-gc7cs5u7qd],
.form-control:focus[b-gc7cs5u7qd] {
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 102, 255, 0.25);
}

/* Hover-Effekte für bessere Interaktivität */
.setpassword-card[b-gc7cs5u7qd] {
    transition: box-shadow 0.3s ease;
}

    .setpassword-card:hover[b-gc7cs5u7qd] {
        box-shadow: 0 15px 50px rgba(0, 0, 0, 0.15);
    }

/* Smooth Transitions für alle interaktiven Elemente */
*[b-gc7cs5u7qd] {
    transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

/* Button Press Animation */
.btn:active[b-gc7cs5u7qd] {
    transform: scale(0.98);
}

/* Form Group Spacing */
.form-floating[b-gc7cs5u7qd] {
    margin-bottom: 0;
}

/* Success State Animation */
.alert-success[b-gc7cs5u7qd] {
    animation: successPulse-b-gc7cs5u7qd 0.6s ease-out;
}

@keyframes successPulse-b-gc7cs5u7qd {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4);
    }

    50% {
        transform: scale(1.02);
        box-shadow: 0 0 0 10px rgba(34, 197, 94, 0.1);
    }

    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
    }
}
/* _content/BotomixNew/Components/Account/Pages/Register.razor.rz.scp.css */
/* Sauberes, funktionierendes Registrierungs-Design mit Google OAuth - Single Page */
.register-container[b-g5mj9xjmyg] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 85vh;
    background: linear-gradient(135deg, #f0f7ff 0%, #e6f3ff 50%, #f8f9fa 100%);
    padding: 2rem;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.register-card[b-g5mj9xjmyg] {
    width: 100%;
    max-width: 550px;
    background: white;
    padding: 2.5rem;
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    border: 1px solid #e9ecef;
    position: relative;
    overflow: hidden;
}

    /* Subtiler Glanz-Effekt */
    .register-card[b-g5mj9xjmyg]::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(0, 102, 255, 0.03), transparent);
        transition: left 0.8s ease;
        z-index: 1;
    }

    .register-card:hover[b-g5mj9xjmyg]::before {
        left: 100%;
    }

    .register-card > *[b-g5mj9xjmyg] {
        position: relative;
        z-index: 2;
    }

.register-header[b-g5mj9xjmyg] {
    text-align: center;
    margin-bottom: 2rem;
}

.brand-name[b-g5mj9xjmyg] {
    font-size: 2.25rem;
    font-weight: 700;
    color: #111827;
    margin-bottom: 0.5rem;
}

.brand-subtitle[b-g5mj9xjmyg] {
    font-size: 1.1rem;
    color: #6b7280;
}

/* Google Sign-Up Section */
.social-register-section[b-g5mj9xjmyg] {
    margin-bottom: 1.5rem;
}

.btn-google[b-g5mj9xjmyg] {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 0.875rem 1.5rem;
    background: white;
    border: 2px solid #e5e7eb;
    border-radius: 10px;
    font-size: 1rem;
    font-weight: 600;
    color: #374151;
    transition: all 0.2s ease;
    cursor: pointer;
    position: relative;
}

    .btn-google:hover[b-g5mj9xjmyg] {
        background: #f9fafb;
        border-color: #cbd5e1;
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
        color: #111827;
    }

    .btn-google:active[b-g5mj9xjmyg] {
        transform: scale(0.98);
        box-shadow: none;
    }

    .btn-google:disabled[b-g5mj9xjmyg] {
        background: #f8f9fa;
        border-color: #e9ecef;
        color: #9ca3af;
        cursor: not-allowed;
        transform: none;
        box-shadow: none;
    }

.google-icon[b-g5mj9xjmyg] {
    flex-shrink: 0;
}

/* Social Login Info */
.social-login-info[b-g5mj9xjmyg] {
    text-align: center;
    font-size: 0.85rem;
    color: #6b7280;
    margin-top: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
}

/* Divider Section */
.divider-section[b-g5mj9xjmyg] {
    display: flex;
    align-items: center;
    margin: 2rem 0 1.5rem 0;
    position: relative;
}

.divider-line[b-g5mj9xjmyg] {
    flex: 1;
    height: 1px;
    background: #e5e7eb;
}

.divider-text[b-g5mj9xjmyg] {
    padding: 0 1rem;
    color: #9ca3af;
    font-size: 0.9rem;
    font-weight: 500;
    background: white;
    z-index: 1;
}

/* Registration Success */
.registration-success[b-g5mj9xjmyg] {
    text-align: center;
    padding: 2rem 0;
    animation: fadeInUp-b-g5mj9xjmyg 0.5s ease-out;
}

.success-icon[b-g5mj9xjmyg] {
    font-size: 4rem;
    color: #22c55e;
    margin-bottom: 1rem;
}

.registration-success h3[b-g5mj9xjmyg] {
    font-size: 1.5rem;
    color: #111827;
    margin-bottom: 0.75rem;
}

.registration-success p[b-g5mj9xjmyg] {
    color: #6b7280;
    margin-bottom: 1.5rem;
}

/* Form Section */
.form-section[b-g5mj9xjmyg] {
    animation: fadeInUp-b-g5mj9xjmyg 0.4s ease-out;
}

@keyframes fadeInUp-b-g5mj9xjmyg {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.form-control[b-g5mj9xjmyg] {
    height: 58px;
    border-radius: 10px;
    border: 2px solid #e5e7eb;
    transition: all 0.2s ease;
    font-size: 1rem;
}

    .form-control:focus[b-g5mj9xjmyg] {
        border-color: #0066ff;
        box-shadow: 0 0 0 4px rgba(0, 102, 255, 0.1);
        transform: translateY(-1px);
    }

    .form-control:hover:not(:focus)[b-g5mj9xjmyg] {
        border-color: #cbd5e1;
    }

.form-floating > label[b-g5mj9xjmyg] {
    color: #6b7280;
    font-weight: 500;
}

.form-floating > .form-control:focus ~ label[b-g5mj9xjmyg],
.form-floating > .form-control:not(:placeholder-shown) ~ label[b-g5mj9xjmyg] {
    color: #0066ff;
    font-weight: 600;
}

.form-text[b-g5mj9xjmyg] {
    font-size: 0.85rem;
    color: #6b7280;
    margin-top: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.form-check[b-g5mj9xjmyg] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem;
    background: #f8f9fa;
    border-radius: 10px;
    border: 1px solid #e9ecef;
}

.form-check-label[b-g5mj9xjmyg] {
    font-size: 0.9rem;
    color: #374151;
    cursor: pointer;
    line-height: 1.4;
    margin: 0;
}

    .form-check-label a[b-g5mj9xjmyg] {
        color: #0066ff;
        text-decoration: none;
        font-weight: 500;
        transition: all 0.2s ease;
    }

        .form-check-label a:hover[b-g5mj9xjmyg] {
            text-decoration: underline;
            color: #0052cc;
        }

/* Pflichtfeld-Sternchen */
.required-asterisk[b-g5mj9xjmyg] {
    color: #dc3545;
    font-weight: 700;
    font-size: 1rem;
    margin-right: 0.25rem;
}

.form-check-input[b-g5mj9xjmyg] {
    width: 1.125rem;
    height: 1.125rem;
    margin: 0;
    accent-color: #0066ff;
    flex-shrink: 0;
}

    .form-check-input:checked[b-g5mj9xjmyg] {
        background-color: #0066ff;
        border-color: #0066ff;
    }

    .form-check-input:hover[b-g5mj9xjmyg] {
        border-color: #0066ff;
    }

/* Buttons */
.btn-primary[b-g5mj9xjmyg] {
    background: linear-gradient(135deg, #0066ff, #0052cc);
    border: none;
    padding: 1rem 1.5rem;
    font-size: 1.05rem;
    font-weight: 600;
    border-radius: 10px;
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

    .btn-primary:hover:not(:disabled)[b-g5mj9xjmyg] {
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(0, 102, 255, 0.3);
        color: white;
    }

    .btn-primary:active[b-g5mj9xjmyg] {
        transform: scale(0.98);
    }

    .btn-primary:disabled[b-g5mj9xjmyg] {
        background: #9ca3af;
        transform: none;
        box-shadow: none;
        cursor: not-allowed;
    }

.btn-outline-secondary[b-g5mj9xjmyg] {
    border: 2px solid #e5e7eb;
    color: #6b7280;
    background: white;
    font-weight: 500;
    border-radius: 10px;
    transition: all 0.2s ease;
}

    .btn-outline-secondary:hover[b-g5mj9xjmyg] {
        background: #f8f9fa;
        border-color: #0066ff;
        color: #0066ff;
        transform: translateY(-1px);
    }

/* Alert Styles */
.alert[b-g5mj9xjmyg] {
    padding: 1rem 1.25rem;
    border-radius: 10px;
    margin-bottom: 1.5rem;
    font-weight: 500;
    border: none;
    animation: slideDown-b-g5mj9xjmyg 0.3s ease-out;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

@keyframes slideDown-b-g5mj9xjmyg {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.alert-danger[b-g5mj9xjmyg] {
    background: linear-gradient(135deg, #fef2f2, #fee2e2);
    color: #991b1b;
    border-left: 4px solid #ef4444;
}

.alert-success[b-g5mj9xjmyg] {
    background: linear-gradient(135deg, #f0fdf4, #dcfce7);
    color: #166534;
    border-left: 4px solid #22c55e;
}

/* Links Section */
.links-section[b-g5mj9xjmyg] {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid #e9ecef;
    text-align: center;
    font-size: 0.9rem;
    color: #6b7280;
}

    .links-section a[b-g5mj9xjmyg] {
        color: #0066ff;
        text-decoration: none;
        font-weight: 600;
        transition: all 0.2s ease;
    }

        .links-section a:hover[b-g5mj9xjmyg] {
            text-decoration: underline;
            color: #0052cc;
        }

/* Help Section */
.help-section[b-g5mj9xjmyg] {
    margin-top: 1.5rem;
    text-align: center;
}

.help-text[b-g5mj9xjmyg] {
    font-size: 0.85rem;
    color: #6b7280;
    margin: 0;
}

.support-link[b-g5mj9xjmyg] {
    color: #0066ff;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.2s ease;
}

    .support-link:hover[b-g5mj9xjmyg] {
        text-decoration: underline;
        color: #0052cc;
    }

/* Loading Spinner */
.spinner-border-sm[b-g5mj9xjmyg] {
    width: 1rem;
    height: 1rem;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin-b-g5mj9xjmyg 1s linear infinite;
}

@keyframes spin-b-g5mj9xjmyg {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Validation Errors */
.text-danger[b-g5mj9xjmyg] {
    font-size: 0.85rem;
    font-weight: 500;
    margin-top: 0.25rem;
    color: #dc3545;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

    .text-danger[b-g5mj9xjmyg]::before {
        content: '⚠';
        font-size: 0.8rem;
    }

/* Responsive Design */
@media (max-width: 768px) {
    .register-container[b-g5mj9xjmyg] {
        padding: 1rem;
        align-items: flex-start;
        padding-top: 2rem;
    }

    .register-card[b-g5mj9xjmyg] {
        padding: 2rem 1.5rem;
        max-width: 100%;
    }

    .brand-name[b-g5mj9xjmyg] {
        font-size: 2rem;
    }

    .btn-google[b-g5mj9xjmyg] {
        font-size: 0.95rem;
        padding: 0.75rem 1.25rem;
    }
}

@media (max-width: 480px) {
    .register-card[b-g5mj9xjmyg] {
        padding: 1.5rem 1rem;
    }

    .brand-name[b-g5mj9xjmyg] {
        font-size: 1.75rem;
    }

    .btn-google[b-g5mj9xjmyg] {
        font-size: 0.9rem;
        padding: 0.7rem 1rem;
        gap: 0.5rem;
    }

    .google-icon[b-g5mj9xjmyg] {
        width: 18px;
        height: 18px;
    }

    .form-check[b-g5mj9xjmyg] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .form-check-input[b-g5mj9xjmyg] {
        align-self: flex-start;
    }
}

/* Focus Styles für Accessibility */
.btn:focus[b-g5mj9xjmyg],
.form-control:focus[b-g5mj9xjmyg],
.form-check-input:focus[b-g5mj9xjmyg] {
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 102, 255, 0.25);
}

/* Smooth Transitions für alle interaktiven Elemente */
*[b-g5mj9xjmyg] {
    transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

/* Form Group Spacing - Wichtig für Single Page Layout */
.form-floating[b-g5mj9xjmyg] {
    margin-bottom: 0;
}

.row[b-g5mj9xjmyg] {
    margin-bottom: 0;
}

    .row .col-md-6 .form-floating[b-g5mj9xjmyg] {
        margin-bottom: 0;
    }

/* Card Shadow Animation */
.register-card[b-g5mj9xjmyg] {
    transition: box-shadow 0.3s ease;
}

    .register-card:hover[b-g5mj9xjmyg] {
        box-shadow: 0 15px 50px rgba(0, 0, 0, 0.15);
    }

/* Print Styles */
@media print {
    .register-container[b-g5mj9xjmyg] {
        padding: 0;
        background: white;
    }

    .register-card[b-g5mj9xjmyg] {
        box-shadow: none;
        border: 1px solid #ddd;
    }

    .btn[b-g5mj9xjmyg] {
        display: none;
    }
}

/* Motion Reduction */
@media (prefers-reduced-motion: reduce) {
    *[b-g5mj9xjmyg], *[b-g5mj9xjmyg]::before, *[b-g5mj9xjmyg]::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}
/* _content/BotomixNew/Components/Account/Pages/ResetPassword.razor.rz.scp.css */
/* Modernes ResetPassword Design - konsistent mit Botomix Design-System */
.reset-password-container[b-m1uusf8vts] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 85vh;
    background: linear-gradient(135deg, #f0f7ff 0%, #e6f3ff 50%, #f8f9fa 100%);
    padding: 2rem;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.reset-password-card[b-m1uusf8vts] {
    width: 100%;
    max-width: 520px;
    background: white;
    padding: 2.5rem;
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    border: 1px solid #e9ecef;
    position: relative;
    overflow: hidden;
    animation: slideUp-b-m1uusf8vts 0.6s ease-out;
}

@keyframes slideUp-b-m1uusf8vts {
    from {
        opacity: 0;
        transform: translateY(30px) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Subtiler Glanz-Effekt */
.reset-password-card[b-m1uusf8vts]::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(0, 102, 255, 0.03), transparent);
    transition: left 0.8s ease;
    z-index: 1;
}

.reset-password-card:hover[b-m1uusf8vts]::before {
    left: 100%;
}

.reset-password-card > *[b-m1uusf8vts] {
    position: relative;
    z-index: 2;
}

/* Header Styling */
.reset-password-header[b-m1uusf8vts] {
    text-align: center;
    margin-bottom: 2rem;
}

.brand-name[b-m1uusf8vts] {
    font-size: 2.25rem;
    font-weight: 700;
    color: #111827;
    margin-bottom: 0.5rem;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.brand-subtitle[b-m1uusf8vts] {
    font-size: 1.1rem;
    color: #6b7280;
    font-weight: 500;
}

/* Info Section - Success State */
.info-section[b-m1uusf8vts] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    background: linear-gradient(135deg, #f0f7ff, #e6f3ff);
    padding: 1.5rem;
    border-radius: 12px;
    margin-bottom: 2rem;
    border: 1px solid #e1f0ff;
    position: relative;
    animation: fadeInUp-b-m1uusf8vts 0.6s ease-out 0.2s both;
}

    .info-section[b-m1uusf8vts]::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 4px;
        background: linear-gradient(180deg, #0066ff, #0052cc);
        border-radius: 2px;
    }

.info-icon[b-m1uusf8vts] {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #0066ff, #0052cc);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.2rem;
    box-shadow: 0 4px 12px rgba(0, 102, 255, 0.3);
    animation: pulse-b-m1uusf8vts 2s infinite;
}

@keyframes pulse-b-m1uusf8vts {
    0%, 100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }
}

.info-content h4[b-m1uusf8vts] {
    margin: 0 0 0.5rem 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: #1f2937;
}

.info-content p[b-m1uusf8vts] {
    margin: 0;
    color: #6b7280;
    line-height: 1.5;
}

/* Error Section */
.error-section[b-m1uusf8vts] {
    background: linear-gradient(135deg, #fef2f2, #fee2e2);
    padding: 2rem;
    border-radius: 12px;
    border-left: 4px solid #dc3545;
    margin-bottom: 2rem;
    animation: fadeInUp-b-m1uusf8vts 0.6s ease-out 0.2s both;
}

.error-icon[b-m1uusf8vts] {
    text-align: center;
    font-size: 3rem;
    color: #dc3545;
    margin-bottom: 1.5rem;
    animation: errorShake-b-m1uusf8vts 0.8s ease-out;
}

@keyframes errorShake-b-m1uusf8vts {
    0%, 100% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-5px);
    }

    75% {
        transform: translateX(5px);
    }
}

.error-content h3[b-m1uusf8vts] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #991b1b;
    margin-bottom: 1rem;
    text-align: center;
}

.error-content p[b-m1uusf8vts] {
    color: #7f1d1d;
    line-height: 1.6;
    margin-bottom: 1.5rem;
    text-align: center;
}

.error-reasons[b-m1uusf8vts] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.reason-item[b-m1uusf8vts] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.95rem;
    color: #7f1d1d;
    font-weight: 500;
    padding: 0.5rem;
    background: rgba(185, 28, 28, 0.05);
    border-radius: 8px;
}

    .reason-item i[b-m1uusf8vts] {
        color: #dc3545;
        width: 20px;
        text-align: center;
    }

/* Form Styling */
.form-control[b-m1uusf8vts] {
    height: 58px;
    border-radius: 10px;
    border: 2px solid #e5e7eb;
    transition: all 0.2s ease;
    font-size: 1rem;
    background: white;
}

    .form-control:focus[b-m1uusf8vts] {
        border-color: #0066ff;
        box-shadow: 0 0 0 4px rgba(0, 102, 255, 0.1);
        transform: translateY(-1px);
    }

    .form-control:hover:not(:focus)[b-m1uusf8vts] {
        border-color: #cbd5e1;
    }

    .form-control:disabled[b-m1uusf8vts] {
        background-color: #f8f9fa;
        border-color: #e9ecef;
        color: #6c757d;
    }

.form-floating > label[b-m1uusf8vts] {
    color: #6b7280;
    font-weight: 500;
}

.form-floating > .form-control:focus ~ label[b-m1uusf8vts],
.form-floating > .form-control:not(:placeholder-shown) ~ label[b-m1uusf8vts] {
    color: #0066ff;
    font-weight: 600;
}

.form-text[b-m1uusf8vts] {
    font-size: 0.85rem;
    color: #6b7280;
    margin-top: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

/* Action Section */
.action-section[b-m1uusf8vts] {
    animation: fadeInUp-b-m1uusf8vts 0.6s ease-out 0.4s both;
}

/* Button Styling */
.btn[b-m1uusf8vts] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.875rem 1.5rem;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 10px;
    text-decoration: none;
    border: 2px solid transparent;
    transition: all 0.2s ease;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.btn-lg[b-m1uusf8vts] {
    padding: 1rem 2rem;
    font-size: 1.1rem;
}

.btn-primary[b-m1uusf8vts] {
    background: linear-gradient(135deg, #0066ff, #0052cc);
    color: white;
    border: none;
}

    .btn-primary:hover:not(:disabled)[b-m1uusf8vts] {
        color: white;
        text-decoration: none;
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(0, 102, 255, 0.4);
    }

    .btn-primary:disabled[b-m1uusf8vts] {
        background: #9ca3af;
        transform: none;
        box-shadow: none;
        cursor: not-allowed;
    }

.btn-outline-secondary[b-m1uusf8vts] {
    background: white;
    color: #6b7280;
    border-color: #d1d5db;
}

    .btn-outline-secondary:hover[b-m1uusf8vts] {
        background: #f9fafb;
        color: #374151;
        border-color: #9ca3af;
        text-decoration: none;
        transform: translateY(-1px);
    }

.btn:active[b-m1uusf8vts] {
    transform: scale(0.98);
}

/* Security Notice */
.security-notice[b-m1uusf8vts] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    background: linear-gradient(135deg, #fef7e7, #fef3e2);
    padding: 1rem 1.25rem;
    border-radius: 10px;
    margin-bottom: 1.5rem;
    border: 1px solid #fde68a;
    font-size: 0.9rem;
    animation: fadeInUp-b-m1uusf8vts 0.6s ease-out 0.6s both;
}

.security-icon[b-m1uusf8vts] {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, #f59e0b, #d97706);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 0.9rem;
}

.security-text[b-m1uusf8vts] {
    color: #92400e;
    line-height: 1.4;
}

    .security-text strong[b-m1uusf8vts] {
        color: #78350f;
    }

/* Password Tips */
.password-tips[b-m1uusf8vts] {
    background: linear-gradient(135deg, #f0fdf4, #dcfce7);
    padding: 1.5rem;
    border-radius: 12px;
    border: 1px solid #bbf7d0;
    margin-bottom: 2rem;
    animation: fadeInUp-b-m1uusf8vts 0.6s ease-out 0.8s both;
}

    .password-tips h5[b-m1uusf8vts] {
        font-size: 1rem;
        font-weight: 600;
        color: #166534;
        margin-bottom: 1rem;
        display: flex;
        align-items: center;
    }

.tips-grid[b-m1uusf8vts] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.75rem;
}

.tip-item[b-m1uusf8vts] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    color: #059669;
    font-weight: 500;
}

    .tip-item i[b-m1uusf8vts] {
        color: #22c55e;
        font-size: 0.8rem;
    }

/* Alert Styling */
.alert[b-m1uusf8vts] {
    padding: 1rem 1.25rem;
    border-radius: 10px;
    margin-bottom: 1.5rem;
    font-weight: 500;
    border: none;
    animation: slideDown-b-m1uusf8vts 0.3s ease-out;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

@keyframes slideDown-b-m1uusf8vts {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.alert-danger[b-m1uusf8vts] {
    background: linear-gradient(135deg, #fef2f2, #fee2e2);
    color: #991b1b;
    border-left: 4px solid #ef4444;
}

/* Links Section */
.links-section[b-m1uusf8vts] {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid #e9ecef;
    text-align: center;
    animation: fadeInUp-b-m1uusf8vts 0.6s ease-out 1s both;
}

.back-link[b-m1uusf8vts] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: #0066ff;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    transition: all 0.2s ease;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    margin-bottom: 1rem;
}

    .back-link:hover[b-m1uusf8vts] {
        color: #0052cc;
        background: rgba(0, 102, 255, 0.05);
        text-decoration: none;
        transform: translateX(-2px);
    }

.help-text[b-m1uusf8vts] {
    font-size: 0.9rem;
    color: #6b7280;
    margin-top: 1rem;
}

.support-link[b-m1uusf8vts] {
    color: #0066ff;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.2s ease;
}

    .support-link:hover[b-m1uusf8vts] {
        color: #0052cc;
        text-decoration: underline;
    }

/* Loading Spinner */
.spinner-border-sm[b-m1uusf8vts] {
    width: 1rem;
    height: 1rem;
    animation: spin-b-m1uusf8vts 1s linear infinite;
}

@keyframes spin-b-m1uusf8vts {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Validation Errors */
.text-danger[b-m1uusf8vts] {
    font-size: 0.85rem;
    font-weight: 500;
    margin-top: 0.25rem;
    color: #dc3545;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

    .text-danger[b-m1uusf8vts]::before {
        content: '⚠';
        font-size: 0.8rem;
    }

/* Animation Delays */
@keyframes fadeInUp-b-m1uusf8vts {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive Design */
@media (max-width: 768px) {
    .reset-password-container[b-m1uusf8vts] {
        padding: 1rem;
        align-items: flex-start;
        padding-top: 2rem;
    }

    .reset-password-card[b-m1uusf8vts] {
        padding: 2rem 1.5rem;
        max-width: 100%;
    }

    .brand-name[b-m1uusf8vts] {
        font-size: 2rem;
    }

    .info-section[b-m1uusf8vts],
    .error-section[b-m1uusf8vts] {
        padding: 1.25rem;
        margin-bottom: 1.5rem;
    }

    .info-icon[b-m1uusf8vts] {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }

    .tips-grid[b-m1uusf8vts] {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }

    .error-icon[b-m1uusf8vts] {
        font-size: 2.5rem;
        margin-bottom: 1rem;
    }
}

@media (max-width: 480px) {
    .reset-password-card[b-m1uusf8vts] {
        padding: 1.5rem 1rem;
    }

    .brand-name[b-m1uusf8vts] {
        font-size: 1.75rem;
    }

    .info-section[b-m1uusf8vts],
    .error-section[b-m1uusf8vts] {
        flex-direction: column;
        text-align: center;
        gap: 1rem;
    }

    .info-icon[b-m1uusf8vts],
    .security-icon[b-m1uusf8vts] {
        align-self: center;
    }

    .btn-lg[b-m1uusf8vts] {
        padding: 0.875rem 1.5rem;
        font-size: 1rem;
    }

    .password-tips[b-m1uusf8vts] {
        padding: 1rem;
    }

    .error-reasons[b-m1uusf8vts] {
        gap: 0.5rem;
    }

    .reason-item[b-m1uusf8vts] {
        padding: 0.75rem;
        flex-direction: column;
        text-align: center;
        gap: 0.5rem;
    }

        .reason-item i[b-m1uusf8vts] {
            font-size: 1.2rem;
        }
}

/* Focus States für Accessibility */
.btn:focus[b-m1uusf8vts],
.form-control:focus[b-m1uusf8vts] {
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 102, 255, 0.25);
}

/* Hover-Effekte für bessere Interaktivität */
.reset-password-card[b-m1uusf8vts] {
    transition: box-shadow 0.3s ease;
}

    .reset-password-card:hover[b-m1uusf8vts] {
        box-shadow: 0 15px 50px rgba(0, 0, 0, 0.15);
    }

/* Smooth Transitions für alle interaktiven Elemente */
*[b-m1uusf8vts] {
    transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

/* Print Styles */
@media print {
    .reset-password-container[b-m1uusf8vts] {
        padding: 0;
        background: white;
    }

    .reset-password-card[b-m1uusf8vts] {
        box-shadow: none;
        border: 1px solid #ddd;
    }

    .btn[b-m1uusf8vts] {
        display: none;
    }

    .info-icon[b-m1uusf8vts],
    .security-icon[b-m1uusf8vts],
    .error-icon[b-m1uusf8vts] {
        animation: none;
    }
}

/* Animation für bessere UX */
@media (prefers-reduced-motion: reduce) {
    *[b-m1uusf8vts],
    *[b-m1uusf8vts]::before,
    *[b-m1uusf8vts]::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}
/* _content/BotomixNew/Components/Account/Pages/ResetPasswordConfirmation.razor.rz.scp.css */
/* Modernes ResetPasswordConfirmation Design - konsistent mit Botomix Design-System */
.confirmation-container[b-uinmdjasap] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 85vh;
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 50%, #f8f9fa 100%);
    padding: 2rem;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.confirmation-card[b-uinmdjasap] {
    width: 100%;
    max-width: 600px;
    background: white;
    padding: 2.5rem;
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12);
    border: 1px solid #e9ecef;
    position: relative;
    overflow: hidden;
    animation: slideUpFade-b-uinmdjasap 0.8s ease-out;
}

@keyframes slideUpFade-b-uinmdjasap {
    0% {
        opacity: 0;
        transform: translateY(40px) scale(0.95);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Subtiler Erfolgs-Glanz */
.confirmation-card[b-uinmdjasap]::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(34, 197, 94, 0.03), transparent);
    transition: left 1s ease;
    z-index: 1;
}

.confirmation-card:hover[b-uinmdjasap]::before {
    left: 100%;
}

.confirmation-card > *[b-uinmdjasap] {
    position: relative;
    z-index: 2;
}

/* Header */
.confirmation-header[b-uinmdjasap] {
    text-align: center;
    margin-bottom: 2.5rem;
}

.brand-name[b-uinmdjasap] {
    font-size: 2.25rem;
    font-weight: 700;
    color: #111827;
    margin-bottom: 0.5rem;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.brand-subtitle[b-uinmdjasap] {
    font-size: 1.1rem;
    color: #059669;
    font-weight: 600;
}

/* Success Section */
.success-section[b-uinmdjasap] {
    text-align: center;
    margin-bottom: 2.5rem;
}

.success-animation[b-uinmdjasap] {
    position: relative;
    display: inline-block;
    margin-bottom: 2rem;
}

.success-icon[b-uinmdjasap] {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #22c55e, #16a34a);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 2rem;
    font-weight: bold;
    position: relative;
    z-index: 3;
    animation: successPop-b-uinmdjasap 0.6s ease-out 0.3s both;
    box-shadow: 0 8px 30px rgba(34, 197, 94, 0.4);
}

@keyframes successPop-b-uinmdjasap {
    0% {
        transform: scale(0);
        opacity: 0;
    }

    50% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.success-ripple[b-uinmdjasap] {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 80px;
    height: 80px;
    border: 3px solid rgba(34, 197, 94, 0.3);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    animation: ripple-b-uinmdjasap 2s infinite;
}

    .success-ripple:nth-child(3)[b-uinmdjasap] {
        animation-delay: 0.3s;
    }

    .success-ripple:nth-child(4)[b-uinmdjasap] {
        animation-delay: 0.6s;
    }

@keyframes ripple-b-uinmdjasap {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.8;
    }

    100% {
        transform: translate(-50%, -50%) scale(2.5);
        opacity: 0;
    }
}

.success-content h2[b-uinmdjasap] {
    font-size: 1.8rem;
    font-weight: 700;
    color: #059669;
    margin-bottom: 1rem;
    animation: fadeInUp-b-uinmdjasap 0.6s ease-out 0.5s both;
}

.success-message[b-uinmdjasap] {
    font-size: 1.1rem;
    color: #6b7280;
    line-height: 1.6;
    margin-bottom: 0;
    animation: fadeInUp-b-uinmdjasap 0.6s ease-out 0.7s both;
}

@keyframes fadeInUp-b-uinmdjasap {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Info Cards */
.info-cards[b-uinmdjasap] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 2.5rem;
    animation: fadeInUp-b-uinmdjasap 0.6s ease-out 0.9s both;
}

.info-card[b-uinmdjasap] {
    background: linear-gradient(135deg, #f8fafc, #f1f5f9);
    padding: 1.5rem;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    text-align: center;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

    .info-card:hover[b-uinmdjasap] {
        transform: translateY(-4px);
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    }

    .info-card[b-uinmdjasap]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: linear-gradient(90deg, #0066ff, #22c55e);
        transform: scaleX(0);
        transition: transform 0.3s ease;
    }

    .info-card:hover[b-uinmdjasap]::before {
        transform: scaleX(1);
    }

.card-icon[b-uinmdjasap] {
    width: 48px;
    height: 48px;
    margin: 0 auto 1rem;
    background: linear-gradient(135deg, #0066ff, #0052cc);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.2rem;
    transition: all 0.3s ease;
}

.security-card .card-icon[b-uinmdjasap] {
    background: linear-gradient(135deg, #f59e0b, #d97706);
}

.access-card .card-icon[b-uinmdjasap] {
    background: linear-gradient(135deg, #8b5cf6, #7c3aed);
}

.info-card:hover .card-icon[b-uinmdjasap] {
    transform: scale(1.1) rotate(5deg);
}

.card-content h4[b-uinmdjasap] {
    font-size: 1rem;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 0.5rem;
}

.card-content p[b-uinmdjasap] {
    font-size: 0.9rem;
    color: #6b7280;
    margin: 0;
    line-height: 1.4;
}

/* Action Section */
.action-section[b-uinmdjasap] {
    margin-bottom: 2rem;
    animation: fadeInUp-b-uinmdjasap 0.6s ease-out 1.1s both;
}

.btn-primary[b-uinmdjasap] {
    background: linear-gradient(135deg, #0066ff, #0052cc);
    border: none;
    padding: 1rem 2rem;
    font-size: 1.1rem;
    font-weight: 600;
    border-radius: 12px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    text-decoration: none;
    color: white;
}

    .btn-primary[b-uinmdjasap]::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
        transition: left 0.5s ease;
    }

    .btn-primary:hover[b-uinmdjasap] {
        transform: translateY(-3px);
        box-shadow: 0 10px 30px rgba(0, 102, 255, 0.4);
        color: white;
        text-decoration: none;
    }

        .btn-primary:hover[b-uinmdjasap]::before {
            left: 100%;
        }

    .btn-primary:active[b-uinmdjasap] {
        transform: scale(0.98);
    }

.secondary-actions[b-uinmdjasap] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-top: 1.5rem;
}

.secondary-link[b-uinmdjasap] {
    color: #6b7280;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    transition: all 0.2s ease;
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
}

    .secondary-link:hover[b-uinmdjasap] {
        color: #0066ff;
        background: rgba(0, 102, 255, 0.05);
        text-decoration: none;
    }

.separator[b-uinmdjasap] {
    color: #d1d5db;
    font-weight: bold;
}

/* Tips Section */
.tips-section[b-uinmdjasap] {
    background: linear-gradient(135deg, #fef7e7, #fef3e2);
    padding: 1.5rem;
    border-radius: 12px;
    border: 1px solid #fde68a;
    margin-bottom: 2rem;
    animation: fadeInUp-b-uinmdjasap 0.6s ease-out 1.3s both;
}

    .tips-section h5[b-uinmdjasap] {
        font-size: 1rem;
        font-weight: 600;
        color: #92400e;
        margin-bottom: 1.5rem;
        display: flex;
        align-items: center;
    }

.tips-grid[b-uinmdjasap] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
}

.tip-item[b-uinmdjasap] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    background: white;
    padding: 1rem;
    border-radius: 8px;
    border: 1px solid #fde68a;
    transition: all 0.2s ease;
}

    .tip-item:hover[b-uinmdjasap] {
        transform: translateY(-2px);
        box-shadow: 0 4px 15px rgba(245, 158, 11, 0.15);
    }

.tip-icon[b-uinmdjasap] {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, #f59e0b, #d97706);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 0.9rem;
}

.tip-content h6[b-uinmdjasap] {
    font-size: 0.9rem;
    font-weight: 600;
    color: #78350f;
    margin-bottom: 0.25rem;
}

.tip-content p[b-uinmdjasap] {
    font-size: 0.8rem;
    color: #92400e;
    margin: 0;
    line-height: 1.3;
}

/* Countdown Section */
.countdown-section[b-uinmdjasap] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(135deg, #eff6ff, #dbeafe);
    padding: 1rem 1.25rem;
    border-radius: 10px;
    border: 1px solid #93c5fd;
    margin-bottom: 2rem;
    animation: fadeInUp-b-uinmdjasap 0.6s ease-out 1.5s both;
}

.countdown-content[b-uinmdjasap] {
    display: flex;
    align-items: center;
    color: #1e40af;
    font-size: 0.9rem;
    font-weight: 500;
}

    .countdown-content strong[b-uinmdjasap] {
        color: #1d4ed8;
        font-weight: 700;
        font-size: 1rem;
    }

.btn-cancel-countdown[b-uinmdjasap] {
    background: transparent;
    border: 1px solid #93c5fd;
    color: #1e40af;
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 500;
    transition: all 0.2s ease;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

    .btn-cancel-countdown:hover[b-uinmdjasap] {
        background: #1e40af;
        color: white;
        transform: translateY(-1px);
    }

/* Additional Info */
.additional-info[b-uinmdjasap] {
    width: 100%;
    max-width: 600px;
    margin-top: 2rem;
}

.help-card[b-uinmdjasap] {
    background: white;
    padding: 1.5rem;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    border: 1px solid #e9ecef;
    animation: fadeInUp-b-uinmdjasap 0.6s ease-out 1.7s both;
}

.help-header[b-uinmdjasap] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

    .help-header i[b-uinmdjasap] {
        color: #0066ff;
        font-size: 1.2rem;
    }

    .help-header h5[b-uinmdjasap] {
        font-size: 1.1rem;
        font-weight: 600;
        color: #111827;
        margin: 0;
    }

.help-card p[b-uinmdjasap] {
    color: #6b7280;
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

.contact-methods[b-uinmdjasap] {
    display: flex;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap;
}

.contact-method[b-uinmdjasap] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    color: #374151;
    font-weight: 500;
}

    .contact-method i[b-uinmdjasap] {
        color: #0066ff;
        width: 16px;
        text-align: center;
    }

/* Responsive Design */
@media (max-width: 768px) {
    .confirmation-container[b-uinmdjasap] {
        padding: 1rem;
        align-items: flex-start;
        padding-top: 2rem;
    }

    .confirmation-card[b-uinmdjasap] {
        padding: 2rem 1.5rem;
        max-width: 100%;
    }

    .brand-name[b-uinmdjasap] {
        font-size: 2rem;
    }

    .success-icon[b-uinmdjasap] {
        width: 70px;
        height: 70px;
        font-size: 1.8rem;
    }

    .success-ripple[b-uinmdjasap] {
        width: 70px;
        height: 70px;
    }

    .info-cards[b-uinmdjasap] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .tips-grid[b-uinmdjasap] {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .secondary-actions[b-uinmdjasap] {
        flex-direction: column;
        gap: 0.5rem;
    }

    .separator[b-uinmdjasap] {
        display: none;
    }

    .countdown-section[b-uinmdjasap] {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }

    .contact-methods[b-uinmdjasap] {
        flex-direction: column;
        gap: 1rem;
    }
}

@media (max-width: 480px) {
    .confirmation-card[b-uinmdjasap] {
        padding: 1.5rem 1rem;
    }

    .brand-name[b-uinmdjasap] {
        font-size: 1.75rem;
    }

    .success-content h2[b-uinmdjasap] {
        font-size: 1.5rem;
    }

    .success-message[b-uinmdjasap] {
        font-size: 1rem;
    }

    .btn-primary[b-uinmdjasap] {
        padding: 0.875rem 1.5rem;
        font-size: 1rem;
    }

    .card-icon[b-uinmdjasap] {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }

    .tip-item[b-uinmdjasap] {
        padding: 0.75rem;
    }

    .tip-icon[b-uinmdjasap] {
        width: 28px;
        height: 28px;
        font-size: 0.8rem;
    }

    .help-card[b-uinmdjasap] {
        padding: 1.25rem;
    }

    .countdown-content[b-uinmdjasap] {
        font-size: 0.8rem;
    }
}

/* Focus Styles für Accessibility */
.btn:focus[b-uinmdjasap],
.secondary-link:focus[b-uinmdjasap],
.btn-cancel-countdown:focus[b-uinmdjasap] {
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 102, 255, 0.25);
}

/* Card Shadow Animation */
.confirmation-card[b-uinmdjasap] {
    transition: box-shadow 0.3s ease;
}

    .confirmation-card:hover[b-uinmdjasap] {
        box-shadow: 0 25px 70px rgba(0, 0, 0, 0.15);
    }

/* Smooth Transitions */
*[b-uinmdjasap] {
    transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

/* Print Styles */
@media print {
    .confirmation-container[b-uinmdjasap] {
        padding: 0;
        background: white;
    }

    .confirmation-card[b-uinmdjasap],
    .help-card[b-uinmdjasap] {
        box-shadow: none;
        border: 1px solid #ddd;
    }

    .btn[b-uinmdjasap],
    .countdown-section[b-uinmdjasap] {
        display: none;
    }

    .success-icon[b-uinmdjasap],
    .tip-icon[b-uinmdjasap],
    .card-icon[b-uinmdjasap] {
        animation: none;
    }
}

/* Animation für bessere UX */
@media (prefers-reduced-motion: reduce) {
    *[b-uinmdjasap],
    *[b-uinmdjasap]::before,
    *[b-uinmdjasap]::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Hover Effects für bessere Interaktivität */
.tip-item:hover .tip-icon[b-uinmdjasap] {
    transform: scale(1.1) rotate(5deg);
}

.contact-method:hover[b-uinmdjasap] {
    color: #0066ff;
}
/* _content/BotomixNew/Components/Account/Shared/ManageLayout.razor.rz.scp.css */
/* Modern Manage Layout Styling - B2B Design */

.manage-container[b-by4lg6uliu] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    min-height: 100vh;
}

/* Header Section */
.manage-header[b-by4lg6uliu] {
    text-align: center;
    margin-bottom: 2rem;
    padding: 2rem 0;
}

.manage-title[b-by4lg6uliu] {
    font-size: 2.5rem;
    font-weight: 700;
    color: #111827;
    margin-bottom: 0.5rem;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.manage-subtitle[b-by4lg6uliu] {
    font-size: 1.2rem;
    color: #6b7280;
    font-weight: 500;
    margin: 0;
}

/* Content Container */
.manage-content[b-by4lg6uliu] {
    background: white;
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    border: 1px solid #e9ecef;
    overflow: hidden;
    animation: slideUp-b-by4lg6uliu 0.6s ease-out;
}

@keyframes slideUp-b-by4lg6uliu {
    from {
        opacity: 0;
        transform: translateY(30px) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Layout Row */
.manage-layout-row[b-by4lg6uliu] {
    display: flex;
    min-height: 600px;
}

/* Sidebar Styling */
.manage-sidebar[b-by4lg6uliu] {
    flex: 0 0 300px;
    background: #f8f9fa;
    padding: 2rem 1.5rem;
    border-right: 1px solid #e9ecef;
}

/* Main Content Area */
.manage-main[b-by4lg6uliu] {
    flex: 1;
    padding: 2rem;
    background: white;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .manage-container[b-by4lg6uliu] {
        padding: 1.5rem;
    }

    .manage-sidebar[b-by4lg6uliu] {
        flex: 0 0 250px;
        padding: 1.5rem 1rem;
    }

    .manage-main[b-by4lg6uliu] {
        padding: 1.5rem;
    }
}

@media (max-width: 768px) {
    .manage-container[b-by4lg6uliu] {
        padding: 1rem;
    }

    .manage-title[b-by4lg6uliu] {
        font-size: 2rem;
    }

    .manage-layout-row[b-by4lg6uliu] {
        flex-direction: column;
    }

    .manage-sidebar[b-by4lg6uliu] {
        flex: none;
        border-right: none;
        border-bottom: 1px solid #e9ecef;
        padding: 1.5rem 1rem;
    }

    .manage-main[b-by4lg6uliu] {
        padding: 1.5rem 1rem;
    }
}

@media (max-width: 480px) {
    .manage-container[b-by4lg6uliu] {
        padding: 0.5rem;
    }

    .manage-title[b-by4lg6uliu] {
        font-size: 1.75rem;
    }

    .manage-sidebar[b-by4lg6uliu],
    .manage-main[b-by4lg6uliu] {
        padding: 1rem;
    }
}

/* Hover Effects */
.manage-content[b-by4lg6uliu] {
    transition: box-shadow 0.3s ease;
}

    .manage-content:hover[b-by4lg6uliu] {
        box-shadow: 0 15px 50px rgba(0, 0, 0, 0.15);
    }

    /* Professional Card Styling */
    .manage-content[b-by4lg6uliu]::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(0, 102, 255, 0.03), transparent);
        transition: left 0.8s ease;
        z-index: 1;
    }

    .manage-content:hover[b-by4lg6uliu]::before {
        left: 100%;
    }

    .manage-content > *[b-by4lg6uliu] {
        position: relative;
        z-index: 2;
    }
/* _content/BotomixNew/Components/Account/Shared/ManageNavMenu.razor.rz.scp.css */
/* Modern Navigation Menu Styling - B2B Design */

.manage-nav-container[b-29g1xoxhfm] {
    height: 100%;
}

/* Navigation Header */
.manage-nav-header[b-29g1xoxhfm] {
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #e9ecef;
}

.nav-title[b-29g1xoxhfm] {
    font-size: 1.25rem;
    font-weight: 600;
    color: #111827;
    margin-bottom: 0.25rem;
}

.nav-subtitle[b-29g1xoxhfm] {
    font-size: 0.875rem;
    color: #6b7280;
    margin: 0;
    font-weight: 500;
}

/* Navigation Menu */
.manage-nav-menu[b-29g1xoxhfm] {
    width: 100%;
}

.nav-list[b-29g1xoxhfm] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.nav-item[b-29g1xoxhfm] {
    position: relative;
}

/* Navigation Links */
.nav-link[b-29g1xoxhfm] {
    display: flex;
    align-items: center;
    padding: 0.875rem 1rem;
    color: #6b7280;
    text-decoration: none;
    border-radius: 10px;
    font-weight: 500;
    font-size: 0.9rem;
    transition: all 0.2s ease;
    border: 2px solid transparent;
    position: relative;
    overflow: hidden;
    background: white;
}

    .nav-link:hover[b-29g1xoxhfm] {
        background: rgba(0, 102, 255, 0.05);
        color: #0066ff;
        border-color: rgba(0, 102, 255, 0.1);
        transform: translateX(4px);
        text-decoration: none;
    }

    .nav-link.active[b-29g1xoxhfm] {
        background: linear-gradient(135deg, #0066ff, #0052cc);
        color: white;
        border-color: #0066ff;
        box-shadow: 0 4px 12px rgba(0, 102, 255, 0.25);
        transform: translateX(6px);
    }

/* Navigation Icons */
.nav-icon[b-29g1xoxhfm] {
    font-size: 1rem;
    width: 20px;
    text-align: center;
    margin-right: 0.75rem;
    flex-shrink: 0;
}

.nav-text[b-29g1xoxhfm] {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Active Link Indicator */
.nav-link.active[b-29g1xoxhfm]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 0 2px 2px 0;
}

/* Hover Effects */
.nav-link[b-29g1xoxhfm]::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transition: left 0.6s ease;
}

.nav-link:hover[b-29g1xoxhfm]::after {
    left: 100%;
}

/* Focus States für Accessibility */
.nav-link:focus[b-29g1xoxhfm] {
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 102, 255, 0.25);
}

/* Animation for Active State Changes */
.nav-link[b-29g1xoxhfm] {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Responsive Design */
@media (max-width: 768px) {
    .manage-nav-container[b-29g1xoxhfm] {
        padding-bottom: 1rem;
    }

    .manage-nav-header[b-29g1xoxhfm] {
        margin-bottom: 1.5rem;
        padding-bottom: 0.75rem;
    }

    .nav-title[b-29g1xoxhfm] {
        font-size: 1.1rem;
    }

    .nav-subtitle[b-29g1xoxhfm] {
        font-size: 0.8rem;
    }

    .nav-list[b-29g1xoxhfm] {
        gap: 0.25rem;
    }

    .nav-link[b-29g1xoxhfm] {
        padding: 0.75rem 0.875rem;
        font-size: 0.85rem;
        transform: none;
    }

        .nav-link:hover[b-29g1xoxhfm],
        .nav-link.active[b-29g1xoxhfm] {
            transform: none;
        }

    .nav-icon[b-29g1xoxhfm] {
        font-size: 0.9rem;
        margin-right: 0.5rem;
    }
}

@media (max-width: 480px) {
    .nav-link[b-29g1xoxhfm] {
        padding: 0.625rem 0.75rem;
        font-size: 0.8rem;
        border-radius: 8px;
    }

    .nav-icon[b-29g1xoxhfm] {
        font-size: 0.85rem;
        margin-right: 0.5rem;
    }
}

/* Loading Animation */
@keyframes pulse-b-29g1xoxhfm {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

.nav-link.loading[b-29g1xoxhfm] {
    animation: pulse-b-29g1xoxhfm 1.5s ease-in-out infinite;
}

/* Smooth Transitions */
*[b-29g1xoxhfm] {
    transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
/* _content/BotomixNew/Components/App.razor.rz.scp.css */
/* App.razor.css - Fixed for Top Navigation Layout */

html[b-yedvxlmw5e], body[b-yedvxlmw5e] {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    margin: 0;
    padding: 0;
    height: 100%;
    background: #f8f9fa;
}

/* Remove all sidebar styling - use top navigation instead */
.page[b-yedvxlmw5e] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.main[b-yedvxlmw5e] {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.content[b-yedvxlmw5e] {
    flex: 1;
    background: #f8f9fa;
}

/* Error UI */
#blazor-error-ui[b-yedvxlmw5e] {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-yedvxlmw5e] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* _content/BotomixNew/Components/Layout/MainLayout.razor.rz.scp.css */
/* Main Layout Structure */
.app-layout[b-xry1rckkr2] {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.main-content[b-xry1rckkr2] {
    flex: 1;
    background-color: #f5f7fa;
    min-height: 400px;
}

/* Footer Styles */
.app-footer[b-xry1rckkr2] {
    background: linear-gradient(135deg, #1f2937 0%, #111827 100%);
    color: white;
    margin-top: auto;
}

.footer-content[b-xry1rckkr2] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 3rem 2rem 2rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2.5rem;
}

.footer-section[b-xry1rckkr2] {
    display: flex;
    flex-direction: column;
}

.footer-heading[b-xry1rckkr2] {
    font-size: 1.1rem;
    font-weight: 700;
    color: white;
    margin-bottom: 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

    .footer-heading i[b-xry1rckkr2] {
        font-size: 1.2rem;
        color: #0066ff;
    }

.footer-description[b-xry1rckkr2] {
    color: #9ca3af;
    line-height: 1.6;
    font-size: 0.9rem;
}

.footer-links[b-xry1rckkr2] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

    .footer-links li[b-xry1rckkr2] {
        margin: 0;
    }

    .footer-links a[b-xry1rckkr2] {
        color: #d1d5db;
        text-decoration: none;
        display: flex;
        align-items: center;
        gap: 0.5rem;
        font-size: 0.9rem;
        transition: all 0.2s ease;
        padding: 0.25rem 0;
    }

        .footer-links a:hover[b-xry1rckkr2] {
            color: #0066ff;
            transform: translateX(4px);
        }

        .footer-links a i[b-xry1rckkr2] {
            font-size: 0.85rem;
            width: 16px;
            text-align: center;
            opacity: 0.7;
        }

/* Footer Bottom */
.footer-bottom[b-xry1rckkr2] {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin-top: 2rem;
}

.footer-bottom-content[b-xry1rckkr2] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 1.5rem 2rem;
    text-align: center;
}

    .footer-bottom-content p[b-xry1rckkr2] {
        margin: 0;
        color: #9ca3af;
        font-size: 0.875rem;
    }

/* Responsive Design */
@media (max-width: 768px) {
    .footer-content[b-xry1rckkr2] {
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
        padding: 2rem 1.5rem 1.5rem;
    }

    .footer-section:first-child[b-xry1rckkr2] {
        grid-column: 1 / -1;
        text-align: center;
    }
}

@media (max-width: 480px) {
    .footer-content[b-xry1rckkr2] {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        padding: 1.5rem 1rem 1rem;
    }

    .footer-section[b-xry1rckkr2] {
        text-align: center;
    }

    .footer-heading[b-xry1rckkr2] {
        justify-content: center;
    }

    .footer-links a[b-xry1rckkr2] {
        justify-content: center;
    }

    .footer-bottom-content[b-xry1rckkr2] {
        padding: 1rem;
    }
}
/* _content/BotomixNew/Components/Layout/NavMenu.razor.rz.scp.css */
/* Navigation mit Blauem Hintergrund */
.top-navigation[b-qipmgljlo7] {
    background: #0066ff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.nav-container[b-qipmgljlo7] {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    height: 75px;
    position: relative;
}

/* Brand mit Logo - CLEAN & MODERN */
.nav-brand[b-qipmgljlo7] {
    flex-shrink: 0;
}

    .nav-brand .brand-link[b-qipmgljlo7] {
        display: inline-flex;
        align-items: center;
        transition: all 0.2s ease;
        padding: 8px 10px;
        border-radius: 6px;
        margin: -8px 0;
    }

        .nav-brand .brand-link:hover[b-qipmgljlo7] {
            background-color: rgba(255, 255, 255, 0.08);
        }

/* Logo Styling - CLEAN OHNE SCHATTEN */
.brand-logo[b-qipmgljlo7] {
    height: 52px;
    width: auto;
    display: block;
    transition: all 0.2s ease;
}

    .brand-logo:hover[b-qipmgljlo7] {
        opacity: 0.95;
        transform: scale(1.02);
    }

/* Navigation Menu */
.nav-menu[b-qipmgljlo7] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
    justify-content: center;
    margin: 0 20px;
}

.nav-link[b-qipmgljlo7] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: white;
    text-decoration: none;
    padding: 10px 16px;
    border-radius: 8px;
    transition: all 0.2s ease;
    font-weight: 500;
    font-size: 15px;
    white-space: nowrap;
}

    .nav-link:hover[b-qipmgljlo7] {
        background-color: rgba(255, 255, 255, 0.15);
        color: white;
        transform: translateY(-1px);
        text-decoration: none;
    }

    .nav-link i[b-qipmgljlo7] {
        font-size: 16px;
    }

/* ========================================
   ROBOTER DROPDOWN IN NAVIGATION (CLICK-BASIERT)
   ======================================== */
.nav-dropdown[b-qipmgljlo7] {
    position: relative;
}

.dropdown-trigger[b-qipmgljlo7] {
    cursor: pointer;
    user-select: none;
}

.dropdown-arrow-small[b-qipmgljlo7] {
    font-size: 10px;
    margin-left: 2px;
    transition: transform 0.3s ease;
}

/* Active State - Dropdown ist ge�ffnet */
.nav-dropdown.active .dropdown-arrow-small[b-qipmgljlo7] {
    transform: rotate(180deg);
}

.nav-dropdown.active .dropdown-trigger[b-qipmgljlo7] {
    background-color: rgba(255, 255, 255, 0.2);
}

.nav-dropdown-menu[b-qipmgljlo7] {
    position: absolute;
    top: calc(100% + 12px);
    left: 50%;
    transform: translateX(-50%);
    background: white;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    border: 1px solid #e5e7eb;
    min-width: 220px;
    z-index: 9999;
    display: none;
}

/* Zeige Menu nur wenn active Klasse gesetzt ist */
.nav-dropdown.active .nav-dropdown-menu[b-qipmgljlo7] {
    display: block;
    animation: fadeInDown-b-qipmgljlo7 0.2s ease;
}

.nav-dropdown-menu[b-qipmgljlo7]::after {
    content: '';
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    width: 12px;
    height: 12px;
    background: white;
    border: 1px solid #e5e7eb;
    border-bottom: none;
    border-right: none;
}

.nav-dropdown-item[b-qipmgljlo7] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 18px;
    color: #374151;
    text-decoration: none;
    transition: all 0.2s ease;
    font-size: 14px;
    font-weight: 500;
}

    .nav-dropdown-item:first-child[b-qipmgljlo7] {
        border-radius: 10px 10px 0 0;
    }

    .nav-dropdown-item:last-child[b-qipmgljlo7] {
        border-radius: 0 0 10px 10px;
    }

    .nav-dropdown-item:hover[b-qipmgljlo7] {
        background-color: #f3f4f6;
        color: #0066ff;
        text-decoration: none;
    }

    .nav-dropdown-item i[b-qipmgljlo7] {
        font-size: 16px;
        width: 18px;
        text-align: center;
        color: #6b7280;
    }

    .nav-dropdown-item:hover i[b-qipmgljlo7] {
        color: #0066ff;
    }

/* ========================================
   USER MENU DROPDOWN (CLICK-BASIERT)
   ======================================== */
.user-menu[b-qipmgljlo7] {
    position: relative;
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.user-dropdown[b-qipmgljlo7] {
    position: relative;
}

.user-button[b-qipmgljlo7] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: white;
    padding: 10px 14px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-weight: 500;
    font-size: 14px;
    background: none;
    border: none;
    user-select: none;
}

    .user-button:hover[b-qipmgljlo7] {
        background-color: rgba(255, 255, 255, 0.15);
        transform: translateY(-1px);
    }

    .user-button i.fas.fa-user-circle[b-qipmgljlo7] {
        font-size: 20px;
    }

    .user-button i.fas.fa-user[b-qipmgljlo7] {
        font-size: 16px;
    }

/* Active State - Dropdown ist ge�ffnet */
.user-dropdown.active .user-button[b-qipmgljlo7] {
    background-color: rgba(255, 255, 255, 0.2);
}

.user-name[b-qipmgljlo7] {
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dropdown-arrow[b-qipmgljlo7] {
    font-size: 12px;
    transition: transform 0.3s ease;
}

.user-dropdown.active .dropdown-arrow[b-qipmgljlo7] {
    transform: rotate(180deg);
}

/* Dropdown Menu - CLICK-BASIERT */
.dropdown-menu[b-qipmgljlo7] {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: white;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    border: 1px solid #e5e7eb;
    min-width: 220px;
    z-index: 9999;
    display: none;
}

/* Zeige Menu nur wenn active Klasse gesetzt ist */
.user-dropdown.active .dropdown-menu[b-qipmgljlo7] {
    display: block;
    animation: fadeInDown-b-qipmgljlo7 0.2s ease;
}

.dropdown-menu[b-qipmgljlo7]::after {
    content: '';
    position: absolute;
    top: -6px;
    right: 20px;
    width: 12px;
    height: 12px;
    background: white;
    border: 1px solid #e5e7eb;
    border-bottom: none;
    border-right: none;
    transform: rotate(45deg);
}

.dropdown-item[b-qipmgljlo7] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 18px;
    color: #374151;
    text-decoration: none;
    transition: all 0.2s ease;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    font-family: inherit;
}

    .dropdown-item:first-child[b-qipmgljlo7] {
        border-radius: 10px 10px 0 0;
    }

    .dropdown-item:last-child[b-qipmgljlo7] {
        border-radius: 0 0 10px 10px;
    }

    .dropdown-item:hover[b-qipmgljlo7] {
        background-color: #f3f4f6;
        color: #0066ff;
        text-decoration: none;
    }

    .dropdown-item i[b-qipmgljlo7] {
        font-size: 16px;
        width: 18px;
        text-align: center;
        color: #6b7280;
    }

    .dropdown-item:hover i[b-qipmgljlo7] {
        color: #0066ff;
    }

.dropdown-divider[b-qipmgljlo7] {
    height: 1px;
    background-color: #e5e7eb;
    margin: 6px 0;
}

.logout-btn:hover[b-qipmgljlo7] {
    background-color: #fef2f2;
    color: #dc2626;
}

    .logout-btn:hover i[b-qipmgljlo7] {
        color: #dc2626;
    }

/* ========================================
   MOBILE MENU
   ======================================== */

/* Mobile Toggle Button */
.mobile-toggle[b-qipmgljlo7] {
    display: none;
    background: none;
    border: none;
    color: white;
    font-size: 24px;
    padding: 8px 12px;
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.2s ease;
}

    .mobile-toggle:hover[b-qipmgljlo7] {
        background-color: rgba(255, 255, 255, 0.15);
    }

/* Mobile Menu */
.mobile-menu[b-qipmgljlo7] {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #0052cc;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-20px);
    transition: all 0.3s ease;
    z-index: 999;
}

    .mobile-menu.show[b-qipmgljlo7] {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

.mobile-nav-links[b-qipmgljlo7] {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.mobile-nav-link[b-qipmgljlo7] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 24px;
    color: white;
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    transition: all 0.2s ease;
    font-weight: 500;
}

    .mobile-nav-link:hover[b-qipmgljlo7] {
        background-color: rgba(255, 255, 255, 0.1);
        color: white;
        text-decoration: none;
        padding-left: 28px;
    }

    .mobile-nav-link:last-child[b-qipmgljlo7] {
        border-bottom: none;
    }

    .mobile-nav-link i[b-qipmgljlo7] {
        font-size: 18px;
        width: 24px;
        text-align: center;
    }

/* Mobile Roboter Submenu */
.mobile-nav-group[b-qipmgljlo7] {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.mobile-nav-group-header[b-qipmgljlo7] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 24px;
    color: white;
    cursor: pointer;
    transition: all 0.2s ease;
    font-weight: 500;
}

    .mobile-nav-group-header:hover[b-qipmgljlo7] {
        background-color: rgba(255, 255, 255, 0.1);
    }

    .mobile-nav-group-header i:first-child[b-qipmgljlo7] {
        font-size: 18px;
        width: 24px;
        text-align: center;
    }

    .mobile-nav-group-header span[b-qipmgljlo7] {
        flex: 1;
    }

.mobile-submenu-arrow[b-qipmgljlo7] {
    font-size: 14px;
    transition: transform 0.3s ease;
    margin-left: auto;
}

    .mobile-submenu-arrow.rotated[b-qipmgljlo7] {
        transform: rotate(180deg);
    }

.mobile-nav-submenu[b-qipmgljlo7] {
    background-color: rgba(0, 0, 0, 0.15);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

    .mobile-nav-submenu.show[b-qipmgljlo7] {
        max-height: 300px;
    }

    .mobile-nav-submenu .mobile-nav-link[b-qipmgljlo7] {
        padding-left: 58px;
        font-size: 14px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    }

        .mobile-nav-submenu .mobile-nav-link:hover[b-qipmgljlo7] {
            padding-left: 62px;
        }

        .mobile-nav-submenu .mobile-nav-link:last-child[b-qipmgljlo7] {
            border-bottom: none;
        }

.mobile-user-section[b-qipmgljlo7] {
    padding: 20px 24px;
}

.mobile-user-info[b-qipmgljlo7] {
    display: flex;
    align-items: center;
    gap: 12px;
    color: white;
    font-weight: 600;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

    .mobile-user-info i[b-qipmgljlo7] {
        font-size: 24px;
    }

.mobile-user-link[b-qipmgljlo7] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    color: white;
    text-decoration: none;
    transition: all 0.2s ease;
    background: none;
    border: none;
    font-size: 15px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    width: 100%;
    text-align: left;
}

    .mobile-user-link:hover[b-qipmgljlo7] {
        color: #cbd5e0;
        text-decoration: none;
        padding-left: 8px;
    }

    .mobile-user-link i[b-qipmgljlo7] {
        font-size: 18px;
        width: 24px;
        text-align: center;
    }

/* ========================================
   RESPONSIVE DESIGN
   ======================================== */

@media (max-width: 1200px) {
    .nav-menu[b-qipmgljlo7] {
        gap: 4px;
        margin: 0 12px;
    }

    .nav-link[b-qipmgljlo7] {
        padding: 8px 12px;
        font-size: 14px;
    }

    .brand-logo[b-qipmgljlo7] {
        height: 48px;
    }
}

@media (max-width: 1024px) {
    .nav-link span[b-qipmgljlo7] {
        display: none;
    }

    .nav-link[b-qipmgljlo7] {
        padding: 10px;
    }

    .brand-logo[b-qipmgljlo7] {
        height: 46px;
    }

    .dropdown-trigger span[b-qipmgljlo7] {
        display: inline;
    }

    .nav-dropdown-menu[b-qipmgljlo7] {
        min-width: 200px;
    }
}

@media (max-width: 768px) {
    .nav-container[b-qipmgljlo7] {
        padding: 0 16px;
        height: 70px;
    }

    .mobile-toggle[b-qipmgljlo7] {
        display: block;
    }

    .user-menu[b-qipmgljlo7] {
        display: none;
    }

    .nav-menu[b-qipmgljlo7] {
        display: none;
    }

    .brand-logo[b-qipmgljlo7] {
        height: 50px;
    }
}

@media (max-width: 480px) {
    .nav-container[b-qipmgljlo7] {
        height: 65px;
        padding: 0 12px;
    }

    .brand-logo[b-qipmgljlo7] {
        height: 46px;
    }

    .mobile-nav-link[b-qipmgljlo7] {
        padding: 14px 20px;
        font-size: 14px;
    }

    .mobile-nav-submenu .mobile-nav-link[b-qipmgljlo7] {
        padding-left: 50px;
    }
}

/* ========================================
   ANIMATIONS
   ======================================== */

@keyframes fadeInDown-b-qipmgljlo7 {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ========================================
   Z-INDEX MANAGEMENT
   ======================================== */

.nav-dropdown[b-qipmgljlo7] {
    z-index: 1001;
}

.nav-dropdown-menu[b-qipmgljlo7] {
    z-index: 1002;
}

.user-dropdown[b-qipmgljlo7] {
    z-index: 1001;
}

.dropdown-menu[b-qipmgljlo7] {
    z-index: 1002;
}

.mobile-menu[b-qipmgljlo7] {
    z-index: 999;
}

/* ========================================
   ACTIVE STATES
   ======================================== */

.nav-link:active[b-qipmgljlo7],
.mobile-nav-link:active[b-qipmgljlo7] {
    transform: scale(0.98);
}

/* ========================================
   ACCESSIBILITY - FOCUS STATES
   ======================================== */

.nav-link:focus[b-qipmgljlo7],
.dropdown-item:focus[b-qipmgljlo7],
.nav-dropdown-item:focus[b-qipmgljlo7],
.mobile-nav-link:focus[b-qipmgljlo7],
.mobile-nav-group-header:focus[b-qipmgljlo7] {
    outline: 2px solid rgba(255, 255, 255, 0.5);
    outline-offset: 2px;
}

/* ========================================
   PRINT STYLES
   ======================================== */

@media print {
    .top-navigation[b-qipmgljlo7] {
        display: none;
    }
}
/* _content/BotomixNew/Components/Pages/Admin/QuoteRequests.razor.rz.scp.css */
.admin-quotes[b-3r1dykg8co] {
    background-color: #f8f9fa;
    min-height: 100vh;
}

.admin-header[b-3r1dykg8co] {
    margin-bottom: 2rem;
}

    .admin-header h1[b-3r1dykg8co] {
        font-size: 2rem;
        font-weight: 700;
        color: #2c3e50;
    }

.admin-stats[b-3r1dykg8co] {
    margin-bottom: 2rem;
}

.stat-card[b-3r1dykg8co] {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    transition: transform 0.2s ease;
}

    .stat-card:hover[b-3r1dykg8co] {
        transform: translateY(-2px);
    }

.stat-icon[b-3r1dykg8co] {
    width: 60px;
    height: 60px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: white;
}

.stat-new .stat-icon[b-3r1dykg8co] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.stat-progress .stat-icon[b-3r1dykg8co] {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.stat-quoted .stat-icon[b-3r1dykg8co] {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.stat-completed .stat-icon[b-3r1dykg8co] {
    background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
}

.stat-value[b-3r1dykg8co] {
    font-size: 2rem;
    font-weight: 700;
    color: #2c3e50;
}

.stat-label[b-3r1dykg8co] {
    font-size: 0.9rem;
    color: #6c757d;
}

.admin-filters[b-3r1dykg8co] {
    margin-bottom: 1.5rem;
}

    .admin-filters .form-select[b-3r1dykg8co] {
        max-width: 250px;
    }

.quotes-table[b-3r1dykg8co] {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

    .quotes-table .table[b-3r1dykg8co] {
        margin-bottom: 0;
    }

    .quotes-table th[b-3r1dykg8co] {
        border-top: none;
        color: #6c757d;
        font-weight: 600;
        font-size: 0.85rem;
        text-transform: uppercase;
    }

.quote-date small[b-3r1dykg8co] {
    font-size: 0.75rem;
}

.empty-state[b-3r1dykg8co] {
    text-align: center;
    padding: 4rem 2rem;
    background: white;
    border-radius: 12px;
}

/* Modal */
.modal-overlay[b-3r1dykg8co] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1050;
}

.modal-content[b-3r1dykg8co] {
    background: white;
    border-radius: 12px;
    max-width: 600px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
}

.modal-header[b-3r1dykg8co] {
    padding: 1.5rem;
    border-bottom: 1px solid #dee2e6;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    .modal-header h2[b-3r1dykg8co] {
        font-size: 1.5rem;
        margin: 0;
    }

.modal-body[b-3r1dykg8co] {
    padding: 1.5rem;
}

.btn-close[b-3r1dykg8co] {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: #6c757d;
}

    .btn-close:hover[b-3r1dykg8co] {
        color: #000;
    }
/* _content/BotomixNew/Components/Pages/Admin/WizardLeads.razor.rz.scp.css */
/* Admin Container */
.admin-container[b-9wb9v44bmu] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 30px 20px;
}

/* Admin Header */
.admin-header[b-9wb9v44bmu] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    flex-wrap: wrap;
    gap: 20px;
}

    .admin-header h1[b-9wb9v44bmu] {
        font-size: 2rem;
        font-weight: 700;
        color: #2d3748;
        margin: 0;
    }

.admin-stats[b-9wb9v44bmu] {
    display: flex;
    gap: 15px;
}

.stat-card[b-9wb9v44bmu] {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 20px 30px;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

    .stat-card.uncontacted[b-9wb9v44bmu] {
        border-color: #ffc107;
        background: #fff9e6;
    }

.stat-number[b-9wb9v44bmu] {
    display: block;
    font-size: 2rem;
    font-weight: 700;
    color: #0066ff;
    margin-bottom: 5px;
}

.stat-card.uncontacted .stat-number[b-9wb9v44bmu] {
    color: #ff9800;
}

.stat-label[b-9wb9v44bmu] {
    font-size: 0.9rem;
    color: #718096;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Admin Filters */
.admin-filters[b-9wb9v44bmu] {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 25px;
    margin-bottom: 30px;
    display: flex;
    gap: 20px;
    align-items: end;
    flex-wrap: wrap;
}

.filter-group[b-9wb9v44bmu] {
    flex: 1;
    min-width: 200px;
}

    .filter-group label[b-9wb9v44bmu] {
        display: block;
        font-weight: 600;
        color: #2d3748;
        margin-bottom: 8px;
        font-size: 0.9rem;
    }

.form-select[b-9wb9v44bmu] {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.95rem;
    background: white;
    cursor: pointer;
}

    .form-select:focus[b-9wb9v44bmu] {
        outline: none;
        border-color: #0066ff;
    }

/* Leads Table */
.leads-table[b-9wb9v44bmu] {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.table[b-9wb9v44bmu] {
    width: 100%;
    border-collapse: collapse;
}

    .table thead[b-9wb9v44bmu] {
        background: #f8f9fa;
    }

        .table thead th[b-9wb9v44bmu] {
            padding: 15px 20px;
            text-align: left;
            font-weight: 600;
            font-size: 0.9rem;
            color: #2d3748;
            border-bottom: 2px solid #e2e8f0;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

    .table tbody tr[b-9wb9v44bmu] {
        border-bottom: 1px solid #e2e8f0;
        transition: background 0.2s ease;
    }

        .table tbody tr:hover[b-9wb9v44bmu] {
            background: #f8f9fa;
        }

        .table tbody tr.highlight[b-9wb9v44bmu] {
            background: #fff9e6;
        }

    .table tbody td[b-9wb9v44bmu] {
        padding: 20px;
        vertical-align: top;
        font-size: 0.95rem;
    }

        .table tbody td strong[b-9wb9v44bmu] {
            color: #2d3748;
        }

        .table tbody td small[b-9wb9v44bmu] {
            color: #718096;
            font-size: 0.85rem;
        }

/* Category Badge */
.category-badge[b-9wb9v44bmu] {
    display: inline-block;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

    .category-badge.cleaning[b-9wb9v44bmu] {
        background: #dbeafe;
        color: #1e40af;
    }

    .category-badge.service[b-9wb9v44bmu] {
        background: #dcfce7;
        color: #166534;
    }

    .category-badge.delivery[b-9wb9v44bmu] {
        background: #fef3c7;
        color: #92400e;
    }

    .category-badge.pallet[b-9wb9v44bmu] {
        background: #f3e8ff;
        color: #6b21a8;
    }

/* Match Score */
.match-score[b-9wb9v44bmu] {
    display: inline-block;
    padding: 5px 10px;
    background: #ebf5ff;
    color: #0066ff;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.9rem;
}

/* Status Badge */
.status-badge[b-9wb9v44bmu] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
}

    .status-badge.contacted[b-9wb9v44bmu] {
        background: #d1fae5;
        color: #065f46;
    }

    .status-badge.pending[b-9wb9v44bmu] {
        background: #fef3c7;
        color: #92400e;
    }

/* Action Buttons */
.action-buttons[b-9wb9v44bmu] {
    display: flex;
    gap: 8px;
}

.btn-icon[b-9wb9v44bmu] {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e2e8f0;
    background: white;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    color: #4a5568;
    text-decoration: none;
}

    .btn-icon:hover[b-9wb9v44bmu] {
        background: #f8f9fa;
        border-color: #cbd5e0;
        transform: translateY(-2px);
    }

    .btn-icon.success[b-9wb9v44bmu] {
        color: #10b981;
    }

        .btn-icon.success:hover[b-9wb9v44bmu] {
            background: #d1fae5;
            border-color: #10b981;
        }

/* Buttons */
.btn[b-9wb9v44bmu] {
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-secondary[b-9wb9v44bmu] {
    background: #f8f9fa;
    color: #4a5568;
    border: 1px solid #e2e8f0;
}

    .btn-secondary:hover[b-9wb9v44bmu] {
        background: #e2e8f0;
        transform: translateY(-2px);
    }

/* Empty State */
.empty-state[b-9wb9v44bmu] {
    text-align: center;
    padding: 80px 20px;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
}

    .empty-state i[b-9wb9v44bmu] {
        font-size: 4rem;
        color: #cbd5e0;
        margin-bottom: 20px;
    }

    .empty-state h3[b-9wb9v44bmu] {
        font-size: 1.5rem;
        font-weight: 700;
        color: #2d3748;
        margin-bottom: 10px;
    }

    .empty-state p[b-9wb9v44bmu] {
        font-size: 1rem;
        color: #718096;
    }

/* Loading State */
.text-center[b-9wb9v44bmu] {
    text-align: center;
}

.spinner-border[b-9wb9v44bmu] {
    display: inline-block;
    width: 2rem;
    height: 2rem;
    border: 0.25em solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spinner-border-b-9wb9v44bmu 0.75s linear infinite;
}

@keyframes spinner-border-b-9wb9v44bmu {
    to {
        transform: rotate(360deg);
    }
}

.text-primary[b-9wb9v44bmu] {
    color: #0066ff;
}

/* Modal */
.modal-overlay[b-9wb9v44bmu] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    animation: fadeIn-b-9wb9v44bmu 0.2s ease;
}

@keyframes fadeIn-b-9wb9v44bmu {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.modal-content[b-9wb9v44bmu] {
    background: white;
    border-radius: 16px;
    max-width: 800px;
    width: 90%;
    max-height: 85vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: slideUp-b-9wb9v44bmu 0.3s ease;
}

@keyframes slideUp-b-9wb9v44bmu {
    from {
        transform: translateY(30px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.modal-header[b-9wb9v44bmu] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 25px 30px;
    border-bottom: 1px solid #e2e8f0;
}

    .modal-header h2[b-9wb9v44bmu] {
        font-size: 1.5rem;
        font-weight: 700;
        color: #2d3748;
        margin: 0;
    }

.btn-close[b-9wb9v44bmu] {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: #718096;
    cursor: pointer;
    padding: 5px;
    transition: color 0.2s ease;
}

    .btn-close:hover[b-9wb9v44bmu] {
        color: #2d3748;
    }

.modal-body[b-9wb9v44bmu] {
    padding: 30px;
}

.detail-section[b-9wb9v44bmu] {
    margin-bottom: 30px;
}

    .detail-section:last-child[b-9wb9v44bmu] {
        margin-bottom: 0;
    }

    .detail-section h3[b-9wb9v44bmu] {
        font-size: 1.2rem;
        font-weight: 700;
        color: #2d3748;
        margin-bottom: 15px;
        padding-bottom: 10px;
        border-bottom: 2px solid #e2e8f0;
    }

.detail-grid[b-9wb9v44bmu] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
}

.detail-item[b-9wb9v44bmu] {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

    .detail-item label[b-9wb9v44bmu] {
        font-weight: 600;
        font-size: 0.9rem;
        color: #718096;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .detail-item span[b-9wb9v44bmu] {
        font-size: 1rem;
        color: #2d3748;
    }

.answers-list[b-9wb9v44bmu] {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.answer-item[b-9wb9v44bmu] {
    background: #f8f9fa;
    padding: 15px;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

    .answer-item strong[b-9wb9v44bmu] {
        color: #2d3748;
        font-size: 0.95rem;
    }

    .answer-item span[b-9wb9v44bmu] {
        color: #4a5568;
        font-size: 1rem;
    }

.robot-ids[b-9wb9v44bmu] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.robot-id-link[b-9wb9v44bmu] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: #ebf5ff;
    color: #0066ff;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    transition: all 0.2s ease;
}

    .robot-id-link:hover[b-9wb9v44bmu] {
        background: #0066ff;
        color: white;
        transform: translateY(-2px);
    }

/* Responsive Design */
@media (max-width: 768px) {
    .admin-container[b-9wb9v44bmu] {
        padding: 20px 15px;
    }

    .admin-header[b-9wb9v44bmu] {
        flex-direction: column;
        align-items: flex-start;
    }

    .admin-stats[b-9wb9v44bmu] {
        width: 100%;
        flex-wrap: wrap;
    }

    .stat-card[b-9wb9v44bmu] {
        flex: 1;
        min-width: 120px;
    }

    .admin-filters[b-9wb9v44bmu] {
        flex-direction: column;
        align-items: stretch;
    }

    .filter-group[b-9wb9v44bmu] {
        width: 100%;
    }

    .leads-table[b-9wb9v44bmu] {
        overflow-x: auto;
    }

    .table[b-9wb9v44bmu] {
        min-width: 1000px;
    }

    .modal-content[b-9wb9v44bmu] {
        width: 95%;
        max-height: 90vh;
    }

    .modal-body[b-9wb9v44bmu] {
        padding: 20px;
    }

    .detail-grid[b-9wb9v44bmu] {
        grid-template-columns: 1fr;
    }
}
/* _content/BotomixNew/Components/Pages/Compare.razor.rz.scp.css */
:host[b-rx64em00bx] {
    display: block;
}

.cmp[b-rx64em00bx] {
    padding: 2rem 0 4rem;
    background-color: #f8f9fa; /* Heller Hintergrund für die ganze Seite */
}

.cmp-head[b-rx64em00bx] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--bs-border-color);
}

    .cmp-head h1[b-rx64em00bx] {
        margin-bottom: 0.25rem;
    }

.cmp-actions[b-rx64em00bx] {
    display: flex;
    gap: .75rem;
    flex-wrap: wrap;
}

    .cmp-actions .btn:focus-visible[b-rx64em00bx] {
        outline: 2px solid var(--bs-primary);
        outline-offset: 2px;
    }

.cmp-empty[b-rx64em00bx] {
    border: 2px dashed var(--bs-border-color);
    border-radius: 1rem;
    padding: 4rem 2rem;
    text-align: center;
    background: var(--bs-body-bg);
    margin-top: 2rem;
}

/* Container für die responsive Tabelle mit abgerundeten Ecken */
.table-responsive[b-rx64em00bx] {
    border: 1px solid var(--bs-border-color);
    border-radius: 1rem;
    overflow: hidden; /* Wichtig für die Ecken */
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
}

    .table-responsive:focus[b-rx64em00bx] {
        outline: 2px solid var(--bs-primary);
        outline-offset: 2px;
    }

.compare-table[b-rx64em00bx] {
    min-width: 800px;
    margin-bottom: 0;
    border-collapse: separate;
    border-spacing: 0;
}

    /* Tabellenkopf mit den Robotern */
    .compare-table thead th[b-rx64em00bx] {
        border-top: 0;
        text-align: center;
        vertical-align: top;
        padding: 1.5rem 1rem;
        min-width: 240px;
        background-color: var(--bs-body-bg);
        border-bottom: 1px solid var(--bs-border-color);
    }

    /* Tabellenkörper-Zellen */
    .compare-table tbody td[b-rx64em00bx] {
        vertical-align: middle;
        font-size: 0.9rem;
        padding: 0.85rem 1rem;
        background-color: var(--bs-body-bg);
    }

    /* Zebra-Look für bessere Lesbarkeit (nur für Inhaltszeilen) */
    .compare-table tbody tr.group-content-row:nth-of-type(even) td[b-rx64em00bx] {
        background-color: var(--bs-tertiary-bg);
    }

/* Das "Sticky" Design für die erste Spalte */
.sticky-col[b-rx64em00bx] {
    position: -webkit-sticky; /* Für Safari */
    position: sticky;
    left: 0;
    z-index: 2;
    font-weight: 600;
    vertical-align: middle;
    /* Ein feiner Schatten rechts, um die Spalte optisch abzuheben */
    box-shadow: 3px 0 5px rgba(0, 0, 0, 0.04);
    border-right: 1px solid var(--bs-border-color);
}

.compare-table thead .sticky-col[b-rx64em00bx] {
    font-size: 1.1rem;
    vertical-align: middle;
    padding: 1.5rem;
    min-width: 200px;
    background-color: var(--bs-tertiary-bg); /* Leicht anderer Hintergrund für den Header */
}

.compare-table tbody .sticky-col[b-rx64em00bx] {
    background-color: var(--bs-tertiary-bg);
    font-size: 0.9rem;
    padding: 0.85rem 1rem;
}

.compare-table tbody tr.group-content-row:nth-of-type(even) .sticky-col[b-rx64em00bx] {
    background-color: var(--bs-body-bg);
}

/* Stile für den Roboter-Header in jeder Spalte */
.robot-header-content[b-rx64em00bx] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.robot-header-img[b-rx64em00bx] {
    width: 100%;
    height: 120px;
    object-fit: contain;
    border-radius: 0.75rem;
    background: #fff;
    padding: 0.5rem;
    border: 1px solid var(--bs-border-color);
}

.robot-header-title[b-rx64em00bx] {
    font-size: 1.1rem;
    font-weight: 700;
    margin-top: 0.75rem;
    color: var(--bs-emphasis-color);
}

.robot-header-sub[b-rx64em00bx] {
    font-size: 0.9rem;
    color: var(--bs-secondary-color);
    margin-top: -0.25rem;
}

.robot-header-actions[b-rx64em00bx] {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

    .robot-header-actions .btn-sm[b-rx64em00bx] {
        border-radius: 0.5rem;
    }

        .robot-header-actions .btn-sm:focus-visible[b-rx64em00bx] {
            outline: 2px solid var(--bs-primary);
            outline-offset: 2px;
        }

    .robot-header-actions .btn-outline-danger[b-rx64em00bx] {
        width: 28px;
        height: 28px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        font-size: 1.2rem;
        line-height: 1;
    }

/* Überarbeitetes Styling für die Gruppen-Titelzeile mit Toggle-Funktionalität */
.group-header[b-rx64em00bx] {
    background: linear-gradient(135deg, #e9ecef 0%, #f8f9fa 100%);
    color: var(--bs-emphasis-color);
    font-weight: 600;
    font-size: 0.9rem;
    padding: 0;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-top: 2px solid var(--bs-border-color);
    border-bottom: 1px solid var(--bs-border-color);
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    user-select: none;
}

    .group-header:hover[b-rx64em00bx] {
        background: linear-gradient(135deg, #dee2e6 0%, #e9ecef 100%);
        transform: translateY(-1px);
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }

    .group-header:focus-visible[b-rx64em00bx] {
        outline: 2px solid var(--bs-primary);
        outline-offset: 2px;
        box-shadow: 0 0 0 4px rgba(13, 110, 253, 0.25);
    }

    .group-header.expanded[b-rx64em00bx] {
        background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
        color: white;
        border-top-color: #0056b3;
    }

        .group-header.expanded:hover[b-rx64em00bx] {
            background: linear-gradient(135deg, #0056b3 0%, #004085 100%);
        }

.group-header-content[b-rx64em00bx] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.8rem 1rem;
    width: 100%;
}

.group-toggle-icon[b-rx64em00bx] {
    font-size: 0.8rem;
    transition: transform 0.2s ease-in-out;
    min-width: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.group-header.expanded .group-toggle-icon[b-rx64em00bx] {
    transform: rotate(0deg);
}

.group-header.collapsed .group-toggle-icon[b-rx64em00bx] {
    transform: rotate(-90deg);
}

.group-header-text[b-rx64em00bx] {
    flex-grow: 1;
    font-weight: 600;
}

.group-item-count[b-rx64em00bx] {
    font-size: 0.75rem;
    opacity: 0.8;
    font-weight: normal;
    text-transform: none;
    letter-spacing: normal;
}

.group-header.expanded .group-item-count[b-rx64em00bx] {
    opacity: 0.9;
}

/* Animation für das Ein-/Ausblenden der Gruppeninhalte */
.group-content-row[b-rx64em00bx] {
    animation: fadeIn-b-rx64em00bx 0.3s ease-in-out;
}

@keyframes fadeIn-b-rx64em00bx {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Spezielle Styles für die erste expandierte Gruppe */
.group-header.expanded:first-of-type[b-rx64em00bx] {
    border-top-color: #007bff;
}

/* Responsive Verbesserungen für mobile Ansicht */
@media (max-width: 768px) {
    .cmp-actions[b-rx64em00bx] {
        justify-content: center;
    }

    .group-header-content[b-rx64em00bx] {
        padding: 0.6rem 0.8rem;
        gap: 0.5rem;
    }

    .group-header-text[b-rx64em00bx] {
        font-size: 0.85rem;
    }

    .group-item-count[b-rx64em00bx] {
        font-size: 0.7rem;
    }
}

/* Fokus-Styles für bessere Barrierefreiheit */
.group-header:focus[b-rx64em00bx] {
    outline: 2px solid var(--bs-primary);
    outline-offset: 2px;
}

    .group-header:focus:not(:focus-visible)[b-rx64em00bx] {
        outline: none;
    }

/* Verbesserter Hover-Effekt für die Toggle-Icons */
.group-toggle-icon[b-rx64em00bx] {
    transition: all 0.2s ease-in-out;
}

.group-header:hover .group-toggle-icon[b-rx64em00bx] {
    transform: scale(1.1);
}

.group-header.expanded:hover .group-toggle-icon[b-rx64em00bx] {
    transform: rotate(0deg) scale(1.1);
}

.group-header.collapsed:hover .group-toggle-icon[b-rx64em00bx] {
    transform: rotate(-90deg) scale(1.1);
}

/* Accessibility: Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    .group-header[b-rx64em00bx],
    .group-toggle-icon[b-rx64em00bx],
    .group-content-row[b-rx64em00bx] {
        transition: none;
        animation: none;
    }

        .group-header:hover[b-rx64em00bx] {
            transform: none;
        }
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
    .group-header[b-rx64em00bx] {
        border: 2px solid currentColor;
    }

    .compare-table[b-rx64em00bx] {
        border: 2px solid currentColor;
    }
}

/* Print Styles */
@media print {
    .cmp-actions[b-rx64em00bx],
    .robot-header-actions[b-rx64em00bx] {
        display: none;
    }

    .group-header[b-rx64em00bx] {
        background: #fff !important;
        color: #000 !important;
    }

    .group-content-row[b-rx64em00bx] {
        display: table-row !important;
    }
}
/* _content/BotomixNew/Components/Pages/CompareDock.razor.rz.scp.css */
/* CompareDock.razor.css - DRAG & DROP VERSION with First-Time Hint */

/* Visually Hidden Class für Screen Readers */
.visually-hidden[b-8a9lj2uyen] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* ========================================
   FIRST-TIME HINT BANNER
   ======================================== */

.first-time-hint[b-8a9lj2uyen] {
    position: absolute;
    bottom: calc(100% + 12px); /* Über dem Dock */
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 2rem);
    max-width: 600px;
    background: linear-gradient(135deg, #4a90e2 0%, #357abd 100%);
    color: white;
    border-radius: 16px;
    padding: 1rem 1.25rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    z-index: 1060;
    animation: slideUpBounce-b-8a9lj2uyen 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
    cursor: pointer;
}

@keyframes slideUpBounce-b-8a9lj2uyen {
    0% {
        transform: translate(-50%, 50px);
        opacity: 0;
    }

    70% {
        transform: translate(-50%, -10px);
    }

    100% {
        transform: translate(-50%, 0);
        opacity: 1;
    }
}

/* Arrow pointing down to dock */
.first-time-hint[b-8a9lj2uyen]::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-top: 12px solid #357abd;
}

.first-time-hint-content[b-8a9lj2uyen] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

.first-time-hint-icon[b-8a9lj2uyen] {
    flex-shrink: 0;
    font-size: 1.5rem;
    color: rgba(255, 255, 255, 0.9);
    animation: pulse-b-8a9lj2uyen 2s ease-in-out infinite;
}

@keyframes pulse-b-8a9lj2uyen {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.8;
        transform: scale(1.1);
    }
}

.first-time-hint-text[b-8a9lj2uyen] {
    flex-grow: 1;
}

    .first-time-hint-text strong[b-8a9lj2uyen] {
        display: block;
        font-size: 1rem;
        margin-bottom: 0.4rem;
        font-weight: 700;
    }

    .first-time-hint-text p[b-8a9lj2uyen] {
        margin: 0;
        font-size: 0.85rem;
        line-height: 1.4;
        opacity: 0.95;
    }

.first-time-hint-close[b-8a9lj2uyen] {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.9rem;
}

    .first-time-hint-close:hover[b-8a9lj2uyen] {
        background: rgba(255, 255, 255, 0.3);
        transform: rotate(90deg);
    }

    .first-time-hint-close:active[b-8a9lj2uyen] {
        transform: rotate(90deg) scale(0.9);
    }

.first-time-hint-button[b-8a9lj2uyen] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: white;
    color: #357abd;
    border: none;
    padding: 0.5rem 1.25rem;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-left: auto;
    margin-right: auto;
    display: block;
}

    .first-time-hint-button:hover[b-8a9lj2uyen] {
        background: rgba(255, 255, 255, 0.95);
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }

    .first-time-hint-button:active[b-8a9lj2uyen] {
        transform: translateY(0);
    }

/* ========================================
   HAUPTCONTAINER FÜR DAS DOCK
   ======================================== */

.compare-dock[b-8a9lj2uyen] {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1050;
    width: 90%;
    max-width: 1200px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid #e0e0e0;
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
    padding: 0.75rem;
    animation: slideUp-b-8a9lj2uyen 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

@keyframes slideUp-b-8a9lj2uyen {
    from {
        transform: translate(-50%, 100px);
        opacity: 0;
    }

    to {
        transform: translate(-50%, 0);
        opacity: 1;
    }
}

/* Flex-Container für den Inhalt */
.compare-dock__content[b-8a9lj2uyen] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* Infoblock auf der linken Seite */
.compare-dock__info[b-8a9lj2uyen] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-right: 0.75rem;
    border-right: 1px solid var(--bs-border-color);
    flex-shrink: 0;
    white-space: nowrap;
}

.compare-dock__icon[b-8a9lj2uyen] {
    font-size: 1rem;
    color: var(--bs-primary);
}

.compare-dock__title[b-8a9lj2uyen] {
    font-weight: 600;
    font-size: 0.9rem;
    margin: 0;
    color: var(--bs-emphasis-color);
}

/* ========================================
   ITEMS CONTAINER (KEIN SCROLLEN!)
   ======================================== */

.compare-dock__items[b-8a9lj2uyen] {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* Immer 4 Slots nebeneinander */
    gap: 0.5rem;
    flex-grow: 1;
    padding: 4px 0; /* Platz für Box-Schatten */
}

/* ========================================
   DRAG & DROP STYLING
   ======================================== */

/* Drag Handle (Grip-Icon) */
.compare-dock__drag-handle[b-8a9lj2uyen] {
    cursor: grab;
    color: var(--bs-secondary-color);
    padding: 0.25rem 0.15rem;
    margin-left: -0.15rem;
    transition: color 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .compare-dock__drag-handle:hover[b-8a9lj2uyen] {
        color: var(--bs-primary);
    }

    .compare-dock__drag-handle:active[b-8a9lj2uyen] {
        cursor: grabbing;
        color: var(--bs-primary);
    }

    .compare-dock__drag-handle i[b-8a9lj2uyen] {
        font-size: 0.85rem;
    }

/* Style für eine einzelne Roboter-Karte im Dock */
.compare-dock__item[b-8a9lj2uyen] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--bs-tertiary-bg);
    border: 2px solid var(--bs-border-color);
    border-radius: 12px;
    padding: 0.5rem;
    position: relative;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    cursor: move; /* Zeigt an, dass Element verschoben werden kann */
    min-width: 0; /* Wichtig für Flexbox-Truncation */
}

    .compare-dock__item:hover[b-8a9lj2uyen] {
        transform: translateY(-2px);
        box-shadow: 0 4px 15px rgba(0,0,0,0.1);
        border-color: var(--bs-primary);
    }

    /* Während des Dragging */
    .compare-dock__item.dragging[b-8a9lj2uyen] {
        opacity: 0.5;
        transform: scale(0.95);
        cursor: grabbing;
        border-color: var(--bs-primary);
        box-shadow: 0 8px 24px rgba(13, 110, 253, 0.3);
    }

    /* Drop-Target Highlight */
    .compare-dock__item.drop-target[b-8a9lj2uyen] {
        border-color: var(--bs-success);
        background: rgba(25, 135, 84, 0.1);
        transform: scale(1.02);
        box-shadow: 0 0 0 3px rgba(25, 135, 84, 0.2);
    }

    .compare-dock__item:focus-within[b-8a9lj2uyen] {
        outline: 2px solid var(--bs-primary);
        outline-offset: 2px;
    }

.compare-dock__item-image[b-8a9lj2uyen] {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    overflow: hidden;
    background: white;
    flex-shrink: 0;
    border: 1px solid var(--bs-border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none; /* Verhindert, dass Bild das Dragging stört */
}

    .compare-dock__item-image img[b-8a9lj2uyen] {
        width: 100%;
        height: 100%;
        object-fit: contain;
        user-select: none;
        -webkit-user-drag: none;
    }

    .compare-dock__item-image i[b-8a9lj2uyen] {
        color: var(--bs-secondary-color);
        font-size: 1.2rem;
    }

.compare-dock__item-info[b-8a9lj2uyen] {
    min-width: 0;
    max-width: 120px; /* Begrenzt die Breite */
    flex-grow: 1;
    pointer-events: none; /* Verhindert, dass Text das Dragging stört */
}

.compare-dock__item-name[b-8a9lj2uyen] {
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 2px;
    color: var(--bs-emphasis-color);
    user-select: none;
    line-height: 1.2;
}

.compare-dock__item-manufacturer[b-8a9lj2uyen] {
    font-size: 0.7rem;
    color: var(--bs-secondary-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    user-select: none;
    line-height: 1.2;
}

.compare-dock__item-remove[b-8a9lj2uyen] {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    color: var(--bs-secondary-color);
    font-size: 1rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    z-index: 10; /* Über dem Drag-Handle */
}

    .compare-dock__item-remove:hover[b-8a9lj2uyen] {
        background: var(--bs-danger);
        border-color: var(--bs-danger);
        color: white;
        transform: scale(1.15) rotate(90deg);
    }

    .compare-dock__item-remove:focus-visible[b-8a9lj2uyen] {
        outline: 2px solid var(--bs-danger);
        outline-offset: 2px;
        background: var(--bs-danger);
        border-color: var(--bs-danger);
        color: white;
    }

    .compare-dock__item-remove:active[b-8a9lj2uyen] {
        transform: scale(0.95);
    }

/* Platzhalter für leere Slots */
.compare-dock__placeholder[b-8a9lj2uyen] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    border: 2px dashed var(--bs-border-color);
    border-radius: 12px;
    padding: 0.5rem;
    background: var(--bs-gray-100);
    color: var(--bs-secondary-color);
    font-size: 0.75rem;
    min-height: 52px;
    transition: all 0.2s ease;
}

    .compare-dock__placeholder i[b-8a9lj2uyen] {
        font-size: 0.85rem;
    }

    /* Drop-Target Highlight für Platzhalter */
    .compare-dock__placeholder.drop-target[b-8a9lj2uyen] {
        border-color: var(--bs-success);
        border-style: solid;
        background: rgba(25, 135, 84, 0.1);
        transform: scale(1.02);
        box-shadow: 0 0 0 3px rgba(25, 135, 84, 0.2);
    }

        .compare-dock__placeholder.drop-target i[b-8a9lj2uyen] {
            color: var(--bs-success);
        }

/* Aktions-Buttons auf der rechten Seite */
.compare-dock__actions[b-8a9lj2uyen] {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    gap: 0.5rem;
    padding-left: 0.75rem;
    border-left: 1px solid var(--bs-border-color);
}

    .compare-dock__actions .btn[b-8a9lj2uyen] {
        border-radius: 8px;
        font-weight: 600;
        transition: all 0.2s ease;
        white-space: nowrap;
        font-size: 0.85rem;
        padding: 0.4rem 0.75rem;
    }

        .compare-dock__actions .btn:focus-visible[b-8a9lj2uyen] {
            outline: 2px solid var(--bs-primary);
            outline-offset: 2px;
        }

        .compare-dock__actions .btn:disabled[b-8a9lj2uyen] {
            cursor: not-allowed;
            opacity: 0.6;
        }

    .compare-dock__actions .btn-clear[b-8a9lj2uyen] {
        background: none;
        border: 1px solid transparent;
        color: var(--bs-secondary-color);
        padding: 0.5rem 1rem;
    }

        .compare-dock__actions .btn-clear:hover:not(:disabled)[b-8a9lj2uyen] {
            color: var(--bs-danger);
            background: rgba(220, 53, 69, 0.1);
            border-color: var(--bs-danger);
        }

    .compare-dock__actions .btn-primary[b-8a9lj2uyen] {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
    }

        .compare-dock__actions .btn-primary:hover:not(:disabled)[b-8a9lj2uyen] {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0, 102, 255, 0.3);
        }

/* ========================================
   RESPONSIVE DESIGN
   ======================================== */

/* Mittlere Bildschirme */
@media (max-width: 992px) {
    .compare-dock[b-8a9lj2uyen] {
        width: 95%;
        padding: 0.75rem;
    }

    .compare-dock__items[b-8a9lj2uyen] {
        gap: 0.5rem;
    }

    .compare-dock__item[b-8a9lj2uyen],
    .compare-dock__placeholder[b-8a9lj2uyen] {
        font-size: 0.85rem;
    }

    .first-time-hint[b-8a9lj2uyen] {
        width: calc(100% - 1rem);
        max-width: 500px;
        padding: 0.85rem 1rem;
    }

    .first-time-hint-text strong[b-8a9lj2uyen] {
        font-size: 0.95rem;
    }

    .first-time-hint-text p[b-8a9lj2uyen] {
        font-size: 0.8rem;
    }
}

/* Tablets */
@media (max-width: 768px) {
    .compare-dock[b-8a9lj2uyen] {
        bottom: 0;
        left: 0;
        width: 100%;
        transform: none;
        border-radius: 16px 16px 0 0;
        max-height: 70vh;
        overflow-y: auto;
    }

    @keyframes slideUp-b-8a9lj2uyen {
        from {
            transform: translateY(100%);
            opacity: 0;
        }

        to {
            transform: translateY(0);
            opacity: 1;
        }
    }

    .first-time-hint[b-8a9lj2uyen] {
        position: fixed;
        top: 20px;
        bottom: auto;
        left: 50%;
        transform: translateX(-50%);
        width: calc(100% - 2rem);
        max-width: 400px;
    }

        .first-time-hint[b-8a9lj2uyen]::after {
            display: none; /* Kein Pfeil auf Mobile */
        }

    @keyframes slideUpBounce-b-8a9lj2uyen {
        0% {
            transform: translate(-50%, -50px);
            opacity: 0;
        }

        70% {
            transform: translate(-50%, 10px);
        }

        100% {
            transform: translate(-50%, 0);
            opacity: 1;
        }
    }

    .compare-dock__content[b-8a9lj2uyen] {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }

    .compare-dock__info[b-8a9lj2uyen] {
        border: none;
        padding: 0;
        justify-content: space-between;
    }

    .compare-dock__items[b-8a9lj2uyen] {
        grid-template-columns: repeat(2, 1fr); /* 2 Spalten auf Tablets */
        gap: 0.75rem;
    }

    .compare-dock__actions[b-8a9lj2uyen] {
        border: none;
        padding-left: 0;
        border-top: 1px solid var(--bs-border-color);
        padding-top: 0.75rem;
        justify-content: space-between;
    }

    .compare-dock__drag-handle[b-8a9lj2uyen] {
        font-size: 0.9rem;
    }
}

/* Mobile */
@media (max-width: 480px) {
    .compare-dock__items[b-8a9lj2uyen] {
        grid-template-columns: 1fr; /* 1 Spalte auf Mobile */
    }

    .compare-dock__item-name[b-8a9lj2uyen] {
        font-size: 0.8rem;
    }

    .compare-dock__item-manufacturer[b-8a9lj2uyen] {
        font-size: 0.7rem;
    }

    .compare-dock__drag-handle i[b-8a9lj2uyen] {
        font-size: 0.85rem;
    }

    .first-time-hint[b-8a9lj2uyen] {
        padding: 0.75rem;
    }

    .first-time-hint-content[b-8a9lj2uyen] {
        gap: 0.75rem;
    }

    .first-time-hint-icon[b-8a9lj2uyen] {
        font-size: 1.25rem;
    }

    .first-time-hint-text strong[b-8a9lj2uyen] {
        font-size: 0.9rem;
    }

    .first-time-hint-text p[b-8a9lj2uyen] {
        font-size: 0.75rem;
    }

    .first-time-hint-button[b-8a9lj2uyen] {
        font-size: 0.8rem;
        padding: 0.4rem 1rem;
    }
}

/* ========================================
   ACCESSIBILITY & SPECIAL MODES
   ======================================== */

/* Accessibility: Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    .compare-dock[b-8a9lj2uyen],
    .first-time-hint[b-8a9lj2uyen] {
        animation: none;
        opacity: 1;
        transform: translateX(-50%);
    }

    .compare-dock__item[b-8a9lj2uyen],
    .compare-dock__placeholder[b-8a9lj2uyen],
    .compare-dock__item-remove[b-8a9lj2uyen],
    .compare-dock__actions .btn[b-8a9lj2uyen],
    .first-time-hint-icon[b-8a9lj2uyen],
    .first-time-hint-close[b-8a9lj2uyen] {
        transition: none;
        animation: none;
    }

        .compare-dock__item:hover[b-8a9lj2uyen],
        .compare-dock__placeholder:hover[b-8a9lj2uyen],
        .compare-dock__item-remove:hover[b-8a9lj2uyen],
        .compare-dock__actions .btn:hover[b-8a9lj2uyen],
        .first-time-hint-close:hover[b-8a9lj2uyen] {
            transform: none;
        }

        .compare-dock__item.dragging[b-8a9lj2uyen] {
            transform: none;
        }

        .compare-dock__item.drop-target[b-8a9lj2uyen],
        .compare-dock__placeholder.drop-target[b-8a9lj2uyen] {
            transform: none;
        }

    @media (max-width: 768px) {
        .compare-dock[b-8a9lj2uyen],
        .first-time-hint[b-8a9lj2uyen] {
            transform: none;
        }
    }
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
    .compare-dock[b-8a9lj2uyen] {
        border: 2px solid currentColor;
        background: white;
    }

    .first-time-hint[b-8a9lj2uyen] {
        border: 2px solid currentColor;
    }

    .compare-dock__item[b-8a9lj2uyen],
    .compare-dock__placeholder[b-8a9lj2uyen] {
        border: 2px solid currentColor;
    }

        .compare-dock__item.drop-target[b-8a9lj2uyen],
        .compare-dock__placeholder.drop-target[b-8a9lj2uyen] {
            border: 3px solid currentColor;
        }

    .compare-dock__actions .btn[b-8a9lj2uyen] {
        border: 2px solid currentColor;
    }
}

/* Focus-visible für moderne Browser */
.compare-dock__actions .btn:focus-visible[b-8a9lj2uyen],
.compare-dock__item-remove:focus-visible[b-8a9lj2uyen],
.compare-dock__drag-handle:focus-visible[b-8a9lj2uyen],
.first-time-hint-close:focus-visible[b-8a9lj2uyen],
.first-time-hint-button:focus-visible[b-8a9lj2uyen] {
    outline: 2px solid var(--bs-primary);
    outline-offset: 2px;
}

/* Print Styles */
@media print {
    .compare-dock[b-8a9lj2uyen],
    .first-time-hint[b-8a9lj2uyen] {
        display: none;
    }
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
    .compare-dock[b-8a9lj2uyen] {
        background: rgba(33, 37, 41, 0.95);
        border-color: rgba(255, 255, 255, 0.1);
    }

    .compare-dock__item-image[b-8a9lj2uyen] {
        background: rgba(255, 255, 255, 0.05);
    }

    .compare-dock__drag-handle[b-8a9lj2uyen] {
        color: rgba(255, 255, 255, 0.6);
    }

        .compare-dock__drag-handle:hover[b-8a9lj2uyen] {
            color: rgba(255, 255, 255, 0.9);
        }

    .first-time-hint[b-8a9lj2uyen] {
        background: linear-gradient(135deg, #2c5282 0%, #1a365d 100%);
    }

        .first-time-hint[b-8a9lj2uyen]::after {
            border-top-color: #1a365d;
        }
}

/* ========================================
   VISUAL FEEDBACK
   ======================================== */

/* Pulse Animation für Drop-Target */
@keyframes pulseDrop-b-8a9lj2uyen {
    0%, 100% {
        box-shadow: 0 0 0 3px rgba(25, 135, 84, 0.2);
    }

    50% {
        box-shadow: 0 0 0 6px rgba(25, 135, 84, 0.1);
    }
}

.compare-dock__item.drop-target[b-8a9lj2uyen],
.compare-dock__placeholder.drop-target[b-8a9lj2uyen] {
    animation: pulseDrop-b-8a9lj2uyen 1.5s ease-in-out infinite;
}

/* Disable pulse bei Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    .compare-dock__item.drop-target[b-8a9lj2uyen],
    .compare-dock__placeholder.drop-target[b-8a9lj2uyen] {
        animation: none;
    }
}
/* _content/BotomixNew/Components/Pages/CompareToggle.razor.rz.scp.css */
/* CompareToggle.razor.css */

/* Visually Hidden Class für Screen Readers */
.visually-hidden[b-4ld4rriuda] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* Button states */
.btn-warning[b-4ld4rriuda] {
    background-color: #ffc107;
    border-color: #ffc107;
    color: #000;
    font-weight: 600;
    transition: all 0.2s ease;
}

    .btn-warning:hover:not(:disabled)[b-4ld4rriuda] {
        background-color: #e0a800;
        border-color: #d39e00;
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(255, 193, 7, 0.3);
    }

    .btn-warning:active:not(:disabled)[b-4ld4rriuda] {
        transform: translateY(0);
        box-shadow: 0 2px 4px rgba(255, 193, 7, 0.2);
    }

    .btn-warning:disabled[b-4ld4rriuda] {
        background-color: #ffc107;
        border-color: #ffc107;
        opacity: 0.65;
        cursor: not-allowed;
    }

.btn-outline-primary[b-4ld4rriuda] {
    transition: all 0.2s ease;
}

    .btn-outline-primary:hover:not(:disabled)[b-4ld4rriuda] {
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(13, 110, 253, 0.2);
    }

    .btn-outline-primary:active:not(:disabled)[b-4ld4rriuda] {
        transform: translateY(0);
    }

.btn-outline-secondary:disabled[b-4ld4rriuda],
.btn-primary:disabled[b-4ld4rriuda],
.btn:disabled[b-4ld4rriuda] {
    opacity: 0.65;
    cursor: not-allowed;
    transform: none;
}

/* Icon animations */
.fas[b-4ld4rriuda] {
    transition: transform 0.2s ease;
}

.btn:hover:not(:disabled) .fas[b-4ld4rriuda] {
    transform: scale(1.1);
}

.btn:active:not(:disabled) .fas[b-4ld4rriuda] {
    transform: scale(0.95);
}

/* Spinner styling */
.spinner-border-sm[b-4ld4rriuda] {
    width: 0.875rem;
    height: 0.875rem;
    border-width: 0.15em;
}

/* Focus states - Enhanced for accessibility */
.btn:focus-visible[b-4ld4rriuda] {
    outline: 2px solid currentColor;
    outline-offset: 2px;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

.btn-warning:focus-visible[b-4ld4rriuda] {
    outline: 2px solid #ffc107;
    outline-offset: 2px;
    box-shadow: 0 0 0 0.25rem rgba(255, 193, 7, 0.5);
}

.btn-outline-primary:focus-visible[b-4ld4rriuda] {
    outline: 2px solid var(--bs-primary);
    outline-offset: 2px;
}

/* Remove default focus outline for non-keyboard users */
.btn:focus:not(:focus-visible)[b-4ld4rriuda] {
    outline: none;
    box-shadow: none;
}

/* Text wrapping for small buttons */
.btn-sm span[b-4ld4rriuda] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Loading state */
.btn[disabled][b-4ld4rriuda] {
    position: relative;
}

/* Icon color consistency */
.btn-warning .fa-check[b-4ld4rriuda] {
    color: #000;
}

.btn-outline-primary .fa-balance-scale[b-4ld4rriuda],
.btn-primary .fa-balance-scale[b-4ld4rriuda] {
    color: currentColor;
}

/* Responsive adjustments */
@media (max-width: 576px) {
    .btn-sm[b-4ld4rriuda] {
        font-size: 0.8rem;
        padding: 0.35rem 0.65rem;
    }

        .btn-sm .fas[b-4ld4rriuda] {
            font-size: 0.85rem;
        }

    .spinner-border-sm[b-4ld4rriuda] {
        width: 0.75rem;
        height: 0.75rem;
    }
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
    .btn[b-4ld4rriuda] {
        border-width: 2px;
    }

    .btn-warning[b-4ld4rriuda] {
        border: 2px solid #000;
    }

    .btn:focus-visible[b-4ld4rriuda] {
        outline-width: 3px;
    }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    .btn[b-4ld4rriuda],
    .fas[b-4ld4rriuda] {
        transition: none;
    }

        .btn:hover:not(:disabled)[b-4ld4rriuda],
        .btn:active:not(:disabled)[b-4ld4rriuda] {
            transform: none;
        }

    .spinner-border-sm[b-4ld4rriuda] {
        animation: none;
    }
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
    .btn-warning[b-4ld4rriuda] {
        background-color: #ffca2c;
        border-color: #ffca2c;
        color: #000;
    }

        .btn-warning:hover:not(:disabled)[b-4ld4rriuda] {
            background-color: #ffcd39;
            border-color: #ffcd39;
        }
}

/* Ensure proper stacking */
.btn[b-4ld4rriuda] {
    position: relative;
}

.spinner-border[b-4ld4rriuda] {
    vertical-align: middle;
}
/* _content/BotomixNew/Components/Pages/FavoriteButton.razor.rz.scp.css */
/* FavoriteButton.razor scoped styles - Mit PERFEKT ZENTRIERTEM Login-Popup */

/* Visually Hidden für Screen Readers */
.visually-hidden[b-kahbj1g3b3] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

.favorite-button-container[b-kahbj1g3b3] {
    display: inline-block;
    width: 100%;
}

.favorite-btn[b-kahbj1g3b3] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border: 1px solid transparent;
    border-radius: 0.375rem;
    font-weight: 500;
    line-height: 1.5;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    background-color: transparent;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, transform 0.15s ease-in-out;
    width: 100%;
}

/* Größen */
.favorite-btn-sm[b-kahbj1g3b3] {
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
    border-radius: 0.25rem;
}

.favorite-btn-md[b-kahbj1g3b3] {
    padding: 0.5rem 1rem;
    font-size: 1rem;
    border-radius: 0.375rem;
}

.favorite-btn-lg[b-kahbj1g3b3] {
    padding: 0.5rem 1rem;
    font-size: 1.125rem;
    border-radius: 0.5rem;
}

/* Status-Styles - Inaktiv */
.favorite-inactive[b-kahbj1g3b3] {
    color: #6c757d;
    border-color: #6c757d;
    background-color: transparent;
}

    .favorite-inactive:hover:not(:disabled)[b-kahbj1g3b3] {
        color: #fff;
        background-color: #6c757d;
        border-color: #6c757d;
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(108, 117, 125, 0.3);
    }

    .favorite-inactive:active:not(:disabled)[b-kahbj1g3b3] {
        transform: translateY(0);
        box-shadow: 0 2px 4px rgba(108, 117, 125, 0.2);
    }

    .favorite-inactive:focus-visible[b-kahbj1g3b3] {
        outline: 2px solid #6c757d;
        outline-offset: 2px;
        box-shadow: 0 0 0 0.25rem rgba(108, 117, 125, 0.5);
    }

/* Status-Styles - Aktiv (Blau) */
.favorite-active[b-kahbj1g3b3] {
    color: #fff;
    background-color: #0d6efd;
    border-color: #0d6efd;
}

    .favorite-active:hover:not(:disabled)[b-kahbj1g3b3] {
        color: #fff;
        background-color: #0b5ed7;
        border-color: #0a58ca;
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(13, 110, 253, 0.3);
    }

    .favorite-active:active:not(:disabled)[b-kahbj1g3b3] {
        transform: translateY(0);
        box-shadow: 0 2px 4px rgba(13, 110, 253, 0.2);
    }

    .favorite-active:focus-visible[b-kahbj1g3b3] {
        outline: 2px solid #0d6efd;
        outline-offset: 2px;
        box-shadow: 0 0 0 0.25rem rgba(49, 132, 253, 0.5);
    }

/* Loading State */
.favorite-btn.loading[b-kahbj1g3b3] {
    cursor: not-allowed;
    opacity: 0.75;
    pointer-events: none;
}

.favorite-spinner[b-kahbj1g3b3] {
    width: 1rem;
    height: 1rem;
    border: 0.125rem solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spinner-border-b-kahbj1g3b3 0.75s linear infinite;
}

@keyframes spinner-border-b-kahbj1g3b3 {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Icon Styles */
.favorite-btn i[b-kahbj1g3b3] {
    font-size: inherit;
    line-height: 1;
    transition: transform 0.2s ease;
}

.favorite-btn:hover:not(:disabled) i[b-kahbj1g3b3] {
    transform: scale(1.1);
}

.favorite-btn:active:not(:disabled) i[b-kahbj1g3b3] {
    transform: scale(0.95);
}

.favorite-text[b-kahbj1g3b3] {
    font-weight: 500;
    line-height: 1;
}

/* Focus States */
.favorite-btn:focus-visible[b-kahbj1g3b3] {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

.favorite-btn:focus:not(:focus-visible)[b-kahbj1g3b3] {
    outline: none;
    box-shadow: none;
}

/* ========================================
   LOGIN-POPUP - PERFEKT ZENTRIERT
   ======================================== */

/* Overlay - VOLLBILD UND ZENTRIERT */
.login-prompt-overlay[b-kahbj1g3b3] {
    /* Position und Größe */
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    /* Reset alle transforms */
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    /* Styling */
    background: rgba(0, 0, 0, 0.65) !important;
    backdrop-filter: blur(5px);
    z-index: 999999 !important;
    /* PERFEKTE ZENTRIERUNG */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    /* Animation */
    animation: fadeInOverlay-b-kahbj1g3b3 0.3s ease-out;
}

@keyframes fadeInOverlay-b-kahbj1g3b3 {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Dialog - ZENTRIERT IN DER MITTE */
.login-prompt-dialog[b-kahbj1g3b3] {
    /* Position - relativ zum Overlay */
    position: relative;
    margin: 0 auto;
    /* Größe */
    width: 90%;
    max-width: 520px;
    max-height: 90vh;
    /* Styling */
    background: #ffffff;
    border-radius: 24px;
    padding: 3rem 2.5rem;
    /* Schatten */
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.35);
    /* Overflow */
    overflow-y: auto;
    /* Animation */
    animation: slideUpDialog-b-kahbj1g3b3 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes slideUpDialog-b-kahbj1g3b3 {
    from {
        transform: translateY(40px) scale(0.95);
        opacity: 0;
    }

    to {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

/* Close Button */
.login-prompt-close[b-kahbj1g3b3] {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    background: #f8f9fa;
    border: none;
    color: #6c757d;
    font-size: 1.5rem;
    cursor: pointer;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s ease;
    z-index: 10;
}

    .login-prompt-close:hover[b-kahbj1g3b3] {
        background: #e9ecef;
        color: #0066ff;
        transform: rotate(90deg);
    }

    .login-prompt-close:active[b-kahbj1g3b3] {
        transform: rotate(90deg) scale(0.95);
        background: #dee2e6;
    }

/* Icon */
.login-prompt-icon[b-kahbj1g3b3] {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #0066ff 0%, #0052cc 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 2rem;
    box-shadow: 0 10px 30px rgba(0, 102, 255, 0.3);
}

    .login-prompt-icon i[b-kahbj1g3b3] {
        font-size: 2.5rem;
        color: white;
    }

/* Title */
.login-prompt-title[b-kahbj1g3b3] {
    font-size: 2rem;
    font-weight: 700;
    color: #1a202c;
    text-align: center;
    margin-bottom: 1rem;
    line-height: 1.2;
}

/* Message */
.login-prompt-message[b-kahbj1g3b3] {
    color: #4a5568;
    font-size: 1.1rem;
    line-height: 1.65;
    text-align: center;
    margin-bottom: 2rem;
}

/* Benefits */
.login-prompt-benefits[b-kahbj1g3b3] {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: 16px;
    padding: 1.5rem;
    margin-bottom: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1.125rem;
}

.login-prompt-benefit[b-kahbj1g3b3] {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 1.05rem;
    color: #2d3748;
    font-weight: 500;
}

    .login-prompt-benefit i[b-kahbj1g3b3] {
        color: #10b981;
        font-size: 1.35rem;
        flex-shrink: 0;
    }

/* Actions */
.login-prompt-actions[b-kahbj1g3b3] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.login-prompt-btn[b-kahbj1g3b3] {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 1.125rem 2rem;
    border: none;
    border-radius: 14px;
    font-weight: 600;
    font-size: 1.125rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.login-prompt-btn-primary[b-kahbj1g3b3] {
    background: linear-gradient(135deg, #0066ff 0%, #0052cc 100%);
    color: white;
    box-shadow: 0 6px 20px rgba(0, 102, 255, 0.35);
}

    .login-prompt-btn-primary:hover[b-kahbj1g3b3] {
        transform: translateY(-3px);
        box-shadow: 0 8px 25px rgba(0, 102, 255, 0.45);
    }

    .login-prompt-btn-primary:active[b-kahbj1g3b3] {
        transform: translateY(-1px);
        box-shadow: 0 4px 15px rgba(0, 102, 255, 0.3);
    }

.login-prompt-btn-secondary[b-kahbj1g3b3] {
    background: white;
    color: #0066ff;
    border: 2px solid #0066ff;
}

    .login-prompt-btn-secondary:hover[b-kahbj1g3b3] {
        background: #f0f7ff;
        transform: translateY(-3px);
        box-shadow: 0 6px 20px rgba(0, 102, 255, 0.2);
    }

    .login-prompt-btn-secondary:active[b-kahbj1g3b3] {
        transform: translateY(-1px);
        background: #e6f2ff;
    }

.login-prompt-btn i[b-kahbj1g3b3] {
    font-size: 1.25rem;
}

/* Responsive Design */
@media (max-width: 768px) {
    .login-prompt-dialog[b-kahbj1g3b3] {
        width: 92%;
        max-width: 480px;
        padding: 2.5rem 2rem;
    }

    .login-prompt-icon[b-kahbj1g3b3] {
        width: 72px;
        height: 72px;
    }

        .login-prompt-icon i[b-kahbj1g3b3] {
            font-size: 2.25rem;
        }

    .login-prompt-title[b-kahbj1g3b3] {
        font-size: 1.75rem;
    }

    .login-prompt-message[b-kahbj1g3b3] {
        font-size: 1.05rem;
    }

    .login-prompt-btn[b-kahbj1g3b3] {
        padding: 1rem 1.75rem;
        font-size: 1.075rem;
    }

    .login-prompt-benefits[b-kahbj1g3b3] {
        padding: 1.25rem;
    }
}

@media (max-width: 576px) {
    .login-prompt-dialog[b-kahbj1g3b3] {
        width: 94%;
        padding: 2rem 1.5rem;
        border-radius: 20px;
    }

    .login-prompt-close[b-kahbj1g3b3] {
        top: 1.25rem;
        right: 1.25rem;
        width: 40px;
        height: 40px;
        font-size: 1.35rem;
    }

    .login-prompt-icon[b-kahbj1g3b3] {
        width: 68px;
        height: 68px;
        margin-bottom: 1.5rem;
    }

        .login-prompt-icon i[b-kahbj1g3b3] {
            font-size: 2rem;
        }

    .login-prompt-title[b-kahbj1g3b3] {
        font-size: 1.5rem;
    }

    .login-prompt-message[b-kahbj1g3b3] {
        font-size: 1rem;
        margin-bottom: 1.5rem;
    }

    .login-prompt-btn[b-kahbj1g3b3] {
        padding: 0.95rem 1.5rem;
        font-size: 1.05rem;
    }

    .login-prompt-benefits[b-kahbj1g3b3] {
        padding: 1.15rem;
        margin-bottom: 1.5rem;
        gap: 1rem;
    }

    .login-prompt-benefit[b-kahbj1g3b3] {
        font-size: 0.975rem;
    }

        .login-prompt-benefit i[b-kahbj1g3b3] {
            font-size: 1.25rem;
        }
}

/* Mobile Optimierung */
@media (max-width: 768px) {
    .favorite-btn[b-kahbj1g3b3] {
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
    }

    .favorite-btn-lg[b-kahbj1g3b3] {
        padding: 0.5rem 1rem;
        min-height: 44px;
    }
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
    .favorite-btn[b-kahbj1g3b3] {
        border-width: 2px;
    }

        .favorite-btn:focus-visible[b-kahbj1g3b3] {
            outline-width: 3px;
        }

    .login-prompt-dialog[b-kahbj1g3b3] {
        border: 3px solid currentColor;
    }

    .login-prompt-close[b-kahbj1g3b3] {
        border: 2px solid currentColor;
    }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    .favorite-btn[b-kahbj1g3b3],
    .favorite-btn i[b-kahbj1g3b3],
    .login-prompt-overlay[b-kahbj1g3b3],
    .login-prompt-dialog[b-kahbj1g3b3],
    .login-prompt-btn[b-kahbj1g3b3],
    .login-prompt-close[b-kahbj1g3b3] {
        transition: none;
        animation: none;
    }

        .favorite-btn:hover:not(:disabled)[b-kahbj1g3b3],
        .favorite-btn:active:not(:disabled)[b-kahbj1g3b3],
        .login-prompt-btn:hover[b-kahbj1g3b3],
        .login-prompt-btn:active[b-kahbj1g3b3],
        .login-prompt-close:hover[b-kahbj1g3b3] {
            transform: none;
        }

    .favorite-spinner[b-kahbj1g3b3] {
        animation: none;
    }
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
    .favorite-inactive[b-kahbj1g3b3] {
        color: #adb5bd;
        border-color: #adb5bd;
    }

        .favorite-inactive:hover:not(:disabled)[b-kahbj1g3b3] {
            background-color: #6c757d;
            border-color: #6c757d;
        }

    .favorite-active[b-kahbj1g3b3] {
        background-color: #0d6efd;
        border-color: #0d6efd;
    }

        .favorite-active:hover:not(:disabled)[b-kahbj1g3b3] {
            background-color: #0b5ed7;
            border-color: #0a58ca;
        }
}

/* Print Styles */
@media print {
    .favorite-btn[b-kahbj1g3b3],
    .login-prompt-overlay[b-kahbj1g3b3] {
        display: none !important;
    }
}

/* Scrollbar Styling für Dialog */
.login-prompt-dialog[b-kahbj1g3b3]::-webkit-scrollbar {
    width: 8px;
}

.login-prompt-dialog[b-kahbj1g3b3]::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

.login-prompt-dialog[b-kahbj1g3b3]::-webkit-scrollbar-thumb {
    background: #cbd5e0;
    border-radius: 10px;
}

    .login-prompt-dialog[b-kahbj1g3b3]::-webkit-scrollbar-thumb:hover {
        background: #a0aec0;
    }
/* _content/BotomixNew/Components/Pages/Favorites.razor.rz.scp.css */
/* Favorites.razor scoped styles - Modernes B2B Design für Botomix */

/* ========================================
   CONTAINER & LAYOUT
   ======================================== */

.favorites-page-container[b-xkvti62rev] {
    padding: 2rem;
    max-width: 1400px;
    margin: 0 auto;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 50%, #f1f3f4 100%);
    min-height: calc(100vh - 120px);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* ========================================
   HEADER SECTION
   ======================================== */

.favorites-header[b-xkvti62rev] {
    text-align: center;
    margin-bottom: 3rem;
    animation: fadeInUp-b-xkvti62rev 0.6s ease-out;
}

@keyframes fadeInUp-b-xkvti62rev {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.header-content[b-xkvti62rev] {
    margin-bottom: 2rem;
}

.header-icon[b-xkvti62rev] {
    font-size: 4rem;
    color: #0066ff;
    margin-bottom: 1rem;
    animation: heartBeat-b-xkvti62rev 1.5s ease-in-out infinite;
}

@keyframes heartBeat-b-xkvti62rev {
    0%, 100% {
        transform: scale(1);
    }

    10%, 30% {
        transform: scale(1.1);
    }

    20%, 40% {
        transform: scale(1.05);
    }
}

.page-title[b-xkvti62rev] {
    font-size: 3rem;
    font-weight: 700;
    color: #111827;
    margin-bottom: 0.75rem;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.page-subtitle[b-xkvti62rev] {
    font-size: 1.2rem;
    color: #6b7280;
    font-weight: 500;
    margin: 0;
}

/* Favorites Stats */
.favorites-stats[b-xkvti62rev] {
    display: flex;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap;
    animation: fadeInUp-b-xkvti62rev 0.6s ease-out 0.2s both;
}

.stat-item[b-xkvti62rev] {
    background: white;
    padding: 1.5rem 2.5rem;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border: 1px solid #e9ecef;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    transition: all 0.3s ease;
    min-width: 140px;
}

    .stat-item:hover[b-xkvti62rev] {
        transform: translateY(-4px);
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
    }

    .stat-item i[b-xkvti62rev] {
        font-size: 2rem;
        color: #0066ff;
    }

.stat-number[b-xkvti62rev] {
    font-size: 2rem;
    font-weight: 700;
    color: #111827;
}

.stat-label[b-xkvti62rev] {
    font-size: 0.9rem;
    color: #6b7280;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ========================================
   LOADING STATE
   ======================================== */

.loading-container[b-xkvti62rev] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    gap: 1.5rem;
}

.loading-spinner[b-xkvti62rev] {
    width: 60px;
    height: 60px;
    border: 4px solid #e9ecef;
    border-top-color: #0066ff;
    border-radius: 50%;
    animation: spin-b-xkvti62rev 0.8s linear infinite;
}

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

.loading-text[b-xkvti62rev] {
    font-size: 1.1rem;
    color: #6b7280;
    font-weight: 500;
}

/* ========================================
   NOT AUTHENTICATED STATE
   ======================================== */

.not-authenticated-container[b-xkvti62rev] {
    display: flex;
    justify-content: center;
    padding: 3rem 1rem;
}

.not-authenticated-card[b-xkvti62rev] {
    background: white;
    border-radius: 20px;
    padding: 3rem 2.5rem;
    text-align: center;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
    border: 1px solid #e9ecef;
    max-width: 550px;
    animation: slideInUp-b-xkvti62rev 0.6s ease-out;
}

@keyframes slideInUp-b-xkvti62rev {
    from {
        opacity: 0;
        transform: translateY(40px) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.not-authenticated-icon[b-xkvti62rev] {
    width: 90px;
    height: 90px;
    background: linear-gradient(135deg, #fee2e2, #fecaca);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 2rem;
    box-shadow: 0 10px 30px rgba(220, 38, 38, 0.2);
}

    .not-authenticated-icon i[b-xkvti62rev] {
        font-size: 2.5rem;
        color: #dc2626;
    }

.not-authenticated-title[b-xkvti62rev] {
    font-size: 2rem;
    font-weight: 700;
    color: #111827;
    margin-bottom: 1rem;
}

.not-authenticated-message[b-xkvti62rev] {
    font-size: 1.1rem;
    color: #6b7280;
    line-height: 1.6;
    margin-bottom: 2rem;
}

.not-authenticated-actions[b-xkvti62rev] {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* ========================================
   EMPTY STATE
   ======================================== */

.empty-state-container[b-xkvti62rev] {
    display: flex;
    justify-content: center;
    padding: 3rem 1rem;
}

.empty-state-card[b-xkvti62rev] {
    background: white;
    border-radius: 20px;
    padding: 3rem 2.5rem;
    text-align: center;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
    border: 1px solid #e9ecef;
    max-width: 550px;
    animation: slideInUp-b-xkvti62rev 0.6s ease-out;
}

.empty-state-icon[b-xkvti62rev] {
    width: 90px;
    height: 90px;
    background: linear-gradient(135deg, #dbeafe, #bfdbfe);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 2rem;
    box-shadow: 0 10px 30px rgba(0, 102, 255, 0.2);
}

    .empty-state-icon i[b-xkvti62rev] {
        font-size: 2.5rem;
        color: #0066ff;
    }

.empty-state-title[b-xkvti62rev] {
    font-size: 2rem;
    font-weight: 700;
    color: #111827;
    margin-bottom: 1rem;
}

.empty-state-message[b-xkvti62rev] {
    font-size: 1.1rem;
    color: #6b7280;
    line-height: 1.6;
    margin-bottom: 2rem;
}

.empty-state-actions[b-xkvti62rev] {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* ========================================
   FAVORITES GRID
   ======================================== */

.favorites-grid[b-xkvti62rev] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 2rem;
    margin-bottom: 2rem;
}

/* ========================================
   FAVORITE CARDS
   ======================================== */

.favorite-card[b-xkvti62rev] {
    background: white;
    border-radius: 16px;
    padding: 2rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border: 1px solid #e9ecef;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

    .favorite-card:hover[b-xkvti62rev] {
        transform: translateY(-6px);
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
    }

/* Category Badge */
.category-badge[b-xkvti62rev] {
    position: absolute;
    top: 1rem;
    left: 1rem;
    background: linear-gradient(135deg, #0066ff, #0052cc);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 8px rgba(0, 102, 255, 0.3);
    z-index: 2;
}

/* Favorite Button Wrapper */
.favorite-btn-wrapper[b-xkvti62rev] {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 2;
}

/* Card Icon Container */
.card-icon-container[b-xkvti62rev] {
    width: 100%;
    height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: 12px;
    margin-bottom: 1.5rem;
    overflow: hidden;
    position: relative;
}

    .card-icon-container i[b-xkvti62rev] {
        font-size: 5rem;
        color: #0066ff;
        opacity: 0.3;
    }

    .card-icon-container img.robot-image[b-xkvti62rev] {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.3s ease;
    }

.favorite-card:hover .card-icon-container img.robot-image[b-xkvti62rev] {
    transform: scale(1.05);
}

/* Card Info */
.card-info[b-xkvti62rev] {
    flex: 1;
    margin-bottom: 1rem;
}

.card-title[b-xkvti62rev] {
    font-size: 1.25rem;
    font-weight: 700;
    color: #111827;
    margin-bottom: 0.5rem;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.card-manufacturer[b-xkvti62rev] {
    font-size: 0.95rem;
    color: #0066ff;
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.card-description[b-xkvti62rev] {
    font-size: 0.95rem;
    color: #6b7280;
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Card Specs */
.card-specs[b-xkvti62rev] {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 1rem 0;
    border-top: 1px solid #e9ecef;
    border-bottom: 1px solid #e9ecef;
    margin-bottom: 1.5rem;
}

.spec-item[b-xkvti62rev] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    color: #374151;
    font-weight: 500;
}

    .spec-item i[b-xkvti62rev] {
        color: #0066ff;
        font-size: 1.1rem;
    }

/* Card Actions */
.card-actions[b-xkvti62rev] {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

/* ========================================
   BUTTONS
   ======================================== */

.btn[b-xkvti62rev] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border-radius: 10px;
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
    transition: all 0.3s ease;
    border: 2px solid transparent;
    cursor: pointer;
    white-space: nowrap;
    pointer-events: auto; /* ✅ WICHTIG: Explizit aktivieren */
}

.btn-sm[b-xkvti62rev] {
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
}

.btn-primary[b-xkvti62rev] {
    background: linear-gradient(135deg, #0066ff, #0052cc);
    color: white;
    border: none;
}

    .btn-primary:hover[b-xkvti62rev] {
        color: white;
        text-decoration: none;
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(0, 102, 255, 0.35);
    }

.btn-outline-primary[b-xkvti62rev] {
    background: white;
    color: #0066ff;
    border-color: #0066ff;
}

    .btn-outline-primary:hover[b-xkvti62rev] {
        background: #0066ff;
        color: white;
        text-decoration: none;
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(0, 102, 255, 0.3);
    }

.btn-outline-secondary[b-xkvti62rev] {
    background: white;
    color: #6b7280;
    border-color: #e9ecef;
}

    .btn-outline-secondary:hover:not(:disabled)[b-xkvti62rev] {
        background: #f8f9fa;
        color: #374151;
        text-decoration: none;
        border-color: #cbd5e0;
    }

.btn:disabled[b-xkvti62rev] {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
}

.btn-outline-danger[b-xkvti62rev] {
    background: white;
    color: #dc2626;
    border-color: #dc2626;
}

    .btn-outline-danger:hover:not(:disabled)[b-xkvti62rev] {
        background: #dc2626;
        color: white;
        text-decoration: none;
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(220, 38, 38, 0.3);
    }

    .btn-outline-danger:disabled[b-xkvti62rev] {
        opacity: 0.6;
        cursor: not-allowed;
    }

.btn-danger[b-xkvti62rev] {
    background: linear-gradient(135deg, #dc2626, #b91c1c);
    color: white;
    border: none;
    pointer-events: auto; /* ✅ WICHTIG: Explizit aktivieren */
}

    .btn-danger:hover:not(:disabled)[b-xkvti62rev] {
        color: white;
        text-decoration: none;
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(220, 38, 38, 0.4);
    }

    .btn-danger:disabled[b-xkvti62rev] {
        opacity: 0.6;
        cursor: not-allowed;
        pointer-events: none;
    }

.btn:active:not(:disabled)[b-xkvti62rev] {
    transform: scale(0.98);
}

/* Clear All Button - Besondere Hervorhebung */
.btn-clear-all[b-xkvti62rev] {
    font-size: 1.05rem;
    padding: 0.875rem 2rem;
}

/* Spinner für Buttons */
.spinner-border[b-xkvti62rev] {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    vertical-align: text-bottom;
    border: 0.125em solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spinner-border-b-xkvti62rev 0.75s linear infinite;
}

.spinner-border-sm[b-xkvti62rev] {
    width: 0.875rem;
    height: 0.875rem;
    border-width: 0.1em;
}

@keyframes spinner-border-b-xkvti62rev {
    to {
        transform: rotate(360deg);
    }
}

/* ========================================
   FOOTER ACTIONS
   ======================================== */

.favorites-footer[b-xkvti62rev] {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 2px solid #e9ecef;
    animation: fadeInUp-b-xkvti62rev 0.6s ease-out 0.5s both;
}

.footer-actions[b-xkvti62rev] {
    display: flex;
    justify-content: center;
    gap: 1rem;
}

/* ========================================
   SUCCESS TOAST
   ======================================== */

.success-toast[b-xkvti62rev] {
    position: fixed;
    top: 2rem;
    right: 2rem;
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
    padding: 1rem 1.5rem;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(16, 185, 129, 0.4);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-weight: 600;
    font-size: 1rem;
    z-index: 100000;
    animation: slideInFromRight-b-xkvti62rev 0.4s ease-out, fadeOut-b-xkvti62rev 0.4s ease-out 2.6s;
}

    .success-toast i[b-xkvti62rev] {
        font-size: 1.5rem;
    }

@keyframes slideInFromRight-b-xkvti62rev {
    from {
        transform: translateX(400px);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes fadeOut-b-xkvti62rev {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

/* ========================================
   MODAL / DIALOG - ✅ KORRIGIERT
   ======================================== */

.modal-overlay[b-xkvti62rev] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(5px);
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn-b-xkvti62rev 0.3s ease-out;
    /* ✅ Wichtig: Overlay soll Klicks empfangen können um zu schließen */
}

@keyframes fadeIn-b-xkvti62rev {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.modal-dialog[b-xkvti62rev] {
    position: relative; /* ✅ NEU: Explizite Position */
    background: white;
    border-radius: 20px;
    max-width: 550px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.35);
    animation: slideUpDialog-b-xkvti62rev 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    z-index: 1000000; /* ✅ NEU: Höherer z-index als Overlay */
    pointer-events: auto; /* ✅ NEU: Explizit aktivieren */
}

@keyframes slideUpDialog-b-xkvti62rev {
    from {
        transform: translateY(40px) scale(0.95);
        opacity: 0;
    }

    to {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

.modal-header[b-xkvti62rev] {
    padding: 2rem 2rem 1rem;
    border-bottom: 1px solid #e9ecef;
    position: relative;
    pointer-events: auto; /* ✅ NEU */
}

.modal-title[b-xkvti62rev] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #111827;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0;
}

    .modal-title i[b-xkvti62rev] {
        color: #dc2626;
        font-size: 1.75rem;
    }

.modal-close[b-xkvti62rev] {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    background: #f8f9fa;
    border: none;
    color: #6c757d;
    font-size: 1.5rem;
    cursor: pointer;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s ease;
    pointer-events: auto; /* ✅ NEU */
    z-index: 10;
}

    .modal-close:hover[b-xkvti62rev] {
        background: #e9ecef;
        color: #dc2626;
        transform: rotate(90deg);
    }

.modal-body[b-xkvti62rev] {
    padding: 2rem;
    pointer-events: auto; /* ✅ NEU */
}

    .modal-body p[b-xkvti62rev] {
        font-size: 1.05rem;
        color: #6b7280;
        line-height: 1.6;
        margin-bottom: 1.5rem;
    }

.confirmation-stats[b-xkvti62rev] {
    background: #f8f9fa;
    border-radius: 12px;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.confirm-stat[b-xkvti62rev] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1rem;
    color: #374151;
    font-weight: 500;
}

    .confirm-stat i[b-xkvti62rev] {
        color: #0066ff;
        font-size: 1.25rem;
        width: 24px;
    }

.modal-footer[b-xkvti62rev] {
    padding: 1rem 2rem 2rem;
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    pointer-events: auto; /* ✅ NEU: Sehr wichtig für Buttons */
}

    /* ✅ ZUSÄTZLICHE SICHERHEIT: Alle Buttons im Modal explizit klickbar machen */
    .modal-footer .btn[b-xkvti62rev] {
        pointer-events: auto !important;
    }

        .modal-footer .btn:not(:disabled)[b-xkvti62rev] {
            cursor: pointer !important;
        }

/* ========================================
   RESPONSIVE DESIGN
   ======================================== */

@media (max-width: 1200px) {
    .favorites-page-container[b-xkvti62rev] {
        padding: 1.5rem;
    }

    .favorites-grid[b-xkvti62rev] {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: 1.5rem;
    }
}

@media (max-width: 768px) {
    .favorites-page-container[b-xkvti62rev] {
        padding: 1rem;
    }

    .page-title[b-xkvti62rev] {
        font-size: 2.25rem;
    }

    .favorites-stats[b-xkvti62rev] {
        gap: 1rem;
    }

    .stat-item[b-xkvti62rev] {
        padding: 1rem 1.5rem;
        min-width: 120px;
    }

    .favorites-grid[b-xkvti62rev] {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }

    .favorite-card[b-xkvti62rev] {
        padding: 1.5rem;
    }

    .modal-dialog[b-xkvti62rev] {
        width: 92%;
    }

    .modal-header[b-xkvti62rev],
    .modal-body[b-xkvti62rev],
    .modal-footer[b-xkvti62rev] {
        padding: 1.5rem;
    }

    .success-toast[b-xkvti62rev] {
        top: 1rem;
        right: 1rem;
        left: 1rem;
        font-size: 0.95rem;
        padding: 0.875rem 1.25rem;
    }
}

@media (max-width: 576px) {
    .page-title[b-xkvti62rev] {
        font-size: 1.875rem;
    }

    .page-subtitle[b-xkvti62rev] {
        font-size: 1rem;
    }

    .favorites-stats[b-xkvti62rev] {
        flex-direction: column;
        gap: 0.75rem;
    }

    .stat-item[b-xkvti62rev] {
        flex-direction: row;
        width: 100%;
        justify-content: center;
    }

    .empty-state-card[b-xkvti62rev],
    .not-authenticated-card[b-xkvti62rev] {
        padding: 2rem 1.5rem;
    }

    .empty-state-actions[b-xkvti62rev],
    .not-authenticated-actions[b-xkvti62rev] {
        flex-direction: column;
    }

        .empty-state-actions .btn[b-xkvti62rev],
        .not-authenticated-actions .btn[b-xkvti62rev] {
            width: 100%;
        }

    .card-actions[b-xkvti62rev] {
        flex-direction: column;
    }

        .card-actions .btn[b-xkvti62rev] {
            width: 100%;
        }

    .modal-footer[b-xkvti62rev] {
        flex-direction: column-reverse;
    }

        .modal-footer .btn[b-xkvti62rev] {
            width: 100%;
        }

    .footer-actions[b-xkvti62rev] {
        flex-direction: column;
    }

        .footer-actions .btn[b-xkvti62rev] {
            width: 100%;
        }
}

/* ========================================
   ACCESSIBILITY
   ======================================== */

.btn:focus[b-xkvti62rev],
.modal-close:focus[b-xkvti62rev] {
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 102, 255, 0.25);
}

.favorite-card:focus[b-xkvti62rev] {
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 102, 255, 0.25);
}

/* ========================================
   REDUCED MOTION
   ======================================== */

@media (prefers-reduced-motion: reduce) {
    *[b-xkvti62rev],
    *[b-xkvti62rev]::before,
    *[b-xkvti62rev]::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .header-icon[b-xkvti62rev] {
        animation: none;
    }
}

/* ========================================
   PRINT STYLES
   ======================================== */

@media print {
    .favorites-page-container[b-xkvti62rev] {
        padding: 0;
        background: white;
    }

    .favorite-card[b-xkvti62rev] {
        box-shadow: none;
        border: 1px solid #ddd;
        break-inside: avoid;
    }

    .btn[b-xkvti62rev],
    .favorites-footer[b-xkvti62rev],
    .favorite-btn-wrapper[b-xkvti62rev],
    .success-toast[b-xkvti62rev] {
        display: none;
    }
}

/* ========================================
   SCROLLBAR STYLING
   ======================================== */

.favorites-page-container[b-xkvti62rev]::-webkit-scrollbar {
    width: 10px;
}

.favorites-page-container[b-xkvti62rev]::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

.favorites-page-container[b-xkvti62rev]::-webkit-scrollbar-thumb {
    background: #cbd5e0;
    border-radius: 10px;
}

    .favorites-page-container[b-xkvti62rev]::-webkit-scrollbar-thumb:hover {
        background: #a0aec0;
    }
/* _content/BotomixNew/Components/Pages/Home.razor.rz.scp.css */
/* Simple Home Page CSS */
.home-page[b-re4lrlvyyp] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Visually Hidden Class for Screen Readers */
.visually-hidden[b-re4lrlvyyp] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* Wizard Banner - Botomix Blau Design */
.wizard-banner[b-re4lrlvyyp] {
    background: linear-gradient(135deg, #0066ff 0%, #0052cc 100%);
    border-radius: 16px;
    padding: 35px 40px;
    margin-top: 40px; /* NEU: Abstand zur Navigation */
    margin-bottom: 40px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 102, 255, 0.3);
}

    .wizard-banner[b-re4lrlvyyp]::before {
        content: '';
        position: absolute;
        top: -100px;
        right: -100px;
        width: 300px;
        height: 300px;
        background: radial-gradient(circle, rgba(255,255,255,0.15) 0%, transparent 70%);
        border-radius: 50%;
    }

.wizard-content[b-re4lrlvyyp] {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 40px;
    align-items: center;
    position: relative;
    z-index: 1;
}

.wizard-left h2[b-re4lrlvyyp] {
    font-size: 1.75rem;
    font-weight: 700;
    color: white;
    margin-bottom: 12px;
    line-height: 1.25;
}

.wizard-left p[b-re4lrlvyyp] {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.95);
    margin-bottom: 25px;
    line-height: 1.5;
}

.wizard-badge[b-re4lrlvyyp] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(10px);
    padding: 6px 14px;
    border-radius: 20px;
    margin-bottom: 15px;
    border: 1px solid rgba(255, 255, 255, 0.4);
}

    .wizard-badge i[b-re4lrlvyyp] {
        color: #ffd700;
        font-size: 0.9rem;
    }

    .wizard-badge span[b-re4lrlvyyp] {
        color: white;
        font-weight: 700;
        font-size: 0.75rem;
        text-transform: uppercase;
        letter-spacing: 1px;
    }

.wizard-start-btn[b-re4lrlvyyp] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: white;
    color: #0066ff;
    padding: 14px 28px;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 700;
    font-size: 1rem;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

    .wizard-start-btn:hover[b-re4lrlvyyp],
    .wizard-start-btn:focus[b-re4lrlvyyp] {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
        background: #f8f9fa;
        outline: 2px solid #ffd700;
        outline-offset: 2px;
    }

    .wizard-start-btn i:last-child[b-re4lrlvyyp] {
        transition: transform 0.3s ease;
    }

    .wizard-start-btn:hover i:last-child[b-re4lrlvyyp] {
        transform: translateX(4px);
    }

.wizard-categories[b-re4lrlvyyp] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.wizard-cat[b-re4lrlvyyp] {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    padding: 18px 15px;
    border-radius: 12px;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

    .wizard-cat:hover[b-re4lrlvyyp],
    .wizard-cat:focus[b-re4lrlvyyp] {
        background: rgba(255, 255, 255, 0.3);
        border-color: rgba(255, 255, 255, 0.5);
        transform: translateY(-3px);
        outline: 2px solid rgba(255, 255, 255, 0.8);
        outline-offset: 2px;
    }

    .wizard-cat i[b-re4lrlvyyp] {
        font-size: 1.8rem;
        color: white;
    }

    .wizard-cat span[b-re4lrlvyyp] {
        color: white;
        font-weight: 600;
        font-size: 0.9rem;
    }

/* Hero Section - Hellerer Blauton */
.hero[b-re4lrlvyyp] {
    background: linear-gradient(135deg, #3d8bfd 0%, #0d6efd 100%);
    color: white;
    padding: 60px 30px;
    border-radius: 12px;
    text-align: center;
    margin-bottom: 40px;
}

    .hero h1[b-re4lrlvyyp] {
        font-size: 2.5rem;
        margin-bottom: 15px;
        font-weight: 700;
    }

    .hero p[b-re4lrlvyyp] {
        font-size: 1.2rem;
        margin-bottom: 30px;
        opacity: 0.95;
    }

.stats[b-re4lrlvyyp] {
    display: flex;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
}

.stat[b-re4lrlvyyp] {
    text-align: center;
}

    .stat .number[b-re4lrlvyyp] {
        display: block;
        font-size: 2rem;
        font-weight: 700;
        margin-bottom: 5px;
    }

    .stat .label[b-re4lrlvyyp] {
        font-size: 0.9rem;
        opacity: 0.95;
    }

/* Sections */
.actions[b-re4lrlvyyp], .robots[b-re4lrlvyyp], .benefits[b-re4lrlvyyp], .cta[b-re4lrlvyyp] {
    margin-bottom: 50px;
}

    .actions h2[b-re4lrlvyyp], .robots h2[b-re4lrlvyyp], .benefits h2[b-re4lrlvyyp] {
        font-size: 1.8rem;
        margin-bottom: 10px;
        color: #2d3748;
    }

    .actions p[b-re4lrlvyyp] {
        color: #718096;
        margin-bottom: 30px;
    }

/* Section Headers */
.section-header[b-re4lrlvyyp] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
}

    .section-header h2[b-re4lrlvyyp] {
        margin: 0;
    }

.see-all[b-re4lrlvyyp] {
    color: #0066ff;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.2s ease;
}

    .see-all:hover[b-re4lrlvyyp],
    .see-all:focus[b-re4lrlvyyp] {
        text-decoration: underline;
        transform: translateX(4px);
        outline: 2px solid #0066ff;
        outline-offset: 4px;
    }

/* Action Cards */
.action-grid[b-re4lrlvyyp] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}

.action-card[b-re4lrlvyyp] {
    background: white;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

    .action-card:hover[b-re4lrlvyyp],
    .action-card:focus-within[b-re4lrlvyyp] {
        transform: translateY(-4px);
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
    }

    .action-card.featured[b-re4lrlvyyp] {
        background: #ffc107;
        color: white;
    }

    .action-card i[b-re4lrlvyyp] {
        font-size: 2.5rem;
        color: #0066ff;
        margin-bottom: 15px;
    }

    .action-card.featured i[b-re4lrlvyyp] {
        color: white;
    }

    .action-card h3[b-re4lrlvyyp] {
        font-size: 1.2rem;
        margin-bottom: 10px;
        color: #2d3748;
    }

    .action-card.featured h3[b-re4lrlvyyp] {
        color: white;
    }

    .action-card p[b-re4lrlvyyp] {
        color: #718096;
        margin-bottom: 20px;
        line-height: 1.5;
    }

    .action-card.featured p[b-re4lrlvyyp] {
        color: rgba(255, 255, 255, 0.9);
    }

/* Robot Cards - Enhanced Design */
.robot-grid[b-re4lrlvyyp] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 20px;
}

.robot-card[b-re4lrlvyyp] {
    background: white;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    position: relative;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
}

    .robot-card:hover[b-re4lrlvyyp],
    .robot-card:focus-within[b-re4lrlvyyp] {
        transform: translateY(-8px);
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
    }

.robot-favorite[b-re4lrlvyyp] {
    position: absolute;
    top: 15px;
    right: 15px;
    z-index: 10;
}

.robot-badge[b-re4lrlvyyp] {
    position: absolute;
    top: 15px;
    left: 15px;
    background: #0066ff;
    color: white;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    z-index: 5;
}

.robot-icon[b-re4lrlvyyp] {
    text-align: center;
    font-size: 3rem;
    color: #cbd5e0;
    margin: 20px 0;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
}

.robot-card:hover .robot-icon[b-re4lrlvyyp] {
    transform: scale(1.05);
}

.robot-card h3[b-re4lrlvyyp] {
    font-size: 1.1rem;
    margin-bottom: 5px;
    color: #2d3748;
    font-weight: 700;
}

.robot-title-link[b-re4lrlvyyp] {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
}

    .robot-title-link[b-re4lrlvyyp]::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1;
    }

    .robot-title-link:hover[b-re4lrlvyyp],
    .robot-title-link:focus[b-re4lrlvyyp] {
        color: #0066ff;
        outline: 2px solid #0066ff;
        outline-offset: 2px;
    }

.manufacturer[b-re4lrlvyyp] {
    color: #0066ff;
    font-size: 0.9rem;
    margin-bottom: 15px;
    font-weight: 600;
}

/* DL Element for Specs */
.specs[b-re4lrlvyyp] {
    display: flex;
    gap: 15px;
    margin-bottom: 15px;
    padding-top: 15px;
    border-top: 1px solid #e2e8f0;
    flex-wrap: wrap;
}

    .specs div[b-re4lrlvyyp] {
        display: flex;
        align-items: center;
        gap: 5px;
        color: #718096;
        font-size: 0.85rem;
        background: #f8f9fa;
        padding: 4px 8px;
        border-radius: 6px;
    }

    .specs dd[b-re4lrlvyyp] {
        margin: 0;
        display: flex;
        align-items: center;
        gap: 5px;
    }

    .specs span[b-re4lrlvyyp] {
        display: flex;
        align-items: center;
        gap: 5px;
        color: #718096;
        font-size: 0.85rem;
        background: #f8f9fa;
        padding: 4px 8px;
        border-radius: 6px;
    }

        .specs span i[b-re4lrlvyyp],
        .specs dd i[b-re4lrlvyyp] {
            font-size: 0.9em;
            color: #0066ff;
        }

.buttons[b-re4lrlvyyp] {
    display: flex;
    gap: 10px;
    margin-top: auto;
    position: relative;
    z-index: 2;
}

/* Benefits */
.benefit-grid[b-re4lrlvyyp] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
}

.benefit[b-re4lrlvyyp] {
    text-align: center;
    padding: 20px;
}

    .benefit i[b-re4lrlvyyp] {
        font-size: 2.5rem;
        color: #0066ff;
        margin-bottom: 15px;
    }

    .benefit h3[b-re4lrlvyyp] {
        font-size: 1.1rem;
        margin-bottom: 10px;
        color: #2d3748;
    }

    .benefit p[b-re4lrlvyyp] {
        color: #718096;
        line-height: 1.5;
    }

/* Call to Action */
.cta[b-re4lrlvyyp] {
    background: #0066ff;
    color: white;
    padding: 50px 30px;
    border-radius: 12px;
    text-align: center;
}

    .cta h2[b-re4lrlvyyp] {
        font-size: 2rem;
        margin-bottom: 15px;
    }

    .cta p[b-re4lrlvyyp] {
        font-size: 1.1rem;
        margin-bottom: 30px;
        opacity: 0.9;
    }

.cta-buttons[b-re4lrlvyyp] {
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
}

/* Buttons */
.btn[b-re4lrlvyyp], .btn-primary[b-re4lrlvyyp], .btn-secondary[b-re4lrlvyyp], .btn-large[b-re4lrlvyyp] {
    display: inline-block;
    padding: 10px 20px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    border: none;
    cursor: pointer;
    text-align: center;
    transition: all 0.2s ease;
}

.btn[b-re4lrlvyyp], .btn-primary[b-re4lrlvyyp] {
    background: #0066ff;
    color: white;
}

.btn-secondary[b-re4lrlvyyp] {
    background: #f5f7fa;
    color: #4a5568;
    border: 1px solid #e2e8f0;
}

.btn-large[b-re4lrlvyyp] {
    padding: 15px 30px;
    font-size: 1.1rem;
    background: white;
    color: #0066ff;
}

    .btn-large.secondary[b-re4lrlvyyp] {
        background: transparent;
        color: white;
        border: 2px solid white;
    }

.btn:hover[b-re4lrlvyyp], .btn-primary:hover[b-re4lrlvyyp],
.btn:focus[b-re4lrlvyyp], .btn-primary:focus[b-re4lrlvyyp] {
    background: #0052cc;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 102, 255, 0.3);
    outline: 2px solid #ffd700;
    outline-offset: 2px;
}

.btn-secondary:hover[b-re4lrlvyyp],
.btn-secondary:focus[b-re4lrlvyyp] {
    background: #e2e8f0;
    transform: translateY(-2px);
    outline: 2px solid #0066ff;
    outline-offset: 2px;
}

.btn-large:hover[b-re4lrlvyyp],
.btn-large:focus[b-re4lrlvyyp] {
    background: #f5f7fa;
    transform: translateY(-2px);
    outline: 2px solid #0066ff;
    outline-offset: 2px;
}

.btn-large.secondary:hover[b-re4lrlvyyp],
.btn-large.secondary:focus[b-re4lrlvyyp] {
    background: white;
    color: #0066ff;
    transform: translateY(-2px);
}

/* Loading State */
.text-center[b-re4lrlvyyp] {
    text-align: center;
}

.py-5[b-re4lrlvyyp] {
    padding: 3rem 0;
}

.py-4[b-re4lrlvyyp] {
    padding: 2rem 0;
}

.mt-3[b-re4lrlvyyp] {
    margin-top: 1rem;
}

.spinner-border[b-re4lrlvyyp] {
    display: inline-block;
    width: 2rem;
    height: 2rem;
    vertical-align: -0.125em;
    border: 0.25em solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spinner-border-b-re4lrlvyyp 0.75s linear infinite;
}

@keyframes spinner-border-b-re4lrlvyyp {
    to {
        transform: rotate(360deg);
    }
}

.text-primary[b-re4lrlvyyp] {
    color: #0066ff;
}

.text-muted[b-re4lrlvyyp] {
    color: #718096;
}

/* Focus Visible for Keyboard Navigation */
*:focus-visible[b-re4lrlvyyp] {
    outline: 2px solid #0066ff;
    outline-offset: 2px;
}

/* Mobile Responsive */
@media (max-width: 968px) {
    .wizard-content[b-re4lrlvyyp] {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .wizard-banner[b-re4lrlvyyp] {
        padding: 30px 25px;
        margin-top: 30px; /* Angepasst für Tablets */
    }

    .wizard-left h2[b-re4lrlvyyp] {
        font-size: 1.5rem;
    }
}

@media (max-width: 768px) {
    .home-page[b-re4lrlvyyp] {
        padding: 0 15px;
    }

    .wizard-banner[b-re4lrlvyyp] {
        padding: 25px 20px;
        margin-top: 20px; /* Etwas weniger auf Mobile */
        margin-bottom: 30px;
    }

    .wizard-left h2[b-re4lrlvyyp] {
        font-size: 1.4rem;
    }

    .wizard-left p[b-re4lrlvyyp] {
        font-size: 0.95rem;
    }

    .wizard-start-btn[b-re4lrlvyyp] {
        width: 100%;
        justify-content: center;
        font-size: 0.95rem;
        padding: 12px 24px;
    }

    .wizard-categories[b-re4lrlvyyp] {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .wizard-cat[b-re4lrlvyyp] {
        padding: 15px 12px;
    }

        .wizard-cat i[b-re4lrlvyyp] {
            font-size: 1.5rem;
        }

        .wizard-cat span[b-re4lrlvyyp] {
            font-size: 0.85rem;
        }

    .hero[b-re4lrlvyyp] {
        padding: 40px 20px;
    }

        .hero h1[b-re4lrlvyyp] {
            font-size: 1.8rem;
        }

    .stats[b-re4lrlvyyp] {
        gap: 25px;
    }

    .action-grid[b-re4lrlvyyp] {
        grid-template-columns: 1fr;
    }

    .robot-grid[b-re4lrlvyyp] {
        grid-template-columns: 1fr;
    }

    .benefit-grid[b-re4lrlvyyp] {
        grid-template-columns: 1fr;
    }

    .cta-buttons[b-re4lrlvyyp] {
        flex-direction: column;
        align-items: center;
    }

    .btn-large[b-re4lrlvyyp] {
        width: 100%;
        max-width: 300px;
    }

    .section-header[b-re4lrlvyyp] {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
    .robot-card[b-re4lrlvyyp],
    .action-card[b-re4lrlvyyp],
    .robot-icon[b-re4lrlvyyp],
    .btn[b-re4lrlvyyp],
    .btn-primary[b-re4lrlvyyp],
    .btn-secondary[b-re4lrlvyyp],
    .btn-large[b-re4lrlvyyp],
    .wizard-cat[b-re4lrlvyyp],
    .wizard-start-btn[b-re4lrlvyyp] {
        transition: none;
        animation: none;
    }

        .robot-card:hover[b-re4lrlvyyp],
        .action-card:hover[b-re4lrlvyyp] {
            transform: none;
        }
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
    .wizard-banner[b-re4lrlvyyp],
    .hero[b-re4lrlvyyp],
    .cta[b-re4lrlvyyp] {
        border: 2px solid currentColor;
    }

    .btn[b-re4lrlvyyp],
    .btn-primary[b-re4lrlvyyp],
    .btn-secondary[b-re4lrlvyyp],
    .btn-large[b-re4lrlvyyp] {
        border: 2px solid currentColor;
    }
}
/* _content/BotomixNew/Components/Pages/Knowledge/Branchen/Gastgewerbe/Artikel/ServiceroboterHospitalityTypen.razor.rz.scp.css */
/* ========================================
   SERVICEROBOTER HOSPITALITY - MODERN DESIGN
   Optimiert für professionelle Darstellung
   ======================================== */

/* =========================
   BASE STYLES & LAYOUT
   ========================= */

.article-page.hospitality[b-e2uvqoxj40] {
    background: linear-gradient(180deg, #fffbf0 0%, #ffffff 40%, #ffffff 100%);
    min-height: calc(100vh - 200px);
    padding: 3rem 2rem;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', sans-serif;
}

.article-outer-container[b-e2uvqoxj40] {
    max-width: 1440px;
    margin: 0 auto;
}

/* =========================
   BREADCRUMB NAVIGATION
   ========================= */

.breadcrumb-nav[b-e2uvqoxj40] {
    margin-bottom: 2.5rem;
    animation: fadeInDown-b-e2uvqoxj40 0.6s ease-out;
}

.breadcrumb[b-e2uvqoxj40] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 0.875rem;
}

.breadcrumb-item[b-e2uvqoxj40] {
    color: #64748b;
    font-weight: 500;
}

    .breadcrumb-item a[b-e2uvqoxj40] {
        color: #f97316;
        text-decoration: none;
        transition: all 0.2s ease;
        position: relative;
    }

        .breadcrumb-item a[b-e2uvqoxj40]::after {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            width: 0;
            height: 2px;
            background: #f97316;
            transition: width 0.3s ease;
        }

        .breadcrumb-item a:hover[b-e2uvqoxj40] {
            color: #ea580c;
        }

            .breadcrumb-item a:hover[b-e2uvqoxj40]::after {
                width: 100%;
            }

    .breadcrumb-item + .breadcrumb-item[b-e2uvqoxj40]::before {
        content: "›";
        margin-right: 0.5rem;
        color: #cbd5e1;
        font-weight: 400;
    }

    .breadcrumb-item.active[b-e2uvqoxj40] {
        color: #1e293b;
        font-weight: 600;
    }

/* =========================
   ARTICLE HEADER
   ========================= */

.article-header[b-e2uvqoxj40] {
    margin-bottom: 4rem;
    padding-bottom: 2.5rem;
    border-bottom: 1px solid #e2e8f0;
    animation: fadeInUp-b-e2uvqoxj40 0.8s ease-out;
}

.article-badge[b-e2uvqoxj40] {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.625rem 1.25rem;
    background: linear-gradient(135deg, #fb923c 0%, #f97316 100%);
    color: white;
    border-radius: 100px;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.3px;
    margin-bottom: 2rem;
    box-shadow: 0 2px 8px rgba(251, 146, 60, 0.3);
    transition: all 0.3s ease;
}

    .article-badge:hover[b-e2uvqoxj40] {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(251, 146, 60, 0.4);
    }

    .article-badge svg[b-e2uvqoxj40] {
        flex-shrink: 0;
        opacity: 0.95;
    }

.article-header h1[b-e2uvqoxj40] {
    font-size: 3rem;
    font-weight: 900;
    color: #0f172a;
    line-height: 1.15;
    margin-bottom: 1.5rem;
    letter-spacing: -0.5px;
    background: linear-gradient(135deg, #0f172a 0%, #334155 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.article-lead[b-e2uvqoxj40] {
    font-size: 1.25rem;
    line-height: 1.7;
    color: #475569;
    margin-bottom: 2rem;
    font-weight: 400;
    max-width: 90%;
}

.article-meta[b-e2uvqoxj40] {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    font-size: 0.9375rem;
    color: #64748b;
}

    .article-meta span[b-e2uvqoxj40] {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        font-weight: 500;
    }

        .article-meta span i[b-e2uvqoxj40] {
            color: #f97316;
            opacity: 0.8;
        }

/* =========================
   CONTENT WRAPPER & SIDEBAR
   ========================= */

.content-wrapper-with-sidebar[b-e2uvqoxj40] {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 4rem;
    align-items: start;
}

/* =========================
   TABLE OF CONTENTS SIDEBAR
   ========================= */

.table-of-contents-sidebar[b-e2uvqoxj40] {
    position: sticky;
    top: 2rem;
    background: linear-gradient(135deg, #fffbf5 0%, #fff 100%);
    border: 1px solid #fed7aa;
    border-radius: 16px;
    padding: 2rem 1.5rem;
    max-height: calc(100vh - 4rem);
    overflow-y: auto;
    box-shadow: 0 4px 20px rgba(251, 146, 60, 0.08), 0 0 0 1px rgba(251, 146, 60, 0.05);
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}

    .table-of-contents-sidebar:hover[b-e2uvqoxj40] {
        box-shadow: 0 8px 30px rgba(251, 146, 60, 0.12), 0 0 0 1px rgba(251, 146, 60, 0.08);
    }

    .table-of-contents-sidebar h2[b-e2uvqoxj40] {
        font-size: 1rem;
        color: #9a3412;
        margin-bottom: 1.5rem;
        padding-bottom: 1rem;
        border-bottom: 2px solid #fed7aa;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .table-of-contents-sidebar nav ul[b-e2uvqoxj40] {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .table-of-contents-sidebar nav > ul > li[b-e2uvqoxj40] {
        margin-bottom: 0.5rem;
    }

    .table-of-contents-sidebar nav ul ul[b-e2uvqoxj40] {
        margin-left: 1.25rem;
        margin-top: 0.5rem;
    }

        .table-of-contents-sidebar nav ul ul li[b-e2uvqoxj40] {
            margin-bottom: 0.4rem;
        }

    .table-of-contents-sidebar a[b-e2uvqoxj40] {
        color: #c2410c;
        text-decoration: none;
        display: block;
        padding: 0.75rem 1rem;
        border-radius: 10px;
        transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
        font-size: 0.9375rem;
        line-height: 1.5;
        font-weight: 600;
        position: relative;
        overflow: hidden;
    }

        .table-of-contents-sidebar a[b-e2uvqoxj40]::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 3px;
            background: linear-gradient(180deg, #f97316 0%, #ea580c 100%);
            transform: scaleY(0);
            transition: transform 0.25s ease;
        }

        .table-of-contents-sidebar a:hover[b-e2uvqoxj40] {
            background: linear-gradient(135deg, #ffedd5 0%, #fed7aa 100%);
            color: #9a3412;
            padding-left: 1.25rem;
            transform: translateX(2px);
        }

            .table-of-contents-sidebar a:hover[b-e2uvqoxj40]::before {
                transform: scaleY(1);
            }

    .table-of-contents-sidebar nav > ul > li > a[b-e2uvqoxj40] {
        font-weight: 700;
        font-size: 0.9375rem;
    }

    .table-of-contents-sidebar nav ul ul a[b-e2uvqoxj40] {
        font-size: 0.875rem;
        font-weight: 500;
        color: #ea580c;
        padding: 0.625rem 0.875rem;
    }

    /* Custom Scrollbar für Sidebar */
    .table-of-contents-sidebar[b-e2uvqoxj40]::-webkit-scrollbar {
        width: 6px;
    }

    .table-of-contents-sidebar[b-e2uvqoxj40]::-webkit-scrollbar-track {
        background: #fef3c7;
        border-radius: 3px;
    }

    .table-of-contents-sidebar[b-e2uvqoxj40]::-webkit-scrollbar-thumb {
        background: linear-gradient(180deg, #f97316 0%, #ea580c 100%);
        border-radius: 3px;
    }

        .table-of-contents-sidebar[b-e2uvqoxj40]::-webkit-scrollbar-thumb:hover {
            background: linear-gradient(180deg, #ea580c 0%, #c2410c 100%);
        }

/* =========================
   MAIN ARTICLE CONTENT
   ========================= */

.article-content-main[b-e2uvqoxj40] {
    background: white;
    padding: 3rem 3rem 3rem 3rem;
    border-radius: 20px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05), 0 10px 40px rgba(0, 0, 0, 0.03);
    animation: fadeInUp-b-e2uvqoxj40 0.8s ease-out 0.2s both;
    border: 1px solid #f1f5f9;
}

/* =========================
   TL;DR BOX
   ========================= */

.tldr-box[b-e2uvqoxj40] {
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 50%, #fde68a 100%);
    border: 2px solid #fbbf24;
    border-radius: 16px;
    padding: 2rem 2.5rem;
    margin-bottom: 3rem;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(251, 191, 36, 0.15);
}

    .tldr-box[b-e2uvqoxj40]::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -50%;
        width: 100%;
        height: 100%;
        background: radial-gradient(circle, rgba(251, 191, 36, 0.15) 0%, transparent 70%);
        pointer-events: none;
    }

    .tldr-box h3[b-e2uvqoxj40] {
        font-size: 1.375rem;
        font-weight: 800;
        color: #78350f;
        margin-bottom: 1.25rem;
        display: flex;
        align-items: center;
        gap: 0.75rem;
        position: relative;
    }

        .tldr-box h3[b-e2uvqoxj40]::before {
            content: '⚡';
            font-size: 1.5rem;
        }

    .tldr-box ul[b-e2uvqoxj40] {
        list-style: none;
        padding: 0;
        margin: 0;
        position: relative;
    }

        .tldr-box ul li[b-e2uvqoxj40] {
            padding: 0.875rem 0;
            color: #92400e;
            line-height: 1.7;
            font-weight: 500;
            position: relative;
            padding-left: 2rem;
        }

            .tldr-box ul li[b-e2uvqoxj40]::before {
                content: '✓';
                position: absolute;
                left: 0;
                top: 0.875rem;
                width: 24px;
                height: 24px;
                background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
                color: white;
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 0.75rem;
                font-weight: 700;
            }

            .tldr-box ul li strong[b-e2uvqoxj40] {
                color: #78350f;
                font-weight: 700;
            }

/* =========================
   ARTICLE TYPOGRAPHY
   ========================= */

.article-content-main h2[b-e2uvqoxj40] {
    font-size: 2.25rem;
    font-weight: 800;
    color: #0f172a;
    margin-top: 4rem;
    margin-bottom: 1.75rem;
    padding-top: 1.5rem;
    border-top: 3px solid #f1f5f9;
    scroll-margin-top: 2rem;
    letter-spacing: -0.5px;
    position: relative;
}

    .article-content-main h2[b-e2uvqoxj40]::before {
        content: '';
        position: absolute;
        top: -3px;
        left: 0;
        width: 80px;
        height: 3px;
        background: linear-gradient(90deg, #f97316 0%, #fb923c 100%);
    }

    .article-content-main h2:first-of-type[b-e2uvqoxj40] {
        margin-top: 0;
        border-top: none;
    }

        .article-content-main h2:first-of-type[b-e2uvqoxj40]::before {
            display: none;
        }

.article-content-main h3[b-e2uvqoxj40] {
    font-size: 1.75rem;
    font-weight: 700;
    color: #1e293b;
    margin-top: 2.5rem;
    margin-bottom: 1.25rem;
    scroll-margin-top: 2rem;
    letter-spacing: -0.3px;
}

.article-content-main h4[b-e2uvqoxj40] {
    font-size: 1.375rem;
    font-weight: 700;
    color: #334155;
    margin-top: 2rem;
    margin-bottom: 1rem;
}

.article-content-main h5[b-e2uvqoxj40] {
    font-size: 1.125rem;
    font-weight: 700;
    color: #475569;
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
}

.article-content-main p[b-e2uvqoxj40] {
    line-height: 1.85;
    color: #334155;
    margin-bottom: 1.5rem;
    font-size: 1.0625rem;
    font-weight: 400;
}

.article-content-main ul[b-e2uvqoxj40],
.article-content-main ol[b-e2uvqoxj40] {
    margin-bottom: 1.75rem;
    padding-left: 2rem;
}

    .article-content-main ul li[b-e2uvqoxj40],
    .article-content-main ol li[b-e2uvqoxj40] {
        margin-bottom: 0.875rem;
        line-height: 1.8;
        color: #334155;
        font-size: 1.0625rem;
    }

.article-content-main strong[b-e2uvqoxj40] {
    color: #0f172a;
    font-weight: 700;
}

.article-content-main a[b-e2uvqoxj40] {
    color: #f97316;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.2s ease;
    position: relative;
    border-bottom: 1px solid transparent;
}

    .article-content-main a:hover[b-e2uvqoxj40] {
        color: #ea580c;
        border-bottom-color: #ea580c;
    }

/* =========================
   ROBOT TYPE CARDS
   ========================= */

.robot-types-grid[b-e2uvqoxj40] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin: 3rem 0;
}

.robot-type-card[b-e2uvqoxj40] {
    background: linear-gradient(135deg, #ffffff 0%, #fafafa 100%);
    border: 2px solid #e2e8f0;
    border-radius: 20px;
    padding: 2.5rem;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    scroll-margin-top: 2rem;
}

    .robot-type-card[b-e2uvqoxj40]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 5px;
        background: linear-gradient(90deg, #f97316 0%, #fb923c 50%, #fbbf24 100%);
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 0.4s ease;
    }

    .robot-type-card:hover[b-e2uvqoxj40] {
        border-color: #fb923c;
        box-shadow: 0 12px 40px rgba(251, 146, 60, 0.2), 0 0 0 1px rgba(251, 146, 60, 0.1);
        transform: translateY(-8px);
        background: white;
    }

        .robot-type-card:hover[b-e2uvqoxj40]::before {
            transform: scaleX(1);
        }

.robot-type-icon[b-e2uvqoxj40] {
    font-size: 3.5rem;
    margin-bottom: 1.25rem;
    display: block;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.1));
}

.robot-type-card h4[b-e2uvqoxj40] {
    font-size: 1.5rem;
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 1.25rem 0;
    letter-spacing: -0.3px;
}

.robot-type-card .price-range[b-e2uvqoxj40] {
    display: inline-block;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    color: #78350f;
    padding: 0.5rem 1rem;
    border-radius: 100px;
    font-size: 0.875rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    border: 1px solid #fbbf24;
    letter-spacing: 0.3px;
}

.robot-type-card ul[b-e2uvqoxj40] {
    list-style: none;
    padding: 0;
    margin: 0;
}

    .robot-type-card ul li[b-e2uvqoxj40] {
        padding: 0.75rem 0;
        color: #475569;
        line-height: 1.6;
        position: relative;
        padding-left: 2rem;
        font-size: 0.9375rem;
        font-weight: 500;
    }

        .robot-type-card ul li[b-e2uvqoxj40]::before {
            content: '✓';
            position: absolute;
            left: 0;
            top: 0.75rem;
            width: 22px;
            height: 22px;
            background: linear-gradient(135deg, #fb923c 0%, #f97316 100%);
            color: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.625rem;
            font-weight: 700;
        }

/* =========================
   COMPARISON TABLE
   ========================= */

.comparison-table[b-e2uvqoxj40] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: white;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    margin: 3rem 0;
    border: 1px solid #e2e8f0;
}

    .comparison-table table[b-e2uvqoxj40] {
        width: 100%;
        min-width: 700px;
    }

    .comparison-table thead tr[b-e2uvqoxj40] {
        background: linear-gradient(135deg, #f97316 0%, #fb923c 100%);
    }

    .comparison-table th[b-e2uvqoxj40] {
        padding: 1.25rem 1.5rem;
        text-align: left;
        font-weight: 700;
        font-size: 0.9375rem;
        color: white;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        border: none;
    }

        .comparison-table th:first-child[b-e2uvqoxj40] {
            border-top-left-radius: 16px;
        }

        .comparison-table th:last-child[b-e2uvqoxj40] {
            border-top-right-radius: 16px;
        }

    .comparison-table tbody tr[b-e2uvqoxj40] {
        transition: all 0.2s ease;
        border-bottom: 1px solid #f1f5f9;
    }

        .comparison-table tbody tr:hover[b-e2uvqoxj40] {
            background: linear-gradient(135deg, #fffbf0 0%, #fef9f5 100%);
        }

        .comparison-table tbody tr:last-child[b-e2uvqoxj40] {
            border-bottom: none;
        }

    .comparison-table td[b-e2uvqoxj40] {
        padding: 1.25rem 1.5rem;
        color: #334155;
        font-size: 0.9375rem;
        font-weight: 500;
        border: none;
    }

        .comparison-table td:first-child[b-e2uvqoxj40] {
            font-weight: 700;
            color: #0f172a;
        }

        .comparison-table td strong[b-e2uvqoxj40] {
            color: #f97316;
            font-weight: 700;
        }

/* Table wrapper für horizontales Scrollen */
.comparison-table-wrapper[b-e2uvqoxj40] {
    overflow-x: auto;
    margin: 3rem 0;
    border-radius: 16px;
}

/* =========================
   ROI CALCULATOR & METRICS
   ========================= */

.roi-calculator[b-e2uvqoxj40] {
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    border: 2px solid #86efac;
    border-radius: 20px;
    padding: 2.5rem;
    margin: 3rem 0;
    box-shadow: 0 4px 20px rgba(134, 239, 172, 0.2);
}

    .roi-calculator h3[b-e2uvqoxj40] {
        color: #14532d;
        font-size: 1.625rem;
        font-weight: 800;
        margin-bottom: 1.5rem;
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }

        .roi-calculator h3[b-e2uvqoxj40]::before {
            content: '💰';
            font-size: 1.75rem;
        }

.roi-metrics[b-e2uvqoxj40] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    margin: 2rem 0;
}

.roi-metric-card[b-e2uvqoxj40] {
    background: white;
    border: 2px solid #bbf7d0;
    border-radius: 14px;
    padding: 1.75rem 1.5rem;
    text-align: center;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(134, 239, 172, 0.15);
}

    .roi-metric-card:hover[b-e2uvqoxj40] {
        transform: translateY(-4px);
        box-shadow: 0 8px 24px rgba(134, 239, 172, 0.25);
        border-color: #86efac;
    }

    .roi-metric-card .metric-label[b-e2uvqoxj40] {
        font-size: 0.875rem;
        color: #15803d;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin-bottom: 0.75rem;
    }

    .roi-metric-card .metric-value[b-e2uvqoxj40] {
        font-size: 2.25rem;
        font-weight: 900;
        color: #166534;
        margin-bottom: 0.5rem;
        line-height: 1;
    }

    .roi-metric-card .metric-description[b-e2uvqoxj40] {
        font-size: 0.8125rem;
        color: #15803d;
        font-weight: 500;
        line-height: 1.5;
    }

.roi-example[b-e2uvqoxj40] {
    background: white;
    border: 2px solid #bbf7d0;
    border-radius: 14px;
    padding: 2rem;
    margin: 2rem 0;
}

    .roi-example h4[b-e2uvqoxj40] {
        color: #166534;
        font-size: 1.25rem;
        font-weight: 700;
        margin-bottom: 1.25rem;
    }

    .roi-example p[b-e2uvqoxj40] {
        color: #15803d;
        line-height: 1.8;
        margin-bottom: 1rem;
        font-size: 1rem;
    }

        .roi-example p strong[b-e2uvqoxj40] {
            color: #14532d;
            font-weight: 700;
        }

/* =========================
   CHECKLIST BOX
   ========================= */

.checklist-box[b-e2uvqoxj40] {
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    border: 2px solid #7dd3fc;
    border-radius: 16px;
    padding: 2rem 2.5rem;
    margin: 3rem 0;
    box-shadow: 0 4px 20px rgba(125, 211, 252, 0.2);
}

    .checklist-box h3[b-e2uvqoxj40] {
        color: #0c4a6e;
        font-size: 1.5rem;
        font-weight: 800;
        margin-bottom: 1.5rem;
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }

        .checklist-box h3[b-e2uvqoxj40]::before {
            content: '📋';
            font-size: 1.625rem;
        }

    .checklist-box ul[b-e2uvqoxj40] {
        list-style: none;
        padding: 0;
        margin: 0;
    }

        .checklist-box ul li[b-e2uvqoxj40] {
            padding: 0.875rem 0;
            color: #0c4a6e;
            line-height: 1.7;
            display: flex;
            align-items: center;
            gap: 1rem;
            font-weight: 500;
        }

            .checklist-box ul li input[type="checkbox"][b-e2uvqoxj40] {
                margin-right: 0.75rem;
                width: 22px;
                height: 22px;
                accent-color: #0ea5e9;
                cursor: not-allowed;
                flex-shrink: 0;
            }

/* =========================
   RECOMMENDATION GRID
   ========================= */

.recommendation-grid[b-e2uvqoxj40] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    margin: 3rem 0;
}

.recommendation-card[b-e2uvqoxj40] {
    background: linear-gradient(135deg, #ffffff 0%, #fafafa 100%);
    border: 2px solid #e2e8f0;
    border-radius: 16px;
    padding: 2rem;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

    .recommendation-card[b-e2uvqoxj40]::after {
        content: '';
        position: absolute;
        top: -2px;
        left: -2px;
        right: -2px;
        bottom: -2px;
        background: linear-gradient(135deg, #f97316, #fb923c, #fbbf24);
        border-radius: 16px;
        opacity: 0;
        transition: opacity 0.35s ease;
        z-index: -1;
    }

    .recommendation-card:hover[b-e2uvqoxj40] {
        background: white;
        box-shadow: 0 12px 40px rgba(251, 146, 60, 0.2);
        transform: translateY(-6px);
        border-color: transparent;
    }

        .recommendation-card:hover[b-e2uvqoxj40]::after {
            opacity: 1;
        }

    .recommendation-card h4[b-e2uvqoxj40] {
        font-size: 1.25rem;
        font-weight: 800;
        color: #0f172a;
        margin: 0 0 1.25rem 0;
        letter-spacing: -0.3px;
    }

    .recommendation-card p[b-e2uvqoxj40] {
        color: #475569;
        line-height: 1.7;
        margin-bottom: 1rem;
        font-size: 0.9375rem;
    }

        .recommendation-card p:last-child[b-e2uvqoxj40] {
            margin-bottom: 0;
        }

        .recommendation-card p strong[b-e2uvqoxj40] {
            color: #0f172a;
            display: block;
            margin-bottom: 0.375rem;
            font-weight: 700;
        }

        .recommendation-card p a[b-e2uvqoxj40] {
            color: #f97316;
            text-decoration: none;
            font-weight: 600;
            border-bottom: 1px solid transparent;
            transition: all 0.2s ease;
        }

            .recommendation-card p a:hover[b-e2uvqoxj40] {
                color: #ea580c;
                border-bottom-color: #ea580c;
            }

/* =========================
   FINAL CTA
   ========================= */

.final-cta[b-e2uvqoxj40] {
    background: linear-gradient(135deg, #f97316 0%, #fb923c 50%, #fbbf24 100%);
    border-radius: 24px;
    padding: 4rem 3rem;
    text-align: center;
    color: white;
    margin: 4rem 0;
    position: relative;
    overflow: hidden;
    box-shadow: 0 12px 40px rgba(249, 115, 22, 0.4);
}

    .final-cta[b-e2uvqoxj40]::before {
        content: '';
        position: absolute;
        top: -50%;
        left: -50%;
        width: 200%;
        height: 200%;
        background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
        pointer-events: none;
    }

    .final-cta h3[b-e2uvqoxj40] {
        font-size: 2.25rem;
        font-weight: 900;
        margin: 0 0 1rem 0;
        color: white;
        letter-spacing: -0.5px;
        text-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        position: relative;
    }

    .final-cta p[b-e2uvqoxj40] {
        font-size: 1.125rem;
        line-height: 1.7;
        margin-bottom: 2.5rem;
        opacity: 0.95;
        font-weight: 500;
        position: relative;
        max-width: 700px;
        margin-left: auto;
        margin-right: auto;
    }

.btn-cta-large[b-e2uvqoxj40] {
    display: inline-flex;
    align-items: center;
    gap: 0.875rem;
    padding: 1.375rem 3rem;
    background: white;
    color: #f97316;
    border-radius: 100px;
    font-weight: 800;
    font-size: 1.125rem;
    text-decoration: none;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
    position: relative;
    letter-spacing: 0.3px;
}

    .btn-cta-large:hover[b-e2uvqoxj40] {
        transform: translateY(-4px) scale(1.02);
        box-shadow: 0 16px 48px rgba(0, 0, 0, 0.35);
        color: #ea580c;
        text-decoration: none;
    }

    .btn-cta-large svg[b-e2uvqoxj40] {
        flex-shrink: 0;
        transition: transform 0.35s ease;
    }

    .btn-cta-large:hover svg[b-e2uvqoxj40] {
        transform: rotate(90deg);
    }

.cta-subtext[b-e2uvqoxj40] {
    margin-top: 1.5rem;
    font-size: 0.9375rem;
    opacity: 0.9;
    font-weight: 500;
    position: relative;
}

    .cta-subtext a[b-e2uvqoxj40] {
        color: white;
        font-weight: 700;
        text-decoration: underline;
        text-decoration-thickness: 2px;
        text-underline-offset: 3px;
        transition: opacity 0.2s ease;
    }

        .cta-subtext a:hover[b-e2uvqoxj40] {
            opacity: 0.8;
        }

/* =========================
   RELATED ARTICLES
   ========================= */

.related-articles[b-e2uvqoxj40] {
    margin: 5rem 0 3rem 0;
    padding: 3rem 0;
    border-top: 2px solid #e2e8f0;
}

    .related-articles h3[b-e2uvqoxj40] {
        font-size: 1.75rem;
        font-weight: 800;
        color: #0f172a;
        margin-bottom: 2rem;
        letter-spacing: -0.3px;
    }

.related-grid[b-e2uvqoxj40] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
}

.related-card[b-e2uvqoxj40] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    background: white;
    border: 2px solid #e2e8f0;
    border-radius: 16px;
    padding: 2rem;
    text-decoration: none;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

    .related-card[b-e2uvqoxj40]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: linear-gradient(90deg, #f97316 0%, #fb923c 100%);
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 0.35s ease;
    }

    .related-card:hover[b-e2uvqoxj40] {
        border-color: #fb923c;
        box-shadow: 0 12px 40px rgba(251, 146, 60, 0.2);
        transform: translateY(-6px);
        background: linear-gradient(135deg, #ffffff 0%, #fffbf5 100%);
    }

        .related-card:hover[b-e2uvqoxj40]::before {
            transform: scaleX(1);
        }

.related-icon[b-e2uvqoxj40] {
    font-size: 2.5rem;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.08));
}

.related-card h4[b-e2uvqoxj40] {
    font-size: 1.125rem;
    font-weight: 800;
    color: #0f172a;
    margin: 0;
    letter-spacing: -0.2px;
}

.related-card p[b-e2uvqoxj40] {
    font-size: 0.9375rem;
    color: #64748b;
    margin: 0;
    line-height: 1.6;
    font-weight: 500;
}

/* =========================
   BACK SECTION
   ========================= */

.back-section[b-e2uvqoxj40] {
    margin: 3rem 0 2rem 0;
    padding: 1.5rem 0;
}

.back-link[b-e2uvqoxj40] {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    color: #f97316;
    font-weight: 700;
    font-size: 1rem;
    text-decoration: none;
    transition: all 0.3s ease;
    position: relative;
}

    .back-link[b-e2uvqoxj40]::before {
        content: '';
        position: absolute;
        bottom: -3px;
        left: 0;
        right: 0;
        height: 2px;
        background: linear-gradient(90deg, #f97316 0%, #fb923c 100%);
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 0.3s ease;
    }

    .back-link:hover[b-e2uvqoxj40] {
        color: #ea580c;
        gap: 1rem;
    }

        .back-link:hover[b-e2uvqoxj40]::before {
            transform: scaleX(1);
        }

/* =========================
   ANIMATIONS
   ========================= */

@keyframes fadeInUp-b-e2uvqoxj40 {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInDown-b-e2uvqoxj40 {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* =========================
   RESPONSIVE DESIGN
   ========================= */

@media (max-width: 1200px) {
    .content-wrapper-with-sidebar[b-e2uvqoxj40] {
        grid-template-columns: 260px 1fr;
        gap: 3rem;
    }

    .table-of-contents-sidebar[b-e2uvqoxj40] {
        padding: 1.75rem 1.25rem;
    }
}

@media (max-width: 1024px) {
    .content-wrapper-with-sidebar[b-e2uvqoxj40] {
        grid-template-columns: 1fr;
    }

    .table-of-contents-sidebar[b-e2uvqoxj40] {
        position: relative;
        top: 0;
        margin-bottom: 3rem;
        max-height: none;
    }

    .robot-types-grid[b-e2uvqoxj40] {
        grid-template-columns: 1fr;
    }

    .recommendation-grid[b-e2uvqoxj40],
    .related-grid[b-e2uvqoxj40] {
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    }
}

@media (max-width: 768px) {
    .article-page.hospitality[b-e2uvqoxj40] {
        padding: 2rem 1.25rem;
    }

    .article-header[b-e2uvqoxj40] {
        margin-bottom: 3rem;
    }

        .article-header h1[b-e2uvqoxj40] {
            font-size: 2.25rem;
            line-height: 1.2;
        }

    .article-lead[b-e2uvqoxj40] {
        font-size: 1.125rem;
        max-width: 100%;
    }

    .article-meta[b-e2uvqoxj40] {
        gap: 1.25rem;
        font-size: 0.875rem;
    }

    .article-content-main[b-e2uvqoxj40] {
        padding: 2rem 1.75rem;
        border-radius: 16px;
    }

        .article-content-main h2[b-e2uvqoxj40] {
            font-size: 1.875rem;
            margin-top: 3rem;
        }

        .article-content-main h3[b-e2uvqoxj40] {
            font-size: 1.5rem;
        }

        .article-content-main h4[b-e2uvqoxj40] {
            font-size: 1.25rem;
        }

    .tldr-box[b-e2uvqoxj40],
    .roi-calculator[b-e2uvqoxj40],
    .checklist-box[b-e2uvqoxj40] {
        padding: 1.75rem 1.5rem;
    }

    .roi-metrics[b-e2uvqoxj40] {
        grid-template-columns: 1fr;
    }

    .comparison-table[b-e2uvqoxj40] {
        font-size: 0.875rem;
    }

        .comparison-table table[b-e2uvqoxj40] {
            min-width: 600px;
        }

    .recommendation-grid[b-e2uvqoxj40],
    .related-grid[b-e2uvqoxj40] {
        grid-template-columns: 1fr;
    }

    .final-cta[b-e2uvqoxj40] {
        padding: 3rem 2rem;
        border-radius: 20px;
    }

        .final-cta h3[b-e2uvqoxj40] {
            font-size: 1.875rem;
        }

        .final-cta p[b-e2uvqoxj40] {
            font-size: 1rem;
        }

    .btn-cta-large[b-e2uvqoxj40] {
        width: 100%;
        justify-content: center;
        padding: 1.125rem 2rem;
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    .article-page.hospitality[b-e2uvqoxj40] {
        padding: 1.5rem 1rem;
    }

    .article-header h1[b-e2uvqoxj40] {
        font-size: 1.875rem;
    }

    .article-lead[b-e2uvqoxj40] {
        font-size: 1rem;
    }

    .article-badge[b-e2uvqoxj40] {
        font-size: 0.75rem;
        padding: 0.5rem 1rem;
    }

    .article-meta[b-e2uvqoxj40] {
        font-size: 0.8125rem;
    }

    .article-content-main[b-e2uvqoxj40] {
        padding: 1.5rem 1.25rem;
    }

        .article-content-main h2[b-e2uvqoxj40] {
            font-size: 1.625rem;
        }

        .article-content-main h3[b-e2uvqoxj40] {
            font-size: 1.375rem;
        }

    .tldr-box[b-e2uvqoxj40],
    .roi-calculator[b-e2uvqoxj40],
    .checklist-box[b-e2uvqoxj40] {
        padding: 1.5rem 1.25rem;
    }

    .robot-type-card[b-e2uvqoxj40],
    .recommendation-card[b-e2uvqoxj40] {
        padding: 1.5rem;
    }

    .final-cta[b-e2uvqoxj40] {
        padding: 2.5rem 1.5rem;
    }

        .final-cta h3[b-e2uvqoxj40] {
            font-size: 1.625rem;
        }

    .btn-cta-large[b-e2uvqoxj40] {
        padding: 1rem 1.75rem;
        font-size: 0.9375rem;
    }
}

/* =========================
   PRINT STYLES
   ========================= */

@media print {
    .article-page.hospitality[b-e2uvqoxj40] {
        background: white;
        padding: 0;
    }

    .breadcrumb-nav[b-e2uvqoxj40],
    .related-articles[b-e2uvqoxj40],
    .final-cta[b-e2uvqoxj40],
    .back-section[b-e2uvqoxj40],
    .table-of-contents-sidebar[b-e2uvqoxj40],
    .article-badge[b-e2uvqoxj40] {
        display: none !important;
    }

    .content-wrapper-with-sidebar[b-e2uvqoxj40] {
        grid-template-columns: 1fr;
    }

    .article-header[b-e2uvqoxj40] {
        border-bottom: 2px solid #000;
        padding-bottom: 1rem;
        page-break-after: avoid;
    }

    .article-content-main h2[b-e2uvqoxj40] {
        page-break-after: avoid;
    }

    .robot-type-card[b-e2uvqoxj40],
    .recommendation-card[b-e2uvqoxj40],
    .related-card[b-e2uvqoxj40] {
        page-break-inside: avoid;
    }
}

/* =========================
   ACCESSIBILITY
   ========================= */

.article-content-main a:focus[b-e2uvqoxj40],
.table-of-contents-sidebar a:focus[b-e2uvqoxj40],
.btn-cta-large:focus[b-e2uvqoxj40],
.back-link:focus[b-e2uvqoxj40],
.related-card:focus[b-e2uvqoxj40] {
    outline: 3px solid #fb923c;
    outline-offset: 3px;
    border-radius: 4px;
}

/* Focus für Tastaturnavigation verbessern */
:focus-visible[b-e2uvqoxj40] {
    outline: 3px solid #fb923c;
    outline-offset: 3px;
}

/* =========================
   SMOOTH SCROLLING
   ========================= */

html[b-e2uvqoxj40] {
    scroll-behavior: smooth;
}

/* Reduzierte Animationen für Nutzer mit entsprechenden Präferenzen */
@media (prefers-reduced-motion: reduce) {
    *[b-e2uvqoxj40],
    *[b-e2uvqoxj40]::before,
    *[b-e2uvqoxj40]::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}
/* ========================================
   ERWEITERTE STYLES FÜR ROI & VERGLEICHSTABELLEN
   Diese Styles ergänzen die Haupt-CSS-Datei
   ======================================== */

/* =========================
   KOSTENTABELLE - MODERN DESIGN
   ========================= */

.cost-table[b-e2uvqoxj40] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: white;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
    margin: 3rem 0;
    border: 2px solid #f1f5f9;
}

    .cost-table thead[b-e2uvqoxj40] {
        background: linear-gradient(135deg, #f97316 0%, #fb923c 50%, #fbbf24 100%);
        position: relative;
    }

        .cost-table thead[b-e2uvqoxj40]::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 3px;
            background: linear-gradient(90deg, #ea580c, #fbbf24);
        }

    .cost-table th[b-e2uvqoxj40] {
        padding: 1.5rem 2rem;
        text-align: left;
        font-weight: 800;
        font-size: 1rem;
        color: white;
        text-transform: uppercase;
        letter-spacing: 0.8px;
        border: none;
    }

    .cost-table tbody tr[b-e2uvqoxj40] {
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        border-bottom: 1px solid #f1f5f9;
        position: relative;
    }

        .cost-table tbody tr[b-e2uvqoxj40]::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 4px;
            background: linear-gradient(180deg, #f97316 0%, #fb923c 100%);
            transform: scaleY(0);
            transition: transform 0.3s ease;
        }

        .cost-table tbody tr:hover[b-e2uvqoxj40] {
            background: linear-gradient(135deg, #fffbf0 0%, #fef9f5 100%);
            box-shadow: 0 4px 12px rgba(251, 146, 60, 0.1);
        }

            .cost-table tbody tr:hover[b-e2uvqoxj40]::before {
                transform: scaleY(1);
            }

        .cost-table tbody tr:last-child[b-e2uvqoxj40] {
            border-bottom: none;
        }

    .cost-table td[b-e2uvqoxj40] {
        padding: 1.5rem 2rem;
        color: #475569;
        font-size: 1rem;
        font-weight: 500;
        border: none;
    }

        .cost-table td:first-child[b-e2uvqoxj40] {
            font-weight: 700;
            color: #0f172a;
        }

        .cost-table td:nth-child(2)[b-e2uvqoxj40] {
            color: #f97316;
            font-weight: 700;
            font-family: 'SF Mono', 'Monaco', 'Courier New', monospace;
        }

        .cost-table td:last-child[b-e2uvqoxj40] {
            color: #64748b;
            font-style: italic;
        }

/* =========================
   ROI-BOX - PREMIUM DESIGN
   ========================= */

.roi-box[b-e2uvqoxj40] {
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 50%, #d1fae5 100%);
    border: 3px solid #86efac;
    border-radius: 24px;
    padding: 3rem 3rem 2.5rem 3rem;
    margin: 3rem 0;
    box-shadow: 0 10px 40px rgba(134, 239, 172, 0.25), 0 0 0 1px rgba(134, 239, 172, 0.1);
    position: relative;
    overflow: hidden;
}

    .roi-box[b-e2uvqoxj40]::before {
        content: '';
        position: absolute;
        top: -100px;
        right: -100px;
        width: 300px;
        height: 300px;
        background: radial-gradient(circle, rgba(134, 239, 172, 0.3) 0%, transparent 70%);
        pointer-events: none;
    }

    .roi-box[b-e2uvqoxj40]::after {
        content: '';
        position: absolute;
        bottom: -100px;
        left: -100px;
        width: 300px;
        height: 300px;
        background: radial-gradient(circle, rgba(134, 239, 172, 0.2) 0%, transparent 70%);
        pointer-events: none;
    }

    .roi-box h4[b-e2uvqoxj40] {
        font-size: 1.75rem;
        font-weight: 900;
        color: #14532d;
        margin: 0 0 2rem 0;
        display: flex;
        align-items: center;
        gap: 1rem;
        letter-spacing: -0.3px;
        position: relative;
    }

    .roi-box p[b-e2uvqoxj40] {
        color: #166534;
        font-size: 1.0625rem;
        line-height: 1.8;
        margin-bottom: 1.25rem;
        font-weight: 500;
        position: relative;
    }

        .roi-box p strong[b-e2uvqoxj40] {
            color: #14532d;
            font-weight: 800;
            display: inline-block;
            margin-bottom: 0.5rem;
        }

    .roi-box ul[b-e2uvqoxj40] {
        list-style: none;
        padding: 0;
        margin: 1rem 0 1.5rem 0;
        position: relative;
    }

        .roi-box ul li[b-e2uvqoxj40] {
            padding: 0.875rem 0 0.875rem 2.5rem;
            color: #15803d;
            line-height: 1.7;
            font-weight: 500;
            font-size: 1rem;
            position: relative;
            border-left: 3px solid transparent;
            transition: all 0.3s ease;
        }

            .roi-box ul li[b-e2uvqoxj40]::before {
                content: '✓';
                position: absolute;
                left: 0;
                top: 0.875rem;
                width: 28px;
                height: 28px;
                background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
                color: white;
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 0.75rem;
                font-weight: 900;
                box-shadow: 0 2px 8px rgba(34, 197, 94, 0.3);
            }

            .roi-box ul li:hover[b-e2uvqoxj40] {
                padding-left: 3rem;
                border-left-color: #22c55e;
                background: rgba(255, 255, 255, 0.5);
            }

    .roi-box .roi-result[b-e2uvqoxj40] {
        background: linear-gradient(135deg, #ffffff 0%, #f0fdf4 100%);
        border: 2px solid #22c55e;
        border-radius: 16px;
        padding: 1.75rem 2rem;
        margin-top: 2rem;
        font-size: 1.125rem;
        font-weight: 600;
        color: #14532d;
        display: flex;
        align-items: center;
        gap: 1rem;
        box-shadow: 0 4px 16px rgba(34, 197, 94, 0.15);
    }

        .roi-box .roi-result strong[b-e2uvqoxj40] {
            color: #16a34a;
            font-size: 1.25rem;
            font-weight: 900;
        }

/* =========================
   ROI COMPARISON TABLE
   ========================= */

.roi-comparison-table[b-e2uvqoxj40] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: white;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
    margin: 3rem 0;
    border: 2px solid #e0f2fe;
}

    .roi-comparison-table thead[b-e2uvqoxj40] {
        background: linear-gradient(135deg, #0ea5e9 0%, #38bdf8 50%, #7dd3fc 100%);
    }

    .roi-comparison-table th[b-e2uvqoxj40] {
        padding: 1.5rem 2rem;
        text-align: left;
        font-weight: 800;
        font-size: 1rem;
        color: white;
        text-transform: uppercase;
        letter-spacing: 0.8px;
        border: none;
    }

    .roi-comparison-table tbody tr[b-e2uvqoxj40] {
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        border-bottom: 1px solid #f0f9ff;
    }

        .roi-comparison-table tbody tr:hover[b-e2uvqoxj40] {
            background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
        }

        .roi-comparison-table tbody tr:last-child[b-e2uvqoxj40] {
            border-bottom: none;
        }

    .roi-comparison-table td[b-e2uvqoxj40] {
        padding: 1.5rem 2rem;
        color: #475569;
        font-size: 1rem;
        font-weight: 500;
        border: none;
    }

        .roi-comparison-table td:first-child[b-e2uvqoxj40] {
            font-weight: 700;
            color: #0f172a;
        }

        .roi-comparison-table td:nth-child(3)[b-e2uvqoxj40] {
            color: #16a34a;
            font-weight: 700;
        }

        .roi-comparison-table td:last-child[b-e2uvqoxj40] {
            color: #0ea5e9;
            font-weight: 700;
            font-size: 1.0625rem;
        }

/* =========================
   MODEL COMPARISON TABLE - ENHANCED
   ========================= */

.model-comparison-table[b-e2uvqoxj40] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: white;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    margin: 3rem 0;
    border: 2px solid #f1f5f9;
}

    .model-comparison-table thead[b-e2uvqoxj40] {
        background: linear-gradient(135deg, #1e293b 0%, #334155 50%, #475569 100%);
        position: relative;
    }

        .model-comparison-table thead[b-e2uvqoxj40]::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: linear-gradient(90deg, #f97316 0%, #fb923c 50%, #fbbf24 100%);
        }

    .model-comparison-table th[b-e2uvqoxj40] {
        padding: 2rem 2rem;
        text-align: left;
        font-weight: 800;
        font-size: 1.125rem;
        color: white;
        border: none;
        letter-spacing: 0.3px;
    }

        .model-comparison-table th:first-child[b-e2uvqoxj40] {
            background: rgba(0, 0, 0, 0.2);
            width: 180px;
        }

    .model-comparison-table tbody tr[b-e2uvqoxj40] {
        transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
        border-bottom: 2px solid #f1f5f9;
        position: relative;
    }

        .model-comparison-table tbody tr:hover[b-e2uvqoxj40] {
            background: linear-gradient(135deg, #fffbf0 0%, #fef9f5 100%);
            box-shadow: inset 4px 0 0 #f97316;
        }

        .model-comparison-table tbody tr:last-child[b-e2uvqoxj40] {
            border-bottom: none;
        }

    .model-comparison-table td[b-e2uvqoxj40] {
        padding: 1.75rem 2rem;
        color: #475569;
        font-size: 1rem;
        font-weight: 500;
        border: none;
        vertical-align: top;
    }

        .model-comparison-table td:first-child[b-e2uvqoxj40] {
            font-weight: 800;
            color: #0f172a;
            background: linear-gradient(135deg, #fafafa 0%, #f5f5f5 100%);
            text-transform: uppercase;
            font-size: 0.875rem;
            letter-spacing: 0.5px;
        }

        .model-comparison-table td:not(:first-child)[b-e2uvqoxj40] {
            font-size: 1.0625rem;
            line-height: 1.7;
        }

    /* Spezielle Hervorhebungen in Model Comparison */
    .model-comparison-table tbody tr:nth-child(1) td:not(:first-child)[b-e2uvqoxj40] {
        color: #f97316;
        font-weight: 700;
        font-size: 1.125rem;
        font-family: 'SF Mono', 'Monaco', 'Courier New', monospace;
    }

    .model-comparison-table tbody tr:nth-child(6) td[b-e2uvqoxj40] {
        background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
        font-style: italic;
        color: #166534;
        font-weight: 600;
    }

/* =========================
   EXPERT TIP BOX
   ========================= */

.expert-tip[b-e2uvqoxj40] {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 50%, #fcd34d 100%);
    border: 3px solid #fbbf24;
    border-radius: 24px;
    padding: 3rem 3rem 2.5rem 3rem;
    margin: 4rem 0;
    box-shadow: 0 10px 40px rgba(251, 191, 36, 0.25), 0 0 0 1px rgba(251, 191, 36, 0.1);
    position: relative;
    overflow: hidden;
}

    .expert-tip[b-e2uvqoxj40]::before {
        content: '💡';
        position: absolute;
        top: 20px;
        right: 30px;
        font-size: 120px;
        opacity: 0.1;
        pointer-events: none;
    }

    .expert-tip h4[b-e2uvqoxj40] {
        font-size: 1.75rem;
        font-weight: 900;
        color: #78350f;
        margin: 0 0 1.5rem 0;
        display: flex;
        align-items: center;
        gap: 1rem;
        letter-spacing: -0.3px;
        position: relative;
    }

    .expert-tip p[b-e2uvqoxj40] {
        color: #92400e;
        font-size: 1.0625rem;
        line-height: 1.8;
        margin-bottom: 1.5rem;
        font-weight: 500;
        position: relative;
    }

        .expert-tip p strong[b-e2uvqoxj40] {
            color: #78350f;
            font-weight: 800;
        }

    .expert-tip ul[b-e2uvqoxj40] {
        list-style: none;
        padding: 0;
        margin: 1.5rem 0 0 0;
        position: relative;
    }

        .expert-tip ul li[b-e2uvqoxj40] {
            padding: 1rem 0 1rem 3rem;
            color: #92400e;
            line-height: 1.7;
            font-weight: 600;
            font-size: 1rem;
            position: relative;
            border-left: 3px solid transparent;
            transition: all 0.3s ease;
        }

            .expert-tip ul li[b-e2uvqoxj40]::before {
                content: '→';
                position: absolute;
                left: 0;
                top: 1rem;
                width: 32px;
                height: 32px;
                background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
                color: white;
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 1rem;
                font-weight: 900;
                box-shadow: 0 3px 10px rgba(251, 191, 36, 0.4);
            }

            .expert-tip ul li:hover[b-e2uvqoxj40] {
                padding-left: 3.5rem;
                border-left-color: #f59e0b;
                background: rgba(255, 255, 255, 0.6);
            }

/* =========================
   TABLE WRAPPERS FÜR MOBILE
   ========================= */

.table-wrapper[b-e2uvqoxj40] {
    overflow-x: auto;
    margin: 3rem 0;
    border-radius: 20px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

    .table-wrapper[b-e2uvqoxj40]::-webkit-scrollbar {
        height: 10px;
    }

    .table-wrapper[b-e2uvqoxj40]::-webkit-scrollbar-track {
        background: #f1f5f9;
        border-radius: 5px;
    }

    .table-wrapper[b-e2uvqoxj40]::-webkit-scrollbar-thumb {
        background: linear-gradient(90deg, #f97316 0%, #fb923c 100%);
        border-radius: 5px;
    }

        .table-wrapper[b-e2uvqoxj40]::-webkit-scrollbar-thumb:hover {
            background: linear-gradient(90deg, #ea580c 0%, #f97316 100%);
        }

/* =========================
   RESPONSIVE ANPASSUNGEN
   ========================= */

@media (max-width: 1200px) {
    .cost-table[b-e2uvqoxj40],
    .roi-comparison-table[b-e2uvqoxj40],
    .model-comparison-table[b-e2uvqoxj40] {
        font-size: 0.9375rem;
    }

        .cost-table th[b-e2uvqoxj40],
        .roi-comparison-table th[b-e2uvqoxj40],
        .model-comparison-table th[b-e2uvqoxj40] {
            padding: 1.25rem 1.5rem;
            font-size: 0.9375rem;
        }

        .cost-table td[b-e2uvqoxj40],
        .roi-comparison-table td[b-e2uvqoxj40],
        .model-comparison-table td[b-e2uvqoxj40] {
            padding: 1.25rem 1.5rem;
        }
}

@media (max-width: 768px) {
    .cost-table[b-e2uvqoxj40],
    .roi-comparison-table[b-e2uvqoxj40],
    .model-comparison-table[b-e2uvqoxj40] {
        font-size: 0.875rem;
        border-radius: 16px;
    }

        .cost-table th[b-e2uvqoxj40],
        .roi-comparison-table th[b-e2uvqoxj40],
        .model-comparison-table th[b-e2uvqoxj40] {
            padding: 1rem 1rem;
            font-size: 0.8125rem;
        }

        .cost-table td[b-e2uvqoxj40],
        .roi-comparison-table td[b-e2uvqoxj40],
        .model-comparison-table td[b-e2uvqoxj40] {
            padding: 1rem 1rem;
            font-size: 0.875rem;
        }

    .roi-box[b-e2uvqoxj40],
    .expert-tip[b-e2uvqoxj40] {
        padding: 2rem 1.75rem;
        border-radius: 20px;
    }

        .roi-box h4[b-e2uvqoxj40],
        .expert-tip h4[b-e2uvqoxj40] {
            font-size: 1.5rem;
        }

        .roi-box ul li[b-e2uvqoxj40],
        .expert-tip ul li[b-e2uvqoxj40] {
            padding: 0.75rem 0 0.75rem 2.25rem;
            font-size: 0.9375rem;
        }

            .roi-box ul li[b-e2uvqoxj40]::before,
            .expert-tip ul li[b-e2uvqoxj40]::before {
                width: 26px;
                height: 26px;
                font-size: 0.6875rem;
            }

        .roi-box .roi-result[b-e2uvqoxj40] {
            padding: 1.5rem 1.5rem;
            font-size: 1rem;
        }

            .roi-box .roi-result strong[b-e2uvqoxj40] {
                font-size: 1.125rem;
            }

    /* Tabellen horizontal scrollbar auf Mobile */
    .cost-table[b-e2uvqoxj40],
    .roi-comparison-table[b-e2uvqoxj40],
    .model-comparison-table[b-e2uvqoxj40] {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }

        .cost-table table[b-e2uvqoxj40],
        .roi-comparison-table table[b-e2uvqoxj40],
        .model-comparison-table table[b-e2uvqoxj40] {
            min-width: 600px;
        }
}

@media (max-width: 480px) {
    .roi-box[b-e2uvqoxj40],
    .expert-tip[b-e2uvqoxj40] {
        padding: 1.5rem 1.25rem;
        border-radius: 16px;
    }

        .roi-box[b-e2uvqoxj40]::before,
        .roi-box[b-e2uvqoxj40]::after {
            display: none;
        }

        .roi-box h4[b-e2uvqoxj40],
        .expert-tip h4[b-e2uvqoxj40] {
            font-size: 1.25rem;
            gap: 0.5rem;
        }

        .roi-box p[b-e2uvqoxj40],
        .expert-tip p[b-e2uvqoxj40] {
            font-size: 0.9375rem;
        }

        .roi-box ul li[b-e2uvqoxj40],
        .expert-tip ul li[b-e2uvqoxj40] {
            padding: 0.625rem 0 0.625rem 2rem;
            font-size: 0.875rem;
        }

            .roi-box ul li[b-e2uvqoxj40]::before,
            .expert-tip ul li[b-e2uvqoxj40]::before {
                width: 24px;
                height: 24px;
                font-size: 0.625rem;
            }

        .roi-box .roi-result[b-e2uvqoxj40] {
            padding: 1.25rem 1.25rem;
            font-size: 0.9375rem;
            flex-direction: column;
            align-items: flex-start;
            gap: 0.5rem;
        }

            .roi-box .roi-result strong[b-e2uvqoxj40] {
                font-size: 1rem;
            }

    .cost-table th[b-e2uvqoxj40],
    .roi-comparison-table th[b-e2uvqoxj40],
    .model-comparison-table th[b-e2uvqoxj40] {
        padding: 0.875rem 0.875rem;
        font-size: 0.75rem;
    }

    .cost-table td[b-e2uvqoxj40],
    .roi-comparison-table td[b-e2uvqoxj40],
    .model-comparison-table td[b-e2uvqoxj40] {
        padding: 0.875rem 0.875rem;
        font-size: 0.8125rem;
    }

    .expert-tip[b-e2uvqoxj40]::before {
        font-size: 80px;
        top: 10px;
        right: 15px;
    }
}

/* =========================
   PRINT ANPASSUNGEN
   ========================= */

@media print {
    .cost-table[b-e2uvqoxj40],
    .roi-comparison-table[b-e2uvqoxj40],
    .model-comparison-table[b-e2uvqoxj40] {
        box-shadow: none;
        border: 1px solid #000;
        page-break-inside: avoid;
    }

        .cost-table thead[b-e2uvqoxj40],
        .roi-comparison-table thead[b-e2uvqoxj40],
        .model-comparison-table thead[b-e2uvqoxj40] {
            background: #333 !important;
        }

    .roi-box[b-e2uvqoxj40],
    .expert-tip[b-e2uvqoxj40] {
        box-shadow: none;
        border: 2px solid #333;
        page-break-inside: avoid;
    }

        .roi-box[b-e2uvqoxj40]::before,
        .roi-box[b-e2uvqoxj40]::after,
        .expert-tip[b-e2uvqoxj40]::before {
            display: none;
        }
}

/* =========================
   ACCESSIBILITY
   ========================= */

.cost-table:focus-within[b-e2uvqoxj40],
.roi-comparison-table:focus-within[b-e2uvqoxj40],
.model-comparison-table:focus-within[b-e2uvqoxj40] {
    outline: 3px solid #fb923c;
    outline-offset: 3px;
}

.roi-box:focus-within[b-e2uvqoxj40] {
    outline: 3px solid #22c55e;
    outline-offset: 3px;
}

.expert-tip:focus-within[b-e2uvqoxj40] {
    outline: 3px solid #fbbf24;
    outline-offset: 3px;
}

/* Reduzierte Animationen für Accessibility */
@media (prefers-reduced-motion: reduce) {
    .cost-table tbody tr[b-e2uvqoxj40],
    .roi-comparison-table tbody tr[b-e2uvqoxj40],
    .model-comparison-table tbody tr[b-e2uvqoxj40],
    .roi-box ul li[b-e2uvqoxj40],
    .expert-tip ul li[b-e2uvqoxj40] {
        transition: none;
    }

        .cost-table tbody tr[b-e2uvqoxj40]::before,
        .roi-box ul li[b-e2uvqoxj40]::before,
        .expert-tip ul li[b-e2uvqoxj40]::before {
            transition: none;
        }
}
/* _content/BotomixNew/Components/Pages/Knowledge/Branchen/Gastgewerbe/Gastgewerbe.razor.rz.scp.css */
/* Logistics Branch Page Styles */
.branch-page[b-4qb27sy2u0] {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    min-height: calc(100vh - 200px);
    padding: 2rem 1.5rem;
}

.branch-container[b-4qb27sy2u0] {
    max-width: 1200px;
    margin: 0 auto;
}

/* Breadcrumb */
.breadcrumb-nav[b-4qb27sy2u0] {
    margin-bottom: 2rem;
}

.breadcrumb[b-4qb27sy2u0] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 0.9rem;
}

.breadcrumb-item[b-4qb27sy2u0] {
    color: #6b7280;
}

    .breadcrumb-item a[b-4qb27sy2u0] {
        color: #0066ff;
        text-decoration: none;
    }

        .breadcrumb-item a:hover[b-4qb27sy2u0] {
            text-decoration: underline;
        }

    .breadcrumb-item + .breadcrumb-item[b-4qb27sy2u0]::before {
        content: "›";
        margin-right: 0.5rem;
        color: #9ca3af;
    }

    .breadcrumb-item.active[b-4qb27sy2u0] {
        color: #111827;
        font-weight: 500;
    }

/* Branch Header */
.branch-header[b-4qb27sy2u0] {
    text-align: center;
    margin-bottom: 3rem;
}

.branch-icon[b-4qb27sy2u0] {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    margin: 0 auto 1.5rem;
}

.branch-header h1[b-4qb27sy2u0] {
    font-size: 2.5rem;
    font-weight: 800;
    color: #111827;
    margin-bottom: 1rem;
}

.branch-intro[b-4qb27sy2u0] {
    font-size: 1.1rem;
    color: #6b7280;
    line-height: 1.7;
    max-width: 800px;
    margin: 0 auto;
}

/* Quick Stats */
.quick-stats[b-4qb27sy2u0] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    margin-bottom: 3rem;
}

.stat-box[b-4qb27sy2u0] {
    background: white;
    padding: 2rem;
    border-radius: 12px;
    text-align: center;
    border: 2px solid #e5e7eb;
}

.stat-number[b-4qb27sy2u0] {
    display: block;
    font-size: 2.5rem;
    font-weight: 800;
    color: #3b82f6;
    margin-bottom: 0.5rem;
}

.stat-label[b-4qb27sy2u0] {
    display: block;
    font-size: 0.9rem;
    color: #6b7280;
    font-weight: 600;
}

/* Articles Section */
.articles-section[b-4qb27sy2u0] {
    margin-bottom: 4rem;
}

    .articles-section h2[b-4qb27sy2u0] {
        font-size: 2rem;
        font-weight: 700;
        color: #111827;
        margin-bottom: 2rem;
    }

.articles-grid[b-4qb27sy2u0] {
    display: grid;
    gap: 2rem;
}

/* Featured Article */
.article-featured[b-4qb27sy2u0] {
    background: linear-gradient(135deg, #fff 0%, #f9fafb 100%);
    padding: 2.5rem;
    border-radius: 16px;
    border: 2px solid #3b82f6;
    position: relative;
}

.featured-badge[b-4qb27sy2u0] {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: white;
    padding: 0.4rem 1rem;
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 700;
}

.article-featured h3[b-4qb27sy2u0] {
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

    .article-featured h3 a[b-4qb27sy2u0] {
        color: #111827;
        text-decoration: none;
    }

        .article-featured h3 a:hover[b-4qb27sy2u0] {
            color: #3b82f6;
        }

.article-excerpt[b-4qb27sy2u0] {
    font-size: 1.05rem;
    color: #4b5563;
    line-height: 1.7;
    margin-bottom: 1.5rem;
}

.article-meta[b-4qb27sy2u0] {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    font-size: 0.9rem;
    color: #6b7280;
    font-weight: 600;
}

/* Article Cards */
.article-card[b-4qb27sy2u0] {
    background: white;
    padding: 1.5rem;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    transition: all 0.3s ease;
    position: relative;
}

    .article-card:hover[b-4qb27sy2u0] {
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
        transform: translateY(-2px);
        border-color: #3b82f6;
    }

/* Coming Soon Badge */
.coming-soon-badge[b-4qb27sy2u0] {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    color: white;
    padding: 0.4rem 1rem;
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 8px rgba(251, 191, 36, 0.3);
}

/* Coming Soon Article Styles */
.article-card.coming-soon[b-4qb27sy2u0] {
    opacity: 0.7;
    cursor: not-allowed;
    pointer-events: none;
}

    .article-card.coming-soon:hover[b-4qb27sy2u0] {
        box-shadow: none;
        transform: none;
        border-color: #e5e7eb;
    }

    .article-card.coming-soon h4[b-4qb27sy2u0] {
        color: #6b7280;
    }

    .article-card.coming-soon .article-icon[b-4qb27sy2u0] {
        opacity: 0.6;
    }

    .article-card.coming-soon p[b-4qb27sy2u0] {
        color: #9ca3af;
    }

.article-icon[b-4qb27sy2u0] {
    font-size: 2rem;
    margin-bottom: 1rem;
}

.article-card h4[b-4qb27sy2u0] {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
}

    .article-card h4 a[b-4qb27sy2u0] {
        color: #111827;
        text-decoration: none;
    }

        .article-card h4 a:hover[b-4qb27sy2u0] {
            color: #3b82f6;
        }

.article-card p[b-4qb27sy2u0] {
    color: #6b7280;
    line-height: 1.6;
    margin-bottom: 1rem;
    font-size: 0.95rem;
}

.read-time[b-4qb27sy2u0] {
    font-size: 0.85rem;
    color: #9ca3af;
    font-weight: 600;
}

/* CTA Wizard */
.cta-wizard[b-4qb27sy2u0] {
    background: linear-gradient(135deg, #0066ff 0%, #0052cc 100%);
    border-radius: 16px;
    padding: 3rem 2rem;
    text-align: center;
    color: white;
    margin-bottom: 4rem;
}

.cta-content h2[b-4qb27sy2u0] {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.cta-content p[b-4qb27sy2u0] {
    font-size: 1.1rem;
    line-height: 1.7;
    margin-bottom: 2rem;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    opacity: 0.95;
}

.btn-wizard[b-4qb27sy2u0] {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    background: white;
    color: #0066ff;
    padding: 1rem 2rem;
    border-radius: 50px;
    font-weight: 700;
    font-size: 1.1rem;
    text-decoration: none;
    transition: all 0.3s ease;
}

    .btn-wizard:hover[b-4qb27sy2u0] {
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(255, 255, 255, 0.3);
        text-decoration: none;
        color: #0066ff;
    }

.cta-hint[b-4qb27sy2u0] {
    margin-top: 1rem;
    font-size: 0.9rem;
    opacity: 0.9;
}

/* Top Robots Section */
.top-robots[b-4qb27sy2u0] {
    margin-bottom: 4rem;
}

    .top-robots h2[b-4qb27sy2u0] {
        font-size: 2rem;
        font-weight: 700;
        color: #111827;
        margin-bottom: 0.5rem;
    }

.section-intro[b-4qb27sy2u0] {
    font-size: 1rem;
    color: #6b7280;
    margin-bottom: 2rem;
}

.robots-grid[b-4qb27sy2u0] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 2rem;
    margin-bottom: 2rem;
}

.robot-preview[b-4qb27sy2u0] {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    border: 1px solid #e5e7eb;
    transition: all 0.3s ease;
}

    .robot-preview:hover[b-4qb27sy2u0] {
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
        transform: translateY(-2px);
    }

.robot-preview-image[b-4qb27sy2u0] {
    width: 100%;
    height: 200px;
    background: #f3f4f6;
    border-radius: 8px;
    margin-bottom: 1rem;
    overflow: hidden;
}

    .robot-preview-image img[b-4qb27sy2u0] {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.robot-preview h3[b-4qb27sy2u0] {
    font-size: 1.25rem;
    font-weight: 700;
    color: #111827;
    margin-bottom: 0.5rem;
}

.robot-category[b-4qb27sy2u0] {
    display: inline-block;
    background: #3b82f6;
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.robot-description[b-4qb27sy2u0] {
    color: #6b7280;
    line-height: 1.6;
    margin-bottom: 1rem;
    font-size: 0.95rem;
}

.robot-specs[b-4qb27sy2u0] {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: #4b5563;
}

.btn-robot[b-4qb27sy2u0] {
    display: inline-block;
    color: #0066ff;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
}

    .btn-robot:hover[b-4qb27sy2u0] {
        color: #0052cc;
        text-decoration: none;
        transform: translateX(4px);
    }

.view-all[b-4qb27sy2u0] {
    text-align: center;
}

.btn-secondary[b-4qb27sy2u0] {
    display: inline-block;
    padding: 0.875rem 2rem;
    background: white;
    color: #111827;
    border: 2px solid #e5e7eb;
    border-radius: 50px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
}

    .btn-secondary:hover[b-4qb27sy2u0] {
        border-color: #3b82f6;
        color: #3b82f6;
        transform: translateY(-2px);
        text-decoration: none;
    }

/* Related Categories */
.related-categories[b-4qb27sy2u0] {
    margin-bottom: 4rem;
}

    .related-categories h2[b-4qb27sy2u0] {
        font-size: 2rem;
        font-weight: 700;
        color: #111827;
        margin-bottom: 2rem;
    }

.categories-grid[b-4qb27sy2u0] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
}

.related-card[b-4qb27sy2u0] {
    background: white;
    padding: 2rem;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    text-decoration: none;
    transition: all 0.3s ease;
}

    .related-card:hover[b-4qb27sy2u0] {
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
        transform: translateY(-2px);
        border-color: #3b82f6;
        text-decoration: none;
    }

.related-icon[b-4qb27sy2u0] {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.related-card h3[b-4qb27sy2u0] {
    font-size: 1.15rem;
    font-weight: 700;
    color: #111827;
    margin-bottom: 0.5rem;
}

.related-card p[b-4qb27sy2u0] {
    color: #6b7280;
    line-height: 1.6;
    font-size: 0.95rem;
}

/* Back Section */
.back-section[b-4qb27sy2u0] {
    text-align: center;
    padding-top: 3rem;
    border-top: 1px solid #e5e7eb;
}

.back-link[b-4qb27sy2u0] {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    color: #0066ff;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
}

    .back-link:hover[b-4qb27sy2u0] {
        color: #0052cc;
        gap: 1rem;
        text-decoration: none;
    }

/* Responsive */
@media (max-width: 768px) {
    .branch-header h1[b-4qb27sy2u0] {
        font-size: 2rem;
    }

    .quick-stats[b-4qb27sy2u0] {
        grid-template-columns: 1fr;
    }

    .articles-grid[b-4qb27sy2u0] {
        gap: 1.5rem;
    }

    .article-featured[b-4qb27sy2u0] {
        padding: 2rem;
    }

    .robots-grid[b-4qb27sy2u0] {
        grid-template-columns: 1fr;
    }

    .categories-grid[b-4qb27sy2u0] {
        grid-template-columns: 1fr;
    }

    .coming-soon-badge[b-4qb27sy2u0] {
        top: 0.75rem;
        right: 0.75rem;
        padding: 0.35rem 0.75rem;
        font-size: 0.75rem;
    }
}

/* Robot Coming Soon Styles */
.robot-coming-soon-badge[b-4qb27sy2u0] {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    color: white;
    padding: 0.4rem 1rem;
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 8px rgba(251, 191, 36, 0.3);
    z-index: 1;
}

.robot-preview.robot-coming-soon[b-4qb27sy2u0] {
    opacity: 0.75;
    cursor: not-allowed;
    position: relative;
}

    .robot-preview.robot-coming-soon:hover[b-4qb27sy2u0] {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
        transform: none;
    }

    .robot-preview.robot-coming-soon h3[b-4qb27sy2u0] {
        color: #6b7280;
    }

    .robot-preview.robot-coming-soon .robot-description[b-4qb27sy2u0] {
        color: #9ca3af;
    }

.btn-robot-disabled[b-4qb27sy2u0] {
    display: inline-block;
    color: #9ca3af;
    font-weight: 600;
    cursor: not-allowed;
}
/* _content/BotomixNew/Components/Pages/Knowledge/Branchen/Gesundheitswesen/Artikel/TransportroboterKrankenhaus.razor.rz.scp.css */
/* ========================================
   TRANSPORTROBOTER KRANKENHAUS - HEALTHCARE DESIGN
   Optimiert für professionelle Darstellung im Gesundheitswesen
   Farben: Grün (Healthcare)
   ======================================== */

/* =========================
   BASE STYLES & LAYOUT
   ========================= */

.article-page.healthcare[b-gx395c7bcj] {
    background: linear-gradient(180deg, #f0fdf4 0%, #ffffff 40%, #ffffff 100%);
    min-height: calc(100vh - 200px);
    padding: 3rem 2rem;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', sans-serif;
}

.article-outer-container[b-gx395c7bcj] {
    max-width: 1440px;
    margin: 0 auto;
}

/* =========================
   BREADCRUMB NAVIGATION
   ========================= */

.breadcrumb-nav[b-gx395c7bcj] {
    margin-bottom: 2.5rem;
    animation: fadeInDown-b-gx395c7bcj 0.6s ease-out;
}

.breadcrumb[b-gx395c7bcj] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 0.875rem;
}

.breadcrumb-item[b-gx395c7bcj] {
    color: #64748b;
    font-weight: 500;
}

    .breadcrumb-item a[b-gx395c7bcj] {
        color: #10b981;
        text-decoration: none;
        transition: all 0.2s ease;
        position: relative;
    }

        .breadcrumb-item a[b-gx395c7bcj]::after {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            width: 0;
            height: 2px;
            background: #10b981;
            transition: width 0.3s ease;
        }

        .breadcrumb-item a:hover[b-gx395c7bcj] {
            color: #059669;
        }

            .breadcrumb-item a:hover[b-gx395c7bcj]::after {
                width: 100%;
            }

    .breadcrumb-item + .breadcrumb-item[b-gx395c7bcj]::before {
        content: "›";
        margin-right: 0.5rem;
        color: #cbd5e1;
        font-weight: 400;
    }

    .breadcrumb-item.active[b-gx395c7bcj] {
        color: #1e293b;
        font-weight: 600;
    }

/* =========================
   ARTICLE HEADER
   ========================= */

.article-header[b-gx395c7bcj] {
    margin-bottom: 4rem;
    padding-bottom: 2.5rem;
    border-bottom: 1px solid #e2e8f0;
    animation: fadeInUp-b-gx395c7bcj 0.8s ease-out;
}

.article-badge[b-gx395c7bcj] {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.625rem 1.25rem;
    background: linear-gradient(135deg, #34d399 0%, #10b981 100%);
    color: white;
    border-radius: 100px;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.3px;
    margin-bottom: 2rem;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
    transition: all 0.3s ease;
}

    .article-badge:hover[b-gx395c7bcj] {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
    }

    .article-badge svg[b-gx395c7bcj] {
        flex-shrink: 0;
        opacity: 0.95;
    }

.article-header h1[b-gx395c7bcj] {
    font-size: 3rem;
    font-weight: 900;
    color: #0f172a;
    line-height: 1.15;
    margin-bottom: 1.5rem;
    letter-spacing: -0.5px;
    background: linear-gradient(135deg, #0f172a 0%, #334155 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.article-lead[b-gx395c7bcj] {
    font-size: 1.25rem;
    line-height: 1.7;
    color: #475569;
    margin-bottom: 2rem;
    font-weight: 400;
    max-width: 90%;
}

.article-meta[b-gx395c7bcj] {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    font-size: 0.9375rem;
    color: #64748b;
}

    .article-meta span[b-gx395c7bcj] {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        font-weight: 500;
    }

        .article-meta span i[b-gx395c7bcj] {
            color: #10b981;
            opacity: 0.8;
        }

/* =========================
   CONTENT WRAPPER & SIDEBAR
   ========================= */

.content-wrapper-with-sidebar[b-gx395c7bcj] {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 4rem;
    align-items: start;
}

/* =========================
   TABLE OF CONTENTS SIDEBAR
   ========================= */

.table-of-contents-sidebar[b-gx395c7bcj] {
    position: sticky;
    top: 2rem;
    background: linear-gradient(135deg, #f0fdf4 0%, #fff 100%);
    border: 1px solid #a7f3d0;
    border-radius: 16px;
    padding: 2rem 1.5rem;
    max-height: calc(100vh - 4rem);
    overflow-y: auto;
    box-shadow: 0 4px 20px rgba(16, 185, 129, 0.08), 0 0 0 1px rgba(16, 185, 129, 0.05);
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}

    .table-of-contents-sidebar:hover[b-gx395c7bcj] {
        box-shadow: 0 8px 30px rgba(16, 185, 129, 0.12), 0 0 0 1px rgba(16, 185, 129, 0.08);
    }

    .table-of-contents-sidebar h2[b-gx395c7bcj] {
        font-size: 1rem;
        color: #065f46;
        margin-bottom: 1.5rem;
        padding-bottom: 1rem;
        border-bottom: 2px solid #a7f3d0;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .table-of-contents-sidebar nav ul[b-gx395c7bcj] {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .table-of-contents-sidebar nav > ul > li[b-gx395c7bcj] {
        margin-bottom: 0.5rem;
    }

    .table-of-contents-sidebar a[b-gx395c7bcj] {
        color: #047857;
        text-decoration: none;
        display: block;
        padding: 0.75rem 1rem;
        border-radius: 10px;
        transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
        font-size: 0.9375rem;
        line-height: 1.5;
        font-weight: 600;
        position: relative;
        overflow: hidden;
    }

        .table-of-contents-sidebar a[b-gx395c7bcj]::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 3px;
            background: linear-gradient(180deg, #10b981 0%, #059669 100%);
            transform: scaleY(0);
            transition: transform 0.25s ease;
        }

        .table-of-contents-sidebar a:hover[b-gx395c7bcj] {
            background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
            color: #065f46;
            padding-left: 1.25rem;
            transform: translateX(2px);
        }

            .table-of-contents-sidebar a:hover[b-gx395c7bcj]::before {
                transform: scaleY(1);
            }

    /* Custom Scrollbar für Sidebar */
    .table-of-contents-sidebar[b-gx395c7bcj]::-webkit-scrollbar {
        width: 6px;
    }

    .table-of-contents-sidebar[b-gx395c7bcj]::-webkit-scrollbar-track {
        background: #d1fae5;
        border-radius: 3px;
    }

    .table-of-contents-sidebar[b-gx395c7bcj]::-webkit-scrollbar-thumb {
        background: linear-gradient(180deg, #10b981 0%, #059669 100%);
        border-radius: 3px;
    }

        .table-of-contents-sidebar[b-gx395c7bcj]::-webkit-scrollbar-thumb:hover {
            background: linear-gradient(180deg, #059669 0%, #047857 100%);
        }

/* =========================
   MAIN ARTICLE CONTENT
   ========================= */

.article-content-main[b-gx395c7bcj] {
    background: white;
    padding: 3rem 3rem 3rem 3rem;
    border-radius: 20px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05), 0 10px 40px rgba(0, 0, 0, 0.03);
    animation: fadeInUp-b-gx395c7bcj 0.8s ease-out 0.2s both;
    border: 1px solid #f1f5f9;
}

/* =========================
   TL;DR BOX
   ========================= */

.tldr-box[b-gx395c7bcj] {
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 50%, #a7f3d0 100%);
    border: 2px solid #6ee7b7;
    border-radius: 16px;
    padding: 2rem 2.5rem;
    margin-bottom: 3rem;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(110, 231, 183, 0.15);
}

    .tldr-box[b-gx395c7bcj]::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -50%;
        width: 100%;
        height: 100%;
        background: radial-gradient(circle, rgba(110, 231, 183, 0.15) 0%, transparent 70%);
        pointer-events: none;
    }

    .tldr-box h3[b-gx395c7bcj] {
        font-size: 1.375rem;
        font-weight: 800;
        color: #064e3b;
        margin-bottom: 1.25rem;
        display: flex;
        align-items: center;
        gap: 0.75rem;
        position: relative;
    }

    .tldr-box ul[b-gx395c7bcj] {
        list-style: none;
        padding: 0;
        margin: 0;
        position: relative;
    }

        .tldr-box ul li[b-gx395c7bcj] {
            padding: 0.875rem 0;
            color: #047857;
            line-height: 1.7;
            font-weight: 500;
            position: relative;
            padding-left: 2rem;
        }

            .tldr-box ul li[b-gx395c7bcj]::before {
                content: '✓';
                position: absolute;
                left: 0;
                top: 0.875rem;
                width: 24px;
                height: 24px;
                background: linear-gradient(135deg, #10b981 0%, #059669 100%);
                color: white;
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 0.75rem;
                font-weight: 700;
            }

            .tldr-box ul li strong[b-gx395c7bcj] {
                color: #064e3b;
                font-weight: 700;
            }

/* =========================
   ARTICLE TYPOGRAPHY
   ========================= */

.article-content-main h2[b-gx395c7bcj] {
    font-size: 2.25rem;
    font-weight: 800;
    color: #0f172a;
    margin-top: 4rem;
    margin-bottom: 1.75rem;
    padding-top: 1.5rem;
    border-top: 3px solid #f1f5f9;
    scroll-margin-top: 2rem;
    letter-spacing: -0.5px;
    position: relative;
}

    .article-content-main h2[b-gx395c7bcj]::before {
        content: '';
        position: absolute;
        top: -3px;
        left: 0;
        width: 80px;
        height: 3px;
        background: linear-gradient(90deg, #10b981 0%, #34d399 100%);
    }

    .article-content-main h2:first-of-type[b-gx395c7bcj] {
        margin-top: 0;
        border-top: none;
    }

        .article-content-main h2:first-of-type[b-gx395c7bcj]::before {
            display: none;
        }

.article-content-main h3[b-gx395c7bcj] {
    font-size: 1.75rem;
    font-weight: 700;
    color: #1e293b;
    margin-top: 2.5rem;
    margin-bottom: 1.25rem;
    scroll-margin-top: 2rem;
    letter-spacing: -0.3px;
}

.article-content-main h4[b-gx395c7bcj] {
    font-size: 1.375rem;
    font-weight: 700;
    color: #334155;
    margin-top: 2rem;
    margin-bottom: 1rem;
}

.article-content-main h5[b-gx395c7bcj] {
    font-size: 1.125rem;
    font-weight: 700;
    color: #475569;
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
}

.article-content-main p[b-gx395c7bcj] {
    line-height: 1.85;
    color: #334155;
    margin-bottom: 1.5rem;
    font-size: 1.0625rem;
    font-weight: 400;
}

.article-content-main ul[b-gx395c7bcj],
.article-content-main ol[b-gx395c7bcj] {
    margin-bottom: 1.75rem;
    padding-left: 2rem;
}

    .article-content-main ul li[b-gx395c7bcj],
    .article-content-main ol li[b-gx395c7bcj] {
        margin-bottom: 0.875rem;
        line-height: 1.8;
        color: #334155;
        font-size: 1.0625rem;
    }

.article-content-main strong[b-gx395c7bcj] {
    color: #0f172a;
    font-weight: 700;
}

.article-content-main a[b-gx395c7bcj] {
    color: #10b981;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.2s ease;
    position: relative;
    border-bottom: 1px solid transparent;
}

    .article-content-main a:hover[b-gx395c7bcj] {
        color: #059669;
        border-bottom-color: #059669;
    }

/* =========================
   SPECIAL BOXES & CARDS
   ========================= */

.stats-highlight[b-gx395c7bcj],
.manufacturer-card[b-gx395c7bcj],
.expert-tip[b-gx395c7bcj],
.checklist-box[b-gx395c7bcj] {
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    border: 2px solid #86efac;
    border-radius: 16px;
    padding: 2rem 2.5rem;
    margin: 2.5rem 0;
    box-shadow: 0 4px 20px rgba(134, 239, 172, 0.15);
}

    .stats-highlight h4[b-gx395c7bcj],
    .manufacturer-card h4[b-gx395c7bcj],
    .expert-tip h4[b-gx395c7bcj],
    .checklist-box h4[b-gx395c7bcj] {
        color: #065f46;
        font-size: 1.375rem;
        font-weight: 800;
        margin-bottom: 1.5rem;
    }

/* =========================
   RELATED ARTICLES
   ========================= */

.related-articles[b-gx395c7bcj] {
    margin: 5rem 0 3rem 0;
    padding: 3rem 0;
    border-top: 2px solid #e2e8f0;
}

    .related-articles h3[b-gx395c7bcj] {
        font-size: 1.75rem;
        font-weight: 800;
        color: #0f172a;
        margin-bottom: 2rem;
        letter-spacing: -0.3px;
    }

.related-grid[b-gx395c7bcj] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
}

.related-card[b-gx395c7bcj] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    background: white;
    border: 2px solid #e2e8f0;
    border-radius: 16px;
    padding: 2rem;
    text-decoration: none;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

    .related-card[b-gx395c7bcj]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: linear-gradient(90deg, #10b981 0%, #34d399 100%);
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 0.35s ease;
    }

    .related-card:hover[b-gx395c7bcj] {
        border-color: #34d399;
        box-shadow: 0 12px 40px rgba(16, 185, 129, 0.2);
        transform: translateY(-6px);
        background: linear-gradient(135deg, #ffffff 0%, #f0fdf4 100%);
    }

        .related-card:hover[b-gx395c7bcj]::before {
            transform: scaleX(1);
        }

.related-icon[b-gx395c7bcj] {
    font-size: 2.5rem;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.08));
}

.related-card h4[b-gx395c7bcj] {
    font-size: 1.125rem;
    font-weight: 800;
    color: #0f172a;
    margin: 0;
    letter-spacing: -0.2px;
}

.related-card p[b-gx395c7bcj] {
    font-size: 0.9375rem;
    color: #64748b;
    margin: 0;
    line-height: 1.6;
    font-weight: 500;
}

/* =========================
   BACK SECTION
   ========================= */

.back-section[b-gx395c7bcj] {
    margin: 3rem 0 2rem 0;
    padding: 1.5rem 0;
}

.back-link[b-gx395c7bcj] {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    color: #10b981;
    font-weight: 700;
    font-size: 1rem;
    text-decoration: none;
    transition: all 0.3s ease;
    position: relative;
}

    .back-link[b-gx395c7bcj]::before {
        content: '';
        position: absolute;
        bottom: -3px;
        left: 0;
        right: 0;
        height: 2px;
        background: linear-gradient(90deg, #10b981 0%, #34d399 100%);
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 0.3s ease;
    }

    .back-link:hover[b-gx395c7bcj] {
        color: #059669;
        gap: 1rem;
    }

        .back-link:hover[b-gx395c7bcj]::before {
            transform: scaleX(1);
        }

/* =========================
   FINAL CTA
   ========================= */

.final-cta[b-gx395c7bcj] {
    background: linear-gradient(135deg, #10b981 0%, #34d399 50%, #6ee7b7 100%);
    border-radius: 24px;
    padding: 4rem 3rem;
    text-align: center;
    color: white;
    margin: 4rem 0;
    position: relative;
    overflow: hidden;
    box-shadow: 0 12px 40px rgba(16, 185, 129, 0.4);
}

    .final-cta[b-gx395c7bcj]::before {
        content: '';
        position: absolute;
        top: -50%;
        left: -50%;
        width: 200%;
        height: 200%;
        background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
        pointer-events: none;
    }

    .final-cta h3[b-gx395c7bcj] {
        font-size: 2.25rem;
        font-weight: 900;
        margin: 0 0 1rem 0;
        color: white;
        letter-spacing: -0.5px;
        text-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        position: relative;
    }

    .final-cta p[b-gx395c7bcj] {
        font-size: 1.125rem;
        line-height: 1.7;
        margin-bottom: 2.5rem;
        opacity: 0.95;
        font-weight: 500;
        position: relative;
        max-width: 700px;
        margin-left: auto;
        margin-right: auto;
    }

.btn-cta-large[b-gx395c7bcj] {
    display: inline-flex;
    align-items: center;
    gap: 0.875rem;
    padding: 1.375rem 3rem;
    background: white;
    color: #10b981;
    border-radius: 100px;
    font-weight: 800;
    font-size: 1.125rem;
    text-decoration: none;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
    position: relative;
    letter-spacing: 0.3px;
}

    .btn-cta-large:hover[b-gx395c7bcj] {
        transform: translateY(-4px) scale(1.02);
        box-shadow: 0 16px 48px rgba(0, 0, 0, 0.35);
        color: #059669;
        text-decoration: none;
    }

    .btn-cta-large svg[b-gx395c7bcj] {
        flex-shrink: 0;
        transition: transform 0.35s ease;
    }

    .btn-cta-large:hover svg[b-gx395c7bcj] {
        transform: rotate(90deg);
    }

.cta-subtext[b-gx395c7bcj] {
    margin-top: 1.5rem;
    font-size: 0.9375rem;
    opacity: 0.9;
    font-weight: 500;
    position: relative;
}

    .cta-subtext a[b-gx395c7bcj] {
        color: white;
        font-weight: 700;
        text-decoration: underline;
        text-decoration-thickness: 2px;
        text-underline-offset: 3px;
        transition: opacity 0.2s ease;
    }

        .cta-subtext a:hover[b-gx395c7bcj] {
            opacity: 0.8;
        }

/* =========================
   ANIMATIONS
   ========================= */

@keyframes fadeInUp-b-gx395c7bcj {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInDown-b-gx395c7bcj {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* =========================
   RESPONSIVE DESIGN
   ========================= */

@media (max-width: 1200px) {
    .content-wrapper-with-sidebar[b-gx395c7bcj] {
        grid-template-columns: 260px 1fr;
        gap: 3rem;
    }

    .table-of-contents-sidebar[b-gx395c7bcj] {
        padding: 1.75rem 1.25rem;
    }
}

@media (max-width: 1024px) {
    .content-wrapper-with-sidebar[b-gx395c7bcj] {
        grid-template-columns: 1fr;
    }

    .table-of-contents-sidebar[b-gx395c7bcj] {
        position: relative;
        top: 0;
        margin-bottom: 3rem;
        max-height: none;
    }
}

@media (max-width: 768px) {
    .article-page.healthcare[b-gx395c7bcj] {
        padding: 2rem 1.25rem;
    }

    .article-header[b-gx395c7bcj] {
        margin-bottom: 3rem;
    }

        .article-header h1[b-gx395c7bcj] {
            font-size: 2.25rem;
            line-height: 1.2;
        }

    .article-lead[b-gx395c7bcj] {
        font-size: 1.125rem;
        max-width: 100%;
    }

    .article-meta[b-gx395c7bcj] {
        gap: 1.25rem;
        font-size: 0.875rem;
    }

    .article-content-main[b-gx395c7bcj] {
        padding: 2rem 1.75rem;
        border-radius: 16px;
    }

        .article-content-main h2[b-gx395c7bcj] {
            font-size: 1.875rem;
            margin-top: 3rem;
        }

        .article-content-main h3[b-gx395c7bcj] {
            font-size: 1.5rem;
        }

        .article-content-main h4[b-gx395c7bcj] {
            font-size: 1.25rem;
        }

    .tldr-box[b-gx395c7bcj] {
        padding: 1.75rem 1.5rem;
    }

    .final-cta[b-gx395c7bcj] {
        padding: 3rem 2rem;
        border-radius: 20px;
    }

        .final-cta h3[b-gx395c7bcj] {
            font-size: 1.875rem;
        }

        .final-cta p[b-gx395c7bcj] {
            font-size: 1rem;
        }

    .btn-cta-large[b-gx395c7bcj] {
        width: 100%;
        justify-content: center;
        padding: 1.125rem 2rem;
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    .article-page.healthcare[b-gx395c7bcj] {
        padding: 1.5rem 1rem;
    }

    .article-header h1[b-gx395c7bcj] {
        font-size: 1.875rem;
    }

    .article-lead[b-gx395c7bcj] {
        font-size: 1rem;
    }

    .article-badge[b-gx395c7bcj] {
        font-size: 0.75rem;
        padding: 0.5rem 1rem;
    }

    .article-meta[b-gx395c7bcj] {
        font-size: 0.8125rem;
    }

    .article-content-main[b-gx395c7bcj] {
        padding: 1.5rem 1.25rem;
    }

        .article-content-main h2[b-gx395c7bcj] {
            font-size: 1.625rem;
        }

        .article-content-main h3[b-gx395c7bcj] {
            font-size: 1.375rem;
        }

    .tldr-box[b-gx395c7bcj] {
        padding: 1.5rem 1.25rem;
    }

    .final-cta[b-gx395c7bcj] {
        padding: 2.5rem 1.5rem;
    }

        .final-cta h3[b-gx395c7bcj] {
            font-size: 1.625rem;
        }

    .btn-cta-large[b-gx395c7bcj] {
        padding: 1rem 1.75rem;
        font-size: 0.9375rem;
    }
}

/* =========================
   PRINT STYLES
   ========================= */

@media print {
    .article-page.healthcare[b-gx395c7bcj] {
        background: white;
        padding: 0;
    }

    .breadcrumb-nav[b-gx395c7bcj],
    .related-articles[b-gx395c7bcj],
    .final-cta[b-gx395c7bcj],
    .back-section[b-gx395c7bcj],
    .table-of-contents-sidebar[b-gx395c7bcj],
    .article-badge[b-gx395c7bcj] {
        display: none !important;
    }

    .content-wrapper-with-sidebar[b-gx395c7bcj] {
        grid-template-columns: 1fr;
    }

    .article-header[b-gx395c7bcj] {
        border-bottom: 2px solid #000;
        padding-bottom: 1rem;
        page-break-after: avoid;
    }

    .article-content-main h2[b-gx395c7bcj] {
        page-break-after: avoid;
    }
}

/* =========================
   ACCESSIBILITY
   ========================= */

.article-content-main a:focus[b-gx395c7bcj],
.table-of-contents-sidebar .toc-link-item:focus[b-gx395c7bcj],
.btn-cta-large:focus[b-gx395c7bcj],
.back-link:focus[b-gx395c7bcj],
.related-card:focus[b-gx395c7bcj] {
    outline: 3px solid #34d399;
    outline-offset: 3px;
    border-radius: 4px;
}

:focus-visible[b-gx395c7bcj] {
    outline: 3px solid #34d399;
    outline-offset: 3px;
}

/* =========================
   SMOOTH SCROLLING
   ========================= */

html[b-gx395c7bcj] {
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    *[b-gx395c7bcj],
    *[b-gx395c7bcj]::before,
    *[b-gx395c7bcj]::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}
/* _content/BotomixNew/Components/Pages/Knowledge/Branchen/Gesundheitswesen/Artikel/TransportroboterROI.razor.rz.scp.css */
/* ========================================
   TRANSPORTROBOTER KRANKENHAUS - HEALTHCARE DESIGN
   Optimiert für professionelle Darstellung im Gesundheitswesen
   Farben: Grün (Healthcare)
   ======================================== */

/* =========================
   BASE STYLES & LAYOUT
   ========================= */

.article-page.healthcare-economics[b-yjctptersh] {
    background: linear-gradient(180deg, #f0fdf4 0%, #ffffff 40%, #ffffff 100%);
    min-height: calc(100vh - 200px);
    padding: 3rem 2rem;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', sans-serif;
}

.article-outer-container[b-yjctptersh] {
    max-width: 1440px;
    margin: 0 auto;
}

/* =========================
   BREADCRUMB NAVIGATION
   ========================= */

.breadcrumb-nav[b-yjctptersh] {
    margin-bottom: 2.5rem;
    animation: fadeInDown-b-yjctptersh 0.6s ease-out;
}

.breadcrumb[b-yjctptersh] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 0.875rem;
}

.breadcrumb-item[b-yjctptersh] {
    color: #64748b;
    font-weight: 500;
}

    .breadcrumb-item a[b-yjctptersh] {
        color: #10b981;
        text-decoration: none;
        transition: all 0.2s ease;
        position: relative;
    }

        .breadcrumb-item a[b-yjctptersh]::after {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            width: 0;
            height: 2px;
            background: #10b981;
            transition: width 0.3s ease;
        }

        .breadcrumb-item a:hover[b-yjctptersh] {
            color: #059669;
        }

            .breadcrumb-item a:hover[b-yjctptersh]::after {
                width: 100%;
            }

    .breadcrumb-item + .breadcrumb-item[b-yjctptersh]::before {
        content: "›";
        margin-right: 0.5rem;
        color: #cbd5e1;
        font-weight: 400;
    }

    .breadcrumb-item.active[b-yjctptersh] {
        color: #1e293b;
        font-weight: 600;
    }

/* =========================
   ARTICLE HEADER
   ========================= */

.article-header[b-yjctptersh] {
    margin-bottom: 4rem;
    padding-bottom: 2.5rem;
    border-bottom: 1px solid #e2e8f0;
    animation: fadeInUp-b-yjctptersh 0.8s ease-out;
}

.article-badge[b-yjctptersh] {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.625rem 1.25rem;
    background: linear-gradient(135deg, #34d399 0%, #10b981 100%);
    color: white;
    border-radius: 100px;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.3px;
    margin-bottom: 2rem;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
    transition: all 0.3s ease;
}

    .article-badge:hover[b-yjctptersh] {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
    }

    .article-badge svg[b-yjctptersh] {
        flex-shrink: 0;
        opacity: 0.95;
    }

.article-header h1[b-yjctptersh] {
    font-size: 3rem;
    font-weight: 900;
    color: #0f172a;
    line-height: 1.15;
    margin-bottom: 1.5rem;
    letter-spacing: -0.5px;
    background: linear-gradient(135deg, #0f172a 0%, #334155 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.article-lead[b-yjctptersh] {
    font-size: 1.25rem;
    line-height: 1.7;
    color: #475569;
    margin-bottom: 2rem;
    font-weight: 400;
    max-width: 90%;
}

.article-meta[b-yjctptersh] {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    font-size: 0.9375rem;
    color: #64748b;
}

    .article-meta span[b-yjctptersh] {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        font-weight: 500;
    }

        .article-meta span i[b-yjctptersh] {
            color: #10b981;
            opacity: 0.8;
        }

/* =========================
   CONTENT WRAPPER & SIDEBAR
   ========================= */

.content-wrapper-with-sidebar[b-yjctptersh] {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 4rem;
    align-items: start;
}

/* =========================
   TABLE OF CONTENTS SIDEBAR
   ========================= */

.table-of-contents-sidebar[b-yjctptersh] {
    position: sticky;
    top: 2rem;
    background: linear-gradient(135deg, #f0fdf4 0%, #fff 100%);
    border: 1px solid #a7f3d0;
    border-radius: 16px;
    padding: 2rem 1.5rem;
    max-height: calc(100vh - 4rem);
    overflow-y: auto;
    box-shadow: 0 4px 20px rgba(16, 185, 129, 0.08), 0 0 0 1px rgba(16, 185, 129, 0.05);
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}

    .table-of-contents-sidebar:hover[b-yjctptersh] {
        box-shadow: 0 8px 30px rgba(16, 185, 129, 0.12), 0 0 0 1px rgba(16, 185, 129, 0.08);
    }

    .table-of-contents-sidebar h2[b-yjctptersh] {
        font-size: 1rem;
        color: #065f46;
        margin-bottom: 1.5rem;
        padding-bottom: 1rem;
        border-bottom: 2px solid #a7f3d0;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .table-of-contents-sidebar nav ul[b-yjctptersh] {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .table-of-contents-sidebar nav > ul > li[b-yjctptersh] {
        margin-bottom: 0.5rem;
    }

    .table-of-contents-sidebar a[b-yjctptersh] {
        color: #047857;
        text-decoration: none;
        display: block;
        padding: 0.75rem 1rem;
        border-radius: 10px;
        transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
        font-size: 0.9375rem;
        line-height: 1.5;
        font-weight: 600;
        position: relative;
        overflow: hidden;
    }

        .table-of-contents-sidebar a[b-yjctptersh]::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 3px;
            background: linear-gradient(180deg, #10b981 0%, #059669 100%);
            transform: scaleY(0);
            transition: transform 0.25s ease;
        }

        .table-of-contents-sidebar a:hover[b-yjctptersh] {
            background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
            color: #065f46;
            padding-left: 1.25rem;
            transform: translateX(2px);
        }

            .table-of-contents-sidebar a:hover[b-yjctptersh]::before {
                transform: scaleY(1);
            }

    /* Custom Scrollbar für Sidebar */
    .table-of-contents-sidebar[b-yjctptersh]::-webkit-scrollbar {
        width: 6px;
    }

    .table-of-contents-sidebar[b-yjctptersh]::-webkit-scrollbar-track {
        background: #d1fae5;
        border-radius: 3px;
    }

    .table-of-contents-sidebar[b-yjctptersh]::-webkit-scrollbar-thumb {
        background: linear-gradient(180deg, #10b981 0%, #059669 100%);
        border-radius: 3px;
    }

        .table-of-contents-sidebar[b-yjctptersh]::-webkit-scrollbar-thumb:hover {
            background: linear-gradient(180deg, #059669 0%, #047857 100%);
        }

/* =========================
   MAIN ARTICLE CONTENT
   ========================= */

.article-content-main[b-yjctptersh] {
    background: white;
    padding: 3rem 3rem 3rem 3rem;
    border-radius: 20px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05), 0 10px 40px rgba(0, 0, 0, 0.03);
    animation: fadeInUp-b-yjctptersh 0.8s ease-out 0.2s both;
    border: 1px solid #f1f5f9;
}

/* =========================
   TL;DR BOX
   ========================= */

.tldr-box[b-yjctptersh] {
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 50%, #a7f3d0 100%);
    border: 2px solid #6ee7b7;
    border-radius: 16px;
    padding: 2rem 2.5rem;
    margin-bottom: 3rem;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(110, 231, 183, 0.15);
}

    .tldr-box[b-yjctptersh]::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -50%;
        width: 100%;
        height: 100%;
        background: radial-gradient(circle, rgba(110, 231, 183, 0.15) 0%, transparent 70%);
        pointer-events: none;
    }

    .tldr-box h3[b-yjctptersh] {
        font-size: 1.375rem;
        font-weight: 800;
        color: #064e3b;
        margin-bottom: 1.25rem;
        display: flex;
        align-items: center;
        gap: 0.75rem;
        position: relative;
    }

    .tldr-box ul[b-yjctptersh] {
        list-style: none;
        padding: 0;
        margin: 0;
        position: relative;
    }

        .tldr-box ul li[b-yjctptersh] {
            padding: 0.875rem 0;
            color: #047857;
            line-height: 1.7;
            font-weight: 500;
            position: relative;
            padding-left: 2rem;
        }

            .tldr-box ul li[b-yjctptersh]::before {
                content: '✓';
                position: absolute;
                left: 0;
                top: 0.875rem;
                width: 24px;
                height: 24px;
                background: linear-gradient(135deg, #10b981 0%, #059669 100%);
                color: white;
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 0.75rem;
                font-weight: 700;
            }

            .tldr-box ul li strong[b-yjctptersh] {
                color: #064e3b;
                font-weight: 700;
            }

/* =========================
   ARTICLE TYPOGRAPHY
   ========================= */

.article-content-main h2[b-yjctptersh] {
    font-size: 2.25rem;
    font-weight: 800;
    color: #0f172a;
    margin-top: 4rem;
    margin-bottom: 1.75rem;
    padding-top: 1.5rem;
    border-top: 3px solid #f1f5f9;
    scroll-margin-top: 2rem;
    letter-spacing: -0.5px;
    position: relative;
}

    .article-content-main h2[b-yjctptersh]::before {
        content: '';
        position: absolute;
        top: -3px;
        left: 0;
        width: 80px;
        height: 3px;
        background: linear-gradient(90deg, #10b981 0%, #34d399 100%);
    }

    .article-content-main h2:first-of-type[b-yjctptersh] {
        margin-top: 0;
        border-top: none;
    }

        .article-content-main h2:first-of-type[b-yjctptersh]::before {
            display: none;
        }

.article-content-main h3[b-yjctptersh] {
    font-size: 1.75rem;
    font-weight: 700;
    color: #1e293b;
    margin-top: 2.5rem;
    margin-bottom: 1.25rem;
    scroll-margin-top: 2rem;
    letter-spacing: -0.3px;
}

.article-content-main h4[b-yjctptersh] {
    font-size: 1.375rem;
    font-weight: 700;
    color: #334155;
    margin-top: 2rem;
    margin-bottom: 1rem;
}

.article-content-main h5[b-yjctptersh] {
    font-size: 1.125rem;
    font-weight: 700;
    color: #475569;
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
}

.article-content-main p[b-yjctptersh] {
    line-height: 1.85;
    color: #334155;
    margin-bottom: 1.5rem;
    font-size: 1.0625rem;
    font-weight: 400;
}

.article-content-main ul[b-yjctptersh],
.article-content-main ol[b-yjctptersh] {
    margin-bottom: 1.75rem;
    padding-left: 2rem;
}

    .article-content-main ul li[b-yjctptersh],
    .article-content-main ol li[b-yjctptersh] {
        margin-bottom: 0.875rem;
        line-height: 1.8;
        color: #334155;
        font-size: 1.0625rem;
    }

.article-content-main strong[b-yjctptersh] {
    color: #0f172a;
    font-weight: 700;
}

.article-content-main a[b-yjctptersh] {
    color: #10b981;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.2s ease;
    position: relative;
    border-bottom: 1px solid transparent;
}

    .article-content-main a:hover[b-yjctptersh] {
        color: #059669;
        border-bottom-color: #059669;
    }

/* =========================
   SPECIAL BOXES & CARDS
   ========================= */

.stats-highlight[b-yjctptersh],
.manufacturer-card[b-yjctptersh],
.expert-tip[b-yjctptersh],
.checklist-box[b-yjctptersh] {
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    border: 2px solid #86efac;
    border-radius: 16px;
    padding: 2rem 2.5rem;
    margin: 2.5rem 0;
    box-shadow: 0 4px 20px rgba(134, 239, 172, 0.15);
}

    .stats-highlight h4[b-yjctptersh],
    .manufacturer-card h4[b-yjctptersh],
    .expert-tip h4[b-yjctptersh],
    .checklist-box h4[b-yjctptersh] {
        color: #065f46;
        font-size: 1.375rem;
        font-weight: 800;
        margin-bottom: 1.5rem;
    }

/* =========================
   RELATED ARTICLES
   ========================= */

.related-articles[b-yjctptersh] {
    margin: 5rem 0 3rem 0;
    padding: 3rem 0;
    border-top: 2px solid #e2e8f0;
}

    .related-articles h3[b-yjctptersh] {
        font-size: 1.75rem;
        font-weight: 800;
        color: #0f172a;
        margin-bottom: 2rem;
        letter-spacing: -0.3px;
    }

.related-grid[b-yjctptersh] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
}

.related-card[b-yjctptersh] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    background: white;
    border: 2px solid #e2e8f0;
    border-radius: 16px;
    padding: 2rem;
    text-decoration: none;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

    .related-card[b-yjctptersh]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: linear-gradient(90deg, #10b981 0%, #34d399 100%);
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 0.35s ease;
    }

    .related-card:hover[b-yjctptersh] {
        border-color: #34d399;
        box-shadow: 0 12px 40px rgba(16, 185, 129, 0.2);
        transform: translateY(-6px);
        background: linear-gradient(135deg, #ffffff 0%, #f0fdf4 100%);
    }

        .related-card:hover[b-yjctptersh]::before {
            transform: scaleX(1);
        }

.related-icon[b-yjctptersh] {
    font-size: 2.5rem;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.08));
}

.related-card h4[b-yjctptersh] {
    font-size: 1.125rem;
    font-weight: 800;
    color: #0f172a;
    margin: 0;
    letter-spacing: -0.2px;
}

.related-card p[b-yjctptersh] {
    font-size: 0.9375rem;
    color: #64748b;
    margin: 0;
    line-height: 1.6;
    font-weight: 500;
}

/* =========================
   BACK SECTION
   ========================= */

.back-section[b-yjctptersh] {
    margin: 3rem 0 2rem 0;
    padding: 1.5rem 0;
}

.back-link[b-yjctptersh] {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    color: #10b981;
    font-weight: 700;
    font-size: 1rem;
    text-decoration: none;
    transition: all 0.3s ease;
    position: relative;
}

    .back-link[b-yjctptersh]::before {
        content: '';
        position: absolute;
        bottom: -3px;
        left: 0;
        right: 0;
        height: 2px;
        background: linear-gradient(90deg, #10b981 0%, #34d399 100%);
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 0.3s ease;
    }

    .back-link:hover[b-yjctptersh] {
        color: #059669;
        gap: 1rem;
    }

        .back-link:hover[b-yjctptersh]::before {
            transform: scaleX(1);
        }

/* =========================
   FINAL CTA
   ========================= */

.final-cta[b-yjctptersh] {
    background: linear-gradient(135deg, #10b981 0%, #34d399 50%, #6ee7b7 100%);
    border-radius: 24px;
    padding: 4rem 3rem;
    text-align: center;
    color: white;
    margin: 4rem 0;
    position: relative;
    overflow: hidden;
    box-shadow: 0 12px 40px rgba(16, 185, 129, 0.4);
}

    .final-cta[b-yjctptersh]::before {
        content: '';
        position: absolute;
        top: -50%;
        left: -50%;
        width: 200%;
        height: 200%;
        background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
        pointer-events: none;
    }

    .final-cta h3[b-yjctptersh] {
        font-size: 2.25rem;
        font-weight: 900;
        margin: 0 0 1rem 0;
        color: white;
        letter-spacing: -0.5px;
        text-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        position: relative;
    }

    .final-cta p[b-yjctptersh] {
        font-size: 1.125rem;
        line-height: 1.7;
        margin-bottom: 2.5rem;
        opacity: 0.95;
        font-weight: 500;
        position: relative;
        max-width: 700px;
        margin-left: auto;
        margin-right: auto;
    }

.btn-cta-large[b-yjctptersh] {
    display: inline-flex;
    align-items: center;
    gap: 0.875rem;
    padding: 1.375rem 3rem;
    background: white;
    color: #10b981;
    border-radius: 100px;
    font-weight: 800;
    font-size: 1.125rem;
    text-decoration: none;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
    position: relative;
    letter-spacing: 0.3px;
}

    .btn-cta-large:hover[b-yjctptersh] {
        transform: translateY(-4px) scale(1.02);
        box-shadow: 0 16px 48px rgba(0, 0, 0, 0.35);
        color: #059669;
        text-decoration: none;
    }

    .btn-cta-large svg[b-yjctptersh] {
        flex-shrink: 0;
        transition: transform 0.35s ease;
    }

    .btn-cta-large:hover svg[b-yjctptersh] {
        transform: rotate(90deg);
    }

.cta-subtext[b-yjctptersh] {
    margin-top: 1.5rem;
    font-size: 0.9375rem;
    opacity: 0.9;
    font-weight: 500;
    position: relative;
}

    .cta-subtext a[b-yjctptersh] {
        color: white;
        font-weight: 700;
        text-decoration: underline;
        text-decoration-thickness: 2px;
        text-underline-offset: 3px;
        transition: opacity 0.2s ease;
    }

        .cta-subtext a:hover[b-yjctptersh] {
            opacity: 0.8;
        }

/* =========================
   ANIMATIONS
   ========================= */

@keyframes fadeInUp-b-yjctptersh {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInDown-b-yjctptersh {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* =========================
   RESPONSIVE DESIGN
   ========================= */

@media (max-width: 1200px) {
    .content-wrapper-with-sidebar[b-yjctptersh] {
        grid-template-columns: 260px 1fr;
        gap: 3rem;
    }

    .table-of-contents-sidebar[b-yjctptersh] {
        padding: 1.75rem 1.25rem;
    }
}

@media (max-width: 1024px) {
    .content-wrapper-with-sidebar[b-yjctptersh] {
        grid-template-columns: 1fr;
    }

    .table-of-contents-sidebar[b-yjctptersh] {
        position: relative;
        top: 0;
        margin-bottom: 3rem;
        max-height: none;
    }
}

@media (max-width: 768px) {
    .article-page.healthcare-economics[b-yjctptersh] {
        padding: 2rem 1.25rem;
    }

    .article-header[b-yjctptersh] {
        margin-bottom: 3rem;
    }

        .article-header h1[b-yjctptersh] {
            font-size: 2.25rem;
            line-height: 1.2;
        }

    .article-lead[b-yjctptersh] {
        font-size: 1.125rem;
        max-width: 100%;
    }

    .article-meta[b-yjctptersh] {
        gap: 1.25rem;
        font-size: 0.875rem;
    }

    .article-content-main[b-yjctptersh] {
        padding: 2rem 1.75rem;
        border-radius: 16px;
    }

        .article-content-main h2[b-yjctptersh] {
            font-size: 1.875rem;
            margin-top: 3rem;
        }

        .article-content-main h3[b-yjctptersh] {
            font-size: 1.5rem;
        }

        .article-content-main h4[b-yjctptersh] {
            font-size: 1.25rem;
        }

    .tldr-box[b-yjctptersh] {
        padding: 1.75rem 1.5rem;
    }

    .final-cta[b-yjctptersh] {
        padding: 3rem 2rem;
        border-radius: 20px;
    }

        .final-cta h3[b-yjctptersh] {
            font-size: 1.875rem;
        }

        .final-cta p[b-yjctptersh] {
            font-size: 1rem;
        }

    .btn-cta-large[b-yjctptersh] {
        width: 100%;
        justify-content: center;
        padding: 1.125rem 2rem;
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    .article-page.healthcare-economics[b-yjctptersh] {
        padding: 1.5rem 1rem;
    }

    .article-header h1[b-yjctptersh] {
        font-size: 1.875rem;
    }

    .article-lead[b-yjctptersh] {
        font-size: 1rem;
    }

    .article-badge[b-yjctptersh] {
        font-size: 0.75rem;
        padding: 0.5rem 1rem;
    }

    .article-meta[b-yjctptersh] {
        font-size: 0.8125rem;
    }

    .article-content-main[b-yjctptersh] {
        padding: 1.5rem 1.25rem;
    }

        .article-content-main h2[b-yjctptersh] {
            font-size: 1.625rem;
        }

        .article-content-main h3[b-yjctptersh] {
            font-size: 1.375rem;
        }

    .tldr-box[b-yjctptersh] {
        padding: 1.5rem 1.25rem;
    }

    .final-cta[b-yjctptersh] {
        padding: 2.5rem 1.5rem;
    }

        .final-cta h3[b-yjctptersh] {
            font-size: 1.625rem;
        }

    .btn-cta-large[b-yjctptersh] {
        padding: 1rem 1.75rem;
        font-size: 0.9375rem;
    }
}

/* =========================
   PRINT STYLES
   ========================= */

@media print {
    .article-page.healthcare-economics[b-yjctptersh] {
        background: white;
        padding: 0;
    }

    .breadcrumb-nav[b-yjctptersh],
    .related-articles[b-yjctptersh],
    .final-cta[b-yjctptersh],
    .back-section[b-yjctptersh],
    .table-of-contents-sidebar[b-yjctptersh],
    .article-badge[b-yjctptersh] {
        display: none !important;
    }

    .content-wrapper-with-sidebar[b-yjctptersh] {
        grid-template-columns: 1fr;
    }

    .article-header[b-yjctptersh] {
        border-bottom: 2px solid #000;
        padding-bottom: 1rem;
        page-break-after: avoid;
    }

    .article-content-main h2[b-yjctptersh] {
        page-break-after: avoid;
    }
}

/* =========================
   ACCESSIBILITY
   ========================= */

.article-content-main a:focus[b-yjctptersh],
.table-of-contents-sidebar .toc-link-item:focus[b-yjctptersh],
.btn-cta-large:focus[b-yjctptersh],
.back-link:focus[b-yjctptersh],
.related-card:focus[b-yjctptersh] {
    outline: 3px solid #34d399;
    outline-offset: 3px;
    border-radius: 4px;
}

:focus-visible[b-yjctptersh] {
    outline: 3px solid #34d399;
    outline-offset: 3px;
}

/* =========================
   SMOOTH SCROLLING
   ========================= */

html[b-yjctptersh] {
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    *[b-yjctptersh],
    *[b-yjctptersh]::before,
    *[b-yjctptersh]::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}
/* _content/BotomixNew/Components/Pages/Knowledge/Branchen/Gesundheitswesen/Gesundheitswesen.razor.rz.scp.css */
/* Healthcare Branch Page Styles */
.branch-page[b-xkxtcld8oz] {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    min-height: calc(100vh - 200px);
    padding: 2rem 1.5rem;
}

.branch-container[b-xkxtcld8oz] {
    max-width: 1200px;
    margin: 0 auto;
}

/* Breadcrumb */
.breadcrumb-nav[b-xkxtcld8oz] {
    margin-bottom: 2rem;
}

.breadcrumb[b-xkxtcld8oz] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 0.9rem;
}

.breadcrumb-item[b-xkxtcld8oz] {
    color: #6b7280;
}

    .breadcrumb-item a[b-xkxtcld8oz] {
        color: #0066ff;
        text-decoration: none;
    }

        .breadcrumb-item a:hover[b-xkxtcld8oz] {
            text-decoration: underline;
        }

    .breadcrumb-item + .breadcrumb-item[b-xkxtcld8oz]::before {
        content: "›";
        margin-right: 0.5rem;
        color: #9ca3af;
    }

    .breadcrumb-item.active[b-xkxtcld8oz] {
        color: #111827;
        font-weight: 500;
    }

/* Branch Header */
.branch-header[b-xkxtcld8oz] {
    text-align: center;
    margin-bottom: 3rem;
}

.branch-icon[b-xkxtcld8oz] {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #14b8a6 0%, #0d9488 100%);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    margin: 0 auto 1.5rem;
}

.branch-header h1[b-xkxtcld8oz] {
    font-size: 2.5rem;
    font-weight: 800;
    color: #111827;
    margin-bottom: 1rem;
}

.branch-intro[b-xkxtcld8oz] {
    font-size: 1.1rem;
    color: #6b7280;
    line-height: 1.7;
    max-width: 800px;
    margin: 0 auto;
}

/* Quick Stats */
.quick-stats[b-xkxtcld8oz] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    margin-bottom: 3rem;
}

.stat-box[b-xkxtcld8oz] {
    background: white;
    padding: 2rem;
    border-radius: 12px;
    text-align: center;
    border: 2px solid #e5e7eb;
}

.stat-number[b-xkxtcld8oz] {
    display: block;
    font-size: 2.5rem;
    font-weight: 800;
    color: #14b8a6;
    margin-bottom: 0.5rem;
}

.stat-label[b-xkxtcld8oz] {
    display: block;
    font-size: 0.9rem;
    color: #6b7280;
    font-weight: 600;
}

/* Articles Section */
.articles-section[b-xkxtcld8oz] {
    margin-bottom: 4rem;
}

    .articles-section h2[b-xkxtcld8oz] {
        font-size: 2rem;
        font-weight: 700;
        color: #111827;
        margin-bottom: 2rem;
    }

.articles-grid[b-xkxtcld8oz] {
    display: grid;
    gap: 2rem;
}

/* Featured Article */
.article-featured[b-xkxtcld8oz] {
    background: linear-gradient(135deg, #fff 0%, #f9fafb 100%);
    padding: 2.5rem;
    border-radius: 16px;
    border: 2px solid #14b8a6;
    position: relative;
}

.featured-badge[b-xkxtcld8oz] {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: linear-gradient(135deg, #14b8a6 0%, #0d9488 100%);
    color: white;
    padding: 0.4rem 1rem;
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 700;
}

.article-featured h3[b-xkxtcld8oz] {
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

    .article-featured h3 a[b-xkxtcld8oz] {
        color: #111827;
        text-decoration: none;
    }

        .article-featured h3 a:hover[b-xkxtcld8oz] {
            color: #14b8a6;
        }

.article-excerpt[b-xkxtcld8oz] {
    font-size: 1.05rem;
    color: #4b5563;
    line-height: 1.7;
    margin-bottom: 1.5rem;
}

.article-meta[b-xkxtcld8oz] {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    font-size: 0.9rem;
    color: #6b7280;
    font-weight: 600;
}

/* Article Cards */
.article-card[b-xkxtcld8oz] {
    background: white;
    padding: 1.5rem;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    transition: all 0.3s ease;
    position: relative;
}

    .article-card:hover[b-xkxtcld8oz] {
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
        transform: translateY(-2px);
        border-color: #14b8a6;
    }

/* Coming Soon Badge */
.coming-soon-badge[b-xkxtcld8oz] {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    color: white;
    padding: 0.4rem 1rem;
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 8px rgba(251, 191, 36, 0.3);
}

/* Coming Soon Article Styles */
.article-card.coming-soon[b-xkxtcld8oz] {
    opacity: 0.7;
    cursor: not-allowed;
    pointer-events: none;
}

    .article-card.coming-soon:hover[b-xkxtcld8oz] {
        box-shadow: none;
        transform: none;
        border-color: #e5e7eb;
    }

    .article-card.coming-soon h4[b-xkxtcld8oz] {
        color: #6b7280;
    }

    .article-card.coming-soon .article-icon[b-xkxtcld8oz] {
        opacity: 0.6;
    }

    .article-card.coming-soon p[b-xkxtcld8oz] {
        color: #9ca3af;
    }

.article-icon[b-xkxtcld8oz] {
    font-size: 2rem;
    margin-bottom: 1rem;
}

.article-card h4[b-xkxtcld8oz] {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
}

    .article-card h4 a[b-xkxtcld8oz] {
        color: #111827;
        text-decoration: none;
    }

        .article-card h4 a:hover[b-xkxtcld8oz] {
            color: #14b8a6;
        }

.article-card p[b-xkxtcld8oz] {
    color: #6b7280;
    line-height: 1.6;
    margin-bottom: 1rem;
    font-size: 0.95rem;
}

.read-time[b-xkxtcld8oz] {
    font-size: 0.85rem;
    color: #9ca3af;
    font-weight: 600;
}

/* CTA Wizard */
.cta-wizard[b-xkxtcld8oz] {
    background: linear-gradient(135deg, #0066ff 0%, #0052cc 100%);
    border-radius: 16px;
    padding: 3rem 2rem;
    text-align: center;
    color: white;
    margin-bottom: 4rem;
}

.cta-content h2[b-xkxtcld8oz] {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.cta-content p[b-xkxtcld8oz] {
    font-size: 1.1rem;
    line-height: 1.7;
    margin-bottom: 2rem;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    opacity: 0.95;
}

.btn-wizard[b-xkxtcld8oz] {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    background: white;
    color: #0066ff;
    padding: 1rem 2rem;
    border-radius: 50px;
    font-weight: 700;
    font-size: 1.1rem;
    text-decoration: none;
    transition: all 0.3s ease;
}

    .btn-wizard:hover[b-xkxtcld8oz] {
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(255, 255, 255, 0.3);
        text-decoration: none;
        color: #0066ff;
    }

.cta-hint[b-xkxtcld8oz] {
    margin-top: 1rem;
    font-size: 0.9rem;
    opacity: 0.9;
}

/* Top Robots Section */
.top-robots[b-xkxtcld8oz] {
    margin-bottom: 4rem;
}

    .top-robots h2[b-xkxtcld8oz] {
        font-size: 2rem;
        font-weight: 700;
        color: #111827;
        margin-bottom: 0.5rem;
    }

.section-intro[b-xkxtcld8oz] {
    font-size: 1rem;
    color: #6b7280;
    margin-bottom: 2rem;
}

.robots-grid[b-xkxtcld8oz] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 2rem;
    margin-bottom: 2rem;
}

.robot-preview[b-xkxtcld8oz] {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    border: 1px solid #e5e7eb;
    transition: all 0.3s ease;
}

    .robot-preview:hover[b-xkxtcld8oz] {
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
        transform: translateY(-2px);
    }

.robot-preview-image[b-xkxtcld8oz] {
    width: 100%;
    height: 200px;
    background: #f3f4f6;
    border-radius: 8px;
    margin-bottom: 1rem;
    overflow: hidden;
}

    .robot-preview-image img[b-xkxtcld8oz] {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.robot-preview h3[b-xkxtcld8oz] {
    font-size: 1.25rem;
    font-weight: 700;
    color: #111827;
    margin-bottom: 0.5rem;
}

.robot-category[b-xkxtcld8oz] {
    display: inline-block;
    background: #14b8a6;
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.robot-description[b-xkxtcld8oz] {
    color: #6b7280;
    line-height: 1.6;
    margin-bottom: 1rem;
    font-size: 0.95rem;
}

.robot-specs[b-xkxtcld8oz] {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: #4b5563;
}

.btn-robot[b-xkxtcld8oz] {
    display: inline-block;
    color: #0066ff;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
}

    .btn-robot:hover[b-xkxtcld8oz] {
        color: #0052cc;
        text-decoration: none;
        transform: translateX(4px);
    }

.view-all[b-xkxtcld8oz] {
    text-align: center;
}

.btn-secondary[b-xkxtcld8oz] {
    display: inline-block;
    padding: 0.875rem 2rem;
    background: white;
    color: #111827;
    border: 2px solid #e5e7eb;
    border-radius: 50px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
}

    .btn-secondary:hover[b-xkxtcld8oz] {
        border-color: #14b8a6;
        color: #14b8a6;
        transform: translateY(-2px);
        text-decoration: none;
    }

/* Related Categories */
.related-categories[b-xkxtcld8oz] {
    margin-bottom: 4rem;
}

    .related-categories h2[b-xkxtcld8oz] {
        font-size: 2rem;
        font-weight: 700;
        color: #111827;
        margin-bottom: 2rem;
    }

.categories-grid[b-xkxtcld8oz] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
}

.related-card[b-xkxtcld8oz] {
    background: white;
    padding: 2rem;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    text-decoration: none;
    transition: all 0.3s ease;
}

    .related-card:hover[b-xkxtcld8oz] {
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
        transform: translateY(-2px);
        border-color: #14b8a6;
        text-decoration: none;
    }

.related-icon[b-xkxtcld8oz] {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.related-card h3[b-xkxtcld8oz] {
    font-size: 1.15rem;
    font-weight: 700;
    color: #111827;
    margin-bottom: 0.5rem;
}

.related-card p[b-xkxtcld8oz] {
    color: #6b7280;
    line-height: 1.6;
    font-size: 0.95rem;
}

/* Back Section */
.back-section[b-xkxtcld8oz] {
    text-align: center;
    padding-top: 3rem;
    border-top: 1px solid #e5e7eb;
}

.back-link[b-xkxtcld8oz] {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    color: #0066ff;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
}

    .back-link:hover[b-xkxtcld8oz] {
        color: #0052cc;
        gap: 1rem;
        text-decoration: none;
    }

/* Responsive */
@media (max-width: 768px) {
    .branch-header h1[b-xkxtcld8oz] {
        font-size: 2rem;
    }

    .quick-stats[b-xkxtcld8oz] {
        grid-template-columns: 1fr;
    }

    .articles-grid[b-xkxtcld8oz] {
        gap: 1.5rem;
    }

    .article-featured[b-xkxtcld8oz] {
        padding: 2rem;
    }

    .robots-grid[b-xkxtcld8oz] {
        grid-template-columns: 1fr;
    }

    .categories-grid[b-xkxtcld8oz] {
        grid-template-columns: 1fr;
    }

    .coming-soon-badge[b-xkxtcld8oz] {
        top: 0.75rem;
        right: 0.75rem;
        padding: 0.35rem 0.75rem;
        font-size: 0.75rem;
    }
}

/* Robot Coming Soon Styles */
.robot-coming-soon-badge[b-xkxtcld8oz] {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    color: white;
    padding: 0.4rem 1rem;
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 8px rgba(251, 191, 36, 0.3);
    z-index: 1;
}

.robot-preview.robot-coming-soon[b-xkxtcld8oz] {
    opacity: 0.75;
    cursor: not-allowed;
    position: relative;
}

    .robot-preview.robot-coming-soon:hover[b-xkxtcld8oz] {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
        transform: none;
    }

    .robot-preview.robot-coming-soon h3[b-xkxtcld8oz] {
        color: #6b7280;
    }

    .robot-preview.robot-coming-soon .robot-description[b-xkxtcld8oz] {
        color: #9ca3af;
    }

.btn-robot-disabled[b-xkxtcld8oz] {
    display: inline-block;
    color: #9ca3af;
    font-weight: 600;
    cursor: not-allowed;
}
/* _content/BotomixNew/Components/Pages/Knowledge/Branchen/Logistik/Artikel/AMRvsAGV.razor.rz.scp.css */
/* ========================================
   AMR VS AGV - LOGISTICS DESIGN
   Optimiert für professionelle Darstellung in Logistik & Intralogistik
   Farben: Blau (Logistics)
   ======================================== */

/* =========================
   BASE STYLES & LAYOUT
   ========================= */

.article-page.logistik[b-xzdvfohck2] {
    background: linear-gradient(180deg, #eff6ff 0%, #ffffff 40%, #ffffff 100%);
    min-height: calc(100vh - 200px);
    padding: 3rem 2rem;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', sans-serif;
}

.article-outer-container[b-xzdvfohck2] {
    max-width: 1440px;
    margin: 0 auto;
}

/* =========================
   BREADCRUMB NAVIGATION
   ========================= */

.breadcrumb-nav[b-xzdvfohck2] {
    margin-bottom: 2.5rem;
    animation: fadeInDown-b-xzdvfohck2 0.6s ease-out;
}

.breadcrumb[b-xzdvfohck2] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 0.875rem;
}

.breadcrumb-item[b-xzdvfohck2] {
    color: #64748b;
    font-weight: 500;
}

    .breadcrumb-item a[b-xzdvfohck2] {
        color: #3b82f6;
        text-decoration: none;
        transition: all 0.2s ease;
        position: relative;
    }

        .breadcrumb-item a[b-xzdvfohck2]::after {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            width: 0;
            height: 2px;
            background: #3b82f6;
            transition: width 0.3s ease;
        }

        .breadcrumb-item a:hover[b-xzdvfohck2] {
            color: #2563eb;
        }

            .breadcrumb-item a:hover[b-xzdvfohck2]::after {
                width: 100%;
            }

    .breadcrumb-item + .breadcrumb-item[b-xzdvfohck2]::before {
        content: "›";
        margin-right: 0.5rem;
        color: #cbd5e1;
        font-weight: 400;
    }

    .breadcrumb-item.active[b-xzdvfohck2] {
        color: #1e293b;
        font-weight: 600;
    }

/* =========================
   ARTICLE HEADER
   ========================= */

.article-header[b-xzdvfohck2] {
    margin-bottom: 4rem;
    padding-bottom: 2.5rem;
    border-bottom: 1px solid #e2e8f0;
    animation: fadeInUp-b-xzdvfohck2 0.8s ease-out;
}

.article-badge[b-xzdvfohck2] {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.625rem 1.25rem;
    background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%);
    color: white;
    border-radius: 100px;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.3px;
    margin-bottom: 2rem;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
    transition: all 0.3s ease;
}

    .article-badge:hover[b-xzdvfohck2] {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
    }

    .article-badge svg[b-xzdvfohck2] {
        flex-shrink: 0;
        opacity: 0.95;
    }

.article-header h1[b-xzdvfohck2] {
    font-size: 3rem;
    font-weight: 900;
    color: #0f172a;
    line-height: 1.15;
    margin-bottom: 1.5rem;
    letter-spacing: -0.5px;
    background: linear-gradient(135deg, #0f172a 0%, #334155 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.article-lead[b-xzdvfohck2] {
    font-size: 1.25rem;
    line-height: 1.7;
    color: #475569;
    margin-bottom: 2rem;
    font-weight: 400;
    max-width: 90%;
}

.article-meta[b-xzdvfohck2] {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    font-size: 0.9375rem;
    color: #64748b;
}

    .article-meta span[b-xzdvfohck2] {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        font-weight: 500;
    }

        .article-meta span i[b-xzdvfohck2] {
            color: #3b82f6;
            opacity: 0.8;
        }

/* =========================
   CONTENT WRAPPER & SIDEBAR
   ========================= */

.content-wrapper-with-sidebar[b-xzdvfohck2] {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 4rem;
    align-items: start;
}

/* =========================
   TABLE OF CONTENTS SIDEBAR
   ========================= */

.table-of-contents-sidebar[b-xzdvfohck2] {
    position: sticky;
    top: 2rem;
    background: linear-gradient(135deg, #eff6ff 0%, #fff 100%);
    border: 1px solid #bfdbfe;
    border-radius: 16px;
    padding: 2rem 1.5rem;
    max-height: calc(100vh - 4rem);
    overflow-y: auto;
    box-shadow: 0 4px 20px rgba(59, 130, 246, 0.08), 0 0 0 1px rgba(59, 130, 246, 0.05);
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}

    .table-of-contents-sidebar:hover[b-xzdvfohck2] {
        box-shadow: 0 8px 30px rgba(59, 130, 246, 0.12), 0 0 0 1px rgba(59, 130, 246, 0.08);
    }

    .table-of-contents-sidebar h2[b-xzdvfohck2] {
        font-size: 1rem;
        color: #1e40af;
        margin-bottom: 1.5rem;
        padding-bottom: 1rem;
        border-bottom: 2px solid #bfdbfe;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .table-of-contents-sidebar nav ul[b-xzdvfohck2] {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .table-of-contents-sidebar nav > ul > li[b-xzdvfohck2] {
        margin-bottom: 0.5rem;
    }

    .table-of-contents-sidebar a[b-xzdvfohck2] {
        color: #2563eb;
        text-decoration: none;
        display: block;
        padding: 0.75rem 1rem;
        border-radius: 10px;
        transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
        font-size: 0.9375rem;
        line-height: 1.5;
        font-weight: 600;
        position: relative;
        overflow: hidden;
    }

        .table-of-contents-sidebar a[b-xzdvfohck2]::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 3px;
            background: linear-gradient(180deg, #3b82f6 0%, #2563eb 100%);
            transform: scaleY(0);
            transition: transform 0.25s ease;
        }

        .table-of-contents-sidebar a:hover[b-xzdvfohck2] {
            background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
            color: #1e40af;
            padding-left: 1.25rem;
            transform: translateX(2px);
        }

            .table-of-contents-sidebar a:hover[b-xzdvfohck2]::before {
                transform: scaleY(1);
            }

    /* Custom Scrollbar für Sidebar */
    .table-of-contents-sidebar[b-xzdvfohck2]::-webkit-scrollbar {
        width: 6px;
    }

    .table-of-contents-sidebar[b-xzdvfohck2]::-webkit-scrollbar-track {
        background: #dbeafe;
        border-radius: 3px;
    }

    .table-of-contents-sidebar[b-xzdvfohck2]::-webkit-scrollbar-thumb {
        background: linear-gradient(180deg, #3b82f6 0%, #2563eb 100%);
        border-radius: 3px;
    }

        .table-of-contents-sidebar[b-xzdvfohck2]::-webkit-scrollbar-thumb:hover {
            background: linear-gradient(180deg, #2563eb 0%, #1d4ed8 100%);
        }

/* =========================
   MAIN ARTICLE CONTENT
   ========================= */

.article-content-main[b-xzdvfohck2] {
    background: white;
    padding: 3rem 3rem 3rem 3rem;
    border-radius: 20px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05), 0 10px 40px rgba(0, 0, 0, 0.03);
    animation: fadeInUp-b-xzdvfohck2 0.8s ease-out 0.2s both;
    border: 1px solid #f1f5f9;
}

/* =========================
   TL;DR BOX
   ========================= */

.tldr-box[b-xzdvfohck2] {
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 50%, #bfdbfe 100%);
    border: 2px solid #93c5fd;
    border-radius: 16px;
    padding: 2rem 2.5rem;
    margin-bottom: 3rem;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(147, 197, 253, 0.15);
}

    .tldr-box[b-xzdvfohck2]::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -50%;
        width: 100%;
        height: 100%;
        background: radial-gradient(circle, rgba(147, 197, 253, 0.15) 0%, transparent 70%);
        pointer-events: none;
    }

    .tldr-box h3[b-xzdvfohck2] {
        font-size: 1.375rem;
        font-weight: 800;
        color: #1e3a8a;
        margin-bottom: 1.25rem;
        display: flex;
        align-items: center;
        gap: 0.75rem;
        position: relative;
    }

    .tldr-box ul[b-xzdvfohck2] {
        list-style: none;
        padding: 0;
        margin: 0;
        position: relative;
    }

        .tldr-box ul li[b-xzdvfohck2] {
            padding: 0.875rem 0;
            color: #1e40af;
            line-height: 1.7;
            font-weight: 500;
            position: relative;
            padding-left: 2rem;
        }

            .tldr-box ul li[b-xzdvfohck2]::before {
                content: '✓';
                position: absolute;
                left: 0;
                top: 0.875rem;
                width: 24px;
                height: 24px;
                background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
                color: white;
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 0.75rem;
                font-weight: 700;
            }

            .tldr-box ul li strong[b-xzdvfohck2] {
                color: #1e3a8a;
                font-weight: 700;
            }

/* =========================
   ARTICLE TYPOGRAPHY
   ========================= */

.article-content-main h2[b-xzdvfohck2] {
    font-size: 2.25rem;
    font-weight: 800;
    color: #0f172a;
    margin-top: 4rem;
    margin-bottom: 1.75rem;
    padding-top: 1.5rem;
    border-top: 3px solid #f1f5f9;
    scroll-margin-top: 2rem;
    letter-spacing: -0.5px;
    position: relative;
}

    .article-content-main h2[b-xzdvfohck2]::before {
        content: '';
        position: absolute;
        top: -3px;
        left: 0;
        width: 80px;
        height: 3px;
        background: linear-gradient(90deg, #3b82f6 0%, #60a5fa 100%);
    }

    .article-content-main h2:first-of-type[b-xzdvfohck2] {
        margin-top: 0;
        border-top: none;
    }

        .article-content-main h2:first-of-type[b-xzdvfohck2]::before {
            display: none;
        }

.article-content-main h3[b-xzdvfohck2] {
    font-size: 1.75rem;
    font-weight: 700;
    color: #1e293b;
    margin-top: 2.5rem;
    margin-bottom: 1.25rem;
    scroll-margin-top: 2rem;
    letter-spacing: -0.3px;
}

.article-content-main h4[b-xzdvfohck2] {
    font-size: 1.375rem;
    font-weight: 700;
    color: #334155;
    margin-top: 2rem;
    margin-bottom: 1rem;
}

.article-content-main h5[b-xzdvfohck2] {
    font-size: 1.125rem;
    font-weight: 700;
    color: #475569;
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
}

.article-content-main p[b-xzdvfohck2] {
    line-height: 1.85;
    color: #334155;
    margin-bottom: 1.5rem;
    font-size: 1.0625rem;
    font-weight: 400;
}

.article-content-main ul[b-xzdvfohck2],
.article-content-main ol[b-xzdvfohck2] {
    margin-bottom: 1.75rem;
    padding-left: 2rem;
}

    .article-content-main ul li[b-xzdvfohck2],
    .article-content-main ol li[b-xzdvfohck2] {
        margin-bottom: 0.875rem;
        line-height: 1.8;
        color: #334155;
        font-size: 1.0625rem;
    }

.article-content-main strong[b-xzdvfohck2] {
    color: #0f172a;
    font-weight: 700;
}

.article-content-main a[b-xzdvfohck2] {
    color: #3b82f6;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.2s ease;
    position: relative;
    border-bottom: 1px solid transparent;
}

    .article-content-main a:hover[b-xzdvfohck2] {
        color: #2563eb;
        border-bottom-color: #2563eb;
    }

/* =========================
   RELATED ARTICLES
   ========================= */

.related-articles[b-xzdvfohck2] {
    margin: 5rem 0 3rem 0;
    padding: 3rem 0;
    border-top: 2px solid #e2e8f0;
}

    .related-articles h3[b-xzdvfohck2] {
        font-size: 1.75rem;
        font-weight: 800;
        color: #0f172a;
        margin-bottom: 2rem;
        letter-spacing: -0.3px;
    }

.related-grid[b-xzdvfohck2] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
}

.related-card[b-xzdvfohck2] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    background: white;
    border: 2px solid #e2e8f0;
    border-radius: 16px;
    padding: 2rem;
    text-decoration: none;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

    .related-card[b-xzdvfohck2]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: linear-gradient(90deg, #3b82f6 0%, #60a5fa 100%);
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 0.35s ease;
    }

    .related-card:hover[b-xzdvfohck2] {
        border-color: #60a5fa;
        box-shadow: 0 12px 40px rgba(59, 130, 246, 0.2);
        transform: translateY(-6px);
        background: linear-gradient(135deg, #ffffff 0%, #eff6ff 100%);
    }

        .related-card:hover[b-xzdvfohck2]::before {
            transform: scaleX(1);
        }

.related-icon[b-xzdvfohck2] {
    font-size: 2.5rem;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.08));
}

.related-card h4[b-xzdvfohck2] {
    font-size: 1.125rem;
    font-weight: 800;
    color: #0f172a;
    margin: 0;
    letter-spacing: -0.2px;
}

.related-card p[b-xzdvfohck2] {
    font-size: 0.9375rem;
    color: #64748b;
    margin: 0;
    line-height: 1.6;
    font-weight: 500;
}

/* =========================
   BACK SECTION
   ========================= */

.back-section[b-xzdvfohck2] {
    margin: 3rem 0 2rem 0;
    padding: 1.5rem 0;
}

.back-link[b-xzdvfohck2] {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    color: #3b82f6;
    font-weight: 700;
    font-size: 1rem;
    text-decoration: none;
    transition: all 0.3s ease;
    position: relative;
}

    .back-link[b-xzdvfohck2]::before {
        content: '';
        position: absolute;
        bottom: -3px;
        left: 0;
        right: 0;
        height: 2px;
        background: linear-gradient(90deg, #3b82f6 0%, #60a5fa 100%);
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 0.3s ease;
    }

    .back-link:hover[b-xzdvfohck2] {
        color: #2563eb;
        gap: 1rem;
    }

        .back-link:hover[b-xzdvfohck2]::before {
            transform: scaleX(1);
        }

/* =========================
   FINAL CTA
   ========================= */

.final-cta[b-xzdvfohck2] {
    background: linear-gradient(135deg, #3b82f6 0%, #60a5fa 50%, #93c5fd 100%);
    border-radius: 24px;
    padding: 4rem 3rem;
    text-align: center;
    color: white;
    margin: 4rem 0;
    position: relative;
    overflow: hidden;
    box-shadow: 0 12px 40px rgba(59, 130, 246, 0.4);
}

    .final-cta[b-xzdvfohck2]::before {
        content: '';
        position: absolute;
        top: -50%;
        left: -50%;
        width: 200%;
        height: 200%;
        background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
        pointer-events: none;
    }

    .final-cta h3[b-xzdvfohck2] {
        font-size: 2.25rem;
        font-weight: 900;
        margin: 0 0 1rem 0;
        color: white;
        letter-spacing: -0.5px;
        text-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        position: relative;
    }

    .final-cta p[b-xzdvfohck2] {
        font-size: 1.125rem;
        line-height: 1.7;
        margin-bottom: 2.5rem;
        opacity: 0.95;
        font-weight: 500;
        position: relative;
        max-width: 700px;
        margin-left: auto;
        margin-right: auto;
    }

.btn-cta-large[b-xzdvfohck2] {
    display: inline-flex;
    align-items: center;
    gap: 0.875rem;
    padding: 1.375rem 3rem;
    background: white;
    color: #3b82f6;
    border-radius: 100px;
    font-weight: 800;
    font-size: 1.125rem;
    text-decoration: none;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
    position: relative;
    letter-spacing: 0.3px;
}

    .btn-cta-large:hover[b-xzdvfohck2] {
        transform: translateY(-4px) scale(1.02);
        box-shadow: 0 16px 48px rgba(0, 0, 0, 0.35);
        color: #2563eb;
        text-decoration: none;
    }

    .btn-cta-large svg[b-xzdvfohck2] {
        flex-shrink: 0;
        transition: transform 0.35s ease;
    }

    .btn-cta-large:hover svg[b-xzdvfohck2] {
        transform: rotate(90deg);
    }

.cta-subtext[b-xzdvfohck2] {
    margin-top: 1.5rem;
    font-size: 0.9375rem;
    opacity: 0.9;
    font-weight: 500;
    position: relative;
}

    .cta-subtext a[b-xzdvfohck2] {
        color: white;
        font-weight: 700;
        text-decoration: underline;
        text-decoration-thickness: 2px;
        text-underline-offset: 3px;
        transition: opacity 0.2s ease;
    }

        .cta-subtext a:hover[b-xzdvfohck2] {
            opacity: 0.8;
        }

/* =========================
   ANIMATIONS
   ========================= */

@keyframes fadeInUp-b-xzdvfohck2 {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInDown-b-xzdvfohck2 {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* =========================
   RESPONSIVE DESIGN
   ========================= */

@media (max-width: 1200px) {
    .content-wrapper-with-sidebar[b-xzdvfohck2] {
        grid-template-columns: 260px 1fr;
        gap: 3rem;
    }

    .table-of-contents-sidebar[b-xzdvfohck2] {
        padding: 1.75rem 1.25rem;
    }
}

@media (max-width: 1024px) {
    .content-wrapper-with-sidebar[b-xzdvfohck2] {
        grid-template-columns: 1fr;
    }

    .table-of-contents-sidebar[b-xzdvfohck2] {
        position: relative;
        top: 0;
        margin-bottom: 3rem;
        max-height: none;
    }
}

@media (max-width: 768px) {
    .article-page.logistik[b-xzdvfohck2] {
        padding: 2rem 1.25rem;
    }

    .article-header[b-xzdvfohck2] {
        margin-bottom: 3rem;
    }

        .article-header h1[b-xzdvfohck2] {
            font-size: 2.25rem;
            line-height: 1.2;
        }

    .article-lead[b-xzdvfohck2] {
        font-size: 1.125rem;
        max-width: 100%;
    }

    .article-meta[b-xzdvfohck2] {
        gap: 1.25rem;
        font-size: 0.875rem;
    }

    .article-content-main[b-xzdvfohck2] {
        padding: 2rem 1.75rem;
        border-radius: 16px;
    }

        .article-content-main h2[b-xzdvfohck2] {
            font-size: 1.875rem;
            margin-top: 3rem;
        }

        .article-content-main h3[b-xzdvfohck2] {
            font-size: 1.5rem;
        }

        .article-content-main h4[b-xzdvfohck2] {
            font-size: 1.25rem;
        }

    .tldr-box[b-xzdvfohck2] {
        padding: 1.75rem 1.5rem;
    }

    .final-cta[b-xzdvfohck2] {
        padding: 3rem 2rem;
        border-radius: 20px;
    }

        .final-cta h3[b-xzdvfohck2] {
            font-size: 1.875rem;
        }

        .final-cta p[b-xzdvfohck2] {
            font-size: 1rem;
        }

    .btn-cta-large[b-xzdvfohck2] {
        width: 100%;
        justify-content: center;
        padding: 1.125rem 2rem;
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    .article-page.logistik[b-xzdvfohck2] {
        padding: 1.5rem 1rem;
    }

    .article-header h1[b-xzdvfohck2] {
        font-size: 1.875rem;
    }

    .article-lead[b-xzdvfohck2] {
        font-size: 1rem;
    }

    .article-badge[b-xzdvfohck2] {
        font-size: 0.75rem;
        padding: 0.5rem 1rem;
    }

    .article-meta[b-xzdvfohck2] {
        font-size: 0.8125rem;
    }

    .article-content-main[b-xzdvfohck2] {
        padding: 1.5rem 1.25rem;
    }

        .article-content-main h2[b-xzdvfohck2] {
            font-size: 1.625rem;
        }

        .article-content-main h3[b-xzdvfohck2] {
            font-size: 1.375rem;
        }

    .tldr-box[b-xzdvfohck2] {
        padding: 1.5rem 1.25rem;
    }

    .final-cta[b-xzdvfohck2] {
        padding: 2.5rem 1.5rem;
    }

        .final-cta h3[b-xzdvfohck2] {
            font-size: 1.625rem;
        }

    .btn-cta-large[b-xzdvfohck2] {
        padding: 1rem 1.75rem;
        font-size: 0.9375rem;
    }
}

/* =========================
   PRINT STYLES
   ========================= */

@media print {
    .article-page.logistik[b-xzdvfohck2] {
        background: white;
        padding: 0;
    }

    .breadcrumb-nav[b-xzdvfohck2],
    .related-articles[b-xzdvfohck2],
    .final-cta[b-xzdvfohck2],
    .back-section[b-xzdvfohck2],
    .table-of-contents-sidebar[b-xzdvfohck2],
    .article-badge[b-xzdvfohck2] {
        display: none !important;
    }

    .content-wrapper-with-sidebar[b-xzdvfohck2] {
        grid-template-columns: 1fr;
    }

    .article-header[b-xzdvfohck2] {
        border-bottom: 2px solid #000;
        padding-bottom: 1rem;
        page-break-after: avoid;
    }

    .article-content-main h2[b-xzdvfohck2] {
        page-break-after: avoid;
    }
}

/* =========================
   ACCESSIBILITY
   ========================= */

.article-content-main a:focus[b-xzdvfohck2],
.table-of-contents-sidebar a:focus[b-xzdvfohck2],
.btn-cta-large:focus[b-xzdvfohck2],
.back-link:focus[b-xzdvfohck2],
.related-card:focus[b-xzdvfohck2] {
    outline: 3px solid #60a5fa;
    outline-offset: 3px;
    border-radius: 4px;
}

:focus-visible[b-xzdvfohck2] {
    outline: 3px solid #60a5fa;
    outline-offset: 3px;
}

/* =========================
   SMOOTH SCROLLING
   ========================= */

html[b-xzdvfohck2] {
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    *[b-xzdvfohck2],
    *[b-xzdvfohck2]::before,
    *[b-xzdvfohck2]::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}
/* _content/BotomixNew/Components/Pages/Knowledge/Branchen/Logistik/Logistik.razor.rz.scp.css */
/* Logistics Branch Page Styles */
.branch-page[b-jb1l0yhumh] {
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    min-height: calc(100vh - 200px);
    padding: 2rem 1.5rem;
}

.branch-container[b-jb1l0yhumh] {
    max-width: 1200px;
    margin: 0 auto;
}

/* Breadcrumb */
.breadcrumb-nav[b-jb1l0yhumh] {
    margin-bottom: 2rem;
}

.breadcrumb[b-jb1l0yhumh] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 0.9rem;
}

.breadcrumb-item[b-jb1l0yhumh] {
    color: #6b7280;
}

    .breadcrumb-item a[b-jb1l0yhumh] {
        color: #0066ff;
        text-decoration: none;
    }

        .breadcrumb-item a:hover[b-jb1l0yhumh] {
            text-decoration: underline;
        }

    .breadcrumb-item + .breadcrumb-item[b-jb1l0yhumh]::before {
        content: "›";
        margin-right: 0.5rem;
        color: #9ca3af;
    }

    .breadcrumb-item.active[b-jb1l0yhumh] {
        color: #111827;
        font-weight: 500;
    }

/* Branch Header */
.branch-header[b-jb1l0yhumh] {
    text-align: center;
    margin-bottom: 3rem;
}

.branch-icon[b-jb1l0yhumh] {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    margin: 0 auto 1.5rem;
}

.branch-header h1[b-jb1l0yhumh] {
    font-size: 2.5rem;
    font-weight: 800;
    color: #111827;
    margin-bottom: 1rem;
}

.branch-intro[b-jb1l0yhumh] {
    font-size: 1.1rem;
    color: #6b7280;
    line-height: 1.7;
    max-width: 800px;
    margin: 0 auto;
}

/* Quick Stats */
.quick-stats[b-jb1l0yhumh] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    margin-bottom: 3rem;
}

.stat-box[b-jb1l0yhumh] {
    background: white;
    padding: 2rem;
    border-radius: 12px;
    text-align: center;
    border: 2px solid #e5e7eb;
}

.stat-number[b-jb1l0yhumh] {
    display: block;
    font-size: 2.5rem;
    font-weight: 800;
    color: #3b82f6;
    margin-bottom: 0.5rem;
}

.stat-label[b-jb1l0yhumh] {
    display: block;
    font-size: 0.9rem;
    color: #6b7280;
    font-weight: 600;
}

/* Articles Section */
.articles-section[b-jb1l0yhumh] {
    margin-bottom: 4rem;
}

    .articles-section h2[b-jb1l0yhumh] {
        font-size: 2rem;
        font-weight: 700;
        color: #111827;
        margin-bottom: 2rem;
    }

.articles-grid[b-jb1l0yhumh] {
    display: grid;
    gap: 2rem;
}

/* Featured Article */
.article-featured[b-jb1l0yhumh] {
    background: linear-gradient(135deg, #fff 0%, #f9fafb 100%);
    padding: 2.5rem;
    border-radius: 16px;
    border: 2px solid #3b82f6;
    position: relative;
}

.featured-badge[b-jb1l0yhumh] {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: white;
    padding: 0.4rem 1rem;
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 700;
}

.article-featured h3[b-jb1l0yhumh] {
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

    .article-featured h3 a[b-jb1l0yhumh] {
        color: #111827;
        text-decoration: none;
    }

        .article-featured h3 a:hover[b-jb1l0yhumh] {
            color: #3b82f6;
        }

.article-excerpt[b-jb1l0yhumh] {
    font-size: 1.05rem;
    color: #4b5563;
    line-height: 1.7;
    margin-bottom: 1.5rem;
}

.article-meta[b-jb1l0yhumh] {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    font-size: 0.9rem;
    color: #6b7280;
    font-weight: 600;
}

/* Article Cards */
.article-card[b-jb1l0yhumh] {
    background: white;
    padding: 1.5rem;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    transition: all 0.3s ease;
    position: relative;
}

    .article-card:hover[b-jb1l0yhumh] {
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
        transform: translateY(-2px);
        border-color: #3b82f6;
    }

/* Coming Soon Badge */
.coming-soon-badge[b-jb1l0yhumh] {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    color: white;
    padding: 0.4rem 1rem;
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 8px rgba(251, 191, 36, 0.3);
}

/* Coming Soon Article Styles */
.article-card.coming-soon[b-jb1l0yhumh] {
    opacity: 0.7;
    cursor: not-allowed;
    pointer-events: none;
}

    .article-card.coming-soon:hover[b-jb1l0yhumh] {
        box-shadow: none;
        transform: none;
        border-color: #e5e7eb;
    }

    .article-card.coming-soon h4[b-jb1l0yhumh] {
        color: #6b7280;
    }

    .article-card.coming-soon .article-icon[b-jb1l0yhumh] {
        opacity: 0.6;
    }

    .article-card.coming-soon p[b-jb1l0yhumh] {
        color: #9ca3af;
    }

.article-icon[b-jb1l0yhumh] {
    font-size: 2rem;
    margin-bottom: 1rem;
}

.article-card h4[b-jb1l0yhumh] {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
}

    .article-card h4 a[b-jb1l0yhumh] {
        color: #111827;
        text-decoration: none;
    }

        .article-card h4 a:hover[b-jb1l0yhumh] {
            color: #3b82f6;
        }

.article-card p[b-jb1l0yhumh] {
    color: #6b7280;
    line-height: 1.6;
    margin-bottom: 1rem;
    font-size: 0.95rem;
}

.read-time[b-jb1l0yhumh] {
    font-size: 0.85rem;
    color: #9ca3af;
    font-weight: 600;
}

/* CTA Wizard */
.cta-wizard[b-jb1l0yhumh] {
    background: linear-gradient(135deg, #0066ff 0%, #0052cc 100%);
    border-radius: 16px;
    padding: 3rem 2rem;
    text-align: center;
    color: white;
    margin-bottom: 4rem;
}

.cta-content h2[b-jb1l0yhumh] {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.cta-content p[b-jb1l0yhumh] {
    font-size: 1.1rem;
    line-height: 1.7;
    margin-bottom: 2rem;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    opacity: 0.95;
}

.btn-wizard[b-jb1l0yhumh] {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    background: white;
    color: #0066ff;
    padding: 1rem 2rem;
    border-radius: 50px;
    font-weight: 700;
    font-size: 1.1rem;
    text-decoration: none;
    transition: all 0.3s ease;
}

    .btn-wizard:hover[b-jb1l0yhumh] {
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(255, 255, 255, 0.3);
        text-decoration: none;
        color: #0066ff;
    }

.cta-hint[b-jb1l0yhumh] {
    margin-top: 1rem;
    font-size: 0.9rem;
    opacity: 0.9;
}

/* Top Robots Section */
.top-robots[b-jb1l0yhumh] {
    margin-bottom: 4rem;
}

    .top-robots h2[b-jb1l0yhumh] {
        font-size: 2rem;
        font-weight: 700;
        color: #111827;
        margin-bottom: 0.5rem;
    }

.section-intro[b-jb1l0yhumh] {
    font-size: 1rem;
    color: #6b7280;
    margin-bottom: 2rem;
}

.robots-grid[b-jb1l0yhumh] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 2rem;
    margin-bottom: 2rem;
}

.robot-preview[b-jb1l0yhumh] {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    border: 1px solid #e5e7eb;
    transition: all 0.3s ease;
}

    .robot-preview:hover[b-jb1l0yhumh] {
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
        transform: translateY(-2px);
    }

.robot-preview-image[b-jb1l0yhumh] {
    width: 100%;
    height: 200px;
    background: #f3f4f6;
    border-radius: 8px;
    margin-bottom: 1rem;
    overflow: hidden;
}

    .robot-preview-image img[b-jb1l0yhumh] {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.robot-preview h3[b-jb1l0yhumh] {
    font-size: 1.25rem;
    font-weight: 700;
    color: #111827;
    margin-bottom: 0.5rem;
}

.robot-category[b-jb1l0yhumh] {
    display: inline-block;
    background: #3b82f6;
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.robot-description[b-jb1l0yhumh] {
    color: #6b7280;
    line-height: 1.6;
    margin-bottom: 1rem;
    font-size: 0.95rem;
}

.robot-specs[b-jb1l0yhumh] {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: #4b5563;
}

.btn-robot[b-jb1l0yhumh] {
    display: inline-block;
    color: #0066ff;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
}

    .btn-robot:hover[b-jb1l0yhumh] {
        color: #0052cc;
        text-decoration: none;
        transform: translateX(4px);
    }

.view-all[b-jb1l0yhumh] {
    text-align: center;
}

.btn-secondary[b-jb1l0yhumh] {
    display: inline-block;
    padding: 0.875rem 2rem;
    background: white;
    color: #111827;
    border: 2px solid #e5e7eb;
    border-radius: 50px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
}

    .btn-secondary:hover[b-jb1l0yhumh] {
        border-color: #3b82f6;
        color: #3b82f6;
        transform: translateY(-2px);
        text-decoration: none;
    }

/* Related Categories */
.related-categories[b-jb1l0yhumh] {
    margin-bottom: 4rem;
}

    .related-categories h2[b-jb1l0yhumh] {
        font-size: 2rem;
        font-weight: 700;
        color: #111827;
        margin-bottom: 2rem;
    }

.categories-grid[b-jb1l0yhumh] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
}

.related-card[b-jb1l0yhumh] {
    background: white;
    padding: 2rem;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    text-decoration: none;
    transition: all 0.3s ease;
}

    .related-card:hover[b-jb1l0yhumh] {
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
        transform: translateY(-2px);
        border-color: #3b82f6;
        text-decoration: none;
    }

.related-icon[b-jb1l0yhumh] {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.related-card h3[b-jb1l0yhumh] {
    font-size: 1.15rem;
    font-weight: 700;
    color: #111827;
    margin-bottom: 0.5rem;
}

.related-card p[b-jb1l0yhumh] {
    color: #6b7280;
    line-height: 1.6;
    font-size: 0.95rem;
}

/* Back Section */
.back-section[b-jb1l0yhumh] {
    text-align: center;
    padding-top: 3rem;
    border-top: 1px solid #e5e7eb;
}

.back-link[b-jb1l0yhumh] {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    color: #0066ff;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
}

    .back-link:hover[b-jb1l0yhumh] {
        color: #0052cc;
        gap: 1rem;
        text-decoration: none;
    }

/* Responsive */
@media (max-width: 768px) {
    .branch-header h1[b-jb1l0yhumh] {
        font-size: 2rem;
    }

    .quick-stats[b-jb1l0yhumh] {
        grid-template-columns: 1fr;
    }

    .articles-grid[b-jb1l0yhumh] {
        gap: 1.5rem;
    }

    .article-featured[b-jb1l0yhumh] {
        padding: 2rem;
    }

    .robots-grid[b-jb1l0yhumh] {
        grid-template-columns: 1fr;
    }

    .categories-grid[b-jb1l0yhumh] {
        grid-template-columns: 1fr;
    }

    .coming-soon-badge[b-jb1l0yhumh] {
        top: 0.75rem;
        right: 0.75rem;
        padding: 0.35rem 0.75rem;
        font-size: 0.75rem;
    }
}
/* _content/BotomixNew/Components/Pages/Knowledge/Branchen/WeitereBranchen/Artikel/RoboterROIEinzelhandel.razor.rz.scp.css */
/* ========================================
   ROBOTER ROI EINZELHANDEL - RETAIL DESIGN
   Optimiert für professionelle Darstellung im Einzelhandel
   Farben: Lila/Purple (Retail)
   ======================================== */

/* =========================
   BASE STYLES & LAYOUT
   ========================= */

.article-page.retail-roi[b-3vqkb0xx8c] {
    background: linear-gradient(180deg, #faf5ff 0%, #ffffff 40%, #ffffff 100%);
    min-height: calc(100vh - 200px);
    padding: 3rem 2rem;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', sans-serif;
}

.article-outer-container[b-3vqkb0xx8c] {
    max-width: 1440px;
    margin: 0 auto;
}

/* =========================
   BREADCRUMB NAVIGATION
   ========================= */

.breadcrumb-nav[b-3vqkb0xx8c] {
    margin-bottom: 2.5rem;
    animation: fadeInDown-b-3vqkb0xx8c 0.6s ease-out;
}

.breadcrumb[b-3vqkb0xx8c] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 0.875rem;
}

.breadcrumb-item[b-3vqkb0xx8c] {
    color: #64748b;
    font-weight: 500;
}

    .breadcrumb-item a[b-3vqkb0xx8c] {
        color: #a855f7;
        text-decoration: none;
        transition: all 0.2s ease;
        position: relative;
    }

        .breadcrumb-item a[b-3vqkb0xx8c]::after {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            width: 0;
            height: 2px;
            background: #a855f7;
            transition: width 0.3s ease;
        }

        .breadcrumb-item a:hover[b-3vqkb0xx8c] {
            color: #9333ea;
        }

            .breadcrumb-item a:hover[b-3vqkb0xx8c]::after {
                width: 100%;
            }

    .breadcrumb-item + .breadcrumb-item[b-3vqkb0xx8c]::before {
        content: "›";
        margin-right: 0.5rem;
        color: #cbd5e1;
        font-weight: 400;
    }

    .breadcrumb-item.active[b-3vqkb0xx8c] {
        color: #1e293b;
        font-weight: 600;
    }

/* =========================
   ARTICLE HEADER
   ========================= */

.article-header[b-3vqkb0xx8c] {
    margin-bottom: 4rem;
    padding-bottom: 2.5rem;
    border-bottom: 1px solid #e2e8f0;
    animation: fadeInUp-b-3vqkb0xx8c 0.8s ease-out;
}

.article-badge[b-3vqkb0xx8c] {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.625rem 1.25rem;
    background: linear-gradient(135deg, #c084fc 0%, #a855f7 100%);
    color: white;
    border-radius: 100px;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.3px;
    margin-bottom: 2rem;
    box-shadow: 0 2px 8px rgba(168, 85, 247, 0.3);
    transition: all 0.3s ease;
}

    .article-badge:hover[b-3vqkb0xx8c] {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(168, 85, 247, 0.4);
    }

    .article-badge svg[b-3vqkb0xx8c] {
        flex-shrink: 0;
        opacity: 0.95;
    }

.article-header h1[b-3vqkb0xx8c] {
    font-size: 3rem;
    font-weight: 900;
    color: #0f172a;
    line-height: 1.15;
    margin-bottom: 1.5rem;
    letter-spacing: -0.5px;
    background: linear-gradient(135deg, #0f172a 0%, #334155 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.article-lead[b-3vqkb0xx8c] {
    font-size: 1.25rem;
    line-height: 1.7;
    color: #475569;
    margin-bottom: 2rem;
    font-weight: 400;
    max-width: 90%;
}

.article-meta[b-3vqkb0xx8c] {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    font-size: 0.9375rem;
    color: #64748b;
}

    .article-meta span[b-3vqkb0xx8c] {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        font-weight: 500;
    }

        .article-meta span i[b-3vqkb0xx8c] {
            color: #a855f7;
            opacity: 0.8;
        }

/* =========================
   CONTENT WRAPPER & SIDEBAR
   ========================= */

.content-wrapper-with-sidebar[b-3vqkb0xx8c] {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 4rem;
    align-items: start;
}

/* =========================
   TABLE OF CONTENTS SIDEBAR
   ========================= */

.table-of-contents-sidebar[b-3vqkb0xx8c] {
    position: sticky;
    top: 2rem;
    background: linear-gradient(135deg, #faf5ff 0%, #fff 100%);
    border: 1px solid #e9d5ff;
    border-radius: 16px;
    padding: 2rem 1.5rem;
    max-height: calc(100vh - 4rem);
    overflow-y: auto;
    box-shadow: 0 4px 20px rgba(168, 85, 247, 0.08), 0 0 0 1px rgba(168, 85, 247, 0.05);
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}

    .table-of-contents-sidebar:hover[b-3vqkb0xx8c] {
        box-shadow: 0 8px 30px rgba(168, 85, 247, 0.12), 0 0 0 1px rgba(168, 85, 247, 0.08);
    }

    .table-of-contents-sidebar h2[b-3vqkb0xx8c] {
        font-size: 1rem;
        color: #7e22ce;
        margin-bottom: 1.5rem;
        padding-bottom: 1rem;
        border-bottom: 2px solid #e9d5ff;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .table-of-contents-sidebar nav ul[b-3vqkb0xx8c] {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .table-of-contents-sidebar nav > ul > li[b-3vqkb0xx8c] {
        margin-bottom: 0.5rem;
    }

    .table-of-contents-sidebar a[b-3vqkb0xx8c] {
        color: #9333ea;
        text-decoration: none;
        display: block;
        padding: 0.75rem 1rem;
        border-radius: 10px;
        transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
        font-size: 0.9375rem;
        line-height: 1.5;
        font-weight: 600;
        position: relative;
        overflow: hidden;
    }

        .table-of-contents-sidebar a[b-3vqkb0xx8c]::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 3px;
            background: linear-gradient(180deg, #a855f7 0%, #9333ea 100%);
            transform: scaleY(0);
            transition: transform 0.25s ease;
        }

        .table-of-contents-sidebar a:hover[b-3vqkb0xx8c] {
            background: linear-gradient(135deg, #f3e8ff 0%, #e9d5ff 100%);
            color: #7e22ce;
            padding-left: 1.25rem;
            transform: translateX(2px);
        }

            .table-of-contents-sidebar a:hover[b-3vqkb0xx8c]::before {
                transform: scaleY(1);
            }

    /* Custom Scrollbar für Sidebar */
    .table-of-contents-sidebar[b-3vqkb0xx8c]::-webkit-scrollbar {
        width: 6px;
    }

    .table-of-contents-sidebar[b-3vqkb0xx8c]::-webkit-scrollbar-track {
        background: #f3e8ff;
        border-radius: 3px;
    }

    .table-of-contents-sidebar[b-3vqkb0xx8c]::-webkit-scrollbar-thumb {
        background: linear-gradient(180deg, #a855f7 0%, #9333ea 100%);
        border-radius: 3px;
    }

        .table-of-contents-sidebar[b-3vqkb0xx8c]::-webkit-scrollbar-thumb:hover {
            background: linear-gradient(180deg, #9333ea 0%, #7e22ce 100%);
        }

/* =========================
   MAIN ARTICLE CONTENT
   ========================= */

.article-content-main[b-3vqkb0xx8c] {
    background: white;
    padding: 3rem 3rem 3rem 3rem;
    border-radius: 20px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05), 0 10px 40px rgba(0, 0, 0, 0.03);
    animation: fadeInUp-b-3vqkb0xx8c 0.8s ease-out 0.2s both;
    border: 1px solid #f1f5f9;
}

/* =========================
   TL;DR BOX
   ========================= */

.tldr-box[b-3vqkb0xx8c] {
    background: linear-gradient(135deg, #faf5ff 0%, #f3e8ff 50%, #e9d5ff 100%);
    border: 2px solid #d8b4fe;
    border-radius: 16px;
    padding: 2rem 2.5rem;
    margin-bottom: 3rem;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(216, 180, 254, 0.15);
}

    .tldr-box[b-3vqkb0xx8c]::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -50%;
        width: 100%;
        height: 100%;
        background: radial-gradient(circle, rgba(216, 180, 254, 0.15) 0%, transparent 70%);
        pointer-events: none;
    }

    .tldr-box h3[b-3vqkb0xx8c] {
        font-size: 1.375rem;
        font-weight: 800;
        color: #581c87;
        margin-bottom: 1.25rem;
        display: flex;
        align-items: center;
        gap: 0.75rem;
        position: relative;
    }

    .tldr-box ul[b-3vqkb0xx8c] {
        list-style: none;
        padding: 0;
        margin: 0;
        position: relative;
    }

        .tldr-box ul li[b-3vqkb0xx8c] {
            padding: 0.875rem 0;
            color: #7e22ce;
            line-height: 1.7;
            font-weight: 500;
            position: relative;
            padding-left: 2rem;
        }

            .tldr-box ul li[b-3vqkb0xx8c]::before {
                content: '✓';
                position: absolute;
                left: 0;
                top: 0.875rem;
                width: 24px;
                height: 24px;
                background: linear-gradient(135deg, #a855f7 0%, #9333ea 100%);
                color: white;
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 0.75rem;
                font-weight: 700;
            }

            .tldr-box ul li strong[b-3vqkb0xx8c] {
                color: #581c87;
                font-weight: 700;
            }

/* =========================
   ARTICLE TYPOGRAPHY
   ========================= */

.article-content-main h2[b-3vqkb0xx8c] {
    font-size: 2.25rem;
    font-weight: 800;
    color: #0f172a;
    margin-top: 4rem;
    margin-bottom: 1.75rem;
    padding-top: 1.5rem;
    border-top: 3px solid #f1f5f9;
    scroll-margin-top: 2rem;
    letter-spacing: -0.5px;
    position: relative;
}

    .article-content-main h2[b-3vqkb0xx8c]::before {
        content: '';
        position: absolute;
        top: -3px;
        left: 0;
        width: 80px;
        height: 3px;
        background: linear-gradient(90deg, #a855f7 0%, #c084fc 100%);
    }

    .article-content-main h2:first-of-type[b-3vqkb0xx8c] {
        margin-top: 0;
        border-top: none;
    }

        .article-content-main h2:first-of-type[b-3vqkb0xx8c]::before {
            display: none;
        }

.article-content-main h3[b-3vqkb0xx8c] {
    font-size: 1.75rem;
    font-weight: 700;
    color: #1e293b;
    margin-top: 2.5rem;
    margin-bottom: 1.25rem;
    scroll-margin-top: 2rem;
    letter-spacing: -0.3px;
}

.article-content-main h4[b-3vqkb0xx8c] {
    font-size: 1.375rem;
    font-weight: 700;
    color: #334155;
    margin-top: 2rem;
    margin-bottom: 1rem;
}

.article-content-main h5[b-3vqkb0xx8c] {
    font-size: 1.125rem;
    font-weight: 700;
    color: #475569;
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
}

.article-content-main p[b-3vqkb0xx8c] {
    line-height: 1.85;
    color: #334155;
    margin-bottom: 1.5rem;
    font-size: 1.0625rem;
    font-weight: 400;
}

.article-content-main ul[b-3vqkb0xx8c],
.article-content-main ol[b-3vqkb0xx8c] {
    margin-bottom: 1.75rem;
    padding-left: 2rem;
}

    .article-content-main ul li[b-3vqkb0xx8c],
    .article-content-main ol li[b-3vqkb0xx8c] {
        margin-bottom: 0.875rem;
        line-height: 1.8;
        color: #334155;
        font-size: 1.0625rem;
    }

.article-content-main strong[b-3vqkb0xx8c] {
    color: #0f172a;
    font-weight: 700;
}

.article-content-main a[b-3vqkb0xx8c] {
    color: #a855f7;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.2s ease;
    position: relative;
    border-bottom: 1px solid transparent;
}

    .article-content-main a:hover[b-3vqkb0xx8c] {
        color: #9333ea;
        border-bottom-color: #9333ea;
    }

/* =========================
   ANIMATIONS
   ========================= */

@keyframes fadeInUp-b-3vqkb0xx8c {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInDown-b-3vqkb0xx8c {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* =========================
   RESPONSIVE DESIGN
   ========================= */

@media (max-width: 1200px) {
    .content-wrapper-with-sidebar[b-3vqkb0xx8c] {
        grid-template-columns: 260px 1fr;
        gap: 3rem;
    }

    .table-of-contents-sidebar[b-3vqkb0xx8c] {
        padding: 1.75rem 1.25rem;
    }
}

@media (max-width: 1024px) {
    .content-wrapper-with-sidebar[b-3vqkb0xx8c] {
        grid-template-columns: 1fr;
    }

    .table-of-contents-sidebar[b-3vqkb0xx8c] {
        position: relative;
        top: 0;
        margin-bottom: 3rem;
        max-height: none;
    }
}

@media (max-width: 768px) {
    .article-page.retail-roi[b-3vqkb0xx8c] {
        padding: 2rem 1.25rem;
    }

    .article-header[b-3vqkb0xx8c] {
        margin-bottom: 3rem;
    }

        .article-header h1[b-3vqkb0xx8c] {
            font-size: 2.25rem;
            line-height: 1.2;
        }

    .article-lead[b-3vqkb0xx8c] {
        font-size: 1.125rem;
        max-width: 100%;
    }

    .article-meta[b-3vqkb0xx8c] {
        gap: 1.25rem;
        font-size: 0.875rem;
    }

    .article-content-main[b-3vqkb0xx8c] {
        padding: 2rem 1.75rem;
        border-radius: 16px;
    }

        .article-content-main h2[b-3vqkb0xx8c] {
            font-size: 1.875rem;
            margin-top: 3rem;
        }

        .article-content-main h3[b-3vqkb0xx8c] {
            font-size: 1.5rem;
        }

        .article-content-main h4[b-3vqkb0xx8c] {
            font-size: 1.25rem;
        }

    .tldr-box[b-3vqkb0xx8c] {
        padding: 1.75rem 1.5rem;
    }
}

@media (max-width: 480px) {
    .article-page.retail-roi[b-3vqkb0xx8c] {
        padding: 1.5rem 1rem;
    }

    .article-header h1[b-3vqkb0xx8c] {
        font-size: 1.875rem;
    }

    .article-lead[b-3vqkb0xx8c] {
        font-size: 1rem;
    }

    .article-badge[b-3vqkb0xx8c] {
        font-size: 0.75rem;
        padding: 0.5rem 1rem;
    }

    .article-meta[b-3vqkb0xx8c] {
        font-size: 0.8125rem;
    }

    .article-content-main[b-3vqkb0xx8c] {
        padding: 1.5rem 1.25rem;
    }

        .article-content-main h2[b-3vqkb0xx8c] {
            font-size: 1.625rem;
        }

        .article-content-main h3[b-3vqkb0xx8c] {
            font-size: 1.375rem;
        }

    .tldr-box[b-3vqkb0xx8c] {
        padding: 1.5rem 1.25rem;
    }
}

/* =========================
   PRINT STYLES
   ========================= */

@media print {
    .article-page.retail-roi[b-3vqkb0xx8c] {
        background: white;
        padding: 0;
    }

    .breadcrumb-nav[b-3vqkb0xx8c],
    .table-of-contents-sidebar[b-3vqkb0xx8c],
    .article-badge[b-3vqkb0xx8c] {
        display: none !important;
    }

    .content-wrapper-with-sidebar[b-3vqkb0xx8c] {
        grid-template-columns: 1fr;
    }

    .article-header[b-3vqkb0xx8c] {
        border-bottom: 2px solid #000;
        padding-bottom: 1rem;
        page-break-after: avoid;
    }

    .article-content-main h2[b-3vqkb0xx8c] {
        page-break-after: avoid;
    }
}

/* =========================
   ACCESSIBILITY
   ========================= */

.article-content-main a:focus[b-3vqkb0xx8c],
.table-of-contents-sidebar a:focus[b-3vqkb0xx8c] {
    outline: 3px solid #c084fc;
    outline-offset: 3px;
    border-radius: 4px;
}

:focus-visible[b-3vqkb0xx8c] {
    outline: 3px solid #c084fc;
    outline-offset: 3px;
}

/* =========================
   SMOOTH SCROLLING
   ========================= */

html[b-3vqkb0xx8c] {
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    *[b-3vqkb0xx8c],
    *[b-3vqkb0xx8c]::before,
    *[b-3vqkb0xx8c]::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* =========================
   RELATED ARTICLES
   ========================= */

.related-articles[b-3vqkb0xx8c] {
    margin: 5rem 0 3rem 0;
    padding: 3rem 0;
    border-top: 2px solid #e2e8f0;
}

    .related-articles h3[b-3vqkb0xx8c] {
        font-size: 1.75rem;
        font-weight: 800;
        color: #0f172a;
        margin-bottom: 2rem;
        letter-spacing: -0.3px;
    }

.related-grid[b-3vqkb0xx8c] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
}

.related-card[b-3vqkb0xx8c] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    background: white;
    border: 2px solid #e2e8f0;
    border-radius: 16px;
    padding: 2rem;
    text-decoration: none;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

    .related-card[b-3vqkb0xx8c]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: linear-gradient(90deg, #a855f7 0%, #c084fc 100%);
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 0.35s ease;
    }

    .related-card:hover[b-3vqkb0xx8c] {
        border-color: #c084fc;
        box-shadow: 0 12px 40px rgba(168, 85, 247, 0.2);
        transform: translateY(-6px);
        background: linear-gradient(135deg, #ffffff 0%, #faf5ff 100%);
    }

        .related-card:hover[b-3vqkb0xx8c]::before {
            transform: scaleX(1);
        }

.related-icon[b-3vqkb0xx8c] {
    font-size: 2.5rem;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.08));
}

.related-card h4[b-3vqkb0xx8c] {
    font-size: 1.125rem;
    font-weight: 800;
    color: #0f172a;
    margin: 0;
    letter-spacing: -0.2px;
}

.related-card p[b-3vqkb0xx8c] {
    font-size: 0.9375rem;
    color: #64748b;
    margin: 0;
    line-height: 1.6;
    font-weight: 500;
}

/* =========================
   BACK SECTION
   ========================= */

.back-section[b-3vqkb0xx8c] {
    margin: 3rem 0 2rem 0;
    padding: 1.5rem 0;
}

.back-link[b-3vqkb0xx8c] {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.875rem 1.5rem;
    background: linear-gradient(135deg, #faf5ff 0%, #f3e8ff 100%);
    color: #7e22ce;
    text-decoration: none;
    border-radius: 12px;
    font-weight: 700;
    font-size: 0.9375rem;
    border: 2px solid #e9d5ff;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 8px rgba(168, 85, 247, 0.08);
}

    .back-link:hover[b-3vqkb0xx8c] {
        background: linear-gradient(135deg, #f3e8ff 0%, #e9d5ff 100%);
        border-color: #d8b4fe;
        transform: translateX(-4px);
        box-shadow: 0 4px 12px rgba(168, 85, 247, 0.15);
        color: #6b21a8;
    }
/* _content/BotomixNew/Components/Pages/Knowledge/Branchen/WeitereBranchen/WeitereBranchen.razor.rz.scp.css */
/* Weitere Branchen Page Styles */
.branch-page[b-eexwgtu6b4] {
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    min-height: calc(100vh - 200px);
    padding: 2rem 1.5rem;
}

.branch-container[b-eexwgtu6b4] {
    max-width: 1200px;
    margin: 0 auto;
}

/* Breadcrumb */
.breadcrumb-nav[b-eexwgtu6b4] {
    margin-bottom: 2rem;
}

.breadcrumb[b-eexwgtu6b4] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 0.9rem;
}

.breadcrumb-item[b-eexwgtu6b4] {
    color: #6b7280;
}

    .breadcrumb-item a[b-eexwgtu6b4] {
        color: #0066ff;
        text-decoration: none;
    }

        .breadcrumb-item a:hover[b-eexwgtu6b4] {
            text-decoration: underline;
        }

    .breadcrumb-item + .breadcrumb-item[b-eexwgtu6b4]::before {
        content: "›";
        margin-right: 0.5rem;
        color: #9ca3af;
    }

    .breadcrumb-item.active[b-eexwgtu6b4] {
        color: #111827;
        font-weight: 500;
    }

/* Branch Header */
.branch-header[b-eexwgtu6b4] {
    text-align: center;
    margin-bottom: 3rem;
}

.branch-icon[b-eexwgtu6b4] {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    margin: 0 auto 1.5rem;
}

.branch-header h1[b-eexwgtu6b4] {
    font-size: 2.5rem;
    font-weight: 800;
    color: #111827;
    margin-bottom: 1rem;
}

.branch-intro[b-eexwgtu6b4] {
    font-size: 1.1rem;
    color: #6b7280;
    line-height: 1.7;
    max-width: 800px;
    margin: 0 auto;
}

/* Quick Stats */
.quick-stats[b-eexwgtu6b4] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    margin-bottom: 3rem;
}

.stat-box[b-eexwgtu6b4] {
    background: white;
    padding: 2rem;
    border-radius: 12px;
    text-align: center;
    border: 2px solid #e5e7eb;
}

.stat-number[b-eexwgtu6b4] {
    display: block;
    font-size: 2.5rem;
    font-weight: 800;
    color: #3b82f6;
    margin-bottom: 0.5rem;
}

.stat-label[b-eexwgtu6b4] {
    display: block;
    font-size: 0.9rem;
    color: #6b7280;
    font-weight: 600;
}

/* Articles Section */
.articles-section[b-eexwgtu6b4] {
    margin-bottom: 4rem;
}

    .articles-section h2[b-eexwgtu6b4] {
        font-size: 2rem;
        font-weight: 700;
        color: #111827;
        margin-bottom: 2rem;
    }

.articles-grid[b-eexwgtu6b4] {
    display: grid;
    gap: 2rem;
}

/* Featured Article */
.article-featured[b-eexwgtu6b4] {
    background: linear-gradient(135deg, #fff 0%, #f9fafb 100%);
    padding: 2.5rem;
    border-radius: 16px;
    border: 2px solid #3b82f6;
    position: relative;
}

.featured-badge[b-eexwgtu6b4] {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: white;
    padding: 0.4rem 1rem;
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 700;
}

.article-featured h3[b-eexwgtu6b4] {
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

    .article-featured h3 a[b-eexwgtu6b4] {
        color: #111827;
        text-decoration: none;
    }

        .article-featured h3 a:hover[b-eexwgtu6b4] {
            color: #3b82f6;
        }

.article-excerpt[b-eexwgtu6b4] {
    font-size: 1.05rem;
    color: #4b5563;
    line-height: 1.7;
    margin-bottom: 1.5rem;
}

.article-meta[b-eexwgtu6b4] {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    font-size: 0.9rem;
    color: #6b7280;
    font-weight: 600;
}

/* Article Cards */
.article-card[b-eexwgtu6b4] {
    background: white;
    padding: 1.5rem;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    transition: all 0.3s ease;
    position: relative;
}

    .article-card:hover[b-eexwgtu6b4] {
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
        transform: translateY(-2px);
        border-color: #3b82f6;
    }

/* Coming Soon Badge */
.coming-soon-badge[b-eexwgtu6b4] {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    color: white;
    padding: 0.4rem 1rem;
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 8px rgba(251, 191, 36, 0.3);
}

/* Coming Soon Article Styles */
.article-card.coming-soon[b-eexwgtu6b4] {
    opacity: 0.7;
    cursor: not-allowed;
    pointer-events: none;
}

    .article-card.coming-soon:hover[b-eexwgtu6b4] {
        box-shadow: none;
        transform: none;
        border-color: #e5e7eb;
    }

    .article-card.coming-soon h4[b-eexwgtu6b4] {
        color: #6b7280;
    }

    .article-card.coming-soon .article-icon[b-eexwgtu6b4] {
        opacity: 0.6;
    }

    .article-card.coming-soon p[b-eexwgtu6b4] {
        color: #9ca3af;
    }

.article-icon[b-eexwgtu6b4] {
    font-size: 2rem;
    margin-bottom: 1rem;
}

.article-card h4[b-eexwgtu6b4] {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
}

    .article-card h4 a[b-eexwgtu6b4] {
        color: #111827;
        text-decoration: none;
    }

        .article-card h4 a:hover[b-eexwgtu6b4] {
            color: #3b82f6;
        }

.article-card p[b-eexwgtu6b4] {
    color: #6b7280;
    line-height: 1.6;
    margin-bottom: 1rem;
    font-size: 0.95rem;
}

.read-time[b-eexwgtu6b4] {
    font-size: 0.85rem;
    color: #9ca3af;
    font-weight: 600;
}

/* CTA Wizard */
.cta-wizard[b-eexwgtu6b4] {
    background: linear-gradient(135deg, #0066ff 0%, #0052cc 100%);
    border-radius: 16px;
    padding: 3rem 2rem;
    text-align: center;
    color: white;
    margin-bottom: 4rem;
}

.cta-content h2[b-eexwgtu6b4] {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.cta-content p[b-eexwgtu6b4] {
    font-size: 1.1rem;
    line-height: 1.7;
    margin-bottom: 2rem;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    opacity: 0.95;
}

.btn-wizard[b-eexwgtu6b4] {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    background: white;
    color: #0066ff;
    padding: 1rem 2rem;
    border-radius: 50px;
    font-weight: 700;
    font-size: 1.1rem;
    text-decoration: none;
    transition: all 0.3s ease;
}

    .btn-wizard:hover[b-eexwgtu6b4] {
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(255, 255, 255, 0.3);
        text-decoration: none;
        color: #0066ff;
    }

.cta-hint[b-eexwgtu6b4] {
    margin-top: 1rem;
    font-size: 0.9rem;
    opacity: 0.9;
}

/* Top Robots Section */
.top-robots[b-eexwgtu6b4] {
    margin-bottom: 4rem;
}

    .top-robots h2[b-eexwgtu6b4] {
        font-size: 2rem;
        font-weight: 700;
        color: #111827;
        margin-bottom: 0.5rem;
    }

.section-intro[b-eexwgtu6b4] {
    font-size: 1rem;
    color: #6b7280;
    margin-bottom: 2rem;
}

.robots-grid[b-eexwgtu6b4] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 2rem;
    margin-bottom: 2rem;
}

.robot-preview[b-eexwgtu6b4] {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    border: 1px solid #e5e7eb;
    transition: all 0.3s ease;
}

    .robot-preview:hover[b-eexwgtu6b4] {
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
        transform: translateY(-2px);
    }

.robot-preview-image[b-eexwgtu6b4] {
    width: 100%;
    height: 200px;
    background: #f3f4f6;
    border-radius: 8px;
    margin-bottom: 1rem;
    overflow: hidden;
}

    .robot-preview-image img[b-eexwgtu6b4] {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.robot-preview h3[b-eexwgtu6b4] {
    font-size: 1.25rem;
    font-weight: 700;
    color: #111827;
    margin-bottom: 0.5rem;
}

.robot-category[b-eexwgtu6b4] {
    display: inline-block;
    background: #3b82f6;
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.robot-description[b-eexwgtu6b4] {
    color: #6b7280;
    line-height: 1.6;
    margin-bottom: 1rem;
    font-size: 0.95rem;
}

.robot-specs[b-eexwgtu6b4] {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: #4b5563;
}

.btn-robot[b-eexwgtu6b4] {
    display: inline-block;
    color: #0066ff;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
}

    .btn-robot:hover[b-eexwgtu6b4] {
        color: #0052cc;
        text-decoration: none;
        transform: translateX(4px);
    }

.view-all[b-eexwgtu6b4] {
    text-align: center;
}

.btn-secondary[b-eexwgtu6b4] {
    display: inline-block;
    padding: 0.875rem 2rem;
    background: white;
    color: #111827;
    border: 2px solid #e5e7eb;
    border-radius: 50px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
}

    .btn-secondary:hover[b-eexwgtu6b4] {
        border-color: #3b82f6;
        color: #3b82f6;
        transform: translateY(-2px);
        text-decoration: none;
    }

/* Related Categories */
.related-categories[b-eexwgtu6b4] {
    margin-bottom: 4rem;
}

    .related-categories h2[b-eexwgtu6b4] {
        font-size: 2rem;
        font-weight: 700;
        color: #111827;
        margin-bottom: 2rem;
    }

.categories-grid[b-eexwgtu6b4] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
}

.related-card[b-eexwgtu6b4] {
    background: white;
    padding: 2rem;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    text-decoration: none;
    transition: all 0.3s ease;
}

    .related-card:hover[b-eexwgtu6b4] {
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
        transform: translateY(-2px);
        border-color: #3b82f6;
        text-decoration: none;
    }

.related-icon[b-eexwgtu6b4] {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.related-card h3[b-eexwgtu6b4] {
    font-size: 1.15rem;
    font-weight: 700;
    color: #111827;
    margin-bottom: 0.5rem;
}

.related-card p[b-eexwgtu6b4] {
    color: #6b7280;
    line-height: 1.6;
    font-size: 0.95rem;
}

/* Back Section */
.back-section[b-eexwgtu6b4] {
    text-align: center;
    padding-top: 3rem;
    border-top: 1px solid #e5e7eb;
}

.back-link[b-eexwgtu6b4] {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    color: #0066ff;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
}

    .back-link:hover[b-eexwgtu6b4] {
        color: #0052cc;
        gap: 1rem;
        text-decoration: none;
    }

/* Responsive */
@media (max-width: 768px) {
    .branch-header h1[b-eexwgtu6b4] {
        font-size: 2rem;
    }

    .quick-stats[b-eexwgtu6b4] {
        grid-template-columns: 1fr;
    }

    .articles-grid[b-eexwgtu6b4] {
        gap: 1.5rem;
    }

    .article-featured[b-eexwgtu6b4] {
        padding: 2rem;
    }

    .robots-grid[b-eexwgtu6b4] {
        grid-template-columns: 1fr;
    }

    .categories-grid[b-eexwgtu6b4] {
        grid-template-columns: 1fr;
    }

    .coming-soon-badge[b-eexwgtu6b4] {
        top: 0.75rem;
        right: 0.75rem;
        padding: 0.35rem 0.75rem;
        font-size: 0.75rem;
    }
}

/* Robot Coming Soon Styles */
.robot-coming-soon-badge[b-eexwgtu6b4] {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    color: white;
    padding: 0.4rem 1rem;
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 8px rgba(251, 191, 36, 0.3);
    z-index: 1;
}

.robot-preview.robot-coming-soon[b-eexwgtu6b4] {
    opacity: 0.75;
    cursor: not-allowed;
    position: relative;
}

    .robot-preview.robot-coming-soon:hover[b-eexwgtu6b4] {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
        transform: none;
    }

    .robot-preview.robot-coming-soon h3[b-eexwgtu6b4] {
        color: #6b7280;
    }

    .robot-preview.robot-coming-soon .robot-description[b-eexwgtu6b4] {
        color: #9ca3af;
    }

.btn-robot-disabled[b-eexwgtu6b4] {
    display: inline-block;
    color: #9ca3af;
    font-weight: 600;
    cursor: not-allowed;
}
/* _content/BotomixNew/Components/Pages/Knowledge/Categories/AnschaffungFinanzierung.razor.rz.scp.css */
/* Category Page Styles */
.category-page[b-rakptmuqem] {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    min-height: calc(100vh - 200px);
    padding: 2rem 1.5rem;
}

.category-container[b-rakptmuqem] {
    max-width: 1200px;
    margin: 0 auto;
}

/* Breadcrumb Navigation */
.breadcrumb-nav[b-rakptmuqem] {
    margin-bottom: 2rem;
}

.breadcrumb[b-rakptmuqem] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 0.9rem;
}

.breadcrumb-item[b-rakptmuqem] {
    color: #6b7280;
}

    .breadcrumb-item a[b-rakptmuqem] {
        color: #0066ff;
        text-decoration: none;
        transition: color 0.2s ease;
    }

        .breadcrumb-item a:hover[b-rakptmuqem] {
            color: #0052cc;
            text-decoration: underline;
        }

    .breadcrumb-item + .breadcrumb-item[b-rakptmuqem]::before {
        content: "›";
        margin-right: 0.5rem;
        color: #9ca3af;
    }

    .breadcrumb-item.active[b-rakptmuqem] {
        color: #111827;
        font-weight: 500;
    }

/* Category Header */
.category-header[b-rakptmuqem] {
    text-align: center;
    margin-bottom: 3rem;
}

.category-icon-large[b-rakptmuqem] {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #0066ff 0%, #0052cc 100%);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    margin: 0 auto 1.5rem;
}

.category-header h1[b-rakptmuqem] {
    font-size: 2.5rem;
    font-weight: 800;
    color: #111827;
    margin-bottom: 1rem;
    line-height: 1.2;
}

.category-intro[b-rakptmuqem] {
    font-size: 1.1rem;
    color: #6b7280;
    line-height: 1.7;
    max-width: 700px;
    margin: 0 auto 1.5rem;
}

/* Category Stats */
.category-stats[b-rakptmuqem] {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.stat-badge[b-rakptmuqem] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: white;
    border-radius: 50px;
    font-size: 0.875rem;
    font-weight: 600;
    color: #374151;
    border: 1px solid #e5e7eb;
}

    .stat-badge svg[b-rakptmuqem] {
        color: #0066ff;
    }

/* Articles Section */
.articles-section[b-rakptmuqem] {
    margin-top: 4rem;
    margin-bottom: 3rem;
}

.section-title[b-rakptmuqem] {
    font-size: 1.75rem;
    font-weight: 700;
    color: #111827;
    margin-bottom: 2rem;
}

/* Articles Grid */
.articles-grid[b-rakptmuqem] {
    display: grid;
    gap: 1.5rem;
}

/* Article Card */
.article-card[b-rakptmuqem] {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    border: 1px solid #e5e7eb;
    transition: all 0.3s ease;
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
    cursor: pointer;
}

    .article-card:hover[b-rakptmuqem] {
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
        transform: translateY(-2px);
        border-color: #0066ff;
    }

        .article-card:hover .article-arrow[b-rakptmuqem] {
            transform: translateX(4px);
        }

        .article-card:hover .article-title a[b-rakptmuqem] {
            color: #0066ff;
        }

.article-icon[b-rakptmuqem] {
    font-size: 2rem;
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
    border-radius: 10px;
}

.article-content[b-rakptmuqem] {
    flex: 1;
}

.article-title[b-rakptmuqem] {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0 0 0.75rem 0;
    line-height: 1.3;
}

    .article-title a[b-rakptmuqem] {
        color: #111827;
        text-decoration: none;
        transition: color 0.2s ease;
    }

        .article-title a:hover[b-rakptmuqem] {
            color: #0066ff;
        }

.article-description[b-rakptmuqem] {
    color: #6b7280;
    line-height: 1.6;
    margin-bottom: 1rem;
    font-size: 0.95rem;
}

.article-meta[b-rakptmuqem] {
    display: flex;
    gap: 1.25rem;
    flex-wrap: wrap;
}

.meta-item[b-rakptmuqem] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    color: #9ca3af;
}

    .meta-item svg[b-rakptmuqem] {
        color: #9ca3af;
    }

.article-arrow[b-rakptmuqem] {
    flex-shrink: 0;
    color: #0066ff;
    transition: transform 0.2s ease;
    margin-top: 0.5rem;
}

/* Back Section */
.back-section[b-rakptmuqem] {
    text-align: center;
    margin-top: 4rem;
    padding-top: 3rem;
    border-top: 1px solid #e5e7eb;
}

.back-link[b-rakptmuqem] {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    color: #0066ff;
    font-weight: 600;
    text-decoration: none;
    font-size: 1rem;
    transition: all 0.2s ease;
}

    .back-link:hover[b-rakptmuqem] {
        color: #0052cc;
        text-decoration: none;
        gap: 1rem;
    }

    .back-link svg[b-rakptmuqem] {
        transition: transform 0.2s ease;
    }

    .back-link:hover svg[b-rakptmuqem] {
        transform: translateX(-4px);
    }

/* Responsive Design */
@media (max-width: 768px) {
    .category-page[b-rakptmuqem] {
        padding: 1.5rem 1rem;
    }

    .category-icon-large[b-rakptmuqem] {
        width: 64px;
        height: 64px;
    }

        .category-icon-large svg[b-rakptmuqem] {
            width: 32px;
            height: 32px;
        }

    .category-header h1[b-rakptmuqem] {
        font-size: 2rem;
    }

    .category-intro[b-rakptmuqem] {
        font-size: 1rem;
    }

    .category-stats[b-rakptmuqem] {
        gap: 1rem;
    }

    .stat-badge[b-rakptmuqem] {
        font-size: 0.8rem;
        padding: 0.4rem 0.8rem;
    }

    .section-title[b-rakptmuqem] {
        font-size: 1.5rem;
    }

    .article-card[b-rakptmuqem] {
        padding: 1.25rem;
    }

    .article-icon[b-rakptmuqem] {
        font-size: 1.5rem;
        width: 48px;
        height: 48px;
    }

    .article-title[b-rakptmuqem] {
        font-size: 1.1rem;
    }

    .article-description[b-rakptmuqem] {
        font-size: 0.9rem;
    }

    .article-meta[b-rakptmuqem] {
        gap: 1rem;
    }

    .meta-item[b-rakptmuqem] {
        font-size: 0.8rem;
    }
}

@media (max-width: 480px) {
    .category-page[b-rakptmuqem] {
        padding: 1rem 0.75rem;
    }

    .category-icon-large[b-rakptmuqem] {
        width: 56px;
        height: 56px;
    }

        .category-icon-large svg[b-rakptmuqem] {
            width: 28px;
            height: 28px;
        }

    .category-header h1[b-rakptmuqem] {
        font-size: 1.75rem;
    }

    .category-intro[b-rakptmuqem] {
        font-size: 0.95rem;
    }

    .article-card[b-rakptmuqem] {
        flex-direction: column;
        padding: 1rem;
    }

    .article-icon[b-rakptmuqem] {
        width: 100%;
        height: 56px;
    }

    .article-arrow[b-rakptmuqem] {
        align-self: flex-end;
        margin-top: 0;
    }

    .back-link[b-rakptmuqem] {
        font-size: 0.9rem;
    }
}

/* Print Styles */
@media print {
    .category-page[b-rakptmuqem] {
        background: white;
        padding: 0;
    }

    .breadcrumb-nav[b-rakptmuqem],
    .back-section[b-rakptmuqem] {
        display: none;
    }

    .article-card[b-rakptmuqem] {
        break-inside: avoid;
        page-break-inside: avoid;
        box-shadow: none;
        border: 1px solid #ddd;
        margin-bottom: 1rem;
    }

    .article-arrow[b-rakptmuqem] {
        display: none;
    }
}

/* Accessibility */
.article-card:focus-within[b-rakptmuqem] {
    outline: 2px solid #0066ff;
    outline-offset: 2px;
    border-radius: 12px;
}

.back-link:focus[b-rakptmuqem] {
    outline: 2px solid #0066ff;
    outline-offset: 2px;
    border-radius: 4px;
}
/* _content/BotomixNew/Components/Pages/Knowledge/Categories/Anwendungsfaelleusecases.razor.rz.scp.css */
/* Category Page Styles */
.category-page[b-jya2ns9ujt] {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    min-height: calc(100vh - 200px);
    padding: 2rem 1.5rem;
}

.category-container[b-jya2ns9ujt] {
    max-width: 1200px;
    margin: 0 auto;
}

/* Breadcrumb Navigation */
.breadcrumb-nav[b-jya2ns9ujt] {
    margin-bottom: 2rem;
}

.breadcrumb[b-jya2ns9ujt] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 0.9rem;
}

.breadcrumb-item[b-jya2ns9ujt] {
    color: #6b7280;
}

    .breadcrumb-item a[b-jya2ns9ujt] {
        color: #0066ff;
        text-decoration: none;
        transition: color 0.2s ease;
    }

        .breadcrumb-item a:hover[b-jya2ns9ujt] {
            color: #0052cc;
            text-decoration: underline;
        }

    .breadcrumb-item + .breadcrumb-item[b-jya2ns9ujt]::before {
        content: "›";
        margin-right: 0.5rem;
        color: #9ca3af;
    }

    .breadcrumb-item.active[b-jya2ns9ujt] {
        color: #111827;
        font-weight: 500;
    }

/* Category Header */
.category-header[b-jya2ns9ujt] {
    text-align: center;
    margin-bottom: 3rem;
}

.category-icon-large[b-jya2ns9ujt] {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #0066ff 0%, #0052cc 100%);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    margin: 0 auto 1.5rem;
}

.category-header h1[b-jya2ns9ujt] {
    font-size: 2.5rem;
    font-weight: 800;
    color: #111827;
    margin-bottom: 1rem;
    line-height: 1.2;
}

.category-intro[b-jya2ns9ujt] {
    font-size: 1.1rem;
    color: #6b7280;
    line-height: 1.7;
    max-width: 700px;
    margin: 0 auto 1.5rem;
}

/* Category Stats */
.category-stats[b-jya2ns9ujt] {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.stat-badge[b-jya2ns9ujt] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: white;
    border-radius: 50px;
    font-size: 0.875rem;
    font-weight: 600;
    color: #374151;
    border: 1px solid #e5e7eb;
}

    .stat-badge svg[b-jya2ns9ujt] {
        color: #0066ff;
    }

/* Articles Section */
.articles-section[b-jya2ns9ujt] {
    margin-top: 4rem;
    margin-bottom: 3rem;
}

.section-title[b-jya2ns9ujt] {
    font-size: 1.75rem;
    font-weight: 700;
    color: #111827;
    margin-bottom: 2rem;
}

/* Articles Grid */
.articles-grid[b-jya2ns9ujt] {
    display: grid;
    gap: 1.5rem;
}

/* Article Card */
.article-card[b-jya2ns9ujt] {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    border: 1px solid #e5e7eb;
    transition: all 0.3s ease;
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
    cursor: pointer;
}

    .article-card:hover[b-jya2ns9ujt] {
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
        transform: translateY(-2px);
        border-color: #0066ff;
    }

        .article-card:hover .article-arrow[b-jya2ns9ujt] {
            transform: translateX(4px);
        }

        .article-card:hover .article-title a[b-jya2ns9ujt] {
            color: #0066ff;
        }

.article-icon[b-jya2ns9ujt] {
    font-size: 2rem;
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
    border-radius: 10px;
}

.article-content[b-jya2ns9ujt] {
    flex: 1;
}

.article-title[b-jya2ns9ujt] {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0 0 0.75rem 0;
    line-height: 1.3;
}

    .article-title a[b-jya2ns9ujt] {
        color: #111827;
        text-decoration: none;
        transition: color 0.2s ease;
    }

        .article-title a:hover[b-jya2ns9ujt] {
            color: #0066ff;
        }

.article-description[b-jya2ns9ujt] {
    color: #6b7280;
    line-height: 1.6;
    margin-bottom: 1rem;
    font-size: 0.95rem;
}

.article-meta[b-jya2ns9ujt] {
    display: flex;
    gap: 1.25rem;
    flex-wrap: wrap;
}

.meta-item[b-jya2ns9ujt] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    color: #9ca3af;
}

    .meta-item svg[b-jya2ns9ujt] {
        color: #9ca3af;
    }

.article-arrow[b-jya2ns9ujt] {
    flex-shrink: 0;
    color: #0066ff;
    transition: transform 0.2s ease;
    margin-top: 0.5rem;
}

/* Back Section */
.back-section[b-jya2ns9ujt] {
    text-align: center;
    margin-top: 4rem;
    padding-top: 3rem;
    border-top: 1px solid #e5e7eb;
}

.back-link[b-jya2ns9ujt] {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    color: #0066ff;
    font-weight: 600;
    text-decoration: none;
    font-size: 1rem;
    transition: all 0.2s ease;
}

    .back-link:hover[b-jya2ns9ujt] {
        color: #0052cc;
        text-decoration: none;
        gap: 1rem;
    }

    .back-link svg[b-jya2ns9ujt] {
        transition: transform 0.2s ease;
    }

    .back-link:hover svg[b-jya2ns9ujt] {
        transform: translateX(-4px);
    }

/* Responsive Design */
@media (max-width: 768px) {
    .category-page[b-jya2ns9ujt] {
        padding: 1.5rem 1rem;
    }

    .category-icon-large[b-jya2ns9ujt] {
        width: 64px;
        height: 64px;
    }

        .category-icon-large svg[b-jya2ns9ujt] {
            width: 32px;
            height: 32px;
        }

    .category-header h1[b-jya2ns9ujt] {
        font-size: 2rem;
    }

    .category-intro[b-jya2ns9ujt] {
        font-size: 1rem;
    }

    .category-stats[b-jya2ns9ujt] {
        gap: 1rem;
    }

    .stat-badge[b-jya2ns9ujt] {
        font-size: 0.8rem;
        padding: 0.4rem 0.8rem;
    }

    .section-title[b-jya2ns9ujt] {
        font-size: 1.5rem;
    }

    .article-card[b-jya2ns9ujt] {
        padding: 1.25rem;
    }

    .article-icon[b-jya2ns9ujt] {
        font-size: 1.5rem;
        width: 48px;
        height: 48px;
    }

    .article-title[b-jya2ns9ujt] {
        font-size: 1.1rem;
    }

    .article-description[b-jya2ns9ujt] {
        font-size: 0.9rem;
    }

    .article-meta[b-jya2ns9ujt] {
        gap: 1rem;
    }

    .meta-item[b-jya2ns9ujt] {
        font-size: 0.8rem;
    }
}

@media (max-width: 480px) {
    .category-page[b-jya2ns9ujt] {
        padding: 1rem 0.75rem;
    }

    .category-icon-large[b-jya2ns9ujt] {
        width: 56px;
        height: 56px;
    }

        .category-icon-large svg[b-jya2ns9ujt] {
            width: 28px;
            height: 28px;
        }

    .category-header h1[b-jya2ns9ujt] {
        font-size: 1.75rem;
    }

    .category-intro[b-jya2ns9ujt] {
        font-size: 0.95rem;
    }

    .article-card[b-jya2ns9ujt] {
        flex-direction: column;
        padding: 1rem;
    }

    .article-icon[b-jya2ns9ujt] {
        width: 100%;
        height: 56px;
    }

    .article-arrow[b-jya2ns9ujt] {
        align-self: flex-end;
        margin-top: 0;
    }

    .back-link[b-jya2ns9ujt] {
        font-size: 0.9rem;
    }
}

/* Print Styles */
@media print {
    .category-page[b-jya2ns9ujt] {
        background: white;
        padding: 0;
    }

    .breadcrumb-nav[b-jya2ns9ujt],
    .back-section[b-jya2ns9ujt] {
        display: none;
    }

    .article-card[b-jya2ns9ujt] {
        break-inside: avoid;
        page-break-inside: avoid;
        box-shadow: none;
        border: 1px solid #ddd;
        margin-bottom: 1rem;
    }

    .article-arrow[b-jya2ns9ujt] {
        display: none;
    }
}

/* Accessibility */
.article-card:focus-within[b-jya2ns9ujt] {
    outline: 2px solid #0066ff;
    outline-offset: 2px;
    border-radius: 12px;
}

.back-link:focus[b-jya2ns9ujt] {
    outline: 2px solid #0066ff;
    outline-offset: 2px;
    border-radius: 4px;
}
/* _content/BotomixNew/Components/Pages/Knowledge/Categories/ErsteSchritte.razor.rz.scp.css */
/* Category Page Styles */
.category-page[b-ni9mflcm43] {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    min-height: calc(100vh - 200px);
    padding: 2rem 1.5rem;
}

.category-container[b-ni9mflcm43] {
    max-width: 1200px;
    margin: 0 auto;
}

/* Breadcrumb Navigation */
.breadcrumb-nav[b-ni9mflcm43] {
    margin-bottom: 2rem;
}

.breadcrumb[b-ni9mflcm43] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 0.9rem;
}

.breadcrumb-item[b-ni9mflcm43] {
    color: #6b7280;
}

    .breadcrumb-item a[b-ni9mflcm43] {
        color: #0066ff;
        text-decoration: none;
        transition: color 0.2s ease;
    }

        .breadcrumb-item a:hover[b-ni9mflcm43] {
            color: #0052cc;
            text-decoration: underline;
        }

    .breadcrumb-item + .breadcrumb-item[b-ni9mflcm43]::before {
        content: "›";
        margin-right: 0.5rem;
        color: #9ca3af;
    }

    .breadcrumb-item.active[b-ni9mflcm43] {
        color: #111827;
        font-weight: 500;
    }

/* Category Header */
.category-header[b-ni9mflcm43] {
    text-align: center;
    margin-bottom: 3rem;
}

.category-icon-large[b-ni9mflcm43] {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #0066ff 0%, #0052cc 100%);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    margin: 0 auto 1.5rem;
}

.category-header h1[b-ni9mflcm43] {
    font-size: 2.5rem;
    font-weight: 800;
    color: #111827;
    margin-bottom: 1rem;
    line-height: 1.2;
}

.category-intro[b-ni9mflcm43] {
    font-size: 1.1rem;
    color: #6b7280;
    line-height: 1.7;
    max-width: 700px;
    margin: 0 auto 1.5rem;
}

/* Category Stats */
.category-stats[b-ni9mflcm43] {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.stat-badge[b-ni9mflcm43] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: white;
    border-radius: 50px;
    font-size: 0.875rem;
    font-weight: 600;
    color: #374151;
    border: 1px solid #e5e7eb;
}

    .stat-badge svg[b-ni9mflcm43] {
        color: #0066ff;
    }

/* Articles Section */
.articles-section[b-ni9mflcm43] {
    margin-top: 4rem;
    margin-bottom: 3rem;
}

.section-title[b-ni9mflcm43] {
    font-size: 1.75rem;
    font-weight: 700;
    color: #111827;
    margin-bottom: 2rem;
}

/* Articles Grid */
.articles-grid[b-ni9mflcm43] {
    display: grid;
    gap: 1.5rem;
}

/* Article Card */
.article-card[b-ni9mflcm43] {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    border: 1px solid #e5e7eb;
    transition: all 0.3s ease;
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
    cursor: pointer;
}

    .article-card:hover[b-ni9mflcm43] {
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
        transform: translateY(-2px);
        border-color: #0066ff;
    }

        .article-card:hover .article-arrow[b-ni9mflcm43] {
            transform: translateX(4px);
        }

        .article-card:hover .article-title a[b-ni9mflcm43] {
            color: #0066ff;
        }

.article-icon[b-ni9mflcm43] {
    font-size: 2rem;
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
    border-radius: 10px;
}

.article-content[b-ni9mflcm43] {
    flex: 1;
}

.article-title[b-ni9mflcm43] {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0 0 0.75rem 0;
    line-height: 1.3;
}

    .article-title a[b-ni9mflcm43] {
        color: #111827;
        text-decoration: none;
        transition: color 0.2s ease;
    }

        .article-title a:hover[b-ni9mflcm43] {
            color: #0066ff;
        }

.article-description[b-ni9mflcm43] {
    color: #6b7280;
    line-height: 1.6;
    margin-bottom: 1rem;
    font-size: 0.95rem;
}

.article-meta[b-ni9mflcm43] {
    display: flex;
    gap: 1.25rem;
    flex-wrap: wrap;
}

.meta-item[b-ni9mflcm43] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    color: #9ca3af;
}

    .meta-item svg[b-ni9mflcm43] {
        color: #9ca3af;
    }

.article-arrow[b-ni9mflcm43] {
    flex-shrink: 0;
    color: #0066ff;
    transition: transform 0.2s ease;
    margin-top: 0.5rem;
}

/* Back Section */
.back-section[b-ni9mflcm43] {
    text-align: center;
    margin-top: 4rem;
    padding-top: 3rem;
    border-top: 1px solid #e5e7eb;
}

.back-link[b-ni9mflcm43] {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    color: #0066ff;
    font-weight: 600;
    text-decoration: none;
    font-size: 1rem;
    transition: all 0.2s ease;
}

    .back-link:hover[b-ni9mflcm43] {
        color: #0052cc;
        text-decoration: none;
        gap: 1rem;
    }

    .back-link svg[b-ni9mflcm43] {
        transition: transform 0.2s ease;
    }

    .back-link:hover svg[b-ni9mflcm43] {
        transform: translateX(-4px);
    }

/* Responsive Design */
@media (max-width: 768px) {
    .category-page[b-ni9mflcm43] {
        padding: 1.5rem 1rem;
    }

    .category-icon-large[b-ni9mflcm43] {
        width: 64px;
        height: 64px;
    }

        .category-icon-large svg[b-ni9mflcm43] {
            width: 32px;
            height: 32px;
        }

    .category-header h1[b-ni9mflcm43] {
        font-size: 2rem;
    }

    .category-intro[b-ni9mflcm43] {
        font-size: 1rem;
    }

    .category-stats[b-ni9mflcm43] {
        gap: 1rem;
    }

    .stat-badge[b-ni9mflcm43] {
        font-size: 0.8rem;
        padding: 0.4rem 0.8rem;
    }

    .section-title[b-ni9mflcm43] {
        font-size: 1.5rem;
    }

    .article-card[b-ni9mflcm43] {
        padding: 1.25rem;
    }

    .article-icon[b-ni9mflcm43] {
        font-size: 1.5rem;
        width: 48px;
        height: 48px;
    }

    .article-title[b-ni9mflcm43] {
        font-size: 1.1rem;
    }

    .article-description[b-ni9mflcm43] {
        font-size: 0.9rem;
    }

    .article-meta[b-ni9mflcm43] {
        gap: 1rem;
    }

    .meta-item[b-ni9mflcm43] {
        font-size: 0.8rem;
    }
}

@media (max-width: 480px) {
    .category-page[b-ni9mflcm43] {
        padding: 1rem 0.75rem;
    }

    .category-icon-large[b-ni9mflcm43] {
        width: 56px;
        height: 56px;
    }

        .category-icon-large svg[b-ni9mflcm43] {
            width: 28px;
            height: 28px;
        }

    .category-header h1[b-ni9mflcm43] {
        font-size: 1.75rem;
    }

    .category-intro[b-ni9mflcm43] {
        font-size: 0.95rem;
    }

    .article-card[b-ni9mflcm43] {
        flex-direction: column;
        padding: 1rem;
    }

    .article-icon[b-ni9mflcm43] {
        width: 100%;
        height: 56px;
    }

    .article-arrow[b-ni9mflcm43] {
        align-self: flex-end;
        margin-top: 0;
    }

    .back-link[b-ni9mflcm43] {
        font-size: 0.9rem;
    }
}

/* Print Styles */
@media print {
    .category-page[b-ni9mflcm43] {
        background: white;
        padding: 0;
    }

    .breadcrumb-nav[b-ni9mflcm43],
    .back-section[b-ni9mflcm43] {
        display: none;
    }

    .article-card[b-ni9mflcm43] {
        break-inside: avoid;
        page-break-inside: avoid;
        box-shadow: none;
        border: 1px solid #ddd;
        margin-bottom: 1rem;
    }

    .article-arrow[b-ni9mflcm43] {
        display: none;
    }
}

/* Accessibility */
.article-card:focus-within[b-ni9mflcm43] {
    outline: 2px solid #0066ff;
    outline-offset: 2px;
    border-radius: 12px;
}

.back-link:focus[b-ni9mflcm43] {
    outline: 2px solid #0066ff;
    outline-offset: 2px;
    border-radius: 4px;
}
/* _content/BotomixNew/Components/Pages/Knowledge/Categories/Flottenmanagement.razor.rz.scp.css */
/* Category Page Styles */
.category-page[b-4cbdlt72o2] {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    min-height: calc(100vh - 200px);
    padding: 2rem 1.5rem;
}

.category-container[b-4cbdlt72o2] {
    max-width: 1200px;
    margin: 0 auto;
}

/* Breadcrumb Navigation */
.breadcrumb-nav[b-4cbdlt72o2] {
    margin-bottom: 2rem;
}

.breadcrumb[b-4cbdlt72o2] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 0.9rem;
}

.breadcrumb-item[b-4cbdlt72o2] {
    color: #6b7280;
}

    .breadcrumb-item a[b-4cbdlt72o2] {
        color: #0066ff;
        text-decoration: none;
        transition: color 0.2s ease;
    }

        .breadcrumb-item a:hover[b-4cbdlt72o2] {
            color: #0052cc;
            text-decoration: underline;
        }

    .breadcrumb-item + .breadcrumb-item[b-4cbdlt72o2]::before {
        content: "›";
        margin-right: 0.5rem;
        color: #9ca3af;
    }

    .breadcrumb-item.active[b-4cbdlt72o2] {
        color: #111827;
        font-weight: 500;
    }

/* Category Header */
.category-header[b-4cbdlt72o2] {
    text-align: center;
    margin-bottom: 3rem;
}

.category-icon-large[b-4cbdlt72o2] {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #0066ff 0%, #0052cc 100%);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    margin: 0 auto 1.5rem;
}

.category-header h1[b-4cbdlt72o2] {
    font-size: 2.5rem;
    font-weight: 800;
    color: #111827;
    margin-bottom: 1rem;
    line-height: 1.2;
}

.category-intro[b-4cbdlt72o2] {
    font-size: 1.1rem;
    color: #6b7280;
    line-height: 1.7;
    max-width: 700px;
    margin: 0 auto 1.5rem;
}

/* Category Stats */
.category-stats[b-4cbdlt72o2] {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.stat-badge[b-4cbdlt72o2] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: white;
    border-radius: 50px;
    font-size: 0.875rem;
    font-weight: 600;
    color: #374151;
    border: 1px solid #e5e7eb;
}

    .stat-badge svg[b-4cbdlt72o2] {
        color: #0066ff;
    }

/* Articles Section */
.articles-section[b-4cbdlt72o2] {
    margin-top: 4rem;
    margin-bottom: 3rem;
}

.section-title[b-4cbdlt72o2] {
    font-size: 1.75rem;
    font-weight: 700;
    color: #111827;
    margin-bottom: 2rem;
}

/* Articles Grid */
.articles-grid[b-4cbdlt72o2] {
    display: grid;
    gap: 1.5rem;
}

/* Article Card */
.article-card[b-4cbdlt72o2] {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    border: 1px solid #e5e7eb;
    transition: all 0.3s ease;
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
    cursor: pointer;
}

    .article-card:hover[b-4cbdlt72o2] {
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
        transform: translateY(-2px);
        border-color: #0066ff;
    }

        .article-card:hover .article-arrow[b-4cbdlt72o2] {
            transform: translateX(4px);
        }

        .article-card:hover .article-title a[b-4cbdlt72o2] {
            color: #0066ff;
        }

.article-icon[b-4cbdlt72o2] {
    font-size: 2rem;
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
    border-radius: 10px;
}

.article-content[b-4cbdlt72o2] {
    flex: 1;
}

.article-title[b-4cbdlt72o2] {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0 0 0.75rem 0;
    line-height: 1.3;
}

    .article-title a[b-4cbdlt72o2] {
        color: #111827;
        text-decoration: none;
        transition: color 0.2s ease;
    }

        .article-title a:hover[b-4cbdlt72o2] {
            color: #0066ff;
        }

.article-description[b-4cbdlt72o2] {
    color: #6b7280;
    line-height: 1.6;
    margin-bottom: 1rem;
    font-size: 0.95rem;
}

.article-meta[b-4cbdlt72o2] {
    display: flex;
    gap: 1.25rem;
    flex-wrap: wrap;
}

.meta-item[b-4cbdlt72o2] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    color: #9ca3af;
}

    .meta-item svg[b-4cbdlt72o2] {
        color: #9ca3af;
    }

.article-arrow[b-4cbdlt72o2] {
    flex-shrink: 0;
    color: #0066ff;
    transition: transform 0.2s ease;
    margin-top: 0.5rem;
}

/* Back Section */
.back-section[b-4cbdlt72o2] {
    text-align: center;
    margin-top: 4rem;
    padding-top: 3rem;
    border-top: 1px solid #e5e7eb;
}

.back-link[b-4cbdlt72o2] {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    color: #0066ff;
    font-weight: 600;
    text-decoration: none;
    font-size: 1rem;
    transition: all 0.2s ease;
}

    .back-link:hover[b-4cbdlt72o2] {
        color: #0052cc;
        text-decoration: none;
        gap: 1rem;
    }

    .back-link svg[b-4cbdlt72o2] {
        transition: transform 0.2s ease;
    }

    .back-link:hover svg[b-4cbdlt72o2] {
        transform: translateX(-4px);
    }

/* Responsive Design */
@media (max-width: 768px) {
    .category-page[b-4cbdlt72o2] {
        padding: 1.5rem 1rem;
    }

    .category-icon-large[b-4cbdlt72o2] {
        width: 64px;
        height: 64px;
    }

        .category-icon-large svg[b-4cbdlt72o2] {
            width: 32px;
            height: 32px;
        }

    .category-header h1[b-4cbdlt72o2] {
        font-size: 2rem;
    }

    .category-intro[b-4cbdlt72o2] {
        font-size: 1rem;
    }

    .category-stats[b-4cbdlt72o2] {
        gap: 1rem;
    }

    .stat-badge[b-4cbdlt72o2] {
        font-size: 0.8rem;
        padding: 0.4rem 0.8rem;
    }

    .section-title[b-4cbdlt72o2] {
        font-size: 1.5rem;
    }

    .article-card[b-4cbdlt72o2] {
        padding: 1.25rem;
    }

    .article-icon[b-4cbdlt72o2] {
        font-size: 1.5rem;
        width: 48px;
        height: 48px;
    }

    .article-title[b-4cbdlt72o2] {
        font-size: 1.1rem;
    }

    .article-description[b-4cbdlt72o2] {
        font-size: 0.9rem;
    }

    .article-meta[b-4cbdlt72o2] {
        gap: 1rem;
    }

    .meta-item[b-4cbdlt72o2] {
        font-size: 0.8rem;
    }
}

@media (max-width: 480px) {
    .category-page[b-4cbdlt72o2] {
        padding: 1rem 0.75rem;
    }

    .category-icon-large[b-4cbdlt72o2] {
        width: 56px;
        height: 56px;
    }

        .category-icon-large svg[b-4cbdlt72o2] {
            width: 28px;
            height: 28px;
        }

    .category-header h1[b-4cbdlt72o2] {
        font-size: 1.75rem;
    }

    .category-intro[b-4cbdlt72o2] {
        font-size: 0.95rem;
    }

    .article-card[b-4cbdlt72o2] {
        flex-direction: column;
        padding: 1rem;
    }

    .article-icon[b-4cbdlt72o2] {
        width: 100%;
        height: 56px;
    }

    .article-arrow[b-4cbdlt72o2] {
        align-self: flex-end;
        margin-top: 0;
    }

    .back-link[b-4cbdlt72o2] {
        font-size: 0.9rem;
    }
}

/* Print Styles */
@media print {
    .category-page[b-4cbdlt72o2] {
        background: white;
        padding: 0;
    }

    .breadcrumb-nav[b-4cbdlt72o2],
    .back-section[b-4cbdlt72o2] {
        display: none;
    }

    .article-card[b-4cbdlt72o2] {
        break-inside: avoid;
        page-break-inside: avoid;
        box-shadow: none;
        border: 1px solid #ddd;
        margin-bottom: 1rem;
    }

    .article-arrow[b-4cbdlt72o2] {
        display: none;
    }
}

/* Accessibility */
.article-card:focus-within[b-4cbdlt72o2] {
    outline: 2px solid #0066ff;
    outline-offset: 2px;
    border-radius: 12px;
}

.back-link:focus[b-4cbdlt72o2] {
    outline: 2px solid #0066ff;
    outline-offset: 2px;
    border-radius: 4px;
}
/* _content/BotomixNew/Components/Pages/Knowledge/Categories/IntegrationSoftware.razor.rz.scp.css */
/* Category Page Styles */
.category-page[b-fx8ri3zho0] {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    min-height: calc(100vh - 200px);
    padding: 2rem 1.5rem;
}

.category-container[b-fx8ri3zho0] {
    max-width: 1200px;
    margin: 0 auto;
}

/* Breadcrumb Navigation */
.breadcrumb-nav[b-fx8ri3zho0] {
    margin-bottom: 2rem;
}

.breadcrumb[b-fx8ri3zho0] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 0.9rem;
}

.breadcrumb-item[b-fx8ri3zho0] {
    color: #6b7280;
}

    .breadcrumb-item a[b-fx8ri3zho0] {
        color: #0066ff;
        text-decoration: none;
        transition: color 0.2s ease;
    }

        .breadcrumb-item a:hover[b-fx8ri3zho0] {
            color: #0052cc;
            text-decoration: underline;
        }

    .breadcrumb-item + .breadcrumb-item[b-fx8ri3zho0]::before {
        content: "›";
        margin-right: 0.5rem;
        color: #9ca3af;
    }

    .breadcrumb-item.active[b-fx8ri3zho0] {
        color: #111827;
        font-weight: 500;
    }

/* Category Header */
.category-header[b-fx8ri3zho0] {
    text-align: center;
    margin-bottom: 3rem;
}

.category-icon-large[b-fx8ri3zho0] {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #0066ff 0%, #0052cc 100%);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    margin: 0 auto 1.5rem;
}

.category-header h1[b-fx8ri3zho0] {
    font-size: 2.5rem;
    font-weight: 800;
    color: #111827;
    margin-bottom: 1rem;
    line-height: 1.2;
}

.category-intro[b-fx8ri3zho0] {
    font-size: 1.1rem;
    color: #6b7280;
    line-height: 1.7;
    max-width: 700px;
    margin: 0 auto 1.5rem;
}

/* Category Stats */
.category-stats[b-fx8ri3zho0] {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.stat-badge[b-fx8ri3zho0] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: white;
    border-radius: 50px;
    font-size: 0.875rem;
    font-weight: 600;
    color: #374151;
    border: 1px solid #e5e7eb;
}

    .stat-badge svg[b-fx8ri3zho0] {
        color: #0066ff;
    }

/* Articles Section */
.articles-section[b-fx8ri3zho0] {
    margin-top: 4rem;
    margin-bottom: 3rem;
}

.section-title[b-fx8ri3zho0] {
    font-size: 1.75rem;
    font-weight: 700;
    color: #111827;
    margin-bottom: 2rem;
}

/* Articles Grid */
.articles-grid[b-fx8ri3zho0] {
    display: grid;
    gap: 1.5rem;
}

/* Article Card */
.article-card[b-fx8ri3zho0] {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    border: 1px solid #e5e7eb;
    transition: all 0.3s ease;
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
    cursor: pointer;
}

    .article-card:hover[b-fx8ri3zho0] {
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
        transform: translateY(-2px);
        border-color: #0066ff;
    }

        .article-card:hover .article-arrow[b-fx8ri3zho0] {
            transform: translateX(4px);
        }

        .article-card:hover .article-title a[b-fx8ri3zho0] {
            color: #0066ff;
        }

.article-icon[b-fx8ri3zho0] {
    font-size: 2rem;
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
    border-radius: 10px;
}

.article-content[b-fx8ri3zho0] {
    flex: 1;
}

.article-title[b-fx8ri3zho0] {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0 0 0.75rem 0;
    line-height: 1.3;
}

    .article-title a[b-fx8ri3zho0] {
        color: #111827;
        text-decoration: none;
        transition: color 0.2s ease;
    }

        .article-title a:hover[b-fx8ri3zho0] {
            color: #0066ff;
        }

.article-description[b-fx8ri3zho0] {
    color: #6b7280;
    line-height: 1.6;
    margin-bottom: 1rem;
    font-size: 0.95rem;
}

.article-meta[b-fx8ri3zho0] {
    display: flex;
    gap: 1.25rem;
    flex-wrap: wrap;
}

.meta-item[b-fx8ri3zho0] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    color: #9ca3af;
}

    .meta-item svg[b-fx8ri3zho0] {
        color: #9ca3af;
    }

.article-arrow[b-fx8ri3zho0] {
    flex-shrink: 0;
    color: #0066ff;
    transition: transform 0.2s ease;
    margin-top: 0.5rem;
}

/* Back Section */
.back-section[b-fx8ri3zho0] {
    text-align: center;
    margin-top: 4rem;
    padding-top: 3rem;
    border-top: 1px solid #e5e7eb;
}

.back-link[b-fx8ri3zho0] {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    color: #0066ff;
    font-weight: 600;
    text-decoration: none;
    font-size: 1rem;
    transition: all 0.2s ease;
}

    .back-link:hover[b-fx8ri3zho0] {
        color: #0052cc;
        text-decoration: none;
        gap: 1rem;
    }

    .back-link svg[b-fx8ri3zho0] {
        transition: transform 0.2s ease;
    }

    .back-link:hover svg[b-fx8ri3zho0] {
        transform: translateX(-4px);
    }

/* Responsive Design */
@media (max-width: 768px) {
    .category-page[b-fx8ri3zho0] {
        padding: 1.5rem 1rem;
    }

    .category-icon-large[b-fx8ri3zho0] {
        width: 64px;
        height: 64px;
    }

        .category-icon-large svg[b-fx8ri3zho0] {
            width: 32px;
            height: 32px;
        }

    .category-header h1[b-fx8ri3zho0] {
        font-size: 2rem;
    }

    .category-intro[b-fx8ri3zho0] {
        font-size: 1rem;
    }

    .category-stats[b-fx8ri3zho0] {
        gap: 1rem;
    }

    .stat-badge[b-fx8ri3zho0] {
        font-size: 0.8rem;
        padding: 0.4rem 0.8rem;
    }

    .section-title[b-fx8ri3zho0] {
        font-size: 1.5rem;
    }

    .article-card[b-fx8ri3zho0] {
        padding: 1.25rem;
    }

    .article-icon[b-fx8ri3zho0] {
        font-size: 1.5rem;
        width: 48px;
        height: 48px;
    }

    .article-title[b-fx8ri3zho0] {
        font-size: 1.1rem;
    }

    .article-description[b-fx8ri3zho0] {
        font-size: 0.9rem;
    }

    .article-meta[b-fx8ri3zho0] {
        gap: 1rem;
    }

    .meta-item[b-fx8ri3zho0] {
        font-size: 0.8rem;
    }
}

@media (max-width: 480px) {
    .category-page[b-fx8ri3zho0] {
        padding: 1rem 0.75rem;
    }

    .category-icon-large[b-fx8ri3zho0] {
        width: 56px;
        height: 56px;
    }

        .category-icon-large svg[b-fx8ri3zho0] {
            width: 28px;
            height: 28px;
        }

    .category-header h1[b-fx8ri3zho0] {
        font-size: 1.75rem;
    }

    .category-intro[b-fx8ri3zho0] {
        font-size: 0.95rem;
    }

    .article-card[b-fx8ri3zho0] {
        flex-direction: column;
        padding: 1rem;
    }

    .article-icon[b-fx8ri3zho0] {
        width: 100%;
        height: 56px;
    }

    .article-arrow[b-fx8ri3zho0] {
        align-self: flex-end;
        margin-top: 0;
    }

    .back-link[b-fx8ri3zho0] {
        font-size: 0.9rem;
    }
}

/* Print Styles */
@media print {
    .category-page[b-fx8ri3zho0] {
        background: white;
        padding: 0;
    }

    .breadcrumb-nav[b-fx8ri3zho0],
    .back-section[b-fx8ri3zho0] {
        display: none;
    }

    .article-card[b-fx8ri3zho0] {
        break-inside: avoid;
        page-break-inside: avoid;
        box-shadow: none;
        border: 1px solid #ddd;
        margin-bottom: 1rem;
    }

    .article-arrow[b-fx8ri3zho0] {
        display: none;
    }
}

/* Accessibility */
.article-card:focus-within[b-fx8ri3zho0] {
    outline: 2px solid #0066ff;
    outline-offset: 2px;
    border-radius: 12px;
}

.back-link:focus[b-fx8ri3zho0] {
    outline: 2px solid #0066ff;
    outline-offset: 2px;
    border-radius: 4px;
}
/* _content/BotomixNew/Components/Pages/Knowledge/Categories/Navigationtechnologie.razor.rz.scp.css */
/* Category Page Styles */
.category-page[b-mhp532cg2n] {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    min-height: calc(100vh - 200px);
    padding: 2rem 1.5rem;
}

.category-container[b-mhp532cg2n] {
    max-width: 1200px;
    margin: 0 auto;
}

/* Breadcrumb Navigation */
.breadcrumb-nav[b-mhp532cg2n] {
    margin-bottom: 2rem;
}

.breadcrumb[b-mhp532cg2n] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 0.9rem;
}

.breadcrumb-item[b-mhp532cg2n] {
    color: #6b7280;
}

    .breadcrumb-item a[b-mhp532cg2n] {
        color: #0066ff;
        text-decoration: none;
        transition: color 0.2s ease;
    }

        .breadcrumb-item a:hover[b-mhp532cg2n] {
            color: #0052cc;
            text-decoration: underline;
        }

    .breadcrumb-item + .breadcrumb-item[b-mhp532cg2n]::before {
        content: "›";
        margin-right: 0.5rem;
        color: #9ca3af;
    }

    .breadcrumb-item.active[b-mhp532cg2n] {
        color: #111827;
        font-weight: 500;
    }

/* Category Header */
.category-header[b-mhp532cg2n] {
    text-align: center;
    margin-bottom: 3rem;
}

.category-icon-large[b-mhp532cg2n] {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #0066ff 0%, #0052cc 100%);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    margin: 0 auto 1.5rem;
}

.category-header h1[b-mhp532cg2n] {
    font-size: 2.5rem;
    font-weight: 800;
    color: #111827;
    margin-bottom: 1rem;
    line-height: 1.2;
}

.category-intro[b-mhp532cg2n] {
    font-size: 1.1rem;
    color: #6b7280;
    line-height: 1.7;
    max-width: 700px;
    margin: 0 auto 1.5rem;
}

/* Category Stats */
.category-stats[b-mhp532cg2n] {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.stat-badge[b-mhp532cg2n] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: white;
    border-radius: 50px;
    font-size: 0.875rem;
    font-weight: 600;
    color: #374151;
    border: 1px solid #e5e7eb;
}

    .stat-badge svg[b-mhp532cg2n] {
        color: #0066ff;
    }

/* Articles Section */
.articles-section[b-mhp532cg2n] {
    margin-top: 4rem;
    margin-bottom: 3rem;
}

.section-title[b-mhp532cg2n] {
    font-size: 1.75rem;
    font-weight: 700;
    color: #111827;
    margin-bottom: 2rem;
}

/* Articles Grid */
.articles-grid[b-mhp532cg2n] {
    display: grid;
    gap: 1.5rem;
}

/* Article Card */
.article-card[b-mhp532cg2n] {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    border: 1px solid #e5e7eb;
    transition: all 0.3s ease;
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
    cursor: pointer;
}

    .article-card:hover[b-mhp532cg2n] {
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
        transform: translateY(-2px);
        border-color: #0066ff;
    }

        .article-card:hover .article-arrow[b-mhp532cg2n] {
            transform: translateX(4px);
        }

        .article-card:hover .article-title a[b-mhp532cg2n] {
            color: #0066ff;
        }

.article-icon[b-mhp532cg2n] {
    font-size: 2rem;
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
    border-radius: 10px;
}

.article-content[b-mhp532cg2n] {
    flex: 1;
}

.article-title[b-mhp532cg2n] {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0 0 0.75rem 0;
    line-height: 1.3;
}

    .article-title a[b-mhp532cg2n] {
        color: #111827;
        text-decoration: none;
        transition: color 0.2s ease;
    }

        .article-title a:hover[b-mhp532cg2n] {
            color: #0066ff;
        }

.article-description[b-mhp532cg2n] {
    color: #6b7280;
    line-height: 1.6;
    margin-bottom: 1rem;
    font-size: 0.95rem;
}

.article-meta[b-mhp532cg2n] {
    display: flex;
    gap: 1.25rem;
    flex-wrap: wrap;
}

.meta-item[b-mhp532cg2n] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    color: #9ca3af;
}

    .meta-item svg[b-mhp532cg2n] {
        color: #9ca3af;
    }

.article-arrow[b-mhp532cg2n] {
    flex-shrink: 0;
    color: #0066ff;
    transition: transform 0.2s ease;
    margin-top: 0.5rem;
}

/* Back Section */
.back-section[b-mhp532cg2n] {
    text-align: center;
    margin-top: 4rem;
    padding-top: 3rem;
    border-top: 1px solid #e5e7eb;
}

.back-link[b-mhp532cg2n] {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    color: #0066ff;
    font-weight: 600;
    text-decoration: none;
    font-size: 1rem;
    transition: all 0.2s ease;
}

    .back-link:hover[b-mhp532cg2n] {
        color: #0052cc;
        text-decoration: none;
        gap: 1rem;
    }

    .back-link svg[b-mhp532cg2n] {
        transition: transform 0.2s ease;
    }

    .back-link:hover svg[b-mhp532cg2n] {
        transform: translateX(-4px);
    }

/* Responsive Design */
@media (max-width: 768px) {
    .category-page[b-mhp532cg2n] {
        padding: 1.5rem 1rem;
    }

    .category-icon-large[b-mhp532cg2n] {
        width: 64px;
        height: 64px;
    }

        .category-icon-large svg[b-mhp532cg2n] {
            width: 32px;
            height: 32px;
        }

    .category-header h1[b-mhp532cg2n] {
        font-size: 2rem;
    }

    .category-intro[b-mhp532cg2n] {
        font-size: 1rem;
    }

    .category-stats[b-mhp532cg2n] {
        gap: 1rem;
    }

    .stat-badge[b-mhp532cg2n] {
        font-size: 0.8rem;
        padding: 0.4rem 0.8rem;
    }

    .section-title[b-mhp532cg2n] {
        font-size: 1.5rem;
    }

    .article-card[b-mhp532cg2n] {
        padding: 1.25rem;
    }

    .article-icon[b-mhp532cg2n] {
        font-size: 1.5rem;
        width: 48px;
        height: 48px;
    }

    .article-title[b-mhp532cg2n] {
        font-size: 1.1rem;
    }

    .article-description[b-mhp532cg2n] {
        font-size: 0.9rem;
    }

    .article-meta[b-mhp532cg2n] {
        gap: 1rem;
    }

    .meta-item[b-mhp532cg2n] {
        font-size: 0.8rem;
    }
}

@media (max-width: 480px) {
    .category-page[b-mhp532cg2n] {
        padding: 1rem 0.75rem;
    }

    .category-icon-large[b-mhp532cg2n] {
        width: 56px;
        height: 56px;
    }

        .category-icon-large svg[b-mhp532cg2n] {
            width: 28px;
            height: 28px;
        }

    .category-header h1[b-mhp532cg2n] {
        font-size: 1.75rem;
    }

    .category-intro[b-mhp532cg2n] {
        font-size: 0.95rem;
    }

    .article-card[b-mhp532cg2n] {
        flex-direction: column;
        padding: 1rem;
    }

    .article-icon[b-mhp532cg2n] {
        width: 100%;
        height: 56px;
    }

    .article-arrow[b-mhp532cg2n] {
        align-self: flex-end;
        margin-top: 0;
    }

    .back-link[b-mhp532cg2n] {
        font-size: 0.9rem;
    }
}

/* Print Styles */
@media print {
    .category-page[b-mhp532cg2n] {
        background: white;
        padding: 0;
    }

    .breadcrumb-nav[b-mhp532cg2n],
    .back-section[b-mhp532cg2n] {
        display: none;
    }

    .article-card[b-mhp532cg2n] {
        break-inside: avoid;
        page-break-inside: avoid;
        box-shadow: none;
        border: 1px solid #ddd;
        margin-bottom: 1rem;
    }

    .article-arrow[b-mhp532cg2n] {
        display: none;
    }
}

/* Accessibility */
.article-card:focus-within[b-mhp532cg2n] {
    outline: 2px solid #0066ff;
    outline-offset: 2px;
    border-radius: 12px;
}

.back-link:focus[b-mhp532cg2n] {
    outline: 2px solid #0066ff;
    outline-offset: 2px;
    border-radius: 4px;
}
/* _content/BotomixNew/Components/Pages/Knowledge/Categories/Robotertypen.razor.rz.scp.css */
/* Category Page Styles */
.category-page[b-0ftnwb5kh4] {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    min-height: calc(100vh - 200px);
    padding: 2rem 1.5rem;
}

.category-container[b-0ftnwb5kh4] {
    max-width: 1200px;
    margin: 0 auto;
}

/* Breadcrumb Navigation */
.breadcrumb-nav[b-0ftnwb5kh4] {
    margin-bottom: 2rem;
}

.breadcrumb[b-0ftnwb5kh4] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 0.9rem;
}

.breadcrumb-item[b-0ftnwb5kh4] {
    color: #6b7280;
}

    .breadcrumb-item a[b-0ftnwb5kh4] {
        color: #0066ff;
        text-decoration: none;
        transition: color 0.2s ease;
    }

        .breadcrumb-item a:hover[b-0ftnwb5kh4] {
            color: #0052cc;
            text-decoration: underline;
        }

    .breadcrumb-item + .breadcrumb-item[b-0ftnwb5kh4]::before {
        content: "›";
        margin-right: 0.5rem;
        color: #9ca3af;
    }

    .breadcrumb-item.active[b-0ftnwb5kh4] {
        color: #111827;
        font-weight: 500;
    }

/* Category Header */
.category-header[b-0ftnwb5kh4] {
    text-align: center;
    margin-bottom: 3rem;
}

.category-icon-large[b-0ftnwb5kh4] {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #0066ff 0%, #0052cc 100%);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    margin: 0 auto 1.5rem;
}

.category-header h1[b-0ftnwb5kh4] {
    font-size: 2.5rem;
    font-weight: 800;
    color: #111827;
    margin-bottom: 1rem;
    line-height: 1.2;
}

.category-intro[b-0ftnwb5kh4] {
    font-size: 1.1rem;
    color: #6b7280;
    line-height: 1.7;
    max-width: 700px;
    margin: 0 auto 1.5rem;
}

/* Category Stats */
.category-stats[b-0ftnwb5kh4] {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.stat-badge[b-0ftnwb5kh4] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: white;
    border-radius: 50px;
    font-size: 0.875rem;
    font-weight: 600;
    color: #374151;
    border: 1px solid #e5e7eb;
}

    .stat-badge svg[b-0ftnwb5kh4] {
        color: #0066ff;
    }

/* Articles Section */
.articles-section[b-0ftnwb5kh4] {
    margin-top: 4rem;
    margin-bottom: 3rem;
}

.section-title[b-0ftnwb5kh4] {
    font-size: 1.75rem;
    font-weight: 700;
    color: #111827;
    margin-bottom: 2rem;
}

/* Articles Grid */
.articles-grid[b-0ftnwb5kh4] {
    display: grid;
    gap: 1.5rem;
}

/* Article Card */
.article-card[b-0ftnwb5kh4] {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    border: 1px solid #e5e7eb;
    transition: all 0.3s ease;
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
    cursor: pointer;
}

    .article-card:hover[b-0ftnwb5kh4] {
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
        transform: translateY(-2px);
        border-color: #0066ff;
    }

        .article-card:hover .article-arrow[b-0ftnwb5kh4] {
            transform: translateX(4px);
        }

        .article-card:hover .article-title a[b-0ftnwb5kh4] {
            color: #0066ff;
        }

.article-icon[b-0ftnwb5kh4] {
    font-size: 2rem;
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
    border-radius: 10px;
}

.article-content[b-0ftnwb5kh4] {
    flex: 1;
}

.article-title[b-0ftnwb5kh4] {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0 0 0.75rem 0;
    line-height: 1.3;
}

    .article-title a[b-0ftnwb5kh4] {
        color: #111827;
        text-decoration: none;
        transition: color 0.2s ease;
    }

        .article-title a:hover[b-0ftnwb5kh4] {
            color: #0066ff;
        }

.article-description[b-0ftnwb5kh4] {
    color: #6b7280;
    line-height: 1.6;
    margin-bottom: 1rem;
    font-size: 0.95rem;
}

.article-meta[b-0ftnwb5kh4] {
    display: flex;
    gap: 1.25rem;
    flex-wrap: wrap;
}

.meta-item[b-0ftnwb5kh4] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    color: #9ca3af;
}

    .meta-item svg[b-0ftnwb5kh4] {
        color: #9ca3af;
    }

.article-arrow[b-0ftnwb5kh4] {
    flex-shrink: 0;
    color: #0066ff;
    transition: transform 0.2s ease;
    margin-top: 0.5rem;
}

/* Back Section */
.back-section[b-0ftnwb5kh4] {
    text-align: center;
    margin-top: 4rem;
    padding-top: 3rem;
    border-top: 1px solid #e5e7eb;
}

.back-link[b-0ftnwb5kh4] {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    color: #0066ff;
    font-weight: 600;
    text-decoration: none;
    font-size: 1rem;
    transition: all 0.2s ease;
}

    .back-link:hover[b-0ftnwb5kh4] {
        color: #0052cc;
        text-decoration: none;
        gap: 1rem;
    }

    .back-link svg[b-0ftnwb5kh4] {
        transition: transform 0.2s ease;
    }

    .back-link:hover svg[b-0ftnwb5kh4] {
        transform: translateX(-4px);
    }

/* Responsive Design */
@media (max-width: 768px) {
    .category-page[b-0ftnwb5kh4] {
        padding: 1.5rem 1rem;
    }

    .category-icon-large[b-0ftnwb5kh4] {
        width: 64px;
        height: 64px;
    }

        .category-icon-large svg[b-0ftnwb5kh4] {
            width: 32px;
            height: 32px;
        }

    .category-header h1[b-0ftnwb5kh4] {
        font-size: 2rem;
    }

    .category-intro[b-0ftnwb5kh4] {
        font-size: 1rem;
    }

    .category-stats[b-0ftnwb5kh4] {
        gap: 1rem;
    }

    .stat-badge[b-0ftnwb5kh4] {
        font-size: 0.8rem;
        padding: 0.4rem 0.8rem;
    }

    .section-title[b-0ftnwb5kh4] {
        font-size: 1.5rem;
    }

    .article-card[b-0ftnwb5kh4] {
        padding: 1.25rem;
    }

    .article-icon[b-0ftnwb5kh4] {
        font-size: 1.5rem;
        width: 48px;
        height: 48px;
    }

    .article-title[b-0ftnwb5kh4] {
        font-size: 1.1rem;
    }

    .article-description[b-0ftnwb5kh4] {
        font-size: 0.9rem;
    }

    .article-meta[b-0ftnwb5kh4] {
        gap: 1rem;
    }

    .meta-item[b-0ftnwb5kh4] {
        font-size: 0.8rem;
    }
}

@media (max-width: 480px) {
    .category-page[b-0ftnwb5kh4] {
        padding: 1rem 0.75rem;
    }

    .category-icon-large[b-0ftnwb5kh4] {
        width: 56px;
        height: 56px;
    }

        .category-icon-large svg[b-0ftnwb5kh4] {
            width: 28px;
            height: 28px;
        }

    .category-header h1[b-0ftnwb5kh4] {
        font-size: 1.75rem;
    }

    .category-intro[b-0ftnwb5kh4] {
        font-size: 0.95rem;
    }

    .article-card[b-0ftnwb5kh4] {
        flex-direction: column;
        padding: 1rem;
    }

    .article-icon[b-0ftnwb5kh4] {
        width: 100%;
        height: 56px;
    }

    .article-arrow[b-0ftnwb5kh4] {
        align-self: flex-end;
        margin-top: 0;
    }

    .back-link[b-0ftnwb5kh4] {
        font-size: 0.9rem;
    }
}

/* Print Styles */
@media print {
    .category-page[b-0ftnwb5kh4] {
        background: white;
        padding: 0;
    }

    .breadcrumb-nav[b-0ftnwb5kh4],
    .back-section[b-0ftnwb5kh4] {
        display: none;
    }

    .article-card[b-0ftnwb5kh4] {
        break-inside: avoid;
        page-break-inside: avoid;
        box-shadow: none;
        border: 1px solid #ddd;
        margin-bottom: 1rem;
    }

    .article-arrow[b-0ftnwb5kh4] {
        display: none;
    }
}

/* Accessibility */
.article-card:focus-within[b-0ftnwb5kh4] {
    outline: 2px solid #0066ff;
    outline-offset: 2px;
    border-radius: 12px;
}

.back-link:focus[b-0ftnwb5kh4] {
    outline: 2px solid #0066ff;
    outline-offset: 2px;
    border-radius: 4px;
}
/* _content/BotomixNew/Components/Pages/Knowledge/Categories/ROIWirtschaftlichkeit.razor.rz.scp.css */
/* Category Page Styles */
.category-page[b-28esl3y0dg] {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    min-height: calc(100vh - 200px);
    padding: 2rem 1.5rem;
}

.category-container[b-28esl3y0dg] {
    max-width: 1200px;
    margin: 0 auto;
}

/* Breadcrumb Navigation */
.breadcrumb-nav[b-28esl3y0dg] {
    margin-bottom: 2rem;
}

.breadcrumb[b-28esl3y0dg] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 0.9rem;
}

.breadcrumb-item[b-28esl3y0dg] {
    color: #6b7280;
}

    .breadcrumb-item a[b-28esl3y0dg] {
        color: #0066ff;
        text-decoration: none;
        transition: color 0.2s ease;
    }

        .breadcrumb-item a:hover[b-28esl3y0dg] {
            color: #0052cc;
            text-decoration: underline;
        }

    .breadcrumb-item + .breadcrumb-item[b-28esl3y0dg]::before {
        content: "›";
        margin-right: 0.5rem;
        color: #9ca3af;
    }

    .breadcrumb-item.active[b-28esl3y0dg] {
        color: #111827;
        font-weight: 500;
    }

/* Category Header */
.category-header[b-28esl3y0dg] {
    text-align: center;
    margin-bottom: 3rem;
}

.category-icon-large[b-28esl3y0dg] {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #0066ff 0%, #0052cc 100%);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    margin: 0 auto 1.5rem;
}

.category-header h1[b-28esl3y0dg] {
    font-size: 2.5rem;
    font-weight: 800;
    color: #111827;
    margin-bottom: 1rem;
    line-height: 1.2;
}

.category-intro[b-28esl3y0dg] {
    font-size: 1.1rem;
    color: #6b7280;
    line-height: 1.7;
    max-width: 700px;
    margin: 0 auto 1.5rem;
}

/* Category Stats */
.category-stats[b-28esl3y0dg] {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.stat-badge[b-28esl3y0dg] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: white;
    border-radius: 50px;
    font-size: 0.875rem;
    font-weight: 600;
    color: #374151;
    border: 1px solid #e5e7eb;
}

    .stat-badge svg[b-28esl3y0dg] {
        color: #0066ff;
    }

/* Articles Section */
.articles-section[b-28esl3y0dg] {
    margin-top: 4rem;
    margin-bottom: 3rem;
}

.section-title[b-28esl3y0dg] {
    font-size: 1.75rem;
    font-weight: 700;
    color: #111827;
    margin-bottom: 2rem;
}

/* Articles Grid */
.articles-grid[b-28esl3y0dg] {
    display: grid;
    gap: 1.5rem;
}

/* Article Card */
.article-card[b-28esl3y0dg] {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    border: 1px solid #e5e7eb;
    transition: all 0.3s ease;
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
    cursor: pointer;
}

    .article-card:hover[b-28esl3y0dg] {
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
        transform: translateY(-2px);
        border-color: #0066ff;
    }

        .article-card:hover .article-arrow[b-28esl3y0dg] {
            transform: translateX(4px);
        }

        .article-card:hover .article-title a[b-28esl3y0dg] {
            color: #0066ff;
        }

.article-icon[b-28esl3y0dg] {
    font-size: 2rem;
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
    border-radius: 10px;
}

.article-content[b-28esl3y0dg] {
    flex: 1;
}

.article-title[b-28esl3y0dg] {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0 0 0.75rem 0;
    line-height: 1.3;
}

    .article-title a[b-28esl3y0dg] {
        color: #111827;
        text-decoration: none;
        transition: color 0.2s ease;
    }

        .article-title a:hover[b-28esl3y0dg] {
            color: #0066ff;
        }

.article-description[b-28esl3y0dg] {
    color: #6b7280;
    line-height: 1.6;
    margin-bottom: 1rem;
    font-size: 0.95rem;
}

.article-meta[b-28esl3y0dg] {
    display: flex;
    gap: 1.25rem;
    flex-wrap: wrap;
}

.meta-item[b-28esl3y0dg] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    color: #9ca3af;
}

    .meta-item svg[b-28esl3y0dg] {
        color: #9ca3af;
    }

.article-arrow[b-28esl3y0dg] {
    flex-shrink: 0;
    color: #0066ff;
    transition: transform 0.2s ease;
    margin-top: 0.5rem;
}

/* Back Section */
.back-section[b-28esl3y0dg] {
    text-align: center;
    margin-top: 4rem;
    padding-top: 3rem;
    border-top: 1px solid #e5e7eb;
}

.back-link[b-28esl3y0dg] {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    color: #0066ff;
    font-weight: 600;
    text-decoration: none;
    font-size: 1rem;
    transition: all 0.2s ease;
}

    .back-link:hover[b-28esl3y0dg] {
        color: #0052cc;
        text-decoration: none;
        gap: 1rem;
    }

    .back-link svg[b-28esl3y0dg] {
        transition: transform 0.2s ease;
    }

    .back-link:hover svg[b-28esl3y0dg] {
        transform: translateX(-4px);
    }

/* Responsive Design */
@media (max-width: 768px) {
    .category-page[b-28esl3y0dg] {
        padding: 1.5rem 1rem;
    }

    .category-icon-large[b-28esl3y0dg] {
        width: 64px;
        height: 64px;
    }

        .category-icon-large svg[b-28esl3y0dg] {
            width: 32px;
            height: 32px;
        }

    .category-header h1[b-28esl3y0dg] {
        font-size: 2rem;
    }

    .category-intro[b-28esl3y0dg] {
        font-size: 1rem;
    }

    .category-stats[b-28esl3y0dg] {
        gap: 1rem;
    }

    .stat-badge[b-28esl3y0dg] {
        font-size: 0.8rem;
        padding: 0.4rem 0.8rem;
    }

    .section-title[b-28esl3y0dg] {
        font-size: 1.5rem;
    }

    .article-card[b-28esl3y0dg] {
        padding: 1.25rem;
    }

    .article-icon[b-28esl3y0dg] {
        font-size: 1.5rem;
        width: 48px;
        height: 48px;
    }

    .article-title[b-28esl3y0dg] {
        font-size: 1.1rem;
    }

    .article-description[b-28esl3y0dg] {
        font-size: 0.9rem;
    }

    .article-meta[b-28esl3y0dg] {
        gap: 1rem;
    }

    .meta-item[b-28esl3y0dg] {
        font-size: 0.8rem;
    }
}

@media (max-width: 480px) {
    .category-page[b-28esl3y0dg] {
        padding: 1rem 0.75rem;
    }

    .category-icon-large[b-28esl3y0dg] {
        width: 56px;
        height: 56px;
    }

        .category-icon-large svg[b-28esl3y0dg] {
            width: 28px;
            height: 28px;
        }

    .category-header h1[b-28esl3y0dg] {
        font-size: 1.75rem;
    }

    .category-intro[b-28esl3y0dg] {
        font-size: 0.95rem;
    }

    .article-card[b-28esl3y0dg] {
        flex-direction: column;
        padding: 1rem;
    }

    .article-icon[b-28esl3y0dg] {
        width: 100%;
        height: 56px;
    }

    .article-arrow[b-28esl3y0dg] {
        align-self: flex-end;
        margin-top: 0;
    }

    .back-link[b-28esl3y0dg] {
        font-size: 0.9rem;
    }
}

/* Print Styles */
@media print {
    .category-page[b-28esl3y0dg] {
        background: white;
        padding: 0;
    }

    .breadcrumb-nav[b-28esl3y0dg],
    .back-section[b-28esl3y0dg] {
        display: none;
    }

    .article-card[b-28esl3y0dg] {
        break-inside: avoid;
        page-break-inside: avoid;
        box-shadow: none;
        border: 1px solid #ddd;
        margin-bottom: 1rem;
    }

    .article-arrow[b-28esl3y0dg] {
        display: none;
    }
}

/* Accessibility */
.article-card:focus-within[b-28esl3y0dg] {
    outline: 2px solid #0066ff;
    outline-offset: 2px;
    border-radius: 12px;
}

.back-link:focus[b-28esl3y0dg] {
    outline: 2px solid #0066ff;
    outline-offset: 2px;
    border-radius: 4px;
}
/* _content/BotomixNew/Components/Pages/Knowledge/Categories/SicherheitNormen.razor.rz.scp.css */
/* Category Page Styles */
.category-page[b-lg28i43ywb] {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    min-height: calc(100vh - 200px);
    padding: 2rem 1.5rem;
}

.category-container[b-lg28i43ywb] {
    max-width: 1200px;
    margin: 0 auto;
}

/* Breadcrumb Navigation */
.breadcrumb-nav[b-lg28i43ywb] {
    margin-bottom: 2rem;
}

.breadcrumb[b-lg28i43ywb] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 0.9rem;
}

.breadcrumb-item[b-lg28i43ywb] {
    color: #6b7280;
}

    .breadcrumb-item a[b-lg28i43ywb] {
        color: #0066ff;
        text-decoration: none;
        transition: color 0.2s ease;
    }

        .breadcrumb-item a:hover[b-lg28i43ywb] {
            color: #0052cc;
            text-decoration: underline;
        }

    .breadcrumb-item + .breadcrumb-item[b-lg28i43ywb]::before {
        content: "›";
        margin-right: 0.5rem;
        color: #9ca3af;
    }

    .breadcrumb-item.active[b-lg28i43ywb] {
        color: #111827;
        font-weight: 500;
    }

/* Category Header */
.category-header[b-lg28i43ywb] {
    text-align: center;
    margin-bottom: 3rem;
}

.category-icon-large[b-lg28i43ywb] {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #0066ff 0%, #0052cc 100%);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    margin: 0 auto 1.5rem;
}

.category-header h1[b-lg28i43ywb] {
    font-size: 2.5rem;
    font-weight: 800;
    color: #111827;
    margin-bottom: 1rem;
    line-height: 1.2;
}

.category-intro[b-lg28i43ywb] {
    font-size: 1.1rem;
    color: #6b7280;
    line-height: 1.7;
    max-width: 700px;
    margin: 0 auto 1.5rem;
}

/* Category Stats */
.category-stats[b-lg28i43ywb] {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.stat-badge[b-lg28i43ywb] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: white;
    border-radius: 50px;
    font-size: 0.875rem;
    font-weight: 600;
    color: #374151;
    border: 1px solid #e5e7eb;
}

    .stat-badge svg[b-lg28i43ywb] {
        color: #0066ff;
    }

/* Articles Section */
.articles-section[b-lg28i43ywb] {
    margin-top: 4rem;
    margin-bottom: 3rem;
}

.section-title[b-lg28i43ywb] {
    font-size: 1.75rem;
    font-weight: 700;
    color: #111827;
    margin-bottom: 2rem;
}

/* Articles Grid */
.articles-grid[b-lg28i43ywb] {
    display: grid;
    gap: 1.5rem;
}

/* Article Card */
.article-card[b-lg28i43ywb] {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    border: 1px solid #e5e7eb;
    transition: all 0.3s ease;
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
    cursor: pointer;
}

    .article-card:hover[b-lg28i43ywb] {
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
        transform: translateY(-2px);
        border-color: #0066ff;
    }

        .article-card:hover .article-arrow[b-lg28i43ywb] {
            transform: translateX(4px);
        }

        .article-card:hover .article-title a[b-lg28i43ywb] {
            color: #0066ff;
        }

.article-icon[b-lg28i43ywb] {
    font-size: 2rem;
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
    border-radius: 10px;
}

.article-content[b-lg28i43ywb] {
    flex: 1;
}

.article-title[b-lg28i43ywb] {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0 0 0.75rem 0;
    line-height: 1.3;
}

    .article-title a[b-lg28i43ywb] {
        color: #111827;
        text-decoration: none;
        transition: color 0.2s ease;
    }

        .article-title a:hover[b-lg28i43ywb] {
            color: #0066ff;
        }

.article-description[b-lg28i43ywb] {
    color: #6b7280;
    line-height: 1.6;
    margin-bottom: 1rem;
    font-size: 0.95rem;
}

.article-meta[b-lg28i43ywb] {
    display: flex;
    gap: 1.25rem;
    flex-wrap: wrap;
}

.meta-item[b-lg28i43ywb] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    color: #9ca3af;
}

    .meta-item svg[b-lg28i43ywb] {
        color: #9ca3af;
    }

.article-arrow[b-lg28i43ywb] {
    flex-shrink: 0;
    color: #0066ff;
    transition: transform 0.2s ease;
    margin-top: 0.5rem;
}

/* Back Section */
.back-section[b-lg28i43ywb] {
    text-align: center;
    margin-top: 4rem;
    padding-top: 3rem;
    border-top: 1px solid #e5e7eb;
}

.back-link[b-lg28i43ywb] {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    color: #0066ff;
    font-weight: 600;
    text-decoration: none;
    font-size: 1rem;
    transition: all 0.2s ease;
}

    .back-link:hover[b-lg28i43ywb] {
        color: #0052cc;
        text-decoration: none;
        gap: 1rem;
    }

    .back-link svg[b-lg28i43ywb] {
        transition: transform 0.2s ease;
    }

    .back-link:hover svg[b-lg28i43ywb] {
        transform: translateX(-4px);
    }

/* Responsive Design */
@media (max-width: 768px) {
    .category-page[b-lg28i43ywb] {
        padding: 1.5rem 1rem;
    }

    .category-icon-large[b-lg28i43ywb] {
        width: 64px;
        height: 64px;
    }

        .category-icon-large svg[b-lg28i43ywb] {
            width: 32px;
            height: 32px;
        }

    .category-header h1[b-lg28i43ywb] {
        font-size: 2rem;
    }

    .category-intro[b-lg28i43ywb] {
        font-size: 1rem;
    }

    .category-stats[b-lg28i43ywb] {
        gap: 1rem;
    }

    .stat-badge[b-lg28i43ywb] {
        font-size: 0.8rem;
        padding: 0.4rem 0.8rem;
    }

    .section-title[b-lg28i43ywb] {
        font-size: 1.5rem;
    }

    .article-card[b-lg28i43ywb] {
        padding: 1.25rem;
    }

    .article-icon[b-lg28i43ywb] {
        font-size: 1.5rem;
        width: 48px;
        height: 48px;
    }

    .article-title[b-lg28i43ywb] {
        font-size: 1.1rem;
    }

    .article-description[b-lg28i43ywb] {
        font-size: 0.9rem;
    }

    .article-meta[b-lg28i43ywb] {
        gap: 1rem;
    }

    .meta-item[b-lg28i43ywb] {
        font-size: 0.8rem;
    }
}

@media (max-width: 480px) {
    .category-page[b-lg28i43ywb] {
        padding: 1rem 0.75rem;
    }

    .category-icon-large[b-lg28i43ywb] {
        width: 56px;
        height: 56px;
    }

        .category-icon-large svg[b-lg28i43ywb] {
            width: 28px;
            height: 28px;
        }

    .category-header h1[b-lg28i43ywb] {
        font-size: 1.75rem;
    }

    .category-intro[b-lg28i43ywb] {
        font-size: 0.95rem;
    }

    .article-card[b-lg28i43ywb] {
        flex-direction: column;
        padding: 1rem;
    }

    .article-icon[b-lg28i43ywb] {
        width: 100%;
        height: 56px;
    }

    .article-arrow[b-lg28i43ywb] {
        align-self: flex-end;
        margin-top: 0;
    }

    .back-link[b-lg28i43ywb] {
        font-size: 0.9rem;
    }
}

/* Print Styles */
@media print {
    .category-page[b-lg28i43ywb] {
        background: white;
        padding: 0;
    }

    .breadcrumb-nav[b-lg28i43ywb],
    .back-section[b-lg28i43ywb] {
        display: none;
    }

    .article-card[b-lg28i43ywb] {
        break-inside: avoid;
        page-break-inside: avoid;
        box-shadow: none;
        border: 1px solid #ddd;
        margin-bottom: 1rem;
    }

    .article-arrow[b-lg28i43ywb] {
        display: none;
    }
}

/* Accessibility */
.article-card:focus-within[b-lg28i43ywb] {
    outline: 2px solid #0066ff;
    outline-offset: 2px;
    border-radius: 12px;
}

.back-link:focus[b-lg28i43ywb] {
    outline: 2px solid #0066ff;
    outline-offset: 2px;
    border-radius: 4px;
}
/* _content/BotomixNew/Components/Pages/Knowledge/Categories/VergleichAuswahl.razor.rz.scp.css */
/* Category Page Styles */
.category-page[b-4lt8dqd6xp] {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    min-height: calc(100vh - 200px);
    padding: 2rem 1.5rem;
}

.category-container[b-4lt8dqd6xp] {
    max-width: 1200px;
    margin: 0 auto;
}

/* Breadcrumb Navigation */
.breadcrumb-nav[b-4lt8dqd6xp] {
    margin-bottom: 2rem;
}

.breadcrumb[b-4lt8dqd6xp] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 0.9rem;
}

.breadcrumb-item[b-4lt8dqd6xp] {
    color: #6b7280;
}

    .breadcrumb-item a[b-4lt8dqd6xp] {
        color: #0066ff;
        text-decoration: none;
        transition: color 0.2s ease;
    }

        .breadcrumb-item a:hover[b-4lt8dqd6xp] {
            color: #0052cc;
            text-decoration: underline;
        }

    .breadcrumb-item + .breadcrumb-item[b-4lt8dqd6xp]::before {
        content: "›";
        margin-right: 0.5rem;
        color: #9ca3af;
    }

    .breadcrumb-item.active[b-4lt8dqd6xp] {
        color: #111827;
        font-weight: 500;
    }

/* Category Header */
.category-header[b-4lt8dqd6xp] {
    text-align: center;
    margin-bottom: 3rem;
}

.category-icon-large[b-4lt8dqd6xp] {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #0066ff 0%, #0052cc 100%);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    margin: 0 auto 1.5rem;
}

.category-header h1[b-4lt8dqd6xp] {
    font-size: 2.5rem;
    font-weight: 800;
    color: #111827;
    margin-bottom: 1rem;
    line-height: 1.2;
}

.category-intro[b-4lt8dqd6xp] {
    font-size: 1.1rem;
    color: #6b7280;
    line-height: 1.7;
    max-width: 700px;
    margin: 0 auto 1.5rem;
}

/* Category Stats */
.category-stats[b-4lt8dqd6xp] {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.stat-badge[b-4lt8dqd6xp] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: white;
    border-radius: 50px;
    font-size: 0.875rem;
    font-weight: 600;
    color: #374151;
    border: 1px solid #e5e7eb;
}

    .stat-badge svg[b-4lt8dqd6xp] {
        color: #0066ff;
    }

/* Articles Section */
.articles-section[b-4lt8dqd6xp] {
    margin-top: 4rem;
    margin-bottom: 3rem;
}

.section-title[b-4lt8dqd6xp] {
    font-size: 1.75rem;
    font-weight: 700;
    color: #111827;
    margin-bottom: 2rem;
}

/* Articles Grid */
.articles-grid[b-4lt8dqd6xp] {
    display: grid;
    gap: 1.5rem;
}

/* Article Card */
.article-card[b-4lt8dqd6xp] {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    border: 1px solid #e5e7eb;
    transition: all 0.3s ease;
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
    cursor: pointer;
}

    .article-card:hover[b-4lt8dqd6xp] {
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
        transform: translateY(-2px);
        border-color: #0066ff;
    }

        .article-card:hover .article-arrow[b-4lt8dqd6xp] {
            transform: translateX(4px);
        }

        .article-card:hover .article-title a[b-4lt8dqd6xp] {
            color: #0066ff;
        }

.article-icon[b-4lt8dqd6xp] {
    font-size: 2rem;
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
    border-radius: 10px;
}

.article-content[b-4lt8dqd6xp] {
    flex: 1;
}

.article-title[b-4lt8dqd6xp] {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0 0 0.75rem 0;
    line-height: 1.3;
}

    .article-title a[b-4lt8dqd6xp] {
        color: #111827;
        text-decoration: none;
        transition: color 0.2s ease;
    }

        .article-title a:hover[b-4lt8dqd6xp] {
            color: #0066ff;
        }

.article-description[b-4lt8dqd6xp] {
    color: #6b7280;
    line-height: 1.6;
    margin-bottom: 1rem;
    font-size: 0.95rem;
}

.article-meta[b-4lt8dqd6xp] {
    display: flex;
    gap: 1.25rem;
    flex-wrap: wrap;
}

.meta-item[b-4lt8dqd6xp] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    color: #9ca3af;
}

    .meta-item svg[b-4lt8dqd6xp] {
        color: #9ca3af;
    }

.article-arrow[b-4lt8dqd6xp] {
    flex-shrink: 0;
    color: #0066ff;
    transition: transform 0.2s ease;
    margin-top: 0.5rem;
}

/* Back Section */
.back-section[b-4lt8dqd6xp] {
    text-align: center;
    margin-top: 4rem;
    padding-top: 3rem;
    border-top: 1px solid #e5e7eb;
}

.back-link[b-4lt8dqd6xp] {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    color: #0066ff;
    font-weight: 600;
    text-decoration: none;
    font-size: 1rem;
    transition: all 0.2s ease;
}

    .back-link:hover[b-4lt8dqd6xp] {
        color: #0052cc;
        text-decoration: none;
        gap: 1rem;
    }

    .back-link svg[b-4lt8dqd6xp] {
        transition: transform 0.2s ease;
    }

    .back-link:hover svg[b-4lt8dqd6xp] {
        transform: translateX(-4px);
    }

/* Responsive Design */
@media (max-width: 768px) {
    .category-page[b-4lt8dqd6xp] {
        padding: 1.5rem 1rem;
    }

    .category-icon-large[b-4lt8dqd6xp] {
        width: 64px;
        height: 64px;
    }

        .category-icon-large svg[b-4lt8dqd6xp] {
            width: 32px;
            height: 32px;
        }

    .category-header h1[b-4lt8dqd6xp] {
        font-size: 2rem;
    }

    .category-intro[b-4lt8dqd6xp] {
        font-size: 1rem;
    }

    .category-stats[b-4lt8dqd6xp] {
        gap: 1rem;
    }

    .stat-badge[b-4lt8dqd6xp] {
        font-size: 0.8rem;
        padding: 0.4rem 0.8rem;
    }

    .section-title[b-4lt8dqd6xp] {
        font-size: 1.5rem;
    }

    .article-card[b-4lt8dqd6xp] {
        padding: 1.25rem;
    }

    .article-icon[b-4lt8dqd6xp] {
        font-size: 1.5rem;
        width: 48px;
        height: 48px;
    }

    .article-title[b-4lt8dqd6xp] {
        font-size: 1.1rem;
    }

    .article-description[b-4lt8dqd6xp] {
        font-size: 0.9rem;
    }

    .article-meta[b-4lt8dqd6xp] {
        gap: 1rem;
    }

    .meta-item[b-4lt8dqd6xp] {
        font-size: 0.8rem;
    }
}

@media (max-width: 480px) {
    .category-page[b-4lt8dqd6xp] {
        padding: 1rem 0.75rem;
    }

    .category-icon-large[b-4lt8dqd6xp] {
        width: 56px;
        height: 56px;
    }

        .category-icon-large svg[b-4lt8dqd6xp] {
            width: 28px;
            height: 28px;
        }

    .category-header h1[b-4lt8dqd6xp] {
        font-size: 1.75rem;
    }

    .category-intro[b-4lt8dqd6xp] {
        font-size: 0.95rem;
    }

    .article-card[b-4lt8dqd6xp] {
        flex-direction: column;
        padding: 1rem;
    }

    .article-icon[b-4lt8dqd6xp] {
        width: 100%;
        height: 56px;
    }

    .article-arrow[b-4lt8dqd6xp] {
        align-self: flex-end;
        margin-top: 0;
    }

    .back-link[b-4lt8dqd6xp] {
        font-size: 0.9rem;
    }
}

/* Print Styles */
@media print {
    .category-page[b-4lt8dqd6xp] {
        background: white;
        padding: 0;
    }

    .breadcrumb-nav[b-4lt8dqd6xp],
    .back-section[b-4lt8dqd6xp] {
        display: none;
    }

    .article-card[b-4lt8dqd6xp] {
        break-inside: avoid;
        page-break-inside: avoid;
        box-shadow: none;
        border: 1px solid #ddd;
        margin-bottom: 1rem;
    }

    .article-arrow[b-4lt8dqd6xp] {
        display: none;
    }
}

/* Accessibility */
.article-card:focus-within[b-4lt8dqd6xp] {
    outline: 2px solid #0066ff;
    outline-offset: 2px;
    border-radius: 12px;
}

.back-link:focus[b-4lt8dqd6xp] {
    outline: 2px solid #0066ff;
    outline-offset: 2px;
    border-radius: 4px;
}
/* _content/BotomixNew/Components/Pages/Knowledge/Categories/WartungService.razor.rz.scp.css */
/* Category Page Styles */
.category-page[b-lvwqq6o7bz] {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    min-height: calc(100vh - 200px);
    padding: 2rem 1.5rem;
}

.category-container[b-lvwqq6o7bz] {
    max-width: 1200px;
    margin: 0 auto;
}

/* Breadcrumb Navigation */
.breadcrumb-nav[b-lvwqq6o7bz] {
    margin-bottom: 2rem;
}

.breadcrumb[b-lvwqq6o7bz] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 0.9rem;
}

.breadcrumb-item[b-lvwqq6o7bz] {
    color: #6b7280;
}

    .breadcrumb-item a[b-lvwqq6o7bz] {
        color: #0066ff;
        text-decoration: none;
        transition: color 0.2s ease;
    }

        .breadcrumb-item a:hover[b-lvwqq6o7bz] {
            color: #0052cc;
            text-decoration: underline;
        }

    .breadcrumb-item + .breadcrumb-item[b-lvwqq6o7bz]::before {
        content: "›";
        margin-right: 0.5rem;
        color: #9ca3af;
    }

    .breadcrumb-item.active[b-lvwqq6o7bz] {
        color: #111827;
        font-weight: 500;
    }

/* Category Header */
.category-header[b-lvwqq6o7bz] {
    text-align: center;
    margin-bottom: 3rem;
}

.category-icon-large[b-lvwqq6o7bz] {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #0066ff 0%, #0052cc 100%);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    margin: 0 auto 1.5rem;
}

.category-header h1[b-lvwqq6o7bz] {
    font-size: 2.5rem;
    font-weight: 800;
    color: #111827;
    margin-bottom: 1rem;
    line-height: 1.2;
}

.category-intro[b-lvwqq6o7bz] {
    font-size: 1.1rem;
    color: #6b7280;
    line-height: 1.7;
    max-width: 700px;
    margin: 0 auto 1.5rem;
}

/* Category Stats */
.category-stats[b-lvwqq6o7bz] {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.stat-badge[b-lvwqq6o7bz] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: white;
    border-radius: 50px;
    font-size: 0.875rem;
    font-weight: 600;
    color: #374151;
    border: 1px solid #e5e7eb;
}

    .stat-badge svg[b-lvwqq6o7bz] {
        color: #0066ff;
    }

/* Articles Section */
.articles-section[b-lvwqq6o7bz] {
    margin-top: 4rem;
    margin-bottom: 3rem;
}

.section-title[b-lvwqq6o7bz] {
    font-size: 1.75rem;
    font-weight: 700;
    color: #111827;
    margin-bottom: 2rem;
}

/* Articles Grid */
.articles-grid[b-lvwqq6o7bz] {
    display: grid;
    gap: 1.5rem;
}

/* Article Card */
.article-card[b-lvwqq6o7bz] {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    border: 1px solid #e5e7eb;
    transition: all 0.3s ease;
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
    cursor: pointer;
}

    .article-card:hover[b-lvwqq6o7bz] {
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
        transform: translateY(-2px);
        border-color: #0066ff;
    }

        .article-card:hover .article-arrow[b-lvwqq6o7bz] {
            transform: translateX(4px);
        }

        .article-card:hover .article-title a[b-lvwqq6o7bz] {
            color: #0066ff;
        }

.article-icon[b-lvwqq6o7bz] {
    font-size: 2rem;
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
    border-radius: 10px;
}

.article-content[b-lvwqq6o7bz] {
    flex: 1;
}

.article-title[b-lvwqq6o7bz] {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0 0 0.75rem 0;
    line-height: 1.3;
}

    .article-title a[b-lvwqq6o7bz] {
        color: #111827;
        text-decoration: none;
        transition: color 0.2s ease;
    }

        .article-title a:hover[b-lvwqq6o7bz] {
            color: #0066ff;
        }

.article-description[b-lvwqq6o7bz] {
    color: #6b7280;
    line-height: 1.6;
    margin-bottom: 1rem;
    font-size: 0.95rem;
}

.article-meta[b-lvwqq6o7bz] {
    display: flex;
    gap: 1.25rem;
    flex-wrap: wrap;
}

.meta-item[b-lvwqq6o7bz] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    color: #9ca3af;
}

    .meta-item svg[b-lvwqq6o7bz] {
        color: #9ca3af;
    }

.article-arrow[b-lvwqq6o7bz] {
    flex-shrink: 0;
    color: #0066ff;
    transition: transform 0.2s ease;
    margin-top: 0.5rem;
}

/* Back Section */
.back-section[b-lvwqq6o7bz] {
    text-align: center;
    margin-top: 4rem;
    padding-top: 3rem;
    border-top: 1px solid #e5e7eb;
}

.back-link[b-lvwqq6o7bz] {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    color: #0066ff;
    font-weight: 600;
    text-decoration: none;
    font-size: 1rem;
    transition: all 0.2s ease;
}

    .back-link:hover[b-lvwqq6o7bz] {
        color: #0052cc;
        text-decoration: none;
        gap: 1rem;
    }

    .back-link svg[b-lvwqq6o7bz] {
        transition: transform 0.2s ease;
    }

    .back-link:hover svg[b-lvwqq6o7bz] {
        transform: translateX(-4px);
    }

/* Responsive Design */
@media (max-width: 768px) {
    .category-page[b-lvwqq6o7bz] {
        padding: 1.5rem 1rem;
    }

    .category-icon-large[b-lvwqq6o7bz] {
        width: 64px;
        height: 64px;
    }

        .category-icon-large svg[b-lvwqq6o7bz] {
            width: 32px;
            height: 32px;
        }

    .category-header h1[b-lvwqq6o7bz] {
        font-size: 2rem;
    }

    .category-intro[b-lvwqq6o7bz] {
        font-size: 1rem;
    }

    .category-stats[b-lvwqq6o7bz] {
        gap: 1rem;
    }

    .stat-badge[b-lvwqq6o7bz] {
        font-size: 0.8rem;
        padding: 0.4rem 0.8rem;
    }

    .section-title[b-lvwqq6o7bz] {
        font-size: 1.5rem;
    }

    .article-card[b-lvwqq6o7bz] {
        padding: 1.25rem;
    }

    .article-icon[b-lvwqq6o7bz] {
        font-size: 1.5rem;
        width: 48px;
        height: 48px;
    }

    .article-title[b-lvwqq6o7bz] {
        font-size: 1.1rem;
    }

    .article-description[b-lvwqq6o7bz] {
        font-size: 0.9rem;
    }

    .article-meta[b-lvwqq6o7bz] {
        gap: 1rem;
    }

    .meta-item[b-lvwqq6o7bz] {
        font-size: 0.8rem;
    }
}

@media (max-width: 480px) {
    .category-page[b-lvwqq6o7bz] {
        padding: 1rem 0.75rem;
    }

    .category-icon-large[b-lvwqq6o7bz] {
        width: 56px;
        height: 56px;
    }

        .category-icon-large svg[b-lvwqq6o7bz] {
            width: 28px;
            height: 28px;
        }

    .category-header h1[b-lvwqq6o7bz] {
        font-size: 1.75rem;
    }

    .category-intro[b-lvwqq6o7bz] {
        font-size: 0.95rem;
    }

    .article-card[b-lvwqq6o7bz] {
        flex-direction: column;
        padding: 1rem;
    }

    .article-icon[b-lvwqq6o7bz] {
        width: 100%;
        height: 56px;
    }

    .article-arrow[b-lvwqq6o7bz] {
        align-self: flex-end;
        margin-top: 0;
    }

    .back-link[b-lvwqq6o7bz] {
        font-size: 0.9rem;
    }
}

/* Print Styles */
@media print {
    .category-page[b-lvwqq6o7bz] {
        background: white;
        padding: 0;
    }

    .breadcrumb-nav[b-lvwqq6o7bz],
    .back-section[b-lvwqq6o7bz] {
        display: none;
    }

    .article-card[b-lvwqq6o7bz] {
        break-inside: avoid;
        page-break-inside: avoid;
        box-shadow: none;
        border: 1px solid #ddd;
        margin-bottom: 1rem;
    }

    .article-arrow[b-lvwqq6o7bz] {
        display: none;
    }
}

/* Accessibility */
.article-card:focus-within[b-lvwqq6o7bz] {
    outline: 2px solid #0066ff;
    outline-offset: 2px;
    border-radius: 12px;
}

.back-link:focus[b-lvwqq6o7bz] {
    outline: 2px solid #0066ff;
    outline-offset: 2px;
    border-radius: 4px;
}
/* _content/BotomixNew/Components/Pages/Knowledge/Categories/ZukunftTrends.razor.rz.scp.css */
/* Category Page Styles */
.category-page[b-lks9u4nc9m] {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    min-height: calc(100vh - 200px);
    padding: 2rem 1.5rem;
}

.category-container[b-lks9u4nc9m] {
    max-width: 1200px;
    margin: 0 auto;
}

/* Breadcrumb Navigation */
.breadcrumb-nav[b-lks9u4nc9m] {
    margin-bottom: 2rem;
}

.breadcrumb[b-lks9u4nc9m] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 0.9rem;
}

.breadcrumb-item[b-lks9u4nc9m] {
    color: #6b7280;
}

    .breadcrumb-item a[b-lks9u4nc9m] {
        color: #0066ff;
        text-decoration: none;
        transition: color 0.2s ease;
    }

        .breadcrumb-item a:hover[b-lks9u4nc9m] {
            color: #0052cc;
            text-decoration: underline;
        }

    .breadcrumb-item + .breadcrumb-item[b-lks9u4nc9m]::before {
        content: "›";
        margin-right: 0.5rem;
        color: #9ca3af;
    }

    .breadcrumb-item.active[b-lks9u4nc9m] {
        color: #111827;
        font-weight: 500;
    }

/* Category Header */
.category-header[b-lks9u4nc9m] {
    text-align: center;
    margin-bottom: 3rem;
}

.category-icon-large[b-lks9u4nc9m] {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #0066ff 0%, #0052cc 100%);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    margin: 0 auto 1.5rem;
}

.category-header h1[b-lks9u4nc9m] {
    font-size: 2.5rem;
    font-weight: 800;
    color: #111827;
    margin-bottom: 1rem;
    line-height: 1.2;
}

.category-intro[b-lks9u4nc9m] {
    font-size: 1.1rem;
    color: #6b7280;
    line-height: 1.7;
    max-width: 700px;
    margin: 0 auto 1.5rem;
}

/* Category Stats */
.category-stats[b-lks9u4nc9m] {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.stat-badge[b-lks9u4nc9m] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: white;
    border-radius: 50px;
    font-size: 0.875rem;
    font-weight: 600;
    color: #374151;
    border: 1px solid #e5e7eb;
}

    .stat-badge svg[b-lks9u4nc9m] {
        color: #0066ff;
    }

/* Articles Section */
.articles-section[b-lks9u4nc9m] {
    margin-top: 4rem;
    margin-bottom: 3rem;
}

.section-title[b-lks9u4nc9m] {
    font-size: 1.75rem;
    font-weight: 700;
    color: #111827;
    margin-bottom: 2rem;
}

/* Articles Grid */
.articles-grid[b-lks9u4nc9m] {
    display: grid;
    gap: 1.5rem;
}

/* Article Card */
.article-card[b-lks9u4nc9m] {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    border: 1px solid #e5e7eb;
    transition: all 0.3s ease;
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
    cursor: pointer;
}

    .article-card:hover[b-lks9u4nc9m] {
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
        transform: translateY(-2px);
        border-color: #0066ff;
    }

        .article-card:hover .article-arrow[b-lks9u4nc9m] {
            transform: translateX(4px);
        }

        .article-card:hover .article-title a[b-lks9u4nc9m] {
            color: #0066ff;
        }

.article-icon[b-lks9u4nc9m] {
    font-size: 2rem;
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
    border-radius: 10px;
}

.article-content[b-lks9u4nc9m] {
    flex: 1;
}

.article-title[b-lks9u4nc9m] {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0 0 0.75rem 0;
    line-height: 1.3;
}

    .article-title a[b-lks9u4nc9m] {
        color: #111827;
        text-decoration: none;
        transition: color 0.2s ease;
    }

        .article-title a:hover[b-lks9u4nc9m] {
            color: #0066ff;
        }

.article-description[b-lks9u4nc9m] {
    color: #6b7280;
    line-height: 1.6;
    margin-bottom: 1rem;
    font-size: 0.95rem;
}

.article-meta[b-lks9u4nc9m] {
    display: flex;
    gap: 1.25rem;
    flex-wrap: wrap;
}

.meta-item[b-lks9u4nc9m] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    color: #9ca3af;
}

    .meta-item svg[b-lks9u4nc9m] {
        color: #9ca3af;
    }

.article-arrow[b-lks9u4nc9m] {
    flex-shrink: 0;
    color: #0066ff;
    transition: transform 0.2s ease;
    margin-top: 0.5rem;
}

/* Back Section */
.back-section[b-lks9u4nc9m] {
    text-align: center;
    margin-top: 4rem;
    padding-top: 3rem;
    border-top: 1px solid #e5e7eb;
}

.back-link[b-lks9u4nc9m] {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    color: #0066ff;
    font-weight: 600;
    text-decoration: none;
    font-size: 1rem;
    transition: all 0.2s ease;
}

    .back-link:hover[b-lks9u4nc9m] {
        color: #0052cc;
        text-decoration: none;
        gap: 1rem;
    }

    .back-link svg[b-lks9u4nc9m] {
        transition: transform 0.2s ease;
    }

    .back-link:hover svg[b-lks9u4nc9m] {
        transform: translateX(-4px);
    }

/* Responsive Design */
@media (max-width: 768px) {
    .category-page[b-lks9u4nc9m] {
        padding: 1.5rem 1rem;
    }

    .category-icon-large[b-lks9u4nc9m] {
        width: 64px;
        height: 64px;
    }

        .category-icon-large svg[b-lks9u4nc9m] {
            width: 32px;
            height: 32px;
        }

    .category-header h1[b-lks9u4nc9m] {
        font-size: 2rem;
    }

    .category-intro[b-lks9u4nc9m] {
        font-size: 1rem;
    }

    .category-stats[b-lks9u4nc9m] {
        gap: 1rem;
    }

    .stat-badge[b-lks9u4nc9m] {
        font-size: 0.8rem;
        padding: 0.4rem 0.8rem;
    }

    .section-title[b-lks9u4nc9m] {
        font-size: 1.5rem;
    }

    .article-card[b-lks9u4nc9m] {
        padding: 1.25rem;
    }

    .article-icon[b-lks9u4nc9m] {
        font-size: 1.5rem;
        width: 48px;
        height: 48px;
    }

    .article-title[b-lks9u4nc9m] {
        font-size: 1.1rem;
    }

    .article-description[b-lks9u4nc9m] {
        font-size: 0.9rem;
    }

    .article-meta[b-lks9u4nc9m] {
        gap: 1rem;
    }

    .meta-item[b-lks9u4nc9m] {
        font-size: 0.8rem;
    }
}

@media (max-width: 480px) {
    .category-page[b-lks9u4nc9m] {
        padding: 1rem 0.75rem;
    }

    .category-icon-large[b-lks9u4nc9m] {
        width: 56px;
        height: 56px;
    }

        .category-icon-large svg[b-lks9u4nc9m] {
            width: 28px;
            height: 28px;
        }

    .category-header h1[b-lks9u4nc9m] {
        font-size: 1.75rem;
    }

    .category-intro[b-lks9u4nc9m] {
        font-size: 0.95rem;
    }

    .article-card[b-lks9u4nc9m] {
        flex-direction: column;
        padding: 1rem;
    }

    .article-icon[b-lks9u4nc9m] {
        width: 100%;
        height: 56px;
    }

    .article-arrow[b-lks9u4nc9m] {
        align-self: flex-end;
        margin-top: 0;
    }

    .back-link[b-lks9u4nc9m] {
        font-size: 0.9rem;
    }
}

/* Print Styles */
@media print {
    .category-page[b-lks9u4nc9m] {
        background: white;
        padding: 0;
    }

    .breadcrumb-nav[b-lks9u4nc9m],
    .back-section[b-lks9u4nc9m] {
        display: none;
    }

    .article-card[b-lks9u4nc9m] {
        break-inside: avoid;
        page-break-inside: avoid;
        box-shadow: none;
        border: 1px solid #ddd;
        margin-bottom: 1rem;
    }

    .article-arrow[b-lks9u4nc9m] {
        display: none;
    }
}

/* Accessibility */
.article-card:focus-within[b-lks9u4nc9m] {
    outline: 2px solid #0066ff;
    outline-offset: 2px;
    border-radius: 12px;
}

.back-link:focus[b-lks9u4nc9m] {
    outline: 2px solid #0066ff;
    outline-offset: 2px;
    border-radius: 4px;
}
/* _content/BotomixNew/Components/Pages/Knowledge/Knowledge.razor.rz.scp.css */
/* Knowledge Page - Main Container */
.knowledge-page[b-1pxflunpmq] {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 50%, #f1f3f4 100%);
    min-height: calc(100vh - 200px);
    padding: 2rem 1.5rem;
}

.knowledge-container[b-1pxflunpmq] {
    max-width: 1400px;
    margin: 0 auto;
}

/* Breadcrumb Navigation */
.breadcrumb-nav[b-1pxflunpmq] {
    margin-bottom: 2rem;
}

.breadcrumb[b-1pxflunpmq] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 0.9rem;
}

.breadcrumb-item[b-1pxflunpmq] {
    color: #6b7280;
}

    .breadcrumb-item a[b-1pxflunpmq] {
        color: #0066ff;
        text-decoration: none;
        transition: color 0.2s ease;
    }

        .breadcrumb-item a:hover[b-1pxflunpmq] {
            color: #0052cc;
            text-decoration: underline;
        }

    .breadcrumb-item + .breadcrumb-item[b-1pxflunpmq]::before {
        content: "›";
        margin-right: 0.5rem;
        color: #9ca3af;
    }

    .breadcrumb-item.active[b-1pxflunpmq] {
        color: #111827;
        font-weight: 500;
    }

/* Hero Section */
.knowledge-hero[b-1pxflunpmq] {
    background: linear-gradient(135deg, #0066ff 0%, #0052cc 100%);
    border-radius: 20px;
    padding: 3rem 2.5rem;
    margin-bottom: 3rem;
    color: white;
    box-shadow: 0 10px 40px rgba(0, 102, 255, 0.2);
}

.hero-content[b-1pxflunpmq] {
    max-width: 1000px;
    margin: 0 auto;
}

.hero-title[b-1pxflunpmq] {
    font-size: 2.75rem;
    font-weight: 800;
    margin-bottom: 1rem;
    line-height: 1.2;
}

.hero-subtitle[b-1pxflunpmq] {
    font-size: 1.15rem;
    line-height: 1.7;
    opacity: 0.95;
    margin-bottom: 2.5rem;
}

/* Statistics Grid */
.stats-grid[b-1pxflunpmq] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2.5rem;
    padding: 2rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.stat-item[b-1pxflunpmq] {
    text-align: center;
}

.stat-number[b-1pxflunpmq] {
    display: block;
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: 0.25rem;
    color: white;
}

.stat-label[b-1pxflunpmq] {
    display: block;
    font-size: 0.9rem;
    opacity: 0.9;
    font-weight: 500;
}

/* Search Wrapper */
.search-wrapper[b-1pxflunpmq] {
    max-width: 700px;
    margin: 0 auto;
}

.search-box[b-1pxflunpmq] {
    position: relative;
    display: flex;
    align-items: center;
    background: white;
    border-radius: 50px;
    padding: 0.75rem 1.5rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    transition: box-shadow 0.3s ease;
    gap: 1rem;
}

    .search-box:focus-within[b-1pxflunpmq] {
        box-shadow: 0 6px 30px rgba(0, 0, 0, 0.25);
    }

.search-icon[b-1pxflunpmq] {
    color: #6b7280;
    flex-shrink: 0;
}

.search-input[b-1pxflunpmq] {
    flex: 1;
    border: none;
    outline: none;
    font-size: 1rem;
    color: #111827;
    background: transparent;
}

    .search-input[b-1pxflunpmq]::placeholder {
        color: #9ca3af;
    }

.search-button[b-1pxflunpmq] {
    background: #0066ff;
    color: white;
    border: none;
    border-radius: 25px;
    padding: 0.5rem 1.5rem;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

    .search-button:hover[b-1pxflunpmq] {
        background: #0052cc;
        transform: scale(1.05);
    }

    .search-button:active[b-1pxflunpmq] {
        transform: scale(0.98);
    }

.clear-button[b-1pxflunpmq] {
    background: transparent;
    color: #6b7280;
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-size: 1.2rem;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .clear-button:hover[b-1pxflunpmq] {
        background: #f3f4f6;
        color: #111827;
    }

    .clear-button:active[b-1pxflunpmq] {
        transform: scale(0.9);
    }

.search-hint[b-1pxflunpmq] {
    text-align: center;
    margin-top: 1rem;
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.9);
}

    .search-hint strong[b-1pxflunpmq] {
        font-weight: 600;
    }

/* Search Results Section */
.search-results-section[b-1pxflunpmq] {
    margin-bottom: 4rem;
}

.search-results-grid[b-1pxflunpmq] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

/* Article Card - For Search Results */
.article-card[b-1pxflunpmq] {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    border: 1px solid #e5e7eb;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    position: relative;
    text-decoration: none !important;
}

    .article-card:hover[b-1pxflunpmq] {
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        transform: translateY(-4px);
        border-color: #0066ff;
        text-decoration: none !important;
    }

    .article-card *[b-1pxflunpmq],
    .article-card a[b-1pxflunpmq],
    .article-card span[b-1pxflunpmq] {
        text-decoration: none !important;
    }

/* Article Badge */
.article-badge[b-1pxflunpmq] {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: linear-gradient(135deg, #0066ff 0%, #0052cc 100%);
    color: white;
    padding: 0.3rem 0.7rem;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Article Header */
.article-header[b-1pxflunpmq] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

/* Article Icons */
.article-icon[b-1pxflunpmq] {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

.article-card:hover .article-icon[b-1pxflunpmq] {
    transform: scale(1.05);
}

.article-icon.gastgewerbe[b-1pxflunpmq] {
    background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
}

.article-icon.healthcare[b-1pxflunpmq] {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

.article-icon.logistik[b-1pxflunpmq] {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
}

.article-icon.weitere[b-1pxflunpmq] {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
}

/* Article Title */
.article-title[b-1pxflunpmq] {
    font-size: 1.05rem;
    font-weight: 700;
    color: #111827;
    margin: 0;
    line-height: 1.3;
    text-decoration: none !important;
}

/* Article Meta */
.article-meta[b-1pxflunpmq] {
    display: block;
    font-size: 0.8rem;
    color: #9ca3af;
    font-weight: 500;
    margin-top: 0.25rem;
    text-decoration: none !important;
}

/* Article Description */
.article-description[b-1pxflunpmq] {
    color: #4b5563;
    line-height: 1.6;
    margin-bottom: 1rem;
    font-size: 0.875rem;
    text-decoration: none !important;
}

/* Article Tags */
.article-tags[b-1pxflunpmq] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.article-tag[b-1pxflunpmq] {
    display: inline-block;
    padding: 0.3rem 0.7rem;
    background: #f3f4f6;
    color: #6b7280;
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: 600;
    transition: all 0.2s ease;
    text-decoration: none !important;
}

    .article-tag:hover[b-1pxflunpmq] {
        background: #e5e7eb;
        color: #374151;
        text-decoration: none !important;
    }

/* Article Link */
.article-link[b-1pxflunpmq] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: #0066ff;
    font-weight: 600;
    font-size: 0.85rem;
    text-decoration: none !important;
    transition: all 0.2s ease;
    margin-top: auto;
}

    .article-link:hover[b-1pxflunpmq] {
        color: #0052cc;
        gap: 0.75rem;
        text-decoration: none !important;
    }

    .article-link svg[b-1pxflunpmq] {
        transition: transform 0.2s ease;
    }

    .article-link:hover svg[b-1pxflunpmq] {
        transform: translateX(4px);
    }

/* Categories Section */
.categories-section[b-1pxflunpmq] {
    margin-bottom: 4rem;
}

.section-header[b-1pxflunpmq] {
    margin-bottom: 2.5rem;
}

.section-title[b-1pxflunpmq] {
    font-size: 2rem;
    font-weight: 700;
    color: #111827;
    margin-bottom: 1rem;
}

.section-description[b-1pxflunpmq] {
    font-size: 1rem;
    color: #6b7280;
    line-height: 1.7;
    max-width: 900px;
}

/* Categories Grid - BRANCHEN */
.categories-grid.branches[b-1pxflunpmq] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    margin-bottom: 2rem;
}

/* Category Card - BASE - KEINE UNTERSTREICHUNGEN */
.category-card[b-1pxflunpmq] {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    border: 1px solid #e5e7eb;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    position: relative;
    text-decoration: none !important;
}

    .category-card:hover[b-1pxflunpmq] {
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        transform: translateY(-4px);
        border-color: #0066ff;
        text-decoration: none !important;
    }

    /* Alle Elemente in category-card ohne Unterstreichung */
    .category-card *[b-1pxflunpmq],
    .category-card a[b-1pxflunpmq],
    .category-card span[b-1pxflunpmq] {
        text-decoration: none !important;
    }

/* BRANCH CARD - Spezielle Styles für Branchen */
.branch-card[b-1pxflunpmq] {
    padding: 2rem;
    border-width: 2px;
}

    .branch-card:hover[b-1pxflunpmq] {
        border-color: transparent;
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
    }

/* Branch Badge */
.branch-badge[b-1pxflunpmq] {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: linear-gradient(135deg, #0066ff 0%, #0052cc 100%);
    color: white;
    padding: 0.35rem 0.75rem;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Category Header */
.category-header[b-1pxflunpmq] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

/* Category Icon */
.category-icon[b-1pxflunpmq] {
    width: 60px;
    height: 60px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

.category-card:hover .category-icon[b-1pxflunpmq] {
    transform: scale(1.05);
}

.category-icon.gastgewerbe[b-1pxflunpmq] {
    background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
}

.category-icon.healthcare[b-1pxflunpmq] {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

.category-icon.logistik[b-1pxflunpmq] {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
}

.category-icon.weitere[b-1pxflunpmq] {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
}

/* Category Title */
.category-title[b-1pxflunpmq] {
    font-size: 1.25rem;
    font-weight: 700;
    color: #111827;
    margin: 0;
    line-height: 1.3;
    text-decoration: none !important;
}

/* Branch Subtitle */
.branch-subtitle[b-1pxflunpmq] {
    display: block;
    font-size: 0.875rem;
    color: #9ca3af;
    font-weight: 500;
    margin-top: 0.35rem;
    text-decoration: none !important;
}

/* Category Description */
.category-description[b-1pxflunpmq] {
    color: #4b5563;
    line-height: 1.6;
    margin-bottom: 1rem;
    font-size: 0.95rem;
    text-decoration: none !important;
}

/* Topic Tags */
.topic-tags[b-1pxflunpmq] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.topic-tag[b-1pxflunpmq] {
    display: inline-block;
    padding: 0.35rem 0.75rem;
    background: #f3f4f6;
    color: #6b7280;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 600;
    transition: all 0.2s ease;
    text-decoration: none !important;
}

    .topic-tag:hover[b-1pxflunpmq] {
        background: #e5e7eb;
        color: #374151;
        text-decoration: none !important;
    }

/* Category Link */
.category-link[b-1pxflunpmq] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: #0066ff;
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none !important;
    transition: all 0.2s ease;
    margin-top: auto;
}

    .category-link:hover[b-1pxflunpmq] {
        color: #0052cc;
        gap: 0.75rem;
        text-decoration: none !important;
    }

    .category-link svg[b-1pxflunpmq] {
        transition: transform 0.2s ease;
    }

    .category-link:hover svg[b-1pxflunpmq] {
        transform: translateX(4px);
    }

/* Knowledge CTA Section */
.knowledge-cta[b-1pxflunpmq] {
    background: linear-gradient(135deg, #0066ff 0%, #0052cc 100%);
    border-radius: 20px;
    padding: 3rem 2.5rem;
    text-align: center;
    color: white;
    box-shadow: 0 10px 40px rgba(0, 102, 255, 0.2);
}

.cta-content h2[b-1pxflunpmq] {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 1rem;
    line-height: 1.3;
}

.cta-content p[b-1pxflunpmq] {
    font-size: 1.125rem;
    line-height: 1.7;
    opacity: 0.9;
    margin-bottom: 2rem;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.cta-buttons[b-1pxflunpmq] {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.btn-cta[b-1pxflunpmq] {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 2rem;
    border-radius: 50px;
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

    .btn-cta.primary[b-1pxflunpmq] {
        background: #0066ff;
        color: white;
    }

        .btn-cta.primary:hover[b-1pxflunpmq] {
            background: #0052cc;
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(0, 102, 255, 0.3);
            text-decoration: none;
            color: white;
        }

    .btn-cta.secondary[b-1pxflunpmq] {
        background: transparent;
        color: white;
        border-color: white;
    }

        .btn-cta.secondary:hover[b-1pxflunpmq] {
            background: white;
            color: #0066ff;
            transform: translateY(-2px);
            text-decoration: none;
        }

/* Responsive Design */
@media (max-width: 1200px) {
    .categories-grid.branches[b-1pxflunpmq] {
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    }

    .search-results-grid[b-1pxflunpmq] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .knowledge-page[b-1pxflunpmq] {
        padding: 1.5rem 1rem;
    }

    .knowledge-hero[b-1pxflunpmq] {
        padding: 2rem 1.5rem;
        border-radius: 16px;
    }

    .hero-title[b-1pxflunpmq] {
        font-size: 2rem;
    }

    .hero-subtitle[b-1pxflunpmq] {
        font-size: 1rem;
    }

    .stats-grid[b-1pxflunpmq] {
        grid-template-columns: repeat(3, 1fr);
        gap: 1rem;
        padding: 1.5rem 0;
    }

    .stat-number[b-1pxflunpmq] {
        font-size: 2rem;
    }

    .stat-label[b-1pxflunpmq] {
        font-size: 0.8rem;
    }

    .search-box[b-1pxflunpmq] {
        padding: 0.625rem 1.25rem;
        gap: 0.75rem;
    }

    .search-input[b-1pxflunpmq] {
        font-size: 0.9rem;
    }

    .search-button[b-1pxflunpmq] {
        padding: 0.4rem 1.2rem;
        font-size: 0.85rem;
    }

    .search-hint[b-1pxflunpmq] {
        font-size: 0.8rem;
    }

    .section-title[b-1pxflunpmq] {
        font-size: 1.75rem;
    }

    .categories-grid.branches[b-1pxflunpmq] {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .search-results-grid[b-1pxflunpmq] {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .branch-card[b-1pxflunpmq] {
        padding: 1.5rem;
    }

    .article-card[b-1pxflunpmq] {
        padding: 1.25rem;
    }

    .category-icon[b-1pxflunpmq] {
        width: 48px;
        height: 48px;
    }

    .article-icon[b-1pxflunpmq] {
        width: 44px;
        height: 44px;
    }

    .category-title[b-1pxflunpmq] {
        font-size: 1rem;
    }

    .article-title[b-1pxflunpmq] {
        font-size: 0.95rem;
    }

    .branch-card .category-title[b-1pxflunpmq] {
        font-size: 1.15rem;
    }

    .category-description[b-1pxflunpmq] {
        font-size: 0.875rem;
    }

    .article-description[b-1pxflunpmq] {
        font-size: 0.85rem;
    }

    .branch-subtitle[b-1pxflunpmq] {
        font-size: 0.8rem;
    }

    .article-meta[b-1pxflunpmq] {
        font-size: 0.75rem;
    }

    .topic-tags[b-1pxflunpmq] {
        gap: 0.4rem;
    }

    .topic-tag[b-1pxflunpmq] {
        font-size: 0.7rem;
        padding: 0.3rem 0.6rem;
    }

    .article-tags[b-1pxflunpmq] {
        gap: 0.4rem;
    }

    .article-tag[b-1pxflunpmq] {
        font-size: 0.65rem;
        padding: 0.25rem 0.6rem;
    }

    .knowledge-cta[b-1pxflunpmq] {
        padding: 2rem 1.5rem;
    }

    .cta-content h2[b-1pxflunpmq] {
        font-size: 1.75rem;
    }

    .cta-content p[b-1pxflunpmq] {
        font-size: 1rem;
    }

    .cta-buttons[b-1pxflunpmq] {
        flex-direction: column;
    }

    .btn-cta[b-1pxflunpmq] {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .knowledge-page[b-1pxflunpmq] {
        padding: 1rem 0.75rem;
    }

    .knowledge-hero[b-1pxflunpmq] {
        padding: 1.5rem 1rem;
        border-radius: 12px;
    }

    .hero-title[b-1pxflunpmq] {
        font-size: 1.75rem;
    }

    .hero-subtitle[b-1pxflunpmq] {
        font-size: 0.95rem;
        margin-bottom: 2rem;
    }

    .stats-grid[b-1pxflunpmq] {
        grid-template-columns: repeat(3, 1fr);
        gap: 0.75rem;
        padding: 1rem 0;
    }

    .stat-number[b-1pxflunpmq] {
        font-size: 1.75rem;
    }

    .stat-label[b-1pxflunpmq] {
        font-size: 0.75rem;
    }

    .search-box[b-1pxflunpmq] {
        padding: 0.5rem 1rem;
        border-radius: 40px;
        gap: 0.5rem;
    }

    .search-icon[b-1pxflunpmq] {
        width: 16px;
        height: 16px;
    }

    .search-input[b-1pxflunpmq] {
        font-size: 0.875rem;
    }

    .search-button[b-1pxflunpmq] {
        padding: 0.35rem 1rem;
        font-size: 0.8rem;
    }

    .section-title[b-1pxflunpmq] {
        font-size: 1.5rem;
    }

    .section-description[b-1pxflunpmq] {
        font-size: 0.9rem;
    }

    .branch-card[b-1pxflunpmq] {
        padding: 1rem;
        border-radius: 10px;
    }

    .article-card[b-1pxflunpmq] {
        padding: 1rem;
        border-radius: 10px;
    }

    .branch-badge[b-1pxflunpmq] {
        top: 0.75rem;
        right: 0.75rem;
        padding: 0.25rem 0.6rem;
        font-size: 0.7rem;
    }

    .article-badge[b-1pxflunpmq] {
        top: 0.75rem;
        right: 0.75rem;
        padding: 0.25rem 0.6rem;
        font-size: 0.7rem;
    }

    .category-icon[b-1pxflunpmq] {
        width: 40px;
        height: 40px;
    }

        .category-icon svg[b-1pxflunpmq] {
            width: 24px;
            height: 24px;
        }

    .article-icon[b-1pxflunpmq] {
        width: 38px;
        height: 38px;
    }

        .article-icon svg[b-1pxflunpmq] {
            width: 22px;
            height: 22px;
        }

    .category-title[b-1pxflunpmq] {
        font-size: 0.95rem;
    }

    .article-title[b-1pxflunpmq] {
        font-size: 0.9rem;
    }

    .branch-card .category-title[b-1pxflunpmq] {
        font-size: 1.05rem;
    }

    .category-description[b-1pxflunpmq] {
        font-size: 0.85rem;
    }

    .article-description[b-1pxflunpmq] {
        font-size: 0.8rem;
    }

    .category-link[b-1pxflunpmq] {
        font-size: 0.8rem;
    }

    .article-link[b-1pxflunpmq] {
        font-size: 0.8rem;
    }

    .knowledge-cta[b-1pxflunpmq] {
        padding: 1.5rem 1rem;
    }

    .cta-content h2[b-1pxflunpmq] {
        font-size: 1.5rem;
    }

    .cta-content p[b-1pxflunpmq] {
        font-size: 0.9rem;
    }

    .btn-cta[b-1pxflunpmq] {
        padding: 0.875rem 1.5rem;
        font-size: 0.9rem;
    }
}

/* Print Styles */
@media print {
    .knowledge-page[b-1pxflunpmq] {
        background: white;
        padding: 0;
    }

    .knowledge-hero[b-1pxflunpmq],
    .search-wrapper[b-1pxflunpmq],
    .knowledge-cta[b-1pxflunpmq],
    .breadcrumb-nav[b-1pxflunpmq] {
        display: none;
    }

    .category-card[b-1pxflunpmq],
    .article-card[b-1pxflunpmq] {
        break-inside: avoid;
        page-break-inside: avoid;
        box-shadow: none;
        border: 1px solid #ddd;
        margin-bottom: 1rem;
    }

    .branch-badge[b-1pxflunpmq],
    .article-badge[b-1pxflunpmq],
    .topic-tags[b-1pxflunpmq],
    .article-tags[b-1pxflunpmq] {
        display: none;
    }
}

/* Accessibility */
.search-input:focus[b-1pxflunpmq],
.category-link:focus[b-1pxflunpmq],
.article-link:focus[b-1pxflunpmq],
.btn-cta:focus[b-1pxflunpmq] {
    outline: 2px solid #0066ff;
    outline-offset: 2px;
}

.category-card:focus-within[b-1pxflunpmq],
.article-card:focus-within[b-1pxflunpmq] {
    outline: 2px solid #0066ff;
    outline-offset: 2px;
    border-radius: 12px;
}

/* Smooth Scrolling */
html[b-1pxflunpmq] {
    scroll-behavior: smooth;
}

/* Loading State */
.loading-state[b-1pxflunpmq] {
    text-align: center;
    padding: 3rem;
    color: #6b7280;
}

    .loading-state p[b-1pxflunpmq] {
        font-size: 1.1rem;
    }

/* Improved Search Results Article Cards */
.knowledge-article-card[b-1pxflunpmq] {
    background: white;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    transition: all 0.3s ease;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
}

    .knowledge-article-card:hover[b-1pxflunpmq] {
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
        transform: translateY(-4px);
        border-color: #0066ff;
    }

.article-category-badge[b-1pxflunpmq] {
    position: absolute;
    top: 1rem;
    right: 1rem;
    padding: 0.4rem 0.9rem;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: white;
    z-index: 2;
}

    .article-category-badge.gastgewerbe[b-1pxflunpmq] {
        background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
    }

    .article-category-badge.healthcare[b-1pxflunpmq] {
        background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    }

    .article-category-badge.logistik[b-1pxflunpmq] {
        background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    }

    .article-category-badge.weitere[b-1pxflunpmq] {
        background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
    }

.article-content[b-1pxflunpmq] {
    padding: 1.75rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.article-icon-wrapper[b-1pxflunpmq] {
    width: 60px;
    height: 60px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.25rem;
    transition: transform 0.3s ease;
}

.knowledge-article-card:hover .article-icon-wrapper[b-1pxflunpmq] {
    transform: scale(1.08);
}

.article-icon-wrapper.gastgewerbe[b-1pxflunpmq] {
    background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
    color: white;
}

.article-icon-wrapper.healthcare[b-1pxflunpmq] {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
}

.article-icon-wrapper.logistik[b-1pxflunpmq] {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: white;
}

.article-icon-wrapper.weitere[b-1pxflunpmq] {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
    color: white;
}

.article-icon-wrapper svg[b-1pxflunpmq] {
    width: 32px;
    height: 32px;
}

.article-card-title[b-1pxflunpmq] {
    font-size: 1.25rem;
    font-weight: 700;
    color: #111827;
    margin-bottom: 0.5rem;
    line-height: 1.3;
}

    .article-card-title a[b-1pxflunpmq] {
        color: #111827;
        text-decoration: none;
        transition: color 0.2s ease;
    }

        .article-card-title a:hover[b-1pxflunpmq] {
            color: #0066ff;
        }

.article-branch-info[b-1pxflunpmq] {
    font-size: 0.85rem;
    color: #6b7280;
    font-weight: 600;
    margin-bottom: 1rem;
}

.article-card-description[b-1pxflunpmq] {
    color: #4b5563;
    line-height: 1.7;
    margin-bottom: 1.25rem;
    font-size: 0.95rem;
    flex: 1;
}

.article-card-tags[b-1pxflunpmq] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
}

.article-tag-item[b-1pxflunpmq] {
    display: inline-block;
    padding: 0.35rem 0.75rem;
    background: #f3f4f6;
    color: #6b7280;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 600;
    transition: all 0.2s ease;
}

    .article-tag-item:hover[b-1pxflunpmq] {
        background: #e5e7eb;
        color: #374151;
    }

.article-read-link[b-1pxflunpmq] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: #0066ff;
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    transition: all 0.2s ease;
}

    .article-read-link:hover[b-1pxflunpmq] {
        color: #0052cc;
        gap: 0.75rem;
    }

    .article-read-link svg[b-1pxflunpmq] {
        transition: transform 0.2s ease;
    }

    .article-read-link:hover svg[b-1pxflunpmq] {
        transform: translateX(4px);
    }

/* Responsive für neue Artikel-Karten */
@media (max-width: 768px) {
    .knowledge-article-card[b-1pxflunpmq] {
        border-radius: 10px;
    }

    .article-content[b-1pxflunpmq] {
        padding: 1.5rem;
    }

    .article-icon-wrapper[b-1pxflunpmq] {
        width: 50px;
        height: 50px;
    }

        .article-icon-wrapper svg[b-1pxflunpmq] {
            width: 28px;
            height: 28px;
        }

    .article-card-title[b-1pxflunpmq] {
        font-size: 1.1rem;
    }

    .article-category-badge[b-1pxflunpmq] {
        top: 0.75rem;
        right: 0.75rem;
        padding: 0.35rem 0.75rem;
        font-size: 0.7rem;
    }
}

@media (max-width: 480px) {
    .article-content[b-1pxflunpmq] {
        padding: 1.25rem;
    }

    .article-icon-wrapper[b-1pxflunpmq] {
        width: 45px;
        height: 45px;
    }

        .article-icon-wrapper svg[b-1pxflunpmq] {
            width: 24px;
            height: 24px;
        }

    .article-card-title[b-1pxflunpmq] {
        font-size: 1rem;
    }

    .article-card-description[b-1pxflunpmq] {
        font-size: 0.9rem;
    }
}

/* ============================================
   KNOWLEDGE SUPPORT CTAs SECTION
   ============================================ */

/* Support Section */
.knowledge-support-section[b-1pxflunpmq] {
    margin-top: 5rem;
    margin-bottom: 3rem;
}

.knowledge-support-header[b-1pxflunpmq] {
    text-align: center;
    margin-bottom: 3rem;
}

.knowledge-support-title[b-1pxflunpmq] {
    font-size: clamp(1.75rem, 4vw, 2.25rem);
    font-weight: 700;
    color: #111827;
    margin-bottom: 1rem;
    line-height: 1.2;
}

.knowledge-support-subtitle[b-1pxflunpmq] {
    font-size: clamp(1rem, 2.5vw, 1.15rem);
    color: #6b7280;
    max-width: 800px;
    margin: 0 auto;
    line-height: 1.7;
}

/* Support Options Grid */
.knowledge-support-options[b-1pxflunpmq] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

.knowledge-support-card[b-1pxflunpmq] {
    background: white;
    border-radius: 20px;
    padding: 2.5rem;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
    border: 1px solid #e9ecef;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

    .knowledge-support-card:hover[b-1pxflunpmq] {
        transform: translateY(-8px);
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
        border-color: #0066ff;
    }

    .knowledge-support-card.featured[b-1pxflunpmq] {
        background: linear-gradient(135deg, #0066ff 0%, #0052cc 100%);
        color: white;
        position: relative;
        overflow: hidden;
    }

        .knowledge-support-card.featured[b-1pxflunpmq]::before {
            content: '';
            position: absolute;
            top: -50px;
            right: -50px;
            width: 200px;
            height: 200px;
            background: radial-gradient(circle, rgba(255,255,255,0.15) 0%, transparent 70%);
            border-radius: 50%;
            pointer-events: none;
        }

        .knowledge-support-card.featured .knowledge-support-icon[b-1pxflunpmq] {
            background: rgba(255, 255, 255, 0.25);
            color: white;
            border: 2px solid rgba(255, 255, 255, 0.4);
        }

        .knowledge-support-card.featured .knowledge-support-card-title[b-1pxflunpmq],
        .knowledge-support-card.featured .knowledge-support-card-text[b-1pxflunpmq] {
            color: white;
        }

        .knowledge-support-card.featured .knowledge-support-note[b-1pxflunpmq] {
            background: rgba(255, 255, 255, 0.15);
            border-color: rgba(255, 255, 255, 0.3);
            color: rgba(255, 255, 255, 0.95);
        }

.knowledge-support-icon[b-1pxflunpmq] {
    width: 70px;
    height: 70px;
    border-radius: 16px;
    background: linear-gradient(135deg, #0066ff, #0052cc);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    flex-shrink: 0;
    box-shadow: 0 4px 20px rgba(0, 102, 255, 0.3);
}

.knowledge-support-content[b-1pxflunpmq] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    flex: 1;
}

.knowledge-support-card-title[b-1pxflunpmq] {
    font-size: 1.4rem;
    font-weight: 700;
    color: #111827;
    margin: 0;
    line-height: 1.3;
}

.knowledge-support-card-text[b-1pxflunpmq] {
    color: #6b7280;
    line-height: 1.6;
    margin: 0;
    flex: 1;
}

.knowledge-support-note[b-1pxflunpmq] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: #6b7280;
    background: #f8f9fa;
    padding: 0.75rem 1rem;
    border-radius: 10px;
    border: 1px solid #e9ecef;
    margin: 0;
}

    .knowledge-support-note svg[b-1pxflunpmq] {
        flex-shrink: 0;
    }

/* Buttons */
.btn-knowledge-support[b-1pxflunpmq] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 1rem 1.75rem;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
}

    .btn-knowledge-support.primary[b-1pxflunpmq] {
        background: white;
        color: #0066ff;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    }

        .btn-knowledge-support.primary:hover[b-1pxflunpmq],
        .btn-knowledge-support.primary:focus[b-1pxflunpmq] {
            background: #f8f9fa;
            transform: translateY(-2px);
            box-shadow: 0 6px 25px rgba(0, 0, 0, 0.15);
        }

    .btn-knowledge-support.secondary[b-1pxflunpmq] {
        background: #0066ff;
        color: white;
        box-shadow: 0 4px 15px rgba(0, 102, 255, 0.25);
    }

        .btn-knowledge-support.secondary:hover[b-1pxflunpmq],
        .btn-knowledge-support.secondary:focus[b-1pxflunpmq] {
            background: #0052cc;
            transform: translateY(-2px);
            box-shadow: 0 6px 25px rgba(0, 102, 255, 0.4);
        }

    .btn-knowledge-support:focus-visible[b-1pxflunpmq] {
        outline: 2px solid #ffd700;
        outline-offset: 2px;
    }

    .btn-knowledge-support svg[b-1pxflunpmq] {
        flex-shrink: 0;
    }

/* Responsive für Support CTAs */
@media (max-width: 992px) {
    .knowledge-support-options[b-1pxflunpmq] {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    }
}

@media (max-width: 768px) {
    .knowledge-support-section[b-1pxflunpmq] {
        margin-top: 4rem;
    }

    .knowledge-support-header[b-1pxflunpmq] {
        margin-bottom: 2.5rem;
    }

    .knowledge-support-options[b-1pxflunpmq] {
        gap: 1.5rem;
    }

    .knowledge-support-card[b-1pxflunpmq] {
        padding: 2rem;
    }

    .knowledge-support-icon[b-1pxflunpmq] {
        width: 60px;
        height: 60px;
        font-size: 1.75rem;
    }
}

@media (max-width: 576px) {
    .knowledge-support-card[b-1pxflunpmq] {
        padding: 1.75rem;
    }

    .knowledge-support-icon[b-1pxflunpmq] {
        width: 56px;
        height: 56px;
        font-size: 1.5rem;
    }

    .knowledge-support-card-title[b-1pxflunpmq] {
        font-size: 1.2rem;
    }

    .btn-knowledge-support[b-1pxflunpmq] {
        padding: 0.875rem 1.5rem;
        font-size: 0.95rem;
    }
}

/* Accessibility: Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    .knowledge-support-card[b-1pxflunpmq],
    .btn-knowledge-support[b-1pxflunpmq] {
        animation: none;
        transition: none;
    }

        .knowledge-support-card:hover[b-1pxflunpmq],
        .btn-knowledge-support:hover[b-1pxflunpmq] {
            transform: none;
        }
}

/* Print Styles für Support Section */
@media print {
    .knowledge-support-section[b-1pxflunpmq] {
        display: none !important;
    }
}
/* _content/BotomixNew/Components/Pages/Kontakt.razor.rz.scp.css */
/* Kontakt Page Styling - Verbessert mit Accessibility */

/* Visually Hidden für Screen Readers */
.visually-hidden[b-vybity11lv] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

.contact-page[b-vybity11lv] {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 50%, #f1f3f4 100%);
    min-height: calc(100vh - 200px);
    padding: 4rem 2rem;
}

.contact-container[b-vybity11lv] {
    max-width: 1400px;
    margin: 0 auto;
}

.contact-header[b-vybity11lv] {
    text-align: center;
    margin-bottom: 4rem;
    animation: fadeInUp-b-vybity11lv 0.6s ease-out;
}

@keyframes fadeInUp-b-vybity11lv {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.contact-title[b-vybity11lv] {
    font-size: 3rem;
    font-weight: 700;
    color: #111827;
    margin-bottom: 1.25rem;
    line-height: 1.2;
}

.contact-subtitle[b-vybity11lv] {
    font-size: 1.2rem;
    color: #6b7280;
    max-width: 800px;
    margin: 0 auto;
    line-height: 1.7;
}

.contact-grid[b-vybity11lv] {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 3rem;
    align-items: start;
}

/* Form Section */
.contact-form-section[b-vybity11lv] {
    background: white;
    border-radius: 20px;
    padding: 3rem;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
    border: 1px solid #e9ecef;
    animation: slideInLeft-b-vybity11lv 0.6s ease-out 0.2s both;
}

@keyframes slideInLeft-b-vybity11lv {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.section-title[b-vybity11lv] {
    font-size: 1.75rem;
    font-weight: 700;
    color: #111827;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid #f3f4f6;
}

.contact-form[b-vybity11lv] {
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
}

.form-group[b-vybity11lv] {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.form-label[b-vybity11lv] {
    font-size: 0.95rem;
    font-weight: 600;
    color: #374151;
    margin-bottom: 0.25rem;
}

.form-input[b-vybity11lv],
.form-textarea[b-vybity11lv] {
    width: 100%;
    padding: 1rem 1.25rem;
    font-size: 1rem;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    transition: all 0.3s ease;
    font-family: inherit;
    color: #111827;
    background: #fafbfc;
}

    .form-input:focus[b-vybity11lv],
    .form-textarea:focus[b-vybity11lv] {
        outline: none;
        border-color: #0066ff;
        background: white;
        box-shadow: 0 0 0 4px rgba(0, 102, 255, 0.1);
        transform: translateY(-1px);
    }

    /* Focus-visible for keyboard navigation */
    .form-input:focus-visible[b-vybity11lv],
    .form-textarea:focus-visible[b-vybity11lv] {
        outline: 2px solid #0066ff;
        outline-offset: 2px;
    }

    .form-input[b-vybity11lv]::placeholder,
    .form-textarea[b-vybity11lv]::placeholder {
        color: #9ca3af;
    }

    /* Invalid state */
    .form-input:invalid:not(:placeholder-shown)[b-vybity11lv],
    .form-textarea:invalid:not(:placeholder-shown)[b-vybity11lv] {
        border-color: #dc2626;
    }

.form-textarea[b-vybity11lv] {
    resize: vertical;
    min-height: 160px;
    line-height: 1.6;
}

.form-hint[b-vybity11lv] {
    font-size: 0.875rem;
    color: #6b7280;
    margin-top: 0.25rem;
}

.validation-message[b-vybity11lv] {
    color: #dc2626;
    font-size: 0.875rem;
    font-weight: 500;
    margin-top: 0.25rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

    .validation-message[b-vybity11lv]::before {
        content: '⚠';
        font-size: 1rem;
    }

.alert-success[b-vybity11lv] {
    padding: 1.25rem 1.5rem;
    background: linear-gradient(135deg, #dcfce7, #bbf7d0);
    border: 2px solid #86efac;
    border-radius: 12px;
    color: #166534;
    font-size: 0.95rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.alert-error[b-vybity11lv] {
    padding: 1.25rem 1.5rem;
    background: linear-gradient(135deg, #fee2e2, #fecaca);
    border: 2px solid #fca5a5;
    border-radius: 12px;
    color: #991b1b;
    font-size: 0.95rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.btn-submit[b-vybity11lv] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 1.25rem 2.5rem;
    background: linear-gradient(135deg, #0066ff, #0052cc);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 1.05rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 0.5rem;
    box-shadow: 0 4px 15px rgba(0, 102, 255, 0.25);
}

    .btn-submit:hover:not(:disabled)[b-vybity11lv] {
        transform: translateY(-3px);
        box-shadow: 0 12px 35px rgba(0, 102, 255, 0.4);
    }

    .btn-submit:active:not(:disabled)[b-vybity11lv] {
        transform: translateY(-1px);
    }

    .btn-submit:focus-visible[b-vybity11lv] {
        outline: 2px solid #fff;
        outline-offset: 2px;
        box-shadow: 0 0 0 4px rgba(0, 102, 255, 0.5);
    }

    .btn-submit:disabled[b-vybity11lv] {
        opacity: 0.6;
        cursor: not-allowed;
        transform: none;
    }

    .btn-submit i[b-vybity11lv] {
        font-size: 1.1rem;
    }

/* Info Section */
.contact-info-section[b-vybity11lv] {
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
    animation: slideInRight-b-vybity11lv 0.6s ease-out 0.3s both;
}

@keyframes slideInRight-b-vybity11lv {
    from {
        opacity: 0;
        transform: translateX(30px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.info-card[b-vybity11lv] {
    background: white;
    border-radius: 16px;
    padding: 2rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    border: 1px solid #e9ecef;
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
    transition: all 0.3s ease;
}

    .info-card:hover[b-vybity11lv] {
        transform: translateY(-4px);
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
        border-color: #0066ff;
    }

    .info-card:focus-within[b-vybity11lv] {
        outline: 2px solid #0066ff;
        outline-offset: 2px;
    }

.info-icon[b-vybity11lv] {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: linear-gradient(135deg, #0066ff, #0052cc);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
    box-shadow: 0 4px 15px rgba(0, 102, 255, 0.25);
}

.info-content[b-vybity11lv] {
    flex: 1;
}

.info-title[b-vybity11lv] {
    font-size: 1.1rem;
    font-weight: 700;
    color: #111827;
    margin-bottom: 0.625rem;
}

.info-link[b-vybity11lv] {
    color: #0066ff;
    text-decoration: none;
    font-weight: 600;
    font-size: 1rem;
    transition: all 0.2s ease;
}

    .info-link:hover[b-vybity11lv] {
        color: #0052cc;
        text-decoration: underline;
    }

    .info-link:focus-visible[b-vybity11lv] {
        outline: 2px solid #0066ff;
        outline-offset: 2px;
        border-radius: 4px;
    }

.info-text[b-vybity11lv] {
    color: #6b7280;
    line-height: 1.7;
    margin: 0;
    font-size: 0.95rem;
}

/* Address styling */
address.info-text[b-vybity11lv] {
    font-style: normal;
}

.info-note[b-vybity11lv] {
    background: linear-gradient(135deg, #f0f7ff, #e6f3ff);
    border: 2px solid #bfdbfe;
    border-radius: 16px;
    padding: 1.5rem;
    display: flex;
    gap: 1.25rem;
    align-items: flex-start;
    margin-top: 0.5rem;
}

    .info-note i[b-vybity11lv] {
        color: #0066ff;
        font-size: 1.5rem;
        flex-shrink: 0;
        margin-top: 0.1rem;
    }

    .info-note p[b-vybity11lv] {
        color: #374151;
        line-height: 1.7;
        margin: 0;
        font-size: 0.95rem;
    }

/* Responsive Design */
@media (max-width: 1100px) {
    .contact-grid[b-vybity11lv] {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .contact-info-section[b-vybity11lv] {
        order: 2;
    }
}

@media (max-width: 768px) {
    .contact-page[b-vybity11lv] {
        padding: 2.5rem 1.25rem;
    }

    .contact-header[b-vybity11lv] {
        margin-bottom: 3rem;
    }

    .contact-title[b-vybity11lv] {
        font-size: 2.25rem;
    }

    .contact-subtitle[b-vybity11lv] {
        font-size: 1.05rem;
    }

    .contact-form-section[b-vybity11lv] {
        padding: 2.25rem 1.75rem;
        border-radius: 16px;
    }

    .section-title[b-vybity11lv] {
        font-size: 1.5rem;
    }

    .info-card[b-vybity11lv] {
        padding: 1.5rem;
    }

    .contact-grid[b-vybity11lv] {
        gap: 2.5rem;
    }
}

@media (max-width: 480px) {
    .contact-page[b-vybity11lv] {
        padding: 2rem 1rem;
    }

    .contact-title[b-vybity11lv] {
        font-size: 1.875rem;
    }

    .contact-subtitle[b-vybity11lv] {
        font-size: 1rem;
    }

    .contact-form-section[b-vybity11lv] {
        padding: 1.75rem 1.25rem;
    }

    .section-title[b-vybity11lv] {
        font-size: 1.35rem;
        margin-bottom: 1.5rem;
    }

    .contact-form[b-vybity11lv] {
        gap: 1.5rem;
    }

    .form-input[b-vybity11lv],
    .form-textarea[b-vybity11lv] {
        padding: 0.875rem 1rem;
    }

    .info-card[b-vybity11lv] {
        padding: 1.25rem;
        gap: 1.25rem;
    }

    .info-icon[b-vybity11lv] {
        width: 48px;
        height: 48px;
        font-size: 1.25rem;
    }

    .btn-submit[b-vybity11lv] {
        padding: 1rem 2rem;
        font-size: 1rem;
    }

    .info-note[b-vybity11lv] {
        padding: 1.25rem;
    }
}

/* Accessibility: Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    .contact-header[b-vybity11lv],
    .contact-form-section[b-vybity11lv],
    .contact-info-section[b-vybity11lv],
    .info-card[b-vybity11lv],
    .form-input[b-vybity11lv],
    .form-textarea[b-vybity11lv],
    .btn-submit[b-vybity11lv] {
        animation: none;
        transition: none;
    }

        .info-card:hover[b-vybity11lv],
        .btn-submit:hover:not(:disabled)[b-vybity11lv] {
            transform: none;
        }
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
    .form-input[b-vybity11lv],
    .form-textarea[b-vybity11lv] {
        border-width: 3px;
    }

    .btn-submit[b-vybity11lv] {
        border: 2px solid currentColor;
    }

    .info-card[b-vybity11lv] {
        border-width: 2px;
    }
}

/* Print Styles */
@media print {
    .contact-page[b-vybity11lv] {
        background: white;
        padding: 1rem;
    }

    .btn-submit[b-vybity11lv],
    .contact-form[b-vybity11lv] {
        display: none;
    }

    .contact-grid[b-vybity11lv] {
        grid-template-columns: 1fr;
    }

    .info-card[b-vybity11lv] {
        break-inside: avoid;
        box-shadow: none;
    }
}

/* Dark Mode Support (falls implementiert) */
@media (prefers-color-scheme: dark) {
    .contact-page[b-vybity11lv] {
        background: #1a1a1a;
    }

    .contact-form-section[b-vybity11lv],
    .info-card[b-vybity11lv] {
        background: #2d2d2d;
        border-color: #404040;
    }

    .contact-title[b-vybity11lv] {
        color: #f9fafb;
    }

    .form-input[b-vybity11lv],
    .form-textarea[b-vybity11lv] {
        background: #1a1a1a;
        border-color: #404040;
        color: #f9fafb;
    }

    .info-text[b-vybity11lv] {
        color: #d1d5db;
    }
}
/* _content/BotomixNew/Components/Pages/Legal/Agb.razor.rz.scp.css */
/* AGB Page Styling */
.legal-page[b-6d2fimvwse] {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 50%, #f1f3f4 100%);
    min-height: calc(100vh - 200px);
    padding: 3rem 1.5rem;
}

.legal-container[b-6d2fimvwse] {
    max-width: 900px;
    margin: 0 auto;
    background: white;
    border-radius: 16px;
    padding: 3rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border: 1px solid #e9ecef;
}

.legal-title[b-6d2fimvwse] {
    font-size: 2.5rem;
    font-weight: 700;
    color: #111827;
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 3px solid #0066ff;
    line-height: 1.2;
}

.legal-section[b-6d2fimvwse] {
    margin-bottom: 2.5rem;
}

    .legal-section h2[b-6d2fimvwse] {
        font-size: 1.5rem;
        font-weight: 700;
        color: #111827;
        margin-bottom: 1rem;
        margin-top: 0;
        line-height: 1.3;
    }

    .legal-section p[b-6d2fimvwse] {
        color: #4b5563;
        line-height: 1.8;
        margin-bottom: 1rem;
        font-size: 0.95rem;
    }

        .legal-section p:last-child[b-6d2fimvwse] {
            margin-bottom: 0;
        }

    .legal-section a[b-6d2fimvwse] {
        color: #0066ff;
        text-decoration: none;
        font-weight: 500;
        transition: all 0.2s ease;
    }

        .legal-section a:hover[b-6d2fimvwse] {
            color: #0052cc;
            text-decoration: underline;
        }

.legal-footer[b-6d2fimvwse] {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 2px solid #e9ecef;
    text-align: center;
}

    .legal-footer p[b-6d2fimvwse] {
        color: #6b7280;
        font-size: 0.9rem;
        margin: 0;
    }

/* Responsive Design */
@media (max-width: 768px) {
    .legal-page[b-6d2fimvwse] {
        padding: 2rem 1rem;
    }

    .legal-container[b-6d2fimvwse] {
        padding: 2rem 1.5rem;
        border-radius: 12px;
    }

    .legal-title[b-6d2fimvwse] {
        font-size: 2rem;
        margin-bottom: 1.5rem;
        padding-bottom: 1rem;
    }

    .legal-section h2[b-6d2fimvwse] {
        font-size: 1.3rem;
    }
}

@media (max-width: 480px) {
    .legal-page[b-6d2fimvwse] {
        padding: 1.5rem 0.75rem;
    }

    .legal-container[b-6d2fimvwse] {
        padding: 1.5rem 1rem;
    }

    .legal-title[b-6d2fimvwse] {
        font-size: 1.75rem;
    }

    .legal-section[b-6d2fimvwse] {
        margin-bottom: 2rem;
    }
}
/* _content/BotomixNew/Components/Pages/Legal/Datenschutz.razor.rz.scp.css */
/* Datenschutz Page Styling */
.legal-page[b-8ic5igi7sg] {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 50%, #f1f3f4 100%);
    min-height: calc(100vh - 200px);
    padding: 3rem 1.5rem;
}

.legal-container[b-8ic5igi7sg] {
    max-width: 900px;
    margin: 0 auto;
    background: white;
    border-radius: 16px;
    padding: 3rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border: 1px solid #e9ecef;
}

.legal-title[b-8ic5igi7sg] {
    font-size: 2.5rem;
    font-weight: 700;
    color: #111827;
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 3px solid #0066ff;
    line-height: 1.2;
}

.legal-intro[b-8ic5igi7sg] {
    background: #f8f9fa;
    border-left: 4px solid #0066ff;
    padding: 1.5rem;
    margin-bottom: 2.5rem;
    border-radius: 8px;
}

    .legal-intro p[b-8ic5igi7sg] {
        margin: 0;
        color: #374151;
        line-height: 1.7;
        font-size: 1rem;
    }

.legal-section[b-8ic5igi7sg] {
    margin-bottom: 2.5rem;
}

    .legal-section h2[b-8ic5igi7sg] {
        font-size: 1.5rem;
        font-weight: 700;
        color: #111827;
        margin-bottom: 1rem;
        margin-top: 0;
        line-height: 1.3;
    }

    .legal-section h3[b-8ic5igi7sg] {
        font-size: 1.2rem;
        font-weight: 600;
        color: #374151;
        margin-top: 1.5rem;
        margin-bottom: 0.75rem;
        line-height: 1.4;
    }

    .legal-section p[b-8ic5igi7sg] {
        color: #4b5563;
        line-height: 1.8;
        margin-bottom: 1rem;
        font-size: 0.95rem;
    }

        .legal-section p:last-child[b-8ic5igi7sg] {
            margin-bottom: 0;
        }

    .legal-section ul[b-8ic5igi7sg] {
        margin: 1rem 0;
        padding-left: 1.5rem;
    }

        .legal-section ul li[b-8ic5igi7sg] {
            color: #4b5563;
            line-height: 1.8;
            margin-bottom: 0.5rem;
            font-size: 0.95rem;
        }

            .legal-section ul li:last-child[b-8ic5igi7sg] {
                margin-bottom: 0;
            }

    .legal-section a[b-8ic5igi7sg] {
        color: #0066ff;
        text-decoration: none;
        font-weight: 500;
        transition: all 0.2s ease;
    }

        .legal-section a:hover[b-8ic5igi7sg] {
            color: #0052cc;
            text-decoration: underline;
        }

.legal-footer[b-8ic5igi7sg] {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 2px solid #e9ecef;
    text-align: center;
}

    .legal-footer p[b-8ic5igi7sg] {
        color: #6b7280;
        font-size: 0.9rem;
        margin: 0;
    }

/* Responsive Design */
@media (max-width: 768px) {
    .legal-page[b-8ic5igi7sg] {
        padding: 2rem 1rem;
    }

    .legal-container[b-8ic5igi7sg] {
        padding: 2rem 1.5rem;
        border-radius: 12px;
    }

    .legal-title[b-8ic5igi7sg] {
        font-size: 2rem;
        margin-bottom: 1.5rem;
        padding-bottom: 1rem;
    }

    .legal-intro[b-8ic5igi7sg] {
        padding: 1rem;
    }

    .legal-section h2[b-8ic5igi7sg] {
        font-size: 1.3rem;
    }

    .legal-section h3[b-8ic5igi7sg] {
        font-size: 1.1rem;
    }
}

@media (max-width: 480px) {
    .legal-page[b-8ic5igi7sg] {
        padding: 1.5rem 0.75rem;
    }

    .legal-container[b-8ic5igi7sg] {
        padding: 1.5rem 1rem;
    }

    .legal-title[b-8ic5igi7sg] {
        font-size: 1.75rem;
    }

    .legal-section[b-8ic5igi7sg] {
        margin-bottom: 2rem;
    }
}

/* Print Styles */
@media print {
    .legal-page[b-8ic5igi7sg] {
        background: white;
        padding: 0;
    }

    .legal-container[b-8ic5igi7sg] {
        box-shadow: none;
        border: none;
        padding: 1rem;
    }

    .legal-title[b-8ic5igi7sg] {
        border-bottom-color: #000;
    }
}
/* _content/BotomixNew/Components/Pages/Legal/Impressum.razor.rz.scp.css */
/* Impressum Page Styling */
.legal-page[b-1l2dglf7f7] {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 50%, #f1f3f4 100%);
    min-height: calc(100vh - 200px);
    padding: 3rem 1.5rem;
}

.legal-container[b-1l2dglf7f7] {
    max-width: 900px;
    margin: 0 auto;
    background: white;
    border-radius: 16px;
    padding: 3rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border: 1px solid #e9ecef;
}

.legal-title[b-1l2dglf7f7] {
    font-size: 2.5rem;
    font-weight: 700;
    color: #111827;
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 3px solid #0066ff;
    line-height: 1.2;
}

.legal-section[b-1l2dglf7f7] {
    margin-bottom: 2.5rem;
}

    .legal-section h2[b-1l2dglf7f7] {
        font-size: 1.5rem;
        font-weight: 700;
        color: #111827;
        margin-bottom: 1rem;
        margin-top: 0;
        line-height: 1.3;
    }

    .legal-section p[b-1l2dglf7f7] {
        color: #4b5563;
        line-height: 1.8;
        margin-bottom: 1rem;
        font-size: 0.95rem;
    }

        .legal-section p:last-child[b-1l2dglf7f7] {
            margin-bottom: 0;
        }

    .legal-section a[b-1l2dglf7f7] {
        color: #0066ff;
        text-decoration: none;
        font-weight: 500;
        transition: all 0.2s ease;
    }

        .legal-section a:hover[b-1l2dglf7f7] {
            color: #0052cc;
            text-decoration: underline;
        }

.company-name[b-1l2dglf7f7] {
    font-size: 1.2rem;
    font-weight: 700;
    color: #0066ff;
    margin-bottom: 1rem;
}

/* Responsive Design */
@media (max-width: 768px) {
    .legal-page[b-1l2dglf7f7] {
        padding: 2rem 1rem;
    }

    .legal-container[b-1l2dglf7f7] {
        padding: 2rem 1.5rem;
        border-radius: 12px;
    }

    .legal-title[b-1l2dglf7f7] {
        font-size: 2rem;
        margin-bottom: 1.5rem;
        padding-bottom: 1rem;
    }

    .legal-section h2[b-1l2dglf7f7] {
        font-size: 1.3rem;
    }
}

@media (max-width: 480px) {
    .legal-page[b-1l2dglf7f7] {
        padding: 1.5rem 0.75rem;
    }

    .legal-container[b-1l2dglf7f7] {
        padding: 1.5rem 1rem;
    }

    .legal-title[b-1l2dglf7f7] {
        font-size: 1.75rem;
    }

    .legal-section[b-1l2dglf7f7] {
        margin-bottom: 2rem;
    }
}
/* _content/BotomixNew/Components/Pages/ManufacturerDetail.razor.rz.scp.css */
/* Main Container */
.manufacturer-detail[b-kfskjdytf4] {
    background: #f8f9fa;
    min-height: 100vh;
}

/* Hero Section */
.manufacturer-hero[b-kfskjdytf4] {
    background: linear-gradient(135deg, #fff 0%, #f8f9fa 100%);
    border: 1px solid #e9ecef;
    border-radius: 1.5rem;
    padding: 2.5rem;
    margin-bottom: 2rem;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}

.manufacturer-logo-container[b-kfskjdytf4] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    background: #fff;
    border-radius: 1rem;
    border: 1px solid #e9ecef;
    padding: 2rem;
}

.manufacturer-logo[b-kfskjdytf4] {
    max-width: 100%;
    max-height: 160px;
    object-fit: contain;
    border-radius: 0.5rem;
}

.manufacturer-logo-placeholder[b-kfskjdytf4] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 160px;
    background: #f8f9fa;
    border-radius: 0.5rem;
    border: 2px dashed #dee2e6;
}

.manufacturer-info[b-kfskjdytf4] {
    padding-left: 2rem;
}

.manufacturer-header[b-kfskjdytf4] {
    margin-bottom: 2rem;
}

.manufacturer-title[b-kfskjdytf4] {
    font-size: 2.5rem;
    font-weight: 700;
    color: #212529;
    margin-bottom: 1rem;
    line-height: 1.2;
}

.manufacturer-meta[b-kfskjdytf4] {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin-bottom: 0;
}

.meta-item[b-kfskjdytf4] {
    display: flex;
    align-items: center;
    font-size: 1rem;
    color: #6c757d;
    font-weight: 500;
}

    .meta-item i[b-kfskjdytf4] {
        color: #007bff;
        font-size: 0.9rem;
    }

.manufacturer-actions[b-kfskjdytf4] {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

    .manufacturer-actions .btn[b-kfskjdytf4] {
        border-radius: 0.75rem;
        font-weight: 600;
        padding: 0.75rem 1.5rem;
    }

/* Content Section */
.manufacturer-content[b-kfskjdytf4] {
    margin-bottom: 3rem;
}

/* Info Cards */
.info-card[b-kfskjdytf4] {
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 1rem;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    height: 100%;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

    .info-card:hover[b-kfskjdytf4] {
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(0,0,0,0.10);
    }

.info-card-header[b-kfskjdytf4] {
    display: flex;
    align-items: center;
    padding: 1.5rem 1.5rem 0;
    margin-bottom: 1rem;
}

.info-card-icon[b-kfskjdytf4] {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #007bff, #0056b3);
    color: white;
    border-radius: 0.75rem;
    font-size: 1.1rem;
    margin-right: 1rem;
    flex-shrink: 0;
}

.info-card-title[b-kfskjdytf4] {
    font-size: 1.25rem;
    font-weight: 600;
    color: #212529;
    margin: 0;
}

.info-card-content[b-kfskjdytf4] {
    padding: 0 1.5rem 1.5rem;
}

/* Info Grid */
.info-grid[b-kfskjdytf4] {
    display: grid;
    gap: 1rem;
}

.info-item[b-kfskjdytf4] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 0;
    border-bottom: 1px solid #f8f9fa;
}

    .info-item:last-child[b-kfskjdytf4] {
        border-bottom: none;
    }

.info-label[b-kfskjdytf4] {
    font-weight: 600;
    color: #495057;
    font-size: 0.9rem;
}

.info-value[b-kfskjdytf4] {
    font-weight: 500;
    color: #212529;
    text-align: right;
}

/* Specialization */
.specialization-title[b-kfskjdytf4] {
    font-size: 1.1rem;
    font-weight: 600;
    color: #495057;
    margin-bottom: 1rem;
}

.tag-container[b-kfskjdytf4] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.industry-tag[b-kfskjdytf4], .robot-type-tag[b-kfskjdytf4] {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1rem;
    background: linear-gradient(135deg, #e3f2fd, #bbdefb);
    color: #1565c0;
    border: 1px solid #90caf9;
    border-radius: 2rem;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
}

.robot-type-tag[b-kfskjdytf4] {
    background: linear-gradient(135deg, #f3e5f5, #e1bee7);
    color: #7b1fa2;
    border-color: #ce93d8;
}

    .industry-tag:hover[b-kfskjdytf4], .robot-type-tag:hover[b-kfskjdytf4] {
        transform: translateY(-1px);
        box-shadow: 0 4px 8px rgba(0,0,0,0.15);
    }

/* Focus Items */
.focus-item[b-kfskjdytf4] {
    margin-bottom: 1.5rem;
}

    .focus-item:last-child[b-kfskjdytf4] {
        margin-bottom: 0;
    }

.focus-title[b-kfskjdytf4] {
    font-size: 1.1rem;
    font-weight: 600;
    color: #495057;
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
}

.focus-text[b-kfskjdytf4] {
    color: #6c757d;
    line-height: 1.6;
    margin-bottom: 0;
}

/* Country Tags */
.country-container[b-kfskjdytf4] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.country-tag[b-kfskjdytf4] {
    display: inline-flex;
    align-items: center;
    padding: 0.4rem 0.8rem;
    background: linear-gradient(135deg, #e8f5e8, #c8e6c9);
    color: #2e7d32;
    border: 1px solid #81c784;
    border-radius: 1.5rem;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Contact Grid */
.contact-grid[b-kfskjdytf4] {
    display: grid;
    gap: 1.5rem;
}

.contact-item[b-kfskjdytf4] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.contact-icon[b-kfskjdytf4] {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8f9fa;
    color: #007bff;
    border-radius: 0.5rem;
    font-size: 0.9rem;
    flex-shrink: 0;
    margin-top: 0.25rem;
}

.contact-content[b-kfskjdytf4] {
    flex: 1;
}

.contact-label[b-kfskjdytf4] {
    font-size: 0.85rem;
    font-weight: 600;
    color: #495057;
    margin-bottom: 0.25rem;
}

.contact-value[b-kfskjdytf4] {
    color: #6c757d;
    line-height: 1.5;
}

    .contact-value a[b-kfskjdytf4] {
        color: #007bff;
        text-decoration: none;
    }

        .contact-value a:hover[b-kfskjdytf4] {
            text-decoration: underline;
        }

/* Robots Section */
.robots-section[b-kfskjdytf4] {
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 1.5rem;
    padding: 2.5rem;
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
}

.robots-header[b-kfskjdytf4] {
    text-align: center;
    margin-bottom: 2.5rem;
}

.robots-title[b-kfskjdytf4] {
    font-size: 2rem;
    font-weight: 700;
    color: #212529;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.robots-subtitle[b-kfskjdytf4] {
    font-size: 1.1rem;
    color: #6c757d;
    margin-bottom: 0;
}

.no-robots[b-kfskjdytf4] {
    text-align: center;
    padding: 3rem 1rem;
    color: #6c757d;
}

/* Robots Grid */
.robots-grid[b-kfskjdytf4] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.5rem;
}

/* Robot Cards */
.robot-card[b-kfskjdytf4] {
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 1rem;
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

    .robot-card:hover[b-kfskjdytf4] {
        transform: translateY(-4px);
        box-shadow: 0 12px 30px rgba(0,0,0,0.15);
        border-color: #007bff;
    }

.robot-card-link[b-kfskjdytf4] {
    text-decoration: none;
    color: inherit;
    display: block;
}

.robot-card-image[b-kfskjdytf4] {
    position: relative;
    height: 200px;
    background: #f8f9fa;
    overflow: hidden;
}

    .robot-card-image img[b-kfskjdytf4] {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.3s ease;
    }

.robot-card:hover .robot-card-image img[b-kfskjdytf4] {
    transform: scale(1.05);
}

.robot-card-placeholder[b-kfskjdytf4] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #f8f9fa, #e9ecef);
    border-bottom: 1px solid #e9ecef;
}

.robot-card-content[b-kfskjdytf4] {
    padding: 1.25rem;
}

.robot-card-header[b-kfskjdytf4] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1rem;
}

.robot-card-title[b-kfskjdytf4] {
    font-size: 1.2rem;
    font-weight: 600;
    color: #212529;
    margin: 0;
    line-height: 1.3;
    flex: 1;
    margin-right: 0.5rem;
}

.robot-card-category[b-kfskjdytf4] {
    background: linear-gradient(135deg, #007bff, #0056b3);
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 1rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    flex-shrink: 0;
}

.robot-card-specs[b-kfskjdytf4] {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1rem;
}

.spec-item[b-kfskjdytf4] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: #6c757d;
    font-weight: 500;
}

.spec-icon[b-kfskjdytf4] {
    color: #007bff;
    font-size: 0.8rem;
}

.robot-card-actions[b-kfskjdytf4] {
    display: flex;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    background: #f8f9fa;
    border-top: 1px solid #e9ecef;
}

    .robot-card-actions .btn[b-kfskjdytf4] {
        flex: 1;
        border-radius: 0.5rem;
        font-weight: 600;
        font-size: 0.85rem;
    }

/* Responsive Design */
@media (max-width: 1200px) {
    .robots-grid[b-kfskjdytf4] {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    }
}

@media (max-width: 992px) {
    .manufacturer-hero[b-kfskjdytf4] {
        padding: 2rem;
    }

    .manufacturer-info[b-kfskjdytf4] {
        padding-left: 0;
        margin-top: 1.5rem;
    }

    .manufacturer-title[b-kfskjdytf4] {
        font-size: 2rem;
    }

    .robots-title[b-kfskjdytf4] {
        font-size: 1.75rem;
        flex-direction: column;
        gap: 0.5rem;
    }

    .robots-grid[b-kfskjdytf4] {
        grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
        gap: 1rem;
    }

    .info-card-header[b-kfskjdytf4] {
        padding: 1.25rem 1.25rem 0;
    }

    .info-card-content[b-kfskjdytf4] {
        padding: 0 1.25rem 1.25rem;
    }
}

@media (max-width: 768px) {
    .manufacturer-hero[b-kfskjdytf4] {
        padding: 1.5rem;
    }

    .manufacturer-title[b-kfskjdytf4] {
        font-size: 1.75rem;
    }

    .manufacturer-meta[b-kfskjdytf4] {
        flex-direction: column;
        gap: 0.75rem;
    }

    .manufacturer-actions[b-kfskjdytf4] {
        width: 100%;
    }

        .manufacturer-actions .btn[b-kfskjdytf4] {
            flex: 1;
            text-align: center;
        }

    .robots-section[b-kfskjdytf4] {
        padding: 2rem 1.5rem;
    }

    .robots-grid[b-kfskjdytf4] {
        grid-template-columns: 1fr;
    }

    .info-grid[b-kfskjdytf4] {
        gap: 0.75rem;
    }

    .info-item[b-kfskjdytf4] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
    }

    .info-value[b-kfskjdytf4] {
        text-align: left;
    }

    .contact-grid[b-kfskjdytf4] {
        gap: 1.25rem;
    }
}

@media (max-width: 576px) {
    .manufacturer-logo-container[b-kfskjdytf4] {
        min-height: 160px;
        padding: 1.5rem;
    }

    .manufacturer-logo[b-kfskjdytf4] {
        max-height: 120px;
    }

    .robots-title[b-kfskjdytf4] {
        font-size: 1.5rem;
    }

    .robot-card-actions[b-kfskjdytf4] {
        flex-direction: column;
    }

        .robot-card-actions .btn[b-kfskjdytf4] {
            flex: none;
        }
}

/* Animation Classes */
@keyframes fadeInUp-b-kfskjdytf4 {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.info-card[b-kfskjdytf4] {
    animation: fadeInUp-b-kfskjdytf4 0.6s ease forwards;
}

.robot-card[b-kfskjdytf4] {
    animation: fadeInUp-b-kfskjdytf4 0.6s ease forwards;
}

/* Loading States */
.text-center .spinner-border[b-kfskjdytf4] {
    width: 2rem;
    height: 2rem;
}

/* Focus States */
.btn:focus[b-kfskjdytf4],
.robot-card-link:focus[b-kfskjdytf4] {
    outline: 2px solid #0d6efd;
    outline-offset: 2px;
}

/* Print Styles */
@media print {
    .manufacturer-actions[b-kfskjdytf4],
    .robot-card-actions[b-kfskjdytf4] {
        display: none;
    }

    .info-card[b-kfskjdytf4] {
        break-inside: avoid;
        box-shadow: none;
        border: 1px solid #dee2e6;
    }

    .robot-card[b-kfskjdytf4] {
        break-inside: avoid;
        box-shadow: none;
    }
}
/* Füge diese Regeln am Ende der bestehenden CSS-Datei hinzu: */

/* Breadcrumb Styling */
.breadcrumb[b-kfskjdytf4] {
    background: transparent;
    padding: 0.5rem 0;
    margin-bottom: 1.5rem;
    font-size: 0.9rem;
}

.breadcrumb-item + .breadcrumb-item[b-kfskjdytf4]::before {
    content: "›";
    color: #6c757d;
}

.breadcrumb-item a[b-kfskjdytf4] {
    color: #007bff;
    text-decoration: none;
}

    .breadcrumb-item a:hover[b-kfskjdytf4] {
        text-decoration: underline;
    }

.breadcrumb-item.active[b-kfskjdytf4] {
    color: #6c757d;
}

/* Definition List Styling */
dl.info-grid[b-kfskjdytf4] {
    margin: 0;
}

dt.info-label[b-kfskjdytf4] {
    font-weight: 600;
    color: #495057;
    font-size: 0.9rem;
}

dd.info-value[b-kfskjdytf4] {
    font-weight: 500;
    color: #212529;
    text-align: right;
    margin: 0;
}

/* Address Styling */
address.contact-value[b-kfskjdytf4] {
    font-style: normal;
    margin: 0;
}

/* Enhanced Focus States */
.btn:focus-visible[b-kfskjdytf4],
.robot-card-link:focus-visible[b-kfskjdytf4],
.manufacturer-actions a:focus-visible[b-kfskjdytf4] {
    outline: 2px solid #0d6efd;
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(13, 110, 253, 0.25);
}

.info-card:focus-within[b-kfskjdytf4] {
    outline: 2px solid #0d6efd;
    outline-offset: 2px;
}

/* Accessibility: Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    .info-card[b-kfskjdytf4],
    .robot-card[b-kfskjdytf4],
    .manufacturer-hero[b-kfskjdytf4],
    .btn[b-kfskjdytf4],
    .robot-card-image img[b-kfskjdytf4] {
        animation: none;
        transition: none;
    }

        .info-card:hover[b-kfskjdytf4],
        .robot-card:hover[b-kfskjdytf4] {
            transform: none;
        }
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
    .info-card[b-kfskjdytf4],
    .robot-card[b-kfskjdytf4],
    .manufacturer-hero[b-kfskjdytf4] {
        border-width: 2px;
    }

    .btn[b-kfskjdytf4] {
        border-width: 2px;
    }

    .info-card-icon[b-kfskjdytf4] {
        border: 2px solid currentColor;
    }
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
    .manufacturer-detail[b-kfskjdytf4] {
        background: #1a1a1a;
    }

    .manufacturer-hero[b-kfskjdytf4],
    .info-card[b-kfskjdytf4],
    .robots-section[b-kfskjdytf4] {
        background: #2d2d2d;
        border-color: #404040;
    }

    .manufacturer-title[b-kfskjdytf4],
    .info-card-title[b-kfskjdytf4],
    .robots-title[b-kfskjdytf4] {
        color: #f9fafb;
    }

    .manufacturer-logo-container[b-kfskjdytf4],
    .robot-card[b-kfskjdytf4] {
        background: #2d2d2d;
        border-color: #404040;
    }

    .info-label[b-kfskjdytf4],
    .contact-label[b-kfskjdytf4] {
        color: #d1d5db;
    }

    .info-value[b-kfskjdytf4],
    .contact-value[b-kfskjdytf4] {
        color: #f9fafb;
    }

    .focus-text[b-kfskjdytf4],
    .robots-subtitle[b-kfskjdytf4] {
        color: #d1d5db;
    }
}

/* Print Styles - Enhanced */
@media print {
    .manufacturer-actions[b-kfskjdytf4],
    .robot-card-actions[b-kfskjdytf4],
    .breadcrumb[b-kfskjdytf4] {
        display: none !important;
    }

    .manufacturer-detail[b-kfskjdytf4] {
        background: white;
    }

    .info-card[b-kfskjdytf4],
    .robot-card[b-kfskjdytf4] {
        break-inside: avoid;
        box-shadow: none;
        border: 1px solid #dee2e6;
        page-break-inside: avoid;
    }

    .robots-section[b-kfskjdytf4] {
        page-break-before: always;
    }

    .manufacturer-hero[b-kfskjdytf4] {
        page-break-after: avoid;
    }
}

/* Loading Animation Enhancement */
@keyframes pulse-b-kfskjdytf4 {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

.spinner-border[b-kfskjdytf4] {
    animation: spinner-border 0.75s linear infinite, pulse-b-kfskjdytf4 2s ease-in-out infinite;
}

/* Skip to Content Link (for keyboard navigation) */
.skip-to-content[b-kfskjdytf4] {
    position: absolute;
    top: -40px;
    left: 0;
    background: #007bff;
    color: white;
    padding: 8px;
    text-decoration: none;
    z-index: 100;
}

    .skip-to-content:focus[b-kfskjdytf4] {
        top: 0;
    }
/* _content/BotomixNew/Components/Pages/Manufacturers.razor.rz.scp.css */
/* ========================================
   MANUFACTURERS PAGE - MODERN DESIGN
   ======================================== */

/* Container */
.manufacturers-page[b-m4kegpxdgs] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 2rem 1.5rem 4rem;
}

/* ========================================
   BREADCRUMB NAVIGATION
   ======================================== */
.breadcrumb-nav[b-m4kegpxdgs] {
    margin-bottom: 1.5rem;
}

.breadcrumb[b-m4kegpxdgs] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    padding: 0;
    margin: 0;
    list-style: none;
    font-size: 0.875rem;
}

.breadcrumb-item[b-m4kegpxdgs] {
    display: flex;
    align-items: center;
    color: #6b7280;
}

    .breadcrumb-item a[b-m4kegpxdgs] {
        display: flex;
        align-items: center;
        color: #0066cc;
        text-decoration: none;
        transition: color 0.2s;
    }

        .breadcrumb-item a:hover[b-m4kegpxdgs] {
            color: #0052a3;
        }

    .breadcrumb-item + .breadcrumb-item[b-m4kegpxdgs]::before {
        content: "›";
        margin: 0 0.5rem;
        color: #d1d5db;
        font-weight: 300;
    }

    .breadcrumb-item.active[b-m4kegpxdgs] {
        color: #374151;
        font-weight: 500;
    }

/* ========================================
   PAGE HEADER
   ======================================== */
.page-header[b-m4kegpxdgs] {
    margin-bottom: 2rem;
}

    .page-header h1[b-m4kegpxdgs] {
        font-size: 2rem;
        font-weight: 700;
        color: #111827;
        margin: 0 0 0.5rem 0;
        line-height: 1.2;
    }

    .page-header .subtitle[b-m4kegpxdgs] {
        font-size: 1rem;
        color: #6b7280;
        margin: 0;
        line-height: 1.5;
    }

        .page-header .subtitle strong[b-m4kegpxdgs] {
            color: #374151;
            font-weight: 600;
        }

/* ========================================
   MODERN FILTER BAR
   ======================================== */
.filter-bar[b-m4kegpxdgs] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 1rem 1.25rem;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    margin-bottom: 2rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.filter-bar-left[b-m4kegpxdgs] {
    flex: 1;
    max-width: 500px;
}

.filter-bar-right[b-m4kegpxdgs] {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-shrink: 0;
}

/* Search Wrapper mit Icon */
.search-wrapper[b-m4kegpxdgs] {
    position: relative;
    display: flex;
    align-items: center;
}

.search-icon[b-m4kegpxdgs] {
    position: absolute;
    left: 1rem;
    color: #9ca3af;
    pointer-events: none;
}

.search-input[b-m4kegpxdgs] {
    width: 100%;
    height: 44px;
    padding: 0 1rem 0 2.75rem;
    font-size: 0.9375rem;
    color: #111827;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    transition: all 0.2s ease;
}

    .search-input[b-m4kegpxdgs]::placeholder {
        color: #9ca3af;
    }

    .search-input:focus[b-m4kegpxdgs] {
        outline: none;
        background: #ffffff;
        border-color: #0066cc;
        box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.1);
    }

/* Filter Group */
.filter-group[b-m4kegpxdgs] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

.filter-label[b-m4kegpxdgs] {
    font-size: 0.875rem;
    font-weight: 500;
    color: #6b7280;
    white-space: nowrap;
}

.filter-select[b-m4kegpxdgs] {
    height: 44px;
    padding: 0 2.5rem 0 0.875rem;
    font-size: 0.9375rem;
    font-weight: 500;
    color: #374151;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 20 20' fill='%236b7280'%3E%3Cpath fill-rule='evenodd' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z' clip-rule='evenodd'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.625rem center;
    background-size: 16px;
    transition: all 0.2s ease;
    min-width: 85px;
    pointer-events: auto;
}

    .filter-select:hover[b-m4kegpxdgs] {
        background-color: #ffffff;
        border-color: #d1d5db;
    }

    .filter-select:focus[b-m4kegpxdgs] {
        outline: none;
        background-color: #ffffff;
        border-color: #0066cc;
        box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.1);
    }

    .filter-select option[b-m4kegpxdgs] {
        background: #ffffff;
        color: #374151;
    }

/* Results Badge */
.results-badge[b-m4kegpxdgs] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    height: 44px;
    padding: 0 1rem;
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-size: 0.875rem;
    color: #374151;
    white-space: nowrap;
}

    .results-badge strong[b-m4kegpxdgs] {
        font-weight: 600;
        color: #111827;
    }

/* ========================================
   MANUFACTURERS GRID
   ======================================== */
.manufacturers-grid[b-m4kegpxdgs] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.5rem;
    margin-bottom: 3rem;
}

/* ========================================
   MANUFACTURER CARD
   ======================================== */
.manufacturer-card[b-m4kegpxdgs] {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.25s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

    .manufacturer-card:hover[b-m4kegpxdgs] {
        transform: translateY(-4px);
        box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
        border-color: #0066cc;
    }

.card-link[b-m4kegpxdgs] {
    display: block;
    text-decoration: none;
    color: inherit;
}

    .card-link:focus[b-m4kegpxdgs] {
        outline: 2px solid #0066cc;
        outline-offset: 2px;
    }

/* Card Image Area */
.card-image[b-m4kegpxdgs] {
    height: 180px;
    background: #f9fafb;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    border-bottom: 1px solid #f3f4f6;
}

.logo-img[b-m4kegpxdgs] {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    transition: transform 0.3s ease;
}

.manufacturer-card:hover .logo-img[b-m4kegpxdgs] {
    transform: scale(1.05);
}

.logo-placeholder[b-m4kegpxdgs] {
    width: 90px;
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 50%;
    color: #ffffff;
    font-size: 2.5rem;
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

/* Card Content */
.card-content[b-m4kegpxdgs] {
    padding: 1.25rem;
}

    .card-content h2[b-m4kegpxdgs] {
        font-size: 1.125rem;
        font-weight: 600;
        color: #111827;
        margin: 0 0 0.625rem 0;
        line-height: 1.4;
        transition: color 0.2s;
    }

.manufacturer-card:hover h2[b-m4kegpxdgs] {
    color: #0066cc;
}

.card-location[b-m4kegpxdgs] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.875rem;
    color: #6b7280;
    margin-bottom: 0.75rem;
}

    .card-location svg[b-m4kegpxdgs] {
        flex-shrink: 0;
        opacity: 0.7;
    }

.card-tags[b-m4kegpxdgs] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.tag[b-m4kegpxdgs] {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.625rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: #374151;
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    white-space: nowrap;
    transition: all 0.2s;
}

.manufacturer-card:hover .tag[b-m4kegpxdgs] {
    background: #e0f2fe;
    border-color: #bae6fd;
    color: #0369a1;
}

.tag-more[b-m4kegpxdgs] {
    background: #0066cc;
    color: #ffffff;
    border-color: #0066cc;
}

/* ========================================
   PAGINATION
   ======================================== */
.pagination[b-m4kegpxdgs] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 3rem;
}

.pagination-btn[b-m4kegpxdgs] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    height: 44px;
    padding: 0 1.25rem;
    font-size: 0.9375rem;
    font-weight: 500;
    color: #374151;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    pointer-events: auto;
}

    .pagination-btn:hover:not(:disabled)[b-m4kegpxdgs] {
        background: #f9fafb;
        border-color: #0066cc;
        color: #0066cc;
    }

    .pagination-btn:disabled[b-m4kegpxdgs] {
        opacity: 0.4;
        cursor: not-allowed;
        pointer-events: none;
    }

    .pagination-btn svg[b-m4kegpxdgs] {
        width: 20px;
        height: 20px;
        pointer-events: none;
    }

.pagination-info[b-m4kegpxdgs] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0 1rem;
    font-size: 0.9375rem;
    color: #6b7280;
}

.current-page[b-m4kegpxdgs] {
    font-weight: 600;
    color: #111827;
}

.page-separator[b-m4kegpxdgs] {
    color: #d1d5db;
}

.total-pages[b-m4kegpxdgs] {
    font-weight: 500;
    color: #374151;
}

/* ========================================
   LOADING & ALERT STATES
   ======================================== */
.loading-state[b-m4kegpxdgs] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
}

.spinner[b-m4kegpxdgs] {
    width: 48px;
    height: 48px;
    border: 4px solid #f3f4f6;
    border-top-color: #0066cc;
    border-radius: 50%;
    animation: spin-b-m4kegpxdgs 0.8s linear infinite;
}

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

.loading-state p[b-m4kegpxdgs] {
    margin-top: 1rem;
    font-size: 0.9375rem;
    color: #6b7280;
}

/* Alert Boxes */
.alert[b-m4kegpxdgs] {
    display: flex;
    gap: 1rem;
    padding: 1.25rem;
    border-radius: 12px;
    margin-bottom: 2rem;
}

.alert-error[b-m4kegpxdgs] {
    background: #fef2f2;
    border: 1px solid #fecaca;
}

.alert-warning[b-m4kegpxdgs] {
    background: #fffbeb;
    border: 1px solid #fde68a;
}

.alert-icon[b-m4kegpxdgs] {
    font-size: 1.5rem;
    flex-shrink: 0;
}

.alert-content h3[b-m4kegpxdgs] {
    font-size: 1rem;
    font-weight: 600;
    color: #111827;
    margin: 0 0 0.5rem 0;
}

.alert-content p[b-m4kegpxdgs] {
    font-size: 0.9375rem;
    color: #6b7280;
    margin: 0 0 0.75rem 0;
}

    .alert-content p:last-child[b-m4kegpxdgs] {
        margin-bottom: 0;
    }

/* Buttons */
.btn[b-m4kegpxdgs] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    height: 40px;
    padding: 0 1.25rem;
    font-size: 0.9375rem;
    font-weight: 500;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
}

.btn-primary[b-m4kegpxdgs] {
    color: #ffffff;
    background: #0066cc;
    border: 1px solid #0066cc;
}

    .btn-primary:hover[b-m4kegpxdgs] {
        background: #0052a3;
        border-color: #0052a3;
    }

.btn-outline[b-m4kegpxdgs] {
    color: #374151;
    background: #ffffff;
    border: 1px solid #e5e7eb;
}

    .btn-outline:hover[b-m4kegpxdgs] {
        background: #f9fafb;
        border-color: #d1d5db;
    }

/* ========================================
   RESPONSIVE DESIGN
   ======================================== */
@media (max-width: 1024px) {
    .manufacturers-grid[b-m4kegpxdgs] {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    }
}

@media (max-width: 768px) {
    .manufacturers-page[b-m4kegpxdgs] {
        padding: 1.5rem 1rem 3rem;
    }

    .page-header h1[b-m4kegpxdgs] {
        font-size: 1.75rem;
    }

    .filter-bar[b-m4kegpxdgs] {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
        padding: 1rem;
    }

    .filter-bar-left[b-m4kegpxdgs] {
        max-width: none;
    }

    .filter-bar-right[b-m4kegpxdgs] {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }

    .filter-group[b-m4kegpxdgs] {
        justify-content: space-between;
    }

    .results-badge[b-m4kegpxdgs] {
        justify-content: center;
    }

    .manufacturers-grid[b-m4kegpxdgs] {
        grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
        gap: 1rem;
    }

    .pagination[b-m4kegpxdgs] {
        flex-wrap: wrap;
        gap: 0.75rem;
    }

    .pagination-info[b-m4kegpxdgs] {
        order: -1;
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .manufacturers-page[b-m4kegpxdgs] {
        padding: 1rem 0.75rem 2rem;
    }

    .page-header h1[b-m4kegpxdgs] {
        font-size: 1.5rem;
    }

    .manufacturers-grid[b-m4kegpxdgs] {
        grid-template-columns: 1fr;
    }

    .card-image[b-m4kegpxdgs] {
        height: 160px;
    }

    .pagination-btn[b-m4kegpxdgs] {
        flex: 1;
    }
}

/* ========================================
   ACCESSIBILITY & MOTION
   ======================================== */
@media (prefers-reduced-motion: reduce) {
    .manufacturer-card[b-m4kegpxdgs],
    .pagination-btn[b-m4kegpxdgs],
    .search-input[b-m4kegpxdgs],
    .filter-select[b-m4kegpxdgs],
    .logo-img[b-m4kegpxdgs] {
        transition: none;
    }

        .manufacturer-card:hover[b-m4kegpxdgs] {
            transform: none;
        }

    .spinner[b-m4kegpxdgs] {
        animation: none;
    }
}

@media (prefers-contrast: high) {
    .manufacturer-card[b-m4kegpxdgs] {
        border-width: 2px;
    }

    .filter-bar[b-m4kegpxdgs] {
        border-width: 2px;
    }
}

/* Focus Visible */
*:focus-visible[b-m4kegpxdgs] {
    outline: 2px solid #0066cc;
    outline-offset: 2px;
}

/* Selection */
[b-m4kegpxdgs]::selection {
    background-color: rgba(0, 102, 204, 0.2);
    color: inherit;
}
/* _content/BotomixNew/Components/Pages/Quote.razor.rz.scp.css */
/* ==================== Base Styles ==================== */
.quote-page[b-djbu3p09w7] {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 50%, #f1f3f4 100%);
    min-height: 100vh;
    padding: 3rem 2rem;
}

/* ==================== Header Styles ==================== */
.quote-header[b-djbu3p09w7] {
    text-align: center;
    margin-bottom: 3rem;
    animation: fadeInDown-b-djbu3p09w7 0.6s ease;
}

.quote-header-icon[b-djbu3p09w7] {
    width: 80px;
    height: 80px;
    margin: 0 auto 1.5rem;
    background: linear-gradient(135deg, #0066ff 0%, #0052cc 100%);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 20px rgba(0, 102, 255, 0.3);
    animation: float-b-djbu3p09w7 3s ease-in-out infinite;
}

    .quote-header-icon i[b-djbu3p09w7] {
        font-size: 2.5rem;
        color: white;
    }

@keyframes float-b-djbu3p09w7 {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

.quote-header h1[b-djbu3p09w7] {
    font-size: clamp(2rem, 5vw, 2.8rem);
    font-weight: 700;
    color: #111827;
    margin-bottom: 1rem;
}

.quote-header .lead[b-djbu3p09w7] {
    font-size: clamp(1rem, 2.5vw, 1.2rem);
    color: #6b7280;
    margin-bottom: 0;
}

/* Required Note - jetzt unten im Formular */
.required-note[b-djbu3p09w7] {
    font-size: 0.9rem;
    color: #6b7280;
    margin: 0;
    padding-top: 1rem;
    border-top: 1px solid #e9ecef;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

    .required-note i[b-djbu3p09w7] {
        color: #0066ff;
    }

    .required-note .text-danger[b-djbu3p09w7] {
        font-weight: 700;
    }

/* ==================== Alert Styles ==================== */
.alert[b-djbu3p09w7] {
    border-radius: 16px;
    border: 2px solid #e9ecef;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    margin-bottom: 2rem;
    animation: slideInUp-b-djbu3p09w7 0.5s ease;
    display: flex;
    align-items: start;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    background: white;
}

.alert-icon[b-djbu3p09w7] {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1.5rem;
    background: linear-gradient(135deg, #0066ff, #0052cc);
    color: white;
    box-shadow: 0 4px 15px rgba(0, 102, 255, 0.25);
}

.alert-content[b-djbu3p09w7] {
    flex: 1;
}

    .alert-content strong[b-djbu3p09w7] {
        display: block;
        font-size: 1.1rem;
        margin-bottom: 0.25rem;
        color: #111827;
    }

    .alert-content p[b-djbu3p09w7],
    .alert-content span[b-djbu3p09w7] {
        margin: 0;
        color: #6b7280;
    }

    .alert-content ul[b-djbu3p09w7] {
        margin: 0.5rem 0 0;
        padding-left: 1.25rem;
    }

    .alert-content li[b-djbu3p09w7] {
        margin-bottom: 0.25rem;
    }

.alert-info[b-djbu3p09w7] {
    border-color: #0066ff;
}

.alert-danger[b-djbu3p09w7] {
    border-color: #dc3545;
}

    .alert-danger .alert-icon[b-djbu3p09w7] {
        background: linear-gradient(135deg, #dc3545, #c82333);
        box-shadow: 0 4px 15px rgba(220, 53, 69, 0.25);
    }

.robot-selection[b-djbu3p09w7] {
    animation: slideInDown-b-djbu3p09w7 0.5s ease;
}

/* ==================== Form Card Styles ==================== */
.form-card[b-djbu3p09w7] {
    border-radius: 20px;
    border: 1px solid #e9ecef;
    box-shadow: 0 8px 30px rgba(0,0,0,0.08);
    overflow: hidden;
    background: white;
    animation: fadeInUp-b-djbu3p09w7 0.6s ease 0.2s both;
}

    .form-card .card-body[b-djbu3p09w7] {
        padding: 2.5rem;
    }

.form-section-header[b-djbu3p09w7] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding-bottom: 1.5rem;
    margin-bottom: 2rem;
    border-bottom: 2px solid #f0f0f0;
}

    .form-section-header i[b-djbu3p09w7] {
        font-size: 1.5rem;
        color: #0066ff;
    }

    .form-section-header h2[b-djbu3p09w7] {
        margin: 0;
        font-weight: 700;
        color: #111827;
    }

/* ==================== Form Group Styles ==================== */
.form-group[b-djbu3p09w7] {
    margin-bottom: 0;
}

.form-label[b-djbu3p09w7] {
    font-weight: 600;
    color: #111827;
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    font-size: 0.95rem;
}

    .form-label i[b-djbu3p09w7] {
        color: #0066ff;
        font-size: 0.9rem;
    }

    .form-label .text-danger[b-djbu3p09w7] {
        font-weight: 700;
        margin-left: 0.25rem;
        color: #dc3545;
    }

.form-control[b-djbu3p09w7],
.form-select[b-djbu3p09w7] {
    border-radius: 12px;
    border: 2px solid #e9ecef;
    padding: 0.875rem 1.125rem;
    font-size: 1rem;
    transition: all 0.3s ease;
    background: #f8f9fa;
}

    .form-control:hover[b-djbu3p09w7],
    .form-select:hover[b-djbu3p09w7] {
        border-color: #d1d9e6;
        background: white;
    }

    .form-control:focus[b-djbu3p09w7],
    .form-select:focus[b-djbu3p09w7] {
        border-color: #0066ff;
        box-shadow: 0 0 0 4px rgba(0, 102, 255, 0.1);
        background: white;
        outline: none;
    }

    .form-control[b-djbu3p09w7]::placeholder {
        color: #a0aec0;
    }

    /* Invalid State */
    .form-control.is-invalid[b-djbu3p09w7],
    .form-select.is-invalid[b-djbu3p09w7] {
        border-color: #dc3545;
        background: #fff5f5;
        padding-right: calc(1.5em + 1.25rem);
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
        background-repeat: no-repeat;
        background-position: right calc(0.375em + 0.3125rem) center;
        background-size: calc(0.75em + 0.625rem) calc(0.75em + 0.625rem);
        animation: shake-b-djbu3p09w7 0.4s ease;
    }

        .form-control.is-invalid:focus[b-djbu3p09w7],
        .form-select.is-invalid:focus[b-djbu3p09w7] {
            border-color: #dc3545;
            box-shadow: 0 0 0 4px rgba(220, 53, 69, 0.1);
        }

@keyframes shake-b-djbu3p09w7 {
    0%, 100% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-5px);
    }

    75% {
        transform: translateX(5px);
    }
}

.invalid-feedback[b-djbu3p09w7] {
    font-size: 0.875rem;
    color: #dc3545;
    margin-top: 0.5rem;
    display: flex;
    align-items: center;
    font-weight: 500;
    animation: slideInLeft-b-djbu3p09w7 0.3s ease;
}

    .invalid-feedback i[b-djbu3p09w7] {
        font-size: 0.9em;
        margin-right: 0.25rem;
    }

/* ==================== Button Styles ==================== */
.quote-actions[b-djbu3p09w7] {
    display: flex;
    gap: 1rem;
    margin-top: 2.5rem;
    justify-content: center;
    animation: fadeInUp-b-djbu3p09w7 0.6s ease 0.4s both;
}

    .quote-actions .btn[b-djbu3p09w7] {
        min-width: 220px;
        font-weight: 600;
        padding: 1rem 2rem;
        border-radius: 12px;
        font-size: 1.05rem;
        transition: all 0.3s ease;
        border: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
    }

.btn-primary[b-djbu3p09w7] {
    background: linear-gradient(135deg, #0066ff 0%, #0052cc 100%);
    color: white;
    box-shadow: 0 4px 15px rgba(0, 102, 255, 0.3);
}

    .btn-primary:hover[b-djbu3p09w7] {
        transform: translateY(-2px);
        box-shadow: 0 6px 25px rgba(0, 102, 255, 0.4);
        background: #0052cc;
    }

    .btn-primary:active[b-djbu3p09w7] {
        transform: translateY(-1px);
    }

    .btn-primary:disabled[b-djbu3p09w7] {
        transform: none;
        opacity: 0.7;
        cursor: not-allowed;
    }

    .btn-primary:focus-visible[b-djbu3p09w7] {
        outline: 2px solid #ffd700;
        outline-offset: 2px;
    }

.btn-outline-secondary[b-djbu3p09w7] {
    background: white;
    color: #0066ff;
    border: 2px solid #0066ff;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
}

    .btn-outline-secondary:hover[b-djbu3p09w7] {
        background: #0066ff;
        color: white;
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(0, 102, 255, 0.3);
    }

    .btn-outline-secondary:focus-visible[b-djbu3p09w7] {
        outline: 2px solid #ffd700;
        outline-offset: 2px;
    }

/* ==================== Success State ==================== */
.quote-success[b-djbu3p09w7] {
    text-align: center;
    padding: 4rem 2rem;
    background: white;
    border-radius: 20px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.08);
    border: 1px solid #e9ecef;
    animation: zoomIn-b-djbu3p09w7 0.6s ease;
}

@keyframes zoomIn-b-djbu3p09w7 {
    from {
        opacity: 0;
        transform: scale(0.95);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.success-icon-wrapper[b-djbu3p09w7] {
    position: relative;
    display: inline-block;
    margin-bottom: 2rem;
}

.success-icon[b-djbu3p09w7] {
    font-size: 6rem;
    color: #10b981;
    animation: successPop-b-djbu3p09w7 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    position: relative;
    z-index: 2;
}

@keyframes successPop-b-djbu3p09w7 {
    0% {
        transform: scale(0);
        opacity: 0;
    }

    50% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.success-particles[b-djbu3p09w7] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(16,185,129,0.2) 0%, transparent 70%);
    animation: pulse-b-djbu3p09w7 2s ease-in-out infinite;
}

@keyframes pulse-b-djbu3p09w7 {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }

    50% {
        transform: translate(-50%, -50%) scale(1.2);
        opacity: 0.5;
    }
}

.success-title[b-djbu3p09w7] {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 700;
    color: #111827;
    margin-bottom: 1.25rem;
    animation: fadeInUp-b-djbu3p09w7 0.6s ease 0.2s both;
}

.success-message[b-djbu3p09w7] {
    font-size: clamp(1rem, 2vw, 1.15rem);
    color: #6b7280;
    margin-bottom: 2.5rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.7;
    animation: fadeInUp-b-djbu3p09w7 0.6s ease 0.3s both;
}

    .success-message strong[b-djbu3p09w7] {
        color: #0066ff;
        font-weight: 600;
    }

.success-details[b-djbu3p09w7] {
    display: flex;
    gap: 2rem;
    justify-content: center;
    margin-bottom: 2.5rem;
    flex-wrap: wrap;
    animation: fadeInUp-b-djbu3p09w7 0.6s ease 0.4s both;
}

.success-detail-item[b-djbu3p09w7] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    background: #f8f9fa;
    border-radius: 12px;
    color: #4a5568;
    font-weight: 500;
    border: 1px solid #e9ecef;
}

    .success-detail-item i[b-djbu3p09w7] {
        font-size: 1.5rem;
        color: #0066ff;
    }

.success-actions[b-djbu3p09w7] {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
    animation: fadeInUp-b-djbu3p09w7 0.6s ease 0.5s both;
}

    .success-actions .btn[b-djbu3p09w7] {
        min-width: 220px;
    }

/* ==================== Animations ==================== */
@keyframes fadeInDown-b-djbu3p09w7 {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInUp-b-djbu3p09w7 {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInUp-b-djbu3p09w7 {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInDown-b-djbu3p09w7 {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInLeft-b-djbu3p09w7 {
    from {
        opacity: 0;
        transform: translateX(-10px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ==================== Responsive Design ==================== */
@media (max-width: 768px) {
    .quote-page[b-djbu3p09w7] {
        padding: 2rem 1.25rem;
    }

    .quote-header-icon[b-djbu3p09w7] {
        width: 60px;
        height: 60px;
        margin-bottom: 1rem;
    }

        .quote-header-icon i[b-djbu3p09w7] {
            font-size: 2rem;
        }

    .quote-header[b-djbu3p09w7] {
        margin-bottom: 2rem;
    }

    .form-card .card-body[b-djbu3p09w7] {
        padding: 1.5rem;
    }

    .quote-actions[b-djbu3p09w7] {
        flex-direction: column;
    }

        .quote-actions .btn[b-djbu3p09w7] {
            width: 100%;
            min-width: auto;
        }

    .success-icon[b-djbu3p09w7] {
        font-size: 4rem;
    }

    .success-details[b-djbu3p09w7] {
        flex-direction: column;
        gap: 1rem;
    }

    .success-detail-item[b-djbu3p09w7] {
        width: 100%;
        justify-content: center;
    }

    .success-actions[b-djbu3p09w7] {
        flex-direction: column;
    }

        .success-actions .btn[b-djbu3p09w7] {
            width: 100%;
        }
}

@media (max-width: 576px) {
    .quote-page[b-djbu3p09w7] {
        padding: 2rem 1rem;
    }

    .form-section-header[b-djbu3p09w7] {
        font-size: 0.9rem;
    }

        .form-section-header i[b-djbu3p09w7] {
            font-size: 1.2rem;
        }

    .form-label[b-djbu3p09w7] {
        font-size: 0.875rem;
    }

    .form-control[b-djbu3p09w7],
    .form-select[b-djbu3p09w7] {
        font-size: 0.95rem;
        padding: 0.75rem 1rem;
    }

    .form-card .card-body[b-djbu3p09w7] {
        padding: 1.25rem;
    }

    .quote-success[b-djbu3p09w7] {
        padding: 3rem 1.5rem;
    }

    .required-note[b-djbu3p09w7] {
        font-size: 0.85rem;
    }
}

/* ==================== Accessibility ==================== */
.form-control:focus-visible[b-djbu3p09w7],
.form-select:focus-visible[b-djbu3p09w7],
.btn:focus-visible[b-djbu3p09w7] {
    outline: 2px solid #ffd700;
    outline-offset: 2px;
}

/* ==================== Loading Animation ==================== */
.spinner-border[b-djbu3p09w7] {
    vertical-align: middle;
}

/* Accessibility: Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    .quote-header[b-djbu3p09w7],
    .form-card[b-djbu3p09w7],
    .alert[b-djbu3p09w7],
    .robot-selection[b-djbu3p09w7],
    .success-icon[b-djbu3p09w7],
    .success-particles[b-djbu3p09w7],
    .btn[b-djbu3p09w7],
    .btn-primary[b-djbu3p09w7],
    .btn-outline-secondary[b-djbu3p09w7] {
        animation: none;
        transition: none;
    }

        .btn:hover[b-djbu3p09w7],
        .btn-primary:hover[b-djbu3p09w7],
        .btn-outline-secondary:hover[b-djbu3p09w7] {
            transform: none;
        }

    .quote-header-icon[b-djbu3p09w7] {
        animation: none;
    }
}

/* High Contrast Mode */
@media (prefers-contrast: high) {
    .form-card[b-djbu3p09w7],
    .alert[b-djbu3p09w7],
    .quote-success[b-djbu3p09w7] {
        border-width: 3px;
    }

    .btn[b-djbu3p09w7],
    .btn-primary[b-djbu3p09w7],
    .btn-outline-secondary[b-djbu3p09w7] {
        border: 2px solid currentColor;
    }
}

/* Print Styles */
@media print {
    .quote-page[b-djbu3p09w7] {
        background: white;
        padding: 1rem;
    }

    .quote-actions[b-djbu3p09w7] {
        display: none;
    }

    .form-card[b-djbu3p09w7],
    .quote-success[b-djbu3p09w7] {
        box-shadow: none !important;
        border: 1px solid #ddd;
    }

    .quote-header-icon[b-djbu3p09w7] {
        animation: none;
    }
}
/* _content/BotomixNew/Components/Pages/ReviewForm.razor.rz.scp.css */
/* ========================================
   REVIEW FORM - CLEAN & PROFESSIONAL
   ======================================== */

.modal.show[b-px6bt8axei] {
    background: rgba(0, 0, 0, 0.5);
}

.modal-content[b-px6bt8axei] {
    border-radius: 16px;
    border: none;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
}

/* Modal Header - CLEAN */
.modal-header[b-px6bt8axei] {
    background: white;
    border-bottom: 1px solid #e5e7eb;
    border-radius: 16px 16px 0 0;
    padding: 1.5rem 2rem;
}

.modal-title[b-px6bt8axei] {
    font-weight: 700;
    font-size: 1.5rem;
    color: #1f2937;
}

.btn-close[b-px6bt8axei] {
    opacity: 0.5;
    transition: all 0.2s ease;
}

    .btn-close:hover[b-px6bt8axei] {
        opacity: 1;
        transform: scale(1.1);
    }

/* Modal Body */
.modal-body[b-px6bt8axei] {
    padding: 2rem;
    background: white;
}

/* Star Rating - CLEAN & MINIMAL */
.rb-star-rating[b-px6bt8axei] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    background: #fafafa;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    margin-bottom: 1.5rem;
}

.rb-star-buttons[b-px6bt8axei] {
    display: flex;
    gap: 0.5rem;
}

.rb-star-btn[b-px6bt8axei] {
    background: none;
    border: none;
    padding: 0.25rem;
    font-size: 2rem;
    color: #d1d5db;
    transition: all 0.2s ease;
    cursor: pointer;
}

    .rb-star-btn:hover[b-px6bt8axei] {
        color: #fbbf24;
        transform: scale(1.15);
    }

    .rb-star-btn.active[b-px6bt8axei] {
        color: #fbbf24;
    }

    .rb-star-btn:focus[b-px6bt8axei] {
        outline: 2px solid #0d6efd;
        outline-offset: 3px;
        border-radius: 8px;
    }

.rb-rating-text[b-px6bt8axei] {
    font-weight: 600;
    font-size: 1.125rem;
    color: #1f2937;
}

/* Form Groups */
.mb-3[b-px6bt8axei] {
    margin-bottom: 1.5rem;
}

/* Criteria Rating - CLEAN */
.rb-criteria-rating[b-px6bt8axei] {
    background: #fafafa;
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
    border: 1px solid #e5e7eb;
    transition: all 0.2s ease;
    margin-bottom: 1rem;
}

    .rb-criteria-rating:hover[b-px6bt8axei] {
        background: #f9fafb;
        border-color: #d1d5db;
    }

    .rb-criteria-rating .form-label[b-px6bt8axei] {
        margin-bottom: 0.75rem;
        font-weight: 600;
        color: #374151;
        font-size: 0.9375rem;
    }

.rb-star-rating-small[b-px6bt8axei] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.rb-star-btn-small[b-px6bt8axei] {
    background: none;
    border: none;
    padding: 0.125rem;
    font-size: 1.25rem;
    color: #d1d5db;
    transition: all 0.2s ease;
    cursor: pointer;
}

    .rb-star-btn-small:hover[b-px6bt8axei] {
        color: #fbbf24;
        transform: scale(1.1);
    }

    .rb-star-btn-small.active[b-px6bt8axei] {
        color: #fbbf24;
    }

.rb-reset-btn[b-px6bt8axei] {
    background: transparent;
    border: none;
    color: #ef4444;
    font-size: 0.8125rem;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.2s ease;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    margin-left: auto;
}

    .rb-reset-btn:hover[b-px6bt8axei] {
        background: #fee2e2;
        color: #dc2626;
    }

/* Tag Selector - CLEAN */
.rb-tag-selector[b-px6bt8axei] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.rb-tag-option[b-px6bt8axei] {
    background: white;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    padding: 0.375rem 0.875rem;
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    color: #374151;
}

    .rb-tag-option:hover[b-px6bt8axei] {
        background: #f9fafb;
        border-color: #9ca3af;
    }

    .rb-tag-option.active[b-px6bt8axei] {
        background: #0d6efd;
        color: white;
        border-color: #0d6efd;
    }

/* Form Elements - CLEAN */
.form-label[b-px6bt8axei] {
    font-weight: 600;
    color: #374151;
    margin-bottom: 0.5rem;
    font-size: 0.9375rem;
}

.form-control[b-px6bt8axei],
.form-select[b-px6bt8axei] {
    border-radius: 8px;
    border: 1px solid #d1d5db;
    transition: all 0.2s ease;
    padding: 0.625rem 0.875rem;
    font-size: 0.9375rem;
    color: #1f2937;
}

    .form-control:hover[b-px6bt8axei],
    .form-select:hover[b-px6bt8axei] {
        border-color: #9ca3af;
    }

    .form-control:focus[b-px6bt8axei],
    .form-control:focus-visible[b-px6bt8axei],
    .form-select:focus[b-px6bt8axei] {
        border-color: #0d6efd;
        box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.1);
        outline: none;
    }

    .form-control[b-px6bt8axei]::placeholder {
        color: #9ca3af;
    }

/* Modal Footer - CLEAN */
.modal-footer[b-px6bt8axei] {
    background: #fafafa;
    border-top: 1px solid #e5e7eb;
    border-radius: 0 0 16px 16px;
    padding: 1.5rem 2rem;
    gap: 0.75rem;
}

    /* Buttons - CLEAN */
    .modal-footer .btn[b-px6bt8axei] {
        padding: 0.75rem 1.5rem;
        font-weight: 600;
        border-radius: 8px;
        transition: all 0.2s ease;
        font-size: 0.9375rem;
    }

    .modal-footer .btn-primary[b-px6bt8axei] {
        background: #0d6efd;
        border: none;
        color: white;
    }

        .modal-footer .btn-primary:hover[b-px6bt8axei] {
            background: #0b5ed7;
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(13, 110, 253, 0.3);
        }

    .modal-footer .btn-secondary[b-px6bt8axei] {
        border: 1px solid #d1d5db;
        background: white;
        color: #6b7280;
    }

        .modal-footer .btn-secondary:hover[b-px6bt8axei] {
            background: #f9fafb;
            border-color: #9ca3af;
            color: #374151;
        }

/* Loading State */
.rb-form-loading[b-px6bt8axei] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.95);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    z-index: 2000;
}

/* Validation Feedback */
.invalid-feedback[b-px6bt8axei] {
    display: block;
    margin-top: 0.5rem;
    font-size: 0.8125rem;
    color: #ef4444;
    font-weight: 500;
}

/* Character Counter */
.rb-char-counter[b-px6bt8axei] {
    text-align: right;
    font-size: 0.8125rem;
    color: #6b7280;
    margin-top: 0.5rem;
    font-weight: 500;
}

    .rb-char-counter.warning[b-px6bt8axei] {
        color: #f59e0b;
    }

    .rb-char-counter.danger[b-px6bt8axei] {
        color: #ef4444;
    }

/* Responsive */
@media (max-width: 768px) {
    .modal-header[b-px6bt8axei],
    .modal-body[b-px6bt8axei],
    .modal-footer[b-px6bt8axei] {
        padding: 1.25rem 1.5rem;
    }

    .modal-title[b-px6bt8axei] {
        font-size: 1.25rem;
    }

    .rb-star-rating[b-px6bt8axei] {
        flex-direction: column;
        align-items: flex-start;
    }

    .rb-rating-text[b-px6bt8axei] {
        width: 100%;
    }

    .rb-tag-selector[b-px6bt8axei] {
        gap: 0.375rem;
    }

    .modal-footer .btn[b-px6bt8axei] {
        padding: 0.625rem 1.25rem;
    }
}
/* _content/BotomixNew/Components/Pages/ReviewList.razor.rz.scp.css */
/* ========================================
   REVIEW LIST - CLEAN & PROFESSIONAL
   ======================================== */

.rb-reviews-section[b-hnwr8tp0g7] {
    margin-top: 0;
}

/* Review Summary - CLEAN & MINIMAL */
.rb-review-summary[b-hnwr8tp0g7] {
    background: white;
    border-radius: 16px;
    padding: 0;
    margin-bottom: 2rem;
    border: 1px solid #e5e7eb;
    overflow: hidden;
}

.rb-rating-overview[b-hnwr8tp0g7] {
    text-align: center;
    padding: 2rem;
    background: linear-gradient(to bottom, #fafafa 0%, white 100%);
    border-bottom: 1px solid #e5e7eb;
}

.rb-avg-rating[b-hnwr8tp0g7] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.rb-rating-number[b-hnwr8tp0g7] {
    font-size: 3.5rem;
    font-weight: 700;
    color: #1f2937;
    line-height: 1;
    letter-spacing: -0.02em;
}

.rb-stars-large[b-hnwr8tp0g7] {
    display: flex;
    gap: 0.25rem;
    font-size: 1.5rem;
    color: #fbbf24;
}

.rb-total-reviews[b-hnwr8tp0g7] {
    color: #6b7280;
    font-size: 0.95rem;
    font-weight: 500;
    margin-top: 0.25rem;
}

/* Rating Distribution - MINIMAL & CLEAN */
.rb-rating-distribution[b-hnwr8tp0g7] {
    padding: 1.5rem 2rem;
    background: white;
}

.rb-rating-bar[b-hnwr8tp0g7] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

    .rb-rating-bar:last-child[b-hnwr8tp0g7] {
        margin-bottom: 0;
    }

.rb-rating-label[b-hnwr8tp0g7] {
    min-width: 80px;
    font-size: 0.875rem;
    font-weight: 500;
    color: #374151;
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

    .rb-rating-label i[b-hnwr8tp0g7] {
        color: #fbbf24;
        font-size: 0.875rem;
    }

.rb-bar-container[b-hnwr8tp0g7] {
    flex: 1;
    height: 8px;
    background: #f3f4f6;
    border-radius: 4px;
    overflow: hidden;
}

.rb-bar-fill[b-hnwr8tp0g7] {
    height: 100%;
    background: #fbbf24;
    transition: width 0.4s ease;
}

.rb-rating-count[b-hnwr8tp0g7] {
    min-width: 32px;
    text-align: right;
    font-size: 0.875rem;
    font-weight: 600;
    color: #6b7280;
}

/* Criteria Summary - CLEAN */
.rb-criteria-summary[b-hnwr8tp0g7] {
    padding: 1.5rem 2rem;
    background: #fafafa;
    border-top: 1px solid #e5e7eb;
}

.rb-criteria-title[b-hnwr8tp0g7] {
    font-size: 0.875rem;
    font-weight: 600;
    color: #374151;
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.rb-criteria-item[b-hnwr8tp0g7] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
    padding: 0.75rem;
    background: white;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
}

    .rb-criteria-item:last-child[b-hnwr8tp0g7] {
        margin-bottom: 0;
    }

.rb-criteria-name[b-hnwr8tp0g7] {
    font-size: 0.875rem;
    color: #374151;
    font-weight: 500;
}

.rb-criteria-score[b-hnwr8tp0g7] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.rb-stars-small[b-hnwr8tp0g7] {
    display: flex;
    gap: 0.125rem;
    font-size: 0.75rem;
    color: #fbbf24;
}

.rb-score[b-hnwr8tp0g7] {
    font-size: 0.875rem;
    font-weight: 700;
    color: #1f2937;
    min-width: 28px;
    text-align: right;
}

/* Tags Section - CLEAN */
.rb-tags-section[b-hnwr8tp0g7] {
    border-top: 1px solid #e5e7eb;
    padding: 1.5rem 2rem;
    background: white;
}

.rb-tags-title[b-hnwr8tp0g7] {
    font-size: 0.875rem;
    font-weight: 600;
    color: #374151;
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.rb-tags-list[b-hnwr8tp0g7] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.rb-tag[b-hnwr8tp0g7] {
    background: #f3f4f6;
    color: #374151;
    padding: 0.375rem 0.875rem;
    border-radius: 6px;
    font-size: 0.8125rem;
    font-weight: 500;
    border: 1px solid #e5e7eb;
    transition: all 0.2s ease;
}

    .rb-tag:hover[b-hnwr8tp0g7] {
        background: #e5e7eb;
        border-color: #d1d5db;
    }

/* Review Actions - CLEAN */
.rb-review-actions[b-hnwr8tp0g7] {
    margin: 2rem 0;
    padding: 1.5rem 2rem;
    text-align: center;
    background: #fafafa;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
}

    .rb-review-actions .btn[b-hnwr8tp0g7] {
        padding: 0.75rem 1.75rem;
        font-weight: 600;
        font-size: 0.9375rem;
        border-radius: 8px;
        transition: all 0.2s ease;
    }

        .rb-review-actions .btn:hover[b-hnwr8tp0g7] {
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }

/* Review Card - CLEAN & PROFESSIONAL */
.rb-review-card[b-hnwr8tp0g7] {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 1.75rem;
    margin-bottom: 1.25rem;
    transition: all 0.2s ease;
}

    .rb-review-card:hover[b-hnwr8tp0g7] {
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
        border-color: #d1d5db;
    }

/* Review Header - CLEAN */
.rb-review-header[b-hnwr8tp0g7] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.rb-reviewer-info[b-hnwr8tp0g7] {
    flex: 1;
}

.rb-reviewer-avatar[b-hnwr8tp0g7] {
    font-size: 2.5rem;
    color: #0d6efd;
    line-height: 1;
}

.rb-reviewer-name[b-hnwr8tp0g7] {
    font-weight: 600;
    font-size: 1rem;
    color: #1f2937;
    margin-bottom: 0.25rem;
}

.rb-company[b-hnwr8tp0g7] {
    color: #6b7280;
    font-size: 0.875rem;
    font-weight: 400;
}

.rb-review-meta[b-hnwr8tp0g7] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.8125rem;
    color: #6b7280;
    margin-top: 0.5rem;
}

.rb-verified[b-hnwr8tp0g7] {
    color: #10b981;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-weight: 500;
}

.rb-review-rating[b-hnwr8tp0g7] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

    .rb-review-rating .rb-stars[b-hnwr8tp0g7] {
        display: flex;
        gap: 0.125rem;
        font-size: 1rem;
        color: #fbbf24;
    }

.rb-rating-value[b-hnwr8tp0g7] {
    font-weight: 600;
    color: #1f2937;
    font-size: 0.9375rem;
}

/* Review Body - CLEAN */
.rb-review-title[b-hnwr8tp0g7] {
    font-size: 1.125rem;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 0.75rem;
    line-height: 1.4;
}

.rb-review-content[b-hnwr8tp0g7] {
    line-height: 1.6;
    color: #4b5563;
    margin-bottom: 1.25rem;
    font-size: 0.9375rem;
}

/* Review Criteria */
.rb-review-criteria[b-hnwr8tp0g7] {
    background: #fafafa;
    border-radius: 8px;
    padding: 1.25rem;
    margin-bottom: 1.25rem;
    border: 1px solid #e5e7eb;
}

    .rb-review-criteria h6[b-hnwr8tp0g7] {
        font-weight: 600;
        margin-bottom: 1rem;
        color: #374151;
        font-size: 0.875rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

.rb-criteria-grid[b-hnwr8tp0g7] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.75rem;
}

.rb-review-tags[b-hnwr8tp0g7] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1rem;
}

.rb-review-tag[b-hnwr8tp0g7] {
    background: #f3f4f6;
    color: #374151;
    padding: 0.25rem 0.625rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 500;
    border: 1px solid #e5e7eb;
}

/* Review Footer */
.rb-review-footer[b-hnwr8tp0g7] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 1.25rem;
    border-top: 1px solid #e5e7eb;
    margin-top: 1.25rem;
}

.rb-helpful[b-hnwr8tp0g7] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.875rem;
    color: #6b7280;
    font-weight: 500;
}

.rb-helpful-btn[b-hnwr8tp0g7] {
    background: white;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    padding: 0.375rem 0.875rem;
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.375rem;
    color: #6b7280;
}

    .rb-helpful-btn:hover[b-hnwr8tp0g7] {
        background: #f9fafb;
        border-color: #9ca3af;
        color: #374151;
    }

    .rb-helpful-btn.active[b-hnwr8tp0g7] {
        background: #ecfdf5;
        color: #10b981;
        border-color: #10b981;
    }

    .rb-helpful-btn i[b-hnwr8tp0g7] {
        font-size: 0.875rem;
    }

/* No Reviews State - CLEAN */
.rb-no-reviews[b-hnwr8tp0g7] {
    text-align: center;
    padding: 4rem 2rem;
    background: #fafafa;
    border-radius: 12px;
    border: 2px dashed #d1d5db;
}

    .rb-no-reviews i[b-hnwr8tp0g7] {
        font-size: 3.5rem;
        color: #9ca3af;
        margin-bottom: 1rem;
        opacity: 0.5;
    }

    .rb-no-reviews h3[b-hnwr8tp0g7] {
        font-weight: 600;
        font-size: 1.25rem;
        color: #1f2937;
        margin-bottom: 0.5rem;
    }

    .rb-no-reviews p[b-hnwr8tp0g7] {
        color: #6b7280;
        margin-bottom: 1.5rem;
        font-size: 0.9375rem;
    }

/* Pagination */
.rb-pagination[b-hnwr8tp0g7] {
    margin-top: 2rem;
    display: flex;
    justify-content: center;
}

/* Responsive */
@media (max-width: 768px) {
    .rb-review-summary[b-hnwr8tp0g7] {
        border-radius: 12px;
    }

    .rb-rating-overview[b-hnwr8tp0g7] {
        padding: 1.5rem;
    }

    .rb-rating-number[b-hnwr8tp0g7] {
        font-size: 2.75rem;
    }

    .rb-stars-large[b-hnwr8tp0g7] {
        font-size: 1.25rem;
    }

    .rb-rating-distribution[b-hnwr8tp0g7],
    .rb-criteria-summary[b-hnwr8tp0g7],
    .rb-tags-section[b-hnwr8tp0g7],
    .rb-review-actions[b-hnwr8tp0g7] {
        padding: 1.25rem 1.5rem;
    }

    .rb-review-card[b-hnwr8tp0g7] {
        padding: 1.5rem;
    }

    .rb-criteria-grid[b-hnwr8tp0g7] {
        grid-template-columns: 1fr;
    }

    .rb-review-footer[b-hnwr8tp0g7] {
        flex-direction: column;
        gap: 1rem;
        align-items: flex-start;
    }
}
/* _content/BotomixNew/Components/Pages/RobotDetail.razor.rz.scp.css */
/* RobotDetail.razor scoped styles */

.rb-detail[b-7xuoygcr07] {
    padding: 1rem 0 2rem;
}

/* Breadcrumb */
.rb-breadcrumb[b-7xuoygcr07] {
    font-size: 0.9rem;
    color: var(--bs-secondary-color);
    margin-bottom: 1rem;
}

    .rb-breadcrumb a[b-7xuoygcr07] {
        color: inherit;
        text-decoration: none;
    }

        .rb-breadcrumb a:hover[b-7xuoygcr07] {
            color: var(--bs-primary);
            text-decoration: underline;
        }

/* Header */
.rb-header[b-7xuoygcr07] {
    margin-bottom: 2rem;
}

.rb-title[b-7xuoygcr07] {
    font-size: clamp(1.5rem, 4vw, 2.2rem);
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: var(--bs-dark);
}

.rb-subtitle[b-7xuoygcr07] {
    color: var(--bs-secondary-color);
    margin-bottom: 1rem;
    font-size: 1rem;
}

.rb-badges[b-7xuoygcr07] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.rb-badge[b-7xuoygcr07] {
    padding: 0.3rem 0.75rem;
    background: var(--bs-light);
    border: 1px solid var(--bs-border-color);
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--bs-body-color);
    transition: all 0.2s ease;
}

.rb-badge-primary[b-7xuoygcr07] {
    background: var(--bs-primary);
    color: white;
    border-color: var(--bs-primary);
}

.rb-badge:hover[b-7xuoygcr07] {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Rating */
.rb-rating[b-7xuoygcr07] {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

.rb-rating-score[b-7xuoygcr07] {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--bs-dark);
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.rb-rating-large[b-7xuoygcr07] {
    font-size: 2rem;
    font-weight: 700;
    color: var(--bs-warning);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
}

    .rb-rating-large i[b-7xuoygcr07] {
        color: var(--bs-warning);
    }

/* Stars Display */
.rb-stars-display[b-7xuoygcr07] {
    display: flex;
    justify-content: center;
    gap: 0.25rem;
    margin: 0.5rem 0;
    font-size: 1.1rem;
}

    .rb-stars-display i[b-7xuoygcr07] {
        color: var(--bs-warning);
    }

/* Gallery */
.rb-gallery[b-7xuoygcr07] {
    margin-bottom: 1.5rem;
}

.rb-hero[b-7xuoygcr07] {
    background: var(--bs-light);
    border: 1px solid var(--bs-border-color);
    border-radius: 12px;
    aspect-ratio: 16/10;
    max-height: 450px;
    overflow: hidden;
    position: relative;
}

.rb-hero-img[b-7xuoygcr07] {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: white;
}

.rb-noimg[b-7xuoygcr07] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--bs-secondary-color);
}

    .rb-noimg i[b-7xuoygcr07] {
        font-size: 3rem;
        margin-bottom: 0.5rem;
        opacity: 0.5;
    }

.rb-thumbs[b-7xuoygcr07] {
    display: flex;
    gap: 0.5rem;
    margin-top: 1rem;
    padding: 0 0.25rem;
}

.rb-thumb[b-7xuoygcr07] {
    width: 80px;
    height: 60px;
    border: 2px solid var(--bs-border-color);
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.2s ease;
    background: white;
    flex-shrink: 0;
}

    .rb-thumb:hover[b-7xuoygcr07] {
        border-color: var(--bs-primary);
        transform: translateY(-1px);
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }

    .rb-thumb.active[b-7xuoygcr07] {
        border-color: var(--bs-primary);
        border-width: 3px;
        box-shadow: 0 0 0 1px rgba(13,110,253,0.25);
    }

    .rb-thumb img[b-7xuoygcr07] {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

/* Tab Navigation - ROBUSTE VERSION */
.rb-tabs-container[b-7xuoygcr07] {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    border-bottom: 2px solid var(--bs-border-color);
    margin-bottom: 1rem;
}

.rb-tab-btn[b-7xuoygcr07] {
    border: none !important;
    border-bottom: 3px solid transparent !important;
    background: none !important;
    color: var(--bs-secondary-color) !important;
    font-weight: 500;
    padding: 0.75rem 1rem;
    cursor: pointer !important;
    transition: all 0.2s ease;
    border-radius: 0 !important;
    display: flex;
    align-items: center;
    white-space: nowrap;
    user-select: none;
    pointer-events: auto !important;
    position: relative;
    z-index: 1;
}

    .rb-tab-btn:hover[b-7xuoygcr07] {
        color: var(--bs-primary) !important;
        border-bottom-color: var(--bs-primary-subtle) !important;
        background: rgba(13, 110, 253, 0.05) !important;
        transform: none !important;
    }

    .rb-tab-btn:focus[b-7xuoygcr07] {
        outline: 2px solid var(--bs-primary) !important;
        outline-offset: -2px;
        box-shadow: none !important;
    }

    .rb-tab-btn.active[b-7xuoygcr07] {
        color: var(--bs-primary) !important;
        border-bottom-color: var(--bs-primary) !important;
        background: none !important;
        font-weight: 600;
    }

    .rb-tab-btn:active[b-7xuoygcr07] {
        background: rgba(13, 110, 253, 0.1) !important;
        transform: scale(0.98);
    }

    /* Override any Bootstrap interference */
    .rb-tab-btn[b-7xuoygcr07],
    .rb-tab-btn:hover[b-7xuoygcr07],
    .rb-tab-btn:focus[b-7xuoygcr07],
    .rb-tab-btn:active[b-7xuoygcr07],
    .rb-tab-btn.active[b-7xuoygcr07] {
        border-top: none !important;
        border-left: none !important;
        border-right: none !important;
        margin-bottom: 0 !important;
        box-shadow: none !important;
    }

/* Legacy nav-tabs styling for compatibility */
.rb-nav-tabs[b-7xuoygcr07] {
    border-bottom: 2px solid var(--bs-border-color);
    margin-bottom: 0;
}

    .rb-nav-tabs .nav-link[b-7xuoygcr07] {
        border: none;
        border-bottom: 3px solid transparent;
        background: none;
        color: var(--bs-secondary-color);
        font-weight: 500;
        padding: 0.75rem 1rem;
        cursor: pointer;
        transition: all 0.2s ease;
        border-radius: 0;
        display: flex;
        align-items: center;
        white-space: nowrap;
        user-select: none;
        pointer-events: auto;
    }

        .rb-nav-tabs .nav-link:hover[b-7xuoygcr07] {
            color: var(--bs-primary);
            border-bottom-color: var(--bs-primary-subtle);
            background: rgba(13, 110, 253, 0.05);
            border-color: transparent;
        }

        .rb-nav-tabs .nav-link.active[b-7xuoygcr07] {
            color: var(--bs-primary);
            border-bottom-color: var(--bs-primary);
            background: none;
            font-weight: 600;
            border-color: transparent;
        }

        .rb-nav-tabs .nav-link:focus[b-7xuoygcr07] {
            outline: 2px solid var(--bs-primary);
            outline-offset: -2px;
        }

    .rb-nav-tabs .nav-item[b-7xuoygcr07] {
        margin-bottom: 0;
    }

.rb-tab[b-7xuoygcr07] {
    cursor: pointer !important;
    pointer-events: auto !important;
}

/* Navigation Tabs */
.nav-tabs[b-7xuoygcr07] {
    border-bottom: 2px solid var(--bs-border-color);
    margin-bottom: 0;
}

    .nav-tabs .nav-link[b-7xuoygcr07] {
        border: none;
        border-bottom: 3px solid transparent;
        background: none;
        color: var(--bs-secondary-color);
        font-weight: 500;
        padding: 0.75rem 1rem;
        cursor: pointer;
        transition: all 0.2s ease;
        border-radius: 0;
        display: flex;
        align-items: center;
        white-space: nowrap;
        user-select: none;
        pointer-events: auto;
    }

        .nav-tabs .nav-link:hover[b-7xuoygcr07] {
            color: var(--bs-primary);
            border-bottom-color: var(--bs-primary-subtle);
            background: rgba(13, 110, 253, 0.05);
            border-color: transparent;
        }

        .nav-tabs .nav-link.active[b-7xuoygcr07] {
            color: var(--bs-primary);
            border-bottom-color: var(--bs-primary);
            background: none;
            font-weight: 600;
            border-color: transparent;
        }

        .nav-tabs .nav-link:focus[b-7xuoygcr07] {
            outline: 2px solid var(--bs-primary);
            outline-offset: -2px;
        }

    .nav-tabs .nav-item[b-7xuoygcr07] {
        margin-bottom: 0;
    }

/* Specification Tables */
.table th[b-7xuoygcr07] {
    background: none;
    font-weight: 600;
    color: var(--bs-secondary-color);
    font-size: 0.9rem;
    width: 40%;
    border-bottom: 1px solid var(--bs-border-color-translucent);
    padding: 0.75rem 0.5rem;
}

.table td[b-7xuoygcr07] {
    font-weight: 500;
    color: var(--bs-dark);
    border-bottom: 1px solid var(--bs-border-color-translucent);
    padding: 0.75rem 0.5rem;
}

/* Pills */
.rb-pills[b-7xuoygcr07] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.5rem;
}

.rb-pill[b-7xuoygcr07] {
    padding: 0.3rem 0.6rem;
    background: var(--bs-light);
    border: 1px solid var(--bs-border-color);
    border-radius: 20px;
    font-size: 0.8rem;
    color: var(--bs-body-color);
    transition: all 0.2s ease;
}

    .rb-pill:hover[b-7xuoygcr07] {
        background: var(--bs-primary-subtle);
        border-color: var(--bs-primary);
    }

/* Sidebar */
.rb-aside[b-7xuoygcr07] {
    position: sticky;
    top: 100px;
}

.rb-keyfacts[b-7xuoygcr07] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.rb-kf[b-7xuoygcr07] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--bs-border-color-translucent);
}

    .rb-kf:last-child[b-7xuoygcr07] {
        border-bottom: none;
    }

    .rb-kf dt[b-7xuoygcr07] {
        color: var(--bs-secondary-color);
        font-size: 0.9rem;
        font-weight: normal;
    }

    .rb-kf dd[b-7xuoygcr07] {
        font-weight: 600;
        color: var(--bs-dark);
        margin: 0;
        text-align: right;
    }

    /* Legacy span support for backward compatibility */
    .rb-kf span[b-7xuoygcr07] {
        color: var(--bs-secondary-color);
        font-size: 0.9rem;
    }

    .rb-kf strong[b-7xuoygcr07] {
        font-weight: 600;
        color: var(--bs-dark);
    }

/* Cards */
.card[b-7xuoygcr07] {
    border-radius: 12px;
    border: 1px solid var(--bs-border-color-translucent);
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    transition: box-shadow 0.2s ease;
}

    .card:hover[b-7xuoygcr07] {
        box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    }

.card-body h5[b-7xuoygcr07] {
    font-weight: 700;
    color: var(--bs-dark);
    margin-bottom: 1rem;
}

.card-body h6[b-7xuoygcr07] {
    font-weight: 600;
    color: var(--bs-secondary-color);
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
}

/* Buttons */
.btn[b-7xuoygcr07] {
    transition: all 0.2s ease;
}

    .btn:hover[b-7xuoygcr07] {
        transform: translateY(-1px);
    }

/* ========================================
   DISABLED BUTTONS & "BALD VERFÜGBAR" BADGE
   ======================================== */

.rb-btn-disabled[b-7xuoygcr07] {
    position: relative;
    opacity: 0.65;
    cursor: not-allowed !important;
    pointer-events: none;
}

    .rb-btn-disabled:hover[b-7xuoygcr07] {
        transform: none !important;
    }

.rb-coming-soon-badge[b-7xuoygcr07] {
    display: inline-block;
    margin-left: 0.5rem;
    padding: 0.15rem 0.5rem;
    background: var(--bs-warning);
    color: var(--bs-dark);
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 600;
    white-space: nowrap;
    vertical-align: middle;
}

/* ========================================
   SEO & ACCESSIBILITY ENHANCEMENTS
   ======================================== */

/* Focus States für Accessibility */
.rb-thumb:focus-visible[b-7xuoygcr07],
.nav-link:focus-visible[b-7xuoygcr07],
.btn:focus-visible[b-7xuoygcr07] {
    outline: 2px solid var(--bs-primary);
    outline-offset: 2px;
}

/* Image Optimization */
.rb-hero-img[b-7xuoygcr07],
.rb-thumb img[b-7xuoygcr07] {
    image-rendering: -webkit-optimize-contrast;
}

/* Print Optimization */
@media print {
    .rb-aside[b-7xuoygcr07],
    .btn[b-7xuoygcr07],
    .rb-thumbs[b-7xuoygcr07] {
        display: none !important;
    }

    .rb-detail[b-7xuoygcr07] {
        padding: 0;
    }

    .card[b-7xuoygcr07] {
        break-inside: avoid;
        page-break-inside: avoid;
        box-shadow: none;
        border: 1px solid #ddd;
    }

    .rb-hero[b-7xuoygcr07] {
        max-height: 300px;
    }
}

/* Responsive */
@media (max-width: 992px) {
    .rb-aside[b-7xuoygcr07] {
        position: static;
        margin-top: 2rem;
    }
}

@media (max-width: 768px) {
    .rb-detail[b-7xuoygcr07] {
        padding: 0.5rem 0 1rem;
    }

    .rb-header[b-7xuoygcr07] {
        margin-bottom: 1.5rem;
    }

    .rb-title[b-7xuoygcr07] {
        font-size: 1.75rem;
    }

    .rb-rating[b-7xuoygcr07] {
        margin-top: 1rem;
    }

    .rb-rating-score[b-7xuoygcr07] {
        font-size: 1rem;
    }

    .rb-rating-large[b-7xuoygcr07] {
        font-size: 1.6rem;
    }

    .rb-stars-display[b-7xuoygcr07] {
        font-size: 1rem;
    }

    .nav-tabs[b-7xuoygcr07] {
        border-bottom: 1px solid var(--bs-border-color);
    }

        .nav-tabs .nav-link[b-7xuoygcr07] {
            padding: 0.5rem 0.75rem;
            font-size: 0.9rem;
        }

    .rb-thumbs[b-7xuoygcr07] {
        flex-wrap: wrap;
    }

    .rb-thumb[b-7xuoygcr07] {
        width: 60px;
        height: 45px;
    }

    .table th[b-7xuoygcr07],
    .table td[b-7xuoygcr07] {
        padding: 0.5rem 0.25rem;
        font-size: 0.9rem;
    }

    .rb-coming-soon-badge[b-7xuoygcr07] {
        font-size: 0.65rem;
        padding: 0.1rem 0.4rem;
    }
}

@media (max-width: 576px) {
    .rb-badges[b-7xuoygcr07] {
        margin-top: 0.5rem;
    }

    .rb-badge[b-7xuoygcr07] {
        font-size: 0.75rem;
        padding: 0.25rem 0.5rem;
    }

    .rb-rating-large[b-7xuoygcr07] {
        font-size: 1.4rem;
    }

    .rb-stars-display[b-7xuoygcr07] {
        font-size: 0.9rem;
        gap: 0.15rem;
    }

    .nav-tabs .nav-link[b-7xuoygcr07] {
        padding: 0.4rem 0.5rem;
        font-size: 0.85rem;
    }

    .rb-thumbs[b-7xuoygcr07] {
        grid-template-columns: repeat(4, 1fr);
    }

    .rb-coming-soon-badge[b-7xuoygcr07] {
        display: block;
        margin-left: 0;
        margin-top: 0.25rem;
        text-align: center;
    }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    .rb-badge[b-7xuoygcr07],
    .rb-thumb[b-7xuoygcr07],
    .btn[b-7xuoygcr07],
    .card[b-7xuoygcr07] {
        transition: none;
    }

        .rb-badge:hover[b-7xuoygcr07],
        .rb-thumb:hover[b-7xuoygcr07],
        .btn:hover[b-7xuoygcr07] {
            transform: none;
        }
}
/* _content/BotomixNew/Components/Pages/RobotFinder.razor.rz.scp.css */
/* Robot Finder Container */
.wizard-container[b-4lu6fpvl2m] {
    max-width: 900px;
    margin: 0 auto;
    padding: 40px 20px;
    min-height: 80vh;
}

/* Header Styles */
.wizard-header[b-4lu6fpvl2m] {
    text-align: center;
    margin-bottom: 50px;
}

    .wizard-header h1[b-4lu6fpvl2m] {
        font-size: 2.5rem;
        font-weight: 700;
        color: #2d3748;
        margin-bottom: 15px;
    }

    .wizard-header h2[b-4lu6fpvl2m] {
        font-size: 2rem;
        font-weight: 700;
        color: #2d3748;
        margin-bottom: 15px;
    }

    .wizard-header p[b-4lu6fpvl2m] {
        font-size: 1.2rem;
        color: #718096;
    }

/* Category Grid */
.category-grid[b-4lu6fpvl2m] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 25px;
    margin-top: 40px;
}

.category-card[b-4lu6fpvl2m] {
    background: white;
    border: 2px solid #e2e8f0;
    border-radius: 16px;
    padding: 40px 30px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

    .category-card[b-4lu6fpvl2m]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: linear-gradient(90deg, #0066ff, #00a3ff);
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 0.3s ease;
    }

    .category-card:hover[b-4lu6fpvl2m] {
        transform: translateY(-8px);
        border-color: #0066ff;
        box-shadow: 0 20px 40px rgba(0, 102, 255, 0.15);
    }

        .category-card:hover[b-4lu6fpvl2m]::before {
            transform: scaleX(1);
        }

.category-icon[b-4lu6fpvl2m] {
    font-size: 3.5rem;
    color: #0066ff;
    margin-bottom: 20px;
    transition: transform 0.3s ease;
}

.category-card:hover .category-icon[b-4lu6fpvl2m] {
    transform: scale(1.1);
}

.category-card h2[b-4lu6fpvl2m],
.category-card h3[b-4lu6fpvl2m] {
    font-size: 1.4rem;
    font-weight: 700;
    color: #2d3748;
    margin-bottom: 10px;
}

.category-card p[b-4lu6fpvl2m] {
    font-size: 0.95rem;
    color: #718096;
    line-height: 1.5;
    margin-bottom: 15px;
}

.category-arrow[b-4lu6fpvl2m] {
    font-size: 1.2rem;
    color: #0066ff;
    opacity: 0;
    transform: translateX(-10px);
    transition: all 0.3s ease;
}

.category-card:hover .category-arrow[b-4lu6fpvl2m] {
    opacity: 1;
    transform: translateX(0);
}

/* Question Container */
.wizard-questions[b-4lu6fpvl2m] {
    animation: fadeIn-b-4lu6fpvl2m 0.4s ease-in;
}

@keyframes fadeIn-b-4lu6fpvl2m {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ========================================
   ZURÜCK BUTTON (unter Progress Bar)
   ======================================== */
.wizard-back-bar[b-4lu6fpvl2m] {
    margin-top: 20px;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid #e2e8f0;
}

.btn-back[b-4lu6fpvl2m] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 24px;
    background: #f8f9fa;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    color: #4a5568;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .btn-back:hover[b-4lu6fpvl2m] {
        background: #e2e8f0;
        border-color: #cbd5e0;
        transform: translateX(-4px);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

    .btn-back i[b-4lu6fpvl2m] {
        font-size: 0.9rem;
        transition: transform 0.2s ease;
    }

    .btn-back:hover i[b-4lu6fpvl2m] {
        transform: translateX(-2px);
    }

    .btn-back:active[b-4lu6fpvl2m] {
        transform: translateX(-2px) scale(0.98);
    }

    .btn-back:focus-visible[b-4lu6fpvl2m] {
        outline: 2px solid #0066ff;
        outline-offset: 2px;
    }

.question-container[b-4lu6fpvl2m] {
    background: white;
    border-radius: 20px;
    padding: 50px 40px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.question-header[b-4lu6fpvl2m] {
    text-align: center;
    margin-bottom: 40px;
}

.question-icon[b-4lu6fpvl2m] {
    font-size: 3rem;
    color: #0066ff;
    margin-bottom: 20px;
    display: block;
}

.question-header h2[b-4lu6fpvl2m] {
    font-size: 1.8rem;
    font-weight: 700;
    color: #2d3748;
    margin-bottom: 10px;
    line-height: 1.3;
}

.question-subtitle[b-4lu6fpvl2m] {
    font-size: 1rem;
    color: #718096;
    margin-top: 10px;
}

/* Question Options */
.question-options[b-4lu6fpvl2m] {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 40px;
}

.option-card[b-4lu6fpvl2m] {
    background: #f8f9fa;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    padding: 20px 25px;
    display: flex;
    align-items: center;
    gap: 20px;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    text-align: left;
}

    .option-card:hover[b-4lu6fpvl2m] {
        background: #f0f4f8;
        border-color: #cbd5e0;
        transform: translateX(4px);
    }

    .option-card.selected[b-4lu6fpvl2m] {
        background: #ebf5ff;
        border-color: #0066ff;
        box-shadow: 0 4px 12px rgba(0, 102, 255, 0.15);
    }

.option-icon[b-4lu6fpvl2m] {
    font-size: 1.8rem;
    color: #0066ff;
    min-width: 40px;
    text-align: center;
}

.option-content[b-4lu6fpvl2m] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.option-label[b-4lu6fpvl2m] {
    font-size: 1.1rem;
    font-weight: 600;
    color: #2d3748;
}

.option-description[b-4lu6fpvl2m] {
    font-size: 0.9rem;
    color: #718096;
}

.option-check[b-4lu6fpvl2m] {
    font-size: 1.5rem;
    color: #0066ff;
}

/* Multi-Select Options */
.option-card.multi[b-4lu6fpvl2m] {
    position: relative;
}

/* Navigation Buttons */
.wizard-navigation[b-4lu6fpvl2m] {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 30px;
}

.btn[b-4lu6fpvl2m] {
    padding: 14px 28px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 1rem;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-primary[b-4lu6fpvl2m] {
    background: #0066ff;
    color: white;
}

    .btn-primary:hover:not(:disabled)[b-4lu6fpvl2m] {
        background: #0052cc;
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(0, 102, 255, 0.3);
    }

    .btn-primary:disabled[b-4lu6fpvl2m] {
        background: #cbd5e0;
        cursor: not-allowed;
        opacity: 0.6;
    }

.btn-secondary[b-4lu6fpvl2m] {
    background: #f8f9fa;
    color: #4a5568;
    border: 1px solid #e2e8f0;
}

    .btn-secondary:hover[b-4lu6fpvl2m] {
        background: #e2e8f0;
        transform: translateY(-2px);
    }

.btn-large[b-4lu6fpvl2m] {
    padding: 18px 36px;
    font-size: 1.1rem;
}

/* Contact Form */
.wizard-contact[b-4lu6fpvl2m] {
    animation: fadeIn-b-4lu6fpvl2m 0.4s ease-in;
}

.contact-form[b-4lu6fpvl2m] {
    background: white;
    border-radius: 20px;
    padding: 50px 40px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    max-width: 600px;
    margin: 0 auto;
}

.form-group[b-4lu6fpvl2m] {
    margin-bottom: 25px;
}

    .form-group label[b-4lu6fpvl2m] {
        display: block;
        font-weight: 600;
        color: #2d3748;
        margin-bottom: 8px;
        font-size: 1rem;
    }

.form-control[b-4lu6fpvl2m] {
    width: 100%;
    padding: 14px 18px;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    font-size: 1rem;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

    .form-control:focus[b-4lu6fpvl2m] {
        outline: none;
        border-color: #0066ff;
        box-shadow: 0 0 0 3px rgba(0, 102, 255, 0.1);
    }

.form-info[b-4lu6fpvl2m] {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #f0f4f8;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 30px;
}

    .form-info i[b-4lu6fpvl2m] {
        color: #0066ff;
        font-size: 1.2rem;
    }

    .form-info small[b-4lu6fpvl2m] {
        color: #718096;
        line-height: 1.5;
    }

/* ========================================
   SEO & ACCESSIBILITY ENHANCEMENTS
   ======================================== */

/* Focus States */
.category-card:focus-visible[b-4lu6fpvl2m],
.option-card:focus-visible[b-4lu6fpvl2m],
.btn:focus-visible[b-4lu6fpvl2m],
.form-control:focus-visible[b-4lu6fpvl2m] {
    outline: 2px solid #0066ff;
    outline-offset: 2px;
}

/* Print Styles */
@media print {
    .wizard-navigation[b-4lu6fpvl2m],
    .category-arrow[b-4lu6fpvl2m],
    .wizard-back-bar[b-4lu6fpvl2m] {
        display: none !important;
    }

    .wizard-container[b-4lu6fpvl2m] {
        max-width: 100%;
        padding: 0;
    }

    .category-card[b-4lu6fpvl2m],
    .question-container[b-4lu6fpvl2m],
    .contact-form[b-4lu6fpvl2m] {
        break-inside: avoid;
        page-break-inside: avoid;
        box-shadow: none;
        border: 1px solid #ddd;
    }
}

/* Responsive Design */
@media (max-width: 768px) {
    .wizard-container[b-4lu6fpvl2m] {
        padding: 20px 15px;
    }

    .wizard-back-bar[b-4lu6fpvl2m] {
        margin-top: 15px;
        margin-bottom: 20px;
    }

    .btn-back[b-4lu6fpvl2m] {
        width: 100%;
        justify-content: center;
        font-size: 0.95rem;
        padding: 12px 20px;
    }

    .wizard-header h1[b-4lu6fpvl2m] {
        font-size: 2rem;
    }

    .wizard-header h2[b-4lu6fpvl2m] {
        font-size: 1.6rem;
    }

    .category-grid[b-4lu6fpvl2m] {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .question-container[b-4lu6fpvl2m],
    .contact-form[b-4lu6fpvl2m] {
        padding: 30px 20px;
    }

    .question-header h2[b-4lu6fpvl2m] {
        font-size: 1.4rem;
    }

    .option-card[b-4lu6fpvl2m] {
        padding: 15px 18px;
        gap: 15px;
    }

    .option-icon[b-4lu6fpvl2m] {
        font-size: 1.5rem;
        min-width: 35px;
    }

    .option-label[b-4lu6fpvl2m] {
        font-size: 1rem;
    }

    .wizard-navigation[b-4lu6fpvl2m] {
        flex-direction: column;
    }

    .btn[b-4lu6fpvl2m] {
        width: 100%;
        justify-content: center;
    }
}

/* Kleinere Mobile Geräte */
@media (max-width: 480px) {
    .btn-back[b-4lu6fpvl2m] {
        font-size: 0.9rem;
        padding: 10px 18px;
        gap: 8px;
    }

        .btn-back i[b-4lu6fpvl2m] {
            font-size: 0.85rem;
        }
}

/* Loading Animation */
.fa-spin[b-4lu6fpvl2m] {
    animation: fa-spin-b-4lu6fpvl2m 1s infinite linear;
}

@keyframes fa-spin-b-4lu6fpvl2m {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    .category-card[b-4lu6fpvl2m],
    .option-card[b-4lu6fpvl2m],
    .btn[b-4lu6fpvl2m],
    .btn-back[b-4lu6fpvl2m],
    .wizard-questions[b-4lu6fpvl2m],
    .wizard-contact[b-4lu6fpvl2m] {
        transition: none;
        animation: none;
    }

        .category-card:hover[b-4lu6fpvl2m],
        .option-card:hover[b-4lu6fpvl2m],
        .btn-back:hover[b-4lu6fpvl2m] {
            transform: none;
        }
}
/* _content/BotomixNew/Components/Pages/RobotFinderResult.razor.rz.scp.css */
/* ========================================
   ROBOTER FINDER RESULT PAGE
   VERWENDET GLEICHE ROBOT CARDS WIE ROBOTS.RAZOR
   ======================================== */

/* ============================================
   KRITISCH: ALLE HEIGHT-BESCHRÄNKUNGEN AUFHEBEN!
   ============================================ */
html[b-ttkvezki4j], body[b-ttkvezki4j] {
    height: auto !important;
    min-height: 100vh !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
}

/* Töte alle Container-Beschränkungen */
.page[b-ttkvezki4j],
.main[b-ttkvezki4j],
.content[b-ttkvezki4j],
main[b-ttkvezki4j],
.wizard-result[b-ttkvezki4j],
.result-section[b-ttkvezki4j],
.robot-grid[b-ttkvezki4j],
.rb-card[b-ttkvezki4j] {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
}

/* ============================================
   MAIN CONTAINER
   ============================================ */
.wizard-result[b-ttkvezki4j] {
    max-width: 1600px;
    width: 100%;
    margin: 0 auto;
    padding: 40px 30px;
    height: auto !important;
    overflow: visible !important;
}

/* ============================================
   RESULT HEADER
   ============================================ */
.result-header[b-ttkvezki4j] {
    text-align: center;
    margin-bottom: 50px;
}

.success-icon[b-ttkvezki4j] {
    font-size: 4rem;
    color: #10b981;
    margin-bottom: 20px;
}

.result-header h1[b-ttkvezki4j] {
    font-size: 2.5rem;
    font-weight: 700;
    color: #2d3748;
    margin-bottom: 15px;
}

.result-header p[b-ttkvezki4j] {
    font-size: 1.2rem;
    color: #718096;
    margin-bottom: 20px;
}

/* ============================================
   HEADER ACTION BAR - Match Score + CTA
   ============================================ */
.header-action-bar[b-ttkvezki4j] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 50px;
    flex-wrap: wrap;
    background: linear-gradient(135deg, #f7fafc 0%, #e2e8f0 100%);
    border-radius: 20px;
    padding: 30px 40px;
    margin-top: 30px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

/* Match Score Circle */
.match-score[b-ttkvezki4j] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.score-circle[b-ttkvezki4j] {
    position: relative;
    width: 110px;
    height: 110px;
}

    .score-circle svg[b-ttkvezki4j] {
        transform: rotate(-90deg);
    }

.score-text[b-ttkvezki4j] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.score-number[b-ttkvezki4j] {
    font-size: 2.2rem;
    font-weight: 700;
    color: #0066ff;
}

.score-percent[b-ttkvezki4j] {
    font-size: 1.2rem;
    font-weight: 700;
    color: #0066ff;
}

.score-label[b-ttkvezki4j] {
    font-size: 0.9rem;
    font-weight: 600;
    color: #718096;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Gesamtanfrage CTA */
.inquiry-cta-header[b-ttkvezki4j],
.request-success-header[b-ttkvezki4j] {
    display: flex;
    align-items: center;
    gap: 20px;
    background: white;
    padding: 25px 35px;
    border-radius: 16px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    flex: 1;
    min-width: 350px;
    max-width: 600px;
}

.cta-header-icon[b-ttkvezki4j],
.success-header-icon[b-ttkvezki4j] {
    font-size: 2.5rem;
    color: #0066ff;
    flex-shrink: 0;
}

.success-header-icon[b-ttkvezki4j] {
    color: #10b981;
}

.cta-header-text[b-ttkvezki4j],
.success-header-text[b-ttkvezki4j] {
    flex: 1;
}

    .cta-header-text h4[b-ttkvezki4j],
    .success-header-text h4[b-ttkvezki4j] {
        font-size: 1.2rem;
        font-weight: 700;
        color: #2d3748;
        margin: 0 0 5px 0;
    }

    .cta-header-text p[b-ttkvezki4j],
    .success-header-text p[b-ttkvezki4j] {
        font-size: 0.95rem;
        color: #718096;
        margin: 0;
    }

.btn-inquiry[b-ttkvezki4j] {
    white-space: nowrap;
    flex-shrink: 0;
}

/* ============================================
   RESULT SECTION
   ============================================ */
.result-section[b-ttkvezki4j] {
    margin-top: 50px;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
}

    .result-section h2[b-ttkvezki4j] {
        font-size: 1.8rem;
        font-weight: 700;
        color: #2d3748;
        margin-bottom: 30px;
    }

/* ============================================
   ROBOT GRID - GENAU WIE ROBOTS.RAZOR!
   ============================================ */
.robot-grid[b-ttkvezki4j] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
}

/* ============================================
   ROBOT CARDS - VON ROBOTS.RAZOR ÜBERNOMMEN
   ============================================ */
.rb-card[b-ttkvezki4j] {
    border: 1px solid var(--bs-border-color, #e2e8f0);
    border-radius: 20px;
    background: #fff;
    height: 100%;
    min-height: 0 !important;
    max-height: none !important;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

    .rb-card:hover[b-ttkvezki4j] {
        transform: translateY(-8px);
        box-shadow: 0 20px 40px rgba(0,0,0,0.1);
        border-color: var(--bs-primary, #0066ff);
    }

.robot-favorite[b-ttkvezki4j] {
    position: absolute;
    top: 15px;
    right: 15px;
    z-index: 10;
}

.robot-icon[b-ttkvezki4j] {
    text-align: center;
    font-size: 3rem;
    color: #cbd5e0;
    margin: 20px 0;
}

.rb-category-badge[b-ttkvezki4j] {
    position: absolute;
    top: 1rem;
    left: 1rem;
    background: rgba(255,255,255,0.95);
    backdrop-filter: blur(10px);
    color: var(--bs-primary, #0066ff);
    border-radius: 12px;
    padding: .4rem .8rem;
    font-size: .75rem;
    font-weight: 600;
    border: 1px solid rgba(13,110,253,0.2);
    text-transform: uppercase;
    letter-spacing: .5px;
}

.rb-body[b-ttkvezki4j] {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    flex: 1 1 auto;
}

.rb-title[b-ttkvezki4j] {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.3;
}

.rb-title-link[b-ttkvezki4j] {
    text-decoration: none;
    color: inherit;
}

    .rb-title-link[b-ttkvezki4j]::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1;
    }

    .rb-title-link:hover[b-ttkvezki4j] {
        color: var(--bs-primary, #0066ff);
    }

.rb-manufacturer[b-ttkvezki4j] {
    color: var(--bs-primary, #0066ff);
    font-size: .9rem;
    font-weight: 600;
    margin-bottom: .5rem;
}

.rb-specs[b-ttkvezki4j] {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin-bottom: 1rem;
}

.rb-spec-item[b-ttkvezki4j] {
    display: flex;
    align-items: center;
    gap: .4rem;
    background: var(--bs-light, #f8f9fa);
    border-radius: 8px;
    padding: .3rem .6rem;
    font-size: .8rem;
    font-weight: 500;
}

    .rb-spec-item .text-warning[b-ttkvezki4j] {
        color: #ffc107 !important;
    }

    .rb-spec-item.text-muted[b-ttkvezki4j] {
        background: var(--bs-light, #f8f9fa);
        color: var(--bs-secondary-color, #6c757d);
        opacity: 0.8;
    }

        .rb-spec-item.text-muted .rb-spec-icon[b-ttkvezki4j] {
            color: var(--bs-secondary-color, #6c757d);
        }

    .rb-spec-item .small[b-ttkvezki4j] {
        font-size: 0.75rem;
        line-height: 1;
    }

.rb-spec-icon[b-ttkvezki4j] {
    font-size: .9em;
}

.rb-actions[b-ttkvezki4j] {
    display: flex;
    gap: .75rem;
    margin-top: auto;
    position: relative;
    z-index: 2;
}

.rb-compare-btn[b-ttkvezki4j] {
    flex: 1;
}

.rb-actions .btn[b-ttkvezki4j] {
    border-radius: 10px;
    font-weight: 600;
    transition: all .2s ease;
}

    .rb-actions .btn:hover[b-ttkvezki4j] {
        transform: translateY(-2px);
    }

/* ============================================
   REGISTER CTA BANNER
   ============================================ */
.register-cta-banner[b-ttkvezki4j] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
    padding: 40px 50px;
    border-radius: 20px;
    margin: 50px 0;
    box-shadow: 0 10px 30px rgba(16, 185, 129, 0.3);
}

.cta-banner-icon[b-ttkvezki4j] {
    font-size: 3.5rem;
    flex-shrink: 0;
}

.cta-banner-content[b-ttkvezki4j] {
    flex: 1;
}

    .cta-banner-content h3[b-ttkvezki4j] {
        font-size: 1.8rem;
        font-weight: 700;
        margin-bottom: 10px;
    }

    .cta-banner-content p[b-ttkvezki4j] {
        font-size: 1.1rem;
        margin: 0;
        opacity: 0.95;
    }

/* ============================================
   RESULT ACTIONS
   ============================================ */
.result-actions[b-ttkvezki4j] {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin: 50px 0;
}

/* ============================================
   SUPPORT OPTIONS SECTION
   ============================================ */
.support-options-section[b-ttkvezki4j] {
    background: linear-gradient(135deg, #f7fafc 0%, #e2e8f0 100%);
    border-radius: 20px;
    padding: 50px 40px;
    margin: 50px 0;
}

.support-header-inline[b-ttkvezki4j] {
    text-align: center;
    margin-bottom: 40px;
}

    .support-header-inline h2[b-ttkvezki4j] {
        font-size: 2rem;
        font-weight: 700;
        color: #2d3748;
        margin-bottom: 10px;
    }

    .support-header-inline p[b-ttkvezki4j] {
        font-size: 1.1rem;
        color: #718096;
    }

.support-options-grid[b-ttkvezki4j] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 25px;
}

.support-card-mini[b-ttkvezki4j] {
    background: white;
    border-radius: 16px;
    padding: 30px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
}

    .support-card-mini:hover[b-ttkvezki4j] {
        transform: translateY(-5px);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    }

    .support-card-mini.featured[b-ttkvezki4j] {
        border: 2px solid #0066ff;
        background: linear-gradient(135deg, #ffffff 0%, #f0f7ff 100%);
    }

.support-icon-mini[b-ttkvezki4j] {
    font-size: 2.5rem;
    color: #0066ff;
    margin-bottom: 20px;
}

.support-content-mini h3[b-ttkvezki4j] {
    font-size: 1.2rem;
    font-weight: 700;
    color: #2d3748;
    margin-bottom: 10px;
}

.support-content-mini p[b-ttkvezki4j] {
    font-size: 0.95rem;
    color: #718096;
    margin-bottom: 20px;
}

.support-link[b-ttkvezki4j] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #0066ff;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
}

    .support-link:hover[b-ttkvezki4j] {
        color: #0052cc;
        gap: 12px;
    }

/* ============================================
   EMPTY STATE
   ============================================ */
.empty-state[b-ttkvezki4j] {
    text-align: center;
    padding: 80px 40px;
    background: #f8f9fa;
    border-radius: 20px;
}

    .empty-state i[b-ttkvezki4j] {
        font-size: 5rem;
        color: #cbd5e0;
        margin-bottom: 30px;
    }

    .empty-state h2[b-ttkvezki4j] {
        font-size: 1.8rem;
        font-weight: 700;
        color: #2d3748;
        margin-bottom: 15px;
    }

    .empty-state p[b-ttkvezki4j] {
        font-size: 1.1rem;
        color: #718096;
        margin-bottom: 30px;
    }

/* ============================================
   MODALS
   ============================================ */
.modal-overlay[b-ttkvezki4j] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 20px;
    animation: fadeIn-b-ttkvezki4j 0.2s ease;
}

@keyframes fadeIn-b-ttkvezki4j {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.modal-dialog[b-ttkvezki4j] {
    background: white;
    border-radius: 20px;
    max-width: 700px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: slideUp-b-ttkvezki4j 0.3s ease;
}

@keyframes slideUp-b-ttkvezki4j {
    from {
        transform: translateY(50px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.modal-header[b-ttkvezki4j] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 35px 45px 25px;
    border-bottom: 2px solid #e2e8f0;
}

    .modal-header h3[b-ttkvezki4j] {
        font-size: 1.6rem;
        font-weight: 700;
        color: #2d3748;
        margin: 0;
    }

.modal-close[b-ttkvezki4j] {
    background: none;
    border: none;
    font-size: 1.8rem;
    color: #718096;
    cursor: pointer;
    padding: 8px;
    border-radius: 8px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .modal-close:hover[b-ttkvezki4j] {
        background: #f8f9fa;
        color: #2d3748;
    }

.modal-body[b-ttkvezki4j] {
    padding: 35px 45px;
}

.bulk-robots-preview[b-ttkvezki4j] {
    background: #f8f9fa;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 30px;
}

    .bulk-robots-preview h4[b-ttkvezki4j] {
        font-size: 1.1rem;
        font-weight: 700;
        color: #2d3748;
        margin-bottom: 15px;
    }

    .bulk-robots-preview ul[b-ttkvezki4j] {
        margin: 0;
        padding-left: 25px;
    }

        .bulk-robots-preview ul li[b-ttkvezki4j] {
            color: #4a5568;
            margin-bottom: 8px;
            line-height: 1.5;
        }

.form-grid[b-ttkvezki4j] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 20px;
}

.form-group[b-ttkvezki4j] {
    display: flex;
    flex-direction: column;
}

    .form-group label[b-ttkvezki4j] {
        font-weight: 600;
        color: #2d3748;
        margin-bottom: 8px;
        font-size: 0.95rem;
    }

.form-control[b-ttkvezki4j] {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    font-size: 1rem;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

    .form-control:focus[b-ttkvezki4j] {
        outline: none;
        border-color: #0066ff;
        box-shadow: 0 0 0 3px rgba(0, 102, 255, 0.1);
    }

textarea.form-control[b-ttkvezki4j] {
    resize: vertical;
    min-height: 100px;
}

.form-check[b-ttkvezki4j] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 20px;
}

.form-check-input[b-ttkvezki4j] {
    margin-top: 4px;
    cursor: pointer;
}

.form-check-label[b-ttkvezki4j] {
    font-size: 0.95rem;
    color: #4a5568;
    line-height: 1.5;
    cursor: pointer;
}

    .form-check-label a[b-ttkvezki4j] {
        color: #0066ff;
        text-decoration: none;
        font-weight: 600;
    }

        .form-check-label a:hover[b-ttkvezki4j] {
            color: #0052cc;
        }

.alert[b-ttkvezki4j] {
    padding: 15px 20px;
    border-radius: 10px;
    margin-bottom: 20px;
}

.alert-danger[b-ttkvezki4j] {
    background: #fee;
    border: 1px solid #fcc;
    color: #c00;
}

.modal-footer[b-ttkvezki4j] {
    display: flex;
    justify-content: flex-end;
    gap: 15px;
    padding: 25px 45px 40px;
    border-top: 2px solid #e2e8f0;
}

/* ============================================
   BUTTONS
   ============================================ */
.btn[b-ttkvezki4j] {
    border-radius: 12px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 28px;
    font-size: 1rem;
}

.btn-primary[b-ttkvezki4j] {
    background: linear-gradient(135deg, #0066ff, #0052cc);
    color: white;
}

    .btn-primary:hover:not(:disabled)[b-ttkvezki4j] {
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(0, 102, 255, 0.35);
    }

.btn-secondary[b-ttkvezki4j] {
    background: #f8f9fa;
    color: #4a5568;
    border: 2px solid #e2e8f0 !important;
}

    .btn-secondary:hover[b-ttkvezki4j] {
        background: #e2e8f0;
        transform: translateY(-2px);
    }

.btn-outline[b-ttkvezki4j] {
    background: white;
    color: #4a5568;
    border: 2px solid #e2e8f0 !important;
}

    .btn-outline:hover[b-ttkvezki4j] {
        background: #f8f9fa;
        border-color: #cbd5e0 !important;
    }

.btn-success[b-ttkvezki4j] {
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
}

    .btn-success:hover[b-ttkvezki4j] {
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(16, 185, 129, 0.35);
    }

.btn-large[b-ttkvezki4j] {
    padding: 18px 36px;
    font-size: 1.1rem;
}

.btn:disabled[b-ttkvezki4j] {
    opacity: 0.5;
    cursor: not-allowed;
}

    .btn:disabled:hover[b-ttkvezki4j] {
        transform: none;
        box-shadow: none;
    }

/* ============================================
   ACCESSIBILITY
   ============================================ */
.btn:focus-visible[b-ttkvezki4j],
.form-control:focus-visible[b-ttkvezki4j],
.modal-close:focus-visible[b-ttkvezki4j],
.rb-title-link:focus-visible[b-ttkvezki4j] {
    outline: 3px solid #0066ff;
    outline-offset: 3px;
}

.visually-hidden[b-ttkvezki4j] {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0,0,0,0) !important;
    white-space: nowrap !important;
    border-width: 0 !important;
}

/* ============================================
   UTILITY
   ============================================ */
.fa-spin[b-ttkvezki4j] {
    animation: fa-spin-b-ttkvezki4j 1s infinite linear;
}

@keyframes fa-spin-b-ttkvezki4j {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.text-muted[b-ttkvezki4j] {
    color: #6c757d !important;
}

.text-warning[b-ttkvezki4j] {
    color: #ffc107 !important;
}

.small[b-ttkvezki4j] {
    font-size: 0.875rem;
}

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */
@media (max-width: 1200px) {
    .wizard-result[b-ttkvezki4j] {
        padding: 35px 25px;
    }

    .header-action-bar[b-ttkvezki4j] {
        gap: 40px;
        padding: 25px 30px;
    }
}

@media (max-width: 1023px) {
    .wizard-result[b-ttkvezki4j] {
        padding: 30px 20px;
    }

    .robot-grid[b-ttkvezki4j] {
        grid-template-columns: repeat(2, 1fr);
    }

    .result-header h1[b-ttkvezki4j] {
        font-size: 2rem;
    }

    .header-action-bar[b-ttkvezki4j] {
        flex-direction: column;
        gap: 25px;
    }

    .inquiry-cta-header[b-ttkvezki4j],
    .request-success-header[b-ttkvezki4j] {
        max-width: none;
        width: 100%;
    }

    .result-actions[b-ttkvezki4j] {
        flex-direction: column;
    }

        .result-actions .btn[b-ttkvezki4j] {
            width: 100%;
        }

    .support-options-grid[b-ttkvezki4j] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767px) {
    .wizard-result[b-ttkvezki4j] {
        padding: 25px 15px;
    }

    .robot-grid[b-ttkvezki4j] {
        grid-template-columns: 1fr;
    }

    .result-header h1[b-ttkvezki4j] {
        font-size: 1.7rem;
    }

    .header-action-bar[b-ttkvezki4j] {
        padding: 20px 15px;
        gap: 20px;
    }

    .inquiry-cta-header[b-ttkvezki4j] {
        flex-direction: column;
        text-align: center;
        padding: 20px;
        gap: 15px;
    }

    .cta-header-text[b-ttkvezki4j] {
        text-align: center;
    }

        .cta-header-text h4[b-ttkvezki4j],
        .cta-header-text p[b-ttkvezki4j] {
            white-space: normal;
        }

    .btn-inquiry[b-ttkvezki4j] {
        width: 100%;
    }

    .request-success-header[b-ttkvezki4j] {
        flex-direction: column;
        text-align: center;
        padding: 22px;
    }

    .success-header-text[b-ttkvezki4j] {
        text-align: center;
    }

    .modal-header[b-ttkvezki4j] {
        padding: 28px 22px 20px;
    }

    .modal-body[b-ttkvezki4j] {
        padding: 25px 22px;
    }

    .form-grid[b-ttkvezki4j] {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .modal-footer[b-ttkvezki4j] {
        padding: 18px 22px 30px;
        flex-direction: column-reverse;
    }

        .modal-footer .btn[b-ttkvezki4j] {
            width: 100%;
        }

    .register-cta-banner[b-ttkvezki4j] {
        flex-direction: column;
        text-align: center;
        padding: 30px 25px;
        gap: 20px;
    }

    .cta-banner-content h3[b-ttkvezki4j] {
        font-size: 1.4rem;
    }

    .cta-banner-content p[b-ttkvezki4j] {
        font-size: 1rem;
    }

    .support-options-section[b-ttkvezki4j] {
        padding: 40px 20px;
    }

    .rb-specs[b-ttkvezki4j] {
        gap: .5rem;
    }

    .rb-spec-item[b-ttkvezki4j] {
        font-size: 0.75rem;
        padding: .25rem .5rem;
    }

        .rb-spec-item .small[b-ttkvezki4j] {
            font-size: 0.7rem;
        }
}

@media (max-width: 480px) {
    .result-header h1[b-ttkvezki4j] {
        font-size: 1.5rem;
    }

    .score-circle[b-ttkvezki4j] {
        width: 90px;
        height: 90px;
    }

        .score-circle svg[b-ttkvezki4j] {
            width: 90px;
            height: 90px;
        }

    .score-number[b-ttkvezki4j] {
        font-size: 1.8rem;
    }

    .score-percent[b-ttkvezki4j] {
        font-size: 1rem;
    }
}

/* ============================================
   PRINT STYLES
   ============================================ */
@media print {
    .robot-favorite[b-ttkvezki4j],
    .rb-actions[b-ttkvezki4j],
    .result-actions[b-ttkvezki4j],
    .support-options-section[b-ttkvezki4j],
    .header-action-bar[b-ttkvezki4j],
    .register-cta-banner[b-ttkvezki4j] {
        display: none !important;
    }

    .wizard-result[b-ttkvezki4j] {
        padding: 0 !important;
        max-width: 100% !important;
    }

    .rb-card[b-ttkvezki4j] {
        break-inside: avoid;
        page-break-inside: avoid;
        box-shadow: none;
        border: 1px solid #ddd;
    }
}

/* ============================================
   REDUCED MOTION
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    *[b-ttkvezki4j],
    *[b-ttkvezki4j]::before,
    *[b-ttkvezki4j]::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}
/* _content/BotomixNew/Components/Pages/Robots.razor.rz.scp.css */
:host[b-9yhzkx2yri] {
    display: block;
}

/* Search Container */
.rb-search-container[b-9yhzkx2yri] {
    min-width: 350px;
}

.rb-search .input-group-text[b-9yhzkx2yri] {
    background: #fff;
    border-right: 0;
}

.rb-search .form-control[b-9yhzkx2yri] {
    border-left: 0;
    border-right: 0;
}

/* Filter Card */
.rb-filter-card[b-9yhzkx2yri] {
    border-radius: 16px;
    border: 1px solid var(--bs-border-color);
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.rb-fh[b-9yhzkx2yri] {
    letter-spacing: .05em;
    color: var(--bs-secondary-color);
    font-weight: 600;
    font-size: .8rem;
    text-transform: uppercase;
}

.rb-filter-blk + .rb-filter-blk[b-9yhzkx2yri] {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--bs-border-color-translucent);
}

.rb-filter-title[b-9yhzkx2yri] {
    font-weight: 600;
    margin-bottom: .75rem;
    font-size: .95rem;
    color: var(--bs-emphasis-color);
}

.rb-list-check[b-9yhzkx2yri] {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    max-height: 280px;
    overflow: auto;
    padding-right: .5rem;
    scrollbar-width: thin;
}

.rb-check .form-check-input[b-9yhzkx2yri] {
    margin-top: .25em;
}

.rb-check .form-check-label[b-9yhzkx2yri] {
    font-size: .9rem;
    cursor: pointer;
}

/* Results Header */
.rb-results-head[b-9yhzkx2yri] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
    min-height: 40px;
    flex-wrap: wrap;
    gap: 1rem;
}

.rb-active-filters[b-9yhzkx2yri] {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.rb-filter-chip[b-9yhzkx2yri] {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: var(--bs-primary-bg-subtle);
    color: var(--bs-primary);
    border: 1px solid var(--bs-primary-border-subtle);
    border-radius: 20px;
    padding: .25rem .75rem;
    font-size: .85rem;
    font-weight: 500;
}

.rb-chip-remove[b-9yhzkx2yri] {
    background: none;
    border: none;
    color: inherit;
    font-size: 1.1em;
    font-weight: bold;
    cursor: pointer;
    padding: 0;
    opacity: .7;
}

    .rb-chip-remove:hover[b-9yhzkx2yri] {
        opacity: 1;
    }

/* Robot Grid */
.robot-grid[b-9yhzkx2yri] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 20px;
}

/* Robot Cards */
.rb-card[b-9yhzkx2yri] {
    border: 1px solid var(--bs-border-color);
    border-radius: 20px;
    background: #fff;
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

    .rb-card:hover[b-9yhzkx2yri] {
        transform: translateY(-8px);
        box-shadow: 0 20px 40px rgba(0,0,0,0.1);
        border-color: var(--bs-primary);
    }

.robot-favorite[b-9yhzkx2yri] {
    position: absolute;
    top: 15px;
    right: 15px;
    z-index: 10;
}

.robot-icon[b-9yhzkx2yri] {
    text-align: center;
    font-size: 3rem;
    color: #cbd5e0;
    margin: 20px 0;
}

.rb-thumb[b-9yhzkx2yri] {
    position: relative;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    height: 220px;
    overflow: hidden;
}

.rb-img[b-9yhzkx2yri] {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    transition: transform .3s ease;
}

.rb-img-placeholder[b-9yhzkx2yri] {
    opacity: 0.6;
    filter: grayscale(20%);
}

.rb-card:hover .rb-img[b-9yhzkx2yri] {
    transform: scale(1.05);
}

.rb-category-badge[b-9yhzkx2yri] {
    position: absolute;
    top: 1rem;
    left: 1rem;
    background: rgba(255,255,255,0.95);
    backdrop-filter: blur(10px);
    color: var(--bs-primary);
    border-radius: 12px;
    padding: .4rem .8rem;
    font-size: .75rem;
    font-weight: 600;
    border: 1px solid rgba(13,110,253,0.2);
    text-transform: uppercase;
    letter-spacing: .5px;
}

.rb-rating-badge[b-9yhzkx2yri] {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: rgba(255,193,7,0.9);
    color: #000;
    border-radius: 12px;
    padding: .3rem .6rem;
    font-size: .75rem;
    font-weight: 600;
    backdrop-filter: blur(10px);
}

.rb-body[b-9yhzkx2yri] {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    flex: 1 1 auto;
}

.rb-title[b-9yhzkx2yri] {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.3;
}

.robot-title-link[b-9yhzkx2yri],
.rb-title-link[b-9yhzkx2yri] {
    text-decoration: none;
    color: inherit;
}

    .robot-title-link[b-9yhzkx2yri]::after,
    .rb-title-link[b-9yhzkx2yri]::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1;
    }

    .robot-title-link:hover[b-9yhzkx2yri],
    .rb-title-link:hover[b-9yhzkx2yri] {
        color: var(--bs-primary);
    }

.rb-manufacturer[b-9yhzkx2yri] {
    color: var(--bs-primary);
    font-size: .9rem;
    font-weight: 600;
    margin-bottom: .5rem;
}

.rb-description[b-9yhzkx2yri] {
    color: var(--bs-secondary-color);
    font-size: .9rem;
    line-height: 1.5;
    margin-bottom: 1rem;
}

.rb-specs[b-9yhzkx2yri] {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin-bottom: 1rem;
}

.rb-spec-item[b-9yhzkx2yri] {
    display: flex;
    align-items: center;
    gap: .4rem;
    background: var(--bs-light);
    border-radius: 8px;
    padding: .3rem .6rem;
    font-size: .8rem;
    font-weight: 500;
}

    /* Rating Spec Item Styles */
    .rb-spec-item .text-warning[b-9yhzkx2yri] {
        color: #ffc107 !important;
    }

    .rb-spec-item.text-muted[b-9yhzkx2yri] {
        background: var(--bs-light);
        color: var(--bs-secondary-color);
        opacity: 0.8;
    }

        .rb-spec-item.text-muted .rb-spec-icon[b-9yhzkx2yri] {
            color: var(--bs-secondary-color);
        }

    /* Rating Count Styles */
    .rb-spec-item .small[b-9yhzkx2yri] {
        font-size: 0.75rem;
        line-height: 1;
    }

.rb-spec-icon[b-9yhzkx2yri] {
    font-size: .9em;
}

.rb-actions[b-9yhzkx2yri] {
    display: flex;
    gap: .75rem;
    margin-top: auto;
    position: relative;
    z-index: 2;
}

.rb-compare-btn[b-9yhzkx2yri] {
    flex: 1;
}

.rb-actions .btn[b-9yhzkx2yri] {
    border-radius: 10px;
    font-weight: 600;
    transition: all .2s ease;
}

    .rb-actions .btn:hover[b-9yhzkx2yri] {
        transform: translateY(-2px);
    }

/* Empty State */
.rb-empty-state[b-9yhzkx2yri] {
    text-align: center;
    padding: 4rem 2rem;
    background: var(--bs-light);
    border-radius: 20px;
}

.rb-empty-icon[b-9yhzkx2yri] {
    font-size: 4rem;
    margin-bottom: 1rem;
    opacity: 0.5;
}

/* Sticky Compare Bar */
.rb-compare-bar[b-9yhzkx2yri] {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(255,255,255,0.95);
    backdrop-filter: blur(20px);
    border-top: 1px solid var(--bs-border-color);
    box-shadow: 0 -10px 30px rgba(0,0,0,0.1);
    padding: 1rem 0;
    z-index: 1050;
    animation: slideUp-b-9yhzkx2yri 0.3s ease-out;
}

@keyframes slideUp-b-9yhzkx2yri {
    from {
        transform: translateY(100%);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.rb-compare-content[b-9yhzkx2yri] {
    display: flex;
    align-items: center;
    gap: 2rem;
    flex-wrap: wrap;
}

.rb-compare-info[b-9yhzkx2yri] {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    min-width: 200px;
}

.rb-compare-items[b-9yhzkx2yri] {
    display: flex;
    gap: 1rem;
    flex: 1;
    overflow-x: auto;
    padding: .5rem 0;
}

.rb-compare-item[b-9yhzkx2yri] {
    display: flex;
    align-items: center;
    gap: .75rem;
    background: var(--bs-light);
    border-radius: 12px;
    padding: .75rem;
    min-width: 200px;
    position: relative;
}

.rb-compare-item-img[b-9yhzkx2yri] {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--bs-border-color);
}

    .rb-compare-item-img img[b-9yhzkx2yri] {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

.rb-compare-item-info[b-9yhzkx2yri] {
    flex: 1;
    min-width: 0;
}

.rb-compare-item-name[b-9yhzkx2yri] {
    font-weight: 600;
    font-size: .85rem;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rb-compare-item-brand[b-9yhzkx2yri] {
    color: var(--bs-secondary-color);
    font-size: .75rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rb-compare-item-remove[b-9yhzkx2yri] {
    position: absolute;
    top: .25rem;
    right: .25rem;
    background: var(--bs-danger);
    color: white;
    border: none;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    font-size: .75rem;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .2s ease;
}

    .rb-compare-item-remove:hover[b-9yhzkx2yri] {
        background: var(--bs-danger);
        transform: scale(1.1);
    }

.rb-compare-actions[b-9yhzkx2yri] {
    display: flex;
    gap: .75rem;
    align-items: center;
}

    .rb-compare-actions .btn[b-9yhzkx2yri] {
        border-radius: 10px;
        font-weight: 600;
        white-space: nowrap;
    }

/* Range Sliders */
.form-range[b-9yhzkx2yri] {
    height: 6px;
}

    .form-range[b-9yhzkx2yri]::-webkit-slider-thumb {
        background: var(--bs-primary);
        border: 2px solid #fff;
        box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    }

    .form-range[b-9yhzkx2yri]::-moz-range-thumb {
        background: var(--bs-primary);
        border: 2px solid #fff;
        box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    }

/* ========================================
   SEO & ACCESSIBILITY ENHANCEMENTS
   ======================================== */

/* Visually Hidden for Screen Readers */
.visually-hidden[b-9yhzkx2yri] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* Focus States */
.form-check-input:focus-visible[b-9yhzkx2yri],
.btn:focus-visible[b-9yhzkx2yri],
.rb-chip-remove:focus-visible[b-9yhzkx2yri],
.robot-title-link:focus-visible[b-9yhzkx2yri],
.rb-title-link:focus-visible[b-9yhzkx2yri],
.form-range:focus-visible[b-9yhzkx2yri] {
    outline: 2px solid var(--bs-primary);
    outline-offset: 2px;
}

/* Print Styles */
@media print {
    .rb-search-container[b-9yhzkx2yri],
    .rb-filter-card[b-9yhzkx2yri],
    .rb-actions[b-9yhzkx2yri],
    .robot-favorite[b-9yhzkx2yri],
    .rb-compare-bar[b-9yhzkx2yri] {
        display: none !important;
    }

    .container-xxl[b-9yhzkx2yri] {
        max-width: 100%;
    }

    .rb-card[b-9yhzkx2yri] {
        break-inside: avoid;
        page-break-inside: avoid;
        box-shadow: none;
        border: 1px solid #ddd;
    }

    .robot-grid[b-9yhzkx2yri] {
        gap: 15px;
    }
}

/* Responsive Design */
@media (max-width: 992px) {
    .rb-search-container[b-9yhzkx2yri] {
        min-width: 100%;
        margin-top: 1rem;
    }

    .rb-compare-content[b-9yhzkx2yri] {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }

    .rb-compare-items[b-9yhzkx2yri] {
        justify-content: center;
    }
}

@media (max-width: 768px) {
    .rb-compare-bar[b-9yhzkx2yri] {
        padding: .75rem 0;
    }

    .rb-compare-item[b-9yhzkx2yri] {
        min-width: 160px;
        padding: .5rem;
    }

    .rb-compare-item-img[b-9yhzkx2yri] {
        width: 40px;
        height: 40px;
    }

    .rb-results-head[b-9yhzkx2yri] {
        flex-direction: column;
        align-items: flex-start;
        gap: .75rem;
    }

    .robot-grid[b-9yhzkx2yri] {
        grid-template-columns: 1fr;
    }

    .rb-specs[b-9yhzkx2yri] {
        gap: .5rem;
    }

    .rb-spec-item[b-9yhzkx2yri] {
        font-size: 0.75rem;
        padding: .25rem .5rem;
    }

        .rb-spec-item .small[b-9yhzkx2yri] {
            font-size: 0.7rem;
        }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    .rb-card[b-9yhzkx2yri],
    .rb-img[b-9yhzkx2yri],
    .rb-compare-bar[b-9yhzkx2yri],
    .btn[b-9yhzkx2yri] {
        transition: none;
        animation: none;
    }

        .rb-card:hover[b-9yhzkx2yri],
        .btn:hover[b-9yhzkx2yri] {
            transform: none;
        }
}
/* _content/BotomixNew/Components/Pages/ServiceProviderDetail.razor.rz.scp.css */
/* Add this content to ServiceProviderDetail.razor.css */

.service-provider-detail[b-7bui914n6a] {
    background-color: #f8f9fa;
    padding-bottom: 3rem;
}

/* Hero Section */
.sp-detail-hero[b-7bui914n6a] {
    background-color: #ffffff;
    border-radius: 12px;
    padding: 2rem;
    margin-bottom: 2rem;
    border: 1px solid #dee2e6;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

.sp-detail-icon-container[b-7bui914n6a] {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.sp-detail-icon[b-7bui914n6a] {
    width: 120px;
    height: 120px;
    background: linear-gradient(145deg, #0d6efd, #0a58ca);
    color: white;
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sp-detail-title[b-7bui914n6a] {
    font-size: 2.5rem;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 0.5rem;
}

.sp-detail-meta[b-7bui914n6a] {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    color: #6c757d;
    margin-bottom: 1.5rem;
}

.meta-item[b-7bui914n6a] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.sp-detail-actions .btn[b-7bui914n6a] {
    margin-right: 0.75rem;
}

/* Services Overview */
.sp-detail-services-overview[b-7bui914n6a] {
    background: #ffffff;
    border-radius: 12px;
    padding: 2rem;
    margin-bottom: 2rem;
    border: 1px solid #dee2e6;
}

.services-overview-header[b-7bui914n6a] {
    text-align: center;
    margin-bottom: 2rem;
}

h2.services-overview-title[b-7bui914n6a] {
    font-size: 1.75rem;
    font-weight: 600;
    color: #2c3e50;
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
}

.services-overview-grid[b-7bui914n6a] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
}

.service-overview-card[b-7bui914n6a] {
    text-align: center;
    padding: 1.5rem;
    border-radius: 10px;
}

    .service-overview-card.sales[b-7bui914n6a] {
        background-color: #f0fdf4;
    }

    .service-overview-card.installation[b-7bui914n6a] {
        background-color: #fefce8;
    }

    .service-overview-card.maintenance[b-7bui914n6a] {
        background-color: #eff6ff;
    }

.service-overview-icon[b-7bui914n6a] {
    font-size: 2rem;
    margin-bottom: 1rem;
}

    .service-overview-icon .fa-shopping-cart[b-7bui914n6a] {
        color: #16a34a;
    }

    .service-overview-icon .fa-wrench[b-7bui914n6a] {
        color: #ca8a04;
    }

    .service-overview-icon .fa-cog[b-7bui914n6a] {
        color: #2563eb;
    }

h3.service-overview-title[b-7bui914n6a] {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: #1e293b;
}

.service-overview-description[b-7bui914n6a] {
    font-size: 0.95rem;
    color: #64748b;
}

/* Info Cards for Details */
.info-card[b-7bui914n6a] {
    background: #ffffff;
    border-radius: 12px;
    border: 1px solid #dee2e6;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.info-card-header[b-7bui914n6a] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #e9ecef;
}

.info-card-icon[b-7bui914n6a] {
    font-size: 1.1rem;
    color: #0d6efd;
}

h3.info-card-title[b-7bui914n6a] {
    font-size: 1.1rem;
    font-weight: 600;
    color: #34495e;
    margin: 0;
}

.info-card-content[b-7bui914n6a] {
    padding: 1.25rem;
    flex-grow: 1;
}

/* Specific content styling */
.expertise-grid[b-7bui914n6a], .certifications-grid[b-7bui914n6a], .coverage-countries-grid[b-7bui914n6a] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.expertise-badge[b-7bui914n6a], .certification-badge[b-7bui914n6a], .coverage-country-badge[b-7bui914n6a] {
    background-color: #e7f5ff;
    color: #0d6efd;
    padding: 0.4rem 1rem;
    border-radius: 1.5rem;
    font-size: 0.9rem;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.coverage-radius[b-7bui914n6a] {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px dashed #dee2e6;
    font-size: 0.95rem;
    color: #495057;
}

.manufacturers-grid[b-7bui914n6a] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 1rem;
}

.manufacturer-card[b-7bui914n6a] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    text-decoration: none;
    color: inherit;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

    .manufacturer-card:hover[b-7bui914n6a] {
        background-color: #f8f9fa;
        box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    }

.manufacturer-card-icon img[b-7bui914n6a] {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

.manufacturer-card-title[b-7bui914n6a] {
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
}

.manufacturer-card-location[b-7bui914n6a] {
    font-size: 0.85rem;
    color: #6c757d;
    margin: 0.1rem 0 0 0;
}

.contact-grid[b-7bui914n6a] {
    display: grid;
    gap: 1.5rem;
}

.contact-item[b-7bui914n6a] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.contact-icon[b-7bui914n6a] {
    font-size: 1.2rem;
    color: #0d6efd;
    margin-top: 0.25rem;
}

.contact-label[b-7bui914n6a] {
    font-size: 0.85rem;
    font-weight: 600;
    color: #6c757d;
    margin-bottom: 0.2rem;
}

.contact-value[b-7bui914n6a] {
    font-size: 1rem;
    color: #212529;
}


/* Grid for Supported Robots */
.supported-robots-grid[b-7bui914n6a] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); /* Adjusted min-width for 3 in a row */
    gap: 20px;
}

/* ROBOT CARD STYLES (Copied from Robots.razor.css for consistency) */
.rb-card[b-7bui914n6a] {
    border: 1px solid var(--bs-border-color);
    border-radius: 20px;
    background: #fff;
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

    .rb-card:hover[b-7bui914n6a] {
        transform: translateY(-8px);
        box-shadow: 0 20px 40px rgba(0,0,0,0.1);
        border-color: var(--bs-primary);
    }

.rb-thumb[b-7bui914n6a] {
    position: relative;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    height: 220px;
    overflow: hidden;
}

.rb-img[b-7bui914n6a] {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    transition: transform .3s ease;
}

.rb-img-placeholder[b-7bui914n6a] {
    opacity: 0.6;
    filter: grayscale(20%);
}

.rb-card:hover .rb-img[b-7bui914n6a] {
    transform: scale(1.05);
}

.rb-category-badge[b-7bui914n6a] {
    position: absolute;
    top: 1rem;
    left: 1rem;
    background: rgba(255,255,255,0.95);
    backdrop-filter: blur(10px);
    color: var(--bs-primary);
    border-radius: 12px;
    padding: .4rem .8rem;
    font-size: .75rem;
    font-weight: 600;
    border: 1px solid rgba(13,110,253,0.2);
    text-transform: uppercase;
    letter-spacing: .5px;
}

.rb-body[b-7bui914n6a] {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    flex: 1 1 auto;
}

.rb-title[b-7bui914n6a] {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.3;
}

.rb-title-link[b-7bui914n6a] {
    text-decoration: none;
    color: inherit;
}

    .rb-title-link[b-7bui914n6a]::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1;
    }

    .rb-title-link:hover[b-7bui914n6a] {
        color: var(--bs-primary);
    }

.rb-manufacturer[b-7bui914n6a] {
    color: var(--bs-primary);
    font-size: .9rem;
    font-weight: 600;
    margin-bottom: .5rem;
}

.rb-specs[b-7bui914n6a] {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin-bottom: 1rem;
}

.rb-spec-item[b-7bui914n6a] {
    display: flex;
    align-items: center;
    gap: .4rem;
    background: var(--bs-light);
    border-radius: 8px;
    padding: .3rem .6rem;
    font-size: .8rem;
    font-weight: 500;
}

.rb-spec-icon[b-7bui914n6a] {
    font-size: .9em;
}

.rb-actions[b-7bui914n6a] {
    display: flex;
    gap: .75rem;
    margin-top: auto;
    position: relative;
    z-index: 2;
}

.rb-compare-btn[b-7bui914n6a] {
    flex: 1;
}

.rb-actions .btn[b-7bui914n6a] {
    border-radius: 10px;
    font-weight: 600;
    transition: all .2s ease;
}

    .rb-actions .btn:hover[b-7bui914n6a] {
        transform: translateY(-2px);
    }

@media (min-width: 992px) {
    .sp-detail-hero .col-lg-3[b-7bui914n6a], .sp-detail-hero .col-lg-9[b-7bui914n6a] {
        padding-left: 15px;
        padding-right: 15px;
    }
}
/* _content/BotomixNew/Components/Pages/ServiceProviders.razor.rz.scp.css */
/* ==========================================
   COMING SOON STYLES
   ========================================== */

.service-providers[b-ih4vpik5dj] {
    background-color: #f8f9fa;
    min-height: 100vh;
}

.coming-soon-container[b-ih4vpik5dj] {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
    padding: 3rem 1rem;
}

.coming-soon-icon[b-ih4vpik5dj] {
    width: 120px;
    height: 120px;
    margin: 0 auto 2rem;
    background: linear-gradient(135deg, #0d6efd 0%, #0a58ca 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: pulse-b-ih4vpik5dj 2s ease-in-out infinite;
}

    .coming-soon-icon i[b-ih4vpik5dj] {
        font-size: 3.5rem;
        color: white;
    }

@keyframes pulse-b-ih4vpik5dj {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(13, 110, 253, 0.4);
    }

    50% {
        transform: scale(1.05);
        box-shadow: 0 0 0 20px rgba(13, 110, 253, 0);
    }
}

.coming-soon-title[b-ih4vpik5dj] {
    font-size: 3rem;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 0.5rem;
}

.coming-soon-subtitle[b-ih4vpik5dj] {
    font-size: 1.75rem;
    font-weight: 600;
    color: #0d6efd;
    margin-bottom: 2rem;
}

.coming-soon-content[b-ih4vpik5dj] {
    background: white;
    border-radius: 16px;
    padding: 2.5rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.coming-soon-text[b-ih4vpik5dj] {
    font-size: 1.2rem;
    color: #495057;
    margin-bottom: 1rem;
    font-weight: 500;
}

.coming-soon-description[b-ih4vpik5dj] {
    font-size: 1rem;
    color: #6c757d;
    margin-bottom: 2rem;
}

.feature-preview-grid[b-ih4vpik5dj] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin: 2rem 0 3rem;
}

.feature-preview-card[b-ih4vpik5dj] {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    padding: 2rem 1.5rem;
    border-radius: 12px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

    .feature-preview-card:hover[b-ih4vpik5dj] {
        transform: translateY(-5px);
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
    }

.feature-icon[b-ih4vpik5dj] {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    display: block;
}

.feature-preview-card:nth-child(1) .feature-icon[b-ih4vpik5dj] {
    color: #16a34a;
}

.feature-preview-card:nth-child(2) .feature-icon[b-ih4vpik5dj] {
    color: #ca8a04;
}

.feature-preview-card:nth-child(3) .feature-icon[b-ih4vpik5dj] {
    color: #2563eb;
}

.feature-preview-card h3[b-ih4vpik5dj] {
    font-size: 1.1rem;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 0.5rem;
}

.feature-preview-card p[b-ih4vpik5dj] {
    font-size: 0.9rem;
    color: #6c757d;
    margin: 0;
}

.coming-soon-cta[b-ih4vpik5dj] {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

    .coming-soon-cta .btn[b-ih4vpik5dj] {
        padding: 0.75rem 2rem;
        font-size: 1rem;
        font-weight: 600;
        border-radius: 10px;
        transition: all 0.3s ease;
    }

        .coming-soon-cta .btn:hover[b-ih4vpik5dj] {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(13, 110, 253, 0.3);
        }

/* Responsive Design */
@media (max-width: 768px) {
    .coming-soon-title[b-ih4vpik5dj] {
        font-size: 2rem;
    }

    .coming-soon-subtitle[b-ih4vpik5dj] {
        font-size: 1.25rem;
    }

    .coming-soon-icon[b-ih4vpik5dj] {
        width: 100px;
        height: 100px;
    }

        .coming-soon-icon i[b-ih4vpik5dj] {
            font-size: 2.5rem;
        }

    .feature-preview-grid[b-ih4vpik5dj] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .coming-soon-content[b-ih4vpik5dj] {
        padding: 1.5rem;
    }

    .coming-soon-cta[b-ih4vpik5dj] {
        flex-direction: column;
    }

        .coming-soon-cta .btn[b-ih4vpik5dj] {
            width: 100%;
        }
}

/* ==========================================
   ORIGINAL STYLES - WIRD SPÄTER AKTIVIERT
   ========================================== */

/* 
Alle originalen CSS-Styles bleiben hier auskommentiert und werden
bei Aktivierung der Service-Provider-Funktionalität wieder eingebunden.

Die kompletten Original-Styles aus ServiceProviders.razor.css
sind hier gespeichert und können durch Entfernen des Kommentars
reaktiviert werden.
*/
/* _content/BotomixNew/Components/Pages/StarRating.razor.rz.scp.css */
/* Star Rating Component Styles */
.star-rating[b-th8tyxknmi] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--bs-warning);
}

    /* Size Variants */
    .star-rating.star-sm[b-th8tyxknmi] {
        font-size: 0.875rem;
    }

    .star-rating.star-md[b-th8tyxknmi] {
        font-size: 1.125rem;
    }

    .star-rating.star-lg[b-th8tyxknmi] {
        font-size: 1.5rem;
    }

/* Interactive Buttons */
.star-btn[b-th8tyxknmi] {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    color: inherit;
    cursor: pointer;
    transition: all 0.2s ease;
    line-height: 1;
}

    .star-btn:hover:not(:disabled)[b-th8tyxknmi] {
        transform: scale(1.1);
    }

    .star-btn:disabled[b-th8tyxknmi] {
        cursor: not-allowed;
        opacity: 0.6;
    }

    .star-btn:focus[b-th8tyxknmi] {
        outline: 2px solid var(--bs-primary);
        outline-offset: 2px;
        border-radius: 2px;
    }

/* Star Icons */
.star-rating i[b-th8tyxknmi] {
    transition: color 0.2s ease;
}

.star-rating .fa-star-half-alt[b-th8tyxknmi] {
    position: relative;
}

/* Value and Count Display */
.star-value[b-th8tyxknmi] {
    margin-left: 0.5rem;
    font-weight: 600;
    color: var(--bs-dark);
}

.star-count[b-th8tyxknmi] {
    margin-left: 0.25rem;
    color: var(--bs-secondary);
    font-size: 0.9em;
}

/* Responsive */
@media (max-width: 576px) {
    .star-rating.star-lg[b-th8tyxknmi] {
        font-size: 1.25rem;
    }
}
/* _content/BotomixNew/Components/Pages/Support.razor.rz.scp.css */
/* ============================================
   SUPPORT PAGE STYLING
   Konsistent mit Botomix Design System
   ============================================ */

/* Visually Hidden für Screen Readers */
.visually-hidden[b-4qfv6n8inz] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* Main Container */
.support-page[b-4qfv6n8inz] {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 50%, #f1f3f4 100%);
    min-height: calc(100vh - 200px);
    padding: 3rem 2rem;
}

.support-container[b-4qfv6n8inz] {
    max-width: 1400px;
    margin: 0 auto;
}

/* Breadcrumb */
.breadcrumb[b-4qfv6n8inz] {
    display: flex;
    flex-wrap: wrap;
    padding: 0;
    margin: 0 0 2rem 0;
    list-style: none;
    background: transparent;
}

.breadcrumb-item[b-4qfv6n8inz] {
    display: flex;
    align-items: center;
    font-size: 0.9rem;
}

    .breadcrumb-item + .breadcrumb-item[b-4qfv6n8inz] {
        padding-left: 0.5rem;
    }

        .breadcrumb-item + .breadcrumb-item[b-4qfv6n8inz]::before {
            content: "›";
            padding-right: 0.5rem;
            color: #6c757d;
            font-weight: 600;
        }

    .breadcrumb-item a[b-4qfv6n8inz] {
        color: #0066ff;
        text-decoration: none;
        transition: color 0.2s ease;
    }

        .breadcrumb-item a:hover[b-4qfv6n8inz],
        .breadcrumb-item a:focus[b-4qfv6n8inz] {
            color: #0052cc;
            text-decoration: underline;
        }

    .breadcrumb-item.active[b-4qfv6n8inz] {
        color: #6c757d;
    }

/* Header Section */
.support-header[b-4qfv6n8inz] {
    text-align: center;
    margin-bottom: 4rem;
    animation: fadeInUp-b-4qfv6n8inz 0.6s ease-out;
}

@keyframes fadeInUp-b-4qfv6n8inz {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.support-title[b-4qfv6n8inz] {
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 700;
    color: #111827;
    margin-bottom: 1.25rem;
    line-height: 1.2;
}

.support-subtitle[b-4qfv6n8inz] {
    font-size: clamp(1rem, 2.5vw, 1.2rem);
    color: #6b7280;
    max-width: 800px;
    margin: 0 auto;
    line-height: 1.7;
}

/* Support Options Grid */
.support-options[b-4qfv6n8inz] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-bottom: 5rem;
}

.support-card[b-4qfv6n8inz] {
    background: white;
    border-radius: 20px;
    padding: 2.5rem;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
    border: 1px solid #e9ecef;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    animation: slideInUp-b-4qfv6n8inz 0.6s ease-out both;
}

    .support-card:nth-child(1)[b-4qfv6n8inz] {
        animation-delay: 0.1s;
    }

    .support-card:nth-child(2)[b-4qfv6n8inz] {
        animation-delay: 0.2s;
    }

    .support-card:nth-child(3)[b-4qfv6n8inz] {
        animation-delay: 0.3s;
    }

    .support-card:nth-child(4)[b-4qfv6n8inz] {
        animation-delay: 0.4s;
    }

@keyframes slideInUp-b-4qfv6n8inz {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.support-card:hover[b-4qfv6n8inz] {
    transform: translateY(-8px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
    border-color: #0066ff;
}

.support-card.featured[b-4qfv6n8inz] {
    background: linear-gradient(135deg, #0066ff 0%, #0052cc 100%);
    color: white;
    position: relative;
    overflow: hidden;
}

    .support-card.featured[b-4qfv6n8inz]::before {
        content: '';
        position: absolute;
        top: -50px;
        right: -50px;
        width: 200px;
        height: 200px;
        background: radial-gradient(circle, rgba(255,255,255,0.15) 0%, transparent 70%);
        border-radius: 50%;
        pointer-events: none;
    }

    .support-card.featured .support-icon[b-4qfv6n8inz] {
        background: rgba(255, 255, 255, 0.25);
        color: white;
        border: 2px solid rgba(255, 255, 255, 0.4);
    }

    .support-card.featured .support-card-title[b-4qfv6n8inz],
    .support-card.featured .support-card-text[b-4qfv6n8inz] {
        color: white;
    }

    .support-card.featured .support-note[b-4qfv6n8inz] {
        background: rgba(255, 255, 255, 0.15);
        border-color: rgba(255, 255, 255, 0.3);
        color: rgba(255, 255, 255, 0.95);
    }

        .support-card.featured .support-note i[b-4qfv6n8inz] {
            color: rgba(255, 255, 255, 0.9);
        }

.support-icon[b-4qfv6n8inz] {
    width: 70px;
    height: 70px;
    border-radius: 16px;
    background: linear-gradient(135deg, #0066ff, #0052cc);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    flex-shrink: 0;
    box-shadow: 0 4px 20px rgba(0, 102, 255, 0.3);
}

.support-content[b-4qfv6n8inz] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    flex: 1;
}

.support-card-title[b-4qfv6n8inz] {
    font-size: 1.4rem;
    font-weight: 700;
    color: #111827;
    margin: 0;
    line-height: 1.3;
}

.support-card-text[b-4qfv6n8inz] {
    color: #6b7280;
    line-height: 1.6;
    margin: 0;
    flex: 1;
}

.support-note[b-4qfv6n8inz] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: #6b7280;
    background: #f8f9fa;
    padding: 0.75rem 1rem;
    border-radius: 10px;
    border: 1px solid #e9ecef;
    margin: 0;
}

    .support-note i[b-4qfv6n8inz] {
        color: #0066ff;
        font-size: 1rem;
    }

/* Buttons */
.btn-support[b-4qfv6n8inz] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 1rem 1.75rem;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
}

    .btn-support.primary[b-4qfv6n8inz] {
        background: white;
        color: #0066ff;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    }

        .btn-support.primary:hover[b-4qfv6n8inz],
        .btn-support.primary:focus[b-4qfv6n8inz] {
            background: #f8f9fa;
            transform: translateY(-2px);
            box-shadow: 0 6px 25px rgba(0, 0, 0, 0.15);
        }

    .btn-support.secondary[b-4qfv6n8inz] {
        background: #0066ff;
        color: white;
        box-shadow: 0 4px 15px rgba(0, 102, 255, 0.25);
    }

        .btn-support.secondary:hover[b-4qfv6n8inz],
        .btn-support.secondary:focus[b-4qfv6n8inz] {
            background: #0052cc;
            transform: translateY(-2px);
            box-shadow: 0 6px 25px rgba(0, 102, 255, 0.4);
        }

    .btn-support:focus-visible[b-4qfv6n8inz] {
        outline: 2px solid #ffd700;
        outline-offset: 2px;
    }

    .btn-support i[b-4qfv6n8inz] {
        font-size: 1.1rem;
    }

/* FAQ Section */
.faq-section[b-4qfv6n8inz] {
    margin-bottom: 5rem;
}

.faq-header[b-4qfv6n8inz] {
    text-align: center;
    margin-bottom: 3rem;
}

.faq-title[b-4qfv6n8inz] {
    font-size: clamp(1.75rem, 4vw, 2.25rem);
    font-weight: 700;
    color: #111827;
    margin-bottom: 0.75rem;
}

.faq-subtitle[b-4qfv6n8inz] {
    font-size: 1.1rem;
    color: #6b7280;
}

.faq-grid[b-4qfv6n8inz] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 1.5rem;
    max-width: 1200px;
    margin: 0 auto;
}

.faq-item[b-4qfv6n8inz] {
    background: white;
    border: 2px solid #e9ecef;
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.3s ease;
}

    .faq-item:hover[b-4qfv6n8inz] {
        border-color: #0066ff;
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    }

    .faq-item[open][b-4qfv6n8inz] {
        border-color: #0066ff;
        box-shadow: 0 8px 30px rgba(0, 102, 255, 0.15);
    }

        .faq-item[open] .faq-question[b-4qfv6n8inz] {
            background: linear-gradient(135deg, #0066ff, #0052cc);
            color: white;
        }

            .faq-item[open] .faq-question i[b-4qfv6n8inz] {
                transform: rotate(90deg);
                color: white;
            }

.faq-question[b-4qfv6n8inz] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem 1.75rem;
    font-size: 1.05rem;
    font-weight: 600;
    color: #111827;
    background: #f8f9fa;
    cursor: pointer;
    transition: all 0.3s ease;
    list-style: none;
    user-select: none;
}

    .faq-question:hover[b-4qfv6n8inz] {
        background: #e9ecef;
    }

    .faq-question i[b-4qfv6n8inz] {
        color: #0066ff;
        font-size: 1rem;
        transition: all 0.3s ease;
        flex-shrink: 0;
    }

    .faq-question[b-4qfv6n8inz]::-webkit-details-marker {
        display: none;
    }

.faq-answer[b-4qfv6n8inz] {
    padding: 1.75rem 2rem;
    font-size: 1rem;
    line-height: 1.7;
    color: #374151;
    background: white;
}

    .faq-answer p[b-4qfv6n8inz] {
        margin: 0;
    }

        .faq-answer p + p[b-4qfv6n8inz] {
            margin-top: 1rem;
        }

/* CTA Section */
.support-cta[b-4qfv6n8inz] {
    background: linear-gradient(135deg, #0066ff 0%, #0052cc 100%);
    border-radius: 24px;
    padding: 4rem 3rem;
    text-align: center;
    position: relative;
    overflow: hidden;
    box-shadow: 0 15px 50px rgba(0, 102, 255, 0.3);
}

    .support-cta[b-4qfv6n8inz]::before {
        content: '';
        position: absolute;
        top: -100px;
        right: -100px;
        width: 300px;
        height: 300px;
        background: radial-gradient(circle, rgba(255,255,255,0.15) 0%, transparent 70%);
        border-radius: 50%;
    }

.cta-content[b-4qfv6n8inz] {
    position: relative;
    z-index: 1;
}

    .cta-content h2[b-4qfv6n8inz] {
        font-size: clamp(1.75rem, 4vw, 2.5rem);
        font-weight: 700;
        color: white;
        margin-bottom: 1rem;
    }

    .cta-content p[b-4qfv6n8inz] {
        font-size: clamp(1rem, 2vw, 1.2rem);
        color: rgba(255, 255, 255, 0.95);
        margin-bottom: 2.5rem;
        max-width: 700px;
        margin-left: auto;
        margin-right: auto;
    }

.cta-buttons[b-4qfv6n8inz] {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.btn-large[b-4qfv6n8inz] {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1.25rem 2.5rem;
    border-radius: 12px;
    font-size: 1.1rem;
    font-weight: 600;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
}

    .btn-large.primary[b-4qfv6n8inz] {
        background: white;
        color: #0066ff;
        box-shadow: 0 6px 25px rgba(0, 0, 0, 0.2);
    }

        .btn-large.primary:hover[b-4qfv6n8inz],
        .btn-large.primary:focus[b-4qfv6n8inz] {
            background: #f8f9fa;
            transform: translateY(-3px);
            box-shadow: 0 10px 35px rgba(0, 0, 0, 0.3);
        }

    .btn-large.secondary[b-4qfv6n8inz] {
        background: transparent;
        color: white;
        border: 2px solid white;
        box-shadow: none;
    }

        .btn-large.secondary:hover[b-4qfv6n8inz],
        .btn-large.secondary:focus[b-4qfv6n8inz] {
            background: rgba(255, 255, 255, 0.15);
            transform: translateY(-3px);
        }

    .btn-large:focus-visible[b-4qfv6n8inz] {
        outline: 2px solid #ffd700;
        outline-offset: 2px;
    }

    .btn-large i[b-4qfv6n8inz] {
        font-size: 1.2rem;
    }

/* Responsive Design */
@media (max-width: 992px) {
    .support-options[b-4qfv6n8inz] {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    }

    .faq-grid[b-4qfv6n8inz] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .support-page[b-4qfv6n8inz] {
        padding: 2.5rem 1.25rem;
    }

    .support-header[b-4qfv6n8inz] {
        margin-bottom: 3rem;
    }

    .support-options[b-4qfv6n8inz] {
        gap: 1.5rem;
        margin-bottom: 4rem;
    }

    .support-card[b-4qfv6n8inz] {
        padding: 2rem;
    }

    .support-icon[b-4qfv6n8inz] {
        width: 60px;
        height: 60px;
        font-size: 1.75rem;
    }

    .faq-section[b-4qfv6n8inz] {
        margin-bottom: 4rem;
    }

    .support-cta[b-4qfv6n8inz] {
        padding: 3rem 2rem;
        border-radius: 20px;
    }

    .cta-buttons[b-4qfv6n8inz] {
        flex-direction: column;
        align-items: stretch;
    }

    .btn-large[b-4qfv6n8inz] {
        width: 100%;
        max-width: 400px;
        margin: 0 auto;
    }
}

@media (max-width: 576px) {
    .support-page[b-4qfv6n8inz] {
        padding: 2rem 1rem;
    }

    .support-card[b-4qfv6n8inz] {
        padding: 1.75rem;
    }

    .support-icon[b-4qfv6n8inz] {
        width: 56px;
        height: 56px;
        font-size: 1.5rem;
    }

    .support-card-title[b-4qfv6n8inz] {
        font-size: 1.2rem;
    }

    .btn-support[b-4qfv6n8inz] {
        padding: 0.875rem 1.5rem;
        font-size: 0.95rem;
    }

    .faq-question[b-4qfv6n8inz] {
        padding: 1.25rem;
        font-size: 0.95rem;
    }

    .faq-answer[b-4qfv6n8inz] {
        padding: 1.25rem;
        font-size: 0.95rem;
    }

    .support-cta[b-4qfv6n8inz] {
        padding: 2.5rem 1.5rem;
    }

    .btn-large[b-4qfv6n8inz] {
        padding: 1rem 2rem;
        font-size: 1rem;
    }
}

/* Accessibility: Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    .support-header[b-4qfv6n8inz],
    .support-card[b-4qfv6n8inz],
    .faq-item[b-4qfv6n8inz],
    .btn-support[b-4qfv6n8inz],
    .btn-large[b-4qfv6n8inz],
    .faq-question i[b-4qfv6n8inz] {
        animation: none;
        transition: none;
    }

        .support-card:hover[b-4qfv6n8inz],
        .btn-support:hover[b-4qfv6n8inz],
        .btn-large:hover[b-4qfv6n8inz] {
            transform: none;
        }
}

/* High Contrast Mode */
@media (prefers-contrast: high) {
    .support-card[b-4qfv6n8inz],
    .faq-item[b-4qfv6n8inz] {
        border-width: 3px;
    }

    .btn-support[b-4qfv6n8inz],
    .btn-large[b-4qfv6n8inz] {
        border: 2px solid currentColor;
    }
}

/* Print Styles */
@media print {
    .support-page[b-4qfv6n8inz] {
        background: white;
        padding: 1rem;
    }

    .breadcrumb[b-4qfv6n8inz],
    .support-cta[b-4qfv6n8inz],
    .btn-support[b-4qfv6n8inz],
    .btn-large[b-4qfv6n8inz] {
        display: none !important;
    }

    .support-card[b-4qfv6n8inz],
    .faq-item[b-4qfv6n8inz] {
        break-inside: avoid;
        page-break-inside: avoid;
        box-shadow: none !important;
    }

    .support-options[b-4qfv6n8inz],
    .faq-grid[b-4qfv6n8inz] {
        display: block !important;
    }

    .support-card[b-4qfv6n8inz],
    .faq-item[b-4qfv6n8inz] {
        margin-bottom: 1rem;
    }
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
    .support-page[b-4qfv6n8inz] {
        background: #1a1a1a;
    }

    .support-card[b-4qfv6n8inz],
    .faq-item[b-4qfv6n8inz] {
        background: #2d2d2d;
        border-color: #404040;
    }

    .support-title[b-4qfv6n8inz],
    .faq-title[b-4qfv6n8inz],
    .support-card-title[b-4qfv6n8inz],
    .faq-question[b-4qfv6n8inz] {
        color: #f9fafb;
    }

    .support-subtitle[b-4qfv6n8inz],
    .faq-subtitle[b-4qfv6n8inz],
    .support-card-text[b-4qfv6n8inz],
    .faq-answer[b-4qfv6n8inz] {
        color: #d1d5db;
    }

    .breadcrumb-item.active[b-4qfv6n8inz],
    .breadcrumb-item + .breadcrumb-item[b-4qfv6n8inz]::before {
        color: #9ca3af;
    }

    .support-note[b-4qfv6n8inz] {
        background: #1a1a1a;
        border-color: #404040;
        color: #d1d5db;
    }

    .faq-question[b-4qfv6n8inz] {
        background: #1a1a1a;
    }

        .faq-question:hover[b-4qfv6n8inz] {
            background: #2d2d2d;
        }
}
/* _content/BotomixNew/Components/Pages/WizardProgress.razor.rz.scp.css */
/* Wizard Progress Component */
.wizard-progress[b-0g19cynlbq] {
    margin-bottom: 40px;
}

.progress-bar-container[b-0g19cynlbq] {
    height: 8px;
    background: #e2e8f0;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 12px;
}

.progress-bar[b-0g19cynlbq] {
    height: 100%;
    background: linear-gradient(90deg, #0066ff, #00a3ff);
    border-radius: 10px;
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 8px rgba(0, 102, 255, 0.3);
}

.progress-text[b-0g19cynlbq] {
    text-align: center;
    color: #718096;
    font-size: 0.9rem;
    font-weight: 600;
}

/* ========================================
   ACCESSIBILITY ENHANCEMENTS
   ======================================== */

/* Visually Hidden for Screen Readers */
.visually-hidden[b-0g19cynlbq] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
    .progress-bar-container[b-0g19cynlbq] {
        border: 2px solid currentColor;
    }

    .progress-bar[b-0g19cynlbq] {
        background: #0066ff;
    }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    .progress-bar[b-0g19cynlbq] {
        transition: none;
    }
}

/* Print Styles */
@media print {
    .wizard-progress[b-0g19cynlbq] {
        border: 1px solid #ddd;
        padding: 0.5rem;
        margin-bottom: 1rem;
    }

    .progress-bar-container[b-0g19cynlbq] {
        display: none;
    }

    .progress-text[b-0g19cynlbq] {
        text-align: left;
        font-size: 0.9rem;
    }
}