/*
Theme Name: Persiluhr Guide (2024)
Theme URI: http://www.cssigniter.com/ignite/themes/sixtyone
Author: Sebastian Auferoth
Author URI: http://www.cssigniter.com/
Description: Hotel guide theme for WordPress
Version: 3.0
License: GNU General Public License
*/

@import url("https://use.typekit.net/dar1wol.css");

:root {
   --color-orange-main: #FAB720;
   --color-orange-side: #F09F19;
   --color-orange-light: #eece6a;
   --color-accent-light: #FFEDCB;
   --color-green-side: #95B329;
   --color-green-main: #6EA901;
   --color-green-light: #d9de49;
   --color-grey-light: #bbbbbb;
    --color-light-bg: #f2f2eb;
   --color-text-main: #222222;
   --color-text-light: #DFE0DF;
    
    --color-accent-dark: #417db4;
    
    --margin-std: 20px;
    --margin-more: 40px;
    
    --font-h1: 48px;
    --font-h2: 28px;
    --font-h3: 20px;
    --font-h4: 20px;
    --font-normal: 16px;
    --font-small: 14px;
   
}



html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, img, ins, kbd, q, s, samp,
small, strike, tt, var, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption,#footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;

	-webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out; 
    
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}


body{
    background: var(--color-light-bg);
    color: var(--color-text-main);
    font-family: ff-meta-correspondence-web-p, Arial, sans-serif;
    line-height: 1.5;
    -webkit-animation-name: fontfix;
    -webkit-animation-duration: 0.2s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: linear;
    
	-webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out; 
}

img {display: block;}
/* =start
------------------------------------------------------------------------------------------*/
@-webkit-keyframes fontfix {
    from { opacity: 1; }
    to   { opacity: 1; }
}
 

ol, ul { list-style: none;}

section {padding: 0 var(--margin-std);}

h1 {
    font-size: var(--font-h1);
    margin: 0 0 0 0;
    padding: 0;
    line-height: 1.3;}

h2 {
    font-size: var(--font-h2);
    margin: var(--margin-std) 0px;
    padding: 0;
    line-height: 1.25;
    font-weight: bold;
}


h3 {
    padding: var(--margin-std) 0px;
    font-size: 20px;
    line-height: 1;
    font-weight: bold;
}


h4 {
    font-size: 18px;
    line-height: 1;
    margin: 0 0 20px 0;
    font-weight: bold;
}

h4.service_title{
    font-size: 12px;    
    text-transform: uppercase;
    margin: 0 0 10px 0;
}

h5{
    font-size: 18px;
    font-weight: normal;
    line-height: 1.2;
    margin: 0 0 15px 0;
}

p, .entry p {
	line-height: 1.5;
	margin: 0 0 10px 0;
    font-size: var(--font-normal);
    color: var(--color-text-main);
}

.center {text-align:center;}

#entry ul{
    list-style-type: square;
    float: none;
    margin: 0 0 15px 20px;
    font-size: var(--font-normal);
}

#entry ol{
    list-style-type: decimal;
    float: none;
    font-size: 13px;
    margin: 0 0 15px 20px;
}

#entry ul li, #entry ol li{
    float: none;
    background: none;
    width: auto;
    margin: 0 0 5px 0;
    padding: 0 0 0 0;
    font-size: var(--font-normal);
}

::selection { background: var(--color-orange-main); color: #fff; }
::-moz-selection { background: var(--color-orange-main); color: #fff; }
table {
    border-collapse: collapse;
    border-spacing: 0;
}

#lightbg {
	background: var(--color-accent-light);
	margin: 0px 0 20px 0;
	padding: 20px 0;}

#greybg {
	background: var(--color-grey-light);
	margin: 0px 0 20px 0;
	padding: 20px 0;}

.feature {padding-top: 0px;
    text-align: center;}
.fa-stack-2x {color:var(--color-orange-side); }
.fa-stack-1x {color:var(--color-orange-side); }
.fa-stroke, .fa-stack-2x  {-webkit-text-stroke: 2px var(--color-orange-side);
color:var(--color-accent-light);
   text-shadow:,
     -1px -1px 0 var(--color-orange-side),  
      1px -1px 0 var(--color-orange-side),
      -1px 1px 0 var(--color-orange-side),
       1px 1px 0 var(--color-orange-side);}
.feature-title{
	color: var(--color-orange-side);
	text-transform: uppercase;
	margin-top: 5px;}
.feature:hover {transform: scale(1.1);}
	

*{
    -webkit-hyphens: none;
    -moz-hyphens: none;
    hyphens: none; 
}

/* Overriding the default 15px padding from left and right 
.column, .columns{
    padding: 0;
}*/

.row .row{
    margin: 0;
}

.four.columns + .eight.columns,
.eight.columns + .four.columns{
    padding: 0 0 0 30px
}
.logo {height: 80px;
    z-index:100 !important; left: 20px; top: 20px; position: relative;}
.logo-schriftzug {height: 10px;
    z-index:100 !important;}

#footer_mobile, #footer_phone {display:none;}

.container {position: relative;color: white;}


.bottom-left {position: absolute;padding: 0 0 var(--margin-std) var(--margin-std);bottom: 0px;left: 0px;}
.top-left {position: absolute;top: 8px;left: 16px;}
.top-right {position: absolute;top: 8px;right: 16px;}
.bottom-right {position: absolute;bottom: 8px;right: 16px;}
.centered {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}
.bottom {position: absolute; bottom: 0px; left: 0px; width: 100%;}

#gap-40 {height: 40px; display: block;}
#gap-20 {height: 20px; display: block;}
.margin-std {padding: 0 var(--margin-std);}

