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%}
/* 1. RESET & VARIABLEN */
:root { 
    --sortimo-blau: #0168b3; 
    --header-bg: #000323; 
    --topbar-bg: #cccccc; 
    --seite-breite: 1400px; 
    --silber-bg: #f2f2f2; 
    --schrift-menu: 'Oxanium', sans-serif; 
}

/* 4K-OPTIMIERTER AMBIENT-HINTERGRUND */
html, body { 
    margin: 0 !important; 
    padding: 0 !important; 
    min-height: 100vh; 
    background-color: var(--silber-bg) !important; 
    
    /* Der Grauschleier wird auf 75% reduziert (25% Bild-Sichtbarkeit), 
       damit das Muster auf eurem großen Monitor deutlich erkennbar wird! */
    background-image: linear-gradient(rgba(242,242,242,0.75), rgba(242,242,242,0.75)), url('../../files/sk/css/files/sk/img/305235466_530324482231476_2089151218626140775_n.jpg') !important;
    background-attachment: fixed !important; 
    background-position: center center !important; 
    background-repeat: no-repeat !important; 
    
    /* WICHTIG FÜR 4K: Wir kacheln das Bild auf eine feste Full-HD-Breite, 
       damit die Halle links und rechts neben den 1400px perfekt ins Auge springt 
       und nicht im Nichts verschwindet! */
    background-size: 2200px auto !important; 
}

#wrapper { 
    max-width: var(--seite-breite) !important; 
    margin: 0 auto !important; 
    background-color: #ffffff !important; 
    box-shadow: 0 0 60px rgba(0, 3, 35, 0.2) !important; 
    position: relative; 
    z-index: 1 !important; 
}

#header .invisible, #header .invisible-text, #header span.invisible, #header .inside::before, #header .inside::after, .mod_navigation::before, .mod_navigation::after, .mod_customnav::before, .mod_customnav::after { display: none !important; content: none !important; width: 0 !important; height: 0 !important; visibility: hidden !important; }

/* 2. GRID RASTER */
#header { background-color: var(--header-bg) !important; position: sticky; top: 0; z-index: 1000; width: 100%; border: none !important; border-bottom: none !important; padding: 0; box-shadow: none !important; }
#header .inside { max-width: var(--seite-breite); margin: 0 auto; box-sizing: border-box; padding: 0 40px !important; position: relative !important; display: grid !important; grid-template-columns: auto 1fr; grid-template-rows: 40px 160px; border-bottom: none !important; }

/* 3. POSITIONIERUNG IM RASTER */
#header .inside .mod_customnav { grid-column: 1 / span 2; grid-row: 1; height: 40px; display: flex; justify-content: flex-end; align-items: center; border-bottom: 1px solid rgba(255,255,255,0.1); margin: 0 -40px 0 -40px; padding-right: 110px; background-color: var(--topbar-bg); }
#header .inside .logo, #header .inside .ce_html, #header .inside .mod_html { grid-column: 1; grid-row: 2; display: flex; align-items: center; height: 160px; margin: 0; padding: 0; }
#header .inside img { height: 140px !important; width: auto !important; display: block; margin: 0; padding: 0; }
#header .inside .mod_navigation { grid-column: 2; grid-row: 2; display: flex; justify-content: flex-end; align-items: center; height: 160px; margin: 0; padding: 0; }
#header .inside .mod_navigation ~ .mod_navigation { display: none !important; }
#header .inside ul { margin: 0; padding: 0; list-style: none; display: flex; }
#header .inside .mod_customnav ul { gap: 18px; } 
#header .inside .mod_navigation ul { gap: 28px; } 
#header .inside li { position: relative; display: inline-block; padding-right: 12px !important; }
#header .inside a, #header .inside span, #header .inside span[itemprop="name"] { font-family: var(--schrift-menu) !important; font-style: italic; font-weight: 700; text-decoration: none; display: inline-block; transition: color 0.2s ease; color: #ffffff; }
/* 4. TOP-BAR LINKS & EFFEKTE */
#header .inside .mod_customnav a, #header .inside .mod_customnav span { font-size: 13px; font-weight: bold !important; color: #2B82EB !important; padding: 4px 0 !important; position: relative; }
#header .inside .mod_customnav a::after { content: ''; position: absolute; bottom: 4px; left: 50%; width: 0; height: 2px; background-color: #ffffff !important; transform: translateX(-50%) skewX(-15deg); transition: width 0.25s ease-in-out; }
#header .inside .mod_customnav a:hover, #header .inside .mod_customnav li:hover a, #header .inside .mod_customnav a.active, #header .inside .mod_customnav a.trail { color: #ffffff !important; }
#header .inside .mod_customnav a:hover span, #header .inside .mod_customnav li:hover a span, #header .inside .mod_customnav a.active span, #header .inside .mod_customnav a.trail span { color: #ffffff !important; }
#header .inside .mod_customnav a:hover::after, #header .inside .mod_customnav li:hover a::after, #header .inside .mod_customnav a.active::after, #header .inside .mod_customnav a.trail::after { width: 100%; background-color: #ffffff !important; }


