/* =========================
   SLIDER STABIL FIX
========================= */

.rev_slider_wrapper,
.rev_slider,
.rev_slider ul,
.rev_slider li {
  height: 100% !important;
}

.rev_slider li img.rev-slidebg{
  width:100% !important;
  height:100% !important;
  object-fit: cover !important;
  object-position: center center !important;
}


/* ===============================
   SLIDER FIX - KEIN SPRINGEN
================================ */

.hero-slider,
.owl-carousel,
.slider-container {
  height: 480px;
  overflow: hidden;
}

.hero-slider img,
.owl-carousel img,
.slider-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;   /* Wichtig! */
  object-position: center;
  display: block;
}

/* Blog Premium Kacheln */

.bos-article-block{
  background: #fff;
  border-radius: 18px;
  padding: 22px;
  margin-bottom: 22px;
  box-shadow: 0 8px 22px rgba(0,0,0,0.06);
  border: 1px solid rgba(31,29,74,0.08);
}

.bos-article-lead{
  font-size: 18px;
  line-height: 1.6;
  margin-bottom: 25px;
  color: #333;
  font-weight: 500;
}

.bos-article-block{
  background: #fff;
  border-radius: 18px;
  padding: 22px;
  margin-bottom: 20px;
  box-shadow: 0 8px 22px rgba(0,0,0,0.06);
  border: 1px solid rgba(31,29,74,0.08);
}


/* ===============================
   Rechtstexte Design (Premium)
================================ */

.recht-box{
  background: #fff;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 18px;
  padding: 35px 40px;
  box-shadow: 0 12px 28px rgba(0,0,0,0.06);
  max-width: 900px;
  margin: 0 auto;
}

.recht-box h3{
  font-weight: 900;
  color: #1f1d4a;
  margin-top: 25px;
}

.recht-box h4{
  font-weight: 800;
  margin-top: 22px;
  color: #1f1d4a;
}

.recht-box p{
  font-size: 15px;
  line-height: 1.7;
  margin-bottom: 12px;
  color: rgba(0,0,0,0.8);
}

.recht-box ul{
  margin: 10px 0 20px 20px;
}

.recht-box li{
  margin-bottom: 6px;
}

/* =========================
   MOBILE HEADER FIX (INDEX)
========================= */

@media (max-width: 768px){

  /* Menü Button erzwingen */
  .bos-mobile-menu-btn,
  .header-toggle{
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 9999;
  }

  /* Header sauber ausrichten */
  #header .header-inner{
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
  }


  /* =========================
     HERO LOGO GRÖSSER (MOBILE)
  ========================= */

  .bos-hero-logo{
    width: 140px !important;
    max-width: 70vw !important;
    height: auto !important;
    margin: 8px auto 0 auto;
    display: block;
  }

}


/* =========================
   MOBILE MENU + FOOTER FIX
========================= */

@media (max-width: 768px){

  /* =====================
     MOBILE MENU BEGRENZEN
  ===================== */

  .header-nav.open{
    max-height: 100vh;
    overflow-y: auto;
    padding-bottom: 30px;
  }

  .header-nav ul{
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }


  /* =====================
     FOOTER SOCIAL ZENTRIERT
  ===================== */

  #footer .bos-social{
    display: flex !important;
    justify-content: center !important;
    align-items: center;
    gap: 20px;
    width: 100%;
    margin: 15px auto 0 auto;
  }

  #footer .bos-social-link{
    justify-content: center;
    text-align: center;
  }


  /* =====================
     FOOTER SPALTEN MITTIG
  ===================== */

  #footer .row{
    text-align: center;
  }

  #footer .contact,
  #footer h4{
    text-align: center;
  }


  /* =====================
     KEIN WEISSER BEREICH
  ===================== */

  body, html{
    overflow-x: hidden;
  }

}


/* =========================
   FIX: SLIDER OHNE RUCKELN
========================= */

/* Feste Höhe vor Laden */
.bos-home-slider,
.bos-home-slider .rev_slider_wrapper,
.bos-home-slider .rev_slider {
  width: 100% !important;
  min-height: 340px !important;
  max-height: 340px !important;
  overflow: hidden;
}

/* Bilder sofort korrekt */
.bos-home-slider img.rev-slidebg {
  object-fit: cover !important;
  width: 100% !important;
  height: 100% !important;
}

/* Mobile Höhe */
@media (max-width: 768px){
  .bos-home-slider,
  .bos-home-slider .rev_slider_wrapper,
  .bos-home-slider .rev_slider {
    min-height: 240px !important;
    max-height: 240px !important;
  }
}

/* =========================
   FIX: BODY FARBE
========================= */

body{
  background: #ffffff !important;
}

/* =========================
   FORCE OVERRIDE
========================= */

/* Über Uns zentrieren */
.about-content{
  max-width: 900px !important;
  margin: 0 auto !important;
  text-align: center !important;
}

/* Footer fix */
#footer .row{
  display: flex !important;
  flex-wrap: wrap !important;
}

#footer .col-md-3,
#footer .col-md-2{
  margin-bottom: 20px !important;
}

/* Mobile */
@media (max-width:768px){

  #footer .row{
    text-align: center !important;
  }

  #footer .col-md-3,
  #footer .col-md-2{
    width: 100% !important;
    float: none !important;
  }

}
/* =========================
   ÜBER UNS FIX
========================= */

.about-content{
  max-width: 900px !important;
  margin: 0 auto !important;
  text-align: center !important;
}

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

#footer{
  margin-top: 60px !important;
}

#footer .row{
  display: flex !important;
  flex-wrap: wrap !important;
}

#footer .col-md-3,
#footer .col-md-2{
  margin-bottom: 20px !important;
}

/* Mobile Footer */
@media (max-width:768px){

  #footer .row{
    text-align: center !important;
  }

  #footer .col-md-3,
  #footer .col-md-2{
    width: 100% !important;
  }

}

/* Footer Fix */
#footer{
  margin-top: 60px;
}

#footer .row{
  display: flex;
  flex-wrap: wrap;
}

#footer .col-md-3,
#footer .col-md-2{
  margin-bottom: 20px;
}

/* Mobile Footer sauber */
@media (max-width:768px){

  #footer .row{
    text-align: center;
  }

  #footer .col-md-3,
  #footer .col-md-2{
    width: 100%;
  }

}

.about-content{
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}
/* Grid-Abstand ruhiger machen */
.image-gallery {
  margin-top: 30px;
}

/* Jede Kachel */
.image-gallery-item {
  position: relative;
  height: 240px;                 /* Einheitliche Höhe */
  overflow: hidden;
  border-radius: 16px;
  background: #0f1026;
  box-shadow: 0 12px 28px rgba(0,0,0,0.18);
  transition: box-shadow 0.3s ease;
}

/* Schatten bei Hover */
.image-gallery-item:hover {
  box-shadow: 0 20px 45px rgba(0,0,0,0.35);
}

/* Bild Standard */
.image-gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;             /* ruhig gefüllt */
  transform: scale(1.12);        /* Premium Zoom */
  transition: 
    transform 0.45s ease,
    object-fit 0.45s ease,
    opacity 0.3s ease;
}

/* Hover → GANZES BILD SICHTBAR */
.image-gallery-item:hover img {
  object-fit: contain;           /* komplettes Bild */
  transform: scale(1);
  opacity: 0.95;
  background: #0f1026;
}

/* Overlay für Tiefe */
.image-gallery-item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.15),
    rgba(0,0,0,0.45)
  );
  opacity: 0;
  transition: opacity 0.35s ease;
}

.image-gallery-item:hover::after {
  opacity: 1;
}


.image-gallery-item:hover::before {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* Mobile Optimierung */
@media (max-width: 992px) {
  .image-gallery-item {
    height: 220px;
  }
}

@media (max-width: 768px) {
  .image-gallery-item {
    height: 200px;
    border-radius: 14px;
  }
}

@media (max-width: 480px) {
  .image-gallery-item {
    height: 190px;
  }
}

/* =========================
   GALERIE – RUHIGES KACHELFORMAT
========================= */

/* Kachel-Größe */
.image-gallery-item {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  background: #0f1026;
  height: 220px; /* ⬅️ KACHELHÖHE */
}

/* Bild-Grundzustand */
.image-gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;           /* sauber gefüllt */
  transition: all 0.35s ease;
  transform: scale(1.08);      /* leichter Zoom */
}

/* Hover → GANZES BILD SICHTBAR */
.image-gallery-item:hover img {
  object-fit: contain;         /* komplettes Bild */
  transform: scale(1);         /* Zoom raus */
  background: #0f1026;
}

/* Optional: dezenter Rahmen */
.image-gallery-item:hover {
  box-shadow: 0 12px 30px rgba(0,0,0,0.35);
}

/* Mobile */
@media (max-width: 768px) {
  .image-gallery-item {
    height: 200px;
  }
}

/* ===== FOOTER LAYOUT FIX ===== */
#footer {
  position: relative;
}

/* Social + IHK sauber trennen */
#footer .col-md-2 {
  position: relative;
}

