/* ---------- Hoym --------------*/


:root {  
--gold: #b59859;
--clr2: #010408;
--clr3: #737470;
--clr4: #c33a31;
--hellgrau: #e6e7e7;
--bg-hellgruen: #e4e8e7;
--bg-news:#f9fbfb;
--bg-tab1: #e4e8e7;
--bg-tab2: #f1f4f4;
}

html {
scroll-behavior: smooth;
}


body {
font-family: 'Roboto', sans-serif;
font-size: clamp(1rem, 0.8875rem + 0.3125vw, 1.2rem);
line-height: 1.6rem;
color: #727574;
background-color: #ffffff;  
}
/* ------- n3t-Cookie-Banner-Breite ---------*/
.cc_div .bar #s-inr {
  max-width: 44em !important;
}
/* ----------- Top Bar / Sprachen-Switscher ------------- */
#sp-top-bar {
  background: #fff;
  color: var(--clr2)
}
/* ----------- Header ------------- */
#sp-header {
background-color: transparent;
box-shadow: none;
}

#sp-header.header-sticky {     
background-color: #fff;  
transition: background-color 700ms linear;
border-bottom: 1px solid var(--hellgrau);
}
/* ----------- Header-Logo ------------- */
#sp-logo:has(.logo) {
  opacity: 0;
  transition: opacity 1s;
}

.header-sticky #sp-logo:has(.logo) {
  opacity: 1;
}
/* ----------- Burgermenü ------------- */
.burgermenu {
  position: relative;
}

.burgermenu-box {
  position: absolute;
  display: grid;
  align-content: center;
  justify-items: center;
  top: -41px;
  right: -65px;
  width: 50px;
  height: 80px;
  background-color: #fff;
}

@media (max-width: 991.98px) {
.burgermenu-box {
  height: 70px;
}  
}

@media (max-width: 575.98px) { 
.burgermenu-box {
  height: 60px;
}
.burgermenu-box-image {
  max-width: 60%;
}
}

.offcanvas, .offcanvas-lg, .offcanvas-md, .offcanvas-sm, .offcanvas-xl, .offcanvas-xxl {
  --bs-offcanvas-width: 100%;
  background-color: var(--gold);
  color: #fff;
}
.offcanvas, .offcanvas-lg, .offcanvas-md, .offcanvas-sm, .offcanvas-xl, .offcanvas-xxl {
--bs-offcanvas-height: 100vh;
}

.offcanvas-header .btn-close {
  color: #fff;
}

.offcanvas-image {
  max-width: 50%;
}

#offcanvasHoym .offcanvas-menu-liste {
list-style: none;
}

#offcanvasHoym .offcanvas-menu-liste > li a{
color: #fff;
font-size: clamp(2rem, 1.4375rem + 1.5625vw, 3rem);
line-height: clamp(2.5rem, 1.9718rem + 2.2535vw, 4rem);
}

/* ----------- Offcanvas ------------- */

.offcanvas-overlay {
  background: transparent;
  backdrop-filter: none;
}

.burger-icon {
width: 40px;;
}

.burger-icon > span {
  background-color: #b59859;
  height: 4px;
  margin: 7px 0;
}

.offcanvas-active .burger-icon > span, #modal-menu-toggler.active .burger-icon > span {
 background-color: #fff;
}

.offcanvas-active .burger-icon > span:nth-child(3), #modal-menu-toggler.active .burger-icon > span:nth-child(3) {
  transform: translate(0, -14px) rotate(45deg);
}

.offcanvas-menu {
  backdrop-filter: blur(10px);
  background-color: var(--gold);
  color: #fff;
}

@media (min-width: 768px) {
 body.ltr.offcanvs-position-right .offcanvas-menu {
  right: -600px;
}
.offcanvas-menu {
  width: 600px;
} 
}

.offcanvas-menu .offcanvas-inner ul.menu > li a, .offcanvas-menu .offcanvas-inner ul.menu > li span {
  font-family: 'Roboto', sans-serif;
  color: #fff;
  font-size: clamp(1.4rem, 0.1077rem + 2.6923vw, 2.8rem);
  font-weight: 300;
  line-height: clamp(1.3rem, 0.7014rem + 2.5540vw, 3rem);
}