/* 5. SOCIAL MEDIA ICONS */
#header .inside .topbar-socials { grid-column: 2 !important; grid-row: 1 !important; position: relative !important; display: flex !important; align-items: center !important; justify-content: flex-end !important; margin-right: 410px !important; height: 40px !important; z-index: 1001 !important; gap: 14px !important; }
#header .inside .topbar-socials .social-link-new { display: inline-flex !important; align-items: center; justify-content: center; transition: transform 0.2s ease !important; }
#header .inside .topbar-socials .social-link-new img { width: 16px !important; height: 16px !important; display: block !important; object-fit: contain !important; }
#header .inside .topbar-socials .social-link-new:hover { transform: scale(1.15) !important; }

/* 6. HAUPTMENÜ LINKS & EFFEKTE */
#header .inside .mod_navigation a, #header .inside .mod_navigation span { font-size: 16px; color: #ffffff !important; padding: 8px 0 !important; position: relative; text-decoration: none !important; }
#header .inside .mod_navigation a::after { content: ''; position: absolute; bottom: 6px; left: 50%; width: 0; height: 2px; background-color: #2B82EB !important; transform: translateX(-50%) skewX(-15deg); transition: width 0.25s ease-in-out; }
#header .inside .mod_navigation a:hover, #header .inside .mod_navigation li:hover a, #header .inside .mod_navigation a.active, #header .inside .mod_navigation a.trail { color: #2B82EB !important; }
#header .inside .mod_navigation a:hover span, #header .inside .mod_navigation li:hover a span, #header .inside .mod_navigation a.active span, #header .inside .mod_navigation a.trail span { color: #2B82EB !important; }
#header .inside .mod_navigation a:hover::after, #header .inside .mod_navigation li:hover a::after, #header .inside .mod_navigation a.active::after, #header .inside .mod_navigation a.trail::after { width: 100%; }

/* 7. RESET CONTAINER & MAIN (LEERRÄUME SCHLIESSEN) */
#container, #main, .main-content { 
    border-top: none !important; 
    margin-top: -45px !important; 
    padding-top: 45px !important; 
    padding-bottom: 0 !important; /* Entfernt den weißen Abstand nach unten */
    min-height: 0 !important; /* Verhindert, dass eine Mindesthöhe den Raum künstlich streckt */
    background-color: #ffffff;
    border: none !important; 
}

