/* Made with help of colours.joomla.com */
		/* If you feel like it, you can help support */
        /* me by donating to paypal@coolcat-creations.com or even just */
		/* paying it forward and helping out another Joomler in need. */
		/* Either way, have a great day! */


		/* new color variables */
        :root {
            --dark-color: #1B2739;
            --light-color:#FCFDFF;
            --main-background: #e0b4cc;
            /*--main-background-bild: url('/images/bg-verlauf-r3.jpg') no-repeat fixed top important;*/
            --primary-background: #732852;
	        --primary-textColor: #FCFDFF;
            --secondary-background: #c781a8;
            --secondary-textColor: #FCFDFF;
            --primary-card-background-header: #590f38;
            --accent-background: #c781a8;
            --accent-textColor: #FFFFFF;
            --primary-gradient: linear-gradient(180deg, #732852, #281B1E);
            --secondary-gradient: linear-gradient(180deg, #732852, #c781a8);
        }

		body {
            background: var(--main-background); 		/* background of your website */
          /*background: var(--main-background-bild); */
            color: var(--main-color); 		/* color of your website */
        }

        a {
            color: var(--primary-background); /* color of your links */
        }

/*.cool: a {
  color: var(--primary-background);
  box-shadow: inset 0 -3px 0 -1px grey;
  padding: .25em 0;
  text-decoration: none;
  transition: all .5s;
}
.cool: hover, focus {
  box-shadow: inset 0 -30px 0 white;
}*/
        .container-header {
            background-color: var(--primary-background); /* Solid background of your header */
            background-image: var(--primary-gradient);  /* Set to none if you want to disable the gradient */
        }


        .mod-articlesnews-horizontal li, .no-card .newsflash-horiz li {
            background-color: var(--primary-background); /* Solid background of your articlesnews or newsflash modules */
            color: var(--primary-color);  /* Color of your articlesnews or newsflash modules */
			border: 1px solid var(--primary-background); /* Border of your articlesnews or newsflash modules */
        }

        .btn.btn-primary {
            background-color: var(--primary-background); /* background of your primary buttons */
            border-color: var(--primary-background); /* border color of your primary buttons */
            color: var(--primary-textColor); /* text color of your primary buttons */
        }

        .mod-articlesnews-horizontal li .btn.btn-secondary, .no-card .newsflash-horiz li .btn.btn-secondary {
            background-color: var(--accent-background); /* background of your primary buttons */
            border-color: var(--accent-background); /* border color of your primary buttons */
            color: var(--dark-color); /* text color of your primary buttons */
        }

        .btn.btn-secondary {
            background-color: var(--secondary-background); /* background of your secondary buttons */
            border-color: var(--secondary-background); /* border color of your secondary buttons */
            color: var(--secondary-textColor); /* text color of your secondary buttons */
        }

        .bg-info {
            color: var(--accent-textColor);
            background-color: var(--accent-background) !important;
        }

        .card {
            border: 1px solid var(--primary-background); /* border color of your cards */
	        border-radius: 0; /* border radius of your cards */
	        background-color: var(--primary-background); /* background color of your cards */
        }

        .card-header {
            background-color: var(--primary-card-background-header); /* background color of your card headers */
            border-bottom: 1px solid var(--primary-background); /* border color of your card headers */
            color: var(--primary-textColor); /* text color of your card headers */
            font-family: "comic sans ms", serif;
            font-size: 16 px;
        }

        .card-body {
            background-color: var(--primary-background); /* background color of your card bodies (Joomla Modules) */
            border-bottom: 3px solid var(--accent-background); /* border color of your card bodies */
            color: var(--primary-textColor); /* text color of your card bodies */
        }

        .card-body a {
            color: var(--primary-textColor); /* text color of your card body links */
        }

        .card.secondary {
            border: 1px solid var(--secondary-background); /* border color of your secondary cards */
            border-radius: 0; /* border radius of your secondary cards */
            background-color: var(--secondary-background); /* background color of your secondary cards */
        }

        .card-header.secondary {
            background-color: var(--secondary-background); /* background color of your secondary card headers */
            border-bottom: 1px solid var(--secondary-background); /* border color of your  secondary card headers */
            color: var(--secondary-textColor); /* text color of your card headers */
        }

        .card-body.secondary {
            background-color: var(--secondary-background); /* background color of your secondary card bodies (Joomla Modules) */
            border-bottom: 3px solid var(--secondary-background); /* border color of your secondary card bodies */
            color: var(--secondary-textColor); /* text color of your secondary card bodies */
        }

        .card-body.secondary a {
            color: var(--secondary-textColor); /* text color of your secondary card body links */
        }

        .plg_system_webauthn_login_button svg {
            fill: var(--primary-color); /* color of your webauthn login button icon */
        }

        .footer {
            background-color: var(--secondary-background); /* background color of your footer */
            background-image: var(--secondary-gradient);  /* Set to none if you want to disable the gradient */
            color: var(--secondary-color); /* text color of your footer */
        }

        ::selection {
	        background-color: var(--accent-background); /* background color of your text selection */
			color: var(--dark-color); /* text color of your text selection */
        }

        .metismenu.mod-menu .metismenu-item > ul {
			background-color: var(--secondary-background); /* background color of your dropdown menu */
			border: 1px solid var(--secondary-background); /* border color of your dropdown menu */
	        color: var(--secondary-color); /* text color of your dropdown menu */
		}

        .metismenu.mod-menu .metismenu-item > ul a {
	        color: var(--secondary-color); /* text color of your dropdown menu links */
        }

        .main-top.card.colorpicker-module {
	        background-color: var(--main-background); /* if you want to change the background color of a specific module add a Module Class in the advanced module settings and define it in your css */
	        color: var(--dark-color); /* if you want to change the background color of a specific module add a Module Class in the advanced module settings and define it in your css */
            border: none;
        }

        .colorpicker-module .card-header, .colorpicker-module .card-body  {
            background-color: var(--main-background); /* if you want to change the background color of a specific module add a Module Class in the advanced module settings and define it in your css */
            color: var(--dark-color); /* if you want to change the background color of a specific module add a Module Class in the advanced module settings and define it in your css */
        }

        .article-info {
	        background-color: var(--main-background); /* background color of your article info */
	        padding: 15px 20px; /* padding of your article info */
        }

        .article-info dd {
	        color: var(--main-color); /* text color of your article info */
		}

        .btn.btn-info {
	        background-color: var(--primary-background); /* background color of your info buttons */
            border: 1px solid var(--main-background); /* border width, style and color of your info buttons */
	        color: var(--primary-color); /* text color of your info buttons */
        }

        .btn-primary .icon-white:before {
	        color: var(--primary-textColor); /* text color of your info buttons in primary */
        }

        .btn-secondary .icon-white:before {
            color: var(--secondary-textColor); /* text color of your info buttons in primary */
        }

        .form-control {
	        background-color: var(--main-background); /* background color of your form controls */
	        border: 1px solid var(--main-color); /* border color of your form controls */
	        color: var(--primary-color); /* text color of your form controls */
	        border-radius: 0; /* border radius of your form controls */
        }

        label {
	        font-weight: bold; /* font weight of your labels */
        }

        /* generate a clamp font size for h1, in small viewports it should have 18px in large viewports 28px */
		h1, .h1 {
			font-size: clamp(18px, 5vw, 28px);
		}

		/* generate a clamp font size for h2, in small viewports it should have 16px in large viewports 26px */
		h2, .h2 {
			font-size: clamp(16px, 5vw, 26px);
		}

		/* generate a clamp font size for h3, in small viewports it should have 14px in large viewports 24px */
		h3, .h3 {
			font-size: clamp(14px, 5vw, 24px);
		}

		/* generate a clamp font size for h4, in small viewports it should have 12px in large viewports 22px */
		h4, .h4 {
			font-size: clamp(12px, 5vw, 22px);
		}

             .pgb_background {
           background: transparent!important;
           }	
          
          footer .grid-child .footermodul {width:100%;margin:0 auto auto 0;}
          
          @media (max-width: 1320px) {
          
           footer .grid-child .footermodul {width:100%;margin:0 auto auto 15px;}}

.class-buchung-R {
  background-color: #e0b4cc;
  color:#000000!important;   /* Farbe  */
  font-size:18px;  /* Größe  */
  font-weight: bold; /*Fett*/
  font-family:comic sans ms;/* Schriftart */
  font-style:italic; /* Style */
  border: 1px solid #c781a8; 
  border-radius: 10px;
  padding: 10px 20px; 
  text-align: left; 
  text-decoration: none; 
  width: 220px; 
  display: inline-block;
  cursor: pointer; 
  /*text-indent:1.5em; /* Einrückung */
} 
.class-buchung-R:hover {
  background-color: #FFFFFF; 
} 
.img-ext
{
  background: transparent, no-repeat right;
}
.mod-menu li:hover > ul {
  display: block !important;
}

@media only screen and (min-width: 600px){
.container-nav {
padding:0px 0px; !important;justify-content: center !important; /*Menüband center hamburger left*/}}

.container-header .mod-menu {
  flex-direction: column !important;
}
/*
.container-header .navbar-toggler {
  width: 65px;
  height: 45px;
  background-color: #b94800; 
}

@media screen and (max-width: 600px) {
.container-nav {
    display: initial;
  }
.myleftmenu {
    display: none;
  }
}
@media not screen and (max-width: 600px) {
.container-nav {
    display: none;
  }
.myleftmenu {
    display: initial;
  }
}
*/
.form-control {
  background-color: #FFFFFF;
  border: 2px solid #525050;
  color: var(--secondary-color);
}

.visform input: {
background:  #FFFFFF
}
.visform input:not(.btn) {
background:  #FFFFFF
}
.visform select {
 background:  #FFFFFF
}
.visform textarea {
background:  #FFFFFF
}
.btn {
background: #732852;
  color: white;
}
.btn:hover {
 background: #525050;
  color: white;
}
/* externe Links mit Icon kennzeichnen */
a[href^="http://"]:not([href*="bienes-ferienwohnungen.de"]):after,
a[href^="https://"]:not([href*="bienes-ferienwohnungen.de"]):after {
content: url('/images/ICONS/external-link.png');    padding-left:4px;
}