.offcanvas-menu .offcanvas-inner ul.menu > li a:hover, .offcanvas-menu .offcanvas-inner ul.menu > li a:focus, .offcanvas-menu .offcanvas-inner ul.menu > li span:hover, .offcanvas-menu .offcanvas-inner ul.menu > li span:focus {
  color: #fff;
}

.offcanvas-menu .offcanvas-inner ul.menu li.active a {
  color: #fff;
  font-weight: 300;
}

/* ----------- Hauptcontent ------------- */
#objekt, #ausstattung, #ladenflaechen, #büroflaechen, #galerie, #lage, #kontakt {
  scroll-margin-top: 90px; 
}

#sp-main-body {
  padding: 0;
  margin-top: -10px;
}

#sp-breadcrumb{
  padding: 0;
  margin-top: -80px;
}

@media (max-width: 767.98px) { 
#sp-breadcrumb  {
  margin-top: -40px;
} 
#sp-main-body  {
  margin-top: -10px;
} 
}


/* ---

Dient dazu den Badge-Button "Featured" aauf der Startseite abzuschalten.
--- */
.article-details .featured-article-badge {
  display: none;
}
/* ---
Hinweis Ende
--- */
h1 { font-size: clamp(1.75rem, 1.4005rem + 0.9709vw, 2.25rem);font-weight: 400; word-break: break-word;}
h2 { font-size: clamp(1.45rem, 1.0655rem + 1.068vw, 2rem);font-weight: 400;word-break: break-word; }
h3 { font-size: clamp(1.35rem, 0.9346rem + 0.8654vw, 1.8rem);font-weight: 400; word-break: break-word;}
h4 { font-size: clamp(1.25rem, 1.0192rem + 0.4808vw, 1.5rem);font-weight: 400;line-height: 1.8rem; word-break: break-word;}
h5 { font-size: clamp(0.75rem, 0.6801rem + 0.1942vw, 0.85rem);font-weight: 400; word-break: break-word;}

p, ul, li, ol ,li{
hyphens: auto;
font-weight: 300;
}

.liste {
list-style: none;
margin-left: -1.6rem; 
}

.liste li:before {
content:"\f105";
font-family: 'Font Awesome 6 Free';
font-weight: 600;
color: var(--gold);
font-size: 1.3rem;
float: left;
padding-right: 0.5rem; 
}

ul { padding-left: 1.5rem; }

.check {
list-style: none;
padding-left: 0.7rem;
}

.check li{
 padding-left: 0.5rem; 
}


.check li::marker {
  display: block;
  content:"\f105";
  font-family: 'Font Awesome 6 Free';
  font-weight: 600;
  color: var(--gold);
  font-size: 1.3rem;
}

.headline1 {
font-size: clamp(2rem, 1.325rem + 1.875vw, 3.2rem);
font-weight: 300;
margin-bottom: clamp(1rem, 0.0769rem + 1.9231vw, 2rem);
color: var(--clr2);
}

.section-headline {
font-size: clamp(2rem, 1.325rem + 1.875vw, 3.2rem);
font-weight: 300;
margin-bottom: clamp(1rem, 0.0769rem + 1.9231vw, 2rem);
color: var(--clr2);
}

.ut-gold {
  height: 1px;
  width: clamp(10rem, 7.1831rem + 12.0188vw, 18rem);
  background-color: var(--gold);
}
/* ----------- Für GSAP Animationen------------- */
.header-image {
  position: relative;
  display: block;
z-index: 40000;
overflow: visible;
}


.header-wrapper {
	display: grid;
	grid-template-rows: 1fr;
	grid-template-columns: 1fr;
	gap: 0;
	width: 100%;
	height: 100%;
  overflow: hidden;
}
.header-layer-image{
	grid-area: 1/1/2/2;
  z-index: 0;
}

