@font-face {
  font-family: "GentiumBookPlus-Regular";
  src:url("fonts/GentiumBookPlus-Regular.woff")
      format("woff");
}
@font-face {
  font-family: "HomemadeApple-Regular";
  src:url("fonts/HomemadeApple-Regular.woff")
      format("woff");
}


html, body {padding:0;margin: 0;}
body {font-family: 'Gentium Book Plus', serif;overflow-x:hidden;font-size:1vw;}
br.clear {clear: both;}
.popup {
	position: fixed;
	bottom: 0;
	width: 100vw;
	height: 0;
	background-color: white;
	z-index: 100000;
	overflow:auto;
	transition: height 2s;
	left: 0;
}
.dcont {padding:10vw;}
.dheader {position: absolute;right: 5vw;top: 5vw;font-size: 5em;color: darkred;cursor: pointer;}

.popactiv {height: 100vh !important;}

#nav-mob {display: none;}
#burger {display: none;}

nav {position: absolute;top: 2vh;z-index: 101;}
nav a {color: black;text-decoration: none;padding-left: 0.5vw;padding-right: 0.5vw;}
nav a.aktiv {color: white;background-color: black;}

#nachoben {position: fixed;bottom: 5vh;right: 1vw;}

#nachoben img {width: 3vw;height: 3vw;}

footer {}
footer a {color: black;text-decoration: none;padding-left: 5vw;padding-right: 5vw;cursor: pointer;}

footer #links {width: 33.3%;float: left;text-align: left;background-color: lightgrey;}
footer #rechts {width: 33.3%;float: left;text-align: right;background-color: lightgrey;}
footer #mitte {width: 33.3%;float: left;text-align: center;background-color: lightgrey;}

#ibilder {width: 100%;display: flex;justify-content: space-around;position: relative;}
#ibilder img {width: 30%;}

.content {min-height: 100vh;}
#bildf {position: absolute;width: 50vw;right: 0;top:0;height: 150vh;overflow: hidden;text-align: right;}
#bildf img {height: 150vh;width: auto;}
#front {background-color: white;}
#front #text {width: 50%;display: flex;justify-content:center;align-items: center;height: 100vh;z-index: 99;position: relative;}

#front #text {
	z-index: 100;
	
	background-image: url(../img/frank_logo.png);
	background-size: 60% auto;
	background-position: center 25%;
	background-repeat: no-repeat;
	
	
}
#front #text .align {
	color: black;
	

	}
	

#front #text .align h1 {font-size: 4vw;margin-top: 60vh;}
#front #text .align p {text-align: center;}




#front2 {
	background: rgb(255,255,255);
	background: linear-gradient(40deg, rgba(255,255,255,1) 39%, rgba(155,201,122,0.7) 85%);
	
}
#front2 p {
  font-size: 2vw;
  line-height: 1.5em;
}
#front2 p.klein {color: #797983;text-align: left;padding-left: 5vw;width: 40vw;}
#front2 p.ganz {color: #797983;text-align: left;padding-left: 5vw;width: 90vw;}
#front2 p.gros {
	font-size: 4vw;
	color: #3C3734;
	width: 70%;
	margin-left: 15%;
	padding-top: 10vh;
	text-align: center;
	
  font-family: 'HomemadeApple-Regular', cursive;
	}

#front2 a {color: black;font-size: 1.5vw;margin-left: 45vw;}

