/* ------------------------------------------------Beginn allgemeines Design------------------------------------------------ */
/*---------------------------------------------------------------------------------------------------------------------------*/


/* ------------------------------------------------ Farbpalette ------------------------------------------------ */
:root {
  --primary-color: hsl(144deg 46% 42%);
  --primary-color-dark: hsl(144deg 45% 30%);
  --primary-color-tint:hsl(144deg 33% 60%);
  --primary-color-light: hsl(140deg 31% 95%);
  --secondary-color: hsl(194deg 50% 53%);
  --secondary-color-dark: hsl(193deg 44% 37%);
  --secondary-color-tint: hsl(193deg 49% 67%);
  --secondary-color-light: hsl(193deg 53% 95%);
  --accent-color: hsl(47deg 87% 51%);
  --accent-color-dark: hsl(46deg 84% 36%);
  --accent-color-tint: hsl(46deg 87% 66%);
  --accent-color-light: hsl(47deg 88% 90%);
  --background-color: hsl(203deg 5% 45%);
  --background-color-dark: hsl(0deg 0% 35%);
  --background-color-tint: hsl(206deg 5% 60%);
  --background-color-light: hsl(0deg 0% 75%);
  --background-color-transparent: hsl(206deg 4% 61% / 85%);
  
/* ---------- abgeleitete Farben ------------- */
  --background-color-main:var(--background-color);
  --active-color-background: var(--primary-color-dark);

/* ---------- mehrfach verwendete Größen ------------- */
  --hoehe-header: 40px;
  --breite-show-menu-button: calc(var(--hoehe-header)/0.8);
  --breite-menu: 12rem;
}

html,body,div,span,applet,object,
iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,
address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,
strike,sub,sup,tt,var,center,dl,dt,dd,ol,ul,li,fieldset,form,
label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,
aside,canvas,details,embed,figure,figcaption,footer,header,
hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,
video {border: 0;font-size: 100%;font: inherit;vertical-align: baseline;margin: 0;padding: 0;text-decoration: none;}


html { 
    font-size: 100%;
}

body {
    font-size: 1rem;
    background: var(--background-color);
    background-color: var(--background-color-dark);
    font-family: sans-serif;
    margin: 0;
    padding: 0;
    height: 100vh;
    width: 100vw;
    display: grid;
    overflow: hidden auto;
    grid-template-areas:
        'header header  header'
        'menu   main    main'
        'footer   footer  footer';
    grid-template-rows: var(--hoehe-header) 1fr 1.25rem;
    grid-template-columns: var(--breite-menu) 1fr 1fr;
    grid-gap: 0.5rem;
    background-image: url("../img/texture/clean-gray-paper.png");
}

a {
    color: var(--secondary-color-light);
    opacity: 0.9;
    transition-property: background-color, color, opacity, text-shadow;
    transition-duration: 250ms;
    transition-timing-function: ease-in-out;
}

a:hover *, a:hover *, * a:hover {
    color:var(--accent-color);
    opacity: 1;
    text-shadow:    0.5px 0.5px 5px var(--accent-color-dark),
				    0.5px -0.5px 5px var(--accent-color-dark),
				    -0.5px 0.5px 5px var(--accent-color-dark),
				    -0.5px -0.5px 5px var(--accent-color-dark);

}

a[name] {
	display: block; position: relative; top: -1.5rem; visibility: hidden;
}

.content-wrapper a[name] {
	padding: 0; background-color: unset; background-image: none;
}

header {
    display:table;
    grid-area: header;
    /* background-image: url("../img/infrared-picture-of-a-thermal-insulated-house-digital-composite-BX5RXF.jpg"); */
    /* background-position: 50% 42%; */
    height: calc(var(--hoehe-header) - 5px); /* 10 px = hoehe bottom border */
    text-align: left;
    border-bottom: solid;
    border-bottom-width: 3px;
    border-color: var(--primary-color-dark);
    font-size: 1.5rem;
    background-color: var(--primary-color-dark);
    background-image: url("../img/texture/clean-gray-paper.png");
}

