@font-face { font-family: 'Handlee';
             src: url('includes/fonts/Handlee/Handlee-Regular.ttf') format('truetype'); font-display: swap; 
            }
@font-face { font-family: 'Source Sans Pro';
						src: url('includes/fonts/Source_Sans_Pro/woff2/SourceSans3-Regular.otf.woff2'),
								 url('includes/fonts/Source_Sans_Pro/woff/SourceSans3-Regular.otf.woff');
						font-weight: 400; 
						}
@font-face { font-family: 'Source Sans Pro';
						src: url('includes/fonts/Source_Sans_Pro/woff2/SourceSans3-It.otf.woff2'),
								 url('includes/fonts/Source_Sans_Pro/woff/SourceSans3-It.otf.woff');
						font-weight: 400; 
						font-style: italic; 
						}
@font-face { font-family: 'Source Sans Pro';
						src: url('includes/fonts/Source_Sans_Pro/woff2/SourceSans3-Black.otf.woff2'),
								 url('includes/fonts/Source_Sans_Pro/woff/SourceSans3-Black.otf.woff');
						font-weight: 900; 
						}
@font-face { font-family: 'Source Sans Pro';
						src: url('includes/fonts/Source_Sans_Pro/woff2/SourceSans3-BlackIt.otf.woff2'),
								 url('includes/fonts/Source_Sans_Pro/woff/SourceSans3-BlackIt.otf.woff');
						font-weight: 900; 
						font-style: italic; 
						}
@font-face { font-family: 'Source Sans Pro';
						src: url('includes/fonts/Source_Sans_Pro/woff2/SourceSans3-Bold.otf.woff2'),
								 url('includes/fonts/Source_Sans_Pro/woff/SourceSans3-Bold.otf.woff');
						font-weight: bold; 
						}
@font-face { font-family: 'Source Sans Pro';
						src: url('includes/fonts/Source_Sans_Pro/woff2/SourceSans3-BoldIt.otf.woff2'),
								 url('includes/fonts/Source_Sans_Pro/woff/SourceSans3-BoldIt.otf.woff');
						font-weight: bold; 
						font-style: italic; 
						}
@font-face { font-family: 'Source Sans Pro';
						src: url('includes/fonts/Source_Sans_Pro/woff2/SourceSans3-Light.otf.woff2'),
								 url('includes/fonts/Source_Sans_Pro/woff/SourceSans3-Light.otf.woff');
						font-weight: light; 
						}
@font-face { font-family: 'Source Sans Pro';
						src: url('includes/fonts/Source_Sans_Pro/woff2/SourceSans3-LightIt.otf.woff2'),
								 url('includes/fonts/Source_Sans_Pro/woff/SourceSans3-LightIt.otf.woff');
						font-weight: light; 
						font-style: italic; 
						}
@font-face { font-family: 'Source Sans Pro';
						src: url('includes/fonts/Source_Sans_Pro/woff2/SourceSans3-Medium.otf.woff2'),
								 url('includes/fonts/Source_Sans_Pro/woff/SourceSans3-Medium.otf.woff');
						font-weight: 500; 
						}
@font-face { font-family: 'Source Sans Pro';
						src: url('includes/fonts/Source_Sans_Pro/woff2/SourceSans3-MediumIt.otf.woff2'),
								 url('includes/fonts/Source_Sans_Pro/woff/SourceSans3-MediumIt.otf.woff');
						font-weight: 500; 
						font-style: italic;
						}
@font-face { font-family: 'Source Sans Pro';
						src: url('includes/fonts/Source_Sans_Pro/woff2/SourceSans3-Semibold.otf.woff2'),
								 url('includes/fonts/Source_Sans_Pro/woff/SourceSans3-Semibold.otf.woff');
						font-weight: 600; 
						}
@font-face { font-family: 'Source Sans Pro';
						src: url('includes/fonts/Source_Sans_Pro/woff2/SourceSans3-SemiboldIt.otf.woff2'),
								 url('includes/fonts/Source_Sans_Pro/woff/SourceSans3-SemiboldIt.otf.woff');
						font-weight: 600; 
						font-style: italic; 
						}

