:root{
  --color-1:#9854b7;
  --text-color:#f0f0f0;
  --accent-color:#d58de6;
  --section-color:#ffffff;
  --nav-height: 60px;
  --footer-height: clamp(30px, 4.5vh, 40px);
  --section-height: calc(100vh - var(--nav-height) - var(--footer-height))
}

*{
	margin: 0;
	padding: 0;
}

html{
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scroll-snap-stop: always;
  scroll-snap-align: start;
  scroll-padding-left: 0;
  scroll-padding-top: 0;
}

body{
	font-size: 1.125rem;
	line-height: 1.4;
	font-family: system-ui, sans-serif, Arial;
}

img {
	font-style: italic;
}

nav{
	height: var(--nav-height);
	background-color: var(--color-1);
	display: flex;
	justify-content: flex-end;
	align-items: center;
	z-index: 9999;
}

.links-container{
	height: 100%;
	width: 100%;
	display: flex;
	flex-direction: row;
	align-items: center;
}

nav a{
	height: 100%;
	padding: 0 20px;
	display: flex;
	align-items: center;
	text-decoration: none;
	color: var(--text-color);
}

nav a:hover{
	background-color: var(--accent-color);
}

nav .home-link{
	margin-right: auto;
}

nav svg{
	fill: var(--text-color);
}

#sidebar-active{
	display: none;
}

.open-sidebar-button, .close-sidebar-button{
	display: none;
}

p{
	max-width: clamp(90vw, 65ch);
	padding: 1vw 2vw;
    text-wrap: pretty;
	hyphens: auto;
}

h1, h2, h3{
	font-weight: bold;
}

h1{
	font-size: 1.5rem;
	padding-left: 1rem;
}

h2{
	font-size: 1.3rem;
}

h3{
	font-size: .9rem;
	padding-left: 1.5rem;
}

ul p{
	font-size: .9rem;
	text-wrap: pretty;
	hyphens: auto;
	padding-left: 3rem;
}




footer{
	width: 100%;
	height: var(--footer-height);
	background-color: var(--color-1);
	color: var(--text-color);
	text-align: center;
	align-content: center;
	font-size: 1rem;
	z-index: 9998;
}

footer a{
	color: var(--text-color);
}
footer a[href^="tel:"] {
  text-decoration: underline dashed;
}


footer a:hover{
	text-decoration: none;
}

footer svg{
	fill: var(--text-color);
	height: 0.55rem;
	width: 0.55rem;
}

section {
 /* max-height: var(--section-height); */
  width: 100%;
  background-color: var(--section-color);
}

.preistabelle{
	width: clamp(300px, 60svw, 400px);
	margin: 0 auto 20px auto;
	background-color: #d5cabd;
	font-size: 0.85em;
	border-radius: 5px;	
	color: #000000;
}

/* START: PICTURES */
#foto_aussen{
	display: block;
	float: right;
	width: 30svw;
	height: auto;
	padding: 0 5svw 1svw 1svw;
}

#logo_morgensonne{
	display: block;
	max-width:100vw;
}

#swipe_down{
	position: fixed;
	bottom: calc(var(--footer-height) + 5px);
	right: 5vw;
	width: 5vh;
	height: 5vh;
	visibility: hidden;
}

.reel-img{
	width:100%;
}
/* END: PICTURES */

/* START: PHOTO REEL */
.reel {
--reel-gap: 1rem;
display: grid;
height: 350px;
gap: var(--reel-gap);
grid-auto-flow: column;
grid-auto-columns: calc(90% - (var(--reel-gap) / 2)); 
/*grid-auto-columns: 30%;*/
overflow-x: scroll;
overflow-y: clip;
scroll-snap-type: x mandatory;
scroll-padding: var(--reel-gap);
}

.reel > * {
scroll-snap-align: center;
scroll-snap-stop: always;
}
/* END: PHOTO REEL */

/* START: KONTAKTFORMULAR */

.name { grid-area: name; }
.kontakt { grid-area: kontakt; }
.ankunft { grid-area: ankunft; }
.naechte { grid-area: naechte; }
.personen { grid-area: personen; }
.tiere { grid-area: tiere; }

.formular{
	max-width: 300px;
	margin:0 auto;
	justify-content:center;
	background-color: var(--color-1);
	border-radius: 8px;
	padding: 15px;
}

.grid{
	display: grid;
	justify-content: space-evenly;
    grid-template-columns: auto auto auto auto;
	grid-template-areas:
		'name name name name'
		'kontakt kontakt kontakt kontakt'
		'ankunft ankunft naechte naechte'
		'personen personen tiere tiere'
		'absenden absenden absenden absenden';
}

.entryarea{
	position:relative;
	height: 40px;
	line-height: 40px;
	width: 90%;
}

#ea_mailtel{
	margin-top:25px;
}

