:root {
--clr1: #b8ae96;
--clr-text: #5e5e5d;
--bg-textfeld: #edebe5;
--bg-rundbutton: #c1c911;
--bg-table: #f7f6f2;
}


html, body {
	font-family: "Oxanium","Helvetica Neue",Verdana,Arial,sans-serif;
}

h1{
	font-family: "Oxanium",serif;
	line-height:1.3em;
	font-size:2.4em;
	font-weight:700;
	text-transform: uppercase;
}


/* ------------- Navigation ------------ */
.bg-nav {
transition: 1.5s ease-in;    
background-color: #ffffff;
}
.bg-nav.scrolled {
background-color: #ffffff;
}

.logo {
 max-width: 140px;
 margin: 6px 0px;   
}

@media (max-width: 767.98px) { 
.logo {
max-width: 100px;   
}    
}
@media (max-width: 991.98px) {
.logo {
max-width: 120px;   
} 
}

@media (min-width: 1200px) {
.logo {
max-width: 220px;   
} 
}


.navbar .navbar-nav .nav-link {
color: var(--clr-text);
font-size: clamp(0.8rem, 0.0709rem + 1.519vw, 1.4rem);
font-weight: 500;
text-transform: uppercase;
transition: all .3s ease-in-out;
}
/* Nva Link Under line */
.navbar .navbar-nav .nav-item .nav-link::after {
    content: '';
    display: block;
    width: 0;
    height: 6px;
    background: var(--clr1);
    transition: width .4s;
}

/* Nva Link Under line on Hover */
.navbar .navbar-nav .nav-item .nav-link:hover::after {
    width: 100%;
    transform: width .4s;
}

.navbar .navbar-nav .nav-item .nav-link:hover {
    color: var(--clr1);
}

.navbar .navbar-nav .nav-link.active::after {
    width: 100%;
    transform: width .4s;
}

.navbar .navbar-nav .nav-link.active {
color: #717273;
font-weight: 700;
}

/* ----- Toggler ----- */
.navbar-toggler {
border: 0px;	
}

.navbar-toggler:focus {
box-shadow: none !important;
}

#navbarTogglerBuwog {
background-color: white;
}

#navbarTogglerBuwog.show {
padding: 0px 20px;
background-color: white;
}

@media (max-width: 767.98px) { 
#navbarTogglerBuwog.show {
padding: 0px 20px;
background-color: #ffffff;
}           
}

/* ------------- Slider ------------ ---- */

.top-header {
margin-top: 180px;	
}   
.weissband {
position: absolute;
display: block;
bottom: 0px;
left: 0px;
width: 61%;
height: 60px;
background-color: #fff;
}

.stoerer-kreis {
position: absolute;
display: block;
bottom: -80px;
right: 10%;
width: auto;
height: auto;
background-color: transparent;
z-index: 2;
}

.stoerer-kreis img{
width: clamp(10rem, 2.5969rem + 15.4031vw, 18rem);
}

@media (max-width: 767.98px) {
.stoerer-kreis {
bottom: -10px;
right: 10%;
}   
}

/* ---------------------- Hauptcontentbereich ---------------------- */
.pe-6 {
  padding-right: 4rem !important;
}

main {
margin-top: -7px;
}

.bg-textfeld {
background-color: var(--bg-textfeld);
}
.c1-ms {
padding-left: 3rem;
padding-bottom: 3rem;
}

@media (max-width: 767.98px) {
 .c1-ms {
padding-left: 0px;
}   
}

.jumptarget {
position: relative;
width: 10px;
z-index: 0;
}

.jumptarget:before {
width: 10px;
display: block;
content: " ";
margin-top: -168px;
height: 168px;
visibility: hidden;
}

h2 {
font-size: clamp(2rem, 0.1772rem + 3.7975vw, 3.5rem);
color: var(--clr-text);
margin-bottom: 1.5rem;
}

p,ul,li {
font-size: clamp(1rem, 0.1494rem + 1.7722vw, 1.7rem);
color: #717273; 
hyphens: auto;
-webkit-hyphens: auto;
-webkit-hyphenate-limit-lines: 4;
-ms-hyphens: auto;
-ms-hyphenate-limit-lines: 4;   
}