/* IHK Logo aus Spalte lösen */
#footer .footer-ihk {
  position: absolute;
  right: -120px; /* ⬅️ schiebt es aus der Social-Spalte raus */
  top: 10px;
}

/* IHK Logo echte Größe */
#footer .ihk-badge {
  width: 110px;   /* ⬅️ HIER steuerst du die Größe */
  max-width: none;
  height: auto;
  opacity: 0.9;
  transition: all 0.25s ease;
}

/* Hover */
#footer .ihk-badge:hover {
  opacity: 1;
  transform: scale(1.08);
}
@media (max-width: 768px) {
  #footer .footer-ihk {
    position: static;
    margin-top: 15px;
  }

  #footer .ihk-badge {
    width: 90px;
  }
}

/* Footer Copyright Balken angleichen */
#footer .footer-copyright {
  background: #1f1d4a; /* gleiche Farbe wie Footer */
  border-top: 1px solid rgba(255,255,255,0.08);
  margin-top: 0;
  padding: 15px 0;
}

#footer .footer-ihk-col {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

/* Logo Größe & Stil */
#footer .ihk-badge {
  max-width: 100px;
  height: auto;
  opacity: 0.85;
  transition: all 0.25s ease;
}

/* Hover */
#footer .ihk-badge:hover {
  opacity: 1;
  transform: scale(1.08);
}

/* Mobile: zentriert untereinander */
@media (max-width: 992px) {
  #footer .footer-ihk-col {
    justify-content: center;
    margin-top: 20px;
  }
}

/* Container sauber ausrichten */
#footer .footer-ihk {
  margin-top: 10px;
  display: flex;
  align-items: center;
}

/* Logo Größe + Zentrierung */
#footer .footer-ihk img,
#footer .ihk-badge {
  max-width: 70px;     /* WICHTIG: klein & dezent */
  height: auto;
  opacity: 0.75;
  transition: all 0.25s ease;
}

/* Hover Effekt */
#footer .footer-ihk img:hover {
  opacity: 1;
  transform: scale(1.05);
}

/* Mobile noch kompakter */
@media (max-width: 768px) {
  #footer .footer-ihk img {
    max-width: 60px;
  }
}

/* UL reset */
.image-gallery {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Jede Kachel gleich hoch */
.image-gallery-item {
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(0,0,0,0.06);
  transition: 0.25s ease;
}

/* Hover clean */
.image-gallery-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 32px rgba(0,0,0,0.10);
}

/* Feste Bildhöhe → kein Chaos mehr */
.image-gallery-item img {
  width: 100%;
  height: 220px;           /* DESKTOP */
  object-fit: cover;       /* wichtig */
  display: block;
}

/* Mobile */
@media (max-width: 768px) {
  .image-gallery-item img {
    height: 180px;
  }
}

/* Entfernt alte Porto-Effekte */
.thumb-info,
.thumb-info-wrapper {
  position: static !important;
  overflow: hidden;
}

:root{
  --bos-blue: #1f1d4a;
  --bos-white: #ffffff;
}

/* =========================
   ALTE HEADER / NAVI AUSBLENDEN
   (damit keine 2 Menüs sind)
========================= */

/* Altes Logo / alte Logo-Box */
#header .logo,
#header .logo img{
  display:none !important;
}

/* Alte Navigation / Bootstrap Menü */
.nav-main,
#mainMenu,
.nav-main-collapse,
.navbar-collapse,
#header .nav,
#header .nav-main,
#header .header-nav-main,
#header .header-nav-main nav{
  display:none !important;
}
.bos-partners .bos-section-title{
  text-align: center;
}

/* Alte Social Icons im Header (nicht im Footer!) */
#header .social-icons{
  display:none !important;
}

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

.header-modern{
  background: var(--bos-white) !important;
  border-bottom: 1px solid #eee !important;
  padding: 12px 0 !important;
}

.header-modern .header-inner{
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 20px;
}

/* Logo + Siegel Reihe */
.header-modern .header-brand{
  display:flex;
  align-items:center;
  gap: 14px;
  flex-wrap: nowrap;
}

/* Hauptlogo Link */
.brand-logo-link{
  text-decoration:none !important;
  display:flex;
  align-items:center;
}

/* BOS Logo */
.brand-logo{
  height: 72px;
  width:auto;
  display:block;
}

/* ISO / DEKRA Badges */
.brand-badge{
  height: 52px;
  width:auto;
  display:block;
}

/* Menü */
.header-modern .header-nav ul{
  list-style:none;
  display:flex;
  align-items:center;
  gap: 16px;
  margin:0;
  padding:0;
}

.header-modern .header-nav ul li a{
  color: var(--bos-blue) !important;
  font-weight: 800 !important;
  text-decoration:none !important;

  padding: 10px 12px;
  border-radius: 12px;
  transition: 0.2s ease;
}

.header-modern .header-nav ul li a:hover{
  background: rgba(31,29,74,0.08) !important;
}

/* =========================
   SEITENÜBERSCHRIFT (Page Header)
========================= */

.page-header{
  background: var(--bos-blue) !important;
  border: none !important;
  padding: 26px 0 !important;
  margin: 0 !important;
}

.page-header h1{
  color: #fff !important;
  font-weight: 900 !important;
  margin: 0 !important;
}

/* Der hässliche Balken / Abstand darunter weg */
.page-header + .container{
  padding-top: 25px !important;
}

/* =========================
   FOOTER (BLAU WIE LOGO)
========================= */

#footer{
  background: var(--bos-blue) !important;
  color: #fff !important;
  padding-top: 35px !important;
  margin-top: 50px !important;
}

#footer h4,
#footer .heading-primary{
  color: #fff !important;
  font-weight: 900 !important;
}

#footer p,
#footer a{
  color: rgba(255,255,255,0.92) !important;
}

#footer a:hover{
  color: #fff !important;
  text-decoration: underline !important;
}

/* Copyright Bereich */
.footer-copyright{
  background: rgba(0,0,0,0.20) !important;
  padding: 15px 0 !important;
  margin-top: 25px !important;
}

/* =========================
   SOCIAL MEDIA IM FOOTER (ICON + TEXT)
========================= */

.bos-social{
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
}

.bos-social-link{
  display: flex;
  align-items: center;
  gap: 10px;

  color: #ffffff !important;
  font-weight: 800;
  text-decoration: none !important;
  font-size: 14px;
}

.bos-social-link i{
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 10px;
  background: rgba(255,255,255,0.12);
  color: #fff !important;
  font-size: 16px;
}

.bos-social-link:hover{
  opacity: 0.85;
}

/* =========================
   RESPONSIVE (HANDY)
========================= */

@media (max-width: 900px){
  .header-modern .header-inner{
    flex-direction: column;
    align-items: center;
  }

  .header-modern .header-brand{
    justify-content: center;
    flex-wrap: wrap;
  }

  .header-modern .header-nav ul{
    flex-wrap: wrap;
    justify-content: center;
  }

  .brand-logo{
    height: 60px;
  }

  .brand-badge{
    height: 44px;
  }
}
/* =====================================
   LEISTUNGEN (NUR leistungen.html)
   Modern Cards + Accordion + White Footer
===================================== */

.page-leistungen{
  background: #fff;
}

/* Überschrift Bereich */
.page-leistungen .page-header-modern{
  background: var(--bos-blue);
  padding: 35px 0;
  margin: 0;
  text-align: center;
}

.page-leistungen .page-header-modern h1{
  color: #fff;
  font-weight: 900;
  margin: 0;
}

.page-leistungen .page-header-modern p{
  color: rgba(255,255,255,0.92);
  margin-top: 10px;
  font-weight: 600;
}

/* Content kompakter */
.page-leistungen .section-content{
  padding: 35px 0;
}

/* Accordion Grid */
.page-leistungen .accordion-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

/* Accordion Card */
.page-leistungen .leistung-accordion{
  border: 1px solid rgba(31,29,74,0.15);
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 8px 20px rgba(0,0,0,0.05);
  transition: 0.2s ease;
}

.page-leistungen .leistung-accordion:hover{
  transform: translateY(-2px);
}

/* Summary Kopf */
.page-leistungen .leistung-accordion summary{
  cursor: pointer;
  padding: 16px 18px;
  font-weight: 900;
  color: var(--bos-blue);
  list-style: none;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  background: rgba(31,29,74,0.04);
}

.page-leistungen .leistung-accordion summary::-webkit-details-marker{
  display:none;
}

/* Icon drehen wenn offen */
.page-leistungen .leistung-accordion summary i{
  transition: 0.25s ease;
  color: var(--bos-blue);
}

.page-leistungen .leistung-accordion[open] summary i{
  transform: rotate(180deg);
}

/* Inhalt */
.page-leistungen .accordion-content{
  padding: 16px 18px;
  color: #333;
  font-weight: 500;
  line-height: 1.6;
}