/* =maps
------------------------------------------------------------------------------------------*/
iframe .map{
    width: 100%;
    max-width: 1140px;
    height: 300px;
    margin: 0 0;
    overflow: hidden;
    display: block;
}

/* -----------------------------------------
	Own Style
----------------------------------------- */
#page-header img {
    object-fit: cover;
    width: 100%;
	height: 500px;}

#header-image {
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	height: 500px;
	position: relative;
    text-align:center;}
.header-image h1{
    font-size: var(--font-h1);
    color: #fff;
    font-weight: bold;
text-transform: uppercase;
text-shadow: 0px 0px 25px rgba(0,0,0,0.5);}

.header-image {
    text-align:center;
  vertical-align: middle;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);}

#header-block {
	height: 300px;
	position: relative;
    text-align:left;
    background: var(--color-green-side);}
#header-block h1{
    font-size: var(--font-h1);
    font-weight: bold;
text-transform: uppercase;}

#header-block .content {
    text-align:center;
    color: #fff;
  vertical-align: middle;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);}


#booking-wide {width: 100%; clear: both; background: #f3ce56; padding: 0px 80px;}
.onlymobile {display:none!important;}




/* -- HOMEPAGE --- */

#divide-hero {background: var(--color-accent-dark); }
#divide-hero #rounded {border-radius: var(--margin-std) var(--margin-std) 0 0; background: var(--color-light-bg); height: var(--margin-std);}

#home-hero #content {background: var(--color-accent-dark); color: white; padding: 0 var(--margin-std) var(--margin-std) var(--margin-std);}
    
#home-hero #image {
    height: 75vh;
    display: block;
    position: relative;
    color: white;
    vertical-align: bottom;
    background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.2)),
    url("img/global/header-hero-light.jpg") no-repeat center center; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

#home-hero #image .text {
    width: 100%;
    padding: 0 var(--margin-std);
    position: absolute;
    bottom: 0px;
    left: 0px;
    color: white;
    text-shadow: 0px 0px 20px black;
    font-weight: 600;
    background-image: linear-gradient(rgba(65,125,180,0), rgba(65,125,180,1));
}
#home-hero h1 {line-height: 1.2; margin-bottom: var(--margin-std);}
#home-hero p {font-size: 16px; line-height: 1.2 ; font-weight: normal; color: white;}


/* -- Quickstart Menu --- */
ul#quickstart li a {background: white; padding: 7px 14px; border-radius: 50px; box-shadow: 2px 2px 4px rgba(0,0,0,.05); font-size: 14px; margin-right: 10px;}
ul#quickstart li a:hover {background: var(--color-green-main); color: white;}
ul#quickstart {padding: 5px 0 20px 20px;}

/* -- Service Menu --- */
ul#service { margin-bottom: var(--margin-std); padding-left: var(--margin-std);  display: inline-block;}
ul#service li:first-of-type {margin-left: 0px;}
ul#service li {margin-right: 20px;}
ul#service li a {background: white; border-radius: 10px;
justify-content: center; display: inline-flex;
align-items: center; text-align: center; line-height: 1.1; font-size: 14px; padding: 10px;}
ul#service i {display: block; font-size: 28px;margin-bottom: 5px; margin-right: 10px;}
ul#service a:hover {background: var(--color-green-main); color: white;}

#citytour {background: var(--color-green-main); box-shadow: 2px 2px 6px rgba(0,0,0,.1); border-radius: 15px; margin: var(--margin-std) 0; padding: 0 var(--margin-std); color: white; display: flex; vertical-align: middle; align-items: center; justify-content: space-between;}
#citytour i {font-size: 24px;}
#citytour:hover {background: var(--color-green-side); }

#sightseeing {margin: var(--margin-std) 0;}
#sightseeing p {color: white;}
#sightseeing img {height: 500px; width: 100%; object-fit: cover; border-radius: 20px 20px 0 0;}
.overlay-gradient {background: linear-gradient(10deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 80%); padding-top: 30px;}



/* -- OTHERS --- */

#page-header .gradient-overlay {
    width: 100%;
    padding: 0 var(--margin-std);
    position: absolute;
    bottom: 0px;
    left: 0px;
    font-weight: 600;
    height: 150px;
    background-image: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.5));
}
    
    #page-header #rounded {border-radius: var(--margin-std) var(--margin-std) 0 0; background: var(--color-light-bg); height: var(--margin-std); height: 20px; display: block; }

#page-header .bottom-left {margin-bottom: 20px;}
    #page-header h1 {font-weight: bold;}


#slider{max-width: 100% !important; overflow: hidden; margin-bottom: 20px !important;}
#slider, .flexslider, .slides {-webkit-box-sizing:border-box; -moz-box-sizing: border-box; box-sizing: border-box;}


img .headerimg, .headerimg img, .headerimg{width:100%; height:360px !important; object-fit: cover;}

#room_gallery img{margin-right: 5px;}
#room_gallery img:hover{opacity:0.9;}


#meta_roomlinks {display: block; clear: left; padding-top: 10px;}

.homepage_widget {text-align: justify !important; font-size: 15px; font-weight: normal;}
.homepage_widget_h3 {text-align: center !important; 
  color: white !important;
  font-size: 22px; 
  font-weight: 600 !important;
  text-shadow: 0px 0px 20px black;
  text-transform: uppercase !important;
  }
span.overimage {
  cursor: pointer;
  position: absolute;
    bottom: 0px;
    left: 50%;
	transform: translate(-50%, -50%);
  opacity:1;
  font-size: 16px !important;
  transition: all .2s ease-in-out;
width: 100%;text-align:center;}