:root {
	--base-color: white;
  --switch-color: #8c8c8c;
  --text-color: #333;
  --link-color: #235a23;
  --link-hover: #000;
  --externallink: #777;
  --externallink-bgimg: url('images/open_in_new.svg');
  --navtrigger-line: #8c8c8c;
  --button-border-color: transparent;
  --button-bg-color: #eee;
  --button-text-color: #000;
  --button-bg-hover: #d9d9d9;
  --button-text-hover: #000;
}
.highcontrast{
	--base-color: white;
  --switch-color: #5c5c5c;
  --text-color: #000;
  --link-color: #235a23;
  --link-hover: #000;
  --externallink: #777;
  --externallink-bgimg: url('images/open_in_new.svg');
  --navtrigger-line: #fff;
  --button-border-color: #000;
  --button-bg-color: #fff;
  --button-text-color: #000;
  --button-bg-hover: #d9d9d9;
  --button-text-hover: #000;
}
.darkmode{
	--base-color: black;
  --switch-color: #8c8c8c;
  --text-color: #fff;
  --link-color: #fff;
  --link-hover: #ccc;
  --externallink: #fff;
  --externallink-bgimg: url('images/open_in_new_white.svg');
  --navtrigger-line: #fff;
  --button-border-color: #fff;
  --button-bg-color: #000;
  --button-text-color: #fff;
  --button-bg-hover: #777;
  --button-text-hover: #fff;
}

* {box-sizing: border-box;}

body, html {height: 100%;}
body {
	margin: 0;
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 100%;
  font-weight: 500;
  background: var(--base-color);
  color: var(--text-color);
  -ms-text-size-adjust:100%;
  -webkit-text-size-adjust:100%;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

section { display: inline-block; display: -moz-inline-block; }

address, dl, fieldset, figure, ol, pre, ul {
	margin: 0 0 2rem 0;
}

.logo-container {
	flex-basis: 1;
}

.screenshots figure { margin-right: 2%; }

h1 {
  font-weight:600;
  font-size:28px;
  line-height:1.4;
  margin:0 0 16px;
}
@media (max-width:768px) {
  h1 {  font-size:26px; }
}
@media (max-width:600px) {
  h1 {
    font-size:22px;
    margin:0 0 12px;
  }
}
h2 {
  font-weight:600;
  font-size:22px;
  line-height:1.4;
  margin:2rem 0 1rem;
}
@media (max-width:768px) {
  h2 { font-size:20px; }
}
@media (max-width:600px) {
  h2 { font-size:18px; }
}
h3 {
  font-weight:600;
  font-size:20px;
  line-height:1.4;
  margin:2rem 0 1rem;
}
h3:first-child {
  margin-top:0
}
@media (max-width:600px) {
  h3 {  font-size:18px; }
}

p { margin-top: 0; text-align: justify; }

.centered { text-align: center; }

a {
	color: var(--link-color);
	text-decoration: none;
}
a:hover { color: var(--link-hover); }

.externallink { color: var(--externallink); font-weight: bold; background-image: var(--externallink-bgimg); background-repeat: no-repeat; background-position: center left; background-size: 1em; padding-left: 2rem; }
.gray { color: var(--externallink); }

.img-fullwidth { width: 100%; height: auto; }
.has-border { border: 1px solid #cccccc; }

figcaption { font-size: .75rem; }

img#lenacover { max-width: 100%; height: auto; }

hr.section { margin: 24px 0; border-color: white; border-top: 1px solid #d9d9d9; }


.color_1 { color: #7E197F; }
.color_2 { color: #E3001B; }
.color_3 { color: #63B56D; }
.color_4 { color: #334A96; }
.color_5 { color: #F6C800; }
.color_6 { color: #7C1317; }



/**** HEADER ****/

#header {
	width: 100%;
	height: auto;
	margin: auto;
	border-bottom: 2px solid #eeeeee;
	overflow: auto;
}

header#header-top {
	text-align: left;
	padding: 12px 12px 12px 12px;
	overflow: auto;
	display: flex;
	flex-flow: row nowrap;
}

img.header-logo {
	margin: 0 2em 0 0;
	width: 45px;
	height: auto;
}

.controls-container { display: flex; align-items: center; }
.header-top-title { flex: 10; }
.header-top-title h1
{
	font-family: Handlee, cursive;
	font-weight: normal;
	font-size: 1.3rem;
	text-transform: capitalize;
	color: var(--text-color);
	max-width: 80%;
	margin-bottom: 0;
	align-self: flex-end;
}



/****  MAIN ELEMENTS FLEX AND SIZES ****/


#content-wrapper {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	max-width: 1120px;
	min-height: 400px;
}

#menu, 
#content { max-width: 860px; margin: 0 auto; }
#menu { width: 100%; min-width: 260px;}



/**** CONTENT ****/


#content-wrapper {
	margin: 40px auto 0 auto;
	padding: 0 0 5rem 0;
	width: 100%;
	max-width: 1120px;
}

#content_wide {
	text-align: left;
	padding: 1em;
	margin: 40px 0 0 0;
	height: 65%; 
	width: 100%;
}

#content { 
	text-align: left;
	padding: 1em;
}

#icons-collage {
	padding: 2rem 1rem;
	text-align: center;
	width: 100%;
}
#icons-collage img { margin: .1rem; display: inline-block; }

ul.linklist li { padding-bottom: 0.4em; }

.screenshots {
	display: flex;
	margin: 2rem 0 0 0;
}
.screenshots img {
	max-width: 100%;
}
.screenshots .cell {
	flex: 0 0 50%;
}

.image-flexrow {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-flow: row wrap;
}



/* MENU */


#menu {
	padding: 1em 0;
}

#menu ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-flow: row wrap;
}