#front3 {
	background: rgb(208,165,161);
	background: linear-gradient(40deg, rgba(208,165,161,0.7) 13%, rgba(155,201,122,0.4) 85%);
	padding-top: 10vh;
}
#front3 h2{margin: 0;padding: 0;padding-left: 5vw;}
#kastenfeld {width: 80%;position: relative;margin:0;padding: 0;margin-left: 10%;display: grid;grid-template-columns: auto auto auto;}
#kastenfeld .kasten {margin:5%;display:flex;justify-content:center;align-items:center;font-size: 1vw;}
#kastenfeld .kasten > div {background-color: white;padding:1%;width: 96%;height: 96%;box-shadow: 1px 1px 1px black, -1px -1px 1px black;position: relative;}
#kastenfeld .kasten .bild {width: 23vw;overflow: hidden;height: 65vh;border:1px solid lightgrey;}
#kastenfeld .kasten .bild img {width: 100%;height: 100%;}
#kastenfeld .kasten p.shorty {height: 30vh;overflow: auto;padding-left: 1vw;padding-right: 1vw;margin-bottom: 10vh;padding-bottom: 3vh;}
#kastenfeld .kasten a {color: black;text-decoration: none;}
#kastenfeld .kasten h3 span {font-size: 0.6em;}

#kastenfeld .kasten .button {position: absolute;bottom: 1%;margin-left: 5%;width:89%;display:flex;justify-content:space-between;}
#kastenfeld .kasten .button button {font-size: 0.9em;}
#kastenfeld .kasten .button span {font-size: 0.7em;background-color: darkred;color: white;display: flex;align-items: center;padding: 0.5em;border-radius: 3px;}
#kastenfeld .kasten .button span.red {}
#kastenfeld .kasten .leseprobe,
footer .popup
{position: fixed;width: 100%;height: 100vh;background-color: white;top: 0;left: 0;z-index: 10000;overflow: auto;display: none;}
#kastenfeld .kasten .leseprobe .text {
	margin: 5vw;
	padding-bottom: 10vh;
 	-ms-user-select: None;
	-moz-user-select: None;
	-webkit-user-select: None;
	user-select: None;
}
#kastenfeld .kasten .leseprobe .text .rtext {overflow:auto !important; height: 80vh;padding-right: 1vw;}
#kastenfeld .kasten .leseprobe .text .rtext p {}


#kastenfeld .kasten .leseprobe .text .leseheader {position: fixed;top: 0;width: 100vw;background-color: lightgrey;left: 0;text-align: center;font-size: 1.5vw;}
#kastenfeld .kasten .leseprobe .text .leseheader .opt {position: absolute;left: 2vw;display: flex;justify-content:space-around;width: 15%;vertical-align: middle;}
#kastenfeld .kasten .leseprobe .text .leseheader .opt img {width: 0.9em;height: 0.9em;vertical-align: middle;}
#kastenfeld .kasten .leseprobe .text .leseheader .opt span {font-size:0.7vw;font-weight: bold;padding: 0.1vw;background-color: white;padding-top: 0;margin-top: -1vw;position: relative;border-radius: 100%;}
#kastenfeld .kasten .leseprobe .text .leseheader .opt .normal {font-style: normal;}
span.kleiner {font-size: 0.6em;}

#kastenfeld .kasten .leseprobe .text .lesefooter {position: fixed;bottom: 0;width: 100%;background-color: lightgrey;margin-left: -5vw;text-align: center;}

.hyphen, .kasten p {
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
  transition: all 50ms;
  text-align: justify;
}
p.more {margin:0;padding: 0;width: 100%;text-align: center;padding-bottom: 10vh;}
p.more a {color: black;font-size: 2em;}

body.published {
	background: rgb(222,192,189);
background: linear-gradient(32deg, rgba(222,192,189,1) 30%, rgba(155,201,122,0.2) 59%);
background-attachment: fixed;
}
body.published h1 {display: none;}
body.published nav,
body.kontakt nav,
body.kontaktantwort nav,
body.impressionen nav
 {margin-left: 31%;}
body.published #kastenfeld {padding-top: 10vh;}
body.published #buch h1 {margin: 0;padding: 0;padding-top: 10vh;width: 100%;text-align: center;margin-bottom: 10vh;}
body.published #buch #filter {display: flex;justify-content:flex-start;align-items: center;width: 40%;padding-top: 10vh;padding-left: 5vw;}
body.published #buch #filter button {margin-right: 1vw;}


