.meb-vehicle-container {
    position: relative;
    width: 650px;
    height: 650px;
    margin: 0 auto;
    border-radius: 20px;
    border: none;
    box-shadow: none;
    background: none;
}

.meb-vehicle-diagram {
    position: relative;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(0, 159, 227, 0.2) 0%, rgba(64, 181, 233, 0.2) 100%);
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.meb-center-vehicle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 38%;
    aspect-ratio: 1;
    z-index: 3;
    background: linear-gradient(135deg, #fff 0%, #009FE3 100%);
    border-radius: 15px;
    border: 1px solid #fff;
    padding: 10px;
    transition: all 0.3s ease;
}

.meb-center-vehicle:hover {
    transform: translate(-50%, -50%) scale(1.1);
    box-shadow: 0 0 20px rgba(0, 159, 227, 0.5); /* Blauer Schatten */
}

.meb-part {
    --circle-radius: 250px; /* Abstand vergrößert */
    position: absolute;
    width: 18%;
    aspect-ratio: 1;
    z-index: 2;
    top: 50%;
    left: 50%;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.4);
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 159, 227, 0.3);
}

.meb-part:hover {
    width: 16%;
}

.meb-part:hover .meb-part-content {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.8), rgba(0, 159, 227, 0.8)); /* Effekt mit Verlauf von Weiß zu Blau */
    border-color: #fff;
    box-shadow: 0 4px 20px rgba(0, 159, 227, 0.5), 0 0 30px rgba(0, 159, 227, 0.7); /* Schöner blauer Schimmer */
}

.meb-part:hover .meb-part-content {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.8), rgba(0, 159, 227, 0.7)); /* Effekt mit Verlauf von Weiß zu Blau */
    border-color: #fff;
    box-shadow: 0 4px 20px rgba(0, 159, 227, 0.5), 0 0 30px rgba(0, 159, 227, 0.7); /* Schöner blauer Schimmer */
}

.meb-part:hover .meb-part-content {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(0, 159, 227, 0.3)); /* Transparenter Glassmorphismus-Effekt */
    border-color: #fff;
    box-shadow: 0 4px 20px rgba(0, 159, 227, 0.4), 0 0 30px rgba(0, 159, 227, 0.6); /* Leichte Spiegelung und weicher Schein */
}

.meb-part:hover .meb-part-content {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(0, 159, 227, 0.4)); /* Glassmorphismus mit blauer Spiegelung */
    border-color: #fff;
    box-shadow: 0 4px 20px rgba(0, 159, 227, 0.4), 0 0 30px rgba(0, 159, 227, 0.6); /* Schöner blauer Schimmer */
}

.meb-part:hover .meb-part-content {
    background: linear-gradient(135deg, rgba(0, 159, 227, 0.8), rgba(64, 181, 233, 0.8)); /* Reiner blauer Effekt */
    border-color: #fff;
    box-shadow: 0 0 25px rgba(0, 159, 227, 0.8); /* Satter blauer Leuchteffekt */
}


.meb-connector {
    position: absolute;
    background: #fff;
    height: 2px;
    width: 70px;
    top: 50%;
    right: 50%;
    transform-origin: 100% 50%;
    z-index: 0; /* Sicherstellen, dass die Stricke unter den Kreisen liegen */
    transition: all 0.3s ease;
}

.meb-part:hover .meb-connector {
    background: #FF6600;
    height: 3px;
    box-shadow: 0 0 10px rgba(191, 233, 0, 0.5);
}

.meb-part-content {
    position: relative;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(0, 159, 227, 0.2) 0%, rgba(46, 204, 113, 0.1) 100%);
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.8);
    padding: 10px;
    transition: all 0.3s ease;
    cursor: pointer;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    box-shadow: 0 4px 15px rgba(0, 159, 227, 0.1);
}

.meb-part-content img {
    width: 90%;
    height: 90%;
    object-fit: contain;
}