.border-gold {
border: 2px solid var(--clr1);    
}

/*------------------ Counter ------------------*/
.counter-wrapper {
display: grid;
grid-template-rows: 1fr;
grid-template-columns: repeat(3, 1fr);
gap: 0.5em 2em;
width: 100%;
height: 100%;    
}

.counter-wrapper .counter-item {
display: grid; 
grid-template-rows: subgrid;
grid-row: span 3;  
min-width: 100%;
height: 100%; 
border: 2px solid var(--clr1);  
text-align: center;
justify-self: center;
justify-content: center;
align-self: center;
align-items: center;
padding: 2.5rem 1.5rem;
}

.counter-wrapper .counter-item span{
color: var(--clr1);
font-size: clamp(2rem, -0.4304rem + 5.0633vw, 4rem);
font-weight: 500;
}

.counter-wrapper .counter-item p{
color: var(--clr-text);
font-size: clamp(1rem, 0.5139rem + 1.0127vw, 1.4rem);
font-weight: 500;
}

.counter-wrapper .counter-item h5{
color: var(--clr-text);    
font-size: clamp(1.2rem, 0.4709rem + 1.519vw, 1.8rem);
}

@media (max-width: 767.98px) {
.counter-wrapper {
display: flex;
flex-direction: column;
gap: 2em;   
} 
.counter-wrapper .counter-item span {
font-size: 4rem;
}
.counter-wrapper .counter-item h5{
font-size: 1.8rem;
}
}
/*------------------ Ausstattung ------------------*/
.wrapper-ausstattung {
	display: grid;
	grid-template-rows: repeat(12, 1fr);
	grid-template-columns: repeat(12, 1fr);
	gap: 3em;
	width: 100%;
	height: 100%;
}

.aus01 {
display: grid;
grid-template-rows: 1fr;
grid-column: 1 / 7;
grid-row: 1 / 8;
height: auto;
padding: 0;
z-index: 0;
}

.aus02 {
display: grid;
grid-template-rows: 1fr;
grid-column: 7 / 11;
grid-row: 1 / 4;
height: auto;
padding: 0;
z-index: 0;
}

.aus02 img{
margin-left: 1rem;
}

.aus03 {
display: grid;
grid-template-rows: 1fr;
grid-column: 6 / 13;
grid-row: 4 / 12;
height: auto;
padding: 0;
z-index: 1;
}

.aus03 img{
 justify-self: end;  
 outline: 38px solid #fff; 
 /*box-shadow: 3rem 3rem #fff, -3rem -3rem #fff;*/
}

.aus04 {
display: block;
margin-top: 1rem;    
display: grid;
grid-template-rows: 1fr;
grid-column: 1 / 7;
grid-row: 5 / 12;
height: 100%;
padding: 2rem;
z-index: 0;
border: 2px solid var(--clr1);
align-self: start;
align-items: start;
}

.aus04 h2{ 
width: auto;
height: auto;
}

.aus05 {  
display: grid;
grid-template-rows: 1fr;
grid-column: 7 / 11;
grid-row: 8 / 12;
height: 100%;
width: 100%;
z-index: 0;
position: relative;
}

.aus05 img{  
position: absolute;
bottom: -14px;
}

@media (max-width: 991.98px) {
.aus03 {
grid-column: 6 / 13;
grid-row: 3 / 10;
}

.aus03 img{   
 box-shadow: 2rem 2rem #fff, -2rem -2rem #fff;
}    
.aus04 {  
margin-top: 2rem;   
grid-column: 1 / 9;
grid-row: 4 / 12;
padding: 1.5rem;
}  
.aus05 {  
grid-column: 9 / 13;
grid-row: 8 / 12;
}
.aus05 img{  
bottom: -30px;
}
}

