```
/* ==================================================
   VARIABLEN
================================================== */

:root {

    --primary: #6c5ce7;
    --primary-dark: #5848d9;
    --secondary: #a855f7;

    --background: #f8f7fc;

    --text: #18181b;
    --text-light: #71717a;

    --white: #ffffff;

    --border: #e4e4e7;

    --success: #16a34a;
    --success-bg: #dcfce7;

    --danger: #dc2626;
    --danger-bg: #fee2e2;
}


/* ==================================================
   ALLGEMEIN
================================================== */

* {
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body {

    margin: 0;

    min-height: 100vh;

    font-family:
            Inter,
            system-ui,
            -apple-system,
            BlinkMacSystemFont,
            "Segoe UI",
            sans-serif;

    color: var(--text);

    background:
            radial-gradient(
                    circle at 50% -100px,
                    #e7e2ff 0,
                    transparent 520px
            ),
            var(--background);
}


/* ==================================================
   NAVBAR
================================================== */

.navbar {

    padding:
            18px
            0;

    background:
            rgba(
                    255,
                    255,
                    255,
                    0.78
            );

    border-bottom:
            1px solid
            rgba(
                    0,
                    0,
                    0,
                    0.05
            );

    backdrop-filter:
            blur(18px);

    -webkit-backdrop-filter:
            blur(18px);

    position: sticky;

    top: 0;

    z-index: 100;
}


.navbar-brand {

    display: flex;

    align-items: center;

    gap: 11px;

    color: var(--text);

    text-decoration: none;

    font-size: 19px;

    font-weight: 750;
}


.navbar-brand:hover {
    color: var(--text);
}


.brand-icon {

    width: 40px;

    height: 40px;

    display: flex;

    justify-content: center;

    align-items: center;

    border-radius: 12px;

    background:
            linear-gradient(
                    135deg,
                    var(--primary),
                    var(--secondary)
            );

    color: white;

    box-shadow:
            0 8px 22px
            rgba(
                    108,
                    92,
                    231,
                    0.28
            );
}


.nav-right {

    display: flex;

    align-items: center;
}


.free-badge {

    padding:
            7px
            13px;

    border:
            1px solid
            #ddd6fe;

    border-radius: 100px;

    background: #f3f0ff;

    color: #6d28d9;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 1px;
}


/* ==================================================
   HERO
================================================== */

.hero {

    padding:
            75px
            0
            50px;
}


.hero-badge {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    margin-bottom: 22px;

    padding:
            8px
            15px;

    border:
            1px solid
            #ddd6fe;

    border-radius: 100px;

    background:
            rgba(
                    255,
                    255,
                    255,
                    0.75
            );

    color: var(--primary);

    font-size: 13px;

    font-weight: 700;
}


.hero h1 {

    margin:
            0
            0
            20px;

    font-size:
            clamp(
                    43px,
                    7vw,
                    72px
            );

    font-weight: 850;

    letter-spacing: -3px;

    line-height: 1.02;
}


.hero h1 span {

    background:
            linear-gradient(
                    90deg,
                    var(--primary),
                    var(--secondary)
            );

    -webkit-background-clip: text;

    background-clip: text;

    color: transparent;
}


.hero-text {

    max-width: 680px;

    margin:
            0
            auto;

    color: var(--text-light);

    font-size: 18px;

    line-height: 1.7;
}


/* ==================================================
   MAIN
================================================== */

.main-container {

    padding-bottom: 90px;
}


/* ==================================================
   DESIGN CARD
================================================== */

.design-card {

    position: relative;

    padding: 40px;

    overflow: hidden;

    border:
            1px solid
            rgba(
                    255,
                    255,
                    255,
                    0.9
            );

    border-radius: 25px;

    background:
            rgba(
                    255,
                    255,
                    255,
                    0.93
            );

    box-shadow:
            0 25px 80px
            rgba(
                    37,
                    28,
                    90,
                    0.09
            );

    backdrop-filter:
            blur(12px);
}


.design-card::before {

    content: "";

    position: absolute;

    width: 250px;

    height: 250px;

    top: -150px;

    right: -120px;

    border-radius: 50%;

    background:
            rgba(
                    168,
                    85,
                    247,
                    0.08
            );

    pointer-events: none;
}


/* ==================================================
   CARD HEADER
================================================== */

.card-header-custom {

    display: flex;

    align-items: center;

    gap: 16px;

    margin-bottom: 32px;
}


.header-icon {

    flex-shrink: 0;

    width: 54px;

    height: 54px;

    display: flex;

    justify-content: center;

    align-items: center;

    border-radius: 16px;

    background:
            linear-gradient(
                    135deg,
                    var(--primary),
                    var(--secondary)
            );

    color: white;

    font-size: 23px;

    box-shadow:
            0 12px 30px
            rgba(
                    108,
                    92,
                    231,
                    0.28
            );
}


.card-header-custom h2 {

    margin: 0;

    font-size: 24px;

    font-weight: 780;
}


.card-header-custom p {

    margin:
            5px
            0
            0;

    color: var(--text-light);

    font-size: 14px;
}


/* ==================================================
   FORMULAR
================================================== */

.form-section {

    margin-bottom: 24px;
}


.form-label {

    margin-bottom: 8px;

    color: #27272a;

    font-size: 14px;

    font-weight: 700;
}


.optional {

    margin-left: 5px;

    color: #a1a1aa;

    font-size: 11px;

    font-weight: 500;
}


.form-control,
.form-select {

    min-height: 54px;

    padding:
            13px
            15px;

    border:
            1px solid
            var(--border);

    border-radius: 12px;

    background: #fafafa;

    color: var(--text);

    font-size: 15px;

    transition:
            border-color 0.2s ease,
            box-shadow 0.2s ease,
            background 0.2s ease;
}


.form-control:hover,
.form-select:hover {

    border-color: #c4b5fd;
}


.form-control:focus,
.form-select:focus {

    border-color: var(--primary);

    background: white;

    box-shadow:
            0 0 0 4px
            rgba(
                    108,
                    92,
                    231,
                    0.11
            );
}


textarea.form-control {

    min-height: 110px;

    resize: vertical;
}


.textarea-large {

    min-height: 135px !important;
}


.form-hint {

    margin-top: 7px;

    color: #a1a1aa;

    font-size: 12px;
}


/* ==================================================
   INPUT ICON
================================================== */

.input-with-icon {

    position: relative;
}


.input-with-icon i {

    position: absolute;

    left: 16px;

    top: 50%;

    z-index: 5;

    transform:
            translateY(-50%);

    color: #a1a1aa;
}


.input-with-icon input {

    padding-left: 44px;
}


/* ==================================================
   GENERATION INFO
================================================== */

.generation-info {

    display: flex;

    flex-wrap: wrap;

    gap: 9px;

    margin:
            5px
            0
            22px;
}


.info-pill {

    display: inline-flex;

    align-items: center;

    gap: 6px;

    padding:
            7px
            11px;

    border:
            1px solid
            #eeeef1;

    border-radius: 9px;

    background: #f7f7f8;

    color: #71717a;

    font-size: 12px;
}


/* ==================================================
   GENERIEREN BUTTON
================================================== */

.generate-button {

    position: relative;

    width: 100%;

    min-height: 60px;

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 9px;

    overflow: hidden;

    border: 0;

    border-radius: 14px;

    background:
            linear-gradient(
                    135deg,
                    var(--primary),
                    var(--secondary)
            );

    color: white;

    font-size: 16px;

    font-weight: 750;

    cursor: pointer;

    box-shadow:
            0 14px 32px
            rgba(
                    108,
                    92,
                    231,
                    0.27
            );

    transition:
            transform 0.2s ease,
            box-shadow 0.2s ease;
}


.generate-button:hover {

    transform:
            translateY(-2px);

    box-shadow:
            0 18px 40px
            rgba(
                    108,
                    92,
                    231,
                    0.36
            );
}


.generate-button:active {

    transform:
            translateY(0);
}


.generate-button:disabled {

    opacity: 0.65;

    cursor: not-allowed;

    transform: none;
}


/* ==================================================
   MELDUNGEN
================================================== */

.custom-message {

    max-width: 920px;

    margin:
            0
            auto
            25px;

    padding:
            15px
            18px;

    display: flex;

    align-items: center;

    gap: 10px;

    border-radius: 13px;

    font-size: 14px;

    font-weight: 600;
}


.success-message {

    background: var(--success-bg);

    color: #166534;
}


.error-message {

    background: var(--danger-bg);

    color: #991b1b;
}


/* ==================================================
   ERGEBNIS
================================================== */

.result-card {

    margin-top: 38px;

    padding: 40px;

    border:
            1px solid
            var(--border);

    border-radius: 25px;

    background: white;

    text-align: center;

    box-shadow:
            0 25px 75px
            rgba(
                    37,
                    28,
                    90,
                    0.08
            );
}


.success-icon {

    width: 60px;

    height: 60px;

    margin:
            0
            auto
            14px;

    display: flex;

    justify-content: center;

    align-items: center;

    border-radius: 50%;

    background:
            linear-gradient(
                    135deg,
                    #dcfce7,
                    #bbf7d0
            );

    color: #16a34a;

    font-size: 30px;
}


.ready-badge {

    display: inline-flex;

    align-items: center;

    gap: 5px;

    margin-bottom: 12px;

    padding:
            6px
            10px;

    border-radius: 100px;

    background: #ecfdf5;

    color: #15803d;

    font-size: 11px;

    font-weight: 750;
}


.result-card h2 {

    margin-bottom: 9px;

    font-size: 29px;

    font-weight: 800;
}


.result-subtitle {

    margin-bottom: 27px;

    color: var(--text-light);
}


/* ==================================================
   BILDVORSCHAU
================================================== */

.image-preview {

    width: 100%;

    min-height: 300px;

    padding: 28px;

    margin-bottom: 25px;

    display: flex;

    justify-content: center;

    align-items: center;

    overflow: hidden;

    border:
            1px solid
            var(--border);

    border-radius: 19px;

    background-color: white;

    /*
       Transparenz-Schachbrett
    */

    background-image:

            linear-gradient(
                    45deg,
                    #eeeeee 25%,
                    transparent 25%
            ),

            linear-gradient(
                    -45deg,
                    #eeeeee 25%,
                    transparent 25%
            ),

            linear-gradient(
                    45deg,
                    transparent 75%,
                    #eeeeee 75%
            ),

            linear-gradient(
                    -45deg,
                    transparent 75%,
                    #eeeeee 75%
            );

    background-size:
            24px
            24px;

    background-position:
            0 0,
            0 12px,
            12px -12px,
            -12px 0;
}


.generated-image {

    display: block;

    width: 100%;

    max-width: 560px;

    height: auto;

    object-fit: contain;
}


/* ==================================================
   DOWNLOAD BUTTON
================================================== */

.download-button {

    width: 100%;

    min-height: 56px;

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 9px;

    margin-bottom: 12px;

    border-radius: 13px;

    background:
            linear-gradient(
                    135deg,
                    var(--primary),
                    var(--secondary)
            );

    color: white;

    text-decoration: none;

    font-weight: 750;

    transition:
            transform 0.2s ease,
            opacity 0.2s ease;
}


.download-button:hover {

    color: white;

    transform:
            translateY(-1px);

    opacity: 0.94;
}


/* ==================================================
   NEUES DESIGN
================================================== */

.new-design-button {

    width: 100%;

    min-height: 54px;

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 8px;

    border:
            1px solid
            var(--border);

    border-radius: 13px;

    background: white;

    color: var(--text);

    text-decoration: none;

    font-weight: 650;

    transition:
            background 0.2s ease,
            border 0.2s ease;
}


.new-design-button:hover {

    background: #fafafa;

    border-color: #c4b5fd;

    color: var(--text);
}


/* ==================================================
   FOOTER
================================================== */

footer {

    padding:
            30px
            0;

    border-top:
            1px solid
            rgba(
                    0,
                    0,
                    0,
                    0.04
            );

    color: #a1a1aa;

    font-size: 12px;
}


.footer-content {

    display: flex;

    justify-content: space-between;

    align-items: center;
}


/* ==================================================
   LOADING OVERLAY
================================================== */

.loading-overlay {

    position: fixed;

    inset: 0;

    z-index: 9999;

    padding: 20px;

    display: flex;

    justify-content: center;

    align-items: center;

    background:
            rgba(
                    20,
                    17,
                    38,
                    0.60
            );

    backdrop-filter:
            blur(13px);

    -webkit-backdrop-filter:
            blur(13px);

    opacity: 0;

    visibility: hidden;

    transition:
            opacity 0.25s ease,
            visibility 0.25s ease;
}


.loading-overlay.active {

    opacity: 1;

    visibility: visible;
}


/* ==================================================
   LOADING CARD
================================================== */

.loading-card {

    width: 100%;

    max-width: 470px;

    padding:
            45px
            38px;

    border:
            1px solid
            rgba(
                    255,
                    255,
                    255,
                    0.8
            );

    border-radius: 26px;

    background:
            rgba(
                    255,
                    255,
                    255,
                    0.98
            );

    text-align: center;

    box-shadow:
            0 35px 110px
            rgba(
                    0,
                    0,
                    0,
                    0.30
            );

    animation:
            loadingCardOpen
            0.3s
            ease;
}


@keyframes loadingCardOpen {

    from {

        transform:
                translateY(15px)
                scale(0.97);

        opacity: 0;

    }

    to {

        transform:
                translateY(0)
                scale(1);

        opacity: 1;

    }

}


/* ==================================================
   AI LOADER
================================================== */

.ai-loader {

    width: 76px;

    height: 76px;

    margin:
            0
            auto
            20px;

    display: flex;

    justify-content: center;

    align-items: center;

    border-radius: 22px;

    background:
            linear-gradient(
                    135deg,
                    var(--primary),
                    var(--secondary)
            );

    color: white;

    box-shadow:
            0 15px 40px
            rgba(
                    108,
                    92,
                    231,
                    0.35
            );
}


.ai-loader .spinner-border {

    width: 37px;

    height: 37px;

    border-width: 4px;
}


/* ==================================================
   LOADING TEXT
================================================== */

.loading-badge {

    display: inline-flex;

    align-items: center;

    gap: 6px;

    margin-bottom: 13px;

    padding:
            6px
            10px;

    border-radius: 100px;

    background: #f3f0ff;

    color: var(--primary);

    font-size: 11px;

    font-weight: 750;
}


.loading-card h2 {

    margin-bottom: 12px;

    font-size: 26px;

    font-weight: 800;
}


.loading-card p {

    max-width: 360px;

    margin:
            0
            auto
            24px;

    color: var(--text-light);

    line-height: 1.6;
}


/* ==================================================
   LOADING PROGRESS
================================================== */

.loading-progress {

    width: 100%;

    height: 7px;

    margin-bottom: 17px;

    overflow: hidden;

    border-radius: 100px;

    background: #ede9fe;
}


.loading-progress-bar {

    width: 40%;

    height: 100%;

    border-radius: 100px;

    background:
            linear-gradient(
                    90deg,
                    var(--primary),
                    var(--secondary)
            );

    animation:
            progressAnimation
            1.6s
            infinite
            ease-in-out;
}


@keyframes progressAnimation {

    0% {

        transform:
                translateX(-120%);

    }

    100% {

        transform:
                translateX(350%);

    }

}


/* ==================================================
   LOADING STATUS
================================================== */

.loading-status {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 8px;

    margin-bottom: 17px;

    color: var(--primary);

    font-size: 13px;

    font-weight: 700;
}


.status-dot {

    width: 8px;

    height: 8px;

    border-radius: 50%;

    background: var(--primary);

    animation:
            statusPulse
            1.3s
            infinite;
}


@keyframes statusPulse {

    0%,
    100% {

        opacity: 0.35;

        transform:
                scale(0.8);

    }

    50% {

        opacity: 1;

        transform:
                scale(1.25);

    }

}


.loading-card small {

    color: #a1a1aa;

    font-size: 12px;
}


/* ==================================================
   TABLET
================================================== */

@media (
    max-width: 768px
) {

    .hero {

        padding:
                55px
                0
                35px;

    }


    .hero h1 {

        letter-spacing: -2px;

    }


    .hero-text {

        padding:
                0
                15px;

        font-size: 16px;

    }


    .design-card,
    .result-card {

        padding: 26px;

        border-radius: 20px;

    }


    .card-header-custom {

        align-items: flex-start;

    }


    .generation-info {

        flex-direction: column;

        align-items: stretch;

    }


    .image-preview {

        padding: 15px;

    }


    .footer-content {

        flex-direction: column;

        gap: 8px;

    }

}


/* ==================================================
   SMARTPHONE
================================================== */

@media (
    max-width: 480px
) {

    .navbar {

        padding:
                13px
                0;

    }


    .navbar-brand {

        font-size: 16px;

    }


    .brand-icon {

        width: 35px;

        height: 35px;

    }


    .hero {

        padding:
                42px
                0
                28px;

    }


    .hero h1 {

        font-size: 42px;

        letter-spacing: -1.7px;

    }


    .design-card,
    .result-card {

        padding: 21px;

    }


    .header-icon {

        width: 47px;

        height: 47px;

    }


    .loading-card {

        padding:
                35px
                22px;

    }

}

/* ==================================================
   STATUS PAGE
================================================== */

.status-hero,
.result-hero {
    padding-bottom: 35px;
}


.status-page-card {

    padding: 45px;

    border:
            1px solid
            rgba(
                    255,
                    255,
                    255,
                    0.9
            );

    border-radius: 25px;

    background:
            rgba(
                    255,
                    255,
                    255,
                    0.95
            );

    text-align: center;

    box-shadow:
            0 25px 80px
            rgba(
                    37,
                    28,
                    90,
                    0.09
            );
}


/* ==================================================
   STATUS LOADER
================================================== */

.status-loader {

    width: 78px;

    height: 78px;

    margin:
            0
            auto
            20px;

    display: flex;

    justify-content: center;

    align-items: center;

    border-radius: 22px;

    background:
            linear-gradient(
                    135deg,
                    var(--primary),
                    var(--secondary)
            );

    color: white;

    box-shadow:
            0 15px 40px
            rgba(
                    108,
                    92,
                    231,
                    0.32
            );
}


.status-loader .spinner-border {

    width: 38px;

    height: 38px;

    border-width: 4px;
}


/* ==================================================
   STATUS BADGE
================================================== */

.status-working-badge {

    display: inline-flex;

    align-items: center;

    gap: 7px;

    margin-bottom: 15px;

    padding:
            7px
            12px;

    border-radius: 100px;

    background: #f3f0ff;

    color: var(--primary);

    font-size: 12px;

    font-weight: 750;
}


.status-page-card h2 {

    margin-bottom: 10px;

    font-size: 29px;

    font-weight: 800;
}


.status-description {

    max-width: 500px;

    margin:
            0
            auto
            27px;

    color: var(--text-light);

    line-height: 1.6;
}


/* ==================================================
   STATUS PROGRESS
================================================== */

.status-progress {

    width: 100%;

    height: 8px;

    margin-bottom: 27px;

    overflow: hidden;

    border-radius: 100px;

    background: #ede9fe;
}


.status-progress-bar {

    width: 38%;

    height: 100%;

    border-radius: 100px;

    background:
            linear-gradient(
                    90deg,
                    var(--primary),
                    var(--secondary)
            );

    animation:
            statusProgressAnimation
            1.6s
            infinite
            ease-in-out;
}


@keyframes statusProgressAnimation {

    0% {
        transform: translateX(-120%);
    }

    100% {
        transform: translateX(370%);
    }

}


/* ==================================================
   CURRENT STATUS
================================================== */

.current-status-box {

    display: flex;

    align-items: center;

    gap: 13px;

    padding: 16px;

    margin-bottom: 18px;

    border:
            1px solid
            var(--border);

    border-radius: 14px;

    background: #fafafa;

    text-align: left;
}


.current-status-icon {

    flex-shrink: 0;

    width: 43px;

    height: 43px;

    display: flex;

    justify-content: center;

    align-items: center;

    border-radius: 12px;

    background: #f3f0ff;

    color: var(--primary);

    font-size: 18px;
}


.current-status-label {

    display: block;

    margin-bottom: 2px;

    color: #a1a1aa;

    font-size: 11px;
}


.current-status-box strong {

    font-size: 14px;
}


.design-id {

    margin-bottom: 20px;

    color: #a1a1aa;

    font-size: 12px;
}


.design-id strong {

    color: var(--text);
}


/* ==================================================
   STATUS HINWEIS
================================================== */

.status-hint {

    margin:
            20px
            0
            0;

    color: #a1a1aa;

    font-size: 12px;
}


/* ==================================================
   STATUS FEHLER
================================================== */

.status-error-box {

    display: none;

    align-items: flex-start;

    gap: 10px;

    padding: 15px;

    margin-top: 15px;

    border-radius: 13px;

    background: var(--danger-bg);

    color: #991b1b;

    text-align: left;

    font-size: 13px;
}


.status-error-box.active {
    display: flex;
}


/* ==================================================
   RESULT PAGE
================================================== */

.result-page-card {

    margin-top: 0;
}


/* ==================================================
   DESIGN DETAILS
================================================== */

.result-details {

    display: grid;

    grid-template-columns:
            repeat(
                    3,
                    1fr
            );

    gap: 10px;

    margin-bottom: 24px;
}


.result-detail {

    padding: 14px;

    border:
            1px solid
            var(--border);

    border-radius: 12px;

    background: #fafafa;

    text-align: left;
}


.result-detail span {

    display: block;

    margin-bottom: 4px;

    color: #a1a1aa;

    font-size: 11px;
}


.result-detail strong {

    display: block;

    overflow: hidden;

    color: var(--text);

    font-size: 13px;

    text-overflow: ellipsis;

    white-space: nowrap;
}


/* ==================================================
   RESULT FEHLER
================================================== */

.result-error-icon {

    width: 60px;

    height: 60px;

    margin:
            0
            auto
            14px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: var(--danger-bg);

    color: var(--danger);

    font-size: 27px;
}


.error-result-badge {

    display: inline-flex;

    margin-bottom: 12px;

    padding:
            6px
            11px;

    border-radius: 100px;

    background: var(--danger-bg);

    color: #991b1b;

    font-size: 11px;

    font-weight: 750;
}


.result-error-message {

    padding: 16px;

    margin-bottom: 22px;

    border-radius: 13px;

    background: #fff7f7;

    color: #991b1b;

    font-size: 13px;

    text-align: left;
}


/* ==================================================
   MOBILE STATUS / RESULT
================================================== */

@media (max-width: 768px) {

    .status-page-card {
        padding: 28px;
    }


    .result-details {
        grid-template-columns: 1fr;
    }

}


/* ==================================================
   REWARD PAGE
================================================== */

.reward-hero {
    padding-bottom: 35px;
}


.reward-card {

    padding: 45px;

    border:
            1px solid
            rgba(255, 255, 255, 0.9);

    border-radius: 25px;

    background:
            rgba(255, 255, 255, 0.96);

    text-align: center;

    box-shadow:
            0 25px 80px
            rgba(37, 28, 90, 0.09);
}


/* ==================================================
   REWARD ICON
================================================== */

.reward-main-icon {

    width: 72px;

    height: 72px;

    margin:
            0
            auto
            18px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 21px;

    background:
            linear-gradient(
                    135deg,
                    var(--primary),
                    var(--secondary)
            );

    color: white;

    font-size: 30px;

    box-shadow:
            0 15px 38px
            rgba(108, 92, 231, 0.30);
}


/* ==================================================
   TEST BADGE
================================================== */

.reward-test-badge {

    display: inline-flex;

    align-items: center;

    gap: 6px;

    margin-bottom: 13px;

    padding:
            6px
            11px;

    border-radius: 100px;

    background: #fff7ed;

    color: #c2410c;

    font-size: 11px;

    font-weight: 750;
}


.reward-card h2 {

    margin-bottom: 10px;

    font-size: 30px;

    font-weight: 800;
}


.reward-description {

    max-width: 520px;

    margin:
            0
            auto
            26px;

    color: var(--text-light);

    line-height: 1.65;
}


/* ==================================================
   AUFTRAG INFO
================================================== */

.reward-order-box {

    display: grid;

    grid-template-columns:
            1fr
            1fr;

    gap: 10px;

    margin-bottom: 24px;
}


.reward-order-box > div {

    padding: 14px;

    border:
            1px solid
            var(--border);

    border-radius: 12px;

    background: #fafafa;

    text-align: left;
}


.reward-order-label {

    display: block;

    margin-bottom: 3px;

    color: #a1a1aa;

    font-size: 11px;
}


.reward-order-box strong {

    display: block;

    overflow: hidden;

    font-size: 13px;

    text-overflow: ellipsis;

    white-space: nowrap;
}


/* ==================================================
   INFO
================================================== */

.reward-info-box {

    display: flex;

    align-items: flex-start;

    gap: 9px;

    padding: 14px;

    margin-bottom: 17px;

    border-radius: 12px;

    background: #f3f0ff;

    color: #5b4acb;

    text-align: left;

    font-size: 13px;
}


/* ==================================================
   START BUTTON
================================================== */

.reward-start-button {

    width: 100%;

    min-height: 58px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    border: none;

    border-radius: 14px;

    background:
            linear-gradient(
                    135deg,
                    var(--primary),
                    var(--secondary)
            );

    color: white;

    font-size: 16px;

    font-weight: 750;

    cursor: pointer;

    box-shadow:
            0 14px 32px
            rgba(108, 92, 231, 0.27);
}


.reward-start-button:hover {

    transform:
            translateY(-1px);
}


.reward-small-text {

    margin:
            13px
            0
            0;

    color: #a1a1aa;

    font-size: 11px;
}


/* ==================================================
   TEST AD
================================================== */

.test-ad-area {

    display: none;

    margin-top: 10px;

    overflow: hidden;

    border:
            1px solid
            var(--border);

    border-radius: 18px;

    background: #fafafa;
}


.test-ad-area.active {
    display: block;
}


.test-ad-header {

    padding:
            9px
            13px;

    display: flex;

    justify-content: space-between;

    align-items: center;

    border-bottom:
            1px solid
            var(--border);

    color: #71717a;

    font-size: 10px;
}


.test-label {

    padding:
            3px
            6px;

    border-radius: 5px;

    background: #e4e4e7;

    font-weight: 750;
}


.test-ad-content {

    padding:
            35px
            25px;
}


.test-ad-logo {

    width: 55px;

    height: 55px;

    margin:
            0
            auto
            13px;

    display: flex;

    justify-content: center;

    align-items: center;

    border-radius: 15px;

    background:
            linear-gradient(
                    135deg,
                    var(--primary),
                    var(--secondary)
            );

    color: white;

    font-size: 22px;
}


.test-ad-content h3 {

    font-size: 20px;

    font-weight: 750;
}


.test-ad-content p {

    max-width: 400px;

    margin:
            0
            auto
            20px;

    color: var(--text-light);

    font-size: 13px;

    line-height: 1.6;
}


.ad-countdown {

    margin-bottom: 13px;

    color: var(--text-light);

    font-size: 13px;
}


.ad-countdown strong {

    color: var(--primary);

    font-size: 18px;
}


/* ==================================================
   REWARD PROGRESS
================================================== */

.reward-progress {

    width: 100%;

    height: 7px;

    overflow: hidden;

    border-radius: 100px;

    background: #ede9fe;
}


.reward-progress-bar {

    width: 0;

    height: 100%;

    border-radius: 100px;

    background:
            linear-gradient(
                    90deg,
                    var(--primary),
                    var(--secondary)
            );

    transition:
            width 0.8s linear;
}


/* ==================================================
   REWARD SUCCESS
================================================== */

.reward-success {

    display: none;

    padding:
            25px
            0
            5px;
}


.reward-success.active {
    display: block;
}


.reward-success-icon {

    width: 58px;

    height: 58px;

    margin:
            0
            auto
            13px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: #dcfce7;

    color: #16a34a;

    font-size: 28px;
}


.reward-success h3 {

    font-size: 22px;

    font-weight: 800;
}


.reward-success p {

    color: var(--text-light);
}


.reward-loading {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    color: var(--primary);

    font-size: 13px;

    font-weight: 700;
}


/* ==================================================
   REWARD ERROR
================================================== */

.reward-error {

    display: none;

    align-items: flex-start;

    gap: 9px;

    padding: 14px;

    margin-top: 18px;

    border-radius: 12px;

    background: var(--danger-bg);

    color: #991b1b;

    text-align: left;

    font-size: 13px;
}


.reward-error.active {
    display: flex;
}


/* ==================================================
   MOBILE
================================================== */

@media (max-width: 768px) {

    .reward-card {
        padding: 27px;
    }


    .reward-order-box {
        grid-template-columns: 1fr;
    }

}

/* ==================================================
   AUTH PAGE
================================================== */

.auth-hero {
    padding-bottom: 35px;
}

.auth-card {
    max-width: 620px;
    margin: 0 auto;
    padding: 42px;
    border: 1px solid rgba(255, 255, 255, 0.95);
    border-radius: 26px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 25px 80px rgba(37, 28, 90, 0.10);
}

.auth-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 18px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 18px;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    color: white;
    font-size: 25px;
    box-shadow: 0 14px 35px rgba(108, 92, 231, 0.28);
}

.auth-card h2 {
    margin-bottom: 7px;
    text-align: center;
    font-size: 29px;
    font-weight: 800;
}

.auth-description {
    max-width: 440px;
    margin: 0 auto 30px;
    color: var(--text-light);
    text-align: center;
    line-height: 1.6;
}

.auth-input-wrapper {
    position: relative;
}

.auth-input-icon {
    position: absolute;
    left: 17px;
    top: 50%;
    z-index: 3;
    transform: translateY(-50%);
    color: #a1a1aa;
    font-size: 16px;
    pointer-events: none;
}

.auth-input-with-icon {
    padding-left: 47px;
}

.password-field {
    position: relative;
    width: 100%;
}

.password-input {
    width: 100%;
    padding-right: 58px;
}

.password-toggle {
    position: absolute;
    top: 50%;
    right: 10px;
    z-index: 5;
    width: 40px;
    height: 40px;
    padding: 0;
    transform: translateY(-50%);
    display: flex;
    justify-content: center;
    align-items: center;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: #8b8b96;
    font-size: 18px;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

.password-toggle:hover {
    background: #f0edff;
    color: var(--primary);
}

.password-toggle:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(108, 92, 231, 0.12);
}

.auth-primary-button {
    width: 100%;
    min-height: 58px;
    margin-top: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 9px;
    border: none;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    color: white;
    font-size: 15px;
    font-weight: 750;
    cursor: pointer;
    box-shadow: 0 14px 32px rgba(108, 92, 231, 0.27);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.auth-primary-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 40px rgba(108, 92, 231, 0.35);
}

.auth-divider {
    position: relative;
    margin: 30px 0 24px;
    text-align: center;
}

.auth-divider::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 1px;
    background: var(--border);
}

.auth-divider span {
    position: relative;
    z-index: 2;
    padding: 0 14px;
    background: white;
    color: #a1a1aa;
    font-size: 12px;
}

.existing-account {
    margin-bottom: 16px;
    text-align: center;
}

.existing-account p {
    margin-bottom: 11px;
    color: var(--text-light);
    font-size: 13px;
}

.auth-secondary-button {
    width: 100%;
    min-height: 54px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--border);
    border-radius: 13px;
    background: white;
    color: var(--text);
    text-decoration: none;
    font-size: 14px;
    font-weight: 700;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.auth-secondary-button:hover {
    background: #faf9ff;
    border-color: #c4b5fd;
    color: var(--primary);
    transform: translateY(-1px);
}

.guest-button {
    width: 100%;
    margin-top: 12px;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 13px;
    border: 1px solid #ede9fe;
    border-radius: 14px;
    background: linear-gradient(135deg, #faf9ff, #f6f4ff);
    color: var(--text);
    text-decoration: none;
    transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.guest-button:hover {
    border-color: #c4b5fd;
    color: var(--text);
    transform: translateY(-1px);
    box-shadow: 0 8px 24px rgba(108, 92, 231, 0.08);
}

.guest-button-icon {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 11px;
    background: white;
    color: var(--primary);
    font-size: 18px;
}

.guest-button-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    text-align: left;
}

.guest-button-text strong {
    margin-bottom: 2px;
    font-size: 13px;
}

.guest-button-text span {
    color: var(--text-light);
    font-size: 11px;
}

.guest-arrow {
    color: #a1a1aa;
    font-size: 16px;
}

.auth-error {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 14px;
    margin-bottom: 22px;
    border-radius: 12px;
    background: var(--danger-bg);
    color: #991b1b;
    font-size: 13px;
}

@media (max-width: 768px) {
    .auth-card {
        padding: 27px;
        border-radius: 20px;
    }

    .auth-card h2 {
        font-size: 25px;
    }
}


/* ==================================================
   CHROME-SICHERE DARSTELLUNG
================================================== */

/* Hero-Text nicht mehr transparent machen */
.hero h1 span {
    display: inline-block !important;

    background: none !important;

    color: #7c3aed !important;

    -webkit-text-fill-color: #7c3aed !important;
}


/* Icons mit festem Hintergrund */
.brand-icon,
.header-icon,
.auth-icon,
.reward-main-icon,
.test-ad-logo,
.ai-loader,
.status-loader {

    background: #7c3aed !important;

    background-image: none !important;

    color: #ffffff !important;
}


/* Hauptbuttons */
.generate-button,
.auth-primary-button,
.reward-start-button,
.download-button {

    background: #7c3aed !important;

    background-image: none !important;

    color: #ffffff !important;
}


/* Hover */
.generate-button:hover,
.auth-primary-button:hover,
.reward-start-button:hover,
.download-button:hover {

    background: #6d28d9 !important;

    color: #ffffff !important;
}


/* Icons innerhalb der Flächen immer sichtbar */
.brand-icon i,
.header-icon i,
.auth-icon i,
.reward-main-icon i,
.test-ad-logo i,
.ai-loader i,
.status-loader i {

    color: #ffffff !important;

    -webkit-text-fill-color: #ffffff !important;
}



/* ==================================================
   BROWSER-ÜBERGREIFENDES LAYOUT
   Ziel: Edge-Look auch in Chrome
================================================== */


/* --------------------------------------------------
   Hintergrund
-------------------------------------------------- */

html,
body {
    width: 100%;
    min-height: 100%;
}

body {
    margin: 0;

    background:
        radial-gradient(
            circle at 50% 0,
            #ebe8ff 0,
            #f7f6fd 38%,
            #f8f7fc 72%
        ) !important;

    color: #18181b;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


/* --------------------------------------------------
   Bootstrap Container vereinheitlichen
-------------------------------------------------- */

.container {
    width: 100%;

    max-width: 1320px;

    margin-left: auto;
    margin-right: auto;

    padding-left: 24px;
    padding-right: 24px;
}


/* --------------------------------------------------
   Navbar
-------------------------------------------------- */

.navbar {
    min-height: 70px;

    padding: 0 !important;

    background:
        rgba(
            255,
            255,
            255,
            0.82
        ) !important;

    border-bottom:
        1px solid
        rgba(
            20,
            20,
            40,
            0.05
        );

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}


.navbar .container {
    min-height: 70px;

    display: flex;
    align-items: center;
}


/* --------------------------------------------------
   Logo
-------------------------------------------------- */

.brand-icon {
    width: 42px !important;
    height: 42px !important;

    border-radius: 12px !important;

    background: #7c3aed !important;

    color: #ffffff !important;

    box-shadow:
        0 9px 25px
        rgba(
            124,
            58,
            237,
            0.28
        ) !important;
}


/* --------------------------------------------------
   Hero
-------------------------------------------------- */

.hero {
    padding:
        76px
        0
        52px !important;
}


.hero .container {
    max-width: 1100px;
}


.hero-badge {
    margin-bottom: 25px;
}


.hero h1 {
    margin:
        0
        auto
        20px !important;

    font-size:
        clamp(
            52px,
            5vw,
            72px
        ) !important;

    line-height: 1.03 !important;

    letter-spacing: -3px !important;

    font-weight: 850 !important;
}


/* Chrome-sicheres Lila */
.hero h1 span {
    display: inline-block;

    background: none !important;

    color: #7c3aed !important;

    -webkit-text-fill-color: #7c3aed !important;
}


.hero-text {
    max-width: 690px !important;

    margin:
        0
        auto !important;

    font-size: 18px !important;

    line-height: 1.65 !important;

    color: #71717a !important;
}


/* --------------------------------------------------
   Hauptbereich
-------------------------------------------------- */

.main-container {
    padding-bottom: 90px;
}


/*
   Wichtig:
   Dadurch ist die Designkarte in Chrome und Edge
   praktisch gleich breit.
*/

.main-container > .row {
    margin-left: 0;
    margin-right: 0;
}


.main-container > .row > div {
    width: 100% !important;

    max-width: 980px !important;

    margin-left: auto !important;
    margin-right: auto !important;
}


/* --------------------------------------------------
   Design Card
-------------------------------------------------- */

.design-card {
    width: 100%;

    padding: 40px !important;

    border-radius: 25px !important;

    background:
        rgba(
            255,
            255,
            255,
            0.95
        ) !important;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.95
        ) !important;

    box-shadow:
        0 25px 80px
        rgba(
            45,
            35,
            100,
            0.09
        ) !important;
}


/* --------------------------------------------------
   Design Karten Icon
-------------------------------------------------- */

.header-icon {
    width: 54px !important;
    height: 54px !important;

    border-radius: 15px !important;

    background: #7c3aed !important;

    color: white !important;

    box-shadow:
        0 12px 30px
        rgba(
            124,
            58,
            237,
            0.27
        ) !important;
}


/* --------------------------------------------------
   Inputs
-------------------------------------------------- */

.form-control,
.form-select {
    min-height: 54px !important;

    border:
        1px solid
        #e4e4e7 !important;

    border-radius: 12px !important;

    background: #fafafa !important;
}


.form-control:focus,
.form-select:focus {
    background: #ffffff !important;

    border-color: #8b5cf6 !important;

    box-shadow:
        0 0 0 4px
        rgba(
            124,
            58,
            237,
            0.10
        ) !important;
}


/* --------------------------------------------------
   Mobile
-------------------------------------------------- */

@media (max-width: 768px) {

    .container {
        padding-left: 18px;
        padding-right: 18px;
    }


    .hero {
        padding:
            48px
            0
            34px !important;
    }


    .hero h1 {
        font-size: 43px !important;

        letter-spacing: -2px !important;
    }


    .design-card {
        padding: 26px !important;
    }

}


/* ==================================================
   USER NAVIGATION
================================================== */

.nav-user-area {

    display: flex;

    align-items: center;

    gap: 10px;
}


/* ==================================================
   GAST STATUS
================================================== */

.guest-status {

    display: flex;

    align-items: center;

    gap: 6px;

    padding:
            7px
            11px;

    border-radius: 100px;

    background: #f7f7f8;

    color: #71717a;

    font-size: 11px;

    font-weight: 700;
}


.guest-status-dot {

    width: 7px;

    height: 7px;

    border-radius: 50%;

    background: #a1a1aa;
}


/* ==================================================
   LOGIN BUTTON
================================================== */

.nav-login-button {

    min-height: 40px;

    padding:
            0
            15px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 7px;

    border:
            1px solid
            var(--border);

    border-radius: 11px;

    background: white;

    color: var(--text);

    text-decoration: none;

    font-size: 12px;

    font-weight: 700;

    transition:
            border-color 0.2s ease,
            background 0.2s ease,
            transform 0.2s ease;
}


.nav-login-button:hover {

    border-color: #c4b5fd;

    background: #faf9ff;

    color: var(--primary);

    transform:
            translateY(-1px);
}


/* ==================================================
   REGISTER BUTTON
================================================== */

.nav-register-button {

    min-height: 40px;

    padding:
            0
            16px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 7px;

    border-radius: 11px;

    background: #7c3aed;

    color: white;

    text-decoration: none;

    font-size: 12px;

    font-weight: 750;

    box-shadow:
            0 7px 18px
            rgba(124, 58, 237, 0.20);

    transition:
            transform 0.2s ease,
            background 0.2s ease;
}


.nav-register-button:hover {

    background: #6d28d9;

    color: white;

    transform:
            translateY(-1px);
}


/* ==================================================
   CREDITS
================================================== */

.credit-display {

    min-height: 43px;

    padding:
            5px
            12px
            5px
            7px;

    display: flex;

    align-items: center;

    gap: 8px;

    border:
            1px solid
            #ddd6fe;

    border-radius: 12px;

    background: #faf9ff;
}


.credit-icon {

    width: 31px;

    height: 31px;

    display: flex;

    justify-content: center;

    align-items: center;

    border-radius: 9px;

    background: #ede9fe;

    color: #7c3aed;
}


.credit-text {

    display: flex;

    flex-direction: column;

    line-height: 1.05;
}


.credit-text strong {

    color: #5b21b6;

    font-size: 13px;
}


.credit-text span {

    margin-top: 3px;

    color: #8b8b96;

    font-size: 9px;
}


/* ==================================================
   USER DISPLAY
================================================== */

.user-display {

    display: flex;

    align-items: center;

    gap: 8px;

    padding:
            5px
            11px
            5px
            6px;

    border-radius: 12px;

    background: #f7f7f8;
}


.user-avatar {

    width: 32px;

    height: 32px;

    display: flex;

    justify-content: center;

    align-items: center;

    flex-shrink: 0;

    border-radius: 9px;

    background: #7c3aed;

    color: white;
}


.user-info {

    display: flex;

    flex-direction: column;

    max-width: 190px;

    line-height: 1.05;
}


.user-info span {

    margin-bottom: 3px;

    color: #a1a1aa;

    font-size: 9px;
}


.user-info strong {

    overflow: hidden;

    color: #27272a;

    font-size: 11px;

    text-overflow: ellipsis;

    white-space: nowrap;
}


/* ==================================================
   LOGOUT
================================================== */

.nav-logout-button {

    min-height: 40px;

    padding:
            0
            13px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 6px;

    border:
            1px solid
            var(--border);

    border-radius: 11px;

    background: white;

    color: #71717a;

    text-decoration: none;

    font-size: 11px;

    font-weight: 700;
}


.nav-logout-button:hover {

    border-color: #fecaca;

    background: #fff7f7;

    color: #dc2626;
}


/* ==================================================
   MOBILE NAV
================================================== */

@media (max-width: 768px) {

    .nav-user-area {

        gap: 6px;
    }


    .guest-status {

        display: none;
    }


    .user-display {

        display: none;
    }


    .nav-login-button,
    .nav-register-button,
    .nav-logout-button {

        padding:
                0
                10px;
    }


    .nav-login-button span,
    .nav-logout-button span {

        display: none;
    }

}


@media (max-width: 480px) {

    .credit-text span {

        display: none;
    }


    .credit-display {

        padding-right: 9px;
    }


    .nav-register-button {

        font-size: 11px;

        padding:
                0
                9px;
    }

}



/* ==================================================
   CREDITS PAGE
================================================== */

.credits-hero {
    padding-bottom: 45px !important;
}


.credits-container {
    max-width: 1120px;

    padding-bottom: 90px;
}


/* ==================================================
   CURRENT BALANCE
================================================== */

.current-credit-balance {
    width: fit-content;

    margin:
            28px
            auto
            0;

    padding:
            9px
            18px
            9px
            9px;

    display: flex;

    align-items: center;

    gap: 11px;

    border:
            1px solid
            #ddd6fe;

    border-radius: 14px;

    background:
            rgba(255, 255, 255, 0.88);

    box-shadow:
            0 10px 30px
            rgba(88, 72, 217, 0.08);

    text-align: left;
}


.current-credit-icon {
    width: 42px;

    height: 42px;

    display: flex;

    justify-content: center;

    align-items: center;

    border-radius: 11px;

    background: #7c3aed;

    color: white;

    font-size: 18px;
}


.current-credit-balance span {
    display: block;

    margin-bottom: 2px;

    color: #8b8b96;

    font-size: 10px;

    font-weight: 600;
}


.current-credit-balance strong {
    display: block;

    color: #5b21b6;

    font-size: 15px;
}


/* ==================================================
   PACKAGES
================================================== */

.credit-packages {
    display: grid;

    grid-template-columns:
            repeat(3, 1fr);

    gap: 20px;

    align-items: stretch;
}


.credit-package-card {
    position: relative;

    padding:
            34px
            28px
            29px;

    display: flex;

    flex-direction: column;

    border:
            1px solid
            #e4e4e7;

    border-radius: 22px;

    background:
            rgba(255, 255, 255, 0.96);

    box-shadow:
            0 20px 60px
            rgba(37, 28, 90, 0.07);

    transition:
            transform 0.2s ease,
            border-color 0.2s ease,
            box-shadow 0.2s ease;
}


.credit-package-card:hover {
    transform: translateY(-4px);

    border-color: #c4b5fd;

    box-shadow:
            0 26px 70px
            rgba(37, 28, 90, 0.11);
}


/* ==================================================
   FEATURED
================================================== */

.credit-package-featured {
    border:
            2px solid
            #8b5cf6;

    box-shadow:
            0 25px 75px
            rgba(108, 92, 231, 0.14);
}


.credit-popular-badge {
    position: absolute;

    top: -14px;

    left: 50%;

    transform: translateX(-50%);

    padding:
            7px
            14px;

    display: flex;

    align-items: center;

    gap: 6px;

    border-radius: 100px;

    background: #7c3aed;

    color: white;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 0.4px;

    white-space: nowrap;

    box-shadow:
            0 8px 20px
            rgba(124, 58, 237, 0.25);
}


/* ==================================================
   PACKAGE ICON
================================================== */

.credit-package-icon {
    width: 52px;

    height: 52px;

    margin-bottom: 20px;

    display: flex;

    justify-content: center;

    align-items: center;

    border-radius: 14px;

    background: #f3f0ff;

    color: #7c3aed;

    font-size: 22px;
}


/* ==================================================
   PACKAGE TEXT
================================================== */

.credit-package-name {
    margin-bottom: 6px;

    color: #71717a;

    font-size: 12px;

    font-weight: 750;

    text-transform: uppercase;

    letter-spacing: 0.7px;
}


.credit-package-amount {
    margin-bottom: 11px;

    color: #18181b;

    font-size: 33px;

    font-weight: 850;

    letter-spacing: -1px;
}


.credit-package-amount span {
    color: #71717a;

    font-size: 13px;

    font-weight: 600;

    letter-spacing: 0;
}


.credit-package-price {
    margin-bottom: 18px;

    color: #5b21b6;

    font-size: 24px;

    font-weight: 800;
}


.credit-package-price span {
    font-size: 15px;
}


.credit-package-description {
    min-height: 65px;

    margin-bottom: 25px;

    color: #71717a;

    font-size: 13px;

    line-height: 1.6;
}


/* ==================================================
   BUY BUTTON
================================================== */

.credit-package-card form {
    margin-top: auto;
}


.credit-buy-button {
    width: 100%;

    min-height: 52px;

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 8px;

    border:
            1px solid
            #ddd6fe;

    border-radius: 12px;

    background: #f6f4ff;

    color: #6d28d9;

    font-size: 13px;

    font-weight: 750;

    cursor: pointer;

    transition:
            background 0.2s ease,
            color 0.2s ease,
            transform 0.2s ease;
}


.credit-buy-button:hover {
    background: #ede9fe;

    transform: translateY(-1px);
}


.credit-buy-featured {
    border: none;

    background: #7c3aed;

    color: white;

    box-shadow:
            0 10px 25px
            rgba(124, 58, 237, 0.22);
}


.credit-buy-featured:hover {
    background: #6d28d9;

    color: white;
}


/* ==================================================
   SECURITY
================================================== */

.credit-security {
    margin-top: 28px;

    padding: 18px;

    display: flex;

    justify-content: center;

    flex-wrap: wrap;

    gap:
            18px
            30px;

    border:
            1px solid
            #e4e4e7;

    border-radius: 15px;

    background:
            rgba(255, 255, 255, 0.70);

    color: #71717a;

    font-size: 11px;
}


.credit-security > div {
    display: flex;

    align-items: center;

    gap: 7px;
}


.credit-security i {
    color: #7c3aed;

    font-size: 14px;
}


/* ==================================================
   BACK
================================================== */

.credits-back {
    margin-top: 25px;

    text-align: center;
}


.credits-back a {
    color: #71717a;

    text-decoration: none;

    font-size: 12px;

    font-weight: 650;
}


.credits-back a:hover {
    color: #7c3aed;
}


/* ==================================================
   MOBILE
================================================== */

@media (max-width: 900px) {

    .credit-packages {
        grid-template-columns: 1fr;
    }


    .credit-package-card {
        max-width: 520px;

        width: 100%;

        margin:
                0
                auto;
    }


    .credit-package-featured {
        margin-top: 10px;
    }

}

/* ==================================================
   GENERIERUNGSART
================================================== */

.generation-methods {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    width: 100%;
}


/* ==================================================
   OPTION
================================================== */

.generation-method {
    position: relative;

    display: block;

    width: 100%;
    margin: 0;

    cursor: pointer;
}


/* Original Radio verstecken */

.generation-method > input[type="radio"] {
    position: absolute !important;

    width: 1px !important;
    height: 1px !important;

    opacity: 0 !important;

    pointer-events: none !important;
}


/* ==================================================
   OPTION CARD
================================================== */

.generation-method-card {
    position: relative;

    width: 100%;
    min-height: 94px;

    padding: 17px 18px;

    display: flex;
    align-items: center;

    gap: 13px;

    border: 1px solid #e4e4e7;
    border-radius: 16px;

    background: #ffffff;

    transition:
        border-color 0.2s ease,
        background 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease;
}


.generation-method:hover .generation-method-card {
    border-color: #c4b5fd;

    background: #faf9ff;

    transform: translateY(-1px);

    box-shadow:
        0 10px 28px
        rgba(37, 28, 90, 0.06);
}


/* ==================================================
   AUSGEWÄHLT
================================================== */

.generation-method
> input[type="radio"]:checked
+ .generation-method-card {

    border: 2px solid #7c3aed;

    background: #faf8ff;

    box-shadow:
        0 0 0 4px
        rgba(124, 58, 237, 0.08);
}


/* ==================================================
   ICON
================================================== */

.generation-method-icon {
    flex-shrink: 0;

    width: 46px;
    height: 46px;

    display: flex;
    justify-content: center;
    align-items: center;

    border-radius: 13px;

    background: #f4f4f5;

    color: #71717a;

    font-size: 20px;
}


.credit-method-icon {
    background: #ede9fe !important;

    color: #7c3aed !important;
}


/* Bei ausgewählter Option Icon hervorheben */

.generation-method
> input[type="radio"]:checked
+ .generation-method-card
.generation-method-icon {

    background: #7c3aed;

    color: #ffffff;
}


/* ==================================================
   TEXT
================================================== */

.generation-method-content {
    flex: 1;

    min-width: 0;

    display: flex;
    flex-direction: column;

    text-align: left;
}


.generation-method-content strong {
    display: block;

    margin-bottom: 4px;

    color: #18181b;

    font-size: 14px;

    font-weight: 800;
}


.generation-method-content span {
    display: block;

    color: #71717a;

    font-size: 12px;

    line-height: 1.45;
}


/* ==================================================
   RADIO CHECK
================================================== */

.generation-radio {
    flex-shrink: 0;

    width: 27px;
    height: 27px;

    display: flex;
    justify-content: center;
    align-items: center;

    border: 1.5px solid #d4d4d8;
    border-radius: 50%;

    background: #ffffff;

    color: transparent;

    font-size: 14px;

    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease;
}


.generation-method
> input[type="radio"]:checked
+ .generation-method-card
.generation-radio {

    border-color: #7c3aed;

    background: #7c3aed;

    color: #ffffff;
}


/* ==================================================
   DEAKTIVIERT
================================================== */

.generation-method-disabled {
    background: #fafafa;

    opacity: 0.68;

    cursor: default;
}


.generation-method
> input[type="radio"]:disabled
+ .generation-method-card {

    cursor: default;
}


.generation-method
> input[type="radio"]:disabled
+ .generation-method-card:hover {

    border-color: #e4e4e7;

    background: #fafafa;

    transform: none;

    box-shadow: none;
}


/* ==================================================
   CREDITS KAUFEN
================================================== */

.generation-buy-link {
    flex-shrink: 0;

    padding: 8px 11px;

    border-radius: 9px;

    background: #ede9fe;

    color: #6d28d9;

    text-decoration: none;

    font-size: 10px;

    font-weight: 800;

    white-space: nowrap;

    transition:
        background 0.2s ease,
        color 0.2s ease;
}


.generation-buy-link:hover {
    background: #ddd6fe;

    color: #5b21b6;
}


/* ==================================================
   GAST / LOGIN HINWEIS
================================================== */

.generation-login-hint {
    grid-column: 1 / -1;

    padding: 14px 16px;

    display: flex;
    align-items: center;

    gap: 10px;

    border: 1px solid #ede9fe;
    border-radius: 13px;

    background: #faf9ff;

    color: #71717a;

    font-size: 12px;
}


.generation-login-hint > i {
    color: #7c3aed;

    font-size: 17px;
}


.generation-login-hint a {
    color: #6d28d9;

    font-weight: 750;

    text-decoration: none;
}


.generation-login-hint a:hover {
    text-decoration: underline;
}


/* ==================================================
   ABSTAND ZUM BUTTON
================================================== */

.generation-methods + * {
    margin-top: 6px;
}


/* ==================================================
   MOBILE
================================================== */

@media (max-width: 700px) {

    .generation-methods {
        grid-template-columns: 1fr;
    }


    .generation-method-card {
        min-height: 86px;

        padding: 15px;
    }


    .generation-method-icon {
        width: 43px;
        height: 43px;
    }

}

/* ==================================================
   CREDIT REFUND
================================================== */

.credit-refund-box {

    width: 100%;

    margin:
            22px
            0;

    padding: 17px;

    display: flex;

    align-items: center;

    gap: 14px;

    border:
            1px solid
            #bbf7d0;

    border-radius: 14px;

    background: #f0fdf4;

    text-align: left;
}


.credit-refund-icon {

    flex-shrink: 0;

    width: 46px;

    height: 46px;

    display: flex;

    justify-content: center;

    align-items: center;

    border-radius: 12px;

    background: #dcfce7;

    color: #16a34a;

    font-size: 20px;
}


.credit-refund-content {

    display: flex;

    flex-direction: column;
}


.credit-refund-content strong {

    margin-bottom: 4px;

    color: #166534;

    font-size: 14px;
}


.credit-refund-content span {

    color: #4b5563;

    font-size: 12px;

    line-height: 1.55;
}


.credit-refund-content b {

    color: #166534;
}


/* ==================================================
   ERROR DETAILS
================================================== */

.result-error-message {

    display: flex;

    align-items: flex-start;

    gap: 9px;

    width: 100%;

    padding: 15px;

    margin-bottom: 15px;

    border-radius: 13px;

    background: #fff7f7;

    color: #991b1b;

    text-align: left;

    font-size: 12px;

    line-height: 1.5;
}


.design-error-id {

    margin-bottom: 22px;

    color: #a1a1aa;

    font-size: 11px;
}


/* ==================================================
   ERROR BACK BUTTON
================================================== */

.error-back-button {

    text-decoration: none;
}


.error-back-button:hover {

    color: white;
}


/* ==================================================
   AUTO REDIRECT
================================================== */

.error-redirect-hint {

    margin:
            17px
            0
            0;

    color: #a1a1aa;

    font-size: 11px;
}


.error-redirect-hint strong {

    color: #7c3aed;
}


.auth-success {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: #eaf8f0;
    border: 1px solid #b9e7c8;
    color: #1f6b3d;
    padding: 16px 18px;
    border-radius: 16px;
    margin-bottom: 24px;
    font-size: 15px;
    line-height: 1.6;
}

.auth-success i {
    font-size: 18px;
    margin-top: 2px;
}

.auth-link-group {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.nav-text-link {
    text-decoration: none;
    font-weight: 600;
    color: #5f6475;
    transition: 0.2s ease;
}

.nav-text-link:hover {
    color: #7c4dff;
}

@media (max-width: 768px) {
    .auth-success {
        font-size: 14px;
        padding: 14px 16px;
    }
}



/* ==================================================
   PASSWORT RESET
================================================== */

.auth-security-note {
    display: flex;
    align-items: center;
    gap: 10px;

    margin-top: 22px;
    padding: 14px 16px;

    background: #f8f7ff;
    border: 1px solid #e8e3ff;
    border-radius: 14px;

    color: #6b6478;
    font-size: 13px;
    line-height: 1.5;
}

.auth-security-note i {
    color: #7c3aed;
    font-size: 18px;
    flex-shrink: 0;
}


.auth-icon-error {
    background: #fff2f2;
    color: #dc3545;
}


.reset-invalid-box {
    display: flex;
    gap: 14px;
    align-items: flex-start;

    padding: 18px;
    margin-bottom: 22px;

    background: #fff5f5;
    border: 1px solid #ffd5d5;
    border-radius: 16px;
}

.reset-invalid-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 40px;
    height: 40px;

    flex-shrink: 0;

    border-radius: 12px;

    background: #ffe1e1;
    color: #dc3545;
}

.reset-invalid-icon i {
    font-size: 18px;
}

.reset-invalid-box strong {
    display: block;
    margin-bottom: 4px;
    color: #28252f;
}

.reset-invalid-box span {
    display: block;
    color: #716c78;
    font-size: 14px;
    line-height: 1.55;
}


.reset-button-link {
    display: flex;
    align-items: center;
    justify-content: center;

    text-decoration: none;
}

.reset-button-link:hover {
    color: #ffffff;
}



/* ==================================================
   E-MAIL VERIFIZIERUNG
================================================== */

.email-verification-section {
    width: 100% !important;
    padding: 16px 0 0 !important;
}

.email-verification-section .container {
    max-width: 1200px;
}


/* Hauptbanner */

.email-verification-banner {
    width: 100% !important;

    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;

    gap: 24px !important;

    padding: 18px 20px !important;

    background: #ffffff !important;

    border: 1px solid #eee9ff !important;
    border-radius: 16px !important;

    box-shadow:
        0 8px 24px rgba(40, 25, 80, 0.06) !important;
}


/* Linker Bereich */

.verification-banner-left {
    display: flex !important;
    align-items: center !important;

    gap: 15px !important;

    min-width: 0 !important;
}


/* Icon */

.verification-banner-icon {
    width: 46px !important;
    height: 46px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    flex-shrink: 0 !important;

    background: #f1ebff !important;
    color: #7c3aed !important;

    border-radius: 13px !important;
}

.verification-banner-icon i {
    font-size: 20px !important;
}


/* Text */

.verification-banner-content {
    display: flex !important;
    flex-direction: column !important;

    gap: 4px !important;
}

.verification-banner-content strong {
    color: #29252f !important;

    font-size: 15px !important;
    font-weight: 700 !important;

    line-height: 1.4 !important;
}

.verification-banner-content span {
    color: #777180 !important;

    font-size: 14px !important;
    font-weight: 400 !important;

    line-height: 1.5 !important;
}


/* Formular */

.verification-resend-form {
    margin: 0 !important;
    flex-shrink: 0 !important;
}


/* Button */

.verification-resend-button {
    appearance: none !important;
    -webkit-appearance: none !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    gap: 8px !important;

    min-height: 44px !important;

    padding: 11px 17px !important;

    border: 0 !important;
    border-radius: 12px !important;

    background: #7c3aed !important;
    color: #ffffff !important;

    font-family: inherit !important;
    font-size: 13px !important;
    font-weight: 700 !important;

    cursor: pointer !important;

    box-shadow:
        0 6px 16px rgba(124, 58, 237, 0.18) !important;

    transition:
        transform 0.15s ease,
        box-shadow 0.15s ease,
        opacity 0.15s ease !important;
}

.verification-resend-button:hover {
    transform: translateY(-1px) !important;

    box-shadow:
        0 8px 20px rgba(124, 58, 237, 0.26) !important;
}

.verification-resend-button:active {
    transform: translateY(0) !important;
}


/* ==================================================
   STATUS MELDUNGEN
================================================== */

.verification-feedback {
    width: 100% !important;

    display: flex !important;
    align-items: center !important;

    gap: 10px !important;

    margin-bottom: 10px !important;
    padding: 12px 16px !important;

    border-radius: 12px !important;

    font-size: 13px !important;
    font-weight: 500 !important;

    line-height: 1.5 !important;
}

.verification-feedback-success {
    background: #ecf9f0 !important;
    border: 1px solid #bce5c8 !important;
    color: #27663c !important;
}

.verification-feedback-warning {
    background: #fff8e8 !important;
    border: 1px solid #f0d491 !important;
    color: #775816 !important;
}

.verification-feedback-error {
    background: #fff1f1 !important;
    border: 1px solid #efc1c1 !important;
    color: #963636 !important;
}


/* ==================================================
   MOBILE
================================================== */

@media (max-width: 768px) {

    .email-verification-banner {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .verification-banner-left {
        align-items: flex-start !important;
    }

    .verification-resend-form {
        width: 100% !important;
    }

    .verification-resend-button {
        width: 100% !important;
    }
}


/* ==================================================
   PUBLIC BRAND + ÜBER UNS
================================================== */

.navbar .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: nowrap;
}


.public-brand-area {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: nowrap;
    min-width: 0;
}


.navbar-brand {
    margin: 0;
    flex: 0 0 auto;
}


.navbar-brand img {
    height: 36px;
    width: auto;
    display: block;
}


.nav-about-link {
    display: inline-flex;
    align-items: center;

    margin: 0;

    color: var(--text);

    text-decoration: none;

    font-size: 14px;

    font-weight: 600;

    opacity: .55;

    white-space: nowrap;

    transition:
        opacity .16s ease,
        color .16s ease;
}


.nav-about-link:hover {
    color: var(--text);

    opacity: .82;
}