@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
/* @import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');
*/

@font-face {
  font-family: 'MSO';
  font-style: normal;
  font-weight: 100 700;
  src: url("./img/mso_part.woff2") format('woff2');
}

/*
--- elements
*/

* {
	padding: 0;
	margin: 0;
}

html {
	min-height: 100;
	font-family: Roboto, sans-srif;
}

body {
	background: #eee;
	color: #333;
	font-size: 1em;
}

header, footer {
	padding: 1.6em 2em;
}

footer {
	margin-top: 2em;
}

section {
	padding: 0 3em;
	overflow: hidden;
}

header, footer {
	background: linear-gradient(#bd7, #df9);
}

h1, h2, h3, h4, h5, h6 {
	font-weight: bolder;
	color: #3a0;
	padding: 0.5em 0 0.3em 0;
}

h1 {
	font-size: 2em;
}

h2 {
	font-size: 1.6em;
}

h3 {
	font-size: 1.4em;
}

h4 {
	font-size: 1.2em;
}

h5 {
	font-size: 1.1em;
}

h6 {
	font-size: 1em;
}


p, ul, ol {
	padding: 0.3em 0;
}

ul ul, ol ol {
	margin-left: 3em; 
}

ul>li, ol>li {
	list-style-position: inside;
}

a {
	color: #006;
	font-weight: bolder;
	text-decoration: none;
}

a:visited {
	color: #069;
}

a:hover {
	color: #009;
	text-decoration: underline;
}

/*
--- google font icons
*/
.mdi {
	font-family: MSO;
  	font-variation-settings:
  		'FILL' 0,
  		'wght' 200,
  		'GRAD' 0,
  		'opsz' 24;
}

/* 
--- classes, etc
*/

div.bodycontainer {
	margin: auto;
	width: 90%;
	min-width: 900px;
	max-width: 1200px;
	overflow: hidden;
	background: #fff;
}

header div.logo {
	font-size: 1.4em;
	line-height: 1.4em;
	font-weight: bolder;
}

header div.logo, header nav, header div.auth {
	display: inline-block;
	padding: 0 1em;
}

header .logo a {
	color: #310;
	text-decoration : none;
}

header .logo img {
	height: 1.6em;
	width: auto;
	margin-bottom: -0.4em;
}

header nav {
}

header nav ul {
	height: 100%;
	list-style: none;
	display: flex;
	flex: row nowrap;
	align-items: center;
	box-sizing: border-box;	
}

nav ul li, nav>span {
	list-style: none;
	display: inline-block;
	padding: 0 0.5em;
}

nav a, nav a:visited, nav a:active {
	color: #360;
	text-decoration : none;	
}

nav a:hover {
	color: #630;
	text-decoration : none;	
}

/* --- menu button */

header nav input#menutoggle {
	display: none;
}

header nav label.menubutton {
	display: none;
	padding: 0em;
	font-size: 2em;
	color: #630;
	border: 0;
	background: none;
	font-family: 'MSO';
}

header nav #menutoggle + .menubutton #menubutton::before {
	content: 'menu';
}

header nav #menutoggle:checked + .menubutton #menubutton::before {
	content: 'arrow_outward';
}

header nav #menutoggle:checked ~ ul {
	visibility: visible;
}

div.pageNav {
	padding: 1em 0;
	font-size: 0.9em;
}

.pageNav ul>li {
	display: inline-block;
	padding: 0 1em;
}

/* --- main page classes */

section.hero {
	width: auto;
	height: auto;
	padding: 1em 4em;
	background: linear-gradient(0.25turn, #fffe, #fff9,#fff0), url("./img/bgwinter.jpg") no-repeat;
}

.hero {
	font-weight: 400;
	color: #310;
}

.hero ul {
	list-style: none;
}

.hero ul>li {
	height: 3em;
	display: flex;
	align-items: center;   
}

.hero ul>li span.mdi {
	font-size: 2em; 
}

.hero h1 {
	font-weight: 300;
	font-size: 2.2em;
	color: #310;
}

ul.newslist {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	column-gap: 1em;
	row-gap: 1em;
	padding: 0;
}

ul.newslist>li {
	padding: 0.5em 0;
	list-style: none;

}

ul.newslist>li h3 {
	font-size: 1.2em;
	color: #f60;
}

ul.newslist>li img {
	width: 100%;
	height: 8em;
	object-fit: cover;
	object-position: center;
}

.newsimportant h2 {
	color: #f60;
}

div.date, span.date {
	font-size: 0.8em;
	color: #666;
}

ul.counterlist {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	column-gap: 1em;
	row-gap: 1em;
	padding: 0;
}

ul.counterlist>li {
	padding: 0.5em 0;
	list-style: none;
}


ul.counterlist>li strong {
	display: block;
	color: #f60;	
	font-weight: 900;
	font-size: 4em;
}

ul.counterlist>li p {
	padding: 0;
}


img.qrcode {
	width: auto;
	height: auto;
	min-width: 100px;
	max-width: 4cm;
	float: left;
	padding-right: 1em;
}

article.sticky img {
	width: 100%;
	height: 10em;
	object-fit: cover;
	object-position: center;	
}

/* --- news page classes (& sticky) */
.news article {
	overflow: hidden;
}

.news article img { 
	float: left;
	height: 6em;
	width: 10em;
	padding-right: 2em;
	object-fit: cover;
	object-position: center;	
}

.news article .date, article.sticky .date {
	font-size: 0.8em;
	color: #666;	
}


*.marked {
	color: #f60;
}



/*
	-- Styles for mobile devices, small screens and printings
*/

@media screen and (max-width: 1000px) {
	body {
		font-size: 0.9em;
	}

	div.bodycontainer {
		min-width: 600px;
		width: 100%;
		margin: 0;
	}
}

@media screen and (max-width: 800px) {
	body {
		font-size: 0.8em;
	}
}


@media screen and (max-device-width: 768px) {
	body {
		font-size: 2.2em;
	}

	div.bodycontainer {
		min-width: 0;
		width: 100%;
		margin: 0;
	}

	section {
		margin: 0;
		padding: 1em;
	}

	header, footer {
		padding: 0.6em 0;
	}

	header {
		display: grid;
		grid-template-columns: 8fr 2fr;
	}

	header>* {
		align-items: stretch;
	}

	header nav {
		width: auto;
		text-align: right;
	}

	header nav label.menubutton {
		display: block;
	}

	header nav ul{
		position: absolute;
		left: 0;
		width: 100%;
		height: auto;
		margin: 0.4em 0;
		font-size: 1.4em;
		padding: 0.5em 1em;
		z-index: 1001;
		list-style: none;
		display: block;
		background: #eee;
		visibility: hidden;
	}

	header nav ul li {
		display: block;
		padding: 0.3em;
	}

	header nav ul li a {

	}

	section.hero {
		display: none;
	}

	ul.newslist, ul.counterlist {
		display: block;
	}

}