span.overimage span {
  display: table-cell;
  text-align: center;
  text-transform:uppercase;
  font-size: 16px;
  font-weight: normal;
  transition: all .2s ease-in-out;
}


.ci_widget_room a:hover span.overimage {
  opacity: 1;}
.ci_widget_room a:hover img {
  filter: brightness(70%);
  transition: all .2s ease-in-out;
  object-fit: cover;
  
  }


.room-entry {column-count: 2;}

#menu-fussmenue ul li, ul.menu li, #menu#footer-menu ul li {display: inline !important;}
h1.title {font-size: 36px; text-align: center;margin:5px 0 20px 0; text-transform: uppercase;}
h2.title {font-size: 26px;}


.headerphoto {height: 400px; 
	position: relative;
	top: -88px; }
.headerphoto imga {width:100%; position: absolute;
   top: 50%;
   -webkit-transform: translateY(-50%) translateX(-50%); overflow: hidden;}
.centered-and-cropped { object-fit: cover }




/* = KACHELN
------------------------------------------------------------------------------------------*/

.grid {display: grid; grid-gap: var(--margin-std);}

.grid-6-6, .grid-6-5, .grid-6-4, .grid-6-3, .grid-6-2, .grid-6-1 {grid-template-columns: repeat(6, 1fr);}
.grid-5-5, .grid-5-4, .grid-5-3, .grid-5-2, .grid-5-1 {grid-template-columns: repeat(5, 1fr);}
.grid-4-4, .grid-4-3, .grid-4-2, .grid-4-1 {grid-template-columns: repeat(4, 1fr);}
.grid-3-3, .grid-3-2, .grid-3-1 {grid-template-columns: repeat(3, 1fr);}
.grid-2-2, .grid-2-1, .grid-container-2 {grid-template-columns: repeat(2, 1fr);}
.grid-1-1 {grid-template-columns: repeat(1, 1fr);}

#kultur-kacheln { 
    width: 100%;
    display: flex;
    overflow-x: auto;
}

#kultur-kachel .container {
  position: relative;
  text-align: center;
  color: white;
}

#kultur-kachel {
    width: 250px; 
  display: inline-block;
  vertical-align:top;
  margin:0px 10px;
  white-space:normal;
  flex: 0 0 auto;
    background: white; 
    border-radius: 3px;
    box-shadow: 2px 2px 8px rgba(0,0,0,.05);}

#kultur-kachel .text {padding: 10px 20px 20px 20px;}

#attraction-kacheln {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: var(--margin-std);
}

#home-kacheln .ci_widget_room, #attraction-kacheln .ci_widget_room {display: inline;}

#kultur-kachel:hover {background: var(--color-green-light); color: var(--color-text-main);}
#kultur-kachel:hover .cta {color: var(--color-text-main); background: white;}
#kultur-kachel .title {font-weight: bold;}
#kultur-kachel .detail {font-size: 12px;}
#kultur-kachel .city {font-size: 12px;}
#kultur-kachel .cta {font-size: 12px; background: var(--color-green-light); border-radius: 3px; padding: 2px 4px;}

.mobileslide {width: 100% !important; overflow: scroll; display: block; white-space:nowrap; overflow-scrolling: touch; scroll-snap-type: x mandatory; scrollbar-width: none;}
.mobileslide div {display: inline-block; overflow-wrap: break-word; white-space: normal;scroll-snap-align: start;  scroll-snap-stop: always;}
ul.mobileslide li {display: inline-block; overflow-wrap: break-word; white-space: normal;scroll-snap-align: start;  scroll-snap-stop: always;}
        

#home-kacheln {display: inline-block; padding-right: 20px;}
#home-kacheln #kachel {overflow: hidden; padding-left: 20px; text-align: left; width: 30vw !important; position: relative;}
#home-kacheln #kachel img {border-radius: 15px; box-shadow: 2px 2px 6px rgba(0,0,0,.1);}
#home-kacheln #kachel h3 {font-weight: bold; padding: 10px 0; text-align: left;}
#home-kacheln #kachel:hover h3 {color: var(--color-green-main);}
#home-kacheln #kachel p {font-size: 13px; font-weight: normal; width: 100%; display:block;padding: 0px 0px; margin-bottom: 15px; line-height: 1.2;}
#home-kacheln #kachel:hover .button {background: var(--color-green-light);}
#home-kacheln #kachel:hover i, #kachel:hover h3 {color: var(--color-text-main);}

#home-fitness #kachel {position: relative; text-align: center; color: white;}
#home-fitness #kachel img {border-radius: 15px; filter: brightness(0.8); box-shadow: 2px 2px 6px rgba(0,0,0,.1);}
#home-fitness #kachel h3 {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%); margin:0; padding: 0; font-size: 16px; width: 100%; text-shadow: 0px 0px 6px rgba(0,0,0,.7);}
#home-fitness #kachel:hover img {filter: brightness(0.7);}
#home-fitness #kachel:hover h3 {color: white !important;}

#search-kachel {background: white; border-radius: var(--margin-std); box-shadow: 0px 0px 20px rgba(0,0,0,.1); overflow: hidden;}
#search-kachel h3 {font-weight: bold;padding: 10px 0;font-size: 18px; margin: 0;}
#search-kachel p {font-size: 13px; font-weight: normal; width: 100%; display:block;padding: 0px 0px; margin-bottom: 15px;}

#search-kachel .button {
    border-bottom: 2px dotted var(--color-orange-main);
    padding: 4px 0;
    font-size: var(--font-small);
    display: inline;
}