nav {
    grid-area: menu;
    width: var(--breite-menu);
}
nav a {
    width: 100%;
    display: table-cell;
    font-size: 1.5rem;
    padding: 1rem 1rem;
    color: inherit;
    z-index: 3;
}
nav ul {
    width: 100%;
    list-style-type: none;
    padding: 1.25rem 0;
    transition: none;
}
nav li {
    display: table;
    width: 100%;
    border-radius: 1rem;
    /* background-color: var(--secondary-color-dark); */
    /* border: solid 2px var(--secondary-color-dark); */
    box-sizing: border-box;
    margin: 0.2rem 0.5rem;
    color: var(--secondary-color-light);
    /* background-image: url("../img/texture/soft-wallpaper.png"); */
    text-shadow:    1px 1px 1px var(--secondary-color-dark),
				    1px -1px 1px var(--secondary-color-dark),
				    -1px 1px 1px var(--secondary-color-dark),
				    -1px -1px 1px var(--secondary-color-dark);
    opacity:0.9;
    z-index: 3;
}

nav li:hover{
	opacity: 1;
	background-image: none;
}

/* Aktive Seite gesondert darstellen (PHP nötig zur Klassenvergabe) */

nav li.active {
    background-color: var(--active-color-background);
    border: solid 2px var(--active-color-background);
    border-right: none;
    color: var(--primary-color-light);
    /*  Erweiterung aktiver Menüpunkt bis main  */
    /* 100% + margin-left main */
    width: calc(100% + 1rem);
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    transition: border-radius 1000ms cubic-bezier(0.68, -0.55, 0.27, 1.55);
    text-shadow:    1px 1px 1px var(--primary-color-dark),
				    1px -1px 1px var(--primary-color-dark),
				    -1px 1px 1px var(--primary-color-dark),
				    -1px -1px 1px var(--primary-color-dark);
    background-image: url(../img/texture/soft-wallpaper.png);
}

main {
    text-align: center;
    grid-area: main;
    overflow-y: scroll;
    padding: 1rem 1.2rem 1rem 1.4rem;
    margin: 0 2rem 0 1rem;
    box-shadow: 0px 0px 5px 1px var(--active-color-background);
    border-radius: 1rem;
    background-color: var(--background-color-main);
    border: solid 3px var(--active-color-background);
    /* Mindesthöhe für main (passend zu menu): 
    Anzahl Links * (nav a Schriftgröße + nav li.margin(vertikal) + 2* nav a.padding(vertikal))
    + 2*nav ul.padding(top)
    */
    min-height: calc((5 * (1.25rem + 0.2rem + 2rem) + 2.5rem));
    background-image: url("../img/texture/clean-gray-paper.png");
}

footer {
    grid-area: footer;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateY(-0.25rem);
}

footer a {
	margin: auto 2rem;;
}

  #hamburgermenu {
    width: calc(0.8* var(--breite-show-menu-button) - 3px);
    height: calc(var(--hoehe-header) - 3px);
    background: var(--background-color);
    border-radius: calc(var(--hoehe-header) * 0.382);
    margin: 2px 0;
    padding: 1px;
    border: solid 2px var(--background-color-dark);
    box-sizing: border-box;
  }

  #hamburgermenu * {
    fill: var(--background-color-light);
  }

.noscript {
	font-size: 0.6rem;
	color: red;
}

/*-------------------------------------------------- Inhalt ----------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------*/

.content-wrapper {
    display: flex;
    flex-wrap:  wrap;
    overflow: hidden;
    box-sizing: border-box;
    width: calc(100% + 0.8rem);
    margin-bottom: 1rem;
    border-radius: 1.5rem;
    background-image: url("../img/texture/clean-gray-paper.png");
    padding: 2rem 2rem;
}

.content-wrapper:nth-of-type(odd) {
    background-color: var(--primary-color-dark);
    box-shadow: 0px 0px 1rem 0 var(--primary-color-dark);
    color: var(--primary-color-light);
    text-shadow:    1px 1px 1px var(--primary-color-dark),
                    1px -1px 1px var(--primary-color-dark),
                    -1px 1px 1px var(--primary-color-dark),
                    -1px -1px 1px var(--primary-color-dark);
}

