/**
 * MODERN HERO CSS - DARK THEME
 * Angepasst an das neue Modern Cards Design
 * Inkludiert auch CTA Block Styles
 */

/* CSS Variables - gleich wie Modern Cards */
:root {
    --primary-color: #DC2626;
    --primary-hover: #B91C1C;
    --secondary-color: #2C3E50;
    --secondary-hover: #1A252F;
    --accent-color: #3498DB;
    --success-color: #2ECC71;
    --warning-color: #F39C12;
    --bg-primary: #1A1A1A;
    --bg-secondary: #2A2A2A;
    --bg-dark: #1A1A2E;
    --text-primary: #FFFFFF;
    --text-secondary: #B0B0B0;
    --text-light: #BDC3C7;
    --border-color: #3A3A3A;
    --shadow-sm: 0 2px 8px rgba(0,0,0,0.3);
    --shadow-md: 0 4px 16px rgba(0,0,0,0.4);
    --shadow-lg: 0 8px 32px rgba(0,0,0,0.5);
    --shadow-glow: 0 0 40px rgba(220,38,38,0.3);
    --gradient-primary: linear-gradient(135deg, #667EEA 0%, #764BA2 100%);
    --gradient-accent: linear-gradient(135deg, #DC2626 0%, #EF4444 100%);
    --gradient-dark: linear-gradient(135deg, #1A1A2E 0%, #16213E 100%);
    --radius-sm: 8px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-normal: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Reset */
.sb-hero-container * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Container */
.sb-hero-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto 2rem;
    padding: 20px;
}

/* Hauptkarte mit dunklem Design */
.sb-hero {
    background: var(--bg-secondary) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-sm) !important;
    transition: all var(--transition-normal) !important;
    position: relative !important;
    border: 1px solid var(--border-color) !important;
    overflow: visible !important;
    margin-top: 20px !important; /* Mehr Platz für Badges */
}

/* Entferne den Hover-Effekt beim Hero */
.sb-hero:hover {
    transform: none !important;
    box-shadow: var(--shadow-sm) !important;
}

/* Gradient Top Border - nur sichtbar bei Hover */
.sb-hero::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 4px !important;
    background: var(--gradient-accent) !important;
    opacity: 0 !important;
    transition: opacity var(--transition-normal) !important;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
    pointer-events: none !important;
}

/* Hero Content */
.sb-hero-content {
    display: flex !important;
    align-items: center !important;
    padding: 24px !important;
    gap: 24px !important;
    position: relative !important;
    background: transparent !important;
    overflow: visible !important;
}

/* Logo Bereich */
.sb-hero-logo {
    position: relative !important;
    flex-shrink: 0 !important;
    z-index: 1 !important;
}

.sb-logo-box {
    width: 180px !important;
    height: 180px !important;
    background: #1A1A1A !important;
    border-radius: var(--radius-md) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    overflow: visible !important;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.3) !important;
    transition: all var(--transition-normal) !important;
    border: 1px solid var(--border-color) !important;
}

.sb-logo-box:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4) !important;
    background: #222222 !important;
}

/* Logo Button */
.sb-logo-button {
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    position: relative !important;
    padding: 0 !important;
}

.sb-logo-button img,
.sb-hero-img {
    max-width: 90% !important;
    max-height: 90% !important;
    object-fit: contain !important;
    transition: all var(--transition-normal) !important;
    opacity: 0.95 !important;
}

.sb-logo-button:hover img {
    opacity: 1 !important;
    transform: scale(1.05) !important;
}

