/** ******* Formatierung der Textelemente ******* **/

/* ** FARBEN ** */
/**
* helles Gelbgrün: 				#eff0e1;
(* helles Grün: #d8dbb8;)
* Standard Grün: 					#7a810a;
* dunkles Grün (Schrift): #5c6306
* helles grau : 					#dee2e6;
* dunkles grau (Schrift): #666666;

* Blau-Grau: 							#576A76;
* weißtürkis: 						#f7fffe; (beliebige Hintergründe)

**/

:root {
	--ueberschriften: #008e16; /** dunkles Schriftgrün **/
	--text: #576A76; /** Blau-Grau **/ 
	--link: #fe3094; /** pink **/
	--link_active: #576A76; /** Blau-Grau **/
	
	--akzent: #fe3094; /** pink **/ 
	--blasserAkzent: #fefcfd; /** blasses Pink **/ 
	--hellesMint: #edfefb; /** helles Mint **/
	--dunklesMint: #bcded8; /** dunkles Mint **/
	--BlauGrau: #576A76; /** Blau-Grau **/
	--dunklesGruen: #008e16; /** dunkles Schriftgrün **/
	--BlaetterGruen: #00bf18; /** helles Grün (logo_baum_krone Blätter) **/
	--gruenGelb: #a9e84e; /** Grüngelb (logo_baum_krone Baumstamm) **/
	
	--dunklesBlau: #073c91; /** dunkles Blau auch der Überschrift 2 Trennlinie **/
	
	--dunklesGruen: #008e16; /** dunkles Schriftgrün **/
	--dunklesGruen:  #008e16; /** dunkles Schriftgrün **/
	--hellesMint: #edfefb; /** helles Mint **/
	--dunklesMint: #bcded8; /** dunkles Mint **/
	
	--submenulink: #008e16; /** dunkles Schriftgrün **/
	--hellesMint: #edfefb; /** helles Mint **/
	--gruenGelb: #a9e84e; /** Grüngelb (logo_baum_krone Baumstamm) **/
	--BlaetterGruen: #00bf18; /** helles Grün (logo_baum_krone Blätter) **/
	
	--dunklesMint: #bcded8; /** dunkles Mint **/
	--BlaetterGruen: #00bf18; /** helles Grün (logo_baum_krone Blätter) **/
	--hellesMint: #edfefb; /** helles Mint **/
	--BlaetterGruen_bg: #bcded8; /** dunkles Mint **/
	--BlaetterGruen: #00bf18; /** helles Grün (logo_baum_krone Blätter) **/
	
	--dunklesGruen: #008e16; /** dunkles Schriftgrün **/

	
	
								--hauptfarbe: #008e00; 
								--nebenfarbe: #008e00;
								
								--center_bg: #f2fee8;
								
								--submenu_bg: #f2fee8;
								--dropdown_bg: #e9ecef;
								--linkfarbe: #073c91; /** dunkles Blau **/

												--linkfarbe2: #deffff; /** weißtürkis **/
								--linkhintergrund: #f9ecfe;
								--linkhintergrund2: #f9ecfe; 
												
												--linkaktiv: #576A76; /** Blau-Grau **/ 
					

	--fontsize_standard: 1.25rem;
	--fontsize_h4: 1.35rem; 
	--navbar_zeile: 1.75;
	--submenu_zeile: 1.5;
	
	--FontFamily: Arial, Verdana, Helvetica, sans-serif;
	/* --FontSize: 12px; */
	--FontColor: #373737;
	--LineHeight: 18px;
	--LetterSpacing: 0;
	
}


@media all
{
	* { 
		font-family: var(--FontFamily); 
		
		color: var(--FontColor);
		/* line-height: var(--LineHeight); */
		letter-spacing: var(--LetterSpacing); 
	}
}

/*** tx-typo3forum-pi1 ***/

.tx-typo3forum-pi1 a {
	font-size: var(--fontsize_h4);
	color: var(--dunklesGruen);
	font-weight: var(--bs-body-font-weight);
	 
}
.tx-typo3forum-pi1 div,
.tx-typo3forum-pi1 td { font-size: var(--fontsize_standard); }
	
.tx-typo3forum-pi1 div { text-align: left; } 
.tx-typo3forum-pi1 td { text-align: center; }