/* Kontakt Box */
.page-leistungen .leistungen-info-box{
  margin-top: 30px;
  border-radius: 18px;
  padding: 22px;
  background: var(--bos-blue);
  color: #fff;
  box-shadow: 0 10px 25px rgba(0,0,0,0.12);
}

.page-leistungen .leistungen-info-box h2{
  margin-top: 0;
  font-weight: 900;
  color: #fff;
}

.page-leistungen .leistungen-info-box p{
  color: rgba(255,255,255,0.92);
  margin-bottom: 16px;
}

/* Liste */
.page-leistungen .info-list{
  list-style: none;
  padding: 0;
  margin: 0 0 18px 0;
  display: grid;
  gap: 8px;
}

.page-leistungen .info-list li{
  display:flex;
  align-items:center;
  gap: 10px;
  font-weight: 700;
}

.page-leistungen .info-list i{
  width: 24px;
  height: 24px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius: 8px;
  background: rgba(255,255,255,0.15);
  color: #fff;
}

/* Button */
.page-leistungen .btn-modern{
  display: inline-block;
  background: #fff;
  color: var(--bos-blue) !important;
  padding: 12px 18px;
  border-radius: 14px;
  font-weight: 900;
  text-decoration: none !important;
  transition: 0.2s ease;
}

.page-leistungen .btn-modern:hover{
  transform: translateY(-2px);
  opacity: 0.95;
}

/* FOOTER WHITE (nur auf Leistungen) */
.page-leistungen .footer-white{
  background: #fff;
  border-top: 1px solid rgba(31,29,74,0.15);
  padding: 35px 0 20px 0;
  margin-top: 50px;
}

.page-leistungen .footer-white h4{
  color: var(--bos-blue);
  font-weight: 900;
}

.page-leistungen .footer-white p,
.page-leistungen .footer-white a{
  color: #333 !important;
  font-weight: 600;
}

/* Footer Grid */
.page-leistungen .footer-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.page-leistungen .footer-bottom{
  border-top: 1px solid rgba(31,29,74,0.15);
  margin-top: 20px;
  padding-top: 15px;
  text-align: center;
}

/* Social Links im Footer */
.page-leistungen .social-links{
  display:flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
}

.page-leistungen .social-link{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(31,29,74,0.06);
  text-decoration: none !important;
  font-weight: 800;
}

.page-leistungen .social-link i{
  width: 30px;
  height: 30px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius: 10px;
  background: rgba(31,29,74,0.12);
  color: var(--bos-blue);
}

/* Responsive */
@media (max-width: 900px){
  .page-leistungen .footer-grid{
    grid-template-columns: 1fr;
  }

  .page-leistungen .page-header-modern{
    padding: 28px 0;
  }
}
/* =====================================
   BOS ELTAN - GLOBAL FINAL CSS
   (Header + Menü + Page Header + Footer)
===================================== */

:root{
  --bos-blue: #1f1d4a;
  --bos-white: #ffffff;
}

/* =========================
   ALTE HEADER / NAVI AUSBLENDEN
========================= */

/* Altes Logo / alte Logo-Box */
#header .logo,
#header .logo img{
  display:none !important;
}

/* Alte Navigation / Bootstrap Menü */
.nav-main,
#mainMenu,
.nav-main-collapse,
.navbar-collapse,
#header .nav,
#header .nav-main,
#header .header-nav-main,
#header .header-nav-main nav{
  display:none !important;
}

/* Alte Social Icons im Header (nicht im Footer!) */
#header .social-icons{
  display:none !important;
}

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

.header-modern{
  background: var(--bos-white) !important;
  border-bottom: 1px solid #eee !important;
  padding: 12px 0 !important;
}

.header-modern .header-inner{
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 20px;
}

/* Logo + Siegel Reihe */
.header-modern .header-brand{
  display:flex;
  align-items:center;
  gap: 14px;
  flex-wrap: nowrap;
}

/* Hauptlogo Link */
.brand-logo-link{
  text-decoration:none !important;
  display:flex;
  align-items:center;
}

/* BOS Logo */
.brand-logo{
  height: 72px;
  width:auto;
  display:block;
}

/* ISO / DEKRA Badges */
.brand-badge{
  height: 52px;
  width:auto;
  display:block;
}

/* Menü */
.header-modern .header-nav ul{
  list-style:none;
  display:flex;
  align-items:center;
  gap: 16px;
  margin:0;
  padding:0;
}

.header-modern .header-nav ul li a{
  color: var(--bos-blue) !important;
  font-weight: 800 !important;
  text-decoration:none !important;

  padding: 10px 12px;
  border-radius: 12px;
  transition: 0.2s ease;
}

.header-modern .header-nav ul li a:hover{
  background: rgba(31,29,74,0.08) !important;
}

/* Aktiver Menüpunkt */
.header-modern .header-nav ul li a.active{
  background: rgba(31,29,74,0.12) !important;
}

/* =========================
   SEITENÜBERSCHRIFT (Page Header)
========================= */

.page-header{
  background: var(--bos-blue) !important;
  border: none !important;
  padding: 26px 0 !important;
  margin: 0 !important;
}

.page-header h1{
  color: #fff !important;
  font-weight: 900 !important;
  margin: 0 !important;
}

/* Abstand darunter */
.page-header + .container{
  padding-top: 25px !important;
}

/* =========================
   FOOTER (BLAU WIE LOGO)
========================= */

#footer{
  background: var(--bos-blue) !important;
  color: #fff !important;
  padding-top: 35px !important;
  margin-top: 50px !important;
}

#footer h4,
#footer .heading-primary{
  color: #fff !important;
  font-weight: 900 !important;
}

#footer p,
#footer a{
  color: rgba(255,255,255,0.92) !important;
}

#footer a:hover{
  color: #fff !important;
  text-decoration: underline !important;
}

/* Copyright Bereich */
.footer-copyright{
  background: rgba(0,0,0,0.20) !important;
  padding: 15px 0 !important;
  margin-top: 25px !important;
}

/* =========================
   SOCIAL MEDIA IM FOOTER (ICON + TEXT)
========================= */

.bos-social{
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
}

.bos-social-link{
  display: flex;
  align-items: center;
  gap: 10px;

  color: #ffffff !important;
  font-weight: 800;
  text-decoration: none !important;
  font-size: 14px;
}

.bos-social-link i{
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 10px;
  background: rgba(255,255,255,0.12);
  color: #fff !important;
  font-size: 16px;
}

.bos-social-link:hover{
  opacity: 0.85;
}

/* =========================
   RESPONSIVE (HANDY)
========================= */

@media (max-width: 900px){
  .header-modern .header-inner{
    flex-direction: column;
    align-items: center;
  }

  .header-modern .header-brand{
    justify-content: center;
    flex-wrap: wrap;
  }

  .header-modern .header-nav ul{
    flex-wrap: wrap;
    justify-content: center;
  }

  .brand-logo{
    height: 60px;
  }

  .brand-badge{
    height: 44px;
  }
}
/* =====================================
   JOBS (nur jobs.html)
===================================== */

.bos-jobs-intro{
  padding: 18px 0 10px 0;
}

.bos-jobs-subtitle{
  font-size: 16px;
  font-weight: 600;
  color: rgba(31,29,74,0.85);
  margin: 0;
}

.bos-jobs-grid{
  padding-top: 10px;
  padding-bottom: 20px;
}

.bos-job-card{
  background: #fff;
  border: 1px solid rgba(31,29,74,0.10);
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.06);
  transition: 0.2s ease;
  height: 100%;
}

.bos-job-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 14px 35px rgba(0,0,0,0.10);
}

.bos-job-head h3{
  margin-top: 0;
  font-weight: 900;
  color: #1f1d4a;
  font-size: 18px;
}

.bos-job-muted{
  margin: 6px 0 0 0;
  color: rgba(0,0,0,0.55);
  font-weight: 600;
}

.bos-job-body{
  margin-top: 14px;
}

.bos-job-body h4{
  margin: 14px 0 8px 0;
  font-weight: 900;
  color: #1f1d4a;
  font-size: 14px;
}

