/* --- NEUER CYBERPUNK BILDER-EFFEKT --- */

/* 1. Die drei Bilder nebeneinander anordnen */
.team_cyberpunk_gallery {
    display: flex;
    justify-content: center; /* Zentriert die Bilder */
    gap: 15px;               /* Abstand zwischen den Bildern */
    margin-top: 10px;        /* Abstand zum Namen */
    width: 100%;
}

/* 2. Container für jedes der drei Bilder (für den Effekt) */
.cyberpunk_image_wrap {
    position: relative;      /* Wichtig für Pseudo-Element-Effekte */
    width: 100px;           /* Feste Breite für die drei Bilder */
    height: 100px;          /* Feste Höhe */
    overflow: hidden;       /* Schneidet überstehende Effekte ab */
    background: #000;       /* Dunkler Hintergrund für den Effekt */
}

/* 3. Das eigentliche Bild */
.cyberpunk_image_wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;      /* Füllt die Box aus */
    filter: sepia(100%) hue-rotate(-20deg) brightness(80%) contrast(150%); /* Cyber-Sepia Filter */
    transition: filter 0.3s ease; /* Weicher Übergang beim Hover */
}

/* 4. Der Glitch-Effekt (als Pseudo-Element) */
.cyberpunk_image_wrap::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: repeating-linear-gradient(
        transparent,
        transparent 2px,
        rgba(0, 255, 255, 0.1) 2px,
        rgba(0, 255, 255, 0.1) 4px
    );
    opacity: 0.8;
    z-index: 1; /* Über dem Bild */
}

/* 5. Ein Neon-Rahmen-Effekt (als Pseudo-Element) */
.cyberpunk_image_wrap::after {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    border: 2px solid transparent;
    box-sizing: border-box;
    transition: border-color 0.3s ease;
    z-index: 2; /* Ganz oben */
}

/* 6. Effekte bei Maus-Hover (optional, macht es interaktiver) */
.cyberpunk_image_wrap:hover img {
    filter: none; /* Zeigt das Original-Farbbild */
}

.cyberpunk_image_wrap:hover::after {
    border-color: #00ffff; /* Neon-Türkiser Rahmen beim Hover */
    box-shadow: 0 0 10px #00ffff, 0 0 20px #00ffff; /* Neon-Glühen */
}

/* --- ZUSATZ-OPTION (optional) --- */
/* Falls du in der MITTLEREN Box das große Profilbild ausblenden willst */
.special_image_container {
    /* display: none; */ /* Auskommentieren, wenn du das große Bild weghaben willst */
    opacity: 0.1; /* Macht das große Bild fast unsichtbar */
}