/* === CSS-Variablen für das dunkle Farbkonzept === */
:root {
    --background-dark: #1B1918;
    --text-main: #ECE0BA;
    --text-secondary: #D9D9DG;
    --accent-orange: #DE7D16;
    --accent-green: #6DE828;
}

/* === Grundlegende Body-Stile === */
body {
    font-family: 'Open Sans', sans-serif;
    display: flex; flex-direction: column; justify-content: space-between;
    min-height: 100vh; margin: 0; background-color: var(--background-dark);
    overflow-x: hidden; color: var(--text-main);
}

/* === Hintergrund-Animation (immer sichtbar) === */
@keyframes animate-stars { from { transform: translateY(0px); } to { transform: translateY(-2000px); } }
.stars-container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; overflow: hidden; }
#stars1, #stars2, #stars3 { position: absolute; width: 100%; height: 200%; background-repeat: repeat; background-position: center; }
#stars1 { animation: animate-stars 150s linear infinite; background-image: radial-gradient(1px 1px at 50px 100px, var(--text-secondary), transparent), radial-gradient(1px 1px at 120px 240px, var(--text-secondary), transparent), radial-gradient(1px 1px at 200px 400px, var(--text-secondary), transparent); }
#stars2 { animation: animate-stars 100s linear infinite; background-image: radial-gradient(1.5px 1.5px at 100px 50px, var(--text-main), transparent), radial-gradient(1.5px 1.5px at 250px 300px, var(--text-main), transparent), radial-gradient(2px 2px at 400px 150px, var(--text-main), transparent); }
#stars3 { animation: animate-stars 50s linear infinite; opacity: 0.3; background-image: radial-gradient(2.5px 2.5px at 50px 200px, var(--accent-orange), transparent), radial-gradient(2px 2px at 150px 350px, var(--accent-orange), transparent); }


/* === Haupt-Layout (allgemein) === */
.main-content {
    flex-grow: 1; display: flex; justify-content: center; align-items: center; width: 100%; position: relative; z-index: 2;
}
.mobile-header { display: none; }

/*
==============================================
DESKTOP-ANSICHT (ab 769px)
==============================================
*/
@media (min-width: 769px) {
    .container {
        position: relative; width: min(95vw, 750px); height: min(95vw, 750px);
        display: flex; justify-content: center; align-items: center;
    }
    
    @keyframes draw-path { to { stroke-dashoffset: 0; opacity: 0.4; } }
    @keyframes pulse-path { from { stroke-dashoffset: 1000; } to { stroke-dashoffset: -1000; } }

    .rotator {
        position: absolute; top: 50%; left: 50%; width: 1px; height: 1px; opacity: 0;
        animation-duration: 6s; animation-timing-function: linear; animation-fill-mode: forwards;
    }
    .partner-link { display: block; position: relative; }

    .small-company {
        position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center;
        text-align: center; padding: 10px; box-sizing: border-box; cursor: pointer; border-radius: 50%;
        background: radial-gradient(circle, rgba(236, 224, 186, 0.05), transparent 65%);
        border: 1px solid rgba(222, 125, 22, 0.3);
        animation-duration: 6s; animation-timing-function: linear; animation-fill-mode: forwards;
        transition: background-color 0.3s ease;
    }
    .partner-link:hover .small-company, .partner-link.active .small-company { background-color: rgba(109, 232, 40, 0.15); }

    .partner-content {
        display: flex; flex-direction: column; justify-content: center; align-items: center;
        transition: transform 0.3s ease;
    }
    .partner-link:hover .partner-content, .partner-link.active .partner-content { transform: scale(1.1); }

    .tooltip {
        visibility: hidden; opacity: 0; position: fixed; top: 20px; right: 20px; width: 280px;
        background-color: #1B1918; border: 2px solid var(--accent-orange);
        box-shadow: 0 5px 15px rgba(0,0,0,0.5); color: var(--text-main);
        padding: 20px; border-radius: 8px; z-index: 1000;
        text-align: left; font-size: 15px;
        transition: opacity 0.3s ease, visibility 0.3s ease;
    }
    .tooltip.visible { visibility: visible; opacity: 1; }
    .tooltip strong { color: var(--accent-orange); display: block; margin-bottom: 8px; font-size: 18px; }
    .tooltip p { margin: 0; line-height: 1.6; color: var(--text-secondary); }
    .tooltip p b { color: var(--text-main); }
    .tooltip p small { display: block; margin-top: 10px; opacity: 0.7; font-size: 0.8em; }

    .small-company strong { font-family: 'Montserrat', sans-serif; color: var(--text-main); }
    .small-company span {
        /* HIER IST DIE ÄNDERUNG */
        color: var(--accent-green);
    }

    .small-company.size-medium { width: 130px; height: 130px; }
    .small-company.size-medium strong { font-size: 0.9em; }
    .small-company.size-medium span { font-size: 0.75em; }
    .small-company.size-medium .company-specific-logo { width: 40px; height: 40px; object-fit: cover; margin-bottom: 5px; border-radius: 50%; }

    .small-company.size-small { width: 100px; height: 100px; }
    .small-company.size-small strong { font-size: 0.8em; }
    .small-company.size-small span { font-size: 0.65em; }
    .small-company.size-small .company-specific-logo { width: 30px; height: 30px; object-fit: cover; margin-bottom: 4px; border-radius: 50%; }

    .center-company { position: relative; z-index: 10; width: 280px; height: 280px; }
    .center-company .company-logo {
        width: 100%; height: 100%; object-fit: contain; cursor: pointer;
        filter: drop-shadow(0 0 15px rgba(222, 125, 22, 0.3));
        transition: all 0.3s ease;
    }
    .center-company a:hover .company-logo, .center-company a.active .company-logo { transform: scale(1.05); filter: drop-shadow(0 0 25px rgba(109, 232, 40, 0.7)); }

    .network-lines { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }
    .network-path { stroke: var(--accent-orange); stroke-width: 1.5px; stroke-linecap: round; fill: none; stroke-dasharray: 1000; stroke-dashoffset: 1000; opacity: 0; animation: draw-path 2s ease-out forwards; }
    .inter-partner-path { stroke-width: 1px; }
    .network-path-glow { stroke: var(--accent-green); stroke-width: 4px; stroke-linecap: round; fill: none; opacity: 0.9; filter: blur(3px); stroke-dasharray: 80 1000; stroke-dashoffset: 1000; animation: pulse-path 6s linear infinite; }
}


