.MA
{
 display: flex;
 flex-wrap:wrap;
justify-content:center;
}

.MA>a:link, .MA>a:visited
{
text-decoration: none;
color:white;
}

.MA>a>.Rahmen
{ 
padding:5px; 
margin:5px;
border-radius:5px;
box-shadow:2px 2px 5px rgba(0,0,0,.6);
transition:all .5s;
position:relative;
}

.MA>a>.Rahmen:active
{ 
box-shadow:none;
transform:translate(1px,1px);
}

.MA>a>.Rahmen.online {background-color:rgba(0,100,0,.8);}
.MA>a>.Rahmen.sprechend {background-color:rgba(200,200,0,.8);}
.MA>a> .Rahmen.offline {background-color:rgba(100,0,0,.8);}

.MA>a>.Rahmen>.Passepartout
{
overflow:hidden;
border-radius:8px;
}

.MA>a> .Rahmen>.Passepartout>img
{
width:200px;
height:200px;
transition:all 3s ease;
}

.MA>a>.Rahmen>.Passepartout>img:hover
{
transform:scale(1.1);
}

.MA>a> .Rahmen>.Titel
{ text-align:center; font-size:1rem; margin:3px; }


.MA>a>.Rahmen>.Info
{
opacity:0;
font-size:1.3rem;
position:absolute;
left:10px; 
top:8px;
 color:#eee;
text-shadow: 2px 2px 3px #333;
transition:all 1s;
}

.MA>a>.Rahmen:hover>.Info
{ opacity:1; }

/* ------ */

.MA>a>.Rahmen.online {background-color:rgba(59,130,64,.8);}
.MA>a>.Rahmen.sprechend {background-color:rgba(200,200,0,.8);}
.MA>a> .Rahmen.offline {background-color:rgba(140,24,69,.8);}