body {
  margin: 0;
  font-family: var(--bs-body-font-family);
  font-weight: var(--bs-body-font-weight);
  font-size: 1.1rem; 
  line-height: var(--bs-body-line-height);
  
  text-align: var(--bs-body-text-align);
  
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

a { color: var(--akzent); }
a:hover { color: var(--dunklesBlau); }

p, .center_content_right td p, b, strong { 
	/* font-size: 1.1rem;  */
	font-weight: 300 !important; 	
}
	
.text-justify {
  text-align: left !important;
}

				@media all and (min-width: 992px) {	
				.text-justify {
					text-align: justify !important;
					}
				}


	
	
/******* Formular (Anmeldung) *******/
form { margin-top: 25px; margin-bottom: 50px; }

label, .form-control, .form-control option, .add-on span, .btn { 
	/* font-size: 1.45rem;  */
	font-weight: 300 !important; 
	}	
	
.required { 
	color: var(--akzent); 
	/* font-size: 1.45rem;  */
	font-weight: 700 !important; 
	}
	
.add-on span { margin-left: 15px; }

.form-control option:active,
.form-control option:focus,
.form-control option:hover,
.form-control option:checked
/* .form-control option:checked::after  */
{ background-color: var(--akzent); }

/* [selected] { background-color: var(--akzent); } */

/* ::selection { background-color: var(--akzent); } */

/* select[multiple]:focus option:checked { */
/* background: background-color: var(--akzent); } */


input[type="checkbox"], input[type="radio"] { 
	height: var(--LineHeight); 
	width: var(--LineHeight);
	accent-color: var(--akzent);
}	

.btn-primary {
  --bs-btn-color: #fefcfd;
  --bs-btn-bg: #fe3094;
  --bs-btn-border-color: #fefcfd;
  --bs-btn-hover-color: #fe3094;
  --bs-btn-hover-bg: #fefcfd;
  --bs-btn-hover-border-color: #fe3094;
  --bs-btn-focus-shadow-rgb: 49,132,253;
  --bs-btn-active-color: #edfefb;
  --bs-btn-active-bg: #fe3094;
  --bs-btn-active-border-color: #fe3094;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #edfefb;
  --bs-btn-disabled-bg: #fefcfd;
  --bs-btn-disabled-border-color: #fefcfd;
}
	
	



/******* CENTER_CONTENT --> Überschriften *******/

H1, .h1 {
	font-size: calc(1.325rem + .9vw);
	font-weight: 400 !important;
	color: var(--akzent);
	text-align: center; 
	
	border-bottom: 2px solid var(--akzent);
}

H2, h2 button, .h2 {
	font-size: calc(1.325rem + .9vw);	
	font-weight: 700 !important;
	color: var(--dunklesGruen);
	text-align: left; 
	
	margin: 15px 0px 20px 0px; /* oben rechts unten links*/
	border-bottom: 2px solid var(--dunklesBlau);
}

H2 a {
	text-decoration: none;
}

/* H3, H3 A, .h3, .h3 a { */
H3, .h3 {
    font-size: calc(1rem + .6vw);
	
    font-weight: 700 !important;
	color: var(--dunklesGruen);
	
	margin: 0px 0px 0.3em 0px;
	padding: 0px 0px 0px 0px;
}

H4, H4 A, .h4, .h4 a {
	font-size: calc(1rem + .6vw);
	
	text-align: center; 
	color: var(--akzent);	
	
	margin: 0px 0px 0.3em 0px;
	padding: 0px 0px 0px 0px;
}

#teaser h4 {
	/* font-size: 1.1rem; */
	padding: 10px 10px 0px 10px;
	max-width: 100%;
}

H5, H5 A, .h5, .h5 a {
	font-size: calc(1rem + .6vw);	
	text-align: left; 
	color: var(--dunklesBlau);
	
	margin: 0px 0px 0.3em 0px;
	padding: 0px 0px 0px 0px;
}

p {
	margin: 0px 10px 0.3em 0px;
	padding: 0px 10px 0px 0px;
}
.ce-gallery figure {
   margin-right: 20px;
}

b, strong {	font-weight: 700 !important; }
.akzent, .akzent strong {	
	color: var(--akzent); 
	/* font-size: 1.1rem;  */
	}