.content-wrapper:nth-of-type(even) {
    background-color: var(--secondary-color-dark);
    box-shadow: 0px 0px 1rem 0 var(--secondary-color-dark);
    color: var(--secondary-color-light);
    text-shadow:    1px 1px 1px var(--secondary-color-dark),
                    1px -1px 1px var(--secondary-color-dark),
                    -1px 1px 1px var(--secondary-color-dark),
                    -1px -1px 1px var(--secondary-color-dark);
}

.content-wrapper a{
    padding: 0.1rem 0.6rem;
    border-radius: 1rem;
    background-image: url("../img/texture/clean-gray-paper.png");
    white-space: pre-line;
    width: 80%;
}

.content-wrapper .content a:hover {
    color: var(--accent-color);
}

.content-wrapper:nth-of-type(odd) a{
    background-color: var(--primary-color);
    color: var(--primary-color-light);
}

.content-wrapper:nth-of-type(even) a{
    background-color: var(--secondary-color);
    /* color: var(--secondary-color-light); */
}

.content {
	display: flex;
	vertical-align: middle;
	text-align: center;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	padding: 0 0.5rem;
	box-sizing: border-box;
	margin-top: auto;
	margin-bottom: auto;
}

.content-wrapper .content:first-child {
	padding-left: 0;
}

.content-wrapper .content:last-child {
	padding-right: 0;
}

.content-wrapper.img-left .content:last-child {
	padding-left: 0;
	padding-right: 0.5rem;
}

.content-wrapper.img-left .content:first-child {
	padding-right: 0;
}

.content-header {
	margin: 0 1rem;
	width: calc(100% - 2rem);
	border-bottom: solid 1px;
	margin-bottom: 0.5rem;
}
 
.content ul, .content-header ul {
    text-align: center;
    margin: 0.5rem 0;
}

.content ul li:before, .content-header ul li:before {
    content: "\2022";
    margin-right: 0.2rem;
}

.content ul li, .content-header ul li {
    text-align: center;
    display: inline-block;
    margin: 0 2rem;
    font: inherit;
}

.content-wrapper-1 .content {
	width: 100%;
}

.content-wrapper-2 .content {
	width: 50%;
}

.content-wrapper-3 .content {
	width: 33%;
}

.content-wrapper-2-3 .content{
	width: 61.8%;
}

.content-wrapper-2-3 .content:last-child {
	width: 38.2%;
}

.content-wrapper-1-3 .content {
	width: 38.2%;
}

.content-wrapper-1-3 .content:last-child {
	width: 61.8%;
}

.content img, .content video, iframe{
	max-height: 100%;
	max-width: 100%;
	border-radius: 1rem;
	box-sizing: border-box;
}

.content-wrapper:nth-of-type(odd) .content img, .content-wrapper:nth-of-type(odd) .content video {
	box-shadow: 0px 0px 8px 1px var(--primary-color-dark);
	border: solid 0.5px var(--primary-color-dark);
}

.content-wrapper:nth-of-type(even) .content img, .content-wrapper:nth-of-type(even) .content video {
	box-shadow: 0px 0px 8px 1px var(--secondary-color-dark);
	border: solid 0.5px var(--secondary-color-dark);
}

.nowrap {
	display: inline-block;
	white-space:nowrap;
	font: inherit;
	font-size: inherit !important;
	width: unset !important;
}

.barchart {
	border-radius: 1rem;
	height: 1.5rem;
	display: flex;
	align-items: center;
	margin: 0.5rem 0;
	min-width: 3rem;
	text-shadow: none;
}

.barchart span{
	margin-right: 0.7rem;
	text-align: right;
	width: 100%;
	font-size: 0.8rem;
}

.barchart.highlight span {
	margin-right: 0.7rem;
	text-align: right;
	width: 100%;
	font-size: 0.8rem;
	text-shadow: 1px 1px 1px var(--accent-color-light),
	             1px -1px 1px var(--accent-color-light),
	            -1px 1px 1px var(--accent-color-light),
	            -1px -1px 1px var(--accent-color-light);
}