#search-kachel .content {box-shadow: 0px 0px 20px rgba(0,0,0,.1); overflow: hidden; padding: 10px var(--margin-std) 30px var(--margin-std);
text-align: left;}
#search-kachel img {border-radius: var(--margin-std) var(--margin-std) 0 0;}
#search-kachel:hover img {filter: brightness(1.2);}
#search-kachel:hover .button {
    border-bottom: 2px dotted var(--color-orange-light);}
#search-kachel:hover h3 {
    color: var(--color-orange-light);}

#attraction_single {position: relative; text-align: left; color: white !important; border-radius: 15px; overflow: hidden; height: 200px;}
#attraction_single img {border-radius: 15px !important; object-fit: cover;}
#attraction_single .overlay {
  position: absolute;
  bottom: 0;
  left: 0px;
    background: rgba(0,0,0,0.4);
    color: white !important;
    background: linear-gradient(0deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 100%);
    width: 100%;
    padding: 35px 15px 15px 15px;border-radius: 15px !important;
    font-size: var(--font-small);
}

#attraction_single h3 {color: white; font-weight: bold;
padding: 0px; margin: 0;}

#attraction_single:hover img {opacity: 0.9;}

#activity_single {position: relative; text-align: left; color: white; box-shadow: 0px 0px 20px rgba(0,0,0,0.1); border-radius: 5px;}
#activity_single h3 {color: var(--color-green-main); font-weight: bold;padding: 0px; margin: 0 0 5px 0;}
#activity_single img {border-radius: 5px 5px 0px 0px;}
#activity_single:hover {transform: translateY(-10px); box-shadow: 0px 0px 20px rgba(0,0,0,0.2);}
#activity_single:hover img {opacity: 0.9;}
#activity_single:hover h3 {color: var(--color-green-light);}
#activity_single .text {margin: 0px 20px 20px 20px;}
#activity_single p {margin-bottom: 5px;}
#activity_single .overlay {background: linear-gradient(var(--color-green-main) 0%, white 50%); margin-bottom:10px;}
#activity_single img {
    mix-blend-mode: multiply;
    margin-bottom: 0px; padding-bottom: 0px;
    filter: contrast(1.2);
}
#activity_single .show-map {color: var(--color-grey-light); border: 1px solid var(--color-grey-light); font-size: 12px; padding: 2px 5px; border-radius: 2px; text-transform: uppercase;}
#activity_single:hover .show-map {color: var(--color-green-light); border: 1px solid var(--color-green-light); }

details {margin-bottom: 15px;padding-bottom: 15px; border-bottom: 1px solid #eee;}
details summary {font-weight: bold; font-size: 22px;}

/* = HEADER & MENU / NAVIGATION
------------------------------------------------------------------------------------------*/
#header_distance {height: 5px;}

#search form {
    background: white;
    box-shadow: 2px 2px 20px rgba(0,0,0,.15);
    display: flex;
    padding: 5px 20px;
    border-radius: 50px;
    max-width: 600px;
}
    
#search input[type="search"] {
  border: none;
  background: transparent;
  font-size: 22px;
    line-height: 22px;
    margin: 5px 10px;
  border: 1px white solid;
  border-radius: none;
}

#search input[type="search"]::placeholder {
  color: #bbb;
}
    
#search button[type="submit"] {
  text-indent: -999px;
  overflow: hidden;
  width: 40px;
  padding: 0;
  margin: 0;
  border: 1px solid transparent;
  border-radius: inherit;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' class='bi bi-search' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'%3E%3C/path%3E%3C/svg%3E") no-repeat center;
  cursor: pointer;
  opacity: 0.7;
}

#search button[type="submit"]:hover {
  opacity: 1;
}
    
#search button[type="submit"]:focus,
#search input[type="search"]:focus {
  box-shadow: 0 0 3px 0 #1183d6;
  border-color: #1183d6;
  outline: none;
}

#home .search-container {position: relative; top: -30px;}


.search-container {margin-top: 80px;}
     
     .search-container form {background: var(--color-light-bg); color: var(--color-text-main); display: flex; border-radius: 20px; padding: 0; border: none;}
    .search-container input[type="search"] {
      border: none;
      background: transparent;
      margin: 0;
      padding: 20px 20px;
      font-size: 16px;
      color: inherit;
      border: 1px solid transparent;
      border-radius: inherit;
        border-radius: none !important;}
    .search-container button[type="submit"] {
      text-indent: -999px;
      overflow: hidden;
        float: right;
      width: 40px;
      padding: 0;
      margin: 0 10px 0 0;
      border: 1px solid transparent;
      border-radius: inherit;
      background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' class='bi bi-search' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'%3E%3C/path%3E%3C/svg%3E") no-repeat center;
      cursor: pointer;
      opacity: 0.5;}
    .search-container button[type="submit"]:hover {opacity: 1;}
    .search-container button[type="submit"]:focus, header .search-container input[type="search"]:focus {
      box-shadow: 0 0 3px 0 #1183d6;
      border-color: #1183d6;
      outline: none;}



#header-widget {
    position: absolute;
  	top: var(--margin-std);
  	left: var(--margin-std);
	font-size: 20px;
    z-index: 1000;
	color: white !important;
    text-shadow: 2px 2px 6px rgba(0,0,0,.2);
    
	}

#back-button {
     position: fixed;
  	top: var(--margin-std);
  	left: var(--margin-std);
	font-size: 28px;
	color: var(--color-text-main) !important;
	text-align:center;
	background: white;
    box-shadow: 2px 2px 6px rgba(0,0,0,.2);
    width: 50px;
      height: 50px;
      border-radius: 50%;
    display: flex;
      justify-content: center;
      align-items: center;
    cursor: pointer;

	}

