/* Variables CSS */
:root {
  --color-1: #e6edf3; /* mainBackgrount */
  --color-2: #f6f9fc; /* mainContent */
  --color-3: #0f3c66; /* mainFont; navItems */
  --color-4: #2281d3; /* mainFontActive */
}

/* Structure */
body, html { margin:0; padding:0; }
body { background-color:var(--color-1); margin:0; padding:0; font-family: Verdana; color:var(--color-3); font-size:15px; overflow-y: scroll; }
#page { background-color:#FFFFFF; width:920px; margin:40px auto 5px auto; padding:36px; box-shadow: 0px 0px 4px grey; border-radius:30px;  }
header { padding-top:16px; background-color:#ffffff; }
#logo {  }
#logo img { width:340px; }
#header-mobile { display:none; }
.maincontent { padding:36px; border-radius:20px; background-color:var(--color-2); line-height:24px; }
.home { border-radius:0 0 20px 20px; }
.mood { margin:0 0 -3px 0; position:relative; }
.mood img { width:100%; border-radius:20px 20px 0 0; }
.mood_text { position:absolute; top:70px; right:60px; font-size:32px; color:var(--color-2); width:45%; text-align:left; text-shadow: 3px 3px black; }
#sticky_footer { text-align:center; background-color:var(--color-1); padding:20px 40px; width:920px; margin:0 auto; font-size:12px; }

/* Navigation */
#navigation { display:inline-block; margin-top:30px; font-size:15px; }
#navigation ul { list-style-type:none; margin:0; padding:0; }
#navigation li.nav-item { display:inline-block; margin:0 4px 0 0; font-weight:normal; border-top:1px solid var(--color-3); }
#navigation li.nav-item:hover { border-top:3px solid var(--color-3); }
#navigation a { text-decoration:none; display:inline-block; padding:16px 16px 22px 16px; }
#navigation li.selected { border-top:3px solid var(--color-3); }
#navigation li.selected a { color:var(--color-4); }
.mobile_nav_control { display:none; }

/* General */
h1 { margin:0 0 26px; font-size: 26px; border-left: 10px solid var(--color-3); padding: 6px 6px 6px 16px; }
h2 { margin: 26px 0 0 0; font-size: 16px; font-weight:bold; padding: 2px 4px; background-color: var(--color-1); background-image: linear-gradient(to right, var(--color-1), var(--color-1), var(--color-2)); }
h3 { margin: 22px 0 0 0; font-size: 15px; font-weight:bold; padding: 0; }
h4 { margin: 10px 0 0 0; padding: 4px 0; width:140px; }
h4 + p, h4 + p + p, h4 + p + p + p { margin: -32px 0 18px 0; padding: 4px 4px 4px 140px; }
/* h4 { margin: 10px 0 0 0; background-color: var(--color-1); background-image: linear-gradient(to right, var(--color-1), var(--color-2), var(--color-2)); padding: 4px; }
h4 + p { margin-top: 4px; padding-left: 30px; } */
h5 {  margin:0 0 26px; font-size: 26px; padding: 6px 0px; }
table { border-spacing:0; }
p { margin:10px 0 16px 0; }
ul { padding: 0 0 0 20px; }
li { margin: 0 0 6px 0; }
 
.clear { clear:both; }
.hidden { display:none; }
.nospace { padding:0 !important; margin:0 !important; }
.space10 { margin-left:10px; }
.right { text-align: right; }
.center { text-align: center; }
.note { font-size:10px; font-style:italic; }
.red { color:#de5640 !important; }
.topspace25 { margin-top:25px; } 

a:link, a:visited {color:var(--color-3); text-decoration:underline; border:none; }
a:hover, a:active {color:var(--color-4); text-decoration:underline; border:none; }
a img { border: none; }

/* Content */
div.icons { display:none; }

.avatar { object-fit: cover; border-radius: 50%; }

.hide { display:none !important; }

.column_layout { width: 100%; }
.column_layout td { width:50%; vertical-align:top; padding:0 16px 0 0; }
.column_layout td h2 { margin-top:0; }

#map { margin-top:10px; }
#map iframe { width:100%; }

.expandable { cursor:pointer; }
.expandable:before { content: "⚊ "; }
.expandable:not(.expanded):before { content: "✚ "; } /*🡇🡆⤴➤✖✚⚊*/

/* Form */
#kontakt_form_main { margin-top:10px; }
.formtable input, .formtable textarea { margin:6px 0; padding:6px; border-radius:8px; width:100%; border:1px solid var(--color-3); font-size:15px; color:var(--color-3);  }
.formtable .button { width:100px; background-color:var(--color-3); color:#ffffff; cursor:pointer; }

.form_error { color:#d70000; }
.form_success { color:#107b10; }

/* Mobile Vieport */
@media all and (min-width: 1021px) {
	.hide_desktop { display:none !important; }
	
	h2.expandable { margin-top:4px !important; }
}
@media all and (max-width: 1020px) {
	body, html { margin:0; }
	body { background-color:#FFFFFF; font-size:18px; }
	#page { width:100%; margin:0; padding:0; border-radius:0; box-shadow: none; }
	#header { padding-top:0; }
	#logo { margin:0; padding: 10px 0 20px 10px; }
	#logo img { width:auto; height:82px; }
	#header-mobile { display:inline; }
	#sticky_footer { padding:20px; width:calc(100% - 40px); margin:0; font-size:16px; }
	.maincontent { padding:36px 20px; margin:0; border-radius:0; }
	.mood { }
	.mood img { border-radius:0; }
	.mood_text { position:relative; font-size:26px; width:auto; top:unset; right:unset; color:unset; padding:20px; background-color:var(--color-1); margin-top:-3px; text-shadow:none; }
	
	/* Navigation */
	.mobile_menu_pos { position:absolute; margin:0; padding:20px; right:6px; top:6px; cursor:pointer; }
	.mobile_menu_pos img { width: 34px; }
	#mobile_menu { }
	#mobile_menu_close { display:none; }
	#mobile_menu_close img { width: 23px; }
	
	#navigation { margin:0; padding:0; width:100%; display:none; font-size:20px; }
	.active { display:block !important; }
	#navigation li.nav-item { float:none; display:block; border-top:1px solid #d6d6d6; padding:0; }
	#navigation li.nav-item a { padding:10px 5px 10px 40px; width:calc(100% - 45px); }
	#navigation li.nav-item:hover { background-color:var(--color-1); border-top:1px solid var(--color-3); }
	#navigation li.selected { background-color:var(--color-1); }
	#navigation li.selected a {  }

	.mobile_nav_control { height:40px; display:block; margin-bottom:26px; }
	.mobile_nav_close { float: right; padding: 10px; width: 20px; cursor:pointer; }
	#navigation .mobile_nav_close { padding-right: 20px; }
	#navigation ul { clear:both; }

	/*General*/
	h1 { font-size:28px; }
	h2 { font-size:21px; margin: 36px 0 14px -20px; padding: 6px 6px 6px 20px; }
	h3 { font-size:19px; }
	h4 { width:136px; } 
	h4 + p, h4 + p + p, h4 + p + p + p { padding: 4px 0px 4px 140px; }
	
	.avatar { width:166px; height:auto; }

	.hide_mobile { display:none !important; }
	
	h2.expandable { font-size:16px; margin-top:1px !important; margin-bottom:0px !important; }
	
	table.column_layout, table.column_layout thead, table.column_layout tbody, table.column_layout th, table.column_layout td, table.column_layout tr { display: block; }
	.column_layout td { width:100%; }
	.column_layout td h2 { margin-top:26px; }
	
	.formtable input, .formtable textarea { width:94%; font-size:18px; }
	.formtable .button { width:50%; }
	.formtable { width:100%; }
}