/* ==========================================================
   Digitale Visitenkarte
   Manuela Hiegeist
   ========================================================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{

    font-family:'Inter',sans-serif;

    background:#111111;

    color:#ffffff;

    display:flex;

    justify-content:center;

    align-items:center;

    min-height:100vh;

    padding:40px;

}

.container{

    width:100%;

    display:flex;

    justify-content:center;

}

.card{

    width:1100px;

    max-width:100%;

    min-height:620px;

    background:#181818;

    border:1px solid #303030;

    border-radius:18px;

    display:grid;

    grid-template-columns:42% 58%;

    overflow:hidden;

    box-shadow:
        0 25px 80px rgba(0,0,0,.45);

}
/* ==========================================================
   Linke Seite
   ========================================================== */

.left{

    background:#101010;

    padding:70px 55px;

    display:flex;

    flex-direction:column;

    justify-content:center;

}

.logo{

    width:120px;

    height:120px;

    border:2px solid #ffffff;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:46px;

    font-weight:700;

    letter-spacing:3px;

    margin-bottom:45px;

}

.left h1{

    font-size:42px;

    font-weight:700;

    line-height:1.15;

    margin-bottom:14px;

}

.left h2{

    font-size:24px;

    font-weight:400;

    margin-bottom:30px;

    color:#d9d9d9;

}

.master{

    font-size:19px;

    line-height:1.8;

    color:#bdbdbd;

}
/* ==========================================================
   Rechte Seite
   ========================================================== */

.right{

    padding:70px 60px;

    display:flex;

    flex-direction:column;

    justify-content:space-between;

}

.contact{

    display:flex;

    flex-direction:column;

    gap:28px;

}

.contact-item{

    border-bottom:1px solid #2d2d2d;

    padding-bottom:18px;

}

.contact-item:last-child{

    border-bottom:none;

}

.label{

    display:block;

    font-size:13px;

    font-weight:600;

    text-transform:uppercase;

    letter-spacing:2px;

    color:#9b9b9b;

    margin-bottom:10px;

}

.contact p{

    font-size:19px;

    line-height:1.7;

    color:#ffffff;

}

.contact a{

    color:#ffffff;

    text-decoration:none;

    font-size:19px;

    transition:.25s;

}

.contact a:hover{

    color:#d5d5d5;

}

.berater{

    font-size:16px !important;

    color:#c8c8c8 !important;

    line-height:1.6 !important;

}
/* ==========================================================
   Buttons & QR-Code
   ========================================================== */

.actions{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:16px;

    margin-top:40px;

    margin-bottom:40px;

}

.button{

    display:flex;

    justify-content:center;

    align-items:center;

    height:58px;

    border:1px solid #ffffff;

    border-radius:10px;

    color:#ffffff;

    text-decoration:none;

    font-size:17px;

    font-weight:600;

    transition:all .3s ease;

    cursor:pointer;

}

.button:hover{

    background:#ffffff;

    color:#111111;

}

.qr-section{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:25px;

    padding-top:30px;

    border-top:1px solid #2d2d2d;

}

.qr-section img{

    width:140px;

    height:140px;

    background:#ffffff;

    padding:8px;

    border-radius:12px;

}

.qr-section p{

    flex:1;

    font-size:16px;

    color:#bcbcbc;

    line-height:1.6;

}
/* ==========================================================
   Responsive Design
   ========================================================== */

@media (max-width: 1024px){

    .card{

        grid-template-columns:1fr;

        width:100%;

        min-height:auto;

    }

    .left{

        text-align:center;

        align-items:center;

        padding:50px 35px;

    }

    .right{

        padding:45px 35px;

    }

    .actions{

        grid-template-columns:1fr;

    }

    .qr-section{

        flex-direction:column;

        text-align:center;

    }

}

@media (max-width:640px){

    body{

        padding:15px;

    }

    .logo{

        width:90px;

        height:90px;

        font-size:36px;

    }

    .left h1{

        font-size:30px;

    }

    .left h2{

        font-size:20px;

    }

    .master{

        font-size:17px;

    }

    .contact p,
    .contact a{

        font-size:17px;

    }

    .button{

        height:52px;

        font-size:16px;

    }

    .qr-section img{

        width:120px;

        height:120px;

    }

}