@import url('https://fonts.googleapis.com/css?family=Architects+Daughter|Lobster|Raleway:300,400|Open+Sans|Open+Sans+Condensed:300');
/*@import url(https://fonts.googleapis.com/css?family=Oswald:300,400|Special+Elite|Exo:700);
/*@import url(https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800);
/*@import url(https://fonts.googleapis.com/css?family=Merriweather:400,300,400italic,300italic,700,700italic);
/*@import url(https://fonts.googleapis.com/css?family=Nunito:400,300,700);*/
/*@import url('https://fonts.googleapis.com/css?family=Architects+Daughter|Love+Ya+Like+A+Sister|Reenie+Beanie|Rock+Salt|Swanky+and+Moo+Moo');*/
/*@font-face {
    font-family: 'isocpeurregular';
    src: url('../../font/isocpeur-webfont.eot');
    src: url('../../font/isocpeur-webfont.eot?#iefix') format('embedded-opentype'),
         url('../../font/isocpeur-webfont.woff') format('woff'),
         url('../../font/isocpeur-webfont.ttf') format('truetype'),
         url('../../font/isocpeur-webfont.svg#isocpeurregular') format('svg');
    font-weight: normal;
    font-style: normal;
}*/
@import url('https://fonts.googleapis.com/css2?family=Cormorant:wght@300;500&family=Josefin+Sans:wght@300;500&display=swap');

@font-face {
	font-family: 'Linearicons-Free';
	src:url('../fonts/Linearicons-Free.eot?w118d');
	src:url('../fonts/Linearicons-Free.eot?#iefixw118d') format('embedded-opentype'),
		url('../fonts/Linearicons-Free.woff2?w118d') format('woff2'),
		url('../fonts/Linearicons-Free.woff?w118d') format('woff'),
		url('../fonts/Linearicons-Free.ttf?w118d') format('truetype'),
		url('../fonts/Linearicons-Free.svg?w118d#Linearicons-Free') format('svg');
	font-weight: normal;
	font-style: normal;
}

/*
Standart Schriftgröße: 			    16px;		  // Browserdefault, 16px  
@phoneLandscapeViewportWidth: 	30em;		  // 480px
@tabletViewportWidth: 			    48em; 		// 768px
@tabletLandscapeViewportWidth: 	64em; 		// 1024px
@desktopViewportWidth: 			    78.75em; 	// 1260px

uk-visible@s 	  Only affects device widths of 640px and larger  	= 40em
uk-visible@m 	  Only affects device widths of 960px and larger.		= 60em
uk-visible@l 	  Only affects device widths of 1200px and larger.	= 75em
uk-visible@xl 	Only affects device widths of 1600px and larger.	= 100em

Breiten: 
font-size: 16px;   Browserdefault, 16px  
.uk-width-*@s 	640px 		40em
.uk-width-*@m 	960px		  60em
.uk-width-*@l 	1200px 		75em
.uk-width-@xl 	1600px 		100em
*/

:root {
  --color_html_bg: #f3f3f4;
  --color_bg: #faf9f5;					/* alloggio */
  --color_bg_kalender: #fff;		/* alloggio Kalender freie Tage*/
  --gruen: #20c520;
  --gruenhover: #1e9900;
  --rot_hell: #FF1E0A;
  --rot: #C80E0E;
  --rot_dunkel: #b56953;  	/* checkbox */
  --schrift: #4d4d4d;				/* Texte */
  --schrift_size: 17px;
  --titel: #000;
  --grau: #7a7a7a;
  --grau_rgb: rgba(122, 122, 122, 1);
  --grau_dunkel: #495061;
	
  --schrift_normal: 'Josefin Sans', 'isocpeurregular', 'Raleway', 'Open Sans',Helvetica, Arial, sans-serif;
  --schrift_h1: 'Cormorant', 'Architects Daughter','Raleway', 'Open Sans', Helvetica, Arial, sans-serif;
  --schrift_handschrift_3: 'Waiting for the Sunrise', Helvetica, Arial, sans-serif;
  --schrift_handschrift_2: 'Loved by the King', 'Architects Daughter', Helvetica, Arial, sans-serif;
  --schrift_handschrift: 'Ruthie', Helvetica, Arial, sans-serif;
  --schrift_dick: 'Exo', Helvetica, Arial, sans-serif;

  --uk_s: 40em;
  --uk_m: 60em;
  --uk_l: 75em;
  --uk_xl: 100em;
}
/* color: var(--rot_dunkel); */