.gruen, .gruen strong {	
	color: var(--dunklesGruen); 
	/* font-size: 1.1rem;  */
	}
	
.lb-data .lb-caption {
	color: var(--hellesMint);
	font-size: 1rem;
	line-height: var(--bs-body-line-height);
}



blockquote {
	border-left: 2px solid var(--dunklesBlau);
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0.3em 2em;
}
blockquote p {	color: var(--dunklesBlau); }


ul {
	list-style-type: disc;
}
li::marker {
  color: var(--akzent);
}


.no-bullets {
    list-style-type: none;
		padding-left: 0px;
}


/***** Typo3 EXT Cookie Constent Tool *****/
#klaro .klaro.we_cookie_consent .cookie-modal .purposes {
	display: none;
}

.klaro.we_cookie_consent .cookie-notice a {
	color: var(--akzent);
	text-decoration: none;
}
.klaro.we_cookie_consent .cookie-notice a:hover {
	color: var(--dunklesBlau);
}

#klaro .klaro.we_cookie_consent .cookie-notice:not(.cookie-modal-notice),
#klaro .klaro.we_cookie_consent .cookie-modal .cm-btn-danger,
#klaro .klaro.we_cookie_consent .cookie-modal .cm-btn.cm-btn-accept,
#klaro .klaro.we_cookie_consent .cookie-modal .cm-btn.cm-btn-accept-all {
  background: var(--blasserAkzent);
}

#klaro .klaro.we_cookie_consent .cookie-notice:not(.cookie-modal-notice) .cm-link, 
#klaro .klaro.we_cookie_consent .cookie-notice:not(.cookie-modal-notice) .cm-learn-more,
#klaro .klaro.we_cookie_consent .cookie-notice:not(.cookie-modal-notice) .cm-btn.cm-btn-danger,
#klaro .klaro.we_cookie_consent .cookie-notice:not(.cookie-modal-notice) .cm-btn.cm-btn-success {
  background: var(--hellesMint);
}
#klaro .klaro.we_cookie_consent .cookie-notice:not(.cookie-modal-notice) .cm-link:hover, 
#klaro .klaro.we_cookie_consent .cookie-notice:not(.cookie-modal-notice) .cm-learn-more:hover,
#klaro .klaro.we_cookie_consent .cookie-notice:not(.cookie-modal-notice) .cm-btn.cm-btn-danger:hover,
#klaro .klaro.we_cookie_consent .cookie-notice:not(.cookie-modal-notice) .cm-btn.cm-btn-success:hover,
#klaro .klaro.we_cookie_consent .cookie-modal .cm-btn-danger:hover,
#klaro .klaro.we_cookie_consent .cookie-modal .cm-btn.cm-btn-accept:hover,
#klaro .klaro.we_cookie_consent .cookie-modal .cm-btn.cm-btn-accept-all:hover {
  background: var(--dunklesMint);
  opacity: 1;
}

#klaro .klaro.we_cookie_consent .cookie-notice:not(.cookie-modal-notice) .cm-link ,
#klaro .klaro.we_cookie_consent .cookie-notice:not(.cookie-modal-notice) .cm-btn, 
#klaro .klaro.we_cookie_consent .cookie-notice:not(.cookie-modal-notice) .cm-btn-sm,
#klaro .klaro.we_cookie_consent .cookie-modal .cm-btn {
  border: 2px solid var(--akzent);
  border-radius: 4px;
}

#klaro .klaro.we_cookie_consent .cookie-notice:not(.cookie-modal-notice) .cm-link:hover,
#klaro .klaro.we_cookie_consent .cookie-notice:not(.cookie-modal-notice) .cm-btn:hover,
#klaro .klaro.we_cookie_consent .cookie-notice:not(.cookie-modal-notice) .cm-btn-sm:hover,
#klaro .klaro.we_cookie_consent .cookie-modal .cm-btn:hover {
  border: 2px solid var(--dunklesBlau);
  border-radius: 4px;
}


