@import url("variables.css");

/* =====================================================================
   CorporateClean – Custom-Stile (Superfish-Navigation, D7)
   ===================================================================== */

#navigation .block-superfish ul.sf-menu li, #navigation .block-superfish ul.sf-menu li a, #navigation .block-superfish ul.sf-menu li:hover, #navigation .block-superfish ul.sf-menu li a:focus, .block-superfish ul.sf-menu li a:hover, #navigation .block-superfish ul.sf-menu li a:active {

    outline: none;
    text-decoration: none;
    margin: 0 25px 0 0;
    padding: 10px 5px;
    font-size: var(--cc-font-size-menu);
    font-weight: normal;
    text-align: center;
    text-transform: uppercase;
    font-family: var(--cc-font-heading);
    display: block;
    background: none;
    border: none;
    color: var(--cc-color-menu-accent);
    vertical-align: middle;

}


#navigation .block-superfish ul.sf-menu li, #navigation .block-superfish ul.sf-menu li a, #navigation .block-superfish ul.sf-menu li:hover, #navigation .block-superfish ul.sf-menu li a:focus, .block-superfish ul.sf-menu li a:hover, #navigation .block-superfish ul.sf-menu li a:active {

    outline: none;
    text-decoration: none;
    margin: 0 5px 0 0;
    padding: 10px 5px;
    padding-left: 5px;
    font-size: var(--cc-font-size-menu);
    font-weight: normal;
    text-align: center;
    text-transform: uppercase;
    font-family: var(--cc-font-heading);
    display: block;
    background: none;
    border: none;
    color: var(--cc-color-menu-accent);

}

/* =====================================================================
   Hamburger-Menü (mobil, ≤ 760px)
   Button: js/hochlandrinder.js toggelt #navigation.is-open.
   ===================================================================== */
.nav-toggle { display: none; }

/* =====================================================================
   Frontpage-Slideshow: Bootstrap-5-Carousel (Bild + Text nebeneinander)
   Bootstrap-CSS wird nur auf der Frontpage geladen (Library bootstrap5,
   siehe corporateclean_helper_preprocess_page).
   ===================================================================== */
#slideshow { display: block; }

#slideshow .carousel-item img { display: block; width: 100%; height: auto; max-width: 450px; margin: 0; padding: 0; background: transparent; border: none; }

#slideshow .slide-content { display: flex; flex-wrap: wrap; align-items: flex-start; }

#slideshow .slide-image { flex: 0 0 auto; max-width: 450px; padding: var(--cc-space-lg) var(--cc-space-lg) 0 0; }

#slideshow .slide-image-right { order: 2; }

#slideshow .slide-text { flex: 1 1 280px; min-width: 0; padding: var(--cc-space-lg) 0 0 0; }

#slideshow .slide-more { padding: var(--cc-space-lg) 0 10px 0; }

/* Punktnavigation unterhalb des Slideshow (wie D7 #slider-controls). */

#slideshow .carousel-indicators { position: static; width: 100%; margin: var(--cc-space-md) 0 0 0; z-index: auto; }

#slideshow .carousel-indicators [data-bs-target] { width: 17px; height: 17px; background: url('../images/inactive-slide.png') no-repeat center center; border: none; opacity: 1; }

#slideshow .carousel-indicators .active { background: url('../images/active-slide.png') no-repeat center center; }

/* =====================================================================
   Mobile (≤ 760px): Menü + Slideshow
   ===================================================================== */
@media all and (max-width: 760px) {

.nav-toggle {
  display: block;
  width: 100%;
  margin: 0 0 var(--cc-space-xs) 0;
  padding: var(--cc-space-xs);
  background: var(--cc-color-bg-menu);
  border: 1px solid var(--cc-color-border-menu);
  border-radius: var(--cc-radius);
  cursor: pointer;
}

.nav-toggle-icon,
.nav-toggle-icon::before,
.nav-toggle-icon::after {
  content: "";
  display: block;
  width: 24px;
  height: 2px;
  background: var(--cc-color-menu-accent);
  margin: 5px auto;
}

#navigation { display: none; }

#navigation.is-open { display: block; }

#header-menu ul.menu li { float: none; display: block; width: 100%; }

#header-menu ul.menu li a {
  margin: 0;
  padding: var(--cc-space-xs);
  display: block;
  width: 100%;
  box-sizing: border-box;
}

#header-menu ul.menu li.first a { padding-left: var(--cc-space-xs); }

#header-menu ul.menu li.last a { margin-right: 0; }

/* Untermenüs: statt :hover dauerhaft ausgeklappt + eingerückt. */
#header-menu ul.menu li.expanded a { background: none; padding: var(--cc-space-xs); }

#header-menu ul.menu li.expanded ul.menu {
  display: block;
  position: static;
  width: auto;
  z-index: auto;
}

#header-menu ul.menu li.expanded ul.menu li { width: auto; }

#header-menu ul.menu li.expanded ul.menu li a {
  width: auto;
  padding-left: var(--cc-space-lg);
  text-align: left;
}

#header-menu ul.menu li.expanded ul ul { display: block; left: auto; top: auto; }

/* Slideshow: Bild über Text stapeln. */
#slideshow .slide-content { flex-direction: column; }

#slideshow .slide-image { order: 0; width: 100%; max-width: 100%; padding: var(--cc-space-lg) 0 0 0; }

#slideshow .slide-image img { max-width: 100%; }

#slideshow .slide-text { order: 1; padding: var(--cc-space-xs) 0 0 0; }

}