.display_no{
	display: none;
}

html,body {
  width:100%;
  margin:0;
  padding:0;
}

html {
  height: 100%;
	font-family: 'Josefin Sans', Raleway, 'Open Sans', Arial, Helvetica, sans-serif;
	font-family: var(--schrift_normal);
  font-size: 16px;
  font-weight: 300;
  line-height: 1.6em;
  -webkit-text-size-adjust: 100%;
	color: #666666;
	color: var(--schrift);
	background-color: #fff;
}

a:link, a:visited { 
  text-decoration: none; 
  color: #bbb; 
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  /*margin: 25px 0;*/
  font-family: var(--schrift_h1);
  font-weight: 400;
  color: #333;
  text-transform: none;
	-ms-word-wrap: break-word;
	word-wrap: break-word;
}

/* Funktioniert nicht in FireFox */

tbody, td, tfoot, th, thead, tr, tt, u, ul, var {
    vertical-align: bottom;
    margin: 0;
    padding: 0;
    background: 0 0;
    border: 0;
    outline: 0;
}

.gruen{
	color: var(--gruen);
}

.padding_grid{
    padding-left: 15px;
    padding-right: 10px;
}

/* ==========================================================================
Ladebildschirm
========================================================================== */
.loading_modal {
      position: fixed;
      left: 0px;
      top: 0px;
      width: 100%;
      height: 100%;
      z-index: 9999;
      background: url(../img/Preloader_21.gif) center no-repeat #fff;
			opacity: 1;
			transition: opacity 800ms;
}
.loaded_img .loading_modal {
			opacity: 0;
}

/* Page Loader */
/* <body class="loading"> */
.loading::before,
.loading::after {
	content: '';
	position: fixed;
	z-index: 1000;
}

.loading::before {
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: var(--color_bg);
}

.loading::after {
	top: 50%;
	left: 50%;
	width: 60px;
	height: 60px;
	margin: -30px 0 0 -30px;
	border-radius: 50%;
	opacity: 0.4;
	background: var(--rot_dunkel);
	animation: loaderAnim 0.7s linear infinite alternate forwards;

}

@keyframes loaderAnim {
	to {
		opacity: 1;
		transform: scale3d(0.5,0.5,1);
	}
}


/* ==========================================================================
maps
========================================================================== */
#map {
    height: 100%;
		height: calc(60vh);
		margin-top: 2em;
}

/* ==========================================================================
Info Seite
========================================================================== */
.seiteninhalt.infos {
		padding-top: 2em;
}


/* ==========================================================================
Kontakt Seite
========================================================================== */
.seiteninhalt.kontakt {
		padding-top: 2em;
}

.kontakt input[type=email], .kontakt input[type=number], .kontakt input[type=password], 
.kontakt input[type=search], .kontakt input[type=tel], .kontakt input[type=text], .kontakt input[type=url], .kontakt textarea {
    margin: 0;
}



/* ==========================================================================
zimmer_buchung.php
========================================================================== */
.buchung_erfolg
.buchung_erfolg h2{
  color: var(--rot_dunkel);
}
#fehlermeldung{
	font-size: 1.2em;
  color: red;
  font-weight: 400;
  line-height: 1.5em;
}
.table_bestellung{
	width: 100%;
}
.uk-table.table_bestellung th {
    padding: 0px 12px;
    text-transform: none;
}
.uk-table.table_bestellung td {
	padding: 1px 10px;
}