.bos-job-list{
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.bos-job-list li{
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 6px 0;
  color: rgba(0,0,0,0.75);
  font-weight: 600;
  line-height: 1.35;
}

.bos-job-list li i{
  margin-top: 2px;
  color: #1f1d4a;
}

.bos-job-note{
  margin-top: 12px;
  background: rgba(31,29,74,0.06);
  border: 1px solid rgba(31,29,74,0.12);
  padding: 10px 12px;
  border-radius: 14px;
  font-weight: 700;
  color: rgba(31,29,74,0.90);
}

.bos-job-actions{
  margin-top: 16px;
}

/* Button modern (falls noch nicht vorhanden) */
.bos-btn{
  display: inline-block;
  background: #1f1d4a;
  color: #fff !important;
  padding: 12px 16px;
  border-radius: 14px;
  font-weight: 900;
  text-decoration: none !important;
  border: none;
  transition: 0.2s ease;
}

.bos-btn:hover{
  opacity: 0.92;
  transform: translateY(-1px);
}
.page-header-modern{
  background: #1f1d4a;
  padding: 34px 0;
  text-align: center;
}

.page-header-modern h1{
  color: #fff;
  font-weight: 900;
  margin: 0;
  font-size: 42px;
}

.page-header-modern p{
  color: rgba(255,255,255,0.9);
  margin-top: 8px;
  margin-bottom: 0;
  font-size: 15px;
  font-weight: 600;
}
/* =====================================
   BLOG SEITE (modern + passend zu BOS)
===================================== */

.bos-blog-section{
  padding: 35px 0;
}

.bos-blog-filter{
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 22px;
}

.bos-filter-btn{
  border: 1px solid rgba(31,29,74,0.18);
  background: #fff;
  color: #1f1d4a;
  font-weight: 800;
  padding: 10px 14px;
  border-radius: 14px;
  cursor: pointer;
  transition: 0.2s ease;
}

.bos-filter-btn i{
  margin-right: 7px;
}

.bos-filter-btn:hover{
  transform: translateY(-2px);
  background: rgba(31,29,74,0.06);
}

.bos-filter-btn.active{
  background: #1f1d4a;
  color: #fff;
  border-color: #1f1d4a;
}

.bos-blog-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.bos-blog-card{
  background: #fff;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 10px 22px rgba(0,0,0,0.06);
  transition: 0.25s ease;
  min-height: 230px;
}

.bos-blog-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 16px 30px rgba(0,0,0,0.10);
}

.bos-blog-top{
  display:flex;
  justify-content: space-between;
  align-items:center;
  margin-bottom: 10px;
}

.bos-blog-tag{
  background: rgba(31,29,74,0.08);
  color: #1f1d4a;
  font-weight: 900;
  padding: 6px 10px;
  border-radius: 12px;
  font-size: 12px;
}

.bos-blog-date{
  font-size: 12px;
  color: rgba(0,0,0,0.55);
  font-weight: 700;
}

.bos-blog-card h3{
  margin-top: 0;
  font-weight: 900;
  color: #1f1d4a;
  font-size: 18px;
}

.bos-blog-card p{
  color: rgba(0,0,0,0.72);
  margin-bottom: 14px;
  line-height: 1.5;
}

.bos-blog-btn{
  display:inline-block;
  background: #1f1d4a;
  color: #fff !important;
  font-weight: 900;
  padding: 10px 14px;
  border-radius: 14px;
  text-decoration:none !important;
  transition: 0.2s ease;
}

.bos-blog-btn:hover{
  opacity: 0.9;
  transform: translateY(-2px);
}

.bos-blog-info{
  margin-top: 35px;
  background: rgba(31,29,74,0.06);
  border: 1px solid rgba(31,29,74,0.12);
  border-radius: 22px;
  padding: 22px;
}

.bos-blog-info h2{
  margin-top: 0;
  font-weight: 900;
  color: #1f1d4a;
}

.bos-blog-info p{
  margin-bottom: 15px;
  color: rgba(0,0,0,0.75);
}

/* Responsive */
@media (max-width: 992px){
  .bos-blog-grid{
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px){
  .bos-blog-grid{
    grid-template-columns: 1fr;
  }
}
/* =====================================
   BLOG (ÜBERSICHT + ARTIKEL)
===================================== */

.bos-blog-wrap{
  padding: 35px 0;
}

.bos-blog-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.bos-blog-card{
  background: #fff;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 22px;
  padding: 18px;
  box-shadow: 0 10px 24px rgba(0,0,0,0.06);
  transition: 0.2s ease;
  display:flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 260px;
}

.bos-blog-card:hover{
  transform: translateY(-4px);
}

.bos-blog-card h3{
  margin-top: 0;
  font-weight: 900;
  color: #1f1d4a;
  font-size: 18px;
}

.bos-blog-meta{
  font-size: 13px;
  color: rgba(0,0,0,0.55);
  font-weight: 700;
  margin-bottom: 10px;
}

.bos-blog-text{
  color: rgba(0,0,0,0.72);
  font-size: 14px;
  line-height: 1.6;
}

.bos-blog-btn{
  margin-top: 14px;
  display:inline-flex;
  align-items:center;
  gap: 10px;

  background: #1f1d4a;
  color: #fff !important;
  padding: 10px 14px;
  border-radius: 14px;
  text-decoration: none !important;
  font-weight: 900;
  transition: 0.2s ease;
}

.bos-blog-btn:hover{
  opacity: 0.92;
  transform: translateY(-2px);
}

/* Responsive */
@media (max-width: 992px){
  .bos-blog-grid{
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 650px){
  .bos-blog-grid{
    grid-template-columns: 1fr;
  }
}

/* =====================================
   BLOG ARTIKEL SEITE
===================================== */

.bos-article{
  padding: 35px 0;
}

.bos-article-box{
  background: #fff;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 22px;
  padding: 22px;
  box-shadow: 0 10px 24px rgba(0,0,0,0.06);
}

.bos-article-lead{
  font-size: 16px;
  font-weight: 800;
  color: rgba(0,0,0,0.75;
  );
  margin-bottom: 15px;
}

.bos-article-box h2{
  color: #1f1d4a;
  font-weight: 900;
  margin-top: 22px;
}

.bos-article-list{
  padding-left: 18px;
  margin-top: 10px;
}

.bos-article-list li{
  margin-bottom: 8px;
}

.bos-article-actions{
  display:flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 22px;
}

.bos-article-back,
.bos-article-next{
  display:inline-flex;
  align-items:center;
  gap: 10px;

  text-decoration:none !important;
  font-weight: 900;
  border-radius: 14px;
  padding: 10px 14px;
  transition: 0.2s ease;
}

.bos-article-back{
  background: rgba(31,29,74,0.08);
  color: #1f1d4a !important;
}

.bos-article-next{
  background: #1f1d4a;
  color: #fff !important;
}

.bos-article-back:hover,
.bos-article-next:hover{
  transform: translateY(-2px);
  opacity: 0.92;
}
/* =====================================
   BOS BLOG (Cards + Filter + Artikel)
===================================== */

:root{
  --bos-blue: #1f1d4a;
  --bos-white: #ffffff;
  --bos-soft: #f6f7fb;
}

/* Blog Container */
.bos-blog-wrap{
  padding: 35px 0;
}

.bos-blog-topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 15px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.bos-blog-topbar h2{
  margin:0;
  font-weight: 900;
  color: var(--bos-blue);
}

/* Suche */
.bos-blog-search{
  position: relative;
  min-width: 260px;
  flex: 1;
  max-width: 420px;
}

.bos-blog-search input{
  width:100%;
  padding: 12px 14px 12px 42px;
  border-radius: 14px;
  border: 1px solid #e6e6e6;
  outline: none;
  background: #fff;
  font-weight: 600;
}

.bos-blog-search i{
  position:absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(31,29,74,0.7);
}

/* Filter Buttons */
.bos-blog-filters{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
}

.bos-filter-btn{
  border: 1px solid rgba(31,29,74,0.18);
  background: #fff;
  color: var(--bos-blue);
  padding: 10px 14px;
  border-radius: 999px;
  font-weight: 800;
  cursor: pointer;
  transition: 0.2s ease;
}

.bos-filter-btn:hover{
  transform: translateY(-1px);
  background: rgba(31,29,74,0.06);
}

.bos-filter-btn.active{
  background: var(--bos-blue);
  color: #fff;
  border-color: var(--bos-blue);
}

/* Blog Grid */
.bos-blog-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

@media(max-width: 992px){
  .bos-blog-grid{
    grid-template-columns: repeat(2, 1fr);
  }
}

@media(max-width: 640px){
  .bos-blog-grid{
    grid-template-columns: 1fr;
  }
}

/* Blog Card */
.bos-blog-card{
  background: #fff;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid #ededed;
  box-shadow: 0 10px 30px rgba(0,0,0,0.05);
  transition: 0.25s ease;
  display:flex;
  flex-direction: column;
}

.bos-blog-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(0,0,0,0.08);
}

/* Bild oben */
.bos-blog-thumb{
  height: 170px;
  background: linear-gradient(120deg, rgba(31,29,74,0.9), rgba(31,29,74,0.65));
  position: relative;
}

.bos-blog-thumb img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
  opacity: 0.9;
}

.bos-blog-tag{
  position:absolute;
  left: 12px;
  top: 12px;
  background: rgba(255,255,255,0.92);
  color: var(--bos-blue);
  font-weight: 900;
  padding: 7px 12px;
  border-radius: 999px;
  font-size: 12px;
}

/* Inhalt */
.bos-blog-body{
  padding: 16px 16px 18px;
  flex:1;
}

.bos-blog-title{
  margin: 0 0 8px 0;
  font-weight: 900;
  color: var(--bos-blue);
  font-size: 18px;
  line-height: 1.25;
}

.bos-blog-meta{
  color: rgba(31,29,74,0.75);
  font-weight: 700;
  font-size: 13px;
  margin-bottom: 10px;
}