@media (max-width: 767.98px) {
.aus01 {
grid-column: 1 / 13;
grid-row: 1 / 8;
}
.aus02 {
grid-column: 8 / 13;
grid-row: 1 / 4;
overflow: hidden;
}
.aus02 img{
border-left: 1rem solid #fff;
border-bottom: 1rem solid #fff;
}
.aus03 {
grid-column: 6 / 13;
grid-row: 5 / 8;
border: 1rem solid #fff;
}
.aus03 img{   
 box-shadow: none;
}    
.aus04 {  
margin-top: -1.5rem;   
grid-column: 1 / 13;
grid-row: 6 / 12;
padding: 1.5rem;
}  
.aus05 {  
grid-column: 1 / 13;
grid-row: 23 / -13;
}
.aus05 img{  
bottom: 0px;
}   
}
@media (max-width: 575.98px) {
.wrapper-ausstattung {
display: grid;
grid-template-rows: repeat(30, auto);
grid-template-columns: repeat(6, 1fr);
gap: 1em;
}    
.aus01 {
grid-column: 1 / 7;
grid-row: 1 / 2;
}
.aus02 {
grid-column: 3 / 7;
grid-row: 1 / 2;
overflow: hidden;
}
.aus02 img{
border-left: 1rem solid #fff;
border-bottom: 1rem solid #fff;
}
.aus03 {
grid-column: 1 / 7;
grid-row: 2 / 3;
border: none;
z-index: 0;
}
.aus03 img{   
 box-shadow: none;
}    
.aus04 {  
margin-top: 0.5rem;   
grid-column: 1 / 7;
grid-template-rows: auto;
grid-row: 3 / 4;
padding: 1.5rem;
}  
.aus05 { 
margin-top: 0.5rem;   
grid-column: 1 / 7;
grid-row: 27 / 29;
}
.aus05 img{  
bottom: 0px;
}     
}

/*------------------ Counter ENDE------------*/
#pills-tab .nav-link {
 color: #ffffff;   
 background-color: var(--bg-rundbutton);  
 font-weight: 400;
 padding: 2px 30px;
 border-radius: 0px;
 text-decoration: none;
 margin: 10px 10px;
}

#pills-tab .nav-link:hover, #pills-tab .nav-link.active {
color: #ffffff;   
background-color: var(--clr1);  
}
/*--------- Datentabelle ---------*/
.pdf-icon {
 color: var(--clr1);
 font-size: 1.5rem;   
}

#datentabelle th,td {
font-size: 16px;  
white-space: nowrap; 
}

@media (max-width: 992px) {
#datentabelle th,td {
font-size: 14px;   
}
}

@media (max-width: 768px) {
#datentabelle th,td {
font-size: 12px;   
}
#collapseDatentabelle .card-body {
overflow: scroll;
}
}

@media (max-width: 576px) {
#datentabelle th,td {
font-size: 12px;   
}
#collapseDatentabelle .card-body {
overflow: scroll;
}
}

#collapseDatentabelle .card {
    border: 0px;
    }
#collapseDatentabelle .card-body {
padding: 0px;
}
/*--------- Galerie ---------*/
#carouselBuwogGalerie .card{
border: 0px;
}

#carouselBuwogGalerie .carousel-inner .carousel-item img{
padding: 0px 4px;
}

@media (max-width: 767px) {
#carouselBuwogGalerie .carousel-inner .carousel-item > div {
    display: none;
}
#carouselBuwogGalerie .carousel-inner .carousel-item > div:first-child {
    display: block;
}
}

#carouselBuwogGalerie .carousel-inner .carousel-item.active,
#carouselBuwogGalerie .carousel-inner .carousel-item-next,
#carouselBuwogGalerie .carousel-inner .carousel-item-prev {
    display: flex;
}

/* medium and up screens */
@media (min-width: 768px) {

#carouselBuwogGalerie .carousel-inner .carousel-item-end.active,
#carouselBuwogGalerie .carousel-inner .carousel-item-next {
    transform: translateX(33%);
}

#carouselBuwogGalerie .carousel-inner .carousel-item-start.active, 
#carouselBuwogGalerie .carousel-inner .carousel-item-prev {
    transform: translateX(-33%);
}
}

#carouselBuwogGalerie .carousel-inner .carousel-item-end,
#carouselBuwogGalerie .carousel-inner .carousel-item-start { 
transform: translateX(0);
}
@media (min-width: 768px) {
#carouselBuwogGalerie .carousel-control-prev {
left:-40px;
}
#carouselBuwogGalerie .carousel-control-next {
right:-40px;
}
}