/* RANK BADGE - WICHTIG: Gleiche Styles wie Modern Cards */
.sb-hero .sb-rank-badge {
    position: absolute !important;
    top: -15px !important;
    left: -15px !important;
    width: 50px !important;
    height: 50px !important;
    min-width: 50px !important;
    min-height: 50px !important;
    background: #DC2626 !important;
    color: white !important;
    border-radius: 50% !important;
    font-weight: 800 !important;
    font-size: 20px !important;
    box-shadow: 0 4px 12px rgba(220,38,38,0.4) !important;
    z-index: 20 !important;
    border: 3px solid #2A2A2A !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    text-align: center !important;
    overflow: visible !important;
    text-indent: 0 !important;
    letter-spacing: normal !important;
    word-spacing: normal !important;
    white-space: normal !important;
}

/* Verhindere dass andere Elemente im Badge sind */
.sb-hero .sb-rank-badge * {
    display: none !important;
}

.sb-hero .sb-rank-badge:hover {
    animation: pulse 1s ease-in-out infinite !important;
}

/* RATING BADGE - WICHTIG: Gleiche Styles wie Modern Cards */
.sb-hero .sb-rating-badge {
    position: absolute !important;
    top: -15px !important;
    right: -15px !important;
    width: 50px !important;
    height: 50px !important;
    min-width: 50px !important;
    min-height: 50px !important;
    background: white !important;
    border: 3px solid #DC2626 !important;
    border-radius: 50% !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
    z-index: 20 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: 800 !important;
    font-size: 18px !important;
    color: #DC2626 !important;
    overflow: visible !important;
}

/* Alle Kinder verstecken */
.sb-hero .sb-rating-badge > * {
    display: none !important;
}

/* Rating direkt im Badge anzeigen mit ::after */
.sb-hero .sb-rating-badge::after {
    content: attr(data-rating) !important;
    font-weight: 800 !important;
    font-size: 18px !important;
    color: #DC2626 !important;
    line-height: 1 !important;
    z-index: 2 !important;
}

/* Info Bereich */
.sb-hero-info-section {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
}

/* Name */
.sb-hero-name {
    font-size: 32px !important;
    font-weight: 800 !important;
    color: var(--text-primary) !important;
    margin: 0 !important;
    letter-spacing: -0.5px !important;
}

/* Bonus Bereich */
.sb-hero-bonus-wrapper {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    align-items: flex-start !important;
}

/* Bonus Tag - Gleicher Style wie Modern Cards */
.sb-hero-bonus {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    width: fit-content !important;
    padding: 8px 16px !important;
    background: linear-gradient(135deg, #FEE2E2 0%, #FECACA 100%) !important;
    color: var(--primary-color) !important;
    border-radius: 100px !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    transition: all var(--transition-fast) !important;
    border: 1px solid rgba(220,38,38,0.2) !important;
    white-space: nowrap !important;
}

/* Emoji wird im PHP eingefügt, nicht im CSS */
.sb-hero-bonus:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(220,38,38,0.3) !important;
}

/* Bonus Code Tag - Gleicher Style wie Modern Cards */
.sb-hero-bonuscode {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    width: fit-content !important;
    padding: 8px 16px !important;
    background: linear-gradient(135deg, #E3F2FD 0%, #BBDEFB 100%) !important;
    color: var(--accent-color) !important;
    border-radius: 100px !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    transition: all var(--transition-fast) !important;
    border: 1px solid rgba(52,152,219,0.2) !important;
    white-space: nowrap !important;
}

/* Button Bereich */
.sb-hero-button-wrap {
    flex-shrink: 0 !important;
    min-width: 240px !important;
}

.sb-hero-button {
    background: var(--gradient-accent) !important;
    color: white !important;
    border: none !important;
    border-radius: var(--radius-sm) !important;
    padding: 14px 24px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: all var(--transition-fast) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    width: 100% !important;
    box-shadow: 0 4px 12px rgba(220,38,38,0.3) !important;
    position: relative !important;
    overflow: hidden !important;
}

/* Ripple Effect */
.sb-hero-button::before {
    content: '' !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 0 !important;
    height: 0 !important;
    border-radius: 50% !important;
    background: rgba(255,255,255,0.3) !important;
    transform: translate(-50%, -50%) !important;
    transition: width 0.6s, height 0.6s !important;
}

.sb-hero-button:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(220,38,38,0.4) !important;
}

