body,form,figure{margin:0;padding:0}img{border:0}header,footer,nav,section,aside,article,figure,figcaption{display:block}body{font-size:100.01%}select,input,textarea{font-size:99%}#container,.inside{position:relative}#main,#left,#right{float:left;position:relative}#main{width:100%}#left{margin-left:-100%}#right{margin-right:-100%}#footer{clear:both}#main .inside{min-height:1px}.ce_gallery>ul,.content-gallery>ul{margin:0;padding:0;overflow:hidden;list-style:none}.ce_gallery>ul li,.content-gallery>ul li{float:left}.ce_gallery>ul li.col_first,.content-gallery>ul li.col_first{clear:left}.float_left,.media--left>figure{float:left}.float_right,.media--right>figure{float:right}.block{overflow:hidden}.clear,#clear{height:.1px;font-size:.1px;line-height:.1px;clear:both}.invisible{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.custom{display:block}#container:after,.custom:after{content:"";display:table;clear:both}
@media (max-width:767px){#wrapper{margin:0;width:auto}#container{padding-left:0;padding-right:0}#main,#left,#right{float:none;width:auto}#left{right:0;margin-left:0}#right{margin-right:0}}img{max-width:100%;height:auto}.audio_container audio{max-width:100%}.video_container video{max-width:100%;height:auto}.aspect,.responsive{position:relative;height:0}.aspect iframe,.responsive iframe{position:absolute;top:0;left:0;width:100%;height:100%}.aspect--16\:9,.responsive.ratio-169{padding-bottom:56.25%}.aspect--16\:10,.responsive.ratio-1610{padding-bottom:62.5%}.aspect--21\:9,.responsive.ratio-219{padding-bottom:42.8571%}.aspect--4\:3,.responsive.ratio-43{padding-bottom:75%}.aspect--3\:2,.responsive.ratio-32{padding-bottom:66.6666%}
/* ==========================================
   GESAMTDESIGN: REDESIGN 2026 (HELL & MODERN)
   ========================================== */

/* 1. SEITEN-RASTER & GRUNDSTYLING */
body {
    background-color: #ffffff !important;
    color: #1a202c !important;
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* 2. FREI SCHWEBENDER STICKY HEADER (VOLLE FORCE WUNSCHSEITE) */
header, #header, .mod_navigation {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 90px !important;
    background-color: #ffffff !important;
    border-bottom: 1px solid #e2e8f0 !important;
    z-index: 99999 !important; /* Überlagert alles andere sicher */
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 0 40px !important;
    box-sizing: border-box !important;
}

/* Das Logo-Modul */
.header-logo {
    display: block !important;
    line-height: 1 !important;
}

.header-logo img {
    display: block !important;
    height: 55px !important; /* Perfekte Höhe für das Logo */
    width: auto !important;
}

/* 3. NAVIGATION IN EINE SCHLANKE REIHE ZWINGEN */
.mod_navigation ul {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 30px !important;
}

.mod_navigation li {
    display: inline-block !important;
}

.mod_navigation a, 
.mod_navigation span {
    color: #1a202c !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    font-size: 0.95rem !important;
    transition: color 0.2s ease !important;
}

/* Hover-Effekt: Sortimo-Dunkelblau */
.mod_navigation a:hover {
    color: #0054a6 !important;
}

/* 4. KACHEL-CONTAINER (ABSTAND WEGEN FIXIERTEM HEADER) */
.kachel-container {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 30px !important;
    margin: 150px auto 50px auto !important; /* Schiebt die Kacheln weit genug unter den Header */
    justify-content: center !important;
}

.leistungs-kachel {
    background: #f8fafc !important;
    border-radius: 0px !important;
    padding: 35px !important;
    flex: 1 1 calc(33.333% - 30px) !important;
    min-width: 280px !important;
    border: 1px solid #e2e8f0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    transition: all 0.3s ease !important;
}

.leistungs-kachel:hover {
    transform: translateY(-5px) !important;
    background-color: #050c1a !important; /* Nachtblau aus dem Logo */
    border-color: #2e93ff !important;
}

.leistungs-kachel:hover h1, 
.leistungs-kachel:hover h2, 
.leistungs-kachel:hover h3, 
.leistungs-kachel:hover p {
    color: #ffffff !important;
}

.leistungs-kachel a {
    display: inline-block !important;
    margin-top: 25px !important;
    padding: 12px 24px !important;
    color: #2e93ff !important;
    border: 2px solid #2e93ff !important;
    text-decoration: none !important;
    font-weight: 700 !important;
    text-align: center !important;
    text-transform: uppercase !important;
}

.leistungs-kachel:hover a {
    background-color: #2e93ff !important;
    color: #050c1a !important;
}