/*
==============================================
MOBILE-ANSICHT (bis 768px)
==============================================
*/
@media (max-width: 768px) {
    body { height: 100vh; overflow: hidden; }
    .mobile-header {
        display: flex; flex-direction: column; align-items: center;
        padding: 20px 15px 15px 15px; flex-shrink: 0;
    }
    .mobile-header-logo { width: 100px; height: auto; }
    .mobile-header h1 { font-size: 1.5em; margin: 10px 0 0 0; color: var(--text-main); }
    
    .main-content {
        align-items: flex-start; padding: 0 15px 20px 15px; overflow-y: auto;
    }
    .container { height: auto; width: 100%; }
    .center-company { display: none; }
    
    .partner-list-mobile { display: flex; flex-direction: column; gap: 15px; width: 100%; }
    .partner-link-mobile {
        display: flex; align-items: center; background-color: rgba(236, 224, 186, 0.05);
        border: 1px solid rgba(222, 125, 22, 0.3); padding: 15px; border-radius: 8px;
        text-decoration: none; transition: background-color 0.3s ease;
    }
    .partner-link-mobile.active { background-color: rgba(109, 232, 40, 0.15); }
    .partner-link-mobile img { width: 50px; height: 50px; border-radius: 50%; margin-right: 15px; object-fit: cover; }
    .partner-link-mobile div { text-align: left; }
    .partner-link-mobile strong { color: var(--text-main); font-size: 1.1em; }
    .partner-link-mobile span {
        /* HIER IST DIE ÄNDERUNG */
        color: var(--accent-green);
        font-size: 0.9em;
    }
    
    .tooltip {
        top: auto; bottom: 10px; left: 10px; right: 10px; width: auto;
    }
}

/* Footer (allgemein) */
.footer {
    width: 100%; background-color: var(--background-dark); color: var(--text-main); text-align: center; padding: 20px 0;
    font-size: 0.9em; border-top: 1px solid rgba(222, 125, 22, 0.3); position: relative; z-index: 5;
    flex-shrink: 0;
}
.footer p { margin: 0; }
.footer a { color: var(--accent-orange) !important; text-decoration: none; font-weight: 600; }
.footer a:hover { color: var(--accent-green) !important; }