/* Modern Twitch Theme - PERFEKT - Responsive & Dark Preloader (Aggressive Fix) */

:root {
    --twitch-purple: #9146FF;
    --twitch-purple-dark: #772CE8;
    --twitch-purple-light: #A970FF;
    --twitch-accent: #BF94FF;
    --dark-bg: #0E0E10;
    --dark-bg-secondary: #18181B;
    --dark-bg-tertiary: #1F1F23;
    --dark-surface: #26262C;
    --text-primary: #EFEFF1;
    --text-secondary: #ADADB8;
    --text-tertiary: #747481;
    --border-color: #2D2D35;
}

/* WICHTIG: Setzt den Hintergrund sofort auf dunkel, um weißes Blitzen bei F5 zu verhindern */
html, body {
    background-color: var(--dark-bg) !important;
    background: var(--dark-bg) !important;
    color: var(--text-primary) !important;
}

/* NAVBAR */
.navbar-custom {
    background: rgba(14, 14, 16, 0.95) !important;
    backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border-color);
}

.navbar-custom .nav-link {
    color: var(--text-primary) !important;
    position: relative;
}

.navbar-custom .nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 2px;
    background: var(--twitch-purple);
    transition: width 0.3s ease;
}

.navbar-custom .nav-link:hover::after {
    width: 80%;
}

.navbar-custom .nav-link:hover {
    color: var(--twitch-purple-light) !important;
}

/* BUTTONS */
.btn-login {
    background: transparent !important;
    border: 2px solid var(--twitch-purple) !important;
    color: var(--twitch-purple) !important;
    border-radius: 8px !important;
}

.btn-login:hover {
    background: var(--twitch-purple) !important;
    color: white !important;
    transform: translateY(-2px);
}

.btn-primary, .btn-getstarted {
    background: linear-gradient(135deg, var(--twitch-purple) 0%, var(--twitch-purple-dark) 100%) !important;
    border: none !important;
    color: white !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 15px rgba(145, 70, 255, 0.3);
}

.btn-primary:hover, .btn-getstarted:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(145, 70, 255, 0.5);
}

/* HEADER */
.header {
    background: linear-gradient(135deg, var(--dark-bg) 0%, var(--dark-bg-secondary) 100%) !important;
    position: relative;
    overflow: hidden;
}

.header::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 800px;
    height: 800px;
    background: radial-gradient(circle, rgba(145, 70, 255, 0.15) 0%, transparent 70%);
    animation: pulse 8s ease-in-out infinite;
}

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

.header h1 {
    background: linear-gradient(135deg, var(--text-primary) 0%, var(--twitch-purple-light) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.image-container img {
    filter: drop-shadow(0 20px 40px rgba(145, 70, 255, 0.3));
    animation: float 6s ease-in-out infinite;
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-20px); }
}

/* COUNT BOXES - FIX FOR MOBILE */
.counts-area {
    background: var(--dark-bg-secondary) !important;
    padding: 60px 0 !important;
}

.counts-area .row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0 !important; 
}

/* RESPONSIVE FIX START */
.counts-area .col-lg-3 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    margin-bottom: 20px !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
}

@media (min-width: 768px) {
    .counts-area .col-lg-3 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        margin-bottom: 20px !important;
    }
}

@media (min-width: 992px) {
    .counts-area .col-lg-3 {
        flex: 0 0 25% !important;
        max-width: 25% !important;
        margin-bottom: 0 !important;
    }
}
/* RESPONSIVE FIX END */

.count-box {
    position: relative !important;
    background: var(--dark-bg-tertiary) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 20px !important;
    padding: 2rem 1.5rem !important;
    transition: border-color 0.3s ease !important;
    text-align: center !important;
    height: 100% !important;
    box-sizing: border-box !important; 
}

.count-box:hover {
    border-color: var(--twitch-purple) !important;
}

.count-box::after {
    display: none !important;
}