#menu-button, #close-button, #search-button{
    position: fixed;
  	top: var(--margin-std);
  	right: var(--margin-std);
	font-size: 20px;
	color: white !important;
	text-align:center;
	background: var(--color-orange-main);
    box-shadow: 2px 2px 6px rgba(0,0,0,.2);
    font-weight: bold;
    width: 50px;
      height: 50px;
      border-radius: 50%;
    display: flex;
      justify-content: center;
      align-items: center;
	}
#menu-button, #back-button, #search-button {z-index: 1000;}
#close-button{z-index: 1001 !important;}

#menu-button:hover, #close-button:hover, #search-button:hover, #back-button:hover {
	background: var(--color-orange-side) !important;
	color: white !important;
    cursor: pointer;
	}

img.direktion {height: 150px; width: 150px; border-radius: 120px; border: 4px solid white; box-shadow: 5px 5px 15px rgba(0,0,0,.2);  }


h1{
	margin: 7px auto 0 auto;
}

.nav_select{
    display: none;
}


/* =linkage
------------------------------------------------------------------------------------------*/
a {color: var(--color-text-main);}
a:hover {color: var(--color-text-main);}

p a, #entry li a {
	color: var(--color-text-main);
	text-decoration: underline;
    text-decoration-color:  var(--color-orange-main);
}

p a:hover, li.selected a, #entry li a:hover{
    color: white;
	background: var(--color-orange-main);
	text-decoration: none;
}
h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover{
	text-decoration: none;
}

#home-rooms img:hover{transform: scale(1.1);}

a.button{
    text-transform: none;
    background: var(--color-orange-main);
    text-decoration: none;
    border-radius: 20px;
    font-size: var(--font-normal);
    padding: 7px 20px;
    cursor: pointer;
	display: inline-flex;
    color: white;
    margin-bottom: 5px;
}

a.button::after {content: '\eaa0'; font-family: 'IcoFont'}

a.button:hover{
text-decoration: none;
    color: inherit;
background: var(--color-orange-side);
    box-shadow: 3px 3px 10px rgba(0,0,0,.1);
}

a.button2{
    text-transform: uppercase;
    margin-top: 15px;
    background: var(--color-orange-main);
    color: #fff;
    padding: 6px 20px;
    cursor: pointer;
    border: 1px var(--color-orange-main) solid;
	display: inline-block;
}

a.button2:hover{
    text-decoration: none;
    color: white;
    background: var(--color-orange-side); /* Old browsers */
    margin-left: 10px;
    border: 1px var(--color-orange-side) solid;
}

a.buttongreen{
    text-transform: uppercase;
    margin-top: 15px;
    background: var(--color-green-main);
    color: #fff;
    padding: 6px 20px;
    cursor: pointer;
    border: 1px var(--color-green-main) solid;
	display: inline-block;
}

a.buttongreen:hover{
    text-decoration: none;
    color: white;
    background: var(--color-green-light); /* Old browsers */
    margin-left: 10px;
    border: 1px var(--color-green-light) solid;
}


/* =slider
------------------------------------------------------------------------------------------*/

#slider {
	margin: 0 0 0px 0;
	color: #FFF;
}

.copyright {color: var(--color-text-main); position: absolute; top: 0px; right:0; font-size: 6px; background: rgba(0,0,0,0.02); color:white; padding: 2px 4px; text-shadow: 0px 0px 5px rgba(0,0,0,.5); opacity: 0.5;}


/* =booking
------------------------------------------------------------------------------------------*/
.booking-small {float: right; z-index:11; top:-290px; margin-bottom: -300px;}
.header_text {padding-top: 15px;}
#yellowbg{
    width: 100%;
    clear: both;
    background: #f3ce56; border-radius: 2px;
    padding: 0px 80px;
    min-height: 120px;
}


.booking_support {font-size: 11px; float: right;color: black;}

.bs1 { display:inline-block; width: 410px; height: 20px;vertical-align:top;}
.bs2 { display:inline-block; width: 165px; text-align: left;}
.booking_support a {font-weight: normal; color: black; text-decoration: underline;}
.booking_support a:hover {font-weight: normal; color: black; text-decoration: none;}

.booking-test{
    width: 100%;
    clear: both;
    background: #fab700;border-radius: 2px;
    margin: 0 0 20px 0;
}

.booking-room{
    width: 100%;
    top: -50px;
    position: relative;
    clear: both;
    height: 80px;
    background: rgba(0,0,0,0.5);
    margin: 0 0 40px 0;
}

.booking_rum{
    float: left;
    width: 100%;
    clear: both;
    background: url(http://www.persiluhr.de/wp-content/uploads/2013/06/101.jpg);
  max-width: 100%;
background-size:100% auto;

    padding: 40px 40px 100px 40px;
}

.bookinglanding{
    float: left;
    width: 500px;
    clear: both;
    height: 80px;
	position:relative;
    background: rgba(250,183,0,0.8);
    margin: 0 0 0 0;
	padding-bottom: 5px;
    border: 1px rgba(255,255,255,0.5) solid;
	left: -50%;

	-webkit-border-radius:  8px;
	-moz-border-radius:  8px;
	border-radius:  8px;


}

#malsehen {
  float: left;
  position: relative;
  left: 50%;
}

.full-booking {
	float: none;
	background: none;
	heihgt: auto;
}


.nurmalso {
	width: 100%;
	height: 45px;    
  margin: 15px auto 15px auto;
  font-style: italic;
}

.nurmalso label{
    float: left;
    width: 100%;
    font-size: 12px;
    padding: 11px 3px 11px 3px;
    background-color: #fff;
    border: 1px solid #E3E3E3;
}





