@charset "utf-8";
/* CSS Document */
:root {
	
	/* Main colors */
	--clr-primary-100: hsla(0, 0%, 0%, 1);
	--clr-primary-400: hsla(192, 11%, 18%, 1);
	--clr-primary-700: hsla(76, 94%, 25%, 1);
	
		
	--clr-db-box: hsla(66, 77%, 65%, 1);
		
	/* Accent colors*/
	--clr-accent-white: hsla(0, 0%, 100%, 1) ;
	--clr-accent-white-transparent: hsla(0, 0%, 100%, 0.5);
	--clr-accent-200: hsla(96, 43%, 93%, 1);
	--clr-accent-500: hsla(89, 18%, 75%, 1);
	--clr-accent-800: hsla(0, 0%, 60%, 1);
	
	--clr-accent-700: hsla(0, 0%, 44%, 1);

	/* Font-colors */
	--clr-ff-100: var(--clr-accent-white);
	/* Font-settings*/
	
	--ff-primary: "Arial";
	
	--ff-body: var(--ff-primary);
	--ff-heading: var(-ff-primary);
	
	--fw-regular: 400;
	--fw-semi-bold: 500;
	--fw-bold: 700;
	
	--fs-200: .75rem;
	--fs-300: .875rem; /* LINK: KP-resp-webs part one 37:40 */
	--fs-400: 1rem;
	--fs-500: 1.25rem;
	--fs-600: 1.5rem;
	--fs-700: 2rem;
	
	--fs-body: var(--fs-400);
	--fs-primary-heading: var(--fs-700);
	
	--fs-nav: var(--fs-300);
	
	/* gap-values*/
	--gap-slim: 0.5rem;
	--gap-normal: 1rem;
	--gap-braod: 1.5rem;
}
/* eventuell media query um die Fonts für größere Displays anzuheben */
/* @media (min-width: 50em){

} */

*,
*::before,
*::after{box-sizing: border-box;}

/* remove default margin*/
*{
	margin: 0;
	padding: 0;
	font: inherit;
}
/* Remove list styles on ul an ol elements*/
ul[role="list"],
ol[role="list"] {
	list-style: none;
}

/* Set core root defaults */
html:focus-within {
	scroll-behavior: smooth;
}

/* Set core body defaults */
html,
body {
	height: 100%;
}
body {
	text-rendering: optimizeSpeed;
	line-height: 1.5;
	background-color: var(--clr-primary-400);
	width: 99vw;
}

/* a elements that don't have a class get default style */
a:not([class]){
	text-decoration-skip-ink: auto;
}

/* make images easier to work with */
img.
picture,
svg {
	max-width: 100%;
	display: block;
}



/*Headlines*/
h1{
	font-family: var(--ff-primary);
	font-size: var(--fs-700);
	font-weight: var(--fw-bold);
}

h4{
	font-family: var(--ff-primary);
	font-size: var(--fs-500);
	font-weight: var(--fw-semi-bold);
	text-align: center;
}

ul{
	text-align: left;
	list-style-type: none;
}

li{
	display: grid;
}

a{
	position: relative;
}


/* Utility classes LINK: KP part one 44:00*/

.text-primary-400 {
	
}

#prj-logo {
	height: 85%;
}
#eth-logo {
	height: 50%;
}
#germancoop-logo {
	height: 50%;
}
#kfw-logo {
	height: 50%;	
}
#dfs-logo {
	height: 50%;
}

.head-container{
	height: 10vh;
	padding: var(--gap-slim);
	margin: var(--gap-slim);
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	background-color: var(--clr-accent-white);
	
}
.plotnav { grid-area: plotnav; }
.plotprof { grid-area: plotprof; }/*Der Plot-Steckbrief */
.plotha { grid-area: plotha;}
.plotarea { grid-area: plotarea; }
.plotmem { grid-area: plotmem;}
.plotpaym { grid-area: plotpaym;}
.mapbox { grid-area: mapbox;
			/*height: 40vh;*/
			background-color: var(--clr-accent-white);
			}
.plotliveticker { grid-area: plotliveticker;}
.plotplanted { grid-area: plotplanted;}
.plotspeccats { grid-area: plotspeccats;}
.plotbacknav {grid-area: plotbacknav;}

.stageplot {
	display: grid;
	/*overflow: hidden;*/
	height: 85vh;
	width: 99vw;
	border: red solid;
	gap: var(--gap-normal);
	padding: var(--gap-slim);
	grid-template-columns: 1fr 1fr 1fr 2fr;
	grid-template-areas: 
		"plotnav mapbox mapbox plotprof"
		"plotnav mapbox mapbox plotprof"
		"plotliveticker plotha plotspeccats plotbacknav"
}

.button{
	background-color: var(--clr-primary-700);
	border-radius: .5em;
	font-family: var(--ff-primary);
	font-size: var(--fs-200);
	text-decoration: none;
	color: var(--clr-ff-100);
	padding-left: .5em;
	padding-right: .5em;
	padding-top: .125em;
	padding-bottom: .125em;
	margin-top: 1.25em;
	float: right;	
}

.button:hover {
	background-color: var(--clr-primary-300);
	border-radius: .5em;
	font-family: var(--ff-primary);
	font-size: var(--fs-200);
	text-decoration: none;
	color: var(--clr-ff-900);
	padding-left: .5em;
	padding-right: .5em;
	padding-top: .125em;
	padding-bottom: .125em;
	margin-top: 1.25em;
	float: right;	
}
.chartbox {
	/*grid-area: chart-box;*/
	align-content: center;
	justify-content: center;
	background-color: var(--clr-db-box);
	padding: 1rem;
}
.chartCard{
	
	background-color: var(--clr-accent-transparent);
	border-radius: 5px;
	box-shadow: 5px 8px 6px var(--clr-accent-800);
	
}
.grid-row-span2{
	min-height: 22vh;
	max-width: 90%;
}
.grid-row-col-span2{
	
	/* max-height: 40vh;*/
	max-width: 65%;
	
}

/*#totpltrs{
	width: 10vw;
}*/

	

#map {
	height: 100%;
	
}