.count-box i {
    font-size: 2.5rem !important;
    color: var(--twitch-purple) !important;
    background: rgba(145, 70, 255, 0.1) !important;
    width: 60px !important;
    height: 60px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 12px !important;
    margin-bottom: 1rem !important;
    transition: background 0.3s ease !important;
}

.count-box:hover i {
    background: rgba(145, 70, 255, 0.2) !important;
}

.count-box span {
    color: var(--twitch-purple) !important;
    font-size: 2.5rem !important;
    font-weight: 800 !important;
    display: block !important;
    margin-bottom: 0.3rem !important;
}

.count-box p {
    color: var(--twitch-purple-light) !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    margin: 0 !important;
}

/* ABOVE HEADING */
.above-heading {
    color: #0E0E10 !important;
    font-weight: 700 !important;
    background: linear-gradient(135deg, var(--twitch-purple) 0%, var(--twitch-purple-light) 100%) !important;
    padding: 0.6rem 1.8rem !important;
    border-radius: 25px !important;
    display: inline-block !important;
    text-shadow: none !important;
    letter-spacing: 0.5px !important;
}

/* SECTIONS */
.why-choose-us, .basic-1, .social-icons, .feature, .work-process-area, .faqs, .slider-2, .payment-methods {
    background: var(--dark-bg) !important;
}

.section-header h2, .h2-heading {
    color: var(--text-primary) !important;
}

/* BOXES */
.why-choose-us .box, .feature-box, .faq-block__card .card {
    background: var(--dark-bg-tertiary) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 16px !important;
}

.why-choose-us .box:hover, .feature-box:hover {
    border-color: var(--twitch-purple) !important;
}

/* SOCIAL ICONS */
.social-icons .icon .feature-box {
    background: var(--dark-bg-tertiary) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 12px !important;
}

.social-icons .icon .feature-box:hover {
    border-color: var(--twitch-purple) !important;
}

.social-icons .icon .feature-box i {
    color: var(--twitch-purple) !important;
}

.social-icons .icon .feature-box h3 {
    color: var(--twitch-purple) !important;
}

/* FEATURE BOXES */
.feature .row.align-self-center.gy-4 {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1.5rem !important;
}

.feature .col-md-6 {
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
}

.feature .icon-box {
    background: var(--dark-bg-tertiary) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 16px !important;
    padding: 2rem !important;
    transition: all 0.3s ease !important;
    display: flex !important;
    gap: 1.5rem !important;
    align-items: flex-start !important;
}

.feature .icon-box:hover {
    transform: translateY(-5px);
    border-color: var(--twitch-purple) !important;
    box-shadow: 0 15px 35px rgba(145, 70, 255, 0.2);
}

.feature .icon-box .icon {
    width: 60px !important;
    height: 60px !important;
    min-width: 60px !important;
    background: linear-gradient(135deg, var(--twitch-purple) 0%, var(--twitch-purple-dark) 100%) !important;
    border-radius: 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}

.feature .icon-box .icon i {
    color: white !important;
    font-size: 1.8rem !important;
}

.feature .icon-box div {
    flex: 1 !important;
}

.feature .icon-box h4 {
    color: var(--text-primary) !important;
    font-weight: 700 !important;
    margin-bottom: 0.5rem !important;
    font-size: 1.2rem !important;
}

.feature .icon-box p {
    color: var(--text-secondary) !important;
    line-height: 1.6 !important;
    margin: 0 !important;
}

@media (max-width: 768px) {
    .feature .row.align-self-center.gy-4 {
        grid-template-columns: 1fr !important;
    }
}

/* WORK PROCESS - ULTRA CLEAN */
.work-process-area {
    background: var(--dark-bg-secondary) !important;
    padding: 80px 0 !important;
}

.work-process-area .single_work_step {
    background: var(--dark-bg-tertiary) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 20px !important;
    padding: 2.5rem 2rem !important;
    transition: border-color 0.3s ease !important;
}

.work-process-area .single_work_step:hover {
    border-color: var(--twitch-purple) !important;
}

.work-process-area .single_work_step::before,
.work-process-area .single_work_step::after {
    display: none !important;
}