.chartwrapper {
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.chartwrapper>span {
    margin-left: 1rem;
    font-size: 0.8rem;
    text-align: right;
}

.content-wrapper:nth-of-type(odd) .barchart {
	background-color: var(--primary-color-tint);
	color: var(--primary-color-dark);
}

.content-wrapper:nth-of-type(even) .barchart {
	background-color: var(--secondary-color-tint);
	color: var(--secondary-color-dark);
}

.content table {
	margin: 0 auto;
}

.content-wrapper.img-left {
    	flex-direction: row-reverse;
    }

.image-overlayed, a.content.image-overlayed{
    position: relative;
    text-align: center;
    height: 42vh;
    background-image: none;
    background-color: unset;
}

.content-wrapper.image-overlayed {
	flex-direction: unset;
	padding: 0;
	height: 100%;
}

.image-overlayed img{
    object-fit: cover;
    width: 100%;
}

.image-overlayed .caption {
    position: absolute;
    text-align: center;
    width: 75%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-shadow: 1px 1px 2px var(--primary-color-dark),
                 1px -1px 2px var(--primary-color-dark),
                -1px 1px 2px var(--primary-color-dark),
                -1px -1px 2px var(--primary-color-dark);
    color: inherit;
    transition-duration: inherit;
}

.image-overlayed .caption span {
	font-size: 2rem;
}

.content-wrapper:nth-of-type(odd) .image-overlayed .caption {
	color: var(--primary-color-light);
	text-shadow: 1px 1px 2px var(--primary-color-dark),
			 1px -1px 2px var(--primary-color-dark),
			-1px 1px 2px var(--primary-color-dark),
			-1px -1px 2px var(--primary-color-dark);
}

.content-wrapper:nth-of-type(even) .image-overlayed .caption {
	color: var(--secondary-color-light);
	text-shadow: 1px 1px 2px var(--secondary-color-dark),
				 1px -1px 2px var(--secondary-color-dark),
				-1px 1px 2px var(--secondary-color-dark),
				-1px -1px 2px var(--secondary-color-dark);
}

h1, h2, h3, h4, h5 {
	text-align: inherit;
	margin: 0.5rem 0;
	transition-duration: inherit;
}

h1 {
	font-size: 2.169rem;
}

h2 {
	font-size: 1.787rem;
}

h3 {
	font-size: 1.473rem;
}

h4 {
	font-size: 1.214rem;
}

p {
    text-align: inherit;
    margin: 0.5rem;
    line-height: 125%;
}

ul.caption, p.caption {
	font-size: 0.7rem;
}

.content .alignleft {
	text-align: left;
	width: 100%;
}


form {
	width: 100%;
	text-align: center;
}

form input{
	width: 96%;
	text-align: center;
	border-radius: 0.5rem;
	border-width: 1px;
	max-width: var(--Breite-Calender);
	margin: 0.3rem 0 0.5rem 0;
	padding: 0.2rem;
	font-size: 1rem;
}

form input:focus{
	background-color: var(--accent-color-light);
}

form input[type=submit]{
    width: auto;
    text-align: center;
    cursor: pointer;
    box-sizing: border-box;
    background-color: hsl(144deg 33% 50%);
    color: var(--primary-color-light);
    padding: 0.3rem 0.5rem;
    border-width: 3px;
    border-style: outset;
    border-color: var(--primary-color);
}

.Fehlermeldung {
	color: red;
}

.highlight {
	color: var(--accent-color-light);
	font-weight: bold;
	text-shadow:     1px  1px 1px var(--accent-color-dark),
                     1px -1px 1px var(--accent-color-dark),
                    -1px  1px 1px var(--accent-color-dark),
                    -1px -1px 1px var(--accent-color-dark);
}


.content-wrapper .barchart.highlight {
	padding: 0.2rem 0;
	background-color: var(--accent-color);
	color: var(--secondary-color-dark);
}

figcaption {
    font-weight: bold;
    color: var(--background-color-light);
    text-shadow: 0.5px  0.5px 0.5px var(--background-color-dark),
                -0.5px  0.5px 0.5px var(--background-color-dark),
                 0.5px -0.5px 0.5px var(--background-color-dark),
                -0.5px -0.5px 0.5px var(--background-color-dark);
    margin: 0.5rem 0.2rem 0.5rem 0;
    text-align: right;
    width: 100%;
}

.content-wrapper .content img.icon {
	height: 2rem;
	margin: auto 1rem;
	vertical-align: middle;
	border: none;
	box-shadow: none;
	border-radius: 0;
}

.content-wrapper:nth-of-type(odd) .content img.icon {
	filter: brightness(0) saturate(100%) invert(92%) sepia(6%)
	        saturate(491%) hue-rotate(87deg) brightness(98%) contrast(90%);
	/* Erzeuge --primary-color-light NICHT AUTOMATISCH*/
}

.content-wrapper:nth-of-type(even) .content img.icon {
	filter: brightness(0) saturate(100%) invert(89%) sepia(24%) 
	        saturate(260%) hue-rotate(156deg) brightness(98%) contrast(90%);
	/* Erzeuge --secondary-color-light NICHT AUTOMATISCH*/
}

#aett {
	height: 0.8rem;
	margin: 0 0.1rem;
}