.meb-part-content a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.meb-part-label {
    position: absolute;
    text-align: center;
    min-width: 90px;
    padding: 5px 10px;
    background: #009FE3;
    border-radius: 8px;
    font-size: 14px;
    color: #fff; 
    left: 50%;
    transform: translateX(-50%);
    bottom: -30px;
    border: 1px solid #fff;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    white-space: nowrap;
    z-index: 100; /* Z-Index über alles */
    opacity: 0;
    visibility: hidden;
    font-weight: bold; /* Fett */
    letter-spacing: 0.2px;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    filter: none;
    -webkit-filter: none;
}

.meb-part:hover .meb-part-label {
    opacity: 1;
    visibility: visible;
    background: #FF6600;
    transform: translateX(-50%) translateY(-5px);
    border-color: #fff;
    z-index: 110; /* Sicherstellung, dass es immer oben ist */
}

/* Positionierung der 10 Teile - mathematisch korrekt im Kreis */
/* Mathematische Kreisverteilung:
   x = radius * cos(angle)
   y = radius * sin(angle)
   Winkel zwischen Elementen: 360° / 10 = 36° = 0.628rad */

.meb-part1 { transform: translate(-50%, -50%) translate(calc(var(--circle-radius) * 0), calc(var(--circle-radius) * -1)); }          /* 0° */
.meb-part2 { transform: translate(-50%, -50%) translate(calc(var(--circle-radius) * 0.588), calc(var(--circle-radius) * -0.809)); }  /* 36° */
.meb-part3 { transform: translate(-50%, -50%) translate(calc(var(--circle-radius) * 0.951), calc(var(--circle-radius) * -0.309)); }  /* 72° */
.meb-part4 { transform: translate(-50%, -50%) translate(calc(var(--circle-radius) * 0.951), calc(var(--circle-radius) * 0.309)); }   /* 108° */
.meb-part5 { transform: translate(-50%, -50%) translate(calc(var(--circle-radius) * 0.588), calc(var(--circle-radius) * 0.809)); }   /* 144° */
.meb-part6 { transform: translate(-50%, -50%) translate(calc(var(--circle-radius) * 0), calc(var(--circle-radius) * 1)); }           /* 180° */
.meb-part7 { transform: translate(-50%, -50%) translate(calc(var(--circle-radius) * -0.588), calc(var(--circle-radius) * 0.809)); }  /* 216° */
.meb-part8 { transform: translate(-50%, -50%) translate(calc(var(--circle-radius) * -0.951), calc(var(--circle-radius) * 0.309)); }  /* 252° */
.meb-part9 { transform: translate(-50%, -50%) translate(calc(var(--circle-radius) * -0.951), calc(var(--circle-radius) * -0.309)); } /* 288° */
.meb-part10 { transform: translate(-50%, -50%) translate(calc(var(--circle-radius) * -0.588), calc(var(--circle-radius) * -0.809)); }/* 324° */

/* Connector-Ausrichtung - mathematisch korrekt */
.meb-part1 .meb-connector { transform: rotate(0deg); }      /* 0° */
.meb-part2 .meb-connector { transform: rotate(36deg); }     /* 36° */
.meb-part3 .meb-connector { transform: rotate(72deg); }     /* 72° */
.meb-part4 .meb-connector { transform: rotate(108deg); }    /* 108° */
.meb-part5 .meb-connector { transform: rotate(144deg); }    /* 144° */
.meb-part6 .meb-connector { transform: rotate(180deg); }    /* 180° */
.meb-part7 .meb-connector { transform: rotate(216deg); }    /* 216° */
.meb-part8 .meb-connector { transform: rotate(252deg); }    /* 252° */
.meb-part9 .meb-connector { transform: rotate(288deg); }    /* 288° */
.meb-part10 .meb-connector { transform: rotate(324deg); }   /* 324° */

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

.meb-part.active .meb-part-content {
    animation: meb-pulse 2s infinite;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.8), rgba(0, 159, 227, 0.7)); /* Blau mit Verlauf */
    border-color: #FF6600;
}