/* public_html/css/style.css */

/* Imports - Die Reihenfolge ist wichtig! */
@import url(base/_variables.css);
@import url(base/_reset.css);
@import url(base/_typography.css);

@import url(layout/_general.css);
@import url(layout/_sidebar.css);
@import url(layout/_sidebar-logo.css);
@import url(layout/_header.css);
@import url(layout/_footer.css);
@import url(layout/_footer-social.css);

@import url(components/_buttons.css);
@import url(components/_service-selector.css);
@import url(components/_pricing-card.css);
@import url(components/_achievements.css);
@import url(components/_artist-section.css);
@import url(components/_contact-form.css);
@import url(components/_faq.css);
@import url(components/_cart-icon.css);
@import url(components/_modal.css);
@import url(components/_beat-store.css);
@import url(components/_testimonials.css);
@import url(components/_tooltips.css);
@import url(components/_particles.css);
@import url(components/_auth.css);
@import url(components/_toast.css);
@import url(components/_top-nav-icons.css);
@import url(components/_sound-configurator.css);
@import url(components/_assistant-widget.css);
@import url(components/_before-after-player.css);
@import url(components/_password-toggle.css);
@import url(components/_notification-banner.css);
@import url(components/_cookie-banner.css);
@import url(components/_timeline.css);

@import url(pages/_content-pages.css);
@import url(pages/_aboutme-page.css);
@import url(pages/_admin-panel.css);
@import url(pages/_admin-settings.css);
@import url(pages/_konto.css);
@import url(pages/_admin-dashboard.css);
@import url(pages/_admin-messages.css);
@import url(pages/_produzenten-page.css);
@import url(pages/_portfolio.css);

/* Muss als letztes kommen, um alles zu überschreiben */
@import url(mobile.css);


/* --- GLOBAL FIXES & CUSTOM SCROLLBAR --- */



@keyframes pageFadeIn {
    to { opacity: 1; }
}

/* Standard Scrollbar ausblenden (für alle modernen Browser) */
html {
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;  /* IE/Edge */
    background-color: #050505; /* Anti-Flicker */
}

body {
    background-color: #050505; /* Anti-Flicker */
}

body::-webkit-scrollbar,
html::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
    width: 0;
    height: 0;
}

/* --- WAVEFORM SCROLLBAR CONTAINER --- */
#waveform-scrollbar-container {
    position: fixed;
    top: 0;
    right: 2px; /* Ganz rechts am Rand */
    width: 60px; /* Genug Platz für die Breite */
    height: 100vh; /* Volle Höhe */
    
    z-index: 10000; /* Über allem anderen (Modal, Header etc.) */
    pointer-events: none; /* Klicks gehen durch */
    
    display: flex;
    flex-direction: column;
    /* Verteilt die Linien gleichmäßig über die Höhe */
    justify-content: flex-start; 
    align-items: flex-end; /* Rechtsbündig */
    
    padding-top: 10px;
}

/* Die einzelnen Striche */
.wf-line {
    /* Höhe wird inline vom JS gesetzt, aber hier Fallback */
    min-height: 2px; 
    background-color: rgba(255, 255, 255, 0.2); /* Sichtbares Grau */
    border-radius: 2px;
    
    /* Transition für den "Wellen"-Effekt beim Scrollen */
    transition: width 0.15s ease-out, background-color 0.2s ease, opacity 0.2s ease;
    
    /* Standardzustand (ruhig) */
    opacity: 0.4;
}

