/************************************************/
/* © by Werbeagentur Gössler & Sailer OG     */
/* www.goesslersailer.at              */
/************************************************/

/* --- Basis Variablen & Reset --- */
:root {
  --header-height: 80px;
}

/* --- Menu & Push Mechanik --- */
.cbp-spmenu {background: var(--color-weiss); position: fixed; overflow: auto;}
.cbp-spmenu h3 {color: #afdefa; font-size: 100%; padding: 20px; margin: 0; font-weight: 300; background: #0d77b6;}
.cbp-spmenu a {display: block; color: #fff; font-size: 0.9em; font-weight: 300; width:150px;}
.cbp-spmenu-vertical { width: 80%; height: 100%; top: 0; z-index: 99;}
.cbp-spmenu-right { right: -80%;}
.cbp-header-left {right:0%;}
.cbp-spmenu-right.cbp-spmenu-open { right: 0px;}
.cbp-spmenu-push {overflow-x:hidden; position: relative; left: 0;}
.cbp-spmenu-push-toleft {left:-80%; overflow-y:hidden;}
.cbp-header-toleft {width:100%; left:auto; right:auto;}
.cbp-spmenu, .cbp-spmenu-push { transition: all 0.3s linear; }

/* --- HEADER BASIS (Transparent) --- */
.cbp-header-top {
  left: 0;
  right: 0;
  top: 0;
  position: fixed;
  z-index: 100;
  height: var(--header-height);
  background-color: transparent; 
  transition: transform 0.2s ease-in-out, background-color 0.4s ease;
}

/* --- HEADER SCROLL-ZUSTAND (aktiviert durch JS) --- */
.cbp-header-top.is-scrolled {
  background-color: var(--color-graugelb);
  box-shadow: 0 2px 10px rgba(0,0,0,0.2);
  background-image: url("../img/header/rose-nav.jpg");
  background-position:center;
  background-repeat: no-repeat;
}

/* --- NAVIGATION 1. EBENE --- */
.gs-navbar li {margin:0; padding:0; position:relative; list-style:none; float:left; font-size:120%;}

.gs-navbar a {
  display:block; 
  font-size:90%; 
  font-weight:bold; 
  text-decoration:none; 
  padding:12px 30px; 
  color: var(--color-weiss); 
  background-color:transparent; 
  text-transform:uppercase; 
  width:auto;
  transition: color 0.4s ease;
}

.cbp-header-top.is-scrolled .gs-navbar a {
  color: var(--color-violett); 
}

.gs-navbar a:hover { color:var(--color-weiss); background-color:var(--color-violett); }
.gs-navbar a.aktuell { color:var(--color-weiss); background-color:transparent; }

.cbp-header-top.is-scrolled .gs-navbar a:hover {
  background-color: var(--color-weiss); 
  color: var(--color-violett);
}

.cbp-header-top.is-scrolled .gs-navbar a.aktuell {
  color: var(--color-violett);
}

/* --- MODERNE EBENE 2 (Dropdowns) --- */
.gs-navbar li ul {
  display: none;
  position: absolute;
  z-index: 103;
  left: 0;
  top: 100%; 
  margin: 0;
  padding: 10px 0;
  background-color: var(--color-weiss); 
  border-radius: 0; 
  box-shadow: 0 8px 25px rgba(0,0,0,0.15); 
  min-width: 200px;
  font-size: 75%;
}

.gs-navbar li ul.symb_last {left:auto; right:0px;}

/* Einblenden mit Animation */
.gs-navbar li:hover > ul {
  display: block;
  animation: navFadeIn 0.3s ease;
}

/* Links im Dropdown */
.gs-navbar li:hover ul a {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: #333 !important; 
  padding: 8px 20px; 
  border: none; 
  min-width: 220px;
  text-transform: none; 
  font-weight: normal;
  font-size: 85%;
  transition: all 0.2s ease;
  background-color: transparent;
  line-height: normal
}

.gs-navbar li:hover ul a::before {
  content: "\f105"; 
  font-family: "Font Awesome 6 Pro";
  font-weight: 400;
  margin-right: 0px;
  display: inline-block;
  transition: transform 0.2s ease;
  flex-shrink: 0; 
  margin-top: 2px;
}

.gs-navbar li:hover ul a:hover::before {
  transform: translateX(2px);
}

/* Hover-Effekt im Dropdown */
.gs-navbar li:hover ul a:hover { 
  background-color: #f5f5f5 !important; 
  color: var(--color-violett) !important; 
  padding-left: 25px;
}

/* Aktueller Link im Dropdown */
.gs-navbar li:hover ul a.aktuell {
  color: var(--color-violett) !important;
  font-weight: bold;
}

/* --- EBENE 3 & 4 (Seitlich öffnend) --- */
.gs-navbar li ul li ul { 
  display: none; 
  left: 100%; 
  top: 0; 
  margin-left: 2px;
}

/* Animation */
@keyframes navFadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}




/* --- MOBIL NAVIGATION --- */
#navimobil a {
  display:block; font-size:80%; color:var(--color-violett); padding:12px 10px; 
  border-top:1px var(--color-violett) solid; text-transform:uppercase;
}
#navimobil a.aktuell {color:#fff; background-color:var(--color-violett); font-weight:bold;}

/* --- HELPER --- */
.symb_last { right:0; left:auto; }
.gs-clearleft { clear:left; }

/* --- MEDIA QUERIES --- */
@media only screen and (max-width: 1290px) {
  .gs-navbar li { font-size:115;}
  .gs-navbar a {padding:12px 15px;}
}

@media only screen and (max-width: 1100px) {
  .gs-navbar li { font-size:110%;}
  .gs-navbar a {padding:12px 10px;}
}

@media only screen and (max-width: 800px) {
  .gs-navbar ul {box-shadow:none; position: static; border-radius: 0;}	
  .gs-navbar li { font-size:130%;}
  .header-height-dyn { height:0px; }
  .cbp-header-top { background-color: var(--color-graugelb); } 
}