body.kontakt,
body.conditions,
body.impressionen,
body.kontaktantwort
 {
	background: rgb(222,192,189);
background: linear-gradient(32deg, rgba(222,192,189,1) 30%, rgba(155,201,122,0.2) 59%);

height: 100vh;
width: 100vw;
}
 
body.kontakt #kontakt {padding-top: 10vh;height: 87.5vh;}
body.kontakt #kontakt #formular {width: 50%;float: left;height: 100%;display: flex;justify-content: center; align-items: center;}
body.kontakt #kontakt #formular a {color: darkred;}
body.kontakt #kontakt #kbild {width: 50%;float: left;height: 100%;overflow: hidden;}
body.kontakt #kontakt #kbild img {height: 100%;float: left;margin-left: -5vw;}

body.kontakt #kontakt #bbild {width: 50%;float: left;height: 85%;overflow: hidden;padding-top: 15%;}
body.kontakt #kontakt #bbild img {height: 50%;float: left;max-width: 50%;}
body.kontakt #kontakt #bbild .shorty {width: 50%;float: left;padding: 5vw;margin-top: -10vh;}

body.kontakt #kontakt #formular td {width: 98%;padding:1%;}
body.kontakt #kontakt #formular td input {width: 100%;}
body.kontakt #kontakt #formular td textarea {width: 100%; height: 10em;}
body.kontakt #kontakt #formular td.kurz {width: 20%;overflow: hidden;display: inline-block;white-space: nowrap;}
body.kontakt #kontakt #formular td.lang {width: 75%;overflow: hidden;display: inline-block;white-space: nowrap;}
body.kontakt #kontakt #formular td h1 {text-align: center;}


body.kontaktantwort #kontaktantwort {width: 100%;height: 86%;margin-top: 5%;display: flex;justify-content: center; align-items: center;text-align: center;}

body.conditions #conditions {height: 97vh;width: 100vw;}
body.conditions nav {margin-left: 15vw;}
body.conditions #conditions #content {width: 70%;height: 100%;float: left;display: flex;justify-content: center;align-items: center;}
body.conditions #conditions #content > div {width: 70%;margin-left: 15%;}
body.conditions #conditions #bild {width: 40%;position: absolute;height: 97%;right: 0;overflow: hidden;}
body.conditions #conditions #bild video {position: absolute;right: 5vw;height: 100vh;width: 50vw;cursor: pointer;margin-right: -10vw !important;}
body.conditions #conditions #bild img {height: 100%;}
body.conditions #conditions #content ul {list-style: none;margin:0;padding:0;}
body.conditions #conditions #content ul li {margin-bottom: 1em;}
body.conditions footer {bottom:0;}

body.impressionen #impressionen {padding: 30vh;height: 75vh;padding-top: 15vh;}
body.impressionen #impressionen #gal {
  background-color: rgba(0,0,0,1);
  width: 75vw;
  height: 80vh;
  padding-left: 5vw;
  margin-left: -5vw;
  
}
body.impressionen #impressionen #gal #show {width: 50%;float: left;overflow: hidden;position: relative;height: 100%}
body.impressionen #impressionen #gal #show img {width: 100%;}
body.impressionen  #gal #caption {
	width: 50%;
	float: right;
	color: white;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;

	}
body.impressionen #gal #caption p {	
	font-family: 'HomemadeApple-Regular', cursive;
	font-size: 2em;
	width: 50% !important;
	text-align: center;
}
body.impressionen footer {width: 100vw;left: 0;position: absolute;bottom: 0;}
/*---------------------------------------------*/
#cookiedingsbums a {color:#000; text-decoration:none;}

#cookiedingsbums a:hover {text-decoration:underline;}

#cookiedingsbums div {padding:10px; padding-right:40px;}

