html{
	height:100%;
	margin:0px;
	padding:0px;
	border:0px;

	overflow-y: scroll;
	scrollbar-color: #444 #eee;
	scrollbar-width: thin;
}

body{
	height:100%;
	margin:0px;
	padding:0px;
	border:0px;
	
	background-color: #646159;
	
	background-image: url('/img/bg-default.webp');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
	background-size:cover;
	
	color: white;
	text-align: left;
	font-family:Montserrat, sans-serif;
	font-weight: 400;
		
	font-size:12px;
	line-height:1.5em;
}

@media (min-width: 400px) {
	body { font-size: 14px; }
}
@media (min-width: 600px) {
	body { font-size: 16px; }
}

a{
	text-decoration:none;
	color:black
}
a:hover{
	text-decoration:underline;
}


.panelBg{
	height:100%;
	width:100%;
}

.panelScroll{
	min-height:100%;
	width:100%;
	
	display: flex;
	flex-direction: column;
	align-items: center;
}



/* ===== Quote ===== */
blockquote {
    font-style: italic;
    margin: 0.25em 0;
    padding: 0.25em 40px;
    text-align: justify; 
    line-height: 1.45;
    position: relative;
	display:inline-block;
	background-color: rgba(250, 200, 130, 0.2);
	font-size:1.2em;
}

blockquote p {
  margin: 1em 0 0 0;
}
blockquote p + p {
  margin: 0.3em 0 0 0 /* dezenter Abstand zwischen den Zeilen */
}

blockquote:before {
    display: block;
    content: "\201C";
    position: absolute; 
    font-size: 5em;
    left: -0.20em;
    top: -0.1em;
    color: #7a7a7a;
}

blockquote cite {
    color: black;
    font-size: 0.8em;
	font-weight:300;
    display: block;
    margin-top: 0.25em;
	padding-right: 1em;
	text-align:right;
}


/* ===== Header ===== */
.panelTop{
	width: 100%;
	max-width:1200px;
	margin: 0 auto; 
	display:flex;
}
.panelTopLeft{
	width: 4em;
	flex: 0 0 4em;
	text-align: center;
}
.panelTopCenter{
	flex: 1 1 auto;
	text-align: right;
	font-size:0.9em;
}
.panelTopRight{
	width: 4em;
	flex: 0 0 4em;
	text-align: center;
}
.panelTop a{
	background-color:transparent;
	display:inline-block;
	padding:0.45em 1em 0em 1em;
	color:white;
}


/* ===== Footer ===== */
.panelBottom{
	padding:0.5em 0 0.5em 0;
	
	width: 100%;
	max-width:1200px;
	
	display:flex;
	text-align:center;
	
	margin-top: auto;
	margin-left: auto;
	margin-right: auto;
}
.panelBottomLeft{
	width:33%;
	padding:1em;
	font-size:0.9em;
	border-right:1px solid #bbb;
	display:none;
}
.panelBottomCenter{
	width:33%;
	padding:0 1em 0 1em;
	
	font-size:0.9em;
}
.panelBottomRight{
	width:33%;
	padding:1em;
	font-size:0.9em;
	border-left:1px solid #bbb;
	display:none;
}
.panelBottom a{
	background-color:transparent;
	display:block;
	color:white;
}


/* ===== Body ===== */
.panelBody{
	width: 100%;
	flex: 1 0 auto;
}

.panelFull{
	width: 100%;
	text-align:center;
}

#panelVision{
}

#imgVision{
	max-width:100%;
	margin:auto;
}

.panelContent{
	max-width:1172px;
	margin:auto;
	padding:0 1em 0 1em;
}

.floatBox{
  
  float:right;
  width: 100%;
  height: 0em;
	  
  position:relative;
}

.floatBox img{
	opacity:1;
	position:absolute;
	top:0;
	right:0;
	width:100%;
	height:20em;
	  
	object-fit: cover;
	z-index:-1;
}
.floatBox.hero img{
	height:20em;
}
.floatBox.og img{
	max-width:1200px;
	height:auto;
}

h1{
	font-size:1.8em;
	font-weight:600;
}
h2{
	font-size:1.2em;
	font-weight:500;
}
h3{
	font-size:1.1em;
	font-weight:400;
	font-style:italic;
}

h1 span, h2 span, h3 span, p span{
	background-color:#fff0;
	padding:0.2em 0.5em 0.2em 0.5em;
	margin:0 -0.5em 0 -0.5em;
	line-height:1.3;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
  }

/* ===== Desktop ===== */
@media (min-width: 960px){

  .floatBox{
    width: 40%;
    height: 20em;
  }
  .floatBox img{
	  position:absolute;
	  top:0;
	  right:0;
	  width:130%;
  }
}


/* ===== Menu(s) ===== */

.panelMenuLanguage,
.panelMenuBook,
.panelMenuContext,
.panelMenuMobile {
  position: absolute;
  top: 0em; /* oder was du brauchst */
  right: 0;
  left:0;
  bottom:0;
  white-space: nowrap; /* optional: verhindert Umbruch bei einzeiligem Inhalt */
  
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  
  background-color:transparent;
  
  text-align:right;
}

.panelMenuLanguage,
.panelMenuBook,
.panelMenuContext{
	
	text-align:left;
}

.panelMenuLanguage a,
.panelMenuBook a,
.panelMenuContext a,
.panelMenuMobile a{
  font-size: 1.2em;
  padding: 0.4em;
  line-height: 1;
  cursor: pointer;
  display: block;
  background: transparent;
  border: none;
  text-decoration:none;
}
.panelMenuLanguage a:hover,
.panelMenuBook a:hover,
.panelMenuContext a:hover,
.panelMenuMobile a:hover{
	background-color:#80808080;
}
.panelMenuLanguage hr,
.panelMenuBook hr,
.panelMenuContext hr,
.panelMenuMobile hr{
	border:1px solid #eee;
}

#menuMobile{
	display:block;
}
#menuDesktop{
	display:none;
}

/* jeweils aktiv */
#menu-language:checked ~ .panelMenuLanguage,
#menu-book:checked     ~ .panelMenuBook,
#menu-context:checked  ~ .panelMenuContext,
#menu-mobile:checked   ~ .panelMenuMobile {
  opacity:1; visibility:visible; pointer-events:auto;
}

/* Body ausblenden, wenn irgendein Menü aktiv ist */
input[name="menu"]:not(#menu-none):checked ~ .panelBody { opacity:0; }


@media (min-width: 640px) {
    #menuMobile {	display: none;  }
	#menuDesktop { display: block;  }
	.panelBottomLeft {display: block}
	.panelBottomRight {display: block}

}