.bos-blog-excerpt{
  color: rgba(31,29,74,0.82);
  font-weight: 600;
  font-size: 14px;
  line-height: 1.5;
  margin: 0 0 14px 0;
}

/* Button */
.bos-blog-readmore{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  text-decoration:none !important;
  background: var(--bos-blue);
  color: #fff !important;
  font-weight: 900;
  padding: 11px 14px;
  border-radius: 14px;
  transition: 0.2s ease;
}

.bos-blog-readmore:hover{
  opacity: 0.92;
  transform: translateY(-1px);
}

/* Artikel Layout */
.bos-article{
  padding: 35px 0;
}

.bos-article-box{
  background: #fff;
  border: 1px solid #ededed;
  border-radius: 18px;
  padding: 22px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

.bos-article-lead{
  font-size: 16px;
  font-weight: 700;
  color: rgba(31,29,74,0.9);
}

.bos-article-list{
  margin-top: 10px;
}

.bos-article-list li{
  font-weight: 700;
  margin-bottom: 8px;
}

.bos-article-actions{
  display:flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 18px;
  flex-wrap: wrap;
}

.bos-article-back,
.bos-article-next{
  text-decoration:none !important;
  font-weight: 900;
  color: var(--bos-blue) !important;
  background: rgba(31,29,74,0.06);
  padding: 12px 14px;
  border-radius: 14px;
  display:inline-flex;
  align-items:center;
  gap: 8px;
  transition: 0.2s ease;
}

.bos-article-back:hover,
.bos-article-next:hover{
  transform: translateY(-1px);
  background: rgba(31,29,74,0.10);
}
/* Blog Bilder sauber & modern */
.bos-blog-thumb img{
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-radius: 18px;
}
.bos-blog-card{
  max-width: 360px;
  margin: 0 auto;
}
.bos-blog-card{
  max-width: 360px;
  margin: 0 auto;
}
/* =========================
   MOBILE NAV (HAMBURGER)
========================= */

.header-toggle{
  display:none;
  background: rgba(31,29,74,0.06);
  border: 1px solid rgba(31,29,74,0.12);
  color: var(--bos-blue);
  font-weight: 900;
  padding: 10px 14px;
  border-radius: 12px;
  cursor: pointer;
}

.header-toggle i{
  font-size: 18px;
}

/* Active Link etwas schöner */
.header-modern .header-nav ul li a.active{
  background: rgba(31,29,74,0.10) !important;
}

/* Mobile */
@media (max-width: 992px){

  .header-modern .header-inner{
    flex-direction: row;
    align-items: center;
  }

  /* Badges kleiner */
  .brand-badge{
    height: 40px;
  }

  .brand-logo{
    height: 55px;
  }

  /* Hamburger zeigen */
  .header-toggle{
    display:flex;
    align-items:center;
    justify-content:center;
    margin-left: auto;
  }

  /* Desktop-Menü erstmal ausblenden */
  .header-modern .header-nav{
    width: 100%;
    display: none;
  }

  /* Wenn geöffnet */
  .header-modern .header-nav.open{
    display:block;
    margin-top: 12px;
  }

  /* Mobile Menü untereinander */
  .header-modern .header-nav ul{
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    background: #fff;
    padding: 12px;
    border-radius: 16px;
    border: 1px solid rgba(31,29,74,0.10);
    box-shadow: 0 14px 30px rgba(0,0,0,0.08);
  }

  .header-modern .header-nav ul li a{
    display:block;
    text-align:center;
    padding: 12px;
  }
}
/* Partner Logos modern - perfekt zentriert */
.bos-partner-logos{
  display: flex;
  flex-wrap: wrap;
  gap: 18px;

  justify-content: center;   /* <-- zentriert horizontal */
  align-items: center;       /* <-- zentriert vertikal */

  width: 100%;
  margin: 18px auto 0 auto;  /* <-- mittig */
  padding: 0;
}

.bos-partner-logo{
  background: #fff;
  border: 1px solid rgba(31,29,74,0.12);
  border-radius: 18px;
  padding: 16px 18px;
  box-shadow: 0 10px 22px rgba(0,0,0,0.06);

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

  width: 200px;
  height: 95px;

  transition: 0.25s ease;
}

.bos-partner-logo:hover{
  transform: translateY(-3px);
  box-shadow: 0 16px 35px rgba(0,0,0,0.10);
}

.bos-partner-logo img{
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* Responsive */
@media (max-width: 768px){
  .bos-partner-logos{
    gap: 12px;
  }

  .bos-partner-logo{
    width: 160px;
    height: 80px;
    padding: 14px;
  }
.bos-partner-grid{
  display:flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center; 
  align-items: center;
  width: 100%;
  margin: 0 auto;
}
.bos-partners-center{
  text-align: center;
}

.bos-partners-title{
  text-align: center !important;
  width: 100%;
}

.bos-partner-grid{
  display:flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 18px;
  width: 100%;
  margin: 0 auto;
}
.bos-partner{
  background:#fff;
  border: 1px solid rgba(31,29,74,0.10);
  border-radius: 18px;
  padding: 18px;
  width: 170px;
  height: 85px;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow: 0 10px 20px rgba(0,0,0,0.05);
}

.bos-partner img{
  max-width: 120px;
  max-height: 55px;
  object-fit: contain;
  display:block;
}
.bos-partners-center{
  text-align: center;
}

.bos-partners-title{
  text-align: center !important;
  width: 100%;
}

.bos-partner-grid{
  display:flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 18px;
  width: 100%;
  margin: 0 auto;
}

.bos-hero-title{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}

.bos-hero-logo{
  height: 58px;
  width: auto;
  display:block;
}

/* Handy: Logo unter die Überschrift */
@media (max-width: 768px){
  .bos-hero-title{
    justify-content: center;
    text-align: center;
  }

  .bos-hero-logo{
    height: 50px;
    margin-top: 6px;
  }
}.bos-hero-logo{
  height: 38px;   /* kleiner */
  width: auto;
  display:block;
  opacity: 0.95;
}
@media (max-width: 768px){
  .bos-hero-logo{
    height: 34px;
    margin-top: 6px;
  }
}
/* ================================
   FIX: BOS Logo neben Überschrift
   (Zusatz CSS - ganz unten einfügen)
================================ */

/* Wrapper (Überschrift + Logo) sauber nebeneinander */
.bos-hero-title-row{
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 14px !important;
  flex-wrap: wrap !important;
}

/* Überschrift darf nicht „komisch“ springen */
.bos-hero-title-row h1{
  margin: 0 !important;
  line-height: 1.15 !important;
}

/* Logo IMMER klein halten */
.bos-hero-title-row img,
.bos-hero-logo{
  height: 34px !important;   /* <- Größe vom Logo */
  width: auto !important;
  max-height: 34px !important;
  display: inline-block !important;
  object-fit: contain !important;
}

/* Mobile: noch kleiner */
@media (max-width: 768px){
  .bos-hero-title-row{
    gap: 10px !important;
  }

  .bos-hero-title-row img,
  .bos-hero-logo{
    height: 28px !important;
    max-height: 28px !important;
  }
}
/* FIX: Hero Logo wird riesig -> knallhart begrenzen */
.bos-hero .bos-hero-logo{
  height: 34px !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  display: inline-block !important;
  object-fit: contain !important;
}

/* Falls irgendein CSS img auf 100% zieht */
.bos-hero .bos-hero-title-row img{
  width: auto !important;
  max-width: none !important;
}

/* HERO TITLE + LOGO (schön zentriert + modern) */
.bos-hero-title-row{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  text-align: center;
  margin-bottom: 10px;
}

.bos-hero-title-row h1{
  margin: 0;
  font-weight: 900;
  color: #1f1d4a;
  font-size: 44px;
  line-height: 1.15;
}

/* Logo neben der Überschrift */
.bos-hero-logo{
  height: 52px;              /* Größe */
  width: auto;
  display: block;
  object-fit: contain;

  /* modern look */
  filter: drop-shadow(0 10px 20px rgba(31,29,74,0.18));
  opacity: 0.98;
}

/* Mobile schöner */
@media (max-width: 768px){
  .bos-hero-title-row h1{
    font-size: 30px;
  }
  .bos-hero-logo{
    height: 42px;
  }
}
.bos-hero-logo{
  filter: contrast(1.1) saturate(1.15) drop-shadow(0 10px 20px rgba(31,29,74,0.18));
}
.bos-hero-logo{
  height: 48px;
  background: #ffffff;
  padding: 10px 14px;
  border-radius: 16px;
  border: 1px solid rgba(31,29,74,0.10);
  box-shadow: 0 12px 30px rgba(0,0,0,0.08);
}
/* HOME SLIDER: kleiner + clean */
.bos-home-slider{
  margin-top: 22px;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(31,29,74,0.12);
  box-shadow: 0 14px 30px rgba(0,0,0,0.08);
}

/* Höhe Desktop */
.bos-home-slider,
.bos-home-slider .rev_slider{
  height: 420px !important;
}

/* Höhe Handy */
@media (max-width: 768px){
  .bos-home-slider,
  .bos-home-slider .rev_slider{
    height: 260px !important;
  }
}/* PARTNER TITLE MITTIG */
.bos-partners-title{
  text-align: center !important;
  width: 100%;
  margin-bottom: 26px !important;
}

/* PARTNER GRID NOCH CLEANER */
.bos-partner-grid{
  justify-content: center !important;
  align-items: center !important;
}

/* MODERNE PARTNER CARDS */
.bos-partner{
  background: rgba(255,255,255,0.9);
  border: 1px solid rgba(31,29,74,0.08);
  border-radius: 18px;
  padding: 16px 18px;

  width: 175px;
  height: 90px;

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

  box-shadow: 0 10px 22px rgba(0,0,0,0.05);
  transition: all 0.25s ease;
}

/* HOVER EFFECT */
.bos-partner:hover{
  transform: translateY(-4px);
  box-shadow: 0 18px 35px rgba(0,0,0,0.10);
  border-color: rgba(31,29,74,0.18);
}

/* LOGOS CLEAN & GLEICHMÄSSIG */
.bos-partner img{
  max-width: 125px;
  max-height: 55px;
  object-fit: contain;
  display: block;
  transition: all 0.25s ease;
}

/* LEICHTER "MODERN LOOK" BEIM HOVER */
.bos-partner:hover img{
  transform: scale(1.05);
}

/* =========================
   PARTNER SECTION CENTER FIX
   ========================= */

/* Titel mittig */
.bos-partners-title{
  text-align: center !important;
  width: 100%;
  margin-bottom: 28px !important;
}

/* Container NICHT full width ziehen */
.bos-partners-center{
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Grid als "zentrierter Block" */
.bos-partner-grid{
  display: grid !important;
  grid-template-columns: repeat(6, 175px);
  gap: 16px;
  justify-content: center !important;
  align-items: center !important;
  width: fit-content;   /* <-- WICHTIG */
  margin: 0 auto;       /* <-- WICHTIG */
}

/* Partner Card modern */
.bos-partner{
  background: rgba(255,255,255,0.95);
  border: 1px solid rgba(31,29,74,0.10);
  border-radius: 18px;
  width: 175px;
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 22px rgba(0,0,0,0.05);
  transition: all 0.25s ease;
}

.bos-partner:hover{
  transform: translateY(-4px);
  box-shadow: 0 18px 35px rgba(0,0,0,0.10);
  border-color: rgba(31,29,74,0.18);
}

.bos-partner img{
  max-width: 125px;
  max-height: 55px;
  object-fit: contain;
  display: block;
  transition: all 0.25s ease;
}

.bos-partner:hover img{
  transform: scale(1.05);
}

/* Responsive */
@media (max-width: 1200px){
  .bos-partner-grid{
    grid-template-columns: repeat(4, 175px);
  }
}

@media (max-width: 768px){
  .bos-partner-grid{
    grid-template-columns: repeat(2, 160px);
  }
  .bos-partner{
    width: 160px;
    height: 85px;
  }
}/* =========================
   MOBILE HEADER FIX
   ========================= */
@media (max-width: 768px){

  /* Header Innenabstand kleiner */
  #header .header-inner{
    padding: 10px 14px !important;
  }

  /* Brand Bereich sauber zentrieren */
  #header .header-brand{
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
  }

  /* BOS Logo größer */
  #header .brand-logo{
    max-height: 55px !important;
    width: auto !important;
  }

  /* ISO / Dekra Badges kleiner aber sichtbar */
  #header .brand-badge{
    max-height: 38px !important;
    width: auto !important;
    opacity: 0.95;
  }
}

