/* 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: #4687BE;             /* Schriftfarbe dunkel */
            --light-color:#F0F0FF;             /* Schriftfarbe hell */
            --main-background: #F5F5F5;        /* Farbe des Content-Backgrounds */
            --primary-background: #4687BE;     /* Farbe des Primary-Buttons und Kopf */
	        --primary-textColor: #F0F0FF;      /* Text-Farbe des Primary-Buttons */
            --secondary-background: #3687BE;   /* Farbe des Secondary-Buttons */
            --secondary-textColor: #F5F5F5;    /* Text-Farbe des Secondary-Buttons */
            --accent-background: #6666FF;
            --accent-textColor: #FCFC44;
            --primary-gradient: linear-gradient(180deg, #4687BE, #4687BE);    /* Hintergrund-Farbe im Kopf */
            --secondary-gradient: linear-gradient(180deg, #F0F0F0, #E5E5E5);  /* Hintergrund-Farbe im Fuß */


        }

input {
  box-sizing: border-box;
  border: 1px solid grey;
}

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

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

        .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(--primary-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(--primary-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(--dark-color); /* 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-background); /* 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 */
        }

        .card-body {
            background-color: var(--primary-background); /* background color of your card bodies (Joomla Modules) */
            border-bottom: 3px solid var(--primary-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(--primary-background); /* border color of your secondary cards */
            border-radius: 1px; /* 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(--primary-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(--primary-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(--primary-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: 1px solid var(--primary-background);
        }

        .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(--primary-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(--primary-background); /* 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);
		}




#textlist690 { max-width: 690px; margin: 0 auto; }
#teamlist { max-width: 1200px; margin: 0 auto; }
.popover-content { min-height: 33px; }
.finder-selects { margin: 0 15px 15px 0; }
.fcontainer { display: -webkit-flex; display: flex; margin: auto; align-content: space-between; flex-wrap: wrap; } 
.fcontainerc { display: -webkit-flex; display: flex; justify-content: center; align-content: space-around; flex-wrap: wrap; }
.finitial152 { -webkit-flex: initial; flex: initial; width: 142px; min-width: 122px; max-width: 152px; }
.finitial200 { -webkit-flex: initial; flex: initial; width : 200px; min-width: 100px; }
.finitial220 { -webkit-flex: 1; flex: 1; margin: 5px; background: #ffffff; width: 220px; min-width: 220px; max-width: 220px; } 
.finitial250 { -webkit-flex: 1; flex: 1; margin: 5px; background: #ffffff; width: 250px; min-width: 250px; max-width: 250px; } 
.finitial300 { -webkit-flex: initial; flex: initial; width: 300px; min-width: 20px; align-items: flex-start; }
.finitial400 { -webkit-flex: initial; flex: initial; width: 400px; min-width: 300px; margin: 10px; align-items: flex-start; }
.finitial500 { -webkit-flex: initial; flex: initial; width: 450px; min-width: 200px; margin: 10px; align-items: flex-start; }
.finitial500a {-webkit-flex: initial; flex: initial; width: 500px; min-width: 400px; margin-top: 5px; margin-right: 5px; align-items: flex-start; }
.finitial500b {-webkit-flex: initial; flex: initial; width: 500px; min-width: 260px; margin-top: 5px; margin-right: 5px; align-items: flex-start; }
.finitial700 { -webkit-flex: initial; flex: initial; width: 700px; min-width: 200px; }
.finitial1pl {-webkit-flex: initial; flex: initial; min-width: 200px; padding-right: 10px; padding-bottom: 5px; } 
.finitial2pl {-webkit-flex: initial; flex: initial; width: 570px; min-width: 200px; padding-right: 10px; padding-bottom: 5px; } 
.finitial3pl {-webkit-flex: initial; flex: initial; width: 390px; min-width: 200px; padding-right: 10px; padding-bottom: 5px; }
.finitial3plbl {-webkit-flex: initial; flex: initial; width: 390px; min-width: 200px; padding-right: 10px; padding-bottom: 5px; background-color:#555555; }
.finitial2sp {display: flex; justify-content: space-around; flex-wrap: wrap; margin-right: 10px; margin-bottom: 5px; } 
.finitial2sp > div { flex-grow: 1; flex-shrink: 1; margin: 10px; }
.finitialbot {display:flex; width: 290px; align-items:center; height: 700px; ; line-height: 1.2;}
.finitialkal {display:flex; width: 100%; align-items:top; height: 500px; ; line-height: 1.2; overflow: scroll;}
.flex1_200 { -webkit-flex: 1; flex: 1; margin: 5px; min-width: 200px; } 
.flex1_220-245 { -webkit-flex: 1; flex: 1; margin-top: 5px; margin-right: 5px; background: #ffffff; width: 245px; max-width: 245px; min-width: 220px; } 
.flex1_240-495 { -webkit-flex: 1; flex: 1; margin-top: 5px; margin-right: 5px; background: #ffffff; width: 495px; max-width: 495px; min-width: 240px; } 
.flex1_260-330 { -webkit-flex: 1; flex: 1; margin-top: 5px; margin-right: 5px; background: #ffffff; width: 330px; max-width: 330px; min-width: 260px; }
.flex1_330 { -webkit-flex: 1; flex: 1; margin-top: 5px; margin-right: 5px; background: #ffffff; width: 330px; max-width: 380px; min-width: 260px; }
.flex1_330f { -webkit-flex: 1; flex: 1; margin-top: 5px; margin-right: 5px; background: #ffffff; width: 330px; max-width: 330px; min-width: 330px; }
.flex1_320 { -webkit-flex: 1; flex: 1; margin-top: 5px; padding-right: 5px; padding-left: 5px; background: #ffffff; width: 330px; max-width: 350px; min-width: 320px; }
.flex1_350 { -webkit-flex: 1; flex: 1; margin-top: 5px; width: 330px; max-width: 380px; min-width: 320px; }
.flex1_75-330 { -webkit-flex: 1; flex: 1; margin-top: 2px; margin-left: 0px; margin-right: 0px; margin-bottom: 20px; background: #ffffff; width: 330px; max-width: 330px; min-width: 75px; }
.flex2_75-330 { -webkit-flex: 1; flex: 1; margin-top: 2px; margin-left: 0px; margin-right: 0px; margin-bottom: 1px; background: #ffffff; width: 330px; max-width: 330px; min-width: 75px; }
.fnone { -webkit-flex: none; flex: none; width: 200px; }
.flex1 { -webkit-flex: 1; flex: 1; margin: 6px; background: #ffffff; }
.flex1w { -webkit-flex: 1; flex: 1; margin: 2px; background: #ffffff; }
.flex1h { -webkit-flex: 1; flex: 1; margin: 6px; background: #f5f5f5; }
.flex1d { -webkit-flex: 1; flex: 1; margin: 6px; background: #eeeeee; }
.flex2w { -webkit-flex: 2; flex: 2; margin: 6px; background: #ffffff; }
.flex2h { -webkit-flex: 2; flex: 2; margin: 6px; background: #f5f5f5; }
.flex2d { -webkit-flex: 2; flex: 2; margin: 6px; background: #eeeeee; }
.flex3w { -webkit-flex: 3; flex: 3; margin: 6px; background: #ffffff; }
.flex1_grau             {              -webkit-flex: 1;              flex: 1;              padding-left: 4px;              padding-right: 4px;              border: 0px solid white;              border-radius: 4px;              background-image: linear-gradient(#f8f8f8, #eeeeee);            } 
.grow img { height: 300px; width: 300px; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; -ms-transition: all 1s ease; transition: all 1s ease; }
.grow img:hover { width: 400px; height: 400px; }
.uebers { border: 0px solid gray; border-radius: 7px; padding: 8px; margin-top: 20px; margin-bottom: 20px; background-image: linear-gradient(#f8f8f8, #dddddd); font-family: Arial, Sans-serif; font-size: 14px; font-weight: bold; }
.uebersn { border: 0px solid gray; border-radius: 7px; padding: 8px; margin-top: 20px; margin-bottom: 20px; background-image: linear-gradient(#f8f8f8, #dddddd); font-family: Arial, Sans-serif; font-size: 14px; font-weight: normal; }
.uebersk { border: 0px solid gray; border-radius: 7px; padding: 8px; margin-top: 20px; margin-bottom: 20px; background-image: linear-gradient(#f8f8f8, #dddddd); font-family: Arial, Sans-serif; font-size: 12px; font-weight: normal; }
.berlist { border: 0px solid white; border-radius: 7px; padding: 0px; margin: 0px; background-image: linear-gradient(#f8f8f8, #eeeeee); font-family: Arial, Sans-serif; font-size: 14px; font-weight: normal; }
.einleit { border: 0px solid gray; border-radius: 7px; padding-left: 6px; padding-right: 6px; margin-top: 2px; margin-bottom: 2px; background-image: linear-gradient(#f8f8f8, #C9E5F7); font-family: Arial, Sans-serif; font-size: 16px; font-weight: normal; }
.lm-card-button { display:none; }
.grid-container { display: grid; grid-template-columns: auto auto auto auto; grid-gap: 10px; background-color: #ffffff; padding: 10px; }
.grid-container1 { display: grid; grid-template-columns: auto; background-color: #ffffff; }
.grid-container2 { display: grid; grid-template-columns: 50% 50%; min-width: 400px; grid-gap: 10px; background-color: #ffffff; padding: 10px; }
.grid-container3 { display: grid; grid-template-columns: 33% 33% 33%; grid-gap: 10px; background-color: #ffffff; padding: 10px; }
.grid-container4 { display: grid; grid-template-columns: 25% 25% 25% 25%; grid-gap: 10px; background-color: #ffffff; padding: 10px; }
.grid-container5 { display: grid; grid-template-columns: 20% 20% 20% 20% 20%; grid-gap: 10px; background-color: #ffffff; padding: 10px; }
.grid-container6 { display: grid; grid-template-columns: auto auto auto auto auto auto; grid-gap: 10px; background-color: #ffffff; padding: 10px; }
.grid-container8 { display: grid; grid-template-columns: auto auto auto auto auto auto auto auto; grid-gap: 10px; background-color: #ffffff; padding: 10px; }
.grid-containerz { display: grid; grid-template-columns: 15% 60% 25%; grid-gap: 10px; background-color: #ffffff; padding: 10px; }
.link { border: 0px solid gray; border-radius: 7px; padding: 8px; margin-top: 1px; margin-left: 1px; margin-right: 1px; margin-bottom: 1px; background-image: linear-gradient(#f8f8f8, #dddddd); font-family: Arial, Sans-serif; font-size: 14px; font-weight: bold; }
.menubluebutt {background-color: #31CBFF; height: 30px; border: 1px solid gray; border-radius: 6px; padding-right: 6px; padding-left: 6px; margin-top: 10px; margin-bottom: 10px; font-family: Arial, Sans-serif; color: #ffffff; font-size: 15px; font-weight: bold;}
.menugreenbutt {background-color: #12E008; height: 30px; border: 1px solid gray; border-radius: 6px; padding-right: 6px; padding-left: 6px; margin-top: 10px; margin-bottom: 10px; font-family: Arial, Sans-serif; color: #ffffff; font-size: 15px; font-weight: bold;}
.menuredbutt {background-color: #f44336; height: 30px; border: 1px solid gray; border-radius: 6px; padding-right: 6px; padding-left: 6px; margin-top: 10px; margin-bottom: 10px; font-family: Arial, Sans-serif; color: #ffffff; font-size: 15px; font-weight: bold;}
.menuyelbutt {background-color: #FAD85A; height: 30px; border: 1px solid gray; border-radius: 6px; padding-right: 6px; padding-left: 6px; margin-top: 10px; margin-bottom: 10px; font-family: Arial, Sans-serif; color: #1F25FC; font-size: 15px; font-weight: bold;}
.arrowyelbutt {background-color: #FAD85A; height: 30px; border: 1px solid gray; border-radius: 6px; padding-right: 4px; padding-left: 4px; margin-top: 0px; padding-bottom: 4px; font-family: Arial, Sans-serif; color: #1F25FC; font-size: 18px; font-weight: bold;}
.squareredbutt {background-color: #DB0AB8; height: 30px; border: 1px solid gray; border-radius: 6px; padding-right: 4px; padding-left: 4px; margin-top: 0px; padding-bottom: 0px; font-family: Arial, Sans-serif; color: #1F25FC; font-size: 18px; font-weight: bold;}
.squarebluebutt {background-color: #41E9F7; height: 30px; border: 1px solid gray; border-radius: 6px; padding-right: 4px; padding-left: 4px; margin-top: 0px; padding-bottom: 0px; font-family: Arial, Sans-serif; color: #1F25FC; font-size: 18px; font-weight: bold;}
.bluebutt {background-color: #3F9BDA; height: 26px; border: 1px solid gray; border-radius: 6px; padding-right: 6px; padding-left: 6px; margin-top: 10px; margin-bottom: 10px; font-family: Arial, Sans-serif; color: #ffffff; font-size: 14px; font-weight: bold;}
.redbutt {background-color: #AF6762; height: 26px; border: 1px solid gray; border-radius: 6px; padding-right: 6px; padding-left: 6px; margin-top: 10px; margin-bottom: 10px; font-family: Arial, Sans-serif; color: #ffffff; font-size: 14px; font-weight: bold;}
.yearbutt {background-color: #FC1E13; height: 26px; border: 1px solid gray; border-radius: 6px; padding-right: 6px; padding-left: 6px; margin-top: 10px; margin-bottom: 10px; font-family: Arial, Sans-serif; color: #ffffff; font-size: 14px; font-weight: bold;}
.greybutt {background-color: #747474; height: 26px; border: 1px solid gray; border-radius: 6px; padding-right: 6px; padding-left: 6px; margin-top: 10px; margin-bottom: 10px; font-family: Arial, Sans-serif; color: #ffffff; font-size: 14px; font-weight: bold;}
.greenbutt {background-color: #74A27C; height: 26px; border: 1px solid gray; border-radius: 6px; padding-right: 6px; padding-left: 6px; margin-top: 10px; margin-bottom: 10px; font-family: Arial, Sans-serif; color: #ffffff; font-size: 14px; font-weight: bold;}
.brownbutt {background-color: #D6892E; height: 26px; border: 1px solid gray; border-radius: 6px; padding-right: 6px; padding-left: 6px; margin-top: 10px; margin-bottom: 10px; font-family: Arial, Sans-serif; color: #ffffff; font-size: 14px; font-weight: bold;}
.button-blue {background-color: #2f87d1; height: 36px; border: 1px solid gray; border-radius: 6px; padding-right: 6px; padding-left: 6px; margin-top: 6px; margin-bottom: 6px; font-family: Arial, Sans-serif; color: #ffffff; font-size: 14px; font-weight: bold;}
.button-white {background-color: #ffffff; height: 36px; border: 1px solid gray; border-radius: 6px; padding-right: 6px; padding-left: 6px; margin-top: 6px; margin-bottom: 6px; font-family: Arial, Sans-serif; color: #000000; font-size: 14px; font-weight: bold;} 
.fuss-titel {margin-top: 6px; font-weight: bold; color: #583621; }
.grow { transition: all .5s ease-in-out; }
.grow:hover { transform: scale(1.05); }
.grow2 { transition: all .5s ease-in-out; }
.grow2:hover { transform: scale(2.00); }
.goodsearch {text-align: left;}
h1 { font-size: 26px; margin-top:8px; margin-bottom:8px; }
h2 { font-size: 22px; margin-top:6px; margin-bottom:6px; }
h3 { font-size: 20px; margin-top:6px; margin-bottom:6px; }
h4 { font-size: 18px; margin-top:4px; margin-bottom:4px; }
h5 { font-size: 17px; margin-top:4px; margin-bottom:4px; }
h6 { font-size: 16px; margin-top:4px; margin-bottom:4px; }
body { margin: 0px; padding: 0px; }