:root{
	--dgs-orange: #f68716;
	--dgs-orange-light: #fbd9b6;
	--dgs-orange-dark: #cc6f11;

	--dgs-blue: #e5f1ff;
	--dgs-blue-rgb: 229, 241, 255;

	--dgs-darkblue: #10269b;
	--dgs-darkblue-rgb: 16, 38, 155;

	--dgs-green: #008000;
	--dgs-green-light: #c2f0c2;
	--dgs-green-dark: #036203;

	--dgs-yellow: #f5d031;
}

body{
	--dgs-color-primary: var(--dgs-orange);
	--dgs-color-primary-light: var(--dgs-orange-light);
	--dgs-color-primary-dark: var(--dgs-orange-dark);

	--dgs-color-secondary: var(--dgs-green);
	--dgs-color-secondary-light: var(--dgs-green-light);
	--dgs-color-secondary-dark: var(--dgs-green-dark);

	--dgs-hover-color: var(--dgs-darkblue);
	--dgs-active-color: var(--dgs-blue);
	--dgs-disabled-color: grey;


	--dgs-link-color: var(--dgs-color-primary);
	--dgs-link-hover-color: var(--dgs-hover-color);
	--dgs-link-active-color: var(--dgs-active-color);
	--dgs-link-disabled-color: var(--dgs-disabled-color);

	--dgs-btn-color: white;
	--dgs-btn-bg: var(--dgs-color-primary);
	--dgs-btn-hover-color: white;
	--dgs-btn-hover-bg: var(--dgs-hover-color);
	--dgs-btn-active-color: white;
	--dgs-btn-active-bg: var(--dgs-active-color);
	--dgs-btn-disabled-color: white;
	--dgs-btn-disabled-bg: var(--dgs-disabled-color);


	--dgs-header-bg-color: white;
	--dgs-header-color: black;
	--dgs-footer-bg-color: var(--dgs-color-primary);
	--dgs-footer-color: white;
	--dgs-trennlinie-color: var(--dgs-color-primary);
	--dgs-rechte-spalte-color: var(--dgs-blue);
	--dgs-breadcrumb-display: block; /*block or none*/


	--dgs-meta-nav-link-color: rgb(104, 102, 102); /*black*/
	--dgs-meta-nav-link-font-size: 0.7rem; /*0.8rem*/
	--dgs-meta-nav-link-font-weight: normal;

	--dgs-meta-nav-link-hover-color: var(--dgs-hover-color);
	--dgs-meta-nav-link-hover-bg-color: var(--dgs-blue);
	--dgs-meta-nav-link-disabled-color: var(--dgs-disabled-color);

	--dgs-meta-nav-link-active-color: var(--dgs-orange);
	--dgs-meta-nav-link-active-font-size: 0.7rem; /*0.8rem*/
	--dgs-meta-nav-link-active-font-weight: normal;

	--dgs-meta-nav-offcanvas-link-color: black;
	--dgs-meta-nav-offcanvas-link-font-size: 1.0rem;
	--dgs-meta-nav-offcanvas-link-font-weight: normal;
	--dgs-meta-nav-offcanvas-link-active-font-size: 1.0rem;
	--dgs-meta-nav-offcanvas-link-active-font-weight: normal;

	--dgs-meta-nav-bg-color: white;
	--dgs-meta-nav-deco-color: var(--dgs-orange);
	--dgs-meta-nav-toggler-border-color: var(--dgs-orange);


	--dgs-main-nav-link-color: white;
	--dgs-main-nav-link-font-size: 1rem;
	--dgs-main-nav-link-font-weight: normal;

	--dgs-main-nav-link-hover-color: var(--dgs-hover-color);
	--dgs-main-nav-link-hover-bg-color: unset;
	--dgs-main-nav-link-disabled-color: var(--dgs-disabled-color);

	--dgs-main-nav-link-active-color: white;
	--dgs-main-nav-link-active-font-size: 1rem;
	--dgs-main-nav-link-active-font-weight: bold;

	--dgs-main-nav-offcanvas-link-color: white;
	--dgs-main-nav-offcanvas-link-font-size: 1rem;
	--dgs-main-nav-offcanvas-link-font-weight: normal;
	--dgs-main-nav-offcanvas-link-active-font-size: 1rem;
	--dgs-main-nav-offcanvas-link-active-font-weight: bold;

	--dgs-main-nav-bg-color: var(--dgs-color-primary);
	--dgs-main-nav-deco-color: white;
	--dgs-main-nav-toggler-border-color: var(--dgs-orange);


	--dgs-footer-nav-link-color: white;
	--dgs-footer-nav-link-font-size: 1rem;
	--dgs-footer-nav-link-font-weight: normal;

	--dgs-footer-nav-link-hover-color: var(--dgs-hover-color);
	--dgs-footer-nav-link-hover-bg-color: unset;
	--dgs-footer-nav-link-disabled-color: var(--dgs-disabled-color);

	--dgs-footer-nav-link-active-color: white;
	--dgs-footer-nav-link-active-font-size: 1rem;
	--dgs-footer-nav-link-active-font-weight: bold;

	--dgs-footer-nav-bg-color: var(--dgs-color-primary);


	--bs-primary: var(--dgs-color-primary);
	--bs-primary-rgb: var(--dgs-color-primary-rgb);

	--bs-secondary: #FFFFFF;
	--bs-secondary-rgb: 255, 255, 255;

	--bs-link-color: var(--dgs-link-color);
    --bs-link-hover-color: var(--dgs-link-hover-color);
}

