/* adapt font to Myriad Pro */

@font-face {
   font-family:'MyriadPro';
   font-style: normal;
   font-weight: 400;
   src: url(./user_fonts/MyriadPro-Regular.otf) format('opentype');
}

body {
    font-family: 'MyriadPro', "Helvetica Neue", Helvetica, Arial, sans-serif;
}


h1,.h1,
h2,.h2,
h3,.h3,
h4,.h4,
h5,.h5,
h6,.h6,
body,.body {
	font-family: 'MyriadPro', "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-display:swap;
	
}

input,
button,
select,
textarea {
	font-family: 'MyriadPro', "Helvetica Neue", Helvetica, Arial, sans-serif;
	
}

code,
pre {
	font-family: 'MyriadPro', Monaco, Menlo, Consolas, "Courier New", monospace;
	
}

.navbar-search .search-query {
	font-family: 'MyriadPro', "Helvetica Neue", Helvetica, Arial, sans-serif;
	
}




/* 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 */

/*  colour scheme from logo
00612D -- green
89BC0F -- lime
C5B699 -- light grey brown
C5B699 -- soft brown
C5B699 -- font, grey
00612E -- font green


*/
		
:root {
	--lightgreen: #89BC0F;
  	--grey: #545655;
    --white_alt: #E5EBE1;
    --darkgreen: #00612E;
    --lightbrown: #C5B699;
    --white: #FFFFFF;


    --dark-color: var(--darkgreen);
    --light-color: var(--lightgreen);

    --main-color: var(--dark-color);
    --main-background: var(--white);

    --primary-background: var(--white);
    --primary-textColor:  var(--darkgreen);
    --secondary-background: var(--darkgreen);
    --secondary-textColor: var(--lightgreen);

    --accent-background: var(--lightgreen);
    --accent-textColor: var(--lightbrown);
    --primary-gradient: linear-gradient(270deg, var(--lightgreen), var(--darkgreen));
    --secondary-gradient: linear-gradient(180deg, var(--darkgreen), var(--lightgreen));
    --menue-gradient: linear-gradient(90deg, var(--darkgreen), var(--lightgreen));
        
	--link-color: var(--grey);
}

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

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

.container-header {
  background-color: var(--lightgreen); /* Solid background of your header */
  background-image: var(--menue-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: 0px 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-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(--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(--primary-background); /* background color of your footer */
  background-image: none;  /* 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(--white); /* background color of your dropdown menu */
  border: 1px solid var(--secondary-background); /* border color of your dropdown menu */
  color: var(--white); /* text color of your dropdown menu */
}

.metismenu.mod-menu .metismenu-item > ul a {
  color: var(--secondary-textcolor); /* 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);
}




/* for background image
*/
body {
  position: relative;
  isolation: isolate;
  background-color: transparent;
}

body::before {
  content: "";
  position: fixed;
  inset: 0% 0% 12% 0%;
  z-index: -1;
  pointer-events: none;
  background: url("../images/Mutter_3.svg") ;
  background-repeat: no-repeat;
  background-position: bottom center;
  background-size: min(80vw, 130vh, 1920px) auto;
  animation: pattern-zoom 32s ease-in-out infinite alternate;
}

@keyframes pattern-zoom {
  from { transform: scale(1); }
  to   { transform: scale(1.12); }
}

@media (prefers-reduced-motion: reduce) {
  body::before {
    animation: none;
  }
}
ul.custom-bullet {
    list-style-type: none; /* Standard-Punkt ausblenden */
    padding-left: 20px;    /* Platz für die Grafik schaffen */
}

ul.custom-bullet li {
    background-image: url('../images/Bullet1.svg'); /* Pfad zu Ihrer Grafik */
    background-repeat: no-repeat;
	background-size: 14px 14px;
    background-position: 0 5px; /* Position an den Text anpassen */
    padding-left: 25px; /* Abstand zwischen Grafik und Text */
}