.sb-hero-button:hover::before {
    width: 300px !important;
    height: 300px !important;
}

/* Info Wrapper (Details) */
.sb-info-wrapper {
    position: relative !important;
    background: #333333 !important;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg) !important;
    margin-top: -1px !important;
    border: 1px solid var(--border-color) !important;
    border-top: 1px solid #444444 !important;
    overflow: hidden !important;
}

/* Details Toggle Button */
.sb-details-toggle {
    background: #333333 !important;
    border: none !important;
    padding: 16px !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    cursor: pointer !important;
    transition: all var(--transition-fast) !important;
    font-weight: 600 !important;
    color: #E0E0E0 !important;
    font-size: 14px !important;
}

.sb-details-toggle:hover {
    background: #3A3A3A !important;
    color: var(--primary-color) !important;
}

/* Hero Info (Details Content) */
.sb-hero-info {
    padding: 24px !important;
    color: var(--text-secondary) !important;
    display: none !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    background: #333333 !important;
}

.sb-hero-info.active {
    display: block !important;
}

/* Terms Links */
.sb-terms-link,
.sb-terms-popup {
    color: var(--text-primary) !important;
    text-decoration: underline !important;
    background: none !important;
    border: none !important;
    padding: 0 !important;
    font-size: inherit !important;
    cursor: pointer !important;
}

.sb-terms-link:hover,
.sb-terms-popup:hover {
    color: var(--primary-color) !important;
}

/* Animations */
@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

/* Responsive Design */
@media (max-width: 768px) {
    .sb-hero-container {
        padding: 10px !important;
    }
    
    .sb-hero {
        margin-top: 15px !important;
    }
    
    .sb-hero-content {
        flex-direction: column !important;
        text-align: center !important;
        padding: 20px !important;
    }
    
    .sb-hero-logo {
        margin-bottom: 16px !important;
    }
    
    .sb-logo-box {
        width: 140px !important;
        height: 140px !important;
        margin: 0 auto !important;
    }
    
    .sb-hero .sb-rank-badge {
        top: -10px !important;
        left: calc(50% - 70px - 25px) !important;
        width: 45px !important;
        height: 45px !important;
        font-size: 18px !important;
        border: 2px solid #2A2A2A !important;
    }
    
    .sb-hero .sb-rating-badge {
        top: -10px !important;
        right: calc(50% - 70px - 25px) !important;
        width: 45px !important;
        height: 45px !important;
        font-size: 16px !important;
        border: 2px solid #DC2626 !important;
    }
    
    .sb-hero .sb-rating-badge::after {
        font-size: 16px !important;
    }
    
    .sb-hero-info-section {
        align-items: center !important;
        margin-bottom: 20px !important;
    }
    
    .sb-hero-name {
        font-size: 24px !important;
        text-align: center !important;
    }
    
    .sb-hero-bonus-wrapper {
        align-items: center !important;
    }
    
    .sb-hero-button-wrap {
        width: 100% !important;
        max-width: 300px !important;
    }
}

@media (max-width: 480px) {
    .sb-hero-container {
        padding: 5px !important;
    }
    
    .sb-logo-box {
        width: 120px !important;
        height: 120px !important;
    }
    
    .sb-hero .sb-rank-badge {
        width: 40px !important;
        height: 40px !important;
        font-size: 16px !important;
        left: calc(50% - 60px - 20px) !important;
    }
    
    .sb-hero .sb-rating-badge {
        width: 40px !important;
        height: 40px !important;
        font-size: 14px !important;
        right: calc(50% - 60px - 20px) !important;
    }
    
    .sb-hero .sb-rating-badge::after {
        font-size: 14px !important;
    }
    
    .sb-hero-name {
        font-size: 20px !important;
    }
    
    .sb-hero-button {
        padding: 12px 20px !important;
        font-size: 14px !important;
    }
    
    .sb-hero-bonus,
    .sb-hero-bonuscode {
        font-size: 14px !important;
        padding: 6px 12px !important;
    }
}

