@import url("./css/rahmen.css");
@import url("./css/theForm.css");
@import url("./css/cockie.css");
@import url("../../fonts/font.css");
@import url("./color.css");
 
.pause {
	width:80%;
	height:auto;
	box-shadow: inset 0px 0px 10px 0px var(--main-shadow-color);
	border-radius: var(--main-radius);
}

html, body {
	width:100%;
	height:100%;
	padding:0px;
	margin:0px;
}
* {
		box-sizing:border-box;
}
body {
	font-size:1.2em;
	font-family:Lato;
	line-height: 1.4em;
	background-image: url(./image/logo.png),
		repeating-linear-gradient(180deg, 
			#e79e48 0px, #e79e48 45px,
			white 55px,
			#751e32 55px,#751e32 132px,
			white 136px,
			#f6ce71 145px, #f6ce71 345px,
			white 356px, 
			#eca149 356px, #eca149 100% 
	);
  background-attachment: fixed;
  background-repeat: repeat-x,no-repeat;
  background-position: center 150px, top;
  background-size: 200px auto,auto;
}
#main {
	margin:40px 5%;
	display:flex;
	flex-wrap:wrap;
	box-shadow: 0px 0px 50px 0px var(--main-shadow-color) ;
}
header, nav, #breathcum, aside, article, footer {
	position:relative;
	background-color: var(--main-bg-color);
	color:var(--main-text-color);;
	margin:var(--abstand-bereich);
	padding:10px;
	border-radius: var(--main-radius);
	/*box-shadow: 3px 3px 10px var(--main-shadow-color) inset;*/
}
header, #breathcum, footer {
	width:100%;
	order:1;
}
header {
	position:relative;
    padding:0px;
}
header #wechsel {
	background-image:url(../../uploads/header/Startseite/vor_dem_Tor.jpg);
	background-position: top;
	background-size:cover;
	background-repeat:no-repeat;
	top:0px; bottom:0px;
	right:0px;
	left:var(--breite-nav);
	position:absolute;
	box-shadow: 0px 0px 25px 15px var(--main-shadow-color) inset;
	padding:2px;
}
header h2, header p {display:none;}
header .ui-widget-header {border:none;}

header img.logo {
  width: var(--breite-nav);
  min-width:220px;
  aspect-ratio: 3/4;
  background-color: var(--logo-bg-color);
  box-shadow: 0px 0px 25px 15px var(--main-shadow-color) inset; /*box-shadow: 0px 0px 25px var(--main-shadow-color) inset;*/
  position: relative;
  left: 0px;
  top: 0px;
  border-radius: var(--main-radius) 0px 0px var(--main-radius);
  margin-bottom: -4px;
}
nav, aside {
	width: var(--breite-nav);
	min-width:var(--breite-nav-min);
}
iside {display:none;}
nav {order:2;}
article {
	order:3;
	width:calc( 100% - var(--breite-nav) * 2 - var(--abstand-bereich) * 6);
}
aside {order:4;}
footer {order:5;}

h1,h2,h3,h4,p,ul {
	margin-top:1em;
	margin-bottom:0.5em;
	line-height:1.2em;
}
h1 {
	font-family: 'Smokum';
}
h2 {
  font-family: 'Kaushan Script';
  letter-spacing: 0.1em;
  background-color: burlywood;
  text-align: center;
  padding: 11px;
}
h3 {
	font-family: 'Amatic SC';
	font-size:1.4em;
	letter-spacing:0.05em;
}
a {color:var(--main-text-color);}
hr {
box-shadow: 0px 0px 5px 0px var(--main-shadow-color);
  border-radius: 100%;
  color: transparent;
  width: 85%;
  height: 3px;
  background-image: repeating-radial-gradient(gold,darkgoldenrod) ;
}
p:empty {display:none;}

/* Ferienwohnung Preise Tabelle */
.preise {
  min-height: 550px;
  background-repeat: no-repeat;
  background-position: right center;
  background-size: 80% auto;
  background-color: var(--main-shadow-color);
  margin: 2em 0em;
  /*padding: 0.5em;
  padding-right:0.5em;*/
  vertical-align: bottom;
  padding:10px;
}
.preise table {
}
.preise table td {
  margin: 5px;
  padding: 5px 1em;
  border: none;
  font-size:0.6em;
  text-align:center;
  line-height:1.3em;
  box-shadow: 5px 5px 5px grey;
  min-width: 90px;
  background-color: var(----main-shadow-color);
}
.preise table td:nth-child(2) {
 text-align:right;
 /*padding-right:10px;*/
}
.preise table td::first-line {font-size:1.4em;text-align:center;}
.preise img {
	
}

/* Checkbox verstecken */
input#responsive-nav,
label.responsive-nav-label {
  display: none;
  font-family: 'Amatic SC';
  font-weight:bold;
  font-size:1.3em;
}
.last_change {
	text-align:center;
	margin-top:-10px;
	padding:0px;
}

@media screen and (max-width: 1190px) {
aside {display:none;}
iside {display:block;}
article {
	width:calc( 100% - var(--breite-nav-min) - var(--abstand-bereich) * 4);
}
}
@media screen and (max-width: 700px) {
#main {
	margin:50px 0;
}
article {
	width:100%;
}
article img{
	width:98%;
	float:none !important;
}
header {
	width:100%;
	height:300px;
}
header img.logo {
	background-color:transparent;
	z-index:2;
    box-shadow: 0px 0px 10px 0px;
	min-width:100px;
}
header #wechsel {
	left:0px !important;
	width:100%;
	background-position:left;
	height:250px;
	overflow:hidden;
}
header .mein_slider {
	width: 1200px !important;
    height: 250px !important;
    max-width: 1200px;
    left: -286px;
    position: relative;
    top: -37px;
}
.preise table {
	margin:auto;
	left:0px;
}
.preise p {
	text-align:;
}
.preise div {
	text-align:;
	width:100%;
}
.preise img {
	width:60%;
}
}