/* =========================
   MOBILE MENU FIX
   ========================= */
@media (max-width: 768px){

  /* Menübox kleiner & schöner */
  .header-nav{
    width: 92% !important;
    max-width: 340px !important;
    margin: 0 auto !important;
    border-radius: 18px !important;
    padding: 10px 0 !important;
  }

  /* Menü Links schöner */
  .header-nav ul{
    padding: 0 !important;
    margin: 0 !important;
    text-align: center !important;
  }

  .header-nav ul li{
    display: block !important;
    margin: 8px 0 !important;
  }

  .header-nav ul li a{
    display: block !important;
    padding: 14px 12px !important;
    font-size: 18px !important;
    font-weight: 800 !important;
    border-radius: 14px !important;
  }
}
@media (max-width: 768px){
  .bos-hero-title-row{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
  }

  .bos-hero-logo{
    width: 140px !important;
    height: auto !important;
  }
}/* HERO LOGO FIX (Index) */
.bos-hero-title-row{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
}

.bos-hero-logo{
  width: 170px;       /* Standard Größe */
  max-width: 70%;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* Handy: Logo größer + sauber */
@media (max-width: 768px){
  .bos-hero-logo{
    width: 210px;     /* größer auf Handy */
    max-width: 80%;
  }
}

/* Sehr kleine Handys */
@media (max-width: 380px){
  .bos-hero-logo{
    width: 190px;
    max-width: 85%;
  }
}
/* HERO TITLE + LOGO (modern) */
.bos-hero-title-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 20px;
  margin-bottom: 10px;
}

.bos-hero-title-left h1{
  margin:0;
  font-weight:900;
  color:#1f1d4a;
  font-size:38px;
  line-height:1.15;
}

.bos-hero-title-right{
  display:flex;
  align-items:center;
  justify-content:center;
}

.bos-hero-logo{
  width: 180px;
  height:auto;
  display:block;
}

/* Mobile: untereinander + zentriert */
@media (max-width: 768px){
  .bos-hero-title-row{
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    gap: 12px;
  }

  .bos-hero-title-left h1{
    font-size: 30px;
  }

  .bos-hero-logo{
    width: 220px;
    max-width: 85%;
  }
}

/* Sehr kleine Geräte */
@media (max-width: 380px){
  .bos-hero-logo{
    width: 200px;
  }
}
	/* ================================
   BOS HOME SLIDER (KOMPAKT + CLEAN)
=================================== */

.bos-home-slider{
  margin-top: 18px;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(31,29,74,0.10);
  background: #fff;
  box-shadow: 0 10px 28px rgba(0,0,0,0.08);
  transition: 0.25s ease;
}

/* Hover Effekt (clean) */
.bos-home-slider:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 40px rgba(0,0,0,0.12);
}

/* Slider selbst soll nicht zu hoch werden */
.bos-home-slider,
.bos-home-slider .rev_slider{
  max-height: 340px !important;
}

/* Bilder immer sauber & nicht verzerrt */
.bos-home-slider img.rev-slidebg{
  object-fit: cover !important;
  width: 100% !important;
  height: 100% !important;
}

/* Mobile kompakter */
@media (max-width: 768px){
  .bos-home-slider,
  .bos-home-slider .rev_slider{
    max-height: 230px !important;
  }
}
/* Slider kompakter + clean */
.bos-home-slider{
  max-width: 100%;
}

.bos-home-slider,
.bos-home-slider .rev_slider,
.bos-home-slider .rev_slider_wrapper{
  height: 340px !important;
}

@media (max-width: 992px){
  .bos-home-slider,
  .bos-home-slider .rev_slider,
  .bos-home-slider .rev_slider_wrapper{
    height: 320px !important;
  }
}

@media (max-width: 768px){
  .bos-home-slider,
  .bos-home-slider .rev_slider,
  .bos-home-slider .rev_slider_wrapper{
    height: 260px !important;
  }
}

@media (max-width: 480px){
  .bos-home-slider,
  .bos-home-slider .rev_slider,
  .bos-home-slider .rev_slider_wrapper{
    height: 220px !important;
  }
}

/* Slider Bilder schön clean */
.bos-home-slider .rev-slidebg{
  filter: none !important;
}

/* =========================
   SLIDER CLEAN + ZENTRAL
========================= */
.bos-home-slider{
  max-width: 1100px;
  margin: 22px auto 0 auto;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(31,29,74,0.10);
  box-shadow: 0 18px 40px rgba(0,0,0,0.08);
  background: #fff;
}

/* Fix: Slider darf nicht full width ziehen */
.bos-home-slider .rev_slider_wrapper,
.bos-home-slider .rev_slider{
  width: 100% !important;
}

/* Höhe kompakt */
.bos-home-slider,
.bos-home-slider .rev_slider_wrapper,
.bos-home-slider .rev_slider{
  height: 340px !important;
}

/* Handy/Tablet kleiner */
@media (max-width: 992px){
  .bos-home-slider,
  .bos-home-slider .rev_slider_wrapper,
  .bos-home-slider .rev_slider{
    height: 300px !important;
  }
}

@media (max-width: 768px){
  .bos-home-slider{
    max-width: 100%;
  }
  .bos-home-slider,
  .bos-home-slider .rev_slider_wrapper,
  .bos-home-slider .rev_slider{
    height: 240px !important;
  }
}
/* Mobile Menü Button */
.bos-mobile-menu-btn{
  display:none;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  border: 1px solid rgba(31,29,74,0.15);
  background: #fff;
  box-shadow: 0 10px 20px rgba(0,0,0,0.06);
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap: 6px;
}