#cookiedingsbums { 
   outline: 1px solid #7b92a9; 
   text-align:right; 
   border-top:1px solid #fff;
   background: #d6e0eb; 
   background: -moz-linear-gradient(top, #d6e0eb 0%, #f2f6f9 100%); 
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d6e0eb), color-stop(100%,#f2f6f9)); 
   background: -webkit-linear-gradient(top, #d6e0eb 0%,#f2f6f9 100%); 
   background: -o-linear-gradient(top, #d6e0eb 0%,#f2f6f9 100%);
   background: -ms-linear-gradient(top, #d6e0eb 0%,#f2f6f9 100%); 
   background: linear-gradient(to bottom, #d6e0eb 0%,#f2f6f9 100%); 
   
   position:fixed;
   top:30vh; 
   z-index: 99999999; 
   width:100%; 
   font-size:1.2vw; 
   line-height:16px;
   height: 10vh;
   display: flex;
   align-items: center;
   justify-content:center;
  }

#cookiedingsbumsCloser {
   color: #777;
   font: 14px/100% arial, sans-serif;
   position: absolute;
   right: 5px;
   text-decoration: none;
   text-shadow: 0 1px 0 #fff;
   top: 5px;
   cursor:pointer;
   border-top:1px solid white; 
   border-left:1px solid white; 
   border-bottom:1px solid #7b92a9; 
   border-right:1px solid #7b92a9; 
   padding:4px;
   background: #ced6df; /* Old browsers */
   background: -moz-linear-gradient(top, #ced6df0%, #f2f6f9 100%); 
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ced6df), color-stop(100%,#f2f6f9)); 
   background: -webkit-linear-gradient(top, #ced6df0%,#f2f6f9 100%); 
   background: -o-linear-gradient(top, #ced6df0%,#f2f6f9 100%); 
   background: -ms-linear-gradient(top, #ced6df0%,#f2f6f9 100%); 
   background: linear-gradient(to bottom, #ced6df0%,#f2f6f9 100%); 
   
 }

#cookiedingsbumsCloser:hover {border-bottom:1px solid white; border-right:1px solid white; border-top:1px solid #7b92a9; border-left:1px solid #7b92a9;}
#cookiedingsbums span {text-shadow: 1px 1px 1px black;}

/* -----------------------------------------------------------*/


@media only screen and (orientation: portrait) {
	body {font-size: 1vh;overscroll-behavior: contain;}
	
	#nachoben img {width: 10vw;height: 10vw;}
	nav {display: none;}
	.content {min-height: 100vh;}
#bildf {position: relative;width: 100%;right: 0;height: auto;overflow: hidden;text-align: right;margin-top: -15vh !important;}
#bildf img {height: auto;width: 100%;}
#front {background-color: white;}
#front .align {}
#front #text {
	width: 100%;
	display: flex;
	justify-content:center;
	align-items: center;
	z-index: 99;
	position: relative;
	height: 50vh !important;
	margin-top: 20vh;
	background-size: auto 80%;
	background-position: center top;
	font-size: 5vw;
	}
#front #text .align h1 {font-size: 7vw;width: 100%;text-align: center;}
#front2 p {
	font-size: 7vw;
	-webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
  text-align: justify;	
	}
#front2 p.klein {width: 90vw;}
#front2 p.gros {
	font-size: 9vw;
	-webkit-hyphens: none;
  -ms-hyphens: none;
  hyphens: none; 	
	}
#front2 a {font-size: 7vw;margin-left: 25vw;}
#kastenfeld {grid-template-columns: auto;}
#kastenfeld .kasten .bild {width: 100%;height: auto;}

#kastenfeld .kasten {font-size: 5vw;
	-webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto ! important;
}
#kastenfeld .kasten p.shorty {
	-webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto ! important;
  
}
#burger {display: block;position: fixed;top: 5vw;left: 5vw;width: 10vw;height: 10vw;z-index: 10000000;}
#burger img {width: 100%;height: 100%;}

#nav-mob {position: fixed;width: 0vw;height:100vh;top:0;left:0;background-color: black;color: white;z-index: 1000;display: none;transition:all 1s linear;}
#nav-mob.on {display: flex;align-items: center;justify-content: center;width: 80vw; }
#nav-mob a {font-size: 7vw;color:white;text-decoration: none }
#nav-mob ul {list-style-type: none;padding: 0;margin: 0;}
#nav-mob ul li {margin-bottom: 5vh;}
footer {font-size: 5vw;display: flex;justify-content: space-between;}
footer #mitte {display: none; }
.popup {font-size: 7vw;padding-top: 0;}
.popup .dheader {font-size: 2em;}
#ibilder {width: 100%;display: block;}
#ibilder img {width: 100%;}

#kastenfeld .kasten .leseprobe {z-index: 10000001;}

#kastenfeld .kasten .leseprobe .text .leseheader .font,#kastenfeld .kasten .leseprobe .text .leseheader .night {display: none;}
#kastenfeld .kasten .leseprobe .text .leseheader {width: 90vw;padding-left: 10vw;font-size: 5vw;}
span.kleiner {display: block;}
body.published h1 {display: block;width: 100%;text-align: center;font-size: 5vw;padding-bottom: 5vh;}

body.kontakt #kontakt {padding-top: 10vh;height: 87.5vh;}
body.kontakt #kontakt #formular {width: 90%;float: none;height: 100%;margin-left: 5%;}
body.kontakt #kontakt #formular h1 {font-size: 5vw;}

body.kontakt #kontakt #kbild {float: none;height: auto;width:105%;overflow: hidden;}
body.kontakt #kontakt #kbild img {height: auto;width: 100%;float: left;margin-left: -5vw;}

body.kontakt #kontakt #bbild {width: 80%;float: none;height: 85%;overflow: hidden;padding-top: 5%;padding-left: 10%;}
body.kontakt #kontakt #bbild img {height: 50%;float: left;max-width: 50%;}
body.kontakt #kontakt #bbild .shorty {width: 35%;float: right;padding: 5vw;height: 50vh;display:flex;align-items: center;justify-content: center; }


body.kontakt #kontakt #formular td {width: 98%;padding:1%;}
body.kontakt #kontakt #formular td input {width: 100%;}
body.kontakt #kontakt #formular td textarea {width: 100%; height: 10em;}
body.kontakt #kontakt #formular td.kurz {width: 20%;overflow: hidden;display: inline-block;white-space: nowrap;}
body.kontakt #kontakt #formular td.lang {width: 75%;overflow: hidden;display: inline-block;white-space: nowrap;}
body.kontakt #kontakt #formular td h1 {text-align: center;}

body.kontakt #kontakt #submitmobbest td input {position: fixed;bottom: 3vh;width: 90%;text-align: center;font-size: 5vw;padding: 5vw;}

body.kontaktantwort #kontaktantwort p {font-size: 5vw;padding-left: 5vw;padding-right: 5vw;}

body.conditions #conditions #content {width: 90%;height: 100%;float: none;font-size: 5vw;}
body.conditions #conditions #content > div {width: 90%;margin-left: 0;padding-left: 5vw;}
body.conditions #conditions #bild {width: 100%;position: relative;height: auto;right: 0;overflow: visible;}
body.conditions #conditions #bild video {position: absolute;right: 0;height: auto;width: 100vw;cursor: pointer;margin-right: 0 !important;}

body.impressionen #impressionen {padding: 0;height: 75vh;padding-top: 15vh;}
body.impressionen #impressionen #gal {
  background-color: rgba(0,0,0,1);
  width: 100vw;
  height: 80vh;
  padding-left: 0w;
 }
body.impressionen #gal #caption p {
	font-size: 5vw;
	-webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto ! important;
 }

.popactiv {height: 93vh !important;}

footer {display: none;}
}