/* ============================================
   LANDING.CSS – ENDGÜLTIG (PRODUCT CARDS ROT)
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&display=swap');
   
/* === BASIS === */
html {
    overflow-x: auto;
    background-color: #000;
}
body {
    min-width: 1200px !important;
    width: 100% !important;
    margin: 0 !important;
    background-color: #000000 !important;
    font-family: 'Inter', sans-serif;
    color: #ffffff;
    overflow-x: visible;
}

/* === CONTAINER ZENTRIEREN === */
.desktop-container,
.container,
.container-fluid,
.container-sm,
.container-md,
.container-lg,
.container-xl,
.container-xxl,
.navbar .container,
footer .container,
section .container {
    width: 1200px !important;
    max-width: 1200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 40px !important;
    padding-right: 40px !important;
}

.row {
    margin-left: -12px !important;
    margin-right: -12px !important;
    width: auto !important;
}

/* === NAVBAR === */
.navbar {
    width: 100% !important;
    background-color: #000 !important;
}
.navbar .container {
    padding-left: 40px !important;
    padding-right: 40px !important;
}
.navbar-brand img {
    height: 80px !important;
    width: auto !important;
}

/* === SECTIONS === */
section {
    width: 100% !important;
    padding: 100px 40px !important;
}

/* === BUTTONS === */
.btn-primary {
    background: linear-gradient(135deg, #ff4d4d, #cc0000) !important;
    border: none !important;
    padding: 14px 40px !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
    transition: 0.3s ease;
}
.hero-actions {
    display: flex !important;
    flex-direction: row !important; /* Hier war vorher 'column' */
    justify-content: center !important;
    align-items: center !important;
    gap: 15px !important;
    flex-wrap: wrap !important; /* Verhindert, dass sie auf kleinen Bildschirmen kaputt gehen */
}

/* Damit die Buttons nicht die volle Breite einnehmen */
.hero-actions .btn {
    width: auto !important;
    min-width: 180px; /* Optional: Damit alle Buttons gleich groß wirken */
}
.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(255, 0, 0, 0.4) !important;
}

/* === FOOTER === */
footer {
    width: 100% !important;
    background: #000 !important;
    padding: 50px !important;
    text-align: center;
}
footer p {
    margin: 0;
    color: #888;
}
footer img {
    height: 70px !important;
    width: auto !important;
}
footer p:last-child {
    display: none !important;
}

/* === PRODUKTKARTEN (STORE) – ROT ERZWINGEN === */
.col-lg-4 {
    width: 100% !important;
    flex: 0 0 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin-bottom: 20px;
}

.custom-card,
.custom-card-bg {
    width: 1200px !important;
    height: 220px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 20px;
    padding: 0 40px !important;
    border-radius: 20px;
    box-shadow: 0 30px 70px rgba(0,0,0,0.6);
    position: relative;
    overflow: hidden;
}

.custom-card,
.custom-card-bg {
    /* ... deine anderen Einstellungen ... */

    background-repeat: no-repeat !important; /* Verhindert das Doppelte/Wiederholen */
    background-size: cover !important;       /* Streckt das Bild über die volle Fläche */
    background-position: center !important;  /* Zentriert das Bild in der Karte */
    
    /* Falls du das Bild von vorhin noch unterdrückst, entferne 'background-image: none' */
}

/* Inhalte über dem Overlay */
.custom-card > *,
.custom-card-bg > * {
    position: relative !important;
    z-index: 2 !important;
    display: inline-block !important;
    white-space: nowrap !important;
    margin: 0 !important;
    vertical-align: middle;
}

/* === TEXTINHALTE === */
.custom-card h4,
.custom-card-bg h4 {
    font-size: 22px !important;
    font-weight: 700 !important;
    color: white !important;
    margin-right: 10px;
}
.custom-card p.text-muted.small,
.custom-card-bg p.text-muted.small {
    display: none !important;
}
.custom-card .product-price,
.custom-card-bg .product-price {
    font-size: 26px !important;
    font-weight: 800 !important;
    color: #ff4d4d !important;
    margin-right: 10px;
    display: flex !important;
    align-items: center;
    gap: 3px;
}
.custom-card .product-price small,
.custom-card-bg .product-price small {
    font-size: 14px !important;
    font-weight: 400 !important;
    color: rgba(255,255,255,0.7) !important;
}
.custom-card .flex-grow-1,
.custom-card-bg .flex-grow-1 {
    display: none !important;
}
.custom-card .position-absolute.top-0.start-50,
.custom-card-bg .position-absolute.top-0.start-50 {
    display: none !important;
}
.custom-card a.btn-primary,
.custom-card-bg a.btn-primary {
    padding: 0 !important;
    width: auto !important;
    font-size: 0 !important;
    background: transparent !important;
    border: none !important;
    color: #ff4d4d !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    transition: 0.3s ease;
    margin-left: auto !important;
    flex-shrink: 0;
    white-space: nowrap;
    position: relative;
    display: inline-flex !important;
    align-items: center;
    min-width: 0;
}
/* === BUTTONS EXAKT UNTEREINANDER AUSRICHTEN === */