#klaro .klaro.we_cookie_consent .cookie-notice:not(.cookie-modal-notice) .cm-link::before,
#klaro .klaro.we_cookie_consent .cookie-notice:not(.cookie-modal-notice) .cm-btn.cm-btn-success::before,
#klaro .klaro.we_cookie_consent .cookie-notice:not(.cookie-modal-notice) .cm-btn.cm-btn-danger::before,
#klaro .klaro.we_cookie_consent .cookie-modal .cm-btn-danger::before,
#klaro .klaro.we_cookie_consent .cookie-modal .cm-btn.cm-btn-accept-all::before {
	margin-top: 0px;
	filter: invert(37%) sepia(45%) saturate(6446%) hue-rotate(312deg) brightness(101%) contrast(99%);
}

#klaro .klaro.we_cookie_consent .cookie-notice:not(.cookie-modal-notice) .cm-link:hover::before,
#klaro .klaro.we_cookie_consent .cookie-notice:not(.cookie-modal-notice) .cm-btn.cm-btn-success:hover::before,
#klaro .klaro.we_cookie_consent .cookie-notice:not(.cookie-modal-notice) .cm-btn.cm-btn-danger:hover::before, 
#klaro .klaro.we_cookie_consent .cookie-modal .cm-btn-danger:hover::before,
#klaro .klaro.we_cookie_consent .cookie-modal .cm-btn.cm-btn-accept-all:hover::before {
  filter: invert(12%) sepia(69%) saturate(3747%) hue-rotate(213deg) brightness(107%) contrast(95%);
}


.klaro.we_cookie_consent .cookie-modal .cm-modal.cm-klaro .cm-body {
  margin: 0;
  margin-bottom: 10px;
  padding: 0px 30px 00px 30px;
}

.klaro.we_cookie_consent .cookie-modal .cm-modal.cm-klaro .cm-footer > * {
	display: ruby;
    width: calc(100% - 20px);
  }

@media screen and (min-width: 1024px) {
  .klaro.we_cookie_consent .cookie-modal .cm-modal.cm-klaro .cm-footer .cm-powered-by {
    padding: 15px 10px;
    position: absolute;
    right: 10px;
    bottom: 10px;
  }
}


.klaro.we_cookie_consent .cookie-modal .cm-modal.cm-klaro .cm-footer {
	padding: 10px 0px 0px 10px;
}
@media screen and (min-width: 1024px) {
  .klaro.we_cookie_consent .cookie-modal .cm-modal.cm-klaro .cm-footer {
    height: 120px;
    max-width: 100%;
    padding: 10px 0px 0px 10px;
  }
}

@media screen and (min-width: 576px) {
.klaro.we_cookie_consent .cookie-modal .cm-modal.cm-klaro .cm-footer > * {
    -ms-flex-wrap: unset;
        flex-wrap: unset;
    height: auto;
    margin: 0.5em -10px;
    max-width: calc(100% + 20px);
    /* width: calc(100% + 20px); */
  }
}

@media screen and (min-width: 1024px) {
	  .klaro.we_cookie_consent .cookie-modal .cm-modal.cm-klaro .cm-footer > * {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    margin: 0.5em 0;
    max-width: none;
    position: absolute;
  }
}

@media screen and (min-width: 1024px) {
  #klaro .klaro.we_cookie_consent .cookie-modal .cm-modal .cm-footer .cm-btn {
    max-width: none;
    width: calc(33.3333% - 20px);
  }
}



/* ============ desktop view ============ */
@media all and (min-width: 992px) {
	H1, .h1 {
		font-size: 1.8rem;
	}
	H2, h2 button, .h2 {
		font-size: 1.8rem;		
	}

	/* H3, H3 A, .h3, .h3 a { */
	H3, .h3 {
		font-size: 1.2rem;
		padding: 0px 0px 0px 10px;
	}
	H4, H4 A, .h4, .h4 a {
		font-size: 1.2rem;
		
	}
	H5, H5 A, .h5, .h5 a {
		font-size: 1.2rem;
		padding: 0px 0px 0px 10px;
	}	
	#teaser h4 {
		font-size: 1.1rem;
		padding: 10px 10px 0px 10px;
		max-width: 100%;
	}	
}	

@media all and (min-width: 1065px) {
	p {
		margin: 0px 0px 0.3em 10px;
		padding: 0px 0px 0px 0px;
	}
	.ce-gallery figure {
		margin-right: 0px;
	}
}




.nav-link {
	font-size: 1rem; 
	font-weight: 700 !important;
	/* line-height: var(--navbar_zeile);	 */
	
	color: var(--dunklesGruen); 
	background-color: var(--hellesMint);
}

