.contacts-wrapper{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
gap:70px;
max-width:1400px;
margin:80px auto;
padding:0 20px;
}


/* BLOCK */

.contact-block{
display:flex;
flex-direction:column;
align-items:center;
width:100%;

/* standard sichtbar */
opacity:1;
transform:translateY(0);

/* Animation vorbereitet */
transition:opacity 800ms cubic-bezier(.22,.61,.36,1),
transform 800ms cubic-bezier(.22,.61,.36,1);
}


/* FadeUp */

.contact-block.fade-init{
opacity:0;
transform:translateY(40px);
}

.contact-block.visible{
opacity:1;
transform:translateY(0);
}


/* TITLE */

.contact-title{
font-family:'Rajdhani',sans-serif;
font-size:30px;
font-weight:600;
letter-spacing:6px;
text-transform:uppercase;
opacity:.85;
margin-bottom:-8px;
text-align:center;
width:100%;
}


/* CARD */

.contact-card{
background:rgba(0,0,0,0.72);
color:#fff;
padding:40px 38px;
text-align:center;
border-radius:10px;

width:100%;
height:100%;

display:flex;
flex-direction:column;
align-items:center;

backdrop-filter:blur(6px);
-webkit-backdrop-filter:blur(6px);

border:1px solid rgba(255,255,255,0.05);

box-shadow:
0 20px 50px rgba(0,0,0,0.55),
0 0 40px rgba(0,0,0,0.25) inset;

transition:transform .25s ease, box-shadow .25s ease;
}


/* Hover */

.contact-card:hover{
transform:translateY(-4px);
box-shadow:
0 25px 60px rgba(0,0,0,0.65),
0 0 40px rgba(0,0,0,0.25) inset;
}


/* COMPANY */

.contact-company{
font-family:'Rajdhani',sans-serif;
font-size:30px;
font-weight:700;
letter-spacing:3px;
text-transform:uppercase;

height:70px;
display:flex;
flex-direction:column;
justify-content:flex-start;
align-items:center;
line-height:1.2;
}


/* DIVIDER */

.contact-divider{
width:48px;
height:2px;
background:rgba(255,255,255,0.8);
margin:20px 0 24px 0;
opacity:.9;
}


/* NAME */

.contact-name{
font-size:22px;
height:28px;
display:flex;
align-items:center;
justify-content:center;
margin-bottom:22px;
}


/* PHONE + EMAIL */

.contact-phone,
.contact-email{
font-size:22px;

display:flex;
align-items:center;
justify-content:flex-start;

width:260px;
margin:0 auto;

gap:12px;

/* WICHTIG: feste Höhe */
height:28px;
}

.contact-phone{
margin-bottom:16px;
}


/* ICONS */

.contact-phone svg,
.contact-email svg{
height:18px;
opacity:.8;
flex-shrink:0;

width:24px;
text-align:center;
}


/* LINKS */

.contact-phone a,
.contact-email a{
display:flex;
align-items:center;
gap:12px;

color:inherit;
text-decoration:none;
white-space:nowrap;

transition:opacity .2s ease;
}

.contact-phone a:hover,
.contact-email a:hover{
text-decoration:underline;
opacity:.85;
}


/* MOBILE */

@media(max-width:800px){

.contacts-wrapper{
grid-template-columns:1fr;
gap:40px;
margin:60px auto;

padding-left:0px;
padding-right:50px;
}

.contact-title{
font-size:24px;
}

.contact-company{
font-size:24px;
height:auto;
}

.contact-name{
font-size:20px;
}

.contact-phone,
.contact-email{
font-size:19px;
width:260px;
}

}