/* 8. FOOTER-BEREICH - ANFANG KORRIGIERT */
#footer { background-color: var(--header-bg) !important; color: #ffffff; padding: 50px 0 30px 0; border-top: none !important; position: relative; z-index: 10; }
#footer .inside { max-width: var(--seite-breite); margin: 0 auto; box-sizing: border-box; padding: 0 40px !important; display: grid !important; grid-template-columns: 1.5fr 1fr 1.5fr; gap: 40px; }
#footer .inside::before, #footer .inside::after { display: none !important; content: none !important; width: 0 !important; height: 0 !important; visibility: hidden !important; }
#footer h3 { font-family: var(--schrift-menu) !important; font-style: italic; font-weight: 700; font-size: 18px; color: #ffffff; margin: 0 0 20px 0; letter-spacing: 0.5px; }
#footer p, #footer text, #footer address { font-family: 'Inter', sans-serif; font-style: normal; font-size: 14px; line-height: 1.6; color: #cccccc; margin: 0 0 15px 0; }
#footer .nav-col ul { margin: 0; padding: 0; list-style: none; }
#footer .nav-col li { margin-bottom: 6px; }
#footer .nav-col a { font-family: var(--schrift-menu) !important; font-style: italic; font-weight: 700; font-size: 13px; color: #ffffff !important; text-decoration: none; transition: color 0.2s ease; display: inline-block; padding: 2px 0 !important; position: relative; }
#footer .nav-col a::after { content: ''; position: absolute; bottom: -1px; left: 50%; width: 0; height: 2px; background-color: var(--sortimo-blau) !important; transform: translateX(-50%) skewX(-15deg); transition: width 0.25s ease-in-out; }
#footer .nav-col li:hover a, #footer .nav-col a:hover { color: var(--sortimo-blau) !important; }
#footer .nav-col li:hover a::after, #footer .nav-col a:hover::after { width: 100%; }
#footer .logo-col { display: flex; justify-content: center; align-items: center; }
#footer .tuev-link { display: block; transition: transform 0.25s ease, filter 0.25s ease; }
#footer .tuev-link:hover { transform: scale(1.04); filter: drop-shadow(0px 6px 15px rgba(0,122,255,0.4)); }
#footer .logo-col img { max-height: 120px; width: auto; display: block; filter: drop-shadow(0px 4px 10px rgba(0,0,0,0.3)); }
#footer .info-col { text-align: right; display: flex; flex-direction: column; align-items: flex-end; }
#footer .footer-brand-logo { margin-bottom: 20px; }
#footer .footer-brand-logo img { width: 200px !important; height: auto !important; display: block; }
#footer .info-col .address { font-family: var(--schrift-menu) !important; font-style: italic !important; font-weight: 700 !important; font-size: 15px; line-height: 1.5; color: #ffffff; margin: 0 0 15px 0; }
#footer .info-col .contact-details { margin: 0; line-height: 1.6; }
#footer .info-col a.footer-contact-link { color: #ffffff !important; font-family: var(--schrift-menu) !important; font-style: italic !important; font-weight: 700 !important; font-size: 15px; text-decoration: none; transition: color 0.2s ease; display: inline-block; padding: 2px 0 !important; position: relative; }
#footer .info-col a.footer-contact-link::after { content: ''; position: absolute; bottom: -1px; left: 50%; width: 0; height: 2px; background-color: var(--sortimo-blau) !important; transform: translateX(-50%) skewX(-15deg); transition: width 0.25s ease-in-out; }
#footer .info-col a.footer-contact-link:hover { color: var(--sortimo-blau) !important; }
#footer .info-col a.footer-contact-link:hover::after { width: 100%; }
#footer .footer-bottom { grid-column: 1 / span 3; border-top: 1px solid rgba(255, 255, 255, 0.1); margin-top: 30px; padding-top: 25px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 20px; }
#footer .footer-bottom p { margin: 0; font-size: 13px; font-family: 'Inter', sans-serif; }
#footer .footer-bottom ul { display: flex; gap: 25px; margin: 0; padding: 0; list-style: none; }
#footer .footer-bottom a { font-family: var(--schrift-menu) !important; font-style: italic; font-weight: 700; font-size: 13px; color: #cccccc !important; text-decoration: none; transition: color 0.2s ease; }
#footer .footer-bottom a:hover { color: var(--sortimo-blau) !important; }


/* ==========================================================================
   10. HERO TEASER BILDER FÜR UNTERSEITEN
   ========================================================================== */
.hero-teaser-img { width: 100% !important; max-width: 100% !important; display: block !important; overflow: hidden !important; margin: 0 !important; padding: 0 !important; }
.hero-teaser-img img { width: 100% !important; height: auto !important; max-height: 450px !important; object-fit: cover !important; display: block !important; }

/* ==========================================================================
   11. DYNAMISCHE TEASER-KACHEL RECHTS
   ========================================================================== */
.hero-teaser-wrapper { position: relative; width: 100% !important; max-width: 100% !important; display: block !important; overflow: hidden !important; margin: 0 !important; padding: 0 !important; }
.hero-teaser-wrapper img { width: 100% !important; height: auto !important; max-height: 450px !important; object-fit: cover !important; display: block !important; }

