/**
 * Carousel klein (bootstrap_package) – Fixes
 * Optimierte Version mit weniger Wiederholungen
 */

/* Basis-Selektor für beide Frame-Typen */
.frame-type-carousel_small,
.frame-type-bootstrap_package_carousel_small {
  
  /* 1) Transparente Hintergründe */
  .carousel-inner,
  .carousel-item {
    background: transparent !important;
  }
  
  /* 2) Controls ohne Gradient */
  .carousel.carousel-small {
    .carousel-control-prev,
    .carousel-control-next {
      background: transparent !important;
      background-image: none !important;
      width: 8%;
    }
    
    /* 3) Content-Container: Keine Flex-Zentrierung */
    .carousel-content,
    .carousel-content-inner {
      display: block !important;
      height: auto !important;
      min-height: 0 !important;
      padding: 0 !important;
      margin: 0 !important;
      background: transparent !important;
    }
    
    /* 4) Bild-Container ohne Inline-Abstände */
    .carousel-image {
      line-height: 0 !important;
      
      img {
        display: block !important;
        width: 100% !important;
        height: auto !important;
      }
    }
    
    /* 5-7) Alle Container auf auto */
    &,
    .carousel-inner,
    .carousel-item,
    .item {
      height: auto !important;
      min-height: 0 !important;
      max-height: none !important;
      aspect-ratio: auto !important;
    }
  }
}

/* ######################################################################################### */

/**
 * Navigation - 4 Ebenen Styling
 * Robuste Lösung für alle Breakpoints und Navigationstypen
 */

/* ========================================
   UNIVERSELLE REGELN (Gelten immer)
   ======================================== */

/* Ebene 3: Kleiner und eingerückt - BEIDE Navigationstypen */
.subnav-nav .subnav-nav > .subnav-item > .subnav-link,
.navbar-nav .nav-item .nav-item .nav-item > .nav-link,
.navbar-nav .nav-item .nav-item .nav-item > a {
    font-size: 0.9rem !important;
    border-left: 2px solid #e9ecef !important;
}

/* Ebene 4: Noch kleiner - BEIDE Navigationstypen */
.subnav-nav .subnav-nav .subnav-nav > .subnav-item > .subnav-link,
.navbar-nav .nav-item .nav-item .nav-item .nav-item > .nav-link,
.navbar-nav .nav-item .nav-item .nav-item .nav-item > a {
    font-size: 0.85rem !important;
    font-weight: 300 !important;
    color: #6c757d !important;
    border-left: 2px solid #e9ecef !important;
}

/* ========================================
   SEITENNAVIGATION (Tablet + Desktop)
   Ab 768px - Breite und Einrückung
   ======================================== */

@media (min-width: 768px) {
    
    /* Verschachtelte Listen ohne Abstand */
    .subnav-nav .subnav-nav {
        margin-top: 0 !important;
        padding-top: 0 !important;
        margin-bottom: 0;
    }
    
    .subnav-nav .subnav-nav .subnav-nav {
        margin-top: 0 !important;
        padding-top: 0 !important;
        margin-bottom: 0;
    }
    
    /* Ebene 2: Standard */
    .subnav-nav > .subnav-item > .subnav-link {
        font-size: 1rem;
        padding: 0.5rem 1rem;
    }
    
    /* Ebene 3: Einrückung */
    .subnav-nav .subnav-nav > .subnav-item > .subnav-link {
        padding: 0.4rem 1rem 0.4rem 2rem !important;
    }
    
    /* Ebene 4: Stärkere Einrückung */
    .subnav-nav .subnav-nav .subnav-nav > .subnav-item > .subnav-link {
        padding: 0.4rem 1rem 0.4rem 3rem !important;
    }
    
    /* Erstes Element bündig */
    .subnav-nav > .subnav-item:first-child,
    .subnav-nav .subnav-nav > .subnav-item:first-child,
    .subnav-nav .subnav-nav .subnav-nav > .subnav-item:first-child {
        margin-top: 0 !important;
    }
    
    /* Hover-Effekte */
    .subnav-nav .subnav-nav > .subnav-item > .subnav-link:hover,
    .subnav-nav .subnav-nav > .subnav-item > .subnav-link:focus {
        background-color: #f8f9fa;
        padding-left: 2.25rem !important;
        transition: padding-left 0.2s ease;
    }
    
    .subnav-nav .subnav-nav .subnav-nav > .subnav-item > .subnav-link:hover,
    .subnav-nav .subnav-nav .subnav-nav > .subnav-item > .subnav-link:focus {
        background-color: #e9ecef;
        padding-left: 3.25rem !important;
    }
    
    /* Active-State */
    .subnav-nav .subnav-nav > .subnav-item.active > .subnav-link {
        font-weight: 600;
        background-color: #f8f9fa;
    }
    
    .subnav-nav .subnav-nav .subnav-nav > .subnav-item.active > .subnav-link {
        font-weight: 500;
        background-color: #f8f9fa;
    }
}

