/* GLOBAL STYLES
-------------------------------------------------- */
body {color: #000;}
section {padding:2rem 0 1rem}
section img {max-width:100%;width:100%}
section a {color:#000}
section a:hover {color:	#000;text-decoration:none}
ul {padding-left:2rem}

#einleitung					{background:rgb(251,229,214);}
#geniesser		 				{background:rgb(255,193,0)}
#geniesser .jumbotron 			{background:url(img/sommerurlaub-alsfeld-geniesser-m.jpg);background-position:center;background-size:cover}
#geniesser .jumbotron h2 		{background: linear-gradient(0deg, rgba(255,193,0.8) 10%, transparent 98%);}
#naturpur 						{background:rgb(197,224,180)}
#naturpur .jumbotron  			{background:url(img/sommerurlaub-alsfeld-natururlauber-m.jpg);background-position:center;background-size:cover}
#naturpur .jumbotron h2 		{background: linear-gradient(0deg, rgba(197,224,180,1) 10%, transparent 98%);}
#wohnmobilisten 				{background:rgb(183,227,253)}
#wohnmobilisten .jumbotron 		{background:url(img/sommerurlaub-alsfeld-wohnmobilisten-m.jpg);background-position:center;background-size:cover}
#wohnmobilisten .jumbotron h2 	{background: linear-gradient(0deg, rgb(183,227,253) 10%, transparent 98%);}
#familientipps 					{background:rgb(255,106,106)}
#familientipps .jumbotron 		{background:url(img/sommerurlaub-alsfeld-familien-m.jpg);background-position:center;background-size:cover}
#familientipps .jumbotron h2 	{background: linear-gradient(0deg, rgb(255,106,106) 10%, transparent 98%);}
#maerchenhaus 					{background:rgb(248,203,173)}
#uebernachten 					{background:#e4e3fdf0}
#ausflugstipps 					{background:rgb(255,230,153)}
#footer 						{background:rgb(251,229,214);padding: 3rem 0 3rem 0}
#footer p:last-of-type 			{margin-bottom:0}
.carousel-item > img {display:block;width:100%;object-fit:contain}

h2.heading {font-family: 'Italianno', cursive;text-align:center;font-size:3rem;margin-bottom:1rem}
p.heading  {font-family: 'PT Serif', serif;text-align:center;}
.col-lg-12 {margin-bottom:2rem}
.col-lg-4 {padding:0; margin:0 15px 30px 15px}
.phone-button {position: relative;z-index:100000;}
.phone-button a {background:#DC3538; padding:1rem; position:fixed;top:50vh;right:0;border-radius:0}
.phone-button img {max-width:30px}




/* Attraktionen Startseite
-------------------------------------------------- */
.attraction {font-family: 'PT Serif', serif;background:rgba(255,255,255,0.3)}
.attraction:hover img {transform:scale(1.1);transition-duration:1s}
.attraction .attraction-img {overflow:hidden;}
.attraction .attraction-img img {transition-duration:1s}
.attraction .more {display:none}

.attraction-text {padding:1rem}
footer p {margin-bottom:3rem}

/* Section Header 
-------------------------------------------------- */
.jumbotron {display:flex;margin-bottom:0;padding:4rem 0;position:relative;  }
.jumbotron h2 {padding: 5rem 2rem;text-align: center;display: block;width: 100%;margin: 0;font-family:'Italianno', cursive;position:relative;bottom:-4rem;}
.jumbotron h2 span {padding:1rem;display:inline-block;font-size:3rem}


/* RESPONSIVE CSS
-------------------------------------------------- */

/* Anfrageformular 
-------------------------------------------------- */

#aufenthaltsanfrage {display:flex;display:-ms-flexbox;display:-webkit-flex;flex-direction:column;padding:1rem;background-color:rgba(255,255,255,0.3);max-width:500px;width:100%;margin:0 auto 1rem auto}
#selbstbucher {padding:1rem;background-color:rgba(255,255,255,0.3);max-width:500px;width:100%;margin:0 auto}
#aufenthaltsanfrage fieldset {display:flex;display:-ms-flexbox;display:-webkit-flex;flex-direction:column;margin-bottom:1.5rem}
input, button, select, optgroup, textarea {padding:0.25rem;margin-bottom:0.5rem;width:100%}
label {margin-bottom:0.25rem}
input[type=checkbox] {margin-bottom:0;display:inline;width:auto}
input[type=submit] {margin-top:1rem;background-color:#fff;border-color:transparent}
input[type=submit]:hover {}
legend {font-family: 'PT Serif', serif;}
#aufenthaltsanfrage a {text-decoration:underline}
.carousel-control-prev, .carousel-control-next {z-index:100}
input[type="radio"], input[type="checkbox"] {display:inline-block;width:auto}

/* Grid Übernachten
-------------------------------------------------- */
.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr;
  gap: 10px 10px;
  grid-template-areas: "left_top left_top middle middle rigth_top rigth_top" "left_top left_top middle middle rigth_top rigth_top" "left_bottom left_bottom middle middle right-bottom right-bottom" "left_bottom left_bottom middle middle right-bottom right-bottom";
}
.grid-container img {height:100%;object-fit:cover}
.middle { grid-area: middle; }
.left_top { grid-area: left_top; }
.left_bottom { grid-area: left_bottom; }
.rigth_top { grid-area: rigth_top; }
.right-bottom { grid-area: right-bottom; }


@media (min-width: 40em) {
  /* Bump up size of carousel content */
  .carousel-caption h2 {	font-size: 10vh;	  }
  .carousel-caption p {	  
    margin-bottom: 1.25rem;
    font-size: 4vh;
    line-height: 1.4;
  }
  h2.heading {font-size:5rem}
  p.heading {font-size:1.5rem}
  .jumbotron h2 span 			{font-size:5rem}
  .attraction-single .attraction-text h3, .attraction h3 {font-size:1.75rem}
}
@media (min-width: 992px) {
	section {padding:6rem 0}
	.col-lg-12 {margin-bottom:4rem}		
	.col-lg-4 {flex:0 0 calc(33.333333% - 30px);max-width:calc(33.333333% - 30px);}	
	.carousel-item > img {object-fit:cover; object-position: center; height:auto}
	.attraction-single {flex-direction:row;margin:6rem auto;}
	#altstadtfuehrung, #anno_dazumal, #tour, #escape_room, #wandern, #schwimmen, #erlebnisberg, #herzberg, #antrifttalstausee, #familien_kurzurlaub, #rotkaeppchen_kurzurlaub {flex-direction:row}
	.attraction-single .attraction-text {width: 50%;padding:2rem}
	.attraction-single .attraction-text .overlap-right {width:calc(100% + 5em);padding:2rem 1rem;top:0;margin-top:0}
	.attraction-single .attraction-text .overlap-left {width:calc(100% + 5em);padding:2rem 1rem;left:-5em;top:0;margin-top:0}
	.attraction-single .attraction-img {width: 50%;position:relative}
	.attraction-single .attraction-img img {object-fit: cover;height: 100%;}
	.helper {display:block}
	.helper-init {display:none;}
	#aufenthaltsanfrage {margin:0 auto}
	#geniesser .jumbotron 		{background:url(img/sommerurlaub-alsfeld-geniesser-xl.jpg);background-position:center;background-size:cover;}
	#naturpur .jumbotron 		{background:url(img/sommerurlaub-alsfeld-natururlauber-xl.jpg);background-position:bottom;background-size:cover}
	#wohnmobilisten .jumbotron  {background:url(img/sommerurlaub-alsfeld-wohnmobilisten-xl.jpg);background-position:bottom;background-size:cover}
	#familientipps .jumbotron 	{background:url(img/sommerurlaub-alsfeld-familien-xl.jpg);background-position:center;background-size:cover;background-position-y:-130px}	
	.jumbotron 					{padding:8rem 0;}
	.jumbotron h2 				{bottom:-8rem}
	.jumbotron h2 span 			{font-size:5rem}	
}
@media (min-width: 1200px) { 
	h2.heading {font-size:5rem}

	
}
header {background: rgb(250,250,250);position:fixed;top:0;z-index:100;width:100%;height:50px;box-shadow:1px 1px  1px #999;}
h1 {font-family:'Italianno', cursive;font-size:2.5rem;text-align:center;padding:5px 2px 2px;margin:0}

main {margin-top:50px;}

fieldset small {margin-bottom:0.7em;font-style:italic;}

.anrufen {background-color:#DC3538;padding:5px;display:block;color:#fff;text-decoration: none !important;}