#carouselBuwogGalerie .carousel-control-next, #carouselBuwogGalerie .carousel-control-prev {
color: #ffffff; 
border: 0;
opacity: 1;
transition: opacity .15s ease;
}
#carouselBuwogGalerie .carousel-control-prev-icon, #carouselBuwogGalerie .carousel-control-next-icon {
background-color: #ff6e21;
border-radius: 45px; 
width: 2.3rem;
height: 2.3rem;
background-size: 80% 80%;
}

#carouselBuwogGalerie .carousel-control-prev-icon:hover, #carouselBuwogGalerie .carousel-control-next-icon:hover {
background-color: #717273;
}

/*------------------ Lage Icons ------------------*/
.lage-icons span{
color: var(--clr1);
font-size: clamp(1.8rem, 1.0709rem + 1.519vw, 2.4rem);
font-weight: 700;
}

/*------------------ 768px und kleiner------------------*/
@media (max-width: 767.98px) {
.wrapper-lage {
display: block;
width: 100%;
height: auto;
background-color: #fff;
border:28px solid #fff;
}

.lage04 {
display: block;
margin-bottom: 1rem;
}
.lage05 {
display: block;
border-right: 2px solid var(--clr1);
border-top: 2px solid var(--clr1);
border-left: 2px solid var(--clr1);
padding-right: 0px;
}

.lage05 img{
display: block;    
border: 28px solid #fff;
margin-top: 0.5rem;
}

.lage06 {
display: block;   
background-color: #fff;
border-right: 2px solid var(--clr1);
border-bottom: 2px solid var(--clr1);
border-left: 2px solid var(--clr1);
}

.lage07 {
display: block;
align-content:flex-start;
margin-top: 1rem;
}

.kontakt {
position: relative;
display: block;
align-content:flex-start;
margin-top: 6rem;
box-shadow: 2rem 2rem #fff;
}
.footer-links {
display: block;
align-content:flex-start;
margin-top: 2rem;
box-shadow: 2rem 2rem #fff;
background-color: #fff;
padding: 0.5rem 0px;
}
#kontakt {
position: relative;
}
}

/*------------------ 768px und höher------------------*/
@media (min-width: 768px) {
.wrapper-lage {
display: grid;
grid-template-rows: repeat(12, 1fr);
grid-template-columns: repeat(12, 1fr);
width: 100%;
height: auto;
}

.lage04 {
grid-column: 1 / 8;
grid-row: 1 / 8;
}
.lage05 {
grid-column: 8 / 13;
grid-row: 1 / 8;
border-right: 2px solid var(--clr1);
border-top: 2px solid var(--clr1);
padding-right: 68px;
}

.lage05 img{
border: 28px solid #fff;
margin-top: -30px;
}

.lage06 {
grid-column: 7 / 13;
grid-row: 3 / 8;
z-index: 1;
background-color: #fff;
border-right: 2px solid var(--clr1);
border-bottom: 2px solid var(--clr1);
}

.lage07 {
grid-column: 1 / 7;
grid-row: 3 / 6;
align-content:flex-start;
margin-top: 1rem;
outline: 32px solid #fff; 
background-color: #fff;
}

.lage07::before {
background-color: #fff;
content: "";    
width: 2rem;
position: absolute;
left: -2rem;
top: 0px;
z-index: 3;
}

.kontakt {
position: relative;
grid-column: 1 / 7;
grid-row: 3 / 13;
align-content:flex-start;
margin-top: 6rem;
outline: 32px solid #fff; 
z-index: 3;
}
.footer-links {
grid-column: 1 / 7;
grid-row: 33 / 34;
align-content:flex-start;
margin-top: -2rem;
box-shadow: 2rem 2rem #fff;
z-index: 3;
background-color: #fff;
padding: 0.5rem 0px;
}
#kontakt {
position: relative;
outline: 32px solid #fff; 
/*box-shadow: 2rem 2rem #fff, 0rem -2rem #fff;*/
}
}