.bos-mobile-menu-btn span{
  width: 20px;
  height: 2px;
  background: var(--bos-blue);
  display:block;
  border-radius: 999px;
}

/* Handy Navigation */
@media (max-width: 992px){
  .bos-mobile-menu-btn{
    display:flex;
  }

  .header-nav{
    display:none;
    width: 100%;
    margin-top: 12px;
  }

  .header-nav.open{
    display:block;
  }

  .header-nav ul{
    display:flex;
    flex-direction:column;
    gap: 10px;
    padding: 14px;
    border-radius: 18px;
    background: #fff;
    border: 1px solid rgba(31,29,74,0.10);
    box-shadow: 0 14px 30px rgba(0,0,0,0.08);
  }

  .header-nav ul li a{
    display:block;
    padding: 12px 14px;
    border-radius: 14px;
    font-weight: 800;
  }

  .header-nav ul li a.active{
    background: rgba(31,29,74,0.08);
  }
}
/* Slider clean + Bilder perfekt (ohne verzerren) */
.bos-home-slider{
  max-width: 1200px;
  margin: 22px auto 0 auto;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(31,29,74,0.10);
  box-shadow: 0 18px 40px rgba(0,0,0,0.08);
  background: #fff;
}

/* Damit Bilder immer sauber "cover" bleiben */
#revolutionSlider,
#revolutionSlider .tp-bgimg,
#revolutionSlider .rev-slidebg{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* Dezente Slider Pfeile */
.tparrows{
  width: 44px !important;
  height: 44px !important;
  background: rgba(0,0,0,0.25) !important;
  border-radius: 999px !important;
  transition: 0.2s ease !important;
}

.tparrows:hover{
  background: rgba(0,0,0,0.45) !important;
  transform: scale(1.05);
}
.bos-home-slider{
  background: #0f1026; /* oder #ffffff wenn du lieber hell willst */
}
/* CLEAN SLIDER LOOK */
.bos-home-slider{
  background: #0f1026; /* dunkler Premium Hintergrund */
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 18px 40px rgba(0,0,0,0.18);
}
footer {
  position: relative;
}

/* =========================
   Footer IHK – klein & dezent
========================= */

.footer-ihk {
  margin-top: 14px;          /* Abstand zu Social Media */
}

.footer-ihk .ihk-badge {
  max-width: 110px;          /* <<< HIER steuerst du die Größe */
  width: 100%;
  height: auto;
  opacity: 0.6;
  display: block;
}

/* Optional: ganz leichter Hover */
.footer-ihk .ihk-badge:hover {
  opacity: 0.8;
}

/* Mobile: noch etwas kleiner */
@media (max-width: 768px) {
  .footer-ihk .ihk-badge {
    max-width: 90px;
  }
}
/* =========================
   Footer IHK – klein & dezent
========================= */

.footer-ihk {
  margin-top: 14px;          /* Abstand zu Social Media */
}

.footer-ihk .ihk-badge {
  max-width: 110px;          /* <<< HIER steuerst du die Größe */
  width: 100%;
  height: auto;
  opacity: 0.6;
  display: block;
}

/* Optional: ganz leichter Hover */
.footer-ihk .ihk-badge:hover {
  opacity: 0.8;
}

/* Mobile: noch etwas kleiner */
@media (max-width: 768px) {
  .footer-ihk .ihk-badge {
    max-width: 90px;
  }
}
/* =========================
   BOS Galerie – clean & ruhig
========================= */

.bos-gallery {
  padding: 60px 0;
  background: #f6f7fb;
}

.bos-gallery-title {
  text-align: center;
  font-weight: 900;
  color: #1f1d4a;
  margin-bottom: 30px;
}

.bos-gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.bos-gallery-item {
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 12px 30px rgba(0,0,0,0.08);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.bos-gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Hover – dezent */
.bos-gallery-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(0,0,0,0.12);
}

/* Tablet */
@media (max-width: 992px) {
  .bos-gallery-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Mobile */
@media (max-width: 576px) {
  .bos-gallery-grid {
    grid-template-columns: 1fr;
  }
}
/* =========================
   GALERIE – SAUBERE SKALIERUNG
========================= */

/* jedes Galerie-Item gleich hoch */
.image-gallery-item {
  height: 230px;              /* Desktop-Höhe */
  overflow: hidden;
  border-radius: 14px;
  box-shadow: 0 10px 26px rgba(0,0,0,0.08);
  background: #000;
}

/* Wrapper ebenfalls volle Höhe */
.image-gallery-item .thumb-info,
.image-gallery-item .thumb-info-wrapper {
  height: 100%;
}

/* DAS ist der wichtigste Teil */
.image-gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;          /* kein Stretch, kein Verzerren */
  display: block;
  transition: transform 0.3s ease;
}

/* dezenter Hover */
.image-gallery-item:hover img {
  transform: scale(1.06);
}

/* Tablet */
@media (max-width: 992px) {
  .image-gallery-item {
    height: 200px;
  }
}

/* Mobile */
@media (max-width: 576px) {
  .image-gallery-item {
    height: 180px;
  }
}
/* =========================
   GALERIE – ISOTOPE FIX (FINAL)
========================= */

/* LI darf NICHT auto-höhenbestimmt sein */
.image-gallery > li {
  padding: 10px;
}

/* feste Kachel-Geometrie */
.image-gallery-item {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;      /* <<< DAS ist der Gamechanger */
  overflow: hidden;
  border-radius: 14px;
  background: #000;
  box-shadow: 0 10px 24px rgba(0,0,0,0.08);
}

/* Wrapper volle Fläche */
.image-gallery-item .thumb-info,
.image-gallery-item .thumb-info-wrapper {
  position: absolute;
  inset: 0;
}

/* Bild sauber skalieren */
.image-gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;        /* kein Stretch, kein Chaos */
  display: block;
  transition: transform 0.35s ease;
}

/* dezenter Hover */
.image-gallery-item:hover img {
  transform: scale(1.08);
}

/* Mobile etwas höher */
@media (max-width: 768px) {
  .image-gallery-item {
    aspect-ratio: 3 / 4;
  }
}
	body {
  background: red !important;
}
/* =========================
   GALERIE – CLEAN GRID FIX
========================= */

/* UL reset */
.image-gallery {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Jede Kachel gleich hoch */
.image-gallery-item {
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(0,0,0,0.06);
  transition: 0.25s ease;
}

/* Hover clean */
.image-gallery-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 32px rgba(0,0,0,0.10);
}

/* Feste Bildhöhe → kein Chaos mehr */
.image-gallery-item img {
  width: 100%;
  height: 220px;           /* DESKTOP */
  object-fit: cover;       /* wichtig */
  display: block;
}

/* Mobile */
@media (max-width: 768px) {
  .image-gallery-item img {
    height: 180px;
  }
}

/* Entfernt alte Porto-Effekte */
.thumb-info,
.thumb-info-wrapper {
  position: static !important;
  overflow: hidden;
}
/* ===== FOOTER LAYOUT FIX ===== */
#footer {
  position: relative;
}

/* Social + IHK sauber trennen */
#footer .col-md-2 {
  position: relative;
}

/* IHK Logo aus Spalte lösen */
#footer .footer-ihk {
  position: absolute;
  right: -120px; /* ⬅️ schiebt es aus der Social-Spalte raus */
  top: 10px;
}

/* IHK Logo echte Größe */
#footer .ihk-badge {
  width: 110px;   /* ⬅️ HIER steuerst du die Größe */
  max-width: none;
  height: auto;
  opacity: 0.9;
  transition: all 0.25s ease;
}

/* Hover */
#footer .ihk-badge:hover {
  opacity: 1;
  transform: scale(1.08);
}
@media (max-width: 768px) {
  #footer .footer-ihk {
    position: static;
    margin-top: 15px;
  }

  #footer .ihk-badge {
    width: 90px;
  }
}

/* Footer Copyright Balken angleichen */
#footer .footer-copyright {
  background: #1f1d4a; /* gleiche Farbe wie Footer */
  border-top: 1px solid rgba(255,255,255,0.08);
  margin-top: 0;
  padding: 15px 0;
}

#footer .footer-ihk-col {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

/* Logo Größe & Stil */
#footer .ihk-badge {
  max-width: 100px;
  height: auto;
  opacity: 0.85;
  transition: all 0.25s ease;
}

/* Hover */
#footer .ihk-badge:hover {
  opacity: 1;
  transform: scale(1.08);
}

/* Mobile: zentriert untereinander */
@media (max-width: 992px) {
  #footer .footer-ihk-col {
    justify-content: center;
    margin-top: 20px;
  }
}

/* Container sauber ausrichten */
#footer .footer-ihk {
  margin-top: 10px;
  display: flex;
  align-items: center;
}