.hero-badge-right {
    position: absolute !important;
    bottom: 0 !important;
    right: 0 !important;
    background-color: #2B82EB !important; /* Euer Lichtblau */
    color: #ffffff !important;
    padding: 15px 40px !important;
    font-family: var(--schrift-menu) !important;
    font-style: italic !important;
    font-weight: 700 !important;
    font-size: 22px !important;
    text-transform: uppercase !important;
    transform: skewX(-15deg) !important;
    margin-right: -15px !important;
    box-shadow: -5px 0 20px rgba(0,0,0,0.2) !important;
    z-index: 999 !important;
}

.hero-badge-right span {
    display: block !important;
    transform: skewX(15deg) !important; 
}

/* ==========================================================================
   12. MODERNES SPLIT-LAYOUT & KACHELN - COMPACT STABLE CLICK (L&S)
   ========================================================================== */
.ls-content-row { display: flex !important; gap: 50px !important; margin: 40px auto 20px auto !important; max-width: 1400px !important; padding: 0 40px !important; box-sizing: border-box !important; align-items: center !important; }
.ls-text-col { flex: 1.1 !important; }
.ls-text-col h2 { font-family: 'Oxanium', sans-serif !important; font-style: italic !important; font-weight: 700 !important; font-size: 28px !important; color: #000323 !important; margin: 0 0 15px 0 !important; }
.ls-text-col p, .team-intro-col p { font-family: 'Oxanium', sans-serif !important; font-size: 15px !important; line-height: 1.7 !important; color: #444444 !important; margin-bottom: 12px !important; }
.ls-fact-col { flex: 0.9 !important; display: flex !important; flex-direction: column !important; gap: 20px !important; }

/* Klick-Zwang-Reparatur: Macht die komplette schräge Box sauber im Browser klickbar */
.ls-fact-col a.ls-main-card { text-decoration: none !important; display: block !important; color: inherit !important; background-color: #f2f2f2 !important; border-left: 5px solid #2B82EB !important; padding: 20px 25px !important; transform: skewX(-15deg) !important; box-shadow: 2px 2px 10px rgba(0,0,0,0.05) !important; transition: transform 0.25s ease, box-shadow 0.25s ease, border-left-color 0.25s ease !important; cursor: pointer !important; }

/* HOVER GRAUE KACHELN: Kachel hebt sich, die linke Kante wird Nachtblau und ein starker blauer Schatten fährt aus */
.ls-fact-col a.ls-main-card:hover { transform: translateY(-4px) skewX(-15deg) !important; border-left: 5px solid #000323 !important; box-shadow: -8px 12px 25px rgba(43, 130, 235, 0.35) !important; }

/* DIE DUNKELBLAUE KACHEL (Position 2) */
.ls-fact-col a.ls-main-card.highlight-card { background-color: #0a1435 !important; border-left: 6px solid #2B82EB !important; padding: 30px 35px !important; box-shadow: 0 10px 30px rgba(0, 3, 35, 0.15) !important; }

/* HOVER DUNKELBLAU: Kachel hebt sich, die linke Kante wird Weiss und ein tiefer blauer Schatten fährt aus */
.ls-fact-col a.ls-main-card.highlight-card:hover { border-left: 6px solid #ffffff !important; box-shadow: -8px 12px 30px rgba(43, 130, 235, 0.45) !important; }

/* Schriften im Inneren ausrichten (Oxanium) */
.ls-main-card .fact-card-inner { transform: skewX(15deg) !important; }
.ls-main-card .fact-card-inner h3 { font-family: 'Oxanium', sans-serif !important; font-style: italic !important; font-weight: 700 !important; font-size: 18px !important; color: #000323 !important; margin: 0 0 8px 0 !important; }
.ls-main-card .fact-card-inner p { font-family: 'Oxanium', sans-serif !important; font-size: 13px !important; line-height: 1.5 !important; color: #555555 !important; margin: 0 0 4px 0 !important; }

/* Textfarben für die dunkelblaue Kachel */
.ls-main-card.highlight-card .fact-card-inner h3 { font-size: 22px !important; color: #ffffff !important; }
.ls-main-card.highlight-card .fact-card-inner p { font-size: 14px !important; line-height: 1.6 !important; color: #cbd5e1 !important; }

.hero-badge-right, .hero-badge-right span { text-transform: none !important; }
@media (max-width: 768px) { .ls-content-row { flex-direction: column !important; gap: 30px !important; padding: 0 20px !important; align-items: stretch !important; } .ls-fact-col a.ls-main-card { transform: skewX(0deg) !important; } .ls-main-card .fact-card-inner { transform: skewX(0deg) !important; } }

/* ==========================================================================
   13. MODERNES TEAM-GRID (DESIGN 26) - STRICT SINGLE FONT (OXANIUM ONLY)
   ========================================================================== */
.team-section { max-width: 1400px; margin: 40px auto; padding: 0 40px; box-sizing: border-box; }
.team-department-title { font-family: 'Oxanium', sans-serif !important; font-style: italic !important; font-weight: 700 !important; font-size: 24px !important; color: #000323 !important; border-bottom: 2px solid #2B82EB !important; padding-bottom: 8px !important; letter-spacing: 0.5px !important; margin: 50px 0 25px 0 !important; }
.team-grid { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 30px !important; }

.team-card-skew { background-color: #0a1435 !important; padding: 0 0 4px 0 !important; box-shadow: 0 4px 15px rgba(0, 3, 35, 0.08) !important; transition: transform 0.3s ease, box-shadow 0.3s ease !important; overflow: hidden !important; display: flex !important; flex-direction: column !important; position: relative !important; cursor: pointer; }
.team-card-skew:hover { transform: translateY(-6px) !important; box-shadow: 0 18px 35px rgba(0, 3, 35, 0.65) !important; }

/* Menü-Linien-Effekt von der Mitte nach außen */
.team-card-skew::before { content: "" !important; position: absolute !important; bottom: 0 !important; left: 0 !important; width: 100% !important; height: 4px !important; background-color: #2B82EB !important; z-index: 10 !important; }
.team-card-skew::after { content: "" !important; position: absolute !important; bottom: 0 !important; left: 50% !important; width: 100% !important; height: 4px !important; background-color: #ffffff !important; z-index: 15 !important; transform: translateX(-50%) scaleX(0) !important; transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1) !important; }
.team-card-skew:hover::after { transform: translateX(-50%) scaleX(1) !important; }

/* Fotos */
.team-member-img { width: 100% !important; height: 270px !important; overflow: hidden !important; margin: 0 !important; padding: 0 !important; display: block !important; background-color: #f8f9fa !important; position: relative; }
.team-member-img img { width: 100% !important; height: 100% !important; object-fit: cover !important; transform: scale(1) !important; transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1) !important; display: block !important; }
.team-card-skew:hover .team-member-img img { transform: scale(1.06) !important; }
.team-card-skew.has-logo .team-member-img { background-color: #ffffff !important; }
.team-card-skew.has-logo .team-member-img img { object-fit: contain !important; padding: 25px !important; box-sizing: border-box !important; }

/* Hover-Overlay */
.team-contact-overlay { position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; background-color: #0a1435 !important; display: flex !important; flex-direction: column !important; justify-content: center !important; align-items: center !important; padding: 25px !important; box-sizing: border-box !important; opacity: 0 !important; transition: opacity 0.3s ease !important; z-index: 3 !important; text-align: center !important; }
.team-card-skew:hover .team-contact-overlay { opacity: 1 !important; }
.team-card-skew:hover .team-member-img img { opacity: 0.12 !important; }
.team-contact-overlay p { font-family: 'Oxanium', sans-serif !important; font-style: italic !important; font-size: 16px !important; font-weight: 700 !important; color: #ffffff !important; margin: 0 0 10px 0 !important; line-height: 1.5 !important; }
.team-contact-overlay a { font-family: 'Oxanium', sans-serif !important; font-style: italic !important; font-size: 14px !important; font-weight: 700 !important; color: #2B82EB !important; text-decoration: underline !important; margin-top: 8px; display: inline-block; word-break: break-all !important; }
.team-contact-overlay a:hover { color: #ffffff !important; }

/* Bauchbinde */
.team-card-inner { transform: skewY(-5deg) !important; background-color: #0a1435 !important; padding: 25px 20px 20px 20px !important; margin-top: -30px !important; position: relative !important; z-index: 5 !important; transition: background-color 0.3s ease !important; width: 112% !important; margin-left: -6% !important; box-sizing: border-box !important; }
.team-card-skew:hover .team-card-inner { background-color: #2B82EB !important; }
.team-card-inner h3, .team-card-inner .team-card-role { transform: skewY(5deg) !important; padding-left: 6% !important; }

/* STRICT SINGLE FONT: Name und Rolle unübersehbar schräg in Oxanium */
.team-card-inner h3 { font-family: 'Oxanium', sans-serif !important; font-style: italic !important; font-weight: 700 !important; font-size: 16px !important; color: #ffffff !important; margin: 0 0 4px 0 !important; text-transform: none !important; letter-spacing: 0.5px; }
.team-card-role { font-family: 'Oxanium', sans-serif !important; font-style: italic !important; font-weight: 600 !important; font-size: 13px !important; color: #6ba4ff !important; margin: 0 !important; text-transform: none !important; transition: color 0.3s ease !important; }
.team-card-skew:hover .team-card-role { color: #ffffff !important; }

/* Werkstatt-Zentrierung & Schrumpf-Header */
.team-section .team-grid:last-of-type { display: flex !important; flex-wrap: wrap !important; justify-content: center !important; gap: 30px !important; }
.team-section .team-grid:last-of-type .team-card-skew { flex: 1 !important; max-width: calc(25% - 23px) !important; min-width: 250px !important; }
#header .inside, #header .inside .logo, #header .inside .mod_navigation, #header .inside img { transition: all 0.3s ease-in-out !important; }
body.scrolled #header .inside { grid-template-rows: 40px 90px !important; }
body.scrolled #header .inside .logo, body.scrolled #header .inside .mod_navigation { height: 90px !important; }
body.scrolled #header .inside img { height: 75px !important; }
.hero-badge-right, .hero-badge-right span { text-transform: none !important; }

@media (max-width: 768px) { .team-section { padding: 0 20px !important; } .team-grid { grid-template-columns: 1fr !important; } .team-section .team-grid:last-of-type .team-card-skew { max-width: 100% !important; } .team-card-inner { transform: skewY(0deg) !important; margin-top: 0 !important; background: #0a1435 !important; width: 100% !important; margin-left: 0 !important; } .team-card-inner h3, .team-card-inner .team-card-role { transform: skewY(0deg) !important; padding-left: 0 !important; } .team-contact-overlay { position: relative !important; opacity: 1 !important; padding: 15px !important; background: #0a1435 !important; } }

/* ==========================================================================
   14. CONTAO AKKORDEON & HERO BANNER BADGE (KACHEL-LOGIK AUS PUNKT 12)
   ========================================================================== */
.hero-teaser-wrapper { position: relative; width: 100%; overflow: hidden; margin-bottom: 40px !important; }
.hero-teaser-wrapper .hero-badge-right { position: absolute !important; bottom: 0 !important; right: 0 !important; background-color: #2B82EB !important; color: #ffffff !important; padding: 15px 40px !important; font: italic 700 22px 'Oxanium', sans-serif !important; text-transform: uppercase !important; transform: skewX(-15deg) !important; margin-right: -15px !important; box-shadow: -5px 0 20px rgba(0,0,0,0.2) !important; z-index: 999 !important; }
.hero-teaser-wrapper .hero-badge-right span { display: block !important; transform: skewX(15deg) !important; }
.ce_accordion, .mod_article .ce_accordionSingle { margin: 0 40px 4px 40px !important; border: none !important; background: none !important; padding: 0 !important; }

/* 14.1 Der klickbare Hauptbalken: Nutzt exakt die Schräge und den Strich eurer Kachel */
.mod_article .ui-accordion h3.ui-accordion-header, 
.mod_article .ui-accordion .ui-accordion-header, 
.mod_article .ce_accordionSingle .toggler { 
    display: block !important; background-color: #2B82EB !important; color: #ffffff !important; 
    padding: 10px 40px 10px 65px !important; margin: 0 40px 3px 40px !important; cursor: pointer !important; 
    position: relative !important; border: none !important; text-transform: uppercase !important;
    border-left: 5px solid #000323 !important; /* Vorher: Nachtblau / Dunkelblau links */
    transform: skewX(-15deg) !important; /* Exakt eure Kachel-Schräge links unten nach rechts oben */
    transition: background-color 0.25s ease, border-left-color 0.25s ease !important;
}

/* HOVER- & AKTIV-WECHSEL: Hauptbalken wird Nachtblau, linker Strich wird Hellblau */
.mod_article .ui-accordion h3.ui-accordion-header:hover, .mod_article .ui-accordion .ui-accordion-header.ui-state-hover, .mod_article .ce_accordionSingle .toggler:hover, .mod_article .ui-accordion .ui-accordion-header.ui-state-active, .mod_article .ui-accordion-header-active { 
    background-color: #000323 !important; 
    border-left: 5px solid #2B82EB !important; 
}

/* 14.2 SCHRIFT-BEGRADIGUNG: Packt jeglichen Inhalt im Balken und dreht ihn zwingend wieder gerade */
.mod_article .ui-accordion h3.ui-accordion-header,
.mod_article .ui-accordion .ui-accordion-header,
.mod_article .ce_accordionSingle .toggler {
    font: italic 700 15px 'Oxanium', sans-serif !important;
}
/* Der Gegen-Skew für den Text im Inneren */
.mod_article .ui-accordion .ui-accordion-header-text,
.mod_article .ui-accordion h3.ui-accordion-header *, 
.mod_article .ui-accordion .ui-accordion-header *, 
.mod_article .ce_accordionSingle .toggler * { 
    display: inline-block !important;
    font-family: 'Oxanium', sans-serif !important; font-style: italic !important; font-weight: 700 !important; font-size: 15px !important;
    color: #ffffff !important; text-decoration: none !important;
    transform: skewX(15deg) !important; /* Gegensteuerung: Biegt die Schrift zu 100% gerade! */
}

/* Pfeil-Icon-Bereinigung */
.mod_article .ui-accordion .ui-accordion-header .ui-accordion-header-icon { display: none !important; }
.mod_article .ui-accordion .ui-accordion-header::before { content: "↓" !important; position: absolute !important; left: 35px !important; top: 50% !important; transform: translateY(-50%) skewX(15deg) !important; font: bold 16px Arial, sans-serif; transition: transform 0.2s !important; z-index: 2 !important; }
.mod_article .ui-accordion .ui-accordion-header-active::before, .mod_article .ui-accordion .ui-accordion-header.ui-state-active::before { transform: translateY(-50%) rotate(180deg) skewX(15deg) !important; }

/* 14.3 Die geöffnete Inhaltsbox (Schließt exakt bündig unter dem schrägen Balken ab) */
.mod_article .ui-accordion .ui-accordion-content, .mod_article .ui-accordion div.ui-accordion-content { 
    background: #fff !important; padding: 30px 45px !important; border: 1px solid #2B82EB !important; border-top: none !important; 
    margin: -3px 40px 15px 40px !important; /* Hält die Box exakt bündig in der Spur des Balkens */
    overflow: hidden !important; box-sizing: border-box !important; 
}
.mod_article .ui-accordion .ui-accordion-content strong, .mod_article .ui-accordion .ui-accordion-content p strong, .mod_article .ui-accordion .ui-accordion-content * strong { color: var(--header-bg); font: italic 700 16px 'Oxanium', sans-serif; display: inline-block; margin: 25px 0 8px 0; }
.mod_article .ui-accordion .ui-accordion-content p:first-child strong, .mod_article .ui-accordion-content p:first-of-type strong { margin-top: 0; }
.mod_article .ui-accordion .ui-accordion-content p, .mod_article .ui-accordion .ui-accordion-content li, .mod_article .ui-accordion .ui-accordion-content span, .mod_article .ui-accordion .ui-accordion-content a, .mod_article .ui-accordion .ui-accordion-content div, .mod_article .ui-accordion .ui-accordion-content ul { font: 400 15px/1.6 'Oxanium', sans-serif; color: #2b2b2b; }
.mod_article .ui-accordion .ui-accordion-content ul { list-style: none; padding: 0; margin: 10px 0 20px 0; }
.mod_article .ui-accordion .ui-accordion-content li { padding-left: 20px; margin-bottom: 6px; position: relative; }
.mod_article .ui-accordion .ui-accordion-content li::before { content: "•" !important; position: absolute !important; left: 4px !important; top: -1px !important; color: #2B82EB !important; font-size: 18px !important; }