#abstand, .abstand {height: 20px; display: block;}

.room_intro h3 {text-align: left; text-transform: uppercase;}
.room_intro p {font-size: 15px;}
.room_intro:hover img {
	transform: scale(1.05);}
.room_intro div{
    background-color: #fff;
    padding: 0 0 0 0;
}

.room_intro .offer {
    position: absolute;
    background: #fab700;
    text-align: center;
    top: 0px;
    color: #FFF;
    text-transform: uppercase;
    font-size: 13px !important;
    padding: 4px 7px;
    line-height: normal;
    left: 50%;
    margin-left: -65px; }
    

    
.room_intro .item-thumb {
    position: relative; }
    
.room_intro .item-thumb > a {
      position: relative;
      display: block; }
.room_intro .item-thumb > a:after {
      content: '';
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      background: rgba(0, 0, 0, 0);
      transition: background-color 0.18s ease; }


/* =share + book =booknow
------------------------------------------------------------------------------------------*/

.book_now p{
    float: none;
    display: inline-block;
    font-size: 12px;
    font-style: italic;
    margin: 0;
    padding: 14px 40px 0 0;
    line-height: 1.5;
    text-align: right;
}

/* =testimonials
------------------------------------------------------------------------------------------*/

a.arrow_up,
a.arrow_down{
    display: block;
    width: 24px;
    height: 12px
}

a.arrow_up{
    margin: 0 auto 25px auto;
}

a.arrow_down{
    margin: 15px auto 0 auto;
}

/* =location
------------------------------------------------------------------------------------------*/



dl dt{
    display: block;
    float: left;
    width: 10%;   
    padding: 30px 10px 0 0;
}

dl dd{
    display: block;
    float: right;    
    width: 90%;
}

/* =gallery
------------------------------------------------------------------------------------------*/
.full.gallery{
    background-color: #f0f0f0; 
    padding: 0 
}

.single-gallery .entry { margin-bottom: 50px; }

/* =services
------------------------------------------------------------------------------------------*/



/* =contact
------------------------------------------------------------------------------------------*/
.contact_form{
    float: left;
    width: 100%;
    margin: 0 0 50px 0;
}

.contact_form input,
.reply input{
    width: 45%;
    height: 45px;
    font-size: 14px;
    font-style: italic;
    background-color: #fff;
    color: #686868;
    border: 1px solid #ebebeb;
    margin: 0 20px 20px 0;
    padding: 0 0 0 15px
}

::-webkit-input-placeholder{
    color: #686868;
}
:-moz-placeholder{
    color: #686868;
}
input[placeholder], [placeholder], *[placeholder]{
    color:#686868!important
}

.contact_form input+input,
.reply input+input{
    margin: 0 0 20px 0;    
}

.contact_form textarea,
.reply textarea{
    float: left;
    width: 95%;
    height: 230px;
    font-size: 14px;
    font-style: italic;
    background-color: #fff;
    color: #686868;
    border: 1px solid #ebebeb;
    margin: 0 20px 30px 0;
    padding: 20px 0 0 20px;
    overflow: hidden;
}

.contact_form input.button,
.reply input.button{
    display: block;
    float: left;
    width: 20%;
    margin: 0 0 10px 0;
    background-color: #fab700;
    color: #fff;
    text-transform: uppercase;
    font-style: normal;
    border: none;
    padding: 6px 0;
    border: 1px solid #faa700;
    border-radius: 4px;
    cursor: pointer;
    text-align: center;
    -webkit-transition: all .2s linear;
    -moz-transition: all .2s linear;
    -o-transition: all .2s linear;
    transition: all .2s linear;
}

.contact_form input.button:hover,
.reply input.button:hover{
    background-color: #fac700;
    color: #333;
    border: 1px solid #faa700;
}

#formerrors, #formsuccess {
	font-size: 12px;
	padding: 10px;
	margin-bottom: 20px;
	background: rgba(233, 6, 0, 0.11);
	list-style: none;
}

#formsuccess {
	background: rgba(12, 233, 35, 0.10);
}
#formerrors li {
	padding: 5px 0;
	margin: 0;
}

/* =blog
------------------------------------------------------------------------------------------*/
.blog div.line{
    margin: 20px auto 40px auto;
    width: 100%;
    background: url(img/global/line.png) left center repeat-x;
    text-align: center;
    overflow: hidden;
}

#entry {padding: var(--margin-std) var(--margin-std)}
.entry{width: 100%;}
.entry img {border: 5px solid white; box-shadow: 2px 2px 8px rgba(0,0,0,.1);}

h1.center, h2.center, h3.center, h4.center, h5.center {
	text-align: center !important;}

.entry a, .entry a:visited {
	color: #000;
}

.divider{
    clear: both;
    float: left;
    width: 100%;
    height: 50px;
    background: url(img/global/basement.png) no-repeat center center;    
}

div.pagination{
    clear: both;
    float: left;
    width: 100%;   
    padding: 10px 0 0 0;
}

div.pagination div.centered{
    width: 340px
}

div.pagination span {
    float: left;
    width: 24px;
    height: 24px;
    margin: 0px 5px 0 0;
    text-align: center;
}

#paging, .pagination { margin-bottom: 50px; font-size: 12px; }


/* =WordPress Core
-------------------------------------------------------------- */
.alignnone {
	margin: 5px 20px 20px 0;
}

.aligncenter,
div.aligncenter {
	display: block;
	margin: 5px auto 5px auto;
}

.alignright {
	float:right;
	margin: 5px 0 20px 20px;
}

.alignleft {
	float: left;
	margin: 5px 20px 20px 0;
}

.aligncenter {
	display: block;
	margin: 5px auto 5px auto;
}