/* Logo Größe + Zentrierung */
#footer .footer-ihk img,
#footer .ihk-badge {
  max-width: 70px;     /* WICHTIG: klein & dezent */
  height: auto;
  opacity: 0.75;
  transition: all 0.25s ease;
}

/* Hover Effekt */
#footer .footer-ihk img:hover {
  opacity: 1;
  transform: scale(1.05);
}

/* Mobile noch kompakter */
@media (max-width: 768px) {
  #footer .footer-ihk img {
    max-width: 60px;
  }
}

/* UL reset */
.image-gallery {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Jede Kachel gleich hoch */
.image-gallery-item {
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(0,0,0,0.06);
  transition: 0.25s ease;
}

/* Hover clean */
.image-gallery-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 32px rgba(0,0,0,0.10);
}

/* Feste Bildhöhe → kein Chaos mehr */
.image-gallery-item img {
  width: 100%;
  height: 220px;           /* DESKTOP */
  object-fit: cover;       /* wichtig */
  display: block;
}

/* Mobile */
@media (max-width: 768px) {
  .image-gallery-item img {
    height: 180px;
  }
}

/* Entfernt alte Porto-Effekte */
.thumb-info,
.thumb-info-wrapper {
  position: static !important;
  overflow: hidden;
}

:root{
  --bos-blue: #1f1d4a;
  --bos-white: #ffffff;
}
	
/* Footer Fix */
#footer{
  margin-top: 60px;
}

#footer .row{
  display: flex;
  flex-wrap: wrap;
}

#footer .col-md-3,
#footer .col-md-2{
  margin-bottom: 20px;
}

/* Mobile Footer sauber */
@media (max-width:768px){

  #footer .row{
    text-align: center;
  }

  #footer .col-md-3,
  #footer .col-md-2{
    width: 100%;
  }

}

.about-content{
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}
	/* =========================
   ÜBER UNS FIX
========================= */

.about-content{
  max-width: 900px !important;
  margin: 0 auto !important;
  text-align: center !important;
}

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

#footer{
  margin-top: 60px !important;
}

#footer .row{
  display: flex !important;
  flex-wrap: wrap !important;
}

#footer .col-md-3,
#footer .col-md-2{
  margin-bottom: 20px !important;
}

/* Mobile Footer */
@media (max-width:768px){

  #footer .row{
    text-align: center !important;
  }

  #footer .col-md-3,
  #footer .col-md-2{
    width: 100% !important;
  }

/* =========================
   FORCE OVERRIDE
========================= */

/* Über Uns zentrieren */
.about-content{
  max-width: 900px !important;
  margin: 0 auto !important;
  text-align: center !important;
}

/* Footer fix */
#footer .row{
  display: flex !important;
  flex-wrap: wrap !important;
}

#footer .col-md-3,
#footer .col-md-2{
  margin-bottom: 20px !important;
}

/* Mobile */
@media (max-width:768px){

  #footer .row{
    text-align: center !important;
  }

  #footer .col-md-3,
  #footer .col-md-2{
    width: 100% !important;
    float: none !important;
  }

}
/* =========================
   FIX: SLIDER OHNE RUCKELN
========================= */

/* Feste Höhe vor Laden */
.bos-home-slider,
.bos-home-slider .rev_slider_wrapper,
.bos-home-slider .rev_slider {
  width: 100% !important;
  min-height: 340px !important;
  max-height: 340px !important;
  overflow: hidden;
}

/* Bilder sofort korrekt */
.bos-home-slider img.rev-slidebg {
  object-fit: cover !important;
  width: 100% !important;
  height: 100% !important;
}

/* Mobile Höhe */
@media (max-width: 768px){
  .bos-home-slider,
  .bos-home-slider .rev_slider_wrapper,
  .bos-home-slider .rev_slider {
    min-height: 240px !important;
    max-height: 240px !important;
  }
}

/* =========================
   FIX: BODY FARBE
========================= */

body{
  background: #ffffff !important;
}
/* =========================
   MOBILE HEADER FIX
========================= */

@media (max-width: 768px){

  /* Header aufräumen */
  .header-brand img{
    display: none !important;
  }

  /* Nur Logo anzeigen */
  .header-brand .brand-logo{
    display: block !important;
    max-height: 45px;
    margin: 0 auto;
  }

  /* Mobile Menü Layer */
  .header-nav{
    position: fixed !important;
    top: 0;
    right: -100%;
    width: 80%;
    height: 100vh;
    background: #ffffff;
    z-index: 9999;
    padding-top: 90px;
    transition: 0.3s ease;
    box-shadow: -10px 0 30px rgba(0,0,0,0.15);
  }

  /* Wenn Menü offen */
  .header-nav.open{
    right: 0;
  }

  /* Menü sauber zentrieren */
  .header-nav ul{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
  }

  .header-nav ul li a{
    font-size: 20px;
    font-weight: 700;
  }

  /* Burger Button oben halten */
  .bos-mobile-menu-btn,
  .header-toggle{
    position: relative;
    z-index: 10000;
  }
}
/* =========================
   MOBILE FOOTER + HEADER FIX
========================= */

@media (max-width: 768px){

  /* =====================
     HEADER: Zertifikate zurück
  ===================== */

  .header-brand img.brand-badge{
    display: inline-block !important;
    max-height: 35px;
    margin: 0 4px;
  }

  /* Nur große Chaos-Bilder ausblenden */
  .header-brand img:not(.brand-logo):not(.brand-badge){
    display: none !important;
  }

  /* Header sauber zentrieren */
  .header-brand{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
  }


  /* =====================
     FOOTER: Kein Weiß unten
  ===================== */

  html, body{
    margin: 0 !important;
    padding: 0 !important;
    background: #1f1d4a;
  }

  #footer{
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  .main{
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }


  /* =====================
     FOOTER: Spalten ausrichten
  ===================== */

  #footer .row{
    display: flex;
    flex-direction: column;
    text-align: center;
    gap: 26px;
  }

  #footer .col-md-3,
  #footer .col-md-2{
    width: 100% !important;
  }


  /* Social Media mittig */
  .bos-social{
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 10px;
  }

  .bos-social-link{
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
  }


  /* =====================
     Copyright sauber
  ===================== */

  .footer-copyright{
    text-align: center;
    padding: 16px 10px;
    font-size: 13px;
  }

}
/* =========================
   MOBILE MENU + FOOTER FIX
========================= */

@media (max-width: 768px){

  /* =====================
     MOBILE MENU BEGRENZEN
  ===================== */

  .header-nav.open{
    max-height: 100vh;
    overflow-y: auto;
    padding-bottom: 30px;
  }

  .header-nav ul{
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }


  /* =====================
     FOOTER SOCIAL ZENTRIERT
  ===================== */

  #footer .bos-social{
    display: flex !important;
    justify-content: center !important;
    align-items: center;
    gap: 20px;
    width: 100%;
    margin: 15px auto 0 auto;
  }

  #footer .bos-social-link{
    justify-content: center;
    text-align: center;
  }


  /* =====================
     FOOTER SPALTEN MITTIG
  ===================== */

  #footer .row{
    text-align: center;
  }

  #footer .contact,
  #footer h4{
    text-align: center;
  }


  /* =====================
     KEIN WEISSER BEREICH
  ===================== */

  body, html{
    overflow-x: hidden;
  }

}
/* =========================
   MOBILE MENU + FOOTER FIX
========================= */

@media (max-width: 768px){

  /* =====================
     MOBILE MENU BEGRENZEN
  ===================== */

  .header-nav.open{
    max-height: 100vh;
    overflow-y: auto;
    padding-bottom: 30px;
  }

  .header-nav ul{
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }


  /* =====================
     FOOTER SOCIAL ZENTRIERT
  ===================== */

  #footer .bos-social{
    display: flex !important;
    justify-content: center !important;
    align-items: center;
    gap: 20px;
    width: 100%;
    margin: 15px auto 0 auto;
  }

  #footer .bos-social-link{
    justify-content: center;
    text-align: center;
  }


  /* =====================
     FOOTER SPALTEN MITTIG
  ===================== */

  #footer .row{
    text-align: center;
  }

  #footer .contact,
  #footer h4{
    text-align: center;
  }


  /* =====================
     KEIN WEISSER BEREICH
  ===================== */

  body, html{
    overflow-x: hidden;
  }

/* Blog Premium Kacheln */

.bos-article-block{
  background: #fff;
  border-radius: 18px;
  padding: 22px;
  margin-bottom: 22px;
  box-shadow: 0 8px 22px rgba(0,0,0,0.06);
  border: 1px solid rgba(31,29,74,0.08);
}

.bos-article-lead{
  font-size: 18px;
  line-height: 1.6;
  margin-bottom: 25px;
  color: #333;
  font-weight: 500;
}
	
/* =========================
   SLIDER STABIL FIX
========================= */

.rev_slider_wrapper,
.rev_slider,
.rev_slider ul,
.rev_slider li {
  height: 100% !important;
}

.rev_slider li img.rev-slidebg{
  width:100% !important;
  height:100% !important;
  object-fit: cover !important;
  object-position: center center !important;
}