/* =========================================================
   1) GLOBAL / DEFAULT
   (keine Menüklasse = FASSADE) – teils auch im YT Navigation Style gesteuert
   ========================================================= */

/* Default-Background nur wenn KEINE bg-Klasse gesetzt ist */
html body:not(.bg-parkett):not(.bg-bautrocknung):not(.bg-gipser):not(.bg-fassade) {
  background-image: url('../../../../images/logo/background.jpg');
  background-repeat: repeat-x;
  background-position: top left;
}

/* Boxed-Wrapper: transparent + Radius */
.tm-page,
.tm-page-container {
  background: transparent;
  border-radius: 25px;
}


/* =========================================================
   2) HINTERGRÜNDE PRO MENÜKLASSE
   ========================================================= */

/* PARKETT */
html body.bg-parkett {
  background-image: url('../../../../images/logo/background_parkett3.jpg');
  background-repeat: repeat-x;
  background-position: top left;
}

/* FASSADE */
html body.bg-fassade {
  background-image: url('../../../../images/logo/background.jpg');
  background-repeat: repeat-x;
  background-position: top left;
}

/* BAUTROCKNUNG */
html body.bg-bautrocknung {
  background-image: url('../../../../images/logo/background_mauer3.jpg');
  background-repeat: repeat-x;
  background-position: top left;
}

/* GIPSER */
html body.bg-gipser {
  background-image: url('../../../../images/logo/background.jpg');
  background-repeat: repeat-x;
  background-position: top left;
}


/* =========================================================
   3) NAV – HAUPTMENÜ (Farben + Underline pro Bereich)
   ========================================================= */