/*--------------------------------------------- Responsive Design ----------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------*/

.show-menu {
	text-decoration: none;
	text-align: center;
	vertical-align: middle;
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	height: var(--hoehe-header);
	width: var(--breite-show-menu-button);
}

/*Hide checkbox*/
#show-menu {
    display: none;
    -webkit-appearance: none;
}

#menu-underlay {
	display: none;
}

@media screen and (max-width: 739px) {
    
    body {
      grid-template-areas:
        'header      header  header'
        'menu        main    main'
        'footer      footer  footer';
      grid-template-columns: 0 1fr 1fr;
    }
    
    header {
      width: calc(100% - var(--breite-show-menu-button));
      margin-left: var(--breite-show-menu-button);
      border-radius: 0 0 0 1rem;
      border-left: solid;
      border-color: var(--primary-color-dark) var(--primary-color);
    }
    
    main {
      margin: 0 0.3rem 0 0.5rem;
      padding-right: 0.3rem;
      padding-left: 1rem;
    }

    #menu .active {
        width: calc(100% + 0.5rem);
    }

    nav {
        margin-left: calc(-1 * var(--breite-menu));
    }
    
    .show-menu {
        display: block;
    }

    nav ul {
	    /*transition: padding 500ms ease-in-out;*/
	    transition-property: background-color, padding, border;
	    transition-duration: 500ms;
	    transition-timing-function: ease-in-out;
	}

    .content-wrapper {
    	border-radius: 1.5rem;
    	width: 100%;
    }

    .content-wrapper:nth-of-type(odd) {
        box-shadow: 0px 0px 0.5rem 0 var(--primary-color-dark);
    }

     .content-wrapper:nth-of-type(even) {
        box-shadow: 0px 0px 0.5rem 0 var(--secondary-color-dark);
    }

    .content-wrapper.image-overlayed {
		flex-direction: unset;
		padding: 0;
		height: 100%;
		width: 100%;
	}

	main::-webkit-scrollbar {
	  width: 1rem !important;
	}
	/* Handle */
	main::-webkit-scrollbar-thumb {
	  border: solid 0.3rem var(--background-color-main) !important;
	  border: solid 0.3rem transparent !important;
	  border-radius: 0.5rem !important;
	}
	/* Handle on hover */
	main::-webkit-scrollbar-thumb:hover {
	  border: solid 0.3rem transparent !important;
	}

	/*Show menu when invisible checkbox is checked*/
	input[type=checkbox]:checked ~ #menu{
		margin: 0;
		padding: 1.25rem 2rem 1.25rem 12.25rem;
		width: 12rem;
		background-color: var(--background-color-transparent);
		border-radius: 0 1rem 1rem 0;
		border: solid 0.3rem;
		border-left: none;
		border-color: var(--background-color);
		background-image: url("../img/texture/clean-gray-paper.png");
	}

	input[type=checkbox]:checked ~ #menu .active{
	  border-top-right-radius: 1rem;
	  border-bottom-right-radius: 1rem;
	  width: 100%;
	  z-index: 3;
	  border-right: solid 2px var(--primary-color-dark);
	}

	input[type=checkbox]:checked ~ #menu #menu-underlay {
		display: block;
	}

}

