/* ==========================================================
   EC KREFELD
   STYLE.CSS
========================================================== */

:root{
    --primary:#005CA9;
    --primary-dark:#004a88;
    --light:#f4f8fc;
    --text:#222;
}

/* ==========================================================
   ALLGEMEIN
========================================================== */

*{
    box-sizing:border-box;
}

body{
    margin:0;
    font-family:system-ui,Arial,sans-serif;
    color:var(--text);
    background:#fff;
}

.container{
    max-width:1100px;
    margin:auto;
    padding:20px;
}

.card{
    background:var(--light);
    padding:20px;
    border-radius:12px;
    margin:15px 0;
}

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

.site-header{
    background:var(--primary);
    color:#fff;
}

.header-inner{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:15px 25px;
}

.site-brand{
    display:flex;
    align-items:center;
    gap:18px;
}

.site-brand img{
    height:70px;
    width:auto;
}

.site-title h1{
    margin:0;
    font-size:32px;
    font-weight:700;
}

.site-title span{
    display:block;
    margin-top:5px;
    color:#dbefff;
    font-size:16px;
}

/* ==========================================================
   SOCIAL
========================================================== */

.header-right{
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap:15px;
    min-width:80px;
}

.social{
    display:grid;

    grid-auto-flow:column;

    grid-template-rows:repeat(2,32px);

    grid-auto-columns:32px;

    gap:6px;

    justify-content:end;
}

.social a{

    width:32px;
    height:32px;

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

    border-radius:50%;

    color:#fff;

    font-size:18px;

    text-decoration:none;

    transition:.25s;

}

.social a:hover{

    background:rgba(255,255,255,.18);

    transform:scale(1.15);

}

.fa-facebook-f:hover{color:#1877F2;}
.fa-instagram:hover{color:#E4405F;}
.fa-youtube:hover{color:#FF0000;}
.fa-tiktok:hover{color:#25F4EE;}
.fa-whatsapp:hover{color:#25D366;}
.fa-linkedin-in:hover{color:#0A66C2;}
.fa-x-twitter:hover{color:#fff;}

/* ==========================================================
   NAVIGATION
========================================================== */

/* ==========================================================
   NAVIGATION
========================================================== */
/* ==========================================================
   NAVIGATION
========================================================== */

.main-nav{
    background:#004a88;
    position:relative;
    z-index:1000;
}

.menu,
.submenu{
    list-style:none;
    margin:0;
    padding:0;
}

.menu{
    display:flex;
}

.menu > li{
    position:relative;
}

.menu > li > a{

    display:block;

    padding:15px 22px;

    color:#fff;

    text-decoration:none;

    font-weight:600;

    transition:.2s;

}

.menu > li:hover{

    background:#006fc8;

}

.menu > li.active > a{

    background:#003b73;

}

/* ---------- Untermenüs ---------- */

.submenu{

    display:none;

    position:absolute;

    top:100%;
    left:0;

    min-width:240px;

    background:#005CA9;

    z-index:9999;      /* neu */

}

.submenu li{

    position:relative;

}

.submenu a{

    display:block;

    padding:12px 18px;

    color:#fff;

    text-decoration:none;

}

.submenu li:hover{

    background:#006fc8;

}

/* ---------- weitere Ebenen ---------- */

.submenu .submenu{

    top:0;

    left:100%;

}

/* ---------- Dropdown ---------- */

.menu > li.has-submenu:hover > .submenu{
    display:block;
}

/* ---------- Pfeil ---------- */

.arrow{

    font-size:10px;

    margin-left:6px;

}

#nav-toggle{
    display:none;
}

.burger{
    display:none;
    cursor:pointer;
    font-size:28px;
    color:#fff;
}

/* ==========================================================
   BREADCRUMB
========================================================== */

.breadcrumb{

    margin:15px 0;

    font-size:14px;

}

.breadcrumb a{

    color:var(--primary);

    text-decoration:none;

}

.breadcrumb a:hover{

    text-decoration:underline;

}

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

@media (max-width:768px){

    .burger{
        display:block;
    }

    .main-nav{
        display:none;
        width:100%;
    }

    #nav-toggle:checked ~ .main-nav{
        display:block;
    }

    .menu{
        flex-direction:column;
    }

    .menu > li{
        width:100%;
    }

    .menu > li > a,
    .menu > li > .menu-title{

        padding:14px 18px;

    }

    .submenu{

        display:block;

        position:static;

        background:#004a88;

        box-shadow:none;

        min-width:unset;

        margin-left:18px;

    }

    .submenu .submenu{

        margin-left:18px;

    }

}







.submenu{
    display:none !important;
}

.has-submenu:hover > .submenu{
    display:block !important;
}

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

.site-footer {
margin-top: 60px;
padding: 30px 20px;
background: #1d1d1d;
color: #fff;
text-align: center;
}

/* Vereinsname */

.footer-brand {
display: flex;
justify-content: center;
align-items: baseline;
gap: 10px;
margin-bottom: 14px;
}

.footer-title {
font-size: 16px;
font-weight: 600;
}

.footer-established {
font-size: 12px;
color: #aaa;
}

/* Rechtliche Links */

.footer-links {
display: flex;
justify-content: center;
align-items: center;
gap: 24px;
margin-bottom: 14px;
}

.footer-links a {
color: #ccc;
font-size: 14px;
text-decoration: none;

```
transition: color 0.2s ease;
```

}

.footer-links a:hover {
color: #fff;
text-decoration: underline;
}

/* Copyright */

.footer-copy {
font-size: 12px;
color: #888;
}

/* ========================================
MOBILE 600?
======================================== */

@media (max-width: 600px) {

```
.site-footer {
    margin-top: 40px;
    padding: 25px 15px;
}

.footer-brand {
    flex-direction: column;
    align-items: center;
    gap: 3px;
}

.footer-links {
    flex-direction: column;
    gap: 8px;
}
```

}