[data-dgs-site="ENERGIE_AKADEMIE"]{
	--dgs-color-primary: var(--dgs-green);
	--dgs-color-primary-light: var(--dgs-green-light);
	--dgs-color-primary-dark: var(--dgs-green-dark);

	--dgs-color-secondary: var(--dgs-orange);
	--dgs-color-secondary-light: var(--dgs-orange-light);
	--dgs-color-secondary-dark: var(--dgs-orange-dark);

	/* --dgs-main-nav-link-hover-color: var(--dgs-yellow); */
	/* --dgs-footer-nav-link-hover-color: var(--dgs-yellow); */
}

[data-dgs-site="ENERGIE_AKADEMIE"],
[data-dgs-site="SOLAR_AKADEMIE"],
[data-dgs-site="SOLARSCHULEN"]{
	--dgs-breadcrumb-display: none;
}


[data-dgs-theme="matthias"] {

}


/* damit die Bilder richtig skaliert werden */
img {
	max-width: 100%;
  	height: auto;
}

a, 
.internal-link,
.external-link{
    color: var(--dgs-link-color);
    text-decoration: none;
}

a:hover, 
.internal-link:hover,
.external-link:hover{
    color: var(--dgs-link-hover-color);
}

a:active, 
.internal-link:active,
.external-link:active{
    color: var(--dgs-link-active-color);
}

/* -------- Ausrichtung der Seite ----------BEGIN 
	main soll sich über die restliche Seite ausdehen, auch wenn nicht genügend content drin ist. 
	Ziel sind:
	1. Der Footer soll sich immer am Boden befinden.
	2. Die main Spalten ggfs mit Hintergrundfarbe sollen sich bis zum Footer ausdehnen
 */
body {
    font-family: Verdana, Arial;

	display:flex;
	flex-direction:column;
 
	/* fallback height */
	min-height:100vh;
 
	/* new small viewport height for modern browsers */
	min-height:100svh;
}
body > * {
	flex-shrink: 0;
}
body > main{
	flex-grow: 1;
}

main{
	display: flex;
	flex-direction:column;
}
main > *{
	flex-grow: 1;
}
/* -------- Ausrichtung der Seite ----------END */ 

.btn-primary {
	--bs-btn-color: var(--dgs-btn-color);
	--bs-btn-bg: var(--dgs-btn-bg);
	--bs-btn-border-color: var(--dgs-btn-bg);

	--bs-btn-hover-color: var(--dgs-btn-hover-color);
	--bs-btn-hover-bg: var(--dgs-btn-hover-bg);
	--bs-btn-hover-border-color: var(--dgs-btn-hover-bg);
	/* --bs-btn-focus-shadow-rgb: 49,132,253; */
	--bs-btn-active-color: var(--dgs-btn-active-color);
	--bs-btn-active-bg: var(--dgs-btn-active-bg);
	--bs-btn-active-border-color: var(--dgs-btn-active-bg);
	/* --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); */
	--bs-btn-disabled-color: var(--dgs-btn-disabled-color);
	--bs-btn-disabled-bg: var(--dgs-btn-disabled-bg);
	--bs-btn-disabled-border-color: var(--dgs-btn-disabled-bg);
}

.dgs-color{
	color: var(--dgs-orange);
}
.dgs-bg{
	background-color: var(--dgs-orange);
}

.dgs-color-primary{
	color: var(--dgs-color-primary);
}
.dgs-bg-primary{
	background-color: var(--dgs-color-primary);
}

.dgs-color-secondary{
	color: var(--dgs-color-secondary);
}
.dgs-bg-secondary{
	background-color: var(--dgs-color-secondary);
}