/* --- BAUTROCKNUNG --- */
body.bg-bautrocknung .uk-navbar-nav > li > a { color: #00386D !important; }

body.bg-bautrocknung .uk-navbar-nav > li > a:hover,
body.bg-bautrocknung .uk-navbar-nav > li.uk-active > a { color: #ffffff !important; }

body.bg-bautrocknung .uk-navbar-nav > li:hover > a::before,
body.bg-bautrocknung .uk-navbar-nav > li > a[aria-expanded="true"]::before,
body.bg-bautrocknung .uk-navbar-nav > li.uk-active > a::before {
  background-color: #00386D !important;
}


/* --- GIPSER --- */
body.bg-gipser .uk-navbar-nav > li > a { color: #B21226 !important; }

body.bg-gipser .uk-navbar-nav > li > a:hover,
body.bg-gipser .uk-navbar-nav > li.uk-active > a { color: #ffffff !important; }

body.bg-gipser .uk-navbar-nav > li:hover > a::before,
body.bg-gipser .uk-navbar-nav > li > a[aria-expanded="true"]::before,
body.bg-gipser .uk-navbar-nav > li.uk-active > a::before {
  background-color: #B21226 !important;
}


/* --- PARKETT --- */
body.bg-parkett .uk-navbar-nav > li > a { color: #2C3A43 !important; }

body.bg-parkett .uk-navbar-nav > li > a:hover,
body.bg-parkett .uk-navbar-nav > li.uk-active > a { color: #ffffff !important; }

body.bg-parkett .uk-navbar-nav > li:hover > a::before,
body.bg-parkett .uk-navbar-nav > li > a[aria-expanded="true"]::before,
body.bg-parkett .uk-navbar-nav > li.uk-active > a::before {
  background-color: #5C6167 !important;
}


/* =========================================================
   4) NAV – DROPDOWN OFFEN
   Hauptmenü-Text bleibt weiss beim Übergang ins Dropdown
   ========================================================= */

body:is(.bg-bautrocknung, .bg-gipser, .bg-parkett)
.uk-navbar-nav > li:is(.uk-open, .uk-parent.uk-open):not(.uk-active) > a,
body:is(.bg-bautrocknung, .bg-gipser, .bg-parkett)
.uk-navbar-nav > li:not(.uk-active) > a[aria-expanded="true"],
body:is(.bg-bautrocknung, .bg-gipser, .bg-parkett)
.uk-navbar-nav > li:not(.uk-active):focus-within > a {
  color: #ffffff !important;
}


/* =========================================================
   5) DROPDOWN – GRUNDSTIL (ALLE)
   Erzwingt Padding + Block-Layout (damit Balken bündig & sichtbar)
   ========================================================= */

.uk-navbar-dropdown-nav > li > a {
  /* Variablen für sauberes Tuning */
  --dd-pad-y: 10px;
  --dd-pad-x: 24px;
  --dd-underline-offset: 3px;
  --dd-underline-height: 2px;

  display: block !important;
  position: relative !important;

  padding: var(--dd-pad-y) var(--dd-pad-x) !important;
  margin: 0 !important;
  border-radius: 4px;

  transition: background-color .15s ease, color .15s ease;
}


/* =========================================================
   6) DROPDOWN – PANELS + HOVER pro Bereich
   ========================================================= */

/* --- BAUTROCKNUNG --- */
body.bg-bautrocknung .uk-navbar-dropdown { background-color: #00386D !important; }
body.bg-bautrocknung .uk-navbar-dropdown-nav > li > a { color: #ffffff !important; }
body.bg-bautrocknung .uk-navbar-dropdown-nav > li > a:hover,
body.bg-bautrocknung .uk-navbar-dropdown-nav > li > a:focus,
body.bg-bautrocknung .uk-navbar-dropdown-nav > li.uk-active > a {
  background-color: rgba(0,0,0,0.15) !important;
}

/* --- GIPSER --- */
body.bg-gipser .uk-navbar-dropdown { background-color: #B21226 !important; }
body.bg-gipser .uk-navbar-dropdown-nav > li > a { color: #ffffff !important; }
body.bg-gipser .uk-navbar-dropdown-nav > li > a:hover,
body.bg-gipser .uk-navbar-dropdown-nav > li > a:focus,
body.bg-gipser .uk-navbar-dropdown-nav > li.uk-active > a {
  background-color: rgba(0,0,0,0.15) !important;
}

/* --- PARKETT --- */
body.bg-parkett .uk-navbar-dropdown { background-color: #5C6167 !important; }
body.bg-parkett .uk-navbar-dropdown-nav > li > a { color: #ffffff !important; }
body.bg-parkett .uk-navbar-dropdown-nav > li > a:hover,
body.bg-parkett .uk-navbar-dropdown-nav > li > a:focus,
body.bg-parkett .uk-navbar-dropdown-nav > li.uk-active > a {
  background-color: rgba(255,255,255,0.12);
}

/* --- DEFAULT + FASSADE: Linktext weiss (Panel-Farbe kommt aus YT/UIkit) --- */
body.bg-fassade .uk-navbar-dropdown-nav > li > a,
body:not(.bg-parkett):not(.bg-bautrocknung):not(.bg-gipser):not(.bg-fassade)
.uk-navbar-dropdown-nav > li > a {
  color: #ffffff !important;
}


/* =========================================================
   7) DROPDOWN – UNDERLINE (BALKEN) für Submenüs (ALLE)
   immer bündig (nutzt exakt dasselbe Padding wie der Link)
   ========================================================= */

.uk-navbar-dropdown-nav > li > a::after {
  content: '' !important;

  position: absolute !important;
  left: var(--dd-pad-x) !important;
  right: var(--dd-pad-x) !important;
  bottom: var(--dd-underline-offset) !important;

  height: var(--dd-underline-height) !important;
  background-color: #ffffff !important;

  opacity: 0 !important;
  transition: opacity .15s ease !important;

  pointer-events: none;
  z-index: 1;
}

.uk-navbar-dropdown-nav > li > a:hover::after,
.uk-navbar-dropdown-nav > li > a:focus::after,
.uk-navbar-dropdown-nav > li.uk-active > a::after {
  opacity: 1 !important;
}


/* =========================================================
   8) DROPDOWN – HOVER-BALKEN (Hintergrund) nur wo gewünscht
   Default + Fassade separat, Parkett/Gipser/Bautrocknung bleiben wie definiert
   ========================================================= */

/* DEFAULT (ohne BG-Klasse) */
body:not(.bg-parkett):not(.bg-bautrocknung):not(.bg-gipser):not(.bg-fassade)
.uk-navbar-dropdown-nav > li > a:hover,
body:not(.bg-parkett):not(.bg-bautrocknung):not(.bg-gipser):not(.bg-fassade)
.uk-navbar-dropdown-nav > li > a:focus,
body:not(.bg-parkett):not(.bg-bautrocknung):not(.bg-gipser):not(.bg-fassade)
.uk-navbar-dropdown-nav > li.uk-active > a {
  background-color: rgba(255, 255, 255, 0.12);
}

/* FASSADE */
body.bg-fassade .uk-navbar-dropdown-nav > li > a:hover,
body.bg-fassade .uk-navbar-dropdown-nav > li > a:focus,
body.bg-fassade .uk-navbar-dropdown-nav > li.uk-active > a {
  background-color: rgba(255, 255, 255, 0.12);
}

/* =========================================
   ========================================= */

/* =========================================================
   Sidebar-Menü (Joomla + YOOtheme Pro)
   Modulklasse: standard-blau
   Akzentfarbe: #2C3A43
   ========================================================= */

/* ---------- Titel "bitte wählen" (h3, ohne Klasse) ---------- */
.standard-blau h3 {
  color: #2C3A43 !important;
  font-weight: 700 !important;
  margin: 0 0 10px 0 !important;
}

/* ---------- UL Reset (YOOtheme + Joomla) ---------- */
.standard-blau .el-nav,
.standard-blau .uk-nav,
.standard-blau ul.mod-menu,
.standard-blau ul.menu,
.standard-blau ul.nav {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

/* ---------- Menüpunkt als Button (Standard = grau) ---------- */
.standard-blau .el-nav > li > a,
.standard-blau .uk-nav > li > a,
.standard-blau ul.mod-menu > li > a,
.standard-blau ul.menu > li > a,
.standard-blau ul.nav > li > a {
  display: block !important;
  padding: 12px 18px !important;
  border-radius: 10px !important;

  background-color: #9aa0a6 !important; /* grau */
  background-image: none !important;
  color: #ffffff !important;

  text-decoration: none !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35) !important;
}

/* ---------- Trennlinie zwischen Buttons ---------- */
.standard-blau .el-nav > li + li,
.standard-blau .uk-nav > li + li,
.standard-blau ul.mod-menu > li + li,
.standard-blau ul.menu > li + li,
.standard-blau ul.nav > li + li {
  border-top: 1px solid rgba(255,255,255,.9) !important;
  margin-top: 0 !important;
}

/* ---------- Hover ---------- */
.standard-blau .el-nav > li > a:hover,
.standard-blau .uk-nav > li > a:hover,
.standard-blau ul.mod-menu > li > a:hover,
.standard-blau ul.menu > li > a:hover,
.standard-blau ul.nav > li > a:hover {
  background-color: #8e949a !important;
}

/* ---------- Aktiver Menüpunkt (Akzentfarbe) ---------- */
.standard-blau .el-nav > li.uk-active > a,
.standard-blau .el-nav > li.active > a,
.standard-blau .el-nav > li.current > a,
.standard-blau .uk-nav > li.uk-active > a,
.standard-blau .uk-nav > li.active > a,
.standard-blau .uk-nav > li.current > a,
.standard-blau ul.mod-menu > li.active > a,
.standard-blau ul.mod-menu > li.current > a,
.standard-blau ul.menu > li.active > a,
.standard-blau ul.menu > li.current > a,
.standard-blau a[aria-current="page"] {
  background-color: #2C3A43 !important;
  color: #ffffff !important;
}


/* =========================================================
   Sidebar-Menü (Joomla + YOOtheme Pro)
   Modulklasse: standard-rot
   Akzentfarbe: #B21226
   ========================================================= */

/* ---------- Titel "bitte wählen" (h3, ohne Klasse) ---------- */
.standard-rot h3 {
  color: #B21226 !important;
  font-weight: 700 !important;
  margin: 0 0 10px 0 !important;
}

/* ---------- UL Reset (YOOtheme + Joomla) ---------- */
.standard-rot .el-nav,
.standard-rot .uk-nav,
.standard-rot ul.mod-menu,
.standard-rot ul.menu,
.standard-rot ul.nav {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

/* ---------- Menüpunkt als Button (Standard = grau) ---------- */
.standard-rot .el-nav > li > a,
.standard-rot .uk-nav > li > a,
.standard-rot ul.mod-menu > li > a,
.standard-rot ul.menu > li > a,
.standard-rot ul.nav > li > a {
  display: block !important;
  padding: 12px 18px !important;
  border-radius: 10px !important;

  background-color: #9aa0a6 !important; /* grau */
  background-image: none !important;
  color: #ffffff !important;

  text-decoration: none !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35) !important;
}

/* ---------- Trennlinie zwischen Buttons ---------- */
.standard-rot .el-nav > li + li,
.standard-rot .uk-nav > li + li,
.standard-rot ul.mod-menu > li + li,
.standard-rot ul.menu > li + li,
.standard-rot ul.nav > li + li {
  border-top: 1px solid rgba(255,255,255,.9) !important;
  margin-top: 0 !important;
}

/* ---------- Hover ---------- */
.standard-rot .el-nav > li > a:hover,
.standard-rot .uk-nav > li > a:hover,
.standard-rot ul.mod-menu > li > a:hover,
.standard-rot ul.menu > li > a:hover,
.standard-rot ul.nav > li > a:hover {
  background-color: #8e949a !important;
}

/* ---------- Aktiver Menüpunkt (rot) ---------- */
.standard-rot .el-nav > li.uk-active > a,
.standard-rot .el-nav > li.active > a,
.standard-rot .el-nav > li.current > a,
.standard-rot .uk-nav > li.uk-active > a,
.standard-rot .uk-nav > li.active > a,
.standard-rot .uk-nav > li.current > a,
.standard-rot ul.mod-menu > li.active > a,
.standard-rot ul.mod-menu > li.current > a,
.standard-rot ul.menu > li.active > a,
.standard-rot ul.menu > li.current > a,
.standard-rot a[aria-current="page"] {
  background-color: #B21226 !important;
  color: #ffffff !important;
}

/* =========================================================
   Sidebar-Menü (Joomla + YOOtheme Pro)
   Modulklasse: standard-hellblau
   Akzentfarbe: #00386D
   ========================================================= */

/* ---------- Titel "bitte wählen" (h3, ohne Klasse) ---------- */
.standard-hellblau h3 {
  color: #00386D !important;
  font-weight: 700 !important;
  margin: 0 0 10px 0 !important;
}

/* ---------- UL Reset (YOOtheme + Joomla) ---------- */
.standard-hellblau .el-nav,
.standard-hellblau .uk-nav,
.standard-hellblau ul.mod-menu,
.standard-hellblau ul.menu,
.standard-hellblau ul.nav {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

/* ---------- Menüpunkt als Button (Standard = grau) ---------- */
.standard-hellblau .el-nav > li > a,
.standard-hellblau .uk-nav > li > a,
.standard-hellblau ul.mod-menu > li > a,
.standard-hellblau ul.menu > li > a,
.standard-hellblau ul.nav > li > a {
  display: block !important;
  padding: 12px 18px !important;
  border-radius: 10px !important;

  background-color: #9aa0a6 !important; /* grau */
  background-image: none !important;
  color: #ffffff !important;

  text-decoration: none !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35) !important;
}

/* ---------- Trennlinie zwischen Buttons ---------- */
.standard-hellblau .el-nav > li + li,
.standard-hellblau .uk-nav > li + li,
.standard-hellblau ul.mod-menu > li + li,
.standard-hellblau ul.menu > li + li,
.standard-hellblau ul.nav > li + li {
  border-top: 1px solid rgba(255,255,255,.9) !important;
  margin-top: 0 !important;
}

/* ---------- Hover ---------- */
.standard-hellblau .el-nav > li > a:hover,
.standard-hellblau .uk-nav > li > a:hover,
.standard-hellblau ul.mod-menu > li > a:hover,
.standard-hellblau ul.menu > li > a:hover,
.standard-hellblau ul.nav > li > a:hover {
  background-color: #8e949a !important;
}

/* ---------- Aktiver Menüpunkt (hellblau) ---------- */
.standard-hellblau .el-nav > li.uk-active > a,
.standard-hellblau .el-nav > li.active > a,
.standard-hellblau .el-nav > li.current > a,
.standard-hellblau .uk-nav > li.uk-active > a,
.standard-hellblau .uk-nav > li.active > a,
.standard-hellblau .uk-nav > li.current > a,
.standard-hellblau ul.mod-menu > li.active > a,
.standard-hellblau ul.mod-menu > li.current > a,
.standard-hellblau ul.menu > li.active > a,
.standard-hellblau ul.menu > li.current > a,
.standard-hellblau a[aria-current="page"] {
  background-color: #00386D !important;
  color: #ffffff !important;
}

/* =========================================================
   Sidebar-Menü (Joomla + YOOtheme Pro)
   Modulklasse: standart-grau
   Akzentfarbe: #5C6167
   ========================================================= */

/* ---------- Titel "bitte wählen" (h3, ohne Klasse) ---------- */
.standart-grau h3 {
  color: #5C6167 !important;
  font-weight: 700 !important;
  margin: 0 0 10px 0 !important;
}

/* ---------- UL Reset (YOOtheme + Joomla) ---------- */
.standart-grau .el-nav,
.standart-grau .uk-nav,
.standart-grau ul.mod-menu,
.standart-grau ul.menu,
.standart-grau ul.nav {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

/* ---------- Menüpunkt als Button (Standard = grau) ---------- */
.standart-grau .el-nav > li > a,
.standart-grau .uk-nav > li > a,
.standart-grau ul.mod-menu > li > a,
.standart-grau ul.menu > li > a,
.standart-grau ul.nav > li > a {
  display: block !important;
  padding: 12px 18px !important;
  border-radius: 10px !important;

  background-color: #9aa0a6 !important; /* grau */
  background-image: none !important;
  color: #ffffff !important;

  text-decoration: none !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35) !important;
}

/* ---------- Trennlinie zwischen Buttons ---------- */
.standart-grau .el-nav > li + li,
.standart-grau .uk-nav > li + li,
.standart-grau ul.mod-menu > li + li,
.standart-grau ul.menu > li + li,
.standart-grau ul.nav > li + li {
  border-top: 1px solid rgba(255,255,255,.9) !important;
  margin-top: 0 !important;
}

/* ---------- Hover ---------- */
.standart-grau .el-nav > li > a:hover,
.standart-grau .uk-nav > li > a:hover,
.standart-grau ul.mod-menu > li > a:hover,
.standart-grau ul.menu > li > a:hover,
.standart-grau ul.nav > li > a:hover {
  background-color: #8e949a !important;
}

/* ---------- Aktiver Menüpunkt (grau) ---------- */
.standart-grau .el-nav > li.uk-active > a,
.standart-grau .el-nav > li.active > a,
.standart-grau .el-nav > li.current > a,
.standart-grau .uk-nav > li.uk-active > a,
.standart-grau .uk-nav > li.active > a,
.standart-grau .uk-nav > li.current > a,
.standart-grau ul.mod-menu > li.active > a,
.standart-grau ul.mod-menu > li.current > a,
.standart-grau ul.menu > li.active > a,
.standart-grau ul.menu > li.current > a,
.standart-grau a[aria-current="page"] {
  background-color: #5C6167 !important;
  color: #ffffff !important;
}

/* =========================================
   MODULE Footer Modul
   "DAS WICHTIGSTE IN Kürze" "Kontakt" Farbsteuerung
   ========================================= */

/* =========================================
   Modul bg-standart – uk-section-primary Override
   ========================================= */

.bg-standart.uk-section-primary,
.bg-standart .uk-section-primary {
  background-color: #2C3A43 !important;
}

.bg-standart {
  --uk-inverse: light;
}

   
   
/* =========================================
   Modul  bg-gipser – uk-section-primary Override
   ========================================= */

.bg-gipser.uk-section-primary,
.bg-gipser .uk-section-primary {
  background-color: #B21226 !important;
}

.bg-gipser {
  --uk-inverse: light;
}


/* =========================================
   Modul bg-fassade – uk-section-primary Override
   Farbe: #2C3A43
   ========================================= */

.bg-fassade.uk-section-primary,
.bg-fassade .uk-section-primary {
  background-color: #2C3A43 !important;
}
.bg-fassade {
  --uk-inverse: light;
}

/* =========================================
   Modul bg-parkett – uk-section-primary Override
   ========================================= */

.bg-parkett.uk-section-primary,
.bg-parkett .uk-section-primary {
  background-color: #5C6167 !important;
}

.bg-parkett {
  --uk-inverse: light;
}

/* =========================================
   Buttons – Override nach Menü Klasse
   ========================================= */

/* =========================================
   Buttons – Override für bg-standart
   Farbe: #2C3A43
   ========================================= */

.bg-standart .uk-button-primary,
.bg-standart .btn-primary,
.bg-standart .btn-info,
.bg-standart .btn-success {
  background-color: #2C3A43 !important;
  color: #ffffff !important;
  border-color: transparent !important;
}


/* =========================================
   Buttons – Override für bg-gipser
   Farbe: #B21226
   ========================================= */

.bg-gipser .uk-button-primary,
.bg-gipser .btn-primary,
.bg-gipser .btn-info,
.bg-gipser .btn-success {
  background-color: #B21226 !important;
  color: #ffffff !important;
  border-color: transparent !important;
}

.bg-gipser .uk-button-primary:hover,
.bg-gipser .btn-primary:hover,
.bg-gipser .btn-info:hover,
.bg-gipser .btn-success:hover {
  background-color: #9f1021 !important; /* leicht dunkler */
}

/* =========================================
   Buttons – Override für bg-fassade
   Farbe: #2C3A43
   ========================================= */

.bg-fassade .uk-button-primary,
.bg-fassade .btn-primary,
.bg-fassade .btn-info,
.bg-fassade .btn-success {
  background-color: #2C3A43 !important;
  color: #ffffff !important;
  border-color: transparent !important;
}

.bg-fassade .uk-button-primary:hover,
.bg-fassade .btn-primary:hover,
.bg-fassade .btn-info:hover,
.bg-fassade .btn-success:hover {
  background-color: #1f2a31 !important; /* leicht dunkler */
}

/* =========================================
   Buttons – Override für bg-parkett
   Farbe: #5C6167
   ========================================= */

.bg-parkett .uk-button-primary,
.bg-parkett .btn-primary,
.bg-parkett .btn-info,
.bg-parkett .btn-success {
  background-color: #5C6167 !important;
  color: #ffffff !important;
  border-color: transparent !important;
}

.bg-parkett .uk-button-primary:hover,
.bg-parkett .btn-primary:hover,
.bg-parkett .btn-info:hover,
.bg-parkett .btn-success:hover {
  background-color: #4b4f53 !important;
}