:root {
    --dark-color: #040506;
    --light-color: #f9f9fb;
    --main-background: #f9f9fb;
    --primary-background: /*#73a695*/ #0E5C02;
    --primary-textColor: #ffffff;
    --secondary-background: #0E5C02;
    --secondary-textColor: #ffffff;
    --secondary-color:  #f9f9fb;
    --third-background: #f3e5af;
    --accent-background: #0E5C02;
    --accent-textColor: #ffffff;
    --primary-gradient: linear-gradient(180deg, #fae9b0, #edf0f5);
    --secondary-gradient: linear-gradient(180deg, #fae9b0, #edf0f5);
}
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(--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(--main-background); /* border color of your cards * Latest Posts!!!! */
    border-radius: 0; /* border radius of your cards */
    background-color: var(--main-background); /* background color of your cards */
    box-shadow: 12px 4px 18px 0px rgba(0,0,0,0.35);
    -webkit-box-shadow: 12px 4px 18px 0px rgba(0,0,0,0.35);
    -moz-box-shadow: 12px 4px 18px 0px rgba(0,0,0,0.35);
    padding: 10px 10px 10px 10px;
}
.card2 {
    border: 1px solid var(--main-background); /* border color of your cards * Latest Posts!!!! TEST */
    border-radius: 0; /* border radius of your cards */
    background-color: var(--main-background); /* background color of your cards */
    box-shadow: 12px 4px 18px 0px rgba(0,0,0,0.35);
    -webkit-box-shadow: 12px 4px 18px 0px rgba(0,0,0,0.35);
    -moz-box-shadow: 12px 4px 18px 0px rgba(0,0,0,0.35);
    padding: 00px 00px 00px 00px;
}
.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: rgb(2,0,36);
    background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(67,142,139,1) 23%, rgba(255,235,177,1) 100%); */
    background-color: var(--main-background); /* background color of your card bodies (Joomla Modules) - Willkommen */
    border-bottom: 0px 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: rgb(2,0,36);
    background: linear-gradient(90deg, rgba(14,92,2,100) 0%, rgba(87,199,133,100) 51%, rgba(247,247,25,80) 100%);
    /*background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(67,142,139,1) 23%, rgba(255,235,177,1) 100%);*/
    /*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 */
}
.header {
    background: rgb(2,0,36);
    background: linear-gradient(90deg, rgba(14,92,2,100) 0%, rgba(87,199,133,100) 51%, rgba(247,247,25,80) 100%);
    /*background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(67,142,139,1) 23%, rgba(255,235,177,1) 100%)*/;
    }

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

.article-wraper { /*latest post*/
    height: 100%;
    padding-bottom: 30px;
    padding-left: 3%;
    padding-right: 3%;
  }

.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);
}

@media (max-width: 768 px) {
.ausblenden {
  display: none;}
  }
/* my blog pictures */
.blog-item .item-image img {
  text-align: center;
  display: block;
  justify-content: center;
  align-items: center;
  width: 350px;
  height: 250px;
  object-fit: cover;
  margin: 25px;
}
.text-rg-img-center {
    text-align: center;
}
.boxed .blog-item {
  border-top: 0px;
  box-shadow:0 0 2px #3339421a,0 2px 5px #33394214,0 5px 15px #33394214,inset 0 3px 0 var(--main-background);
  background-color:#fff
}
.blog-item {
  border-top: 0px;
}
.bilder {

   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
    border-radius: 5px;
    border: 1px solid var(--main-background);
}
}