/* Focus Styles für Barrierefreiheit */
.sb-hero-button:focus,
.sb-details-toggle:focus,
.sb-logo-button:focus {
    outline: 3px solid var(--primary-color) !important;
    outline-offset: 2px !important;
}

/* Performance-Optimierung */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Sicherstellen dass Hero Container korrekt styled ist */
.sb-wrapper.sb-hero {
    background: var(--bg-secondary) !important;
}

/* Fix für Rating-Badge Text-Anzeige */
.sb-hero .sb-rating-badge {
    font-size: 0 !important; /* Verstecke originalen Text */
}

.sb-hero .sb-rating-badge::after {
    font-size: 18px !important; /* Zeige nur ::after content */
}

/* ===== CTA BLOCK STYLES ===== */
/* CTA nutzt Hero-Klassen mit kleinen Anpassungen */

/* Fallback für alte CTA Wrapper Klasse */
.sb-wrapper.sb-cta {
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
}

.sb-cta-container {
    margin-top: 40px !important;
}

.sb-cta-hero {
    margin-top: 0 !important; /* Kein extra margin-top beim CTA */
    overflow: hidden !important; /* Keine Badges beim CTA */
}

/* Verhindere Badges beim CTA */
.sb-cta-hero .sb-rank-badge,
.sb-cta-hero .sb-rating-badge {
    display: none !important;
}

/* CTA Content spezifische Anpassungen */
.sb-cta-content {
    justify-content: space-between !important;
    align-items: center !important;
    min-height: auto !important;
    padding: 20px 24px !important;
}

/* CTA Logo */
.sb-cta-logo {
    flex-shrink: 0 !important;
    margin-right: 20px !important;
}

.sb-cta-logo-box {
    width: 80px !important;
    height: 80px !important;
    background: #1A1A1A !important;
    border-radius: var(--radius-sm) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    border: 1px solid var(--border-color) !important;
}

.sb-cta-logo-box .sb-logo-button {
    width: 100% !important;
    height: 100% !important;
    padding: 8px !important;
}

.sb-cta-logo-img {
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
}

.sb-cta-info {
    flex: 1 !important;
    gap: 4px !important;
}

/* CTA Headline */
.sb-cta-headline {
    font-size: 24px !important;
    margin-bottom: 4px !important;
    color: var(--text-primary) !important;
}

/* CTA Bonus Text - WICHTIG: Weißer Text für bessere Lesbarkeit */
.sb-cta-bonus-text {
    font-size: 18px !important;
    color: var(--text-primary) !important; /* Weiß statt grau! */
    font-weight: 600 !important;
    opacity: 0.9 !important;
}

/* CTA Button Wrapper */
.sb-cta-button-wrap {
    min-width: auto !important;
    flex-shrink: 0 !important;
}

/* CTA Button */
.sb-cta-button {
    min-width: 200px !important;
    white-space: nowrap !important;
}

/* ===== FLOATING BAR VARIANT ===== */
.sb-cta-container.sb-cta-floating {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 1000 !important;
    transform: translateY(100%) !important;
    transition: transform var(--transition-normal) !important;
}

.sb-cta-container.sb-cta-floating.visible {
    transform: translateY(0) !important;
}

.sb-cta-floating .sb-hero {
    border-radius: 0 !important;
    margin: 0 !important;
    box-shadow: 0 -4px 16px rgba(0,0,0,0.3) !important;
}

.sb-cta-floating .sb-cta-content {
    padding: 16px 20px !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
}

.sb-cta-floating .sb-cta-headline {
    font-size: 20px !important;
}

.sb-cta-floating .sb-cta-bonus-text {
    font-size: 16px !important;
}