/* Mobile: Custom Scrollbar weg, System-Scrollbar an */
@media (max-width: 768px) {
    #waveform-scrollbar-container { display: none !important; }
    
    /* Erlaube natives Scrollen auf Mobile wieder */
    html { scrollbar-width: auto; } 
    body::-webkit-scrollbar, html::-webkit-scrollbar { display: block; width: 5px; }
    body::-webkit-scrollbar-thumb { background: #333; border-radius: 10px; }
}

.arrow-overlay-container {
    position: absolute;
    top: 85vh; /* Startpunkt unter dem Hero-Bild */
    left: 50%;
    transform: translateX(-50%);
    
    /* Begrenzung auf exakt die Container-Breite der Webseite */
    width: 90%; 
    max-width: 1200px; 
    
    height: 300px;
    z-index: 100;
    pointer-events: none;
    overflow: visible;
}

.arrow-svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

.draw-arrow-line {
    fill: none;
    stroke: #d90429;
    stroke-width: 2;
    stroke-linecap: round;
    /* STARTZUSTAND: Unsichtbar, damit man sie nicht kurz voll sieht */
    opacity: 0; 
    filter: drop-shadow(0 0 8px rgba(217, 4, 41, 0.5));
}

/* Auf Mobile ausblenden, da die Karten dort untereinander sind */
@media (max-width: 900px) {
    .arrow-overlay-container { display: none; }
}

/* --- ARTIST SECTION & CONNECTOR UPDATES --- */

/* 1. Connector (Verbindungslinie) */
#artists-section {
    padding-bottom: 0;
    border-bottom: none;
}

#testimonials {
    border-top: none;
    padding-top: 20px;
}

.section-connector {
    width: 100%;
    height: 120px; /* Genug Platz für die Verbindung */
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
    margin-top: -20px; /* Leichtes Überlappen nach oben */
    margin-bottom: -20px; /* Leichtes Überlappen nach unten */
    overflow: visible;
    pointer-events: none;
}

.connector-svg {
    width: 60px; /* Breiter, für Glow */
    height: 100%;
    overflow: visible;
}

/* Die Linie selbst */
.connector-line {
    fill: none;
    stroke: url(#lineGradient); /* Verlauf nutzen (definiert im HTML) */
    stroke-width: 2px;
    opacity: 0.6;
}

/* Der leuchtende Punkt (Energie-Impuls) */
.connector-dot {
    fill: #d90429;
    filter: drop-shadow(0 0 8px #d90429);
    opacity: 0; /* Wird per JS eingeblendet */
}

/* Glow-Effekt hinter der Linie */
.connector-glow {
    fill: none;
    stroke: #d90429;
    stroke-width: 6px;
    opacity: 0.15;
    filter: blur(4px);
}


/* 2. Premium Partner (HOLY) - OHNE roten Rand */
.premium-glow-container {
    position: relative;
    border-radius: 50%;
    overflow: hidden; /* Begrenzt Sheen auf Kreis */
    width: 90px;
    height: 90px;
    margin-bottom: 12px;
    
    /* Subtiler roter Schein nach außen */
    box-shadow: 0 0 20px rgba(217, 4, 41, 0.2); 
    
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    
    /* Hintergrund für Transparenz im Logo */
    background-color: rgba(255, 255, 255, 0.05); 
}

/* Das Bild selbst (kein Rand mehr!) */
.premium-glow-container img {
    width: 100%;
    height: 100%;
    margin: 0;
    border: none; /* Rand entfernt */
    padding: 15px; /* Abstand zum Rand, damit Logo atmen kann */
    object-fit: contain; /* Logo nicht beschneiden */
}

/* Der Lichtreflex (Sheen) */
.shine-effect {
    position: absolute;
    top: 0;
    left: -150%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        to right,
        transparent 0%,
        rgba(255, 255, 255, 0.4) 50%, /* Helles Licht */
        transparent 100%
    );
    transform: skewX(-25deg);
    animation: shine-anim 4s infinite;
    pointer-events: none;
    z-index: 2; /* Über dem Bild */
}

/* Hover-Effekt */
.premium-partner:hover .premium-glow-container {
    transform: scale(1.1);
    box-shadow: 0 0 30px rgba(217, 4, 41, 0.5); /* Stärkerer Schein */
}

@keyframes shine-anim {
    0% { left: -150%; opacity: 0; }
    20% { opacity: 1; }
    40% { left: 150%; opacity: 0; }
    100% { left: 150%; opacity: 0; }
}

section, .content-section, #contact, #pricing {
    scroll-margin-top: 100px; /* Passt den Scroll-Stopp an */
}