@charset "utf-8";
html {
	scroll-behavior: smooth;	
}
body, html {
	height: 100%;
	width: 100%;
}
body {
	font: 110%/1.5 'Lato', sans-serif;
	background-color: #5d3000;
	margin: 0;
	padding: 0;
	color: #5d3000;
}
*, ::before, ::after { 
	box-sizing: border-box; 
  	margin: 0;
	padding: 0;
}

/* ~~ Element-/Tag-Selektoren ~~ */
.container img {
	max-width: 100%;
	height: auto;
	margin-bottom: 25px;
}
.container a img {
	border: none;
}
.container a {
	color: #5d3000;
	text-decoration: underline;
}
.container a:hover, a:active, a:focus { 
	color: #826648;
}
.container .footerbox a {
	color: #FFF;
	text-decoration: underline;
}
.container .footerbox a:hover, .container .footerbox a:active, .container .footerbox a:focus { 
	color: #eeeae5;
}
.mainbar p,
.mainbar ul,
.mainbar ol {
	margin-bottom: 25px;
}
.mainbar p + ul,
.mainbar p + ol {
	margin-top: -20px;
}
.mainbar li {
	margin-left: 25px;
}
.container h1 {
	font: 200%/1.5 'Oswald', sans-serif;
	margin-bottom: 15px;	
}
.container h2, .container h3, .container h4, .container h5, .container h6  {
	font: 120%/1.5 'Oswald', sans-serif;
	margin-bottom: 5px;	
}
.banner h1, .banner h2, .banner h3 {
	color: #FFF;
	text-shadow: 0 0 4px #000;	
	margin-bottom: 0;	
}
.contentbox h1, .contentbox h2, .contentbox h3, .contentbox h4, .contentbox h5, .contentbox h6 {
	color: #dc580a;
}
/* ~~ Layout ~~ */
.container {
	width: 100%;
	overflow: hidden;
}
.sidebar {
	background: #eeeae5;
	display: table;
	width: 100%;
}
.logo {
	display: table-cell;
	width: 175px;
	vertical-align: middle;
	padding: 10px 20px;
}
.logo img {
	margin-bottom: 0;
}
.navigation {
	display: table-cell;
	vertical-align: top;	
}
.desktop {
	display: none;
}
.mainbar {
}
.bannerbox {
	background-color: #FFF;
}
.contentbox {
	padding: 20px;
	background-color: #FFF;
}
.footerbox {
	padding: 20px;
	color: #FFF;
	font: 100%/1.4 'Oswald', sans-serif;
}

/* ~~ Navigation ~~ */
.sidebar ul.nav {
	font: 100%/1.5 'Oswald', sans-serif;
	list-style: none;
}
.sidebar ul.nav li {
	border-bottom: 1px solid #FFF;
	background: rgba(238, 234, 229, 0.0);
}
.sidebar ul.nav li:last-of-type {
	border-bottom: none;
}
.sidebar ul.nav a { 
	padding: 3px 10px 3px 20px;
	display: block;
	text-decoration: none;
	color: #5d3000;
	background: rgba(214, 203, 191, 0.3);	
}
.sidebar ul.nav a:hover, .sidebar ul.nav a:active, .sidebar ul.nav a:focus {
	background: rgba(174, 151, 127, 0.3);
}
/* ~~ Gallery ~~ */
.ccm-block-gallery {
	margin: -5px -5px 25px;
}
.ccm-block-gallery .row {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
}
.ccm-block-gallery a {
  	width: 50%;
	border: transparent 5px solid;
	overflow: hidden;
}
.ccm-block-gallery .ccm-block-gallery-image-overlay-color {
  	background-color: rgba(0,0,0,.5) !important;
}
.ccm-block-gallery .ccm-block-gallery-image {
  	padding-top: 0 !important;
	aspect-ratio: 5 / 3;
}
.ccm-block-gallery .ccm-block-gallery-image img {
  	padding-top: 0 !important;
	aspect-ratio: 5 / 3;
	bottom: 0 !important;
  	left: 0 !important;
	right: 0 !important;
  	top: 0 !important;
	margin-bottom: 0;
}
.ccm-block-gallery .ccm-block-gallery-image-overlay-text {
	text-align: center;
	font-weight: 400 !important;
	padding: 10px;
}
.ccm-block-gallery a:before {
  content: url(lupe.svg);
	position: absolute;
	top: calc(50% - 15px);
	left: calc(50% - 15px);
	z-index: 2;
	scale: 0.2;
	opacity: 0;
	 -webkit-transition: all 0.3s;
  	transition: all 0.3s;
}
.ccm-block-gallery a:hover:before {
	scale: 1;
	opacity: 1;
}

.pswp__caption__center {
    font-size: 100% !important;
}

/* ~~ Verschiedene float/clear-Klassen ~~ */
.breit { 
	clear: both;
}
.clearfloat {
	clear:both;
	height:0;
	font-size: 1px;
	line-height: 0px;
}
@media only screen and (min-width : 600px) {
.footerbox .fltrt { 
	float: right;
	width: 45%;
}
.footerbox .fltlft { 
	float: left;
	width: 45%;
}
}
@media only screen and (min-width : 800px) {
/* ~~ Layout ~~ */
.sidebar {
	width: 200px;
	position: fixed;
	overflow-x: hidden;
	overflow-y: auto;
	height: 100vh;
	box-shadow: -4px 0 4px 0 #cec0b2 inset;
}
.logo {
	display: block;
	width: inherit;
	padding: 20px;
}
.navigation {
	display: block;	
}
.mainbar {
	margin-left: 200px;
}	
/* ~~ Gallery ~~ */
.ccm-block-gallery a {
  	width: 33.333%;
}
}
@media only screen and (min-width : 1024px) {
.footerbox {
	font: 105%/1.4 'Oswald', sans-serif;	
}
.fltrt { 
	float: right;
	width: 45%;
}
.fltlft { 
	float: left;
	width: 45%;
}	
/* ~~ Navigation ~~ */
.sidebar ul.nav {
	font: 105%/1.5 'Oswald', sans-serif;
}
}
@media only screen and (min-width : 1240px) {
/* ~~ Element-/Tag-Selektoren ~~ */	
.container h1 {
	font: 300%/1.5 'Oswald', sans-serif;
	margin-bottom: 25px;	
}
.container h2, .container h3, .container h4, .container h5, .container h6  {
	font: 170%/1.5 'Oswald', sans-serif;
	margin-bottom: 10px;	
}
/* ~~ Layout ~~ */
.sidebar {
	width: 350px;
	position: fixed;
	overflow-x: hidden;
	overflow-y: auto;
	height: 100%;
	box-shadow: -4px 0 4px 0 #cec0b2 inset;
}
.logo {
	display: block;
	width: inherit;
	padding: 15px;
}
.desktop {
	display: block;
}
.mobile {
	display: none;
}
.navigation {
	display: block;	
}
.mainbar {
	margin-left: 350px;
}	
.contentbox {
	padding: 40px 60px 25px;
}
.footerbox {
	font: 110%/1.4 'Oswald', sans-serif;	
	padding: 20px 60px;
}
/* ~~ Navigation ~~ */
.sidebar ul.nav {
	font: 110%/1.5 'Oswald', sans-serif;
	border-top: 1px solid #FFF;
	margin-bottom: 15px;
}
.sidebar ul.nav li:last-of-type {
	border-bottom: 1px solid #FFF;
}
.sidebar ul.nav a { 
	padding: 10px 5px 10px 55px;	
}
/* ~~ Gallery ~~ */
.ccm-block-gallery a {
  	width: 25%;
}
}