.uk-table.table_bestellung .extra_service td {
	padding: 1px 10px;
}
.uk-table.table_bestellung .padding_top td {
	padding-top: 8px;
}
.uk-table.table_bestellung .padding_bottom td {
	padding-bottom: 8px;
}
.table_bestellung thead tr.linie {
    border-bottom: 1px solid rgba(0,0,0,.18);
}
.table_bestellung tfoot tr.linie {
    border-top: 1px solid rgba(0,0,0,.18);
    border-bottom: 1px solid rgba(0,0,0,.18);
}
.table_bestellung.linie thead tr {
    border-left: none;
    border-right: none;
    border-top: none;
}

.zimmer_bild{
	max-width: 200px;
}
@media only screen and (min-width: 960px) {
	.zimmer_bild{
		max-width: 250px;
		margin-top: 60px;
		/*padding-right: 10px;*/
	}
}
.zimmer_einzelpreis,
.zimmer_gesamtpreis{
  text-align: right;
}

.h2_ratio {
    margin-left: 20px;
}
.text_ratio {
    margin-left: 40px;
    display: block;
}

/*
.zimmer_preis{
  display: flex;
    align-items: center;
    height: 100%;
}
.zimmer_text,
.zimmer_gesamtsumme{
  flex-grow: 1;
}
.zimmer_details{
  flex-grow: 1;
}

.zimmer_gesamtpreis{
  text-align: right;
}
.zimmer_einzelpreis{
	display: flex;
  text-align: right;
    align-items: end;
    flex-flow: column;
}
*/



/* ==========================================================================
footer_inc
========================================================================== */
#footer {
    padding: 118px 0 114px;
    background-color: var(--color_bg);
}

#footer .info a {
    /*text-transform: uppercase;
    line-height: 2em;*/
		color: var(--schrift);
		text-decoration: none;
}
#footer .info a:hover {
		color: var(--rot_dunkel);
}


/* ==========================================================================
lightgallery Anpassungen
========================================================================== 
.lg-backdrop {
    background-color: #fff;
}
/* Paaspartout 
@media screen and (min-width:800px) {
  .lg-outer {
      top: 50px;
      left: 50px;
      width: calc(100% - 100px);
      height: calc(100% - 100px);
  }
}

.lg-outer .lg-img-wrap {
    padding: 0;
}
.lg-outer .lg-image {
    display: inline-block;
    vertical-align: middle;
    max-width: 200%;
    /* max-height: 100%; 
    width: auto!important;
    /* height: auto!important; 
    height: 100%!important;
    /*display: none;
    opacity:0;
    object-fit: cover;
}

body:not(.lg-from-hash) .lg-outer.lg-start-zoom .lg-item.lg-complete .lg-object {
    opacity: 0;
}
.lg-outer.lg-show-after-load .lg-item.lg-complete .lg-object, .lg-outer.lg-show-after-load .lg-item.lg-complete .lg-video-play {
    opacity: 0;
}

.lg-item .lg-current{
    background-size: cover;
}

.olox_bg{
      width: 100%;
      height: 100%;
      background-size: cover;
      background-position: center;
}

.lg-outer .lg-img-wrap:before, .lg-outer .lg-item:before {
    content: "";
    display: none;
    height: 50%;
    width: 1px;
    margin-right: -1px;
}

.lg-actions .lg-next, .lg-actions .lg-prev {
    background-color: rgba(0,0,0,.45);
    border-radius: 2px;
    color: #999;
    border: 0px;
}

.lg-outer .lg-toogle-thumb {
    background-color: #0D0A0A;
    border-radius: 2px 2px 0 0;
    color: #999;
    cursor: pointer;
    font-size: 24px;
    height: 39px;
    line-height: 27px;
    padding: 5px 0;
    position: absolute;
    right: 20px;
    text-align: center;
    top: -39px;
    width: 50px;
}
.lg-outer .lg-toogle-thumb:after {
    content: "\e1ff";
}
.lg-outer .lg-thumb-item.active, .lg-outer .lg-thumb-item:hover {
    border-color: #a90707;
    border-color: #20c520;
}
.lg-outer .lg-thumb-outer {
    padding-left: 10px;
}  
*/