.header-layer img{
object-fit: cover;
width: 100%;
height: auto;
} 

.header-layer{
grid-area: 1/1/2/2;
background:transparent;
z-index: 1;
overflow: hidden;
}

.header-layer img{
color: var(--clr3);    
display: block;
width: 100%;
height: 100%;
/*transform: scale(2);  */
}


div:has(.header-layer-image) {
overflow: hidden;
}

#heading {
opacity: 0;
}



/* ----------- Startseite ------------- */
.scroll-button-abstand {
display: block;
height: 50px;
width: 100%;
}

.scroll-button-box {
position: absolute;
bottom: 0;
display: inline-flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: flex-end;
align-items: center;
}

.sroll-pfeil-text {
display: block;
  flex-basis: auto;
align-self: auto;
font-size: clamp(1rem, 0.8875rem + 0.3125vw, 1.2rem);
font-weight: 300;
color: var(--clr3);
text-transform: uppercase;
}

.sroll-pfeil-text:hover {
color: var(--clr2);
}


.scroll-pfeil {
display: block;
width: 25px;
margin-top: 7px;
}

.scroll-button-box:hover img{
	-webkit-animation: bounce-in-top 1.1s both;
	        animation: bounce-in-top 1.1s both;
}

@-webkit-keyframes bounce-in-top {
  0% {
    -webkit-transform: translateY(-100px);
            transform: translateY(-100px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
    opacity: 0;
  }
  38% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    opacity: 1;
  }
  55% {
    -webkit-transform: translateY(-65px);
            transform: translateY(-65px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  72% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  81% {
    -webkit-transform: translateY(-28px);
            transform: translateY(-28px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  90% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  95% {
    -webkit-transform: translateY(-8px);
            transform: translateY(-8px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
}
@keyframes bounce-in-top {
  0% {
    -webkit-transform: translateY(-500px);
            transform: translateY(-500px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
    opacity: 0;
  }
  38% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    opacity: 1;
  }
  55% {
    -webkit-transform: translateY(-65px);
            transform: translateY(-65px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  72% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  81% {
    -webkit-transform: translateY(-28px);
            transform: translateY(-28px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  90% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  95% {
    -webkit-transform: translateY(-8px);
            transform: translateY(-8px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
}

/* ----------- Section Objekt ------------- */
.bigLeft {
overflow: hidden;
}



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

.headline-gold {
color: var(--gold);
font-family: 'Noto Serif SC', serif;
font-size: clamp(1.8rem, 1.4063rem + 1.0938vw, 2.5rem);
font-weight: 200;
margin-bottom: clamp(1rem, 0.0769rem + 1.9231vw, 2rem);
margin-right: clamp(0rem, -2.4648rem + 10.5164vw, 7rem);
}


.headline-objekt2 {
color: var(--clr2);
font-family: 'Roboto', sans-serif;
font-size: clamp(1.6rem, 1.4875rem + 0.3125vw, 1.8rem);;
font-weight: 300;
margin-bottom: clamp(1rem, 0.0769rem + 1.9231vw, 2rem);
}

.mxwidth {
  max-width: clamp(7rem, 4.4032rem + 11.0798vw, 14.375rem);
}

.bg-objekt2 {
background-image: url(../../../images/startseite/objekt02.avif);
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
aspect-ratio: 3/5;
}

.bg-objekt3 {
background-image: url(../../../images/startseite/objekt03.avif);
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
@media (max-width: 991.98px) { 
.bg-objekt2 {
background-size: cover;
aspect-ratio: 3/5;
border-right: 20px solid #fff;
}   
}

.parallax-objekt {
min-height: 600px;
background-image: url(../../../images/startseite/parallax-objekt.avif);
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
margin-top: 2em;
margin-bottom: 2em;
}
@media (max-width: 768px) {
.parallax-objekt {
background-attachment: scroll;
transform: none;
}
}

/*------------------ 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(--gold);  
text-align: center;
justify-self: center;
justify-content: center;
align-self: center;
align-items: center;
padding: 2.5rem 1.5rem;
aspect-ratio: 4/3;
}

.counter-wrapper .counter-item span{
color: var(--clr2);
font-family: 'Noto Serif SC', serif;
font-size: clamp(2rem, -0.4304rem + 5.0633vw, 4rem);
font-weight: 500;
}

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

@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 ------------------*/
.bg-ausstattung1 {
background-image: url(../../../images/startseite/ausstattung01.avif);
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
transform: translateX(15px);
}

@media (max-width: 767.98px) { 
.bg-ausstattung1 {
aspect-ratio: 5/3;
transform: none;
border: 15px solid #fff;
}   
}

.bg-ausstattung3 {
background-image: url(../../../images/startseite/ausstattung03.avif);
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
aspect-ratio: 12/10;
}

@media (max-width: 767.98px) { 
.bg-ausstattung1 {
aspect-ratio: 1/1;
}   
}

.headline-ausstattung {
font-size: clamp(2rem, 1.325rem + 1.875vw, 3.2rem);
font-weight: 300;
margin-bottom: clamp(1rem, 0.0769rem + 1.9231vw, 2rem);
color: var(--gold);
}

/* --------- Gewerbe-Tabelle ----------- */
.table-gewerbe .row{
border-bottom: 1px solid var(--hellgrau);
}

.table-gewerbe .col{
text-align: left;
padding-block: clamp(0.2rem, 0.0592rem + 0.6009vw, 0.6rem);  
}

.table-gewerbe .table-head .col-md-2, .table-gewerbe .table-head .col{
font-weight: 600;
}

.table-gewerbe .table-head .col:first-child{
margin-left: auto;
padding-left: 15px;
text-align: center;
}

.table-gewerbe .col:first-child{
text-align: center;
}

.table-gewerbe .table-head .col:last-child, .table-gewerbe .col:last-child {
margin-right: auto;
padding-right: 15px;
text-align: right;
}

.table-gewerbe .col:last-child a{
text-align: right;
}

.table-gewerbe .row:has(.stretched-link:hover) {
background-color: #fff;
}

.table-gewerbe .row:has(.stretched-link:focus) {
background-color: #fafaf7;
}

.table-gewerbe .collapse{
background-color: #fafaf7;
}

.table-gewerbe .table-head span {
display: inline-block;
}

@media (max-width: 991.98px) {
.table-gewerbe .table-head span {
display: none;
}
}

@media (max-width: 767.98px) { 
.table-gewerbe .col:first-child{
display: none;
}
.table-gewerbe .col:nth-child(2) {
display: none;
}
}  

.grundrissbox {
display: grid;
grid-template-rows: 1fr;
grid-template-columns: 1fr 33%;
gap: 0em 3em;
width: 100%;
height: 100%;
justify-items: start;
padding-left: 15px;
padding-right: 15px;
margin-left: auto;
margin-right: auto;
}


.grundrissbox-link, .grundrissbox-link:focus {
color: var(--clr2);
text-decoration: underline;
transition: all .3s ease-in-out;
}

.grundrissbox-link span {
position: relative;
}

.grundrissbox-link span::after{
content:"\f061";
font-family: 'Font Awesome 6 Free';
font-weight: 600;
color: var(--clr3);
font-size: 1.3rem;
position: absolute;
left: 25px;
top: -6px;
width: 2em;
z-index: 2;
transition: all .3s ease-in-out;
}

.grundrissbox-link:focus span::after{
content:"\f061";
transform: rotate(-90deg);
left: 25px;
top: -6px;
width: 1em;
}

.collapsed:focus span::after{
content:"\f061";
transform: rotate(0deg);
}

.pdf-icon {
 max-width: 20px; 
 margin-left: auto;
margin-right: 15px;
}


@media (max-width: 767.98px) { 
 .grundrissbox {
display: flex;
flex-direction: column;
} 
.grundriss-part1 {
grid-area: 1/1/2/2;
}
.grundriss-part2 {
grid-area: 2/1/3/2;
}
 .grundrissbox-link span::after {
display: none;
}
}

.grundrissbox-link:hover {
color: var(--clr1);
text-decoration: underline;
}

.grundriss-part1 {
grid-area: 1/1/2/2;
background-color: transparent;
}
.grundriss-part2 {
display: grid;
grid-area: 1/2/2/3;
width: auto;
background-color: #82827d;
margin-right: auto;
align-items: start;
justify-items: center;
}

.grundriss-part2-table {
display: block;  
padding: 1rem 2rem;
width: 100%;
}

.grundriss-part2-table table td{
color: #fff;
font-weight: 300;
border-bottom: 1px solid #fff;
}

.grundriss-part2-table table td:last-child{
padding-left: 2rem;
}

.grundriss-part2 .anfrage-button{
color: #fff;
background-color: var(--gold);
border: 2px solid #fff;
text-transform: uppercase;
font-size: 1.6rem;
font-weight: 400;
padding: 6px 20px;
transition: all .3s ease-in-out;
}

.anfrage-button:hover{
color: #fff;
background-color: var(--clr2);
border: 2px solid #fff;
}


#gewerbe-kontakt .rahmen-box2 {
background-color: var(--clr2);
border: 1px solid #fff;
aspect-ratio: 1 / 1;
width:96%;
height:96%;
outline: 3rem solid var(--clr2);
padding: 1.6rem;
}

:is(.rahmen-box2 h2, .rahmen-box2 p, .rahmen-box2 a)  {
color: #fff;
}

#gewerbe-kontakt .rahmen-box2 h2{
font-weight: 300;
font-size: clamp(1.4rem, 0.4769rem + 1.9231vw, 2.4rem);
}
/* -- Handy -- */

@media (max-width: 767.98px) { 
 #gewerbe-kontakt .rahmen-box2 h2{
font-size: 1.3rem;
} 

#gewerbe-kontakt .rahmen-box2 {
aspect-ratio:unset;
}

}



/* ---------- Galerie ---------- */

.flickity-prev-next-button {
border-radius: 0% !important;
}

.flickity-button {
background: var(--gold) !important;
color: #fff !important;
}
.gallery-cell {
/*  width: 66%; */
height: auto;
margin-right: 10px;
background: transparent;
counter-increment: gallery-cell;
}

#galerie :not(.is-selected) img{
opacity: 0.5;
} 
#galerie .is-selected img{
opacity: 1;
transition: opacity 700ms linear;
}

/* -------------- Lage -------------- */

.bg-lage {
background-image: url(../../../images/startseite/bg-lage.avif);
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
aspect-ratio: 4/3;
}

.ut-weiss {
  height: 1px;
  width: clamp(10rem, 7.1831rem + 12.0188vw, 18rem);
  background-color: #fff;
}

.bg-lage h2, .bg-lage p {
  color: #fff;
}

.bg-lage h2 {
font-weight: 300;
}

.bg-lage h2 {
font-size: clamp(2rem, 1.325rem + 1.875vw, 3.2rem);
font-weight: 300;
}
@media (max-width: 1199.98px) {  
.br-1200 {
  display: none;
}
}

@media (max-width: 991.98px) { 
.bg-blur {
  background-color: rgba(0, 0, 0, 0.1);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  padding: 1rem;
}
}

.bg-hellgrau {
background-color: #eeefe9;  
}

/* -------------- Kontakt -------------- */

.bg-gold {
background-color: var(--gold)  
}

#kontakt h2, #kontakt p {
  color: #fff;
}

#kontakt h2 {
font-weight: 300;
}

/* -------------- Footer  -------------- */
#sp-footer .container-inner {
  padding: 30px 0px 0px 0px;
}

.footer-wrapper {
flex-direction: row;
justify-content: start; 
}

#sp-footer .footer-button {
color: var(--gold);
background-color: #fff;
border: 1px solid var(--gold);
line-height: normal;
text-transform: uppercase;
padding: 8px 12px;
margin-right: 1rem;
align-self: button;
}

#sp-footer .footer-button:hover {
color: #fff !important;
background-color: var(--clr1);
border: 1px solid #fff;
}