#menu ul li {
	margin: 0 .5em .5em 0;
	flex-grow: 1;
}

#menu ul li a {
	display: block;
	padding: .5em 1em;
	background-color: var(--button-bg-color);
	color: var(--button-text-color);
	font-size: 1.375rem;
	border: 1px solid var(--button-border-color);
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
}

#menu ul li a:hover, #menu ul li a.current { background-color: var(--button-bg-hover); color: var(--button-text-hover); }


div.button-container { padding-top: .5rem; }
a.button { 
	display: inline-block;
	padding: .5em 1em;
	background-color: #eee; 
	color: #000;
	font-size: 1rem;
	border: 0;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
}
a.button:hover { background-color: #d9d9d9; }

button.lena-start-button {
	padding: .5em 1em;
	background-color: #eee; 
	color: #000;
	font-size: 1rem;
	border: 0;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
}
button.lena-start-button:hover { background-color: #d9d9d9; cursor: pointer; }

.extraspace-v { margin-top: 2rem; margin-bottom: 2rem; }


/* MENU Trigger */

#nav-trigger
{
	cursor: pointer;
	box-sizing: border-box;
	display: flex;
	justify-content: flex-start;
	padding-top: 4px;
}

	.line {
		width: 40px;
		height: 4px;
		background: var(--navtrigger-line);
		margin-bottom: 5px;
	}
	

#main-nav #x-close-wrapper { text-align: right; margin-top: 1em; }
#main-nav a#x-close { text-decoration: none; font-family: mono-space; padding: .1em .3em; background-color: #fff; width: 3em; height: 3em; margin-right: 0.5em; font-size: 2.5em; border: 1px solid #000; }
#main-nav a#x-close:hover { text-decoration: none; }
	
#main-nav {
	position: fixed;
	top: 0;
	left: -100vw;
	z-index: 10000;
	width: 100vw;
	min-height: 23em;
	padding: 0 1rem;
	border-bottom: 1px solid #000;
	background-color: rgba(255,255,255,0.9);
	transition: left .5s;
}

#main-nav ul
{
	margin: 0;
	padding: 0;
	list-style: none;
}

#main-nav ul li { 
	margin: 0;
	padding: 0 0.95rem;
}

#main-nav ul li a
{
	display: block;
	color: #000;
	margin: 0;
	padding: 0.5rem 0 0.5rem 0.5rem;
	text-decoration: none;
	font-size: 1.2rem;
	border-bottom: 4px solid transparent;
}