a img.alignright {
	float: right;
	margin: 5px 0 20px 20px;
}

a img.alignnone {
	margin: 5px 20px 20px 0;
}

a img.alignleft {
	float: left;
	margin: 5px 20px 20px 0;
}

a img.aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto
}

.wp-caption {
	max-width: 800px;
	padding: 0px 0px 10px 0px;
}

.wp-caption.alignnone {
	margin: 5px 20px 20px 0;
}

.wp-caption.alignleft {
	margin: 5px 20px 20px 0;
}

.wp-caption.alignright {
	margin: 5px 0 20px 20px;
}

.wp-caption img {
	border: 0 none;
	height: auto;
	margin: 0;
	padding: 0;
	width: auto;
}

.wp-caption p.wp-caption-text, .wp-caption-text {
	font-size: var(--font-small);
	line-height: 1.2;
	margin: 0;
	padding: 0 0 5px;
}



/* =sidebar
------------------------------------------------------------------------------------------*/



.tul{
    font-size: 13px;
    color: #333;
}

.tul li{
    clear: both;
    float: left;
    width: 100%;
    margin: 0 0 10px 0;
    padding: 0 0 10px 0;
    border-bottom: 1px solid #d2d2d2;
}

.tul li:last-child{
    border-bottom: none;
}

.tul span{
    float: left;
    width: 100%;
	color: #686868;
}



li.cat-item{
    font-size: 13px;
    padding: 10px 0;
    border-bottom: 1px solid #d2d2d2;
}

li.cat-item:last-child{
    border-bottom: none;
}

.widget_ci_room_widget h3,
.widget_ci_page_widget h3 {
	text-align: center;
	font-weight: normal;
}

.widget ul li {
	font-size: 12px; display: inline;
}




/* #footer
------------------------------------------------------------------------------------------*/
footer{
    padding: var(--margin-std);
    background: white;
    text-align: center;
}

#social {text-align: center; width: 100%; display: flex; justify-content: center; align-items: center;}
a.social {
    width: 50px; 
    height: 50px; 
    background: var(--color-green-main);
    margin: var(--margin-std) 10px;
    text-align: center;
    font-size: 26px;
	transition: all ease-in-out 0.18s;
	color: white !important;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
}
a.social:hover {
	transition: all ease-in-out 0.18s;
    background: var(--color-orange-main); transform: scale(1.1);}



/* Image Box Style */
#mainwrapper .box {
	cursor: pointer;
	height: 205px;
	float: left;
	position: relative;
	overflow: hidden;
	width: 339px;
}
#mainwrapper .box img {
	position: absolute;
	left: 0;
		-webkit-transition: all 300ms ease-out;
		-moz-transition: all 300ms ease-out;
		-o-transition: all 300ms ease-out;
		-ms-transition: all 300ms ease-out;	
	transition: all 300ms ease-out;
}

/* Caption Common Style */
#mainwrapper .box .caption {
	position: absolute;
	color: #fff;
	z-index: 100;
	left: 0;
	text-shadow: 0px 0px 4px black;
background: -moz-linear-gradient(top,  rgba(0,0,0,0) 0%, rgba(0,0,0,0.1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		-webkit-transition: all 300ms ease-out;
		-moz-transition: all 300ms ease-out;
		-o-transition: all 300ms ease-out;
		-ms-transition: all 300ms ease-out;	
		transition: all 300ms ease-out;
}


/** Caption 6: Scale **/

#mainwrapper .box .scale-caption  {
	opacity: 1;
	width: 339px;
	height: 205px;
	text-align: left;
	padding: 10px;
}

.offer2 {
    background: #fab700;
    padding: 2px 5px !important;
    font-size: 13px !important;
    line-height: normal;}

#mainwrapper .box .scale-caption h3, #mainwrapper .box .scale-caption p, #mainwrapper .box .scale-caption a {

	color: #fff;
	text-align: left;
	position: relative;
	bottom: -132px;
	width: 330px;
	-webkit-transition: all 300ms ease-out;
	-moz-transition: all 300ms ease-out;
	-o-transition: all 300ms ease-out;
	-ms-transition: all 300ms ease-out;	
	transition: all 300ms ease-out;
}

#mainwrapper .box .scale-caption h3 {
	font-weight: bold !important;
	border-bottom: 1px solid #7cb518;
	margin-bottom: 5px;
}

#mainwrapper .box .scale-caption p, #mainwrapper .box .scale-caption a {
	padding: 0px;
	font-weight: normal !important;
}

/** Scale Caption :hover Behaviour **/

#mainwrapper .box:hover .scale-caption  {
	opacity: 1;
background: -moz-linear-gradient(top,  rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.7) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(0,0,0,0.3) 0%,rgba(0,0,0,0.7) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(0,0,0,0.3) 0%,rgba(0,0,0,0.7) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
-webkit-transition: background 300ms linear;
		-moz-transition: background 300ms linear;
		-o-transition: background 300ms linear;
		-ms-transition: background 300ms linear;	
		transition: background 300ms linear;
}

#mainwrapper .box:hover #image-6 {
	-moz-transform: scale(1);
	-o-transform: scale(1);
	-webkit-transform: scale(1);
	transform: scale(1);
}

#mainwrapper .box:hover .scale-caption h3, #mainwrapper .box:hover .scale-caption p, #mainwrapper .box:hover .scale-caption a {
	-moz-transform: translateY(-100px);
	-o-transform: translateY(-100px);
	-webkit-transform: translateY(-100px);
	transform: translateY(-100px);
}
/* =typo
------------------------------------------------------------------------------------------*/


.special_offer p{
	margin: 0 20px 20px 0;
}

