:root{

    --primary-color:#2c5282;
    --primary-light:#ebf8ff;

    --accent-color:#3182ce;

    --text-color:#2d3748;

    --bg-color:#f7fafc;

    --white:#ffffff;

    --border:#e2e8f0;

    --transition:all .3s ease;
}

/* ===============================
   RESET
=============================== */

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

html{
    scroll-behavior:smooth;
}

body{

    font-family:
    Inter,
    "Segoe UI",
    sans-serif;

    background:var(--bg-color);

    color:var(--text-color);

    line-height:1.6;
}

.container{

    width:90%;

    max-width:1200px;

    margin:auto;
}

/* ===============================
   HEADER
=============================== */

.site-header{

    background:var(--white);

    border-bottom:1px solid var(--border);

    position:sticky;

    top:0;

    z-index:1000;
}

.nav-container{

    display:flex;

    justify-content:space-between;

    align-items:center;

    height:72px;
}

.logo{

    text-decoration:none;

    color:var(--primary-color);

    font-size:1.8rem;

    font-weight:700;
}

.main-nav{

    display:flex;

    gap:2rem;

    align-items:center;
}

.main-nav a{

    text-decoration:none;

    color:var(--text-color);
}

.main-nav a.active{

    color:var(--accent-color);

    font-weight:600;
}

.btn-nav{

    background:var(--primary-light);

    color:var(--primary-color);

    padding:.6rem 1rem;

    border-radius:6px;
}

/* ===============================
   HERO
=============================== */

.kontakt-hero{

    background:
    linear-gradient(
        145deg,
        #ffffff,
        var(--primary-light)
    );

    text-align:center;

    padding:5rem 0;
}

.sub-title{

    display:inline-block;

    background:var(--primary-color);

    color:white;

    padding:.35rem .8rem;

    border-radius:999px;

    font-size:.75rem;

    text-transform:uppercase;

    font-weight:700;

    margin-bottom:1rem;
}

.kontakt-hero h1{

    font-size:
    clamp(
        2.5rem,
        5vw,
        4rem
    );

    color:var(--primary-color);

    margin-bottom:1rem;
}

.kontakt-hero p{

    max-width:700px;

    margin:auto;

    color:#4a5568;

    font-size:1.1rem;
}

/* ===============================
   CONTENT
=============================== */

.kontakt-page{

    padding-bottom:6rem;
}

.kontakt-container{

    padding-top:4rem;
}

.kontakt-grid{

    display:grid;

    grid-template-columns:
    1.2fr .8fr;

    gap:3rem;

    align-items:start;
}

/* ===============================
   FORMULAR
=============================== */

.kontakt-form-box{

    background:white;

    padding:3rem;

    border-radius:16px;

    border:1px solid var(--border);

    box-shadow:
    0 4px 15px rgba(0,0,0,.03);
}

.kontakt-form-box h2{

    color:var(--primary-color);

    margin-bottom:.5rem;
}

.form-intro{

    color:#64748b;

    margin-bottom:2rem;
}

.standard-form{

    display:flex;

    flex-direction:column;

    gap:1.5rem;
}

.form-group{

    display:flex;

    flex-direction:column;

    gap:.5rem;
}

.form-group label{

    font-weight:600;
}

.form-group input,
.form-group textarea{

    width:100%;

    border:2px solid #e2e8f0;

    border-radius:8px;

    padding:1rem;

    font-size:1rem;

    background:#f8fafc;

    font-family:inherit;

    transition:var(--transition);
}

.form-group textarea{

    resize:vertical;

    min-height:180px;
}

.form-group input:focus,
.form-group textarea:focus{

    outline:none;

    border-color:var(--accent-color);

    background:white;
}

.btn-submit{

    border:none;

    background:var(--primary-color);

    color:white;

    padding:1rem;

    border-radius:8px;

    cursor:pointer;

    font-size:1rem;

    font-weight:700;

    transition:var(--transition);
}

.btn-submit:hover{

    background:var(--accent-color);
}

/* ===============================
   INFO CARD
=============================== */

.info-card{

    background:white;

    padding:2.5rem;

    border-radius:16px;

    border:1px solid var(--border);

    box-shadow:
    0 4px 15px rgba(0,0,0,.03);
}

.info-card h3{

    color:var(--primary-color);

    margin-bottom:.5rem;
}

.info-card p{

    color:#64748b;

    margin-bottom:2rem;
}

.info-list{

    list-style:none;
}

.info-list li{

    display:flex;

    gap:1rem;

    margin-bottom:1.5rem;
}

.info-icon{

    width:42px;
    height:42px;

    border-radius:8px;

    background:var(--primary-light);

    display:flex;

    justify-content:center;

    align-items:center;

    flex-shrink:0;
}

.info-list strong{

    display:block;

    margin-bottom:.25rem;
}

.info-list a{

    color:var(--accent-color);

    text-decoration:none;
}

/* ===============================
   PLACEHOLDER BOX
=============================== */

.map-placeholder{

    margin-top:2rem;

    background:#dfe5ea;

    height:240px;

    border-radius:16px;

    display:flex;

    justify-content:center;

    align-items:center;
}

.map-overlay{

    background:white;

    padding:1rem 1.5rem;

    border-radius:10px;

    text-align:center;
}

.map-pin{

    display:block;

    font-size:1.5rem;

    margin-bottom:.5rem;
}

/* ===============================
   FOOTER
=============================== */

.site-footer-premium{

    background:#0f172a;

    color:#cbd5e1;

    margin-top:5rem;
}

.footer-grid-four-columns{

    display:grid;

    grid-template-columns:
    1.3fr
    .9fr
    .9fr
    1fr;

    gap:4rem;

    padding:5rem 0;
}

.footer-logo{

    color:white;

    text-decoration:none;

    font-size:1.5rem;

    font-weight:700;
}

.footer-logo span{

    color:var(--accent-color);
}

.brand-pitch{

    margin:1rem 0;
}

.footer-navigation-list{

    list-style:none;
}

.footer-navigation-list li{

    margin-bottom:.75rem;
}

.footer-navigation-list a{

    text-decoration:none;

    color:#cbd5e1;
}

.footer-email-link{

    color:white;

    text-decoration:none;

    font-weight:600;
}

.footer-chat-status-box{

    display:flex;

    gap:1rem;

    margin-top:1rem;
}

.status-indicator-dot{

    width:10px;
    height:10px;

    border-radius:50%;

    background:#10b981;

    margin-top:.4rem;
}

.footer-bottom-copyright-bar{

    border-top:
    1px solid rgba(255,255,255,.08);

    padding:1.5rem 0;
}

.copyright-bar-flex{

    display:flex;

    justify-content:space-between;

    align-items:center;
}

/* ===============================
   MOBILE
=============================== */

@media(max-width:992px){

    .kontakt-grid{

        grid-template-columns:1fr;
    }

    .footer-grid-four-columns{

        grid-template-columns:1fr 1fr;
    }

}

@media(max-width:768px){

    .main-nav{

        display:none;
    }

    .kontakt-hero h1{

        font-size:2.2rem;
    }

    .kontakt-form-box,
    .info-card{

        padding:2rem;
    }

    .footer-grid-four-columns{

        grid-template-columns:1fr;
    }

}