@media  screen and (max-width: 560px), (min-width: 739px) and (max-width: 1000px) {
 	
    .content-wrapper .content {
    	width: 100% !important;
    	padding: 0 0 0.5rem 0;
    }

    .content-wrapper.img-left .content:last-child {
		padding: unset;
    }

    .content-wrapper, .content-wrapper.img-left {
    	flex-direction: column;
    	padding: 1.5rem;
    }

    .content-wrapper.image-overlayed {
		flex-direction: unset;
		padding: 0;
		height: 100%;
    }
}

@media  screen and (max-width: 400px) {
 	
    html {
    	font-size: 4vw;
    }
}

@media screen and (min-width: 1201px) {

	body {
		grid-template-columns: calc((100vw - 1150px)/2 + var(--breite-menu)) 1fr 1fr;
	}

    nav {
    	margin-left: calc((100vw - 1150px)/2);
    }
    main {
    	margin-right: calc((100vw - 1150px)/2);
    }
}

/*----------------------------------------------- Cookie-Consent -----------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------*/

body > div.cc-window.cc-banner.cc-bottom {
	background-color: hsl(0deg 0% 35% / 80%) !important;
	min-height: 10vh !important;
}

body div > a.cc-btn.cc-allow {
	color: white !important;
	background-color: var(--accent-color) !important;
	text-shadow:    1px  1px 1px var(--accent-color-dark),
				    1px -1px 1px var(--accent-color-dark),
				   -1px  1px 1px var(--accent-color-dark),
				   -1px -1px 1px var(--accent-color-dark) !important;
	font-size: 1.2rem !important;
	border: outset 3px var(--accent-color-dark);
}

body div > a.cc-btn.cc-allow:hover {
	background-color: var(--accent-color-tint) !important;
}

body div > a.cc-btn.cc-deny {
    color: hsl(0deg 0% 60%) !important;
}

body div > a.cc-btn.cc-deny:hover {
	text-decoration: none !important;
	text-shadow: none !important;
}

/*------------------------------------------------ Sondergrößen ------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------*/


@media screen and (min-width: 2000px) and (min-height:900px) {
    
    html {
    	font-size: 105%;
    }


	body {
		grid-template-columns: calc((100vw - 1650px)/2 + var(--breite-menu)) 1fr 1fr;
	}

    nav {
    	margin-left: calc((100vw - 1650px)/2);
    }
    main {
    	margin-right: calc((100vw - 1650px)/2);
    }
}

@media screen and (min-width: 2400px) and (min-height:1250px) {
    
    html {
    	font-size: 125%;
    }


	body {
		grid-template-columns: calc((100vw - 2350px)/2 + var(--breite-menu)) 1fr 1fr;
	}

    nav {
    	margin-left: calc((100vw - 2350px)/2);
    }
    main {
    	margin-right: calc((100vw - 2350px)/2);
    }
}

@media screen and (min-width: 3000px) and (min-height:1550px) {
    
    html {
    	font-size: 155%;
    }


	body {
		grid-template-columns: calc((100vw - 2950px)/2 + var(--breite-menu)) 1fr 1fr;
	}

    nav {
    	margin-left: calc((100vw - 2950px)/2);
    }
    main {
    	margin-right: calc((100vw - 2950px)/2);
    }
}

/*------------------------------------------------ Scrollbar ------------------------------------------------*/
/*-----------------------------------------------------------------------------------------------------------*/

main::-webkit-scrollbar {
  width: 1.6rem;
}
main::-webkit-scrollbar-track {
  background: var(--background-color-main);
  background: transparent;
}
/* Handle */
main::-webkit-scrollbar-thumb {
  background: var(--primary-color-dark);
  border: solid 0.6rem var(--background-color-main);
  border: solid 0.6rem transparent;
  background-clip: content-box;
  border-radius: 0.8rem;
}
/* Handle on hover */
main::-webkit-scrollbar-thumb:hover {
  background: var(--primary-color);
  border: solid 0.6rem transparent;
  background-clip: content-box;
}
/* set button(top and bottom of the scrollbar) */
main::-webkit-scrollbar-button {
  display: none;
}
  
/* Extrawurst fuer Firefox */
:root , :root main{
  scrollbar-face-color: var(--primary-color); /* Firefox 63 compatibility */
  scrollbar-track-color: transparent; /* Firefox 63 compatibility */
  scrollbar-color: var(--primary-color-dark) transparent;
  scrollbar-width: thin;
}