.amenities ul{
    display: block;
    list-style-type: none;
    margin: 10px 0 0 0;
    padding: 0;
    float: left;
    font-size: 13px;
	color: #333;
}

.amenities ul li{
	float: left;
	width: 196px;
    margin: 0 10px 20px 0;
    padding: 0 0 0 0px;
}
.amenities ul li:before {
  content: "☆ ";
}

blockquote p{
    font-size: 18px;
    text-align: center;
    margin: 0 0 10px 0;
    color: #333;
}

blockquote p.client{
    font-weight: bold;
    font-size: 13px;
}

/* =blog =typo
---------*/




/* =table
------------------------------------------------------------------------------------------*/
.table_container{
    float: left;
    width: 100%;
    margin: 20px 0;    
}

table{
    float: left;
    width: 94%;
    font-size: 13px;
    margin: 20px 3%;
}

th{
    border-bottom: 1px solid #686868;
    border-right: 1px solid #DEDCD3;
    color: #444;
    font-weight: normal;
    padding: 2%;
}

td{
    border-bottom: 1px solid #d7d7d7;
    border-right: 1px solid #DEDCD3;
    text-align: center;
		padding: 5px;
}

th:last-child,
td:last-child{
    border-right: none;
}

tr:last-child td{
    border-bottom: none;
}

/* =foot =typo
------------------------------------------------------------------------------------------*/
footer ul{
    display: inline;
    list-style-type: 'none';
    margin: 0;
    text-transform: uppercase;
    padding: 0;
}

footer ul li, footer ul li.cat-item {
	font-size: 12px;
    padding: 0 5px;
	border: none;
    display: inline;
}
footer ul li a {color: #777;}
footer ul li a:hover {color: #111;}

/* =img
------------------------------------------------------------------------------------------*/
.img_left{
    float: left;
    margin: 0 30px 30px 0;
}
.welcome .img_left {
	margin-bottom: 20px;
}

.img_center{
    float: none;
    display: block;
    margin: 0 auto 30px;
}



/*pagination links */
div.pagination a, .wp-pagenavi a, .wp-pagenavi a:visited, .wp-pagenavi span {
    float: left;
    display: inline-block;
    background-color: white;
    color: var(--color-text-main);
    font-size: 13px;
    border-radius: 40px;
    margin: 0 0px 0 0 !important;
    border: none !important;
}

div.pagination a:hover, .wp-pagenavi a:hover{
    background-color: #EFEFEF;
		border-bottom: none;
		text-decoration: none;
}

div.pagination a.selected, .wp-pagenavi span.current{
    background-color: #333;
    color: #fff;
}



/*** HAMBURGER MENU ***/

nav {
    height: 100%;
    width: 0;
    position: fixed; 
    z-index: 5; 
    right: 0;
    top: 0;
    background-color: rgba(0,0,0, 0.4); 
    overflow-x: hidden; 
    transition: 0.2s; 
}
    
nav #container {width: 90vw; background: white; float: right; padding: 10px 30px; height: 100vh;}
    
ul#main-nav {padding-top: 25px;}
ul#main-nav > li {display: block; padding: 0; margin: 0; font-size: 18px; font-weight: bold; border-bottom: 1px solid var(--color-light-bg); }
ul#main-nav li a {display: block; margin: 5px 0; }
ul#main-nav li a:hover {color: var(--color-orange-main);}
ul#main-nav li ul li a {font-weight: normal;}
ul#main-nav i {display: inline-block; width: 20px; color: var(--color-orange-main); text-align: center; margin-right: 10px;}
ul#main-nav li.menu-item-has-children > a::after {content: '\eaa0'; float: right; margin-right: 5px; font-family: "IcoFont"; }    

ul#main-nav li ul {display: none; font-size: 15px; }
ul#main-nav > li:hover > ul {
    text-align: left;
    display:block;
    position: relative;
    margin: 0;
    top: 0;
    left: 0;
    float: none;
    width: auto;
    padding: 0px 25px;
    box-shadow: none;
    border-top: none;
    transition: 1s 1s;
    z-index: 3;
    transition-delay:1s;
}
    
    ul#main-nav li ul li {display: block;}
    ul#main-nav li ul li a {padding: 5px !important;}




@media (prefers-color-scheme: dark) {
    
    :root {
   --color-orange-main: #FAB700;
   --color-orange-side: #F09F19;
   --color-orange-light: #eece6a;
   --color-accent-light: #FFEDCB;
   --color-green-side: #95B329;
   --color-green-main: #6EA901;
   --color-green-light: #d9de49;
   --color-grey-light: #bbbbbb;
    --color-light-bg: #202124;
   --color-text-main: white;
   --color-text-light: #DFE0DF;
    --color-accent-dark: #2d2c4b;
   
}
    
    
  htmle { filter: invert(100%); }
    img { filter: brightness(0.9);}
    html, body {background: var(--color-light-bg); color: var(--color-text-main);}
    #back-button i {color: var(--color-light-bg);}
    .entry p, b, strong, p, ul li a, a {color: var(--color-text-main) !important;}
    footer, #overlay-menu, ul#quickstart li a, ul#service li a, nav #container, #search-kachel .content, #search-kachel {background: #35363a;}
    #kultur-kachel, #kultur-kachel:hover, #kultur-kachel:hover .cta, #kachel p {color: var(--color-light-bg) !important;}
    
    
    #home-hero #image {
    
    background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.2)),
    url("img/global/header-hero.jpg") no-repeat center center; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

#home-hero #image .text {
    background-image: linear-gradient(rgba(45,44,75,0), rgba(45,44,75,1));
}
    
    
    }
}