/* =============================================================================
   General Styles
   ========================================================================== */     

/* Hide from both screenreaders and browsers */
.hidden { display: none !important; visibility: hidden; }
.invisible { visibility: hidden; }
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
a:active, a:focus {outline: none;  text-decoration: none;}

body, input, button, select, textarea { font-family: 'Titillium Web', sans-serif; font-weight: 400; }
b, strong, h1, h2, h3 { font-family: 'Titillium Web', sans-serif; font-weight: 600; }   
.small { font-size: 0.8em;}                                                                                                 
a:hover [class^="icon-"], a:hover [class*=" icon-"] { background-image: url("../img/glyphicons-halflings-black.png"); }

/* =============================================================================
   Custom Styles  : #F4ECE1 (beige) - #A81620 (rot) - #D7A826 (gelb) - #666   - #eee
   ========================================================================== */    

html,body{height:100.5%;}                       
body {
  background-color: #F4ECE1;
  color: #666;
}     
a { color: #A81620;}    
a:hover { color: #000; text-decoration: none; }

.head, #footer { box-shadow: 0 0 12px #666; border-radius: 3px; }   
.itemliste .item, input.formsubmit { box-shadow: 0 0 1px #eee; border-radius: 0; }

.bilditem { z-index: 1; position: relative; }

.head { margin: 0; background: #fff; z-index: 10; position: relative; }  
#logo { padding: 5px; float: left; width: 275px; margin-left: -35px; } 
#logo img { width: auto; height: 100%; max-width: 241px; max-height: 80px; }    

#topnav { display: block; float: right; width: auto; margin: 30px 3em 0 0;  line-height: 20px; font-size: 16px; font-weight: 400; }           
#topnav ul li a { border-right: 1px solid #888; color: #000; background: transparent; border-radius: 0; }     
#topnav ul li:last-child a { border-right: 0; }    
#topnav ul li a:hover { text-decoration: none; color: #A81620; }                                                       
#topnav ul li li a { border-right: 0; }   
#topnav .nav .dropdown-toggle .caret { border-bottom-color: #000; border-top-color: #000; }               
#topnav ul li form { border-left: 0; border-radius: 0; padding: 6px 0 0 12px; }                   
#topnav ul li form input { width: 60px; font-size: 13px; line-height: 13px;  padding: 2px 5px; height: 14px; border-radius: 0;  box-shadow: none; border-right: 0; }                                                                   
#topnav ul li form button { padding: 2px 4px; font-size: 10px; line-height: 13px; border-radius: 0; background: #fff; box-shadow: none; border-left: 0; }     
#topnav ul li form .input-append { margin-bottom: 0; }

#booking { float: right; margin: 30px 0 0 0; background: #A81620; color: #fff; border: 0; font-size: 1.2em; line-height: 1.6em; }
#booking:hover { background: #000; }

h1 { text-transform: uppercase; font-size: 1.5em; line-height: 1.1em; margin: 2em 0 1em 0;}
h1 span, h2 span, h3 span { color: #D7A826; font-weight: 400;}
h2 { color: #A81620; text-transform: uppercase; font-size: 1.5em; line-height: 1.1em; margin: 0 0 1em 0; }      
h3 { color: #A81620; text-transform: none; font-size: 1.1em; line-height: 1.1em; margin: 1em 0; }   
#inhalt h1 { color: #A81620; font-size: 1.7em;}

.item { display: block; float: left; margin-right: 20px; margin-bottom: 1em; background: #fff; }    
.item .bild { height: 220px; overflow: hidden; }                              
.item .bild img { min-width: 100%; min-height: 100%; max-width: auto; height: auto; width: auto; }          
.item h2 { margin: 0.3em 0;}
.item .desc { padding: 5px 12px; font-size: 0.9em; line-height: 1.2em; }      
.item .subdesc { padding: 0 8px 10px 8px; font-size: 0.9em; }  
.item .subbutton a { display: block; background: #000; color: #fff; border-top: 0; padding: 10px 8px; font-size: 1em; font-weight: bold; }  
.item .subbutton a:hover { background: #A81620; color: #fff; text-decoration: none; }                                                                       
.item .subbutton a .arrow { display: block; width: auto; float: right; font-style: normal; margin-right: 3px; font-size: 1.2em; line-height: 1em; }

.carousel .item { width: 100%; margin-right: 0;  }

#lutherarrow { display: block; margin-left: 20px;}    
#navarrow { display: none; margin-bottom: -30px; z-index: 11; position: absolute; }    
.open > .dropdown-menu { z-index: 12; }
#choosennav {}  

#finder form legend { font-size: 15px; font-weight: bold; text-transform: uppercase; border-color: #666; }      
#finder form label { margin-bottom: 0; font-size: 13px; }                                        
#finder form select { width: 200px; border-radius: 0; }                                          
#finder form input.input { width: 186px; border-radius: 0; box-shadow: none; }                                          
input.formsubmit { background: #A81620; color: #fff; border: 0; padding: 4px 2em; text-transform: uppercase; font-weight: bold; }   
input.formsubmit:hover { background: #000; }     
#loginform button { clear: both; display: block;}        
 
/* Footer styles */
#footer { background: #fff; color: #666; border-top: 1px solid #aaa; border-radius: 0;}
#footer a, #footer a:hover { color: #666; text-decoration: none; }   
#footer p { text-align: right;  font-size: 12px; line-height: 12px; padding: 6px 0 6px 0px;}       
a.logout, #footer a.logout, #footer a.logout:hover { color: #A81620; }     

#footer div.lang { float: left; width: auto; font-size: 12px; text-transform: uppercase; line-height: 12px; padding: 6px 0 6px 0px; }      
#footer div.lang a { margin-right: 3px; color: #000; }                     

/* ==|== Carousel styles ======================================================= */
.carousel .item .container { width: 100%; }
.carousel{position:relative;  margin-bottom:20px;  line-height:1; background: transparent; height: 308px; overflow: hidden;}
.carousel-inner{position:relative;  width:100%;  overflow:hidden;}
.carousel-inner > .item{position:relative;  display:none;  -webkit-transition:0.6s ease-in-out left;     -moz-transition:0.6s ease-in-out left;       -o-transition:0.6s ease-in-out left;          transition:0.6s ease-in-out left;}
.carousel-inner > .item > img, .carousel-inner > .item > a > img{display:block;  line-height:1; max-width: 460px; max-height: 100%; height: auto; float: right; margin-right: 220px;}
.carousel-inner > .active, .carousel-inner > .next, .carousel-inner > .prev{display:block;}
.carousel-inner > .active{left:0;}
.carousel-inner > .next, .carousel-inner > .prev{position:absolute;  top:0;  width:100%;}
.carousel-inner > .next{left:100%;}
.carousel-inner > .prev{left:-100%;}
.carousel-inner > .next.left, .carousel-inner > .prev.right{left:0;}
.carousel-inner > .active.left{left:-100%;}
.carousel-inner > .active.right{left:100%;}
.carousel-control{position:absolute;  bottom: 0;  top: auto; right:41px; left: auto; width:40px;  height:40px;  margin-top: 0;  font-size:60px;  font-weight:100;  line-height:30px;  color:#fff;  text-align:center;  background:#000;  border: 0;  border-radius: 0;  opacity:1; }
.carousel-control.right{right: 0;  left:auto;}
.carousel-control:hover { background:#A81620; }
a.carousel-control, .carousel-control:hover, .carousel-control:focus{color:#ffffff;  text-decoration:none;  opacity:0.8;  filter:alpha(opacity=90);}
.carousel-indicators{position:absolute;  top:10px;  left:10px;  z-index:5;  margin:0;  list-style:none; display: none;}
.carousel-indicators li{display:block;  float:left;  width:10px;  height:10px;  margin-left:5px;  text-indent:-999px;  background:#fff;  opacity: 0.5; border-radius:5px;}
.carousel-indicators .active{background:#fff; opacity: 1;}
.carousel-caption{position:absolute;  right: 0;  bottom:0;  top: 0; left: auto; width: 190px; padding: 15px;  font-size: 1em; background: #fff; }  
.carousel-caption h2 {line-height: 1em; padding-bottom: 10px;}
.carousel-caption p{line-height:1.2em;  color:#000;}
.carousel-caption p{margin-bottom:0;}
.carousel-inner > .item > .slidercopy {display:block;  line-height:1; max-width: 460px; max-height: 100%; height: auto; float: right; margin-right: 220px; position: relative; bottom: 0; padding: 2px; margin-top: -16px; height: 12px; line-height: 12px; font-size: 10px; color: #fff; }
                                                                     
.textitem { margin: 1em 0;  } 
.bilditem { height: 308px; overflow: hidden; margin-bottom: 1em;  }       
.bilditem { text-align: right;  }  
.bilditem .imgdesc { position: absolute; bottom: 8px; left: 0; right: 0; background: #000; opacity: 0.4; color: #fff; padding: 8px;  }

.einzelbild { float: right; border: 1px solid #ccc; margin: 0 0 1.5em 2em; background: #fff; padding: 1px; }
                                
.media div.datum { width: 70px; min-height: 70px; background: #fff; border-radius: 6px; text-align: center; padding: 5px;}    
.media div.counter { width: 30px; min-height: 30px; background: #fff; border-radius: 6px; text-align: center; padding: 5px; line-height: 28px; font-size: 18px; font-weight: bold; }   
.media div.gfbild { width: 80px; min-height: 80px; background: #fff; border-radius: 6px; text-align: center; padding: 0;}     
.media div.gfbild img { border-radius: 6px; }
img.gfbild { border-radius: 6px; margin: 0 0 1em 1em;}
.halb { float: left; width: 46%; margin-right: 4%; color: #000; font-size: 0.9em; }
.media-body h3 { margin: 0; line-height: 1.3em; }     
.halb span.h3 { margin: 0; line-height: 1.3em; color: #A81620; font-size: 1.2em; display: block; }
.media span.day { font-size: 2.5em; display: block; padding: 5px 0 6px 0; font-weight: bold; }  
.media span.month { font-size: 1.4em; display: block; padding: 0 0 1px 0; text-transform: uppercase; }
.media span.year { font-size: 1.0em; display: block; padding: 0; line-height: 1em;}     
.media-body { border-top: 1px solid #fff; padding-top: 6px; }
.media-body [class^="icon-"], .media-body [class*=" icon-"] { margin-top: 4px;}

.media a.news { display: block; padding: 4px 1em; margin: 2px 0 1em 0; width: auto; float: right; background: #A81620; color: #fff; border-radius: 6px;} 
.media a.news:hover { background: #000; }


a.buchen { display: block; padding: 4px 1em; margin: 2px 0 1em 0; width: auto; float: left; background: #A81620; color: #fff; border: 0; border-radius: 6px;} 
a.buchen:hover { background: #000; color: #fff; text-shadow: none;}

.openmodal { cursor: pointer; }
#gfinfo .modal-header h3 { color: #D7A826; font-size: 1.2em; }     
#gfinfo #gfinfotext h3 { margin: 0 0 4px 0; }
.accordion-group { border: 0; border-radius: 0;}
#gfinfo .accordion-toggle a { color: #666; background: #eee; display: block; padding: 6px; margin-bottom: 3px; }   
#gfinfo .accordion-toggle a:hover { color: #000; background: #D7A826;}    
.accordion-heading .accordion-toggle { color: #666; background: #fff; display: block; border: 0; border-radius: 6px;}     
.accordion-heading .accordion-label { display: inline-block;  padding: 1px 6px; color: #fff; background: #A81620; margin: 0 1em; font-size: 0.8em; line-height: 1.1em; }   
.accordion-heading .accordion-toggle:hover { color: #000; background: #D7A826;}    
.accordion-heading .accordion-label:hover { color: #fff; background: #000;}
.noborder .accordion-inner { border-top: 0; padding: 10px 15px 0 15px; }
.accordion { margin-bottom: 10px; }
#buchung .accordion-heading fieldset { margin: 0;}

#buchung fieldset { display: block; background: #fff; border: 1px solid #eee; padding: 6px 10px; color: #000; margin: 0 0 1em 0;}  
#buchung fieldset.formhead label { display: block; float: left; width: auto;}     
#buchung fieldset.formhead .choosen { display: block; float: left; width: auto; font-weight: bold; padding-right: 8px; }  
#buchung fieldset.formhead label.choosen { line-height: 30px; padding-top: 6px; }  
#buchung .buchung-inner { padding-left: 10px;}      
#buchung fieldset h3 { padding-top: 0; margin-top: 0; }   
#buchung fieldset.form-horizontal input { width: 95%; }    
#buchung fieldset.form-horizontal input.half { width: 50%; }        
#buchung fieldset.form-horizontal textarea { width: 95%; } 
#buchung input.formsubmit { width: 100%; }                                      
#buchung fieldset.form-horizontal .controls input.formsubmit { width: 98%; padding-left: 0; padding-right: 0;  }  

#buchung .buchung-inner .accordion { margin-right: 20px; margin-left: 10px; }   
#buchung .buchung-inner .accordion a.buchen { width: 100%; padding-left: 0; padding-right: 0;  } 

#inhalt h1 { margin-top: 0; }                                 
#collapsenachrichten .openmodal { margin: 4px 0;} 
#collapsenachrichten .openmodal .media-body { padding: 4px;} 
#collapsenachrichten .openmodal .media-body:hover { background: #fff;} 

/* Bearbeitungsbereich */
table#meinprofil { background: #fff; padding: 5px; }
.editable-click, a.editable-click, a.editable-click:hover  { border: 0; color: #000; }
a.editable-click:hover  { color: #A81620; }
a.bearbeiten { padding-right: 20px; background: url("../img/editable.png") right 3px no-repeat transparent; min-height: 14px; min-width: 14px; display: block; }
.editable-input { width: 70%;}     
#meinprofil .input-medium, #meinprofil .input-large { width: 80%; }
.editable-container.editable-inline { width: 100%;}   
.editable-buttons {}  
#meinprofil tr td { width: 90%; }  
#meinprofil tr td:first-child { width: 120px; white-space: nowrap; }

select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input { border-radius: 0; box-shadow: none;}
/* barrierefrei ohne JS */

/* Abmessungen */    
.wrap { width: 960px; margin: 0 auto;}    
.logo { height: 80px;}                                        
#finder { float: left; width: 200px; padding-bottom: 40px;} 
#inhalt { float: right; width: 700px; padding-bottom: 40px;}    
.item { width: 220px; }
#footer { position: fixed; bottom: 0; left: 0; right: 0; height: 25px; overflow: hidden; z-index: 3;}          
.modal { width: 720px; }


/* Media Abmessungen */      
@media only screen and (min-width: 1280px) {
}

@media only screen and (max-width: 980px) {    
  .wrap { width: 100%; }   
  body { padding: 0; }   
  #logo { margin-left: 1%; }     
  #booking { margin-right: 1%; }
  #finder { width: 20%; margin-left: 1%;}
  #inhalt { width: 76%; margin: 0 1%; }                
  #topnav { clear: both; margin: 4px 1%; }
  #topnav .nav { margin-bottom: 0;}
  #navarrow { display: none !important; left: -9999px;}     
  #footer { }       
  #footer p { padding-right: 10px;}
   
   h1 { margin: 0.5em 1%;}
   #finder form select { width: 100%; }                                          
   #finder form input.input { width: 91%; padding-left: 4%; padding-right: 4%;}   
   
   .bilditem { width: 100%; height: auto;}  
  .carousel-inner > .item > img, .carousel-inner > .item > a > img { float: left; }  
  .modal { width: 90%; margin-left: -45%; max-height: 80%; }
  .modal-footer { display: none;}                 
  #footer div.lang { margin-left: 1%; }    
}

@media only screen and (max-width: 720px) {  
  #finder { display: none;}   
  #inhalt { width: 98%; margin: 0 1%; }                        
  .halb { width: 96%; } 
}          

@media only screen and (max-width: 510px) {  
  #logo { width: 160px; }               
  #logo img { width: 160px; height: 53px;}
  #booking { margin-top: 12px;}
  #topnav { font-size: 13px; }   
  .nav-tabs > li > a, .nav-pills > li > a { padding-left: 4px; padding-right: 4px;}
  .dropdown-menu { min-width: 120px; }
  .form-horizontal .control-label { width: 100%; text-align: left;}
  .form-horizontal .controls { margin-left: 0; }
  .form-horizontal .control-group { margin-bottom: 6px;}                                                                                                             
  .carousel, .carousel-inner { overflow: visible; height: auto; min-height: 308px; }    
  .carousel .item { background: #eee; }                                  
  .carousel-caption {position:relative; clear: both; right: 0;  bottom:0;  top: 100%; left: 0; width: 98%; padding: 12px 1%;  font-size: 0.9em; background: #fff; } 
  .carousel-inner > .item > img, .carousel-inner > .item > a > img { max-width: 100%;}
  .carousel-inner > .item > .slidercopy {float: left; position: relative; }
  a.carousel-control, .carousel-control:hover, .carousel-control:focus { opacity: 1;}     
  #footer { position: relative; height: auto; min-height: 25px; }        
  #footer div.lang { display: block; width: 99%; border-bottom: 1px solid #ccc; margin-bottom: 6px; }    
  #footer p { }
}   

@media only screen and (max-height: 479px) {  
  .modal-body { max-height: 240px;}   
}  

@media print {    
  a[href]:after {
    content: none;
  }
  #topnav, #booking, #finder, #navarrow, .noprint { display: none !important; left: -9999px;}       
  #inhalt { float: none; width: 100%; padding: 1em 0;}   
  .wrap { width: 100%; }   
  
  body { background: #fff; padding: 1em 5%; }      
  .head, #footer { box-shadow: none; }
  #footer { position: relative; }     
  
  .bilditem { overflow: visible; }
  .bilditem .imgdesc { right: auto; position: relative; background: none; color: #000; top: 0; bottom: auto; padding: 0; opacity: 1;}                   
  .halb { width: 96%; }
  
  .container { width: 100%; }    
  .carousel-inner > .item > img, .carousel-inner > .item > a > img { float: left; }                                                                                               
}