@charset "utf-8";
/* CSS Document */

/* Grundlayout für SELFHTML-Beispiele */

html {
        background: transparent!important;    background: pink;
}
 /*div { border: thin solid red; }   alle div erhalten  .. */

    body {
	margin: 0em auto;
	max-width: 960px;                /* Gesamtbreite */
	font-family: sans-serif;
    color: #C6590B;
    background-color: #FFEDE0;
    }

/* Mobile first - alle Dokument-Blöcke bekommen 100% Breite */
nav, nav a, footer {
  border-radius: 0em;
  border: 0px solid;
  padding: 0.0em 1.0em 0.0em 1.0em;
  margin: 0em;
  flex: 1 100%;
}

header img {

	width: 100%;            /*Bildbreite*/
	/*float: right;      */
	margin: -1em -0em -0em -0em;
	padding:0em;
}

.inhalt1 {
  margin: 0em;
  padding: 0px 5px;
  text-align: center;
  background-color: #FFEDE0;
}

 /* .kopf: 3 Ansichten der Unterkünfte in index.html */
.kopf {
            display: flex;
            flex-wrap: wrap;
       }
.kopf div{
            flex-shrink: 1;
            flex-grow: 1;
            flex-basis: 300px;
            padding: 5px 5px ;
       }
.kopf div img {
            /*  width: 400px; */
            width: 100%;
            float: left;
            margin:0em -0em -0em -0em;
        	padding:0em;
     }
.kopf p:last-child {
  padding: 5em 5em 1em 5em;
  text-align: center;
}
  /* .kopf2: identisch zu .kopf bis auf last child */
.kopf2{
            display: flex;
            flex-wrap: wrap;
       }

.kopf2 div{
            flex-shrink: 1;
            flex-grow: 1;
            flex-basis: 300px;
            padding: 5px 5px;
       }

.kopf2 div img {
            /*  width: 400px; */
            width: 100%;
            float: left;
            margin:0em -0em -0em -0em;
        	padding:0em;
     }
.kopf2 div:last-child {
  padding: 0em 1em;
  text-align: left;
  line-height: 1.3;
}


.Titel figure {
	position: relative;
	overflow: hidden;
	margin-bottom: 0em;         /*Endeabstand   */
 }

figure, figcaption {
  font-style: normal;
  font-size: medium;
  margin: 0em;
  /*margin: 5;
  padding: 3;         */
}

.Titel > figure > figcaption {
    position: absolute;
	bottom: 0;
	width: 100%;
	line-height: 3em;
	color: white;
	font-size: x-large;
	text-align: center;
	background: rgba(0, 0, 0, 0.3);
}

.info1 {
            text-align: center;
            padding: 1em;
    }
.info2{
            display: flex;
            flex-wrap: wrap;
       }
.info2 div{
            flex-shrink: 1;
            flex-grow: 1;
            flex-basis: 300px;
            padding: 5px 5px ;
       }

footer {
            background: #ffcc99;
            display: flex;
            flex-flow: row wrap;
 }
footer * {
  flex: 1 1 0%;
  justify-content: space-between;
}
footer  {
  padding-top: 1em;
  text-align: left;
}

footer p:last-child {
  text-align: right;
}

  /* Smart Phones und Tablets mit mittlerer Auflösung */
  
  
@media all and (min-width: 55em) {
header img {
  margin-right: 50px;
}
.inhalt1 {
  padding:0em 8em;
}
.kopf2 div:last-child {
  line-height: 2.3;
}

}


/* für Gallery */
html1 {
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
img#slideImg {
    max-width: 100%;
    height: auto;
	transition: opacity 0.4s;
}
	div#imgContainer{
		display:flex;
		align-items: center;
		justify-content: space-between;
		position:relative;
	}
	#nextBtn, #prevBtn{
		position:absolute;
		cursor: pointer;
	}
	#nextBtn{
		right: 0px;
	}
	#prevBtn{
		left: 0px;
	}
  
	@media only screen and (orientation: landscape) {
		img#slideImg {
   		max-width: 141vh;
    	max-height: 90vh;
		}     
	}