/*------------------ 992px und höher------------------*/
@media (min-width: 992px) {
.wrapper-lage {
display: grid;
grid-template-rows: repeat(12, 1fr);
grid-template-columns: repeat(12, 1fr);
}

.lage04 {
grid-column: 1 / 8;
grid-row: 1 / 4;
}
.lage05 {
grid-column: 8 / 13;
grid-row: 1 / 4;
padding-right: 68px;
}

.lage05 img{
outline: 32px solid #fff;
margin-top: -30px;
}

.lage06 {
grid-column: 7 / 13;
grid-row: 2 / 8;
z-index: 1;
background-color: #fff;
margin-top: 2rem;
}

.lage07 {
grid-column: 1 / 7;
grid-row: 3 / 5;
align-content:flex-start;
margin-top: 1rem;
}

.kontakt {
grid-column: 1 / 7;
grid-row: 4 / 13;
align-content:flex-start;
margin-top: 4rem;
outline: 32px solid #fff;
}
.footer-links {
grid-column: 1 / 7;
grid-row: 14 / 15;
align-content:flex-start;
margin-top: -2rem;
box-shadow: 2rem 2rem #fff;
background-color: #fff;
padding: 0.5rem 0px;
}
}
/*------------------ 1200px und höher------------------*/
@media (min-width: 1200px) {
.wrapper-lage {
display: grid;
grid-template-rows: repeat(11, 1fr);
grid-template-columns: repeat(12, 1fr);
}

.lage04 {
grid-column: 1 / 8;
grid-row: 1 / 8;
}
.lage05 {
grid-column: 8 / 13;
grid-row: 1 / 3;
padding-right: 68px;
}

.lage05 img{
border: 28px solid #fff;
margin-top: -30px;
}

.lage06 {
grid-column: 7 / 13;
grid-row: 3 / 8;
z-index: 1;
background-color: #fff;
margin-top: -6rem;
}

.lage07 {
grid-column: 1 / 7;
grid-row: 3 / 6;
align-content:flex-start;
margin-top: 1rem;
}

.kontakt {
grid-column: 1 / 7;
grid-row: 4 / 10;
align-content:flex-start;
margin-top: 2rem;
outline: 32px solid #fff;
}
.footer-links {
grid-column: 1 / 7;
grid-row: 10 / 11;
align-content:flex-start;
margin-top: -2rem;
box-shadow: 2rem 2rem #fff;
z-index: 3;
background-color: #fff;
padding: 0.5rem 0px;
max-height: 2rem;
}
}

/*------------------ 1400px und höher------------------*/
@media (min-width: 1400px) {
.wrapper-lage {
display: grid;
grid-template-rows: repeat(9, 1fr);
grid-template-columns: repeat(12, 1fr);
}

.lage04 {
grid-column: 1 / 8;
grid-row: 1 / 8;
}
.lage05 {
grid-column: 8 / 13;
grid-row: 1 / 3;
padding-right: 68px;
}

.lage05 img{
outline: 28px solid #fff;     
margin-top: -30px;
}

.lage06 {
grid-column: 7 / 13;
grid-row: 3 / 8;
z-index: 1;
background-color: #fff;
margin-top: -3rem;
}

.lage07 {
grid-column: 1 / 7;
grid-row: 4 / 6;
align-content:flex-start;
margin-top: -10rem;
}

.kontakt {
position: relative;
grid-column: 1 / 7;
grid-row: 5 / 13;
align-content:flex-start;
margin-top: 2rem;
outline: 32px solid #fff;
z-index: 3;
}
.footer-links {
grid-column: 1 / 7;
grid-row: 13 / 14;
align-content:flex-start;
margin-top: -2rem;
box-shadow: 2rem 2rem #fff;
z-index: 3;
background-color: #fff;
padding: 0.5rem 0px;
}
#kontakt {
position: relative;
}
}

#kontakt-footer {
background-image: url(../images/bg-kontakt.avif);
background-size: 100%;
background-repeat: no-repeat;
background-position: bottom center;
}


 /*--------------- Kontaktformular --------------*/
 #kontakt h5 {
 color: var(--clr-text);   
 font-weight: 600;
 }

.form-control,.form-select {
padding: .375rem .75rem;
font-size: 0.81rem;
border: 0px;
border-radius: 0px;
}
.form-check-input[type="checkbox"] {
border-radius: 0px;
} 
.form-check-input {
border: 0px;
} 
.submit-button {
color: #fff;
background-color: var(--bg-rundbutton) ;
font-size: 1.31rem;
text-transform: uppercase;
font-weight: 400;
padding: 5px 15px;
border: 0px;
transition: all .3s ease-in-out;
}
.submit-button:hover {
color: #ffffff;
background-color: var(--clr1);
}
/*------------------ Footer ------------------*/