/* ========================================
   HAMBURGER-NAVIGATION (Kleine Tablets + Mobile)
   Bis 767px - Einrückung für Offcanvas
   ======================================== */

@media (max-width: 767.98px) {
    
    /* Ebene 1 - Basis */
    .navbar-nav > .nav-item > .nav-link {
        font-size: 1rem;
        font-weight: 500;
        padding: 0.75rem 1rem;
    }
    
    /* Ebene 2 */
    .navbar-nav .nav-item .nav-item > .nav-link,
    .navbar-nav .nav-item .nav-item > a {
        font-size: 0.95rem;
        font-weight: 400;
        padding: 0.65rem 1rem 0.65rem 2rem !important;
    }
    
    /* Ebene 3 */
    .navbar-nav .nav-item .nav-item .nav-item > .nav-link,
    .navbar-nav .nav-item .nav-item .nav-item > a {
        padding: 0.6rem 1rem 0.6rem 3rem !important;
    }
    
    /* Ebene 4 */
    .navbar-nav .nav-item .nav-item .nav-item .nav-item > .nav-link,
    .navbar-nav .nav-item .nav-item .nav-item .nav-item > a {
        padding: 0.55rem 1rem 0.55rem 4rem !important;
    }
    
    /* Active-States */
    .navbar-nav .nav-item .nav-item .nav-item.active > .nav-link,
    .navbar-nav .nav-item .nav-item .nav-item.active > a {
        font-weight: 500;
        color: #0d6efd;
    }
    
    .navbar-nav .nav-item .nav-item .nav-item .nav-item.active > .nav-link,
    .navbar-nav .nav-item .nav-item .nav-item .nav-item.active > a {
        font-weight: 400;
        color: #0d6efd;
    }
    
    /* Touch-Optimierung */
    .navbar-nav .nav-item .nav-link {
        min-height: 44px;
        display: flex;
        align-items: center;
    }
}

/* ========================================
   TABLET PORTRAIT BEREICH (576px - 767px)
   Spezielle Regeln für die Grauzone
   ======================================== */

@media (min-width: 576px) and (max-width: 767.98px) {
    
    /* Falls Hamburger-Menü gezeigt wird */
    .navbar-nav .nav-item .nav-item .nav-item > .nav-link,
    .navbar-nav .nav-item .nav-item .nav-item > a {
        font-size: 0.9rem !important;
        padding: 0.6rem 1rem 0.6rem 2.5rem !important;
    }
    
    .navbar-nav .nav-item .nav-item .nav-item .nav-item > .nav-link,
    .navbar-nav .nav-item .nav-item .nav-item .nav-item > a {
        font-size: 0.85rem !important;
        padding: 0.55rem 1rem 0.55rem 3.5rem !important;
    }
    
    /* Falls Seitennavigation gezeigt wird */
    .subnav-nav .subnav-nav > .subnav-item > .subnav-link {
        font-size: 0.9rem !important;
        padding: 0.4rem 1rem 0.4rem 1.5rem !important;
    }
    
    .subnav-nav .subnav-nav .subnav-nav > .subnav-item > .subnav-lin