.work-process-area .single_work_step .step-icon {
    width: 70px !important;
    height: 70px !important;
    border-radius: 16px !important;
    background: linear-gradient(135deg, var(--twitch-purple) 0%, var(--twitch-purple-dark) 100%) !important;
    border: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 auto 1.5rem !important;
}

.work-process-area .single_work_step .step-icon::before,
.work-process-area .single_work_step .step-icon::after {
    display: none !important;
}

.work-process-area .single_work_step .step-icon i {
    color: white !important;
    font-size: 2rem !important;
    font-weight: 900 !important;
    font-style: normal !important;
}

.work-process-area .single_work_step h5 {
    color: var(--text-primary) !important;
    font-weight: 700 !important;
    font-size: 1.3rem !important;
    margin-bottom: 1rem !important;
}

.work-process-area .single_work_step p {
    color: var(--text-secondary) !important;
    line-height: 1.8 !important;
}

/* FAQ */
.faqs .faq-block__header {
    background: var(--dark-bg-tertiary) !important;
    border-radius: 12px !important;
}

.faqs .faq-block__header:hover h4 {
    color: var(--twitch-purple) !important;
}

.faqs .faq-block__header-icon i {
    color: var(--twitch-purple) !important;
}

/* TESTIMONIALS */
.slider-2 {
    background: var(--dark-bg-secondary) !important;
}

.slider-2 .text-slider .swiper-slide {
    background: var(--dark-bg-tertiary) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 16px !important;
}

.slider-2 .text-slider .swiper-slide:hover {
    border-color: var(--twitch-purple) !important;
}

/* FOOTER */
.footer {
    background: var(--dark-bg) !important;
    border-top: 1px solid var(--border-color);
}

.footer a:hover {
    color: var(--twitch-purple) !important;
}

.footer .social-links .fa-circle {
    color: var(--twitch-purple) !important;
}

/* NEWSLETTER */
.footer-newsletter input[type="email"] {
    background: var(--dark-bg-tertiary) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
}

.footer-newsletter input[type="email"]:focus {
    border-color: var(--twitch-purple) !important;
}

.footer-newsletter .btn-submit {
    background: linear-gradient(135deg, var(--twitch-purple) 0%, var(--twitch-purple-dark) 100%) !important;
}

/* MODAL */
.modal-content {
    background: var(--dark-bg-tertiary) !important;
    border: 1px solid var(--border-color) !important;
}

/* --- PRELOADER AGGRESSIVE FIX --- */
/* Wir zielen auf ALLE möglichen Namen für Loader-Wrapper */
#preloader,
.preloader,
.loader-wrapper,
#loader-wrapper,
.spinner-wrapper,
.page-loader,
div[class*="preloader"], /* Wildcard: Alles mit "preloader" im Klassennamen */
div[id*="preloader"],    /* Wildcard: Alles mit "preloader" in der ID */
div[class*="loader-container"]
{
    background-color: var(--dark-bg) !important; /* Twitch Dark Background */
    background: var(--dark-bg) !important;
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999999 !important; /* Maximale Priorität */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Die Animation selbst (Punkte) */
.spinner > div,
.loader > div,
.sk-cube,
.sk-bounce-dot {
    background-color: var(--twitch-purple) !important;
    box-shadow: 0 0 15px rgba(145, 70, 255, 0.7);
}
/* -------------------------------- */

/* SCROLLBAR */
::-webkit-scrollbar-thumb {
    background: var(--twitch-purple) !important;
}

/* SWIPER */
.swiper-button-next, .swiper-button-prev {
    color: var(--twitch-purple) !important;
}

.swiper-pagination-bullet-active {
    background: var(--twitch-purple) !important;
}

/* ORANGE ÜBERSCHREIBEN */
.text-warning, .text-danger, .text-success {
    color: var(--twitch-purple) !important;
}

.btn-warning {
    background: linear-gradient(135deg, var(--twitch-purple) 0%, var(--twitch-purple-dark) 100%) !important;
}

/* GLOBAL */
* {
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}