.buwog-logo {         
width: 100%;
min-height: 120px;
height: auto;
text-align: right;
margin-top: auto;
}

.buwog-logo img {
display: block; 
max-width: 200px;
}

.footer-links a{
color: var(--clr-text);
font-size: 0.8rem;
text-transform: uppercase;
text-decoration: none;
margin-right: 1rem;
}

.footer-links a:hover{
color: var(--bg-rundbutton);
}
/*--------------Modals -------------------*/
.modal-body {
 background-color: #eeeeee;   
}
.modal-body h1{
font-family: "Open Sans","Helvetica Neue",Verdana,Arial,sans-serif;
font-size: 1.86rem;
color: var(--clr-text);
text-transform: none;
}
.modal-body p,.modal-body ul,li,.modal-body h2,.modal-body h3,.modal-body h4{
color: #707173;
}

#corporate_background {
position:absolute;
left:0px;
top:0px;
background-color: rgba(255, 255, 255,0.8); 
text-align: center; 
padding: 15px 10px 20px 10px; 
}

@media (min-width: 576px) {
#corporate_background {    
padding: 20% 10% 20% 10%;    
}
}
#corporate_background a {
    color: var(--clr1);
}

#corporate_background .button {
    color: #ffffff;
    background-color: var(--clr1);   
    text-decoration:none;
    font-size:1.1em;
    /*font-weight:bold;*/
    border-radius: 25px;
    padding:5px 13px;
    margin:10px 10px 20px 0;
    text-align:center;
    display:inline-block;
}
#corporate_background .button:hover {
    color: #ffffff;
    background-color: #717273;
    text-decoration:none;
}
/*--------- Button Scroll Top ---------*/

#myBtn {
    display: none; /* Hidden by default */
    position: fixed; /* Fixed/sticky position */
    bottom: 20px; /* Place the button at the bottom of the page */
    right: 30px; /* Place the button 30px from the right */
    z-index: 99; /* Make sure it does not overlap */
    border: 1px solid rgba(255, 255, 255,0.4); /* Remove borders */
    outline: none; /* Remove outline */
    background-color:var(--bg-rundbutton); /* Set a background color */
    color: white; /* Text color */
    cursor: pointer; /* Add a mouse pointer on hover */
    padding: 10px 15px; /* Some padding */
    border-radius: 27px; /* Rounded corners */
    font-size: 18px; /* Increase font size */
  }
  
  #myBtn:hover {
    background-color: var(--clr1); /* Add a dark-grey background on hover */
  }

#gmap_canvas img {
    max-width:none!important;background:none!important
}

.form-check-label,
.form-check-input.is-invalid ~ .form-check-label,
.was-validated .form-check-input:invalid ~ .form-check-label,
.was-validated .form-check-input:valid ~ .form-check-label {
    color: var(--clr-text);
}

.success-text h5{
color: #0c8a00;
font-size: clamp(1.4rem, 0.5494rem + 1.7722vw, 2.1rem);
}
.success-text p{
color: #0c8a00;
}

.betreff{
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    height: 0;
    width: 0;
    z-index: -1;
}

.roomselect {
    color: var(--clr1);
    background-color: white;
    text-decoration:none;
    font-size:2rem;
    font-weight: 600;
    /*font-weight:bold;*/
    padding:5px 15px;
    margin:10px 10px 20px 0;
    display:inline-block;
    border-left: 2px solid var(--clr1);
}
.roomselect:hover {
    color: white;
    background-color: var(--clr1);
    text-decoration:none;
    border-left: 2px solid var(--clr1);
}
.roomselect.active {
    color:white;
    background-color: var(--clr1);
    text-decoration:none;
    border-left: 2px solid var(--clr1);
}
 .table {
    --bs-table-bg: transparent;
    --bs-table-striped-bg: white;
    background-color: transparent;
 }

.table tr:nth-child(2n) {
  color: var(--clr-text);
  background-color: var(--bg-table);
}