.sb-cta-floating .sb-cta-logo-box {
    width: 60px !important;
    height: 60px !important;
}

/* Responsive Anpassungen für CTA */
@media (max-width: 768px) {
    .sb-cta-content {
        flex-direction: column !important;
        text-align: center !important;
        gap: 16px !important;
        padding: 20px !important;
    }
    
    .sb-cta-logo {
        margin-right: 0 !important;
        margin-bottom: 12px !important;
    }
    
    .sb-cta-info {
        align-items: center !important;
        width: 100% !important;
    }
    
    .sb-cta-headline {
        text-align: center !important;
    }
    
    .sb-cta-button-wrap {
        width: 100% !important;
        max-width: 300px !important;
    }
    
    .sb-cta-button {
        width: 100% !important;
    }
    
    /* Floating Bar Mobile */
    .sb-cta-floating .sb-cta-content {
        flex-direction: row !important;
        text-align: left !important;
        padding: 12px 16px !important;
    }
    
    .sb-cta-floating .sb-cta-logo {
        display: none !important; /* Logo ausblenden auf Mobile bei Floating */
    }
    
    .sb-cta-floating .sb-cta-info {
        align-items: flex-start !important;
    }
    
    .sb-cta-floating .sb-cta-headline {
        font-size: 16px !important;
        text-align: left !important;
    }
    
    .sb-cta-floating .sb-cta-bonus-text {
        font-size: 14px !important;
    }
    
    .sb-cta-floating .sb-cta-button {
        padding: 10px 16px !important;
        font-size: 14px !important;
        min-width: auto !important;
    }
}

@media (max-width: 480px) {
    .sb-cta-headline {
        font-size: 20px !important;
    }
    
    .sb-cta-bonus-text {
        font-size: 16px !important;
    }
    
    .sb-cta-logo-box {
        width: 70px !important;
        height: 70px !important;
    }
}

/* ===== FLOATING BAR STYLES ===== */
/* Moderne Floating Bar für Scroll-CTAs */

.sb-floating-bar {
    position: fixed !important;
    bottom: 20px !important;
    left: 50% !important;
    transform: translateX(-50%) translateY(150px) !important;
    width: 90% !important;
    max-width: 1000px !important;
    background: #1A1A1A !important;
    border-radius: var(--radius-md) !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.1) !important;
    z-index: 999 !important;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
}

.sb-floating-bar.visible {
    transform: translateX(-50%) translateY(0) !important;
}

.sb-floating-bar.dismissed {
    display: none !important;
}

/* Floating Bar Content */
.sb-floating-content {
    display: flex !important;
    align-items: center !important;
    padding: 16px 20px !important;
    gap: 20px !important;
    position: relative !important;
}

/* Close Button */
.sb-floating-close {
    position: absolute !important;
    top: 8px !important;
    right: 8px !important;
    width: 32px !important;
    height: 32px !important;
    background: rgba(255,255,255,0.1) !important;
    border: none !important;
    border-radius: 50% !important;
    color: #B0B0B0 !important;
    font-size: 20px !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all var(--transition-fast) !important;
    z-index: 2 !important;
}

.sb-floating-close:hover {
    background: rgba(255,255,255,0.2) !important;
    color: white !important;
    transform: rotate(90deg) !important;
}

/* Floating Logo */
.sb-floating-logo {
    flex-shrink: 0 !important;
    width: 60px !important;
    height: 60px !important;
    background: #2A2A2A !important;
    border-radius: var(--radius-sm) !important;
    padding: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid var(--border-color) !important;
}

.sb-floating-logo-img {
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    opacity: 0.9 !important;
}

/* Floating Info */
.sb-floating-info {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    min-width: 0 !important; /* Für Text-Truncation */
}

/* Floating Header */
.sb-floating-header {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
}

.sb-floating-name {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: white !important;
}