.custom-card a.btn-primary,
.custom-card-bg a.btn-primary {
    position: absolute !important;
    /* Hier stellst du die vertikale Linie ein (Abstand vom rechten Rand) */
    right: 170px !important; 
    
    top: 50% !important;
    transform: translateY(-50%) !important; /* Zentriert den Button vertikal */
    
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
    display: inline-flex !important;
    text-decoration: none !important;
    z-index: 10;
}

.custom-card a.btn-primary::after,
.custom-card-bg a.btn-primary::after {
    content: "ORDER NOW" !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #ff4d4d !important;
    letter-spacing: 1px !important;
    white-space: nowrap !important;
}

/* WICHTIG: Die Karte braucht Platz rechts, damit der Button nichts überdeckt */
.custom-card, .custom-card-bg {
    padding-right: 250px !important; /* Reserviert Platz für den Button rechts */
}


/* === LOGIN-SEITE (unverändert) === */
.login-split-left .login-logo {
    text-align: center !important;
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}
.login-split-left .login-logo img {
    display: block !important;
    margin: 0 auto !important;
    max-width: 100% !important;
    height: auto !important;
}
.login-split-left .login-brand-title,
.login-split-left .login-brand-subtitle,
.login-split-left .login-features {
    display: none !important;
}
.login-split-right .form-control.form-control-lg {
    padding: 0.5rem 1rem !important;
    font-size: 0.9rem !important;
    height: auto !important;
}
.login-split-right button[type="submit"].btn.primary {
    padding: 0.6rem 1rem !important;
    font-size: 1rem !important;
    border-radius: 5px !important;
    width: auto !important;
    margin: 0 auto !important;
    display: inline-block !important;
}
.login-split-right .d-grid {
    display: flex !important;
    justify-content: center !important;
}

.custom-card::before,
.custom-card-bg::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    background: rgba(0, 0, 0, 0.4) !important; /* Dunkelt das Bild um 40% ab */
    z-index: 1 !important;
}

/* === RECHTES ICON: TRANSPARENT & MASSIV 3D === */
.featured-products-icon-right {
    position: absolute !important;
    /* POSITIONIERUNG: Hier genau anpassen */
    left: calc(50% + 280px) !important; 
    top: -70% !important; /* Hoeher oder tiefer schieben */
    
    width: 140px !important;
    height: auto !important;
    z-index: 20;
    pointer-events: none;

    /* SCHWARZ ENTFERNEN TRICK */
    background: transparent !important;
    mix-blend-mode: screen !important; /* Macht Schwarz zu 100% unsichtbar */
    
    /* OPTIK: Dunkler & Roter Glow */
    filter: brightness(0.5) contrast(1.2) drop-shadow(0 0 15px rgba(255, 0, 0, 0.4)) !important; 

    /* 3D-SETUP & ANIMATION */
    transform-style: preserve-3d !important;
    perspective: 1000px !important;
    animation: massive3DSpin 10s linear infinite !important;
}

/* Erzeugt künstliche Dicke (Fake 3D Schichten) */
.featured-products-icon-right::after {
    content: "" !important;
    position: absolute !important;
    inset: 0;
    background: inherit;
    /* Pfad muss exakt stimmen */
    background-image: url('/assets/img/server-icon.png') !important;
    background-size: contain;
    background-repeat: no-repeat;
    transform: translateZ(-3px); /* Erzeugt 3mm Dicke */
    opacity: 0.8;
}

@keyframes massive3DSpin {
    from { transform: perspective(1000px) rotateY(0deg); }
    to { transform: perspective(1000px) rotateY(360deg); }
}
/* === SEKTION HINTERGRUND GLOW === */
.section-bg-glow {
    position: absolute;
    top: 0; left: 10%; width: 40%; height: 60%;
    background: radial-gradient(circle, rgba(255, 0, 0, 0.12) 0%, transparent 70%);
    z-index: -1;
    pointer-events: none;
}

/* === MAP WRAPPER LINKS === */
.map-wrapper-left {
    position: absolute !important;
    left: calc(50% - 680px) !important;
    top: -80px !important;
    width: 500px;
    height: 350px;
    pointer-events: none;
    z-index: 20;
}

/* Die Weltkarte als dezentes Hintergrundbild */
.world-map-svg-bg {
    position: absolute;
    inset: 0;
    background-image: url('');
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.05; /* Sehr dezent, damit es professionell aussieht */
    filter: invert(1); /* Macht die Karte hell/weiß auf dunklem Grund */
}

.map-location {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* INDIVIDUELLE POSITIONEN (Wie auf deinem Screenshot) */
.loc-frankfurt { top: 35%; left: 40%; }
.loc-paris     { top: 25%; left: 15%; }
.loc-warsaw    { top: 15%; left: 65%; }

/* DER ROTE GLOW-PUNKT */
.loc-dot {
    width: 10px; height: 10px;
    background: #ff4d4d;
    border-radius: 50%;
    box-shadow: 0 0 15px #ff0000, 0 0 30px rgba(255, 0, 0, 0.8);
    margin-bottom: 6px;
    border: 1.5px solid #fff;
}

/* DIE STANDORT CARD */
.loc-card {
    background: rgba(10, 5, 5, 0.95) !important;
    border: 1px solid rgba(255, 0, 0, 0.3) !important;
    padding: 5px 12px !important;
    border-radius: 5px;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.9);
}