#anreise_div .reisedaten_div{
	width: clamp(40svw, 50svw, 500px);
	margin-top: 1px;
	background-color: white;
}

#dauer_div .reisedaten_div{
	margin-top: 15px;
	width: clamp(40svw, 50svw, 500px);
	background-color: limegreen;
}

input[type=text]{
	position:absolute;
	width: 100%;
	outline: none;
	font-size: 1em;
	padding: 1 2px;
	line-height: 33px;
	border-radius: 10px;
	border: 2px solid #f0ffff;
	background: transparent;
	transition: 0.1s ease;
	z-index: 1111;	
	color: #ffffff;
}

.labelline{
	position:absolute;
	font-size: .75em;
	color: #FFD39B;
	height: 15px;
	line-height: .9em;
	padding: 0 2px;
	margin: -8px 0 0 15px;
	background-color: var(--color-1);
	width: auto;
	max-width: 140px;
	z-index:1111;
}

.reisedaten_div .labelline {
	margin: -37px 0 0 10px;
}

input[type=text]:focus,
input[type=text]:valid{
	color:#FFFFF0;
	border:3px solid #FFFFF0;
}

input[type=text]:user-valid{
	border:3px solid #00ff7f;
}

input[type=text]:user-invalid{
	border:3px solid red;
}



input[type=submit] {
  display: block; 
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  border: 2px solid #ffffff;
  border-radius: 10px;
  opacity: 0.9;
  padding: 5px;
}
.submit_div{
	display: block;
	width:100%;
	max-height: 16svh;
	align-content: center;
	margin-top: 40px;
}

.submit1{
	background-color: #ffffff;
	color: #444444;
	font-size:1em;
}
.submit2{
	background-color:#BCB7CD;
	color:black;
	font-size:0.6em;
}

.submit1:hover {
  box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
  opacity:1;
}

.reisedaten_div{
	border:2px solid #ffffff;
	border-radius:10px;
	width: 70%;
	max-width:120px;
	color:#ffffff;
	padding:4px;
	margin-right: 5px;
	margin-bottom: 5px;
	margin-top: 10px;
	}
	
input[type=date] {
	background-color:#b27fc9;
	color:white; 
	border: none;
	font-size:0.8em;	
}

input[type=number] {
	background-color:#b27fc9; 
	color:white; 
	border:none; 
	font-size:0.9em;	
}

input[type=number]::placeholder {
  color: #dddddd;
  opacity: 1; /* Firefox */
}

.response0{
	display:none;
}
.response1{
	border:2px solid #ffffff;
	background:#ffffff;
	border-radius:10px;
	font-size:0.6em;
	color:green;
	animation: fadeOut 3s forwards;
    animation-delay: 4s;
	z-index:2221;
	width:500px;
	height:100px;
	position:relative;
	bottom:220px;
	left:30px;
	padding:2px;
	padding-left:10px;
	text-align:center;
	display: -webkit-flex;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}
@keyframes fadeOut {
    from {opacity: 1;}
    to {opacity: 0;}
}
/* ENDE KONTAKTFORMULAR */

/* START: FOR SMALL SCREEN */
@media (max-width: 580px){
	.reisedaten_div{
	width: 150px;
	max-width:100%
	}

	
	.reel {
		grid-auto-columns: calc(90% - (var(--reel-gap) / 2));
		height: 200px;
		overflow-y: hidden;
	}
	
	.reel-img{
		position: relative;
		top: -22px;
	}
	footer{
		font-size: 0.7rem;
		position: sticky;
		bottom: 0;
		left: 0;
	}
	footer svg{
	height: 0.7rem;
	width: 0.7rem;
	position: relative;
	top: 0.1rem;
}
	
	.links-container{
		flex-direction: column;
		align-items: flex-start;
		position: fixed;
		top: 0;
		right: -150%;
		z-index: 10;
		width: 300px;
		background-color: var(--color-1);
		box-shadow: -5px 0 5px rgba(0, 0, 0, 0.25);
		transition: 0.7s ease-out;
	}
	
	nav {
	position: sticky;
	top: 0;
	left: 0;
	}
	
	nav a{
		box-sizing: border-box;
		height: auto;
		width: 100%;
		padding: 20px 30px;
		justify-content: flex-start;
	}
	
	.open-sidebar-button, .close-sidebar-button{
	display: block;
	padding: 20px;
	}
	
	#sidebar-active:checked ~ .links-container{
		right: 0;
	}
	
	#sidebar-active:checked ~ #overlay{
		height: 100%;
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 9;
	}
	
	#foto_aussen{
	width: clamp(40vw, 60vw, 50vw);
	}
  
	section {
		max-width:100svw;
		width:96.5svw;
		padding-bottom: 30px;
	}	
	/*#fotos img{
	width: clamp(60vw, 80vw, 800px);
	}*/
}
/* END: FOR SMALL SCREEN */