.sb-floating-rating {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    font-size: 14px !important;
    color: #FFD700 !important;
    font-weight: 600 !important;
    background: rgba(255,215,0,0.1) !important;
    padding: 2px 8px !important;
    border-radius: 12px !important;
}

.sb-floating-star {
    font-size: 16px !important;
}

/* Floating Bonus */
.sb-floating-bonus {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    flex-wrap: wrap !important;
}

.sb-floating-bonus-text {
    font-size: 14px !important;
    color: #B0B0B0 !important;
    font-weight: 500 !important;
}

.sb-floating-code {
    font-size: 13px !important;
    color: var(--accent-color) !important;
    background: rgba(52,152,219,0.1) !important;
    padding: 4px 10px !important;
    border-radius: 6px !important;
    border: 1px solid rgba(52,152,219,0.2) !important;
}

.sb-floating-code strong {
    font-weight: 700 !important;
    color: var(--accent-color) !important;
}

/* Floating CTA Button */
.sb-floating-cta {
    flex-shrink: 0 !important;
}

.sb-floating-button {
    background: var(--gradient-accent) !important;
    color: white !important;
    border: none !important;
    border-radius: var(--radius-sm) !important;
    padding: 12px 20px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: all var(--transition-fast) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    box-shadow: 0 4px 12px rgba(220,38,38,0.3) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    position: relative !important;
    overflow: hidden !important;
    white-space: nowrap !important;
}

.sb-floating-button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(255,255,255,0.2) !important;
    transition: left 0.3s ease !important;
}

.sb-floating-button:hover::before {
    left: 100% !important;
}

.sb-floating-button:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(220,38,38,0.4) !important;
}

.sb-floating-button-arrow {
    font-size: 18px !important;
    transition: transform var(--transition-fast) !important;
}

.sb-floating-button:hover .sb-floating-button-arrow {
    transform: translateX(4px) !important;
}

/* Pulse Animation für Aufmerksamkeit */
@keyframes floating-pulse {
    0% { box-shadow: 0 8px 32px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.1); }
    50% { box-shadow: 0 8px 32px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.1), 0 0 0 8px rgba(220,38,38,0.1); }
    100% { box-shadow: 0 8px 32px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.1); }
}

.sb-floating-bar.visible {
    animation: floating-pulse 2s ease-in-out 0.5s !important;
}

/* Responsive für Floating Bar */
@media (max-width: 768px) {
    .sb-floating-bar {
        bottom: 10px !important;
        width: 95% !important;
        border-radius: var(--radius-sm) !important;
    }
    
    .sb-floating-content {
        padding: 12px 16px !important;
        gap: 12px !important;
    }
    
    .sb-floating-logo {
        width: 50px !important;
        height: 50px !important;
    }
    
    .sb-floating-name {
        font-size: 16px !important;
    }
    
    .sb-floating-bonus {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 4px !important;
    }
    
    .sb-floating-bonus-text {
        font-size: 13px !important;
    }
    
    .sb-floating-button {
        padding: 10px 16px !important;
        font-size: 13px !important;
    }
    
    .sb-floating-button-text {
        display: none !important;
    }
    
    .sb-floating-button::after {
        content: 'BONUS' !important;
    }
}

@media (max-width: 480px) {
    .sb-floating-bar {
        bottom: 5px !important;
        width: 98% !important;
    }
    
    .sb-floating-content {
        padding: 10px 12px !important;
        gap: 10px !important;
    }
    
    .sb-floating-close {
        width: 28px !important;
        height: 28px !important;
        font-size: 18px !important;
    }
    
    .sb-floating-logo {
        display: none !important; /* Logo ausblenden auf sehr kleinen Screens */
    }
    
    .sb-floating-rating {
        font-size: 12px !important;
        padding: 2px 6px !important;
    }
    
    .sb-floating-code {
        font-size: 12px !important;
        padding: 2px 6px !important;
    }
}