.loc-card img { height: 13px; border-radius: 2px; }
.loc-card span { color: #fff; font-size: 11px; font-weight: 900; letter-spacing: 0.8px; }

/* BADGE SOON */
.badge-soon {
    background: #ff8c00 !important;
    color: #000 !important;
    font-size: 9px !important;
    padding: 2px 5px !important;
    border-radius: 3px;
    font-weight: 900 !important;
    margin-left: 5px;
}


/* === RECHTES ICON: SAUBER OHNE RAND & GLOW === */
.featured-products-icon-right {
    position: absolute !important;
    left: calc(50% + 320px) !important; 
    top: 50% !important; 
    transform: translateY(-50%) !important;
    width: 150px !important;
    z-index: 20;
    pointer-events: none;

    /* Hintergrund & Transparenz */
    background: transparent !important;
    
    /* WICHTIG: Das löscht den schwarzen Kasten um das Icon */
    mix-blend-mode: screen !important; 
    
    /* NUR Helligkeit & Kontrast, KEIN drop-shadow (Glow) */
    filter: brightness(1.1) contrast(1.1) !important; 
    
    /* KEIN box-shadow (entfernt das rote Leuchten im Hintergrund) */
    box-shadow: none !important;
    border-radius: 0 !important;

    /* 3D-Setup & Animation */
    transform-style: preserve-3d !important;
    perspective: 1000px !important;
    animation: massive3DSpin 12s linear infinite !important;
}

/* Die hintere Schicht ebenfalls ohne Glow */
.featured-products-icon-right::after {
    content: "" !important;
    position: absolute !important;
    inset: 0;
    background: inherit;
    background-image: inherit;
    mix-blend-mode: screen !important; 
    transform: translateZ(-6px);
    opacity: 0.8;
}

@keyframes massive3DSpin {
    from { transform: translateY(-50%) perspective(1000px) rotateY(0deg); }
    to { transform: translateY(-50%) perspective(1000px) rotateY(360deg); }
}

/* Die hintere Schicht ebenfalls auf "screen" stellen */
.featured-products-icon-right::after {
    content: "" !important;
    position: absolute !important;
    inset: 0;
    background: inherit;
    background-image: inherit;
    mix-blend-mode: screen !important; 
    transform: translateZ(-6px);
    opacity: 0.8;
}

/* === GLOW EFFEKT BEIM HOVER === */

.custom-card, 
.custom-card-bg {
    /* Sanfter Übergang für den Effekt */
    transition: all 0.4s ease-in-out !important;
    border: 1px solid rgba(255, 0, 0, 0) !important; /* Standardmäßig unsichtbarer Rand */
}

.custom-card:hover, 
.custom-card-bg:hover {
    /* 1. Roter glühender Schatten (Glow) */
    box-shadow: 0 0 30px 5px rgba(255, 0, 0, 0.4) !important;
    
    /* 2. Den Rand leicht rot aufleuchten lassen */
    border: 1px solid rgba(255, 0, 0, 0.5) !important;
    
    /* 3. Die Karte minimal anheben (optional, sieht wertiger aus) */
    transform: translateY(-5px) !important;
    
    /* 4. Den Kontrast des Hintergrundbildes leicht erhöhen */
    filter: contrast(1.1) brightness(1.1) !important;
}

/* Optional: Den "ORDER NOW" Button beim Hover mitleuchten lassen */
.custom-card:hover a.btn-primary::after,
.custom-card-bg:hover a.btn-primary::after {
    color: #ffffff !important; /* Text wird weiß beim Hover */
    text-shadow: 0 0 10px #ff0000 !important; /* Text bekommt eigenen Glow */
    transition: 0.3s ease;
}

/* === BESUCHERZÄHLER POSITIONIERUNG === */
.visitor-counter-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    margin: 40px 0; /* Abstand nach oben zu den Buttons und unten zum Titel */
    z-index: 10;
}

.visitor-stats {
    background: rgba(20, 0, 0, 0.6) !important;
    border: 1px solid rgba(255, 0, 0, 0.3) !important;
    padding: 10px 25px !important;
    border-radius: 50px; /* Abgerundeter Pille-Look */
    display: flex;
    align-items: center;
    gap: 15px;
    box-shadow: 0 0 20px rgba(255, 0, 0, 0.15);
}

.visitor-stats i {
    color: #ff4d4d;
    font-size: 18px;
}

.visitor-text {
    color: rgba(255, 255, 255, 0.7);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
}

.visitor-number {
    color: #ffffff;
    font-weight: 800;
    font-size: 18px;
    font-family: 'Inter', sans-serif;
    text-shadow: 0 0 10px rgba(255, 77, 77, 0.5);
}