#main-nav>ul>li:first-child { margin-left: 0; }

#main-nav ul li:first-child a { padding-bottom: .4rem; }

#main-nav ul li a:hover, 
#main-nav ul li a.current { color: #000; text-decoration: underline; }

.menu-divider { border-bottom: 1px solid var(--text-color); }




/* Menu Legende */

.menu_text {
	margin: 30px 0 0 15px;
	font-size: 0.8em;
}


#legende {
	padding-left: 15px;
	padding-top: 30px;
}

#legende ul.list_bewertung {
	padding-top: 16px;
}

#legende li {
	display: block;
	min-height: 26px;
	line-height: 24px;
}

#legende li:first-child {
	border-top: 1px solid #ccc;
}



/* FOOTER */



#footer {
	width: 100%;
	border-top: 1px solid #c6c6c6;
}

#footer_inner {
	width: 100%;
	max-width: 1120px;
	margin: auto;
	padding: 1em;
	display: flex;
	flex-flow: row wrap;
}

div.footer-logo {
	flex: 1 1 100%;
	text-align: center;
	max-width: 228px;
}
.darkmode div.footer-logo { content: url('images/logo-footer-laendliche-entwicklung-bayern-darkmode.png'); }

p.footerlinks
{
	flex: 1 1 auto;
	margin-top: .8em;
	text-align: center;
}
p.footerlinks,
p.footerlinks a { font-size: 0.8rem; }

.footer-sep { display: block; }
.footer-sep::after { content:''; padding: 0; }

.footer_print { display: none; }


/* Media Queries */


@media screen and (min-width:580px) {
	#nav-trigger { margin: 0 1rem; }
	#icons-collage img { margin: 1rem; }
}


@media screen and (min-width:700px) {
	img.header-logo { 
		width: 70px; 
	}
	.header-top-title { flex: 10; }
	.header-top-title h1 { font-size: 1.4em; }
	div.footer-logo {
		padding-right: 1rem;
		text-align: left;
		flex-basis: auto;
	}
	.footer-sep { display: inline; }
	.footer-sep::after { content:'·'; padding: 0 .5rem; }
	p.footerlinks
	{
		flex: 1 1 auto;
		margin-top: 1rem;
		text-align: right;
	}
}


@media screen and (min-width: 1120px) {
	#menu { width: auto; }
	#content-wrapper { flex-wrap: nowrap; }
	#content { min-width: 860px; }
	#icons-collage img { margin: 0 0 1rem 0; display: block; }
	#icons-collage { width: auto; }
}


/* contrast switches */
#theme-switch svg,
#contrast-switch svg {
	fill: var(--switch-color);
}
#theme-switch svg:last-of-type,
#contrast-switch svg:last-of-type {
	display: none;
}
.darkmode #theme-switch svg:first-child,
.highcontrast #contrast-switch svg:first-child {
	display: none;
}
.darkmode #theme-switch svg:last-of-type,
.highcontrast #contrast-switch svg:last-of-type {
	display: block;
}

#accessibility-toolbar {
	border: 2px solid transparent;
	border-radius: 5px;
	padding: 0 !important;
	display: flex;
	justify-content: right;
	align-items: center;
}

#accessibility-toolbar.focus {
	border-color: #005a9c;
	border-width: 3px;
	background: red;
}

#accessibility-toolbar button { 
	cursor: pointer;
	width: auto; 
	height: 34px; 
	background-color: #fff; 
	display: flex;
	justify-content: center;
	align-items: center;
	border: 1px solid rgb(123 123 123);
	padding: 6px 12px;
	border-radius: 5px;
	text-align: center;
	background: rgb(255 255 255);
	color: #222428;
	font-size: 14px;
	line-height: 1.5em;
	margin-right: 0.25em;
}
#accessibility-toolbar button:hover,
#accessibility-toolbar button.active { 
	background-color: #eee; 
}

#accessibility-toolbar button span { display: inline-block; }

#accessibility-toolbar button.popup {
	position: relative;
}

#accessibility-toolbar button .label {
	margin-left: 20px;
}