/* nav-item .dropdown-item { */
	/* font-size: 1rem; 	 */
/* } */

.navbar .nav-item:hover,
.navbar .nav-item:focus {
	/* background-color: var(--akzent); */
	}

.navbar .nav-item.active {
	/* background-color: var(--akzent); */
}
.navbar .nav-item.active .nav-link {
	background-color: var(--dunklesMint);
	/* color: var(--dunklesBlau);  */	
}
.nav-link:hover,
.nav-link:focus { color: var(--dunklesGruen); 
	/* background-color: var(--dunklesMint);  */
}


li.nav-item a.nav-link.active {
	color: var(--dunklesBlau); 
	border-bottom: 4px solid var(--akzent);	
}

a.nav-link.dropdown-toggle.show {
	border-bottom: 4px solid var(--akzent);																
}


ul.dropdown-menu:active, ul.dropdown-menu:focus {  
  border: 2px solid  var(--akzent); 
}

ul.dropdown-menu.show li.nav-item {
	/* border-bottom: 1px solid var(--akzent);																 */
}
ul.dropdown-menu.show li.nav-item:hover,
ul.dropdown-menu.show li.nav-item:active,
ul.dropdown-menu.show li.nav-item:focus  {
	border-bottom: 1px solid var(--akzent);																
}


#submenu { background-color: var(--hellesMint); width: 225px }

#submenu .nav-link { 
	color: var(--submenulink);	
	background-color: var(--gruenGelb);
	line-height:var(--submenu_zeile);	
}

#submenu .nav-item.active .nav-link {
		color: var(--hellesMint);
		text-align: right;		
		background-color: var(--BlaetterGruen);
		
		border-right: 4px solid var(--akzent);
	}

	
/* #submenu .nav-item.active .nav-link:hover, */
/* #submenu .nav-item.active .nav-link:focus { */
		/* color: #576A76; */
		/* background-color: var(--submenu_bg); */
	/* } */
	
#submenu .nav-item:hover, 
#submenu .nav-item:focus { background-color: var(--akzent); }
#submenu .nav-link:hover, 
#submenu .nav-link:focus { color: var(--hellesMint); background-color: var(--BlaetterGruen); }

#submenu .nav-item.active .dropdown-menu {
	border: 2px solid var(--BlaetterGruen);
	display:block !important;	
}

#submenu .nav-item:hover .dropdown-menu {
	border: 2px solid var(--BlaetterGruen);
	display:block !important;
}

/* #submenu .dropdown-item { */
		/* color: var(--akzent); */
		/* font-weight: normal; */
/* } */

.dropdown-menu {
	background-color: var(--dunklesMint);
	border: 2px solid var(--gruenGelb);
}

.dropdown-item {
  color: var(--BlaetterGruen); 
	/* font-size: 1.15rem;  */
	font-weight: 500 !important;
	line-height: var(--submenu_zeile);	
}
#submenu .nav-item.dropdown:hover, 
#submenu .nav-item.dropdown:focus { background-color: var(--hellesMint); }

.dropdown-item.active, .dropdown-item:active {
	color: var(--hellesMint);
	background-color: var(--BlaetterGruen);
}

.dropdown-item:hover, .dropdown-item:focus {
	color: var(--hellesMint);
	background-color: var(--BlaetterGruen);
}

/* ============ desktop view ============ */
@media all and (min-width: 992px) {
		
	.navbar .nav-item.active .nav-link {
		border-bottom: 4px solid var(--akzent);
	}
	
}






#footer {
	color: var(--linkfarbe2);
	background-color: var(--linkhintergrund);
	/* font-size: 1.2rem; */
}

#footer span.h3 a { color: var(--dunklesGruen); }
#footer span.h3 a:hover { color: var(--akzent); }
	
#footer a { 
	/* font-size: 1.1rem; */
	padding-right: 1.1rem; 
	/* line-height: 2.3rem;  */
	font-weight: normal; 
	text-decoration: none;
}	
	
#footer a:hover { color: var(--dunklesGruen); text-decoration: underline;}
#footer a:active { color: var(--link_active); text-decoration: underline;}

#footer .copyright { color: var(--text); font-weight: bold; font-size: 0.9rem}

#footer .last-changed { color: var(--text); font-size: 0.9rem; }