/*#### sie Hausagentur ####*/

@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css");

:root {  
--gold: #b59859;
--clr2: #737470;
--rot: #b32e09;
--clr4: #c33a31;
--hellbeige: #eeefe9;
--bg-hellbeige: #eeefe9;

}

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;
}
/* --------------- Navigation ----------------*/
/* ----------- Offcanvas ------------- */

.burger-icon > span {
  background-color: rgb(255, 255, 255);
}

.offcanvas-active .burger-icon > span, #modal-menu-toggler.active .burger-icon > span {
 background-color: rgb(255, 255, 255);
}

.offcanvas-menu {
  backdrop-filter: blur(10px);
  background-color: var(--gold);
  color: #ffffff;
}
.offcanvas-menu .offcanvas-inner ul.menu > li a, .offcanvas-menu .offcanvas-inner ul.menu > li span {
  color: #ffffff;
  font-weight: 100;
}

.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: var(--bg-hellgruen);
}

.offcanvas-menu .offcanvas-inner ul.menu li.active a {
  color: var(--bg-hellgruen);
  font-weight: 100;
}
/* --------------- Header ----------------*/
#sp-header {
    background-color: transparent;
    box-shadow: none;
}

#sp-header.header-sticky {     
transition: background-color 700ms linear;
background-color: rgba(181, 152, 89,0.9);
}

#sp-title{
margin-top: -3.3em;
}

.parallax-window {
min-height: 1021px;
background: transparent;
width: 100%;
display: grid;
grid-template-areas: "stack";
place-items: center;
}

.text-container {
grid-area: stack;
display: block;
z-index: 1;
width: 100%;
height: 100%;
/* background-color: rgba(0, 0, 0, 0.4); */
text-align: left;
align-content: center;
}

.text-box-home {
display: block;
width: 100%;
height: 895px;
overflow: scroll;
scrollbar-width: none;
}
.scrollabstand {
  width: 100%;
  height: 20em;
}
.scrollabstand2 {
  width: 100%;
  height: 10em;
}

.text-box-home h2, .text-box-home h3, .text-box-home p{
display: block;
color: #fff;
margin-left: 16%;
}

.text-box-home h2 {
margin-top: 10rem;  
font-family: 'Bitter';
font-style: normal;
font-size: clamp(2rem, -2.1538rem + 8.6538vw, 6.5rem);
}

.text-box-home h2 span{
 font-family: 'Bitter';
font-style: italic;
font-size: clamp(2rem, -2.1538rem + 8.6538vw, 6.5rem);
}

.text-box-home h3 {
font-family: 'Roboto';
font-style: normal;
font-weight: 300;
font-size: 1.7rem;
}

.text-box-home p {
font-family: 'Bitter';
font-style: normal;
font-size: 1.2rem;
width: 30%;
}

@media (max-width: 767.98px) { 
.text-container {
background-color: rgba(0, 0, 0,0.4);
}
.text-box-home h2{
font-size: 4.1rem;  
margin-top: 8rem;
} 
.text-box-home h2 span{  
font-size: 4.1rem;  
} 
.text-box-home h3{  
font-size: 1.3rem; 
} 
.text-box-home p {
width: 90%;
margin-left: 8%;
}
.text-box-home h2, .text-box-home h3{
margin-left: 8%;
}
}
/* -----  für alle anderen Header ---------------*/
.header-wrapper {
height: auto;
background: transparent;
width: 100%;
display: grid;
grid-template-areas: "stack";
place-items: center;
}

.header-wrapper img{
grid-area: stack;
display: grid;
align-items: center;
z-index: -1;
width: 100%;
height: 100%;
align-content: center;
}

.text-container2 {
grid-area: stack;
display: grid;
align-items: end;
position: relative; 
z-index: 2;
width: 100%;
height: 100%;
align-content: center;
}

.text-container2 > .text-box {
position: absolute;  
display: block;
padding-left: 10%;
bottom: 2%;
/*transform: translate(16%, 48%);*/
}

.text-box h2, .text-box2 h3{
color: #fff;
}

.text-box h2 {
font-family: 'Bitter';
font-style: normal;
font-size: clamp(2rem, -2.1538rem + 8.6538vw, 6.5rem);
}

.text-box h2 span{
 font-family: 'Bitter';
font-style: italic;
font-size: clamp(2rem, -2.1538rem + 8.6538vw, 6.5rem);
}

.text-box h3 {
font-family: 'Roboto';
font-style: normal;
font-weight: 300;
font-size: 1.7rem;
}

.header-rechtliches {
  display: block;
  height: 3em;
  width: 100%;
  background-color: var(--gold);
}



/* --------------- Main Content ----------------
Dient dazu den Badge-Button "Featured" aauf der Startseite abzuschalten.
--- */
.article-details .featured-article-badge {
  display: none;
}

#sp-main-body {
padding: 0 0;
/*margin-top: -2.6em;*/
}

#sp-main-body .top-body{
margin-top: -2.6em;
}

#sp-main-body:has(h1,h2,h3,h4,h5) {
font-family: 'Bitter';
}

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{
font-family: 'Roboto'; 
hyphens: auto;
font-weight: 300;
}

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

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

.text-rot {
 color: var(--rot);   
}
.text-clr2 {
 color: var(--clr2);   
}

.text-clr3 {
 color: var(--clr3);   
}
.text-schwarz {
 color: #000000;   
}

.text-weiss {
 color: #fff;   
}

.bg-hellbeige {
background-color: var(--bg-hellbeige);    
}

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

.bg-grau {
background-color: var(--clr2)    
}

.shadow1 {
box-shadow: 3px 5px 10px hsla(0,0%,0%,0.5);  
}

.button1 {
color: #fff;
background-color: var(--gold);
font-size: clamp(0.8rem, 0.6154rem + 0.3846vw, 1rem);
font-weight: 300;
text-transform: uppercase;
border-radius: 50px;
padding: .6rem 3rem;
transition: background-color 700ms linear;
}

.button1:hover {
color: #fff;
background-color: var(--rot);

}

.button1:visited, .button1:focus {
color: #fff;
}

.headline1 {
 font-family: 'Roboto';
font-size: 1rem;    
font-weight: 300;
width: fit-content;
}

.headline1::after {
display: block;
content: " ";
  display: block;
  width: 100%;
  border: 1px solid currentColor;
  margin-top: 0.8rem;
}

.headline2 {
 font-family: 'Bitter';
 font-style: normal;
font-size: clamp(1.2rem, -0.4615rem + 3.4615vw, 3rem);   
font-weight: normal;
line-height: clamp(1.8rem, 1.2014rem + 2.5540vw, 3.5rem);
}

.headline2 span{
font-style: italic;
}

.headline3 {
 font-family: 'Bitter';
 font-style: normal;
font-size: clamp(1.4rem, 0.8462rem + 1.1538vw, 2rem);  
font-weight: normal;
}

.headline4 {
 font-family: 'Bitter';
 font-style: normal;
font-size: clamp(1.1rem, 0.7308rem + 0.7692vw, 1.5rem);
font-weight: normal;
}

.headline5 {
 font-family: 'Bitter seminbold';
 font-style: bold;
font-size: clamp(1.4rem, 0.8462rem + 1.1538vw, 2rem); 
font-weight: 600;
}

.subheadline1 {
font-family: 'Roboto';
font-size: clamp(1.1rem, 0.9154rem + 0.3846vw, 1.3rem);
font-weight: 400;
}





@media (max-width: 767.98px) { 
.headline2 {    
font-size: 2rem;
line-height: 2.8rem;
}
.headline4 {    
font-size: 2rem;
}
}


/* ----------  Refenzen Overlay Startseite ------------*/
.home-overlay {
width: 100%;
display: grid;
grid-template-areas: "stack";
place-items: center;
}


.home-overlay img {
display: block;
grid-area: stack;
width: 100%;
object-fit: cover;
z-index: -1;
}

.home-overlay .overlay-link {
grid-area: stack;
display: block;
opacity: 0;
z-index: 1;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.2);
text-align: center;
align-content: center;
transition: opacity 700ms linear;
}

.home-overlay .overlay-link:hover {
opacity: 1;
}

.home-overlay .overlay-link h3, .home-overlay .overlay-link p {
color: #fff;
}

.home-overlay .overlay-link h3 {
font-family: 'Bitter';    
font-size: clamp(0.9rem, 0.5308rem + 0.7692vw, 1.3rem);
}

.overlay-button {
color: #fff;
background-color: transparent;
font-size: clamp(0.8rem, 0.6154rem + 0.3846vw, 1rem);
font-weight: 300;
text-transform: uppercase;
border: 1px solid #fff;
border-radius: 50px;
padding-block: clamp(0.3rem, 0.1944rem + 0.4507vw, 0.6rem);
padding-inline: clamp(0.5rem, -0.3803rem + 3.7559vw, 3rem);
transition: background-color 700ms linear;
}

.overlay-button:hover {
color: #fff;
background-color: transparent;
}

@media (max-width: 767.98px) { 
.home-overlay .overlay-link h3 {    
font-size: 1.8rem;
}
.overlay-button {
font-size: 1rem;
padding-block:  0.6rem;
padding-inline: 3rem;
}
}


/* ----------  Marquee auf der Startseite------------*/
logo-slider {
  overflow: hidden;
  max-width: 1600px;
  min-width: 320px;
  width: 100%;
  display: flex;
  padding-block: 5px;
}
@keyframes marquee {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(calc(-50% - var(--slider-gap, max(16px, max(16px, 2vw))) * 2));
  }
}
logo-slider > div {
  display: flex;
  align-items: center;
  animation: marquee calc(var(--slider-duration, 5s) + var(--variable-duration, 0s) * 10) linear infinite;
  justify-content: space-between;
  gap: var(--slider-gap, max(16px, max(16px, 2vw)));
}
logo-slider > div img {
  height: clamp(50%, 10vw, 100%);
  max-width: 350px;
  max-height: 200px;
  object-fit: contain;
  display: block;
}
logo-slider > div a {
  outline: 1px solid white;
}
logo-slider > div > *:where(:nth-child(1), :nth-child(21)) {
  outline: 5px dashed red;
}
logo-slider > div > *:where(:nth-child(20), :nth-child(40)) {
  outline: 5px dashed yellow;
}
logo-slider > div:hover {
  animation-play-state: paused;
}
@media (min-width: 1920px) {
  logo-slider {
    -webkit-mask-image: linear-gradient(to right, transparent, white 10vw, white calc(100% - 10vw), transparent);
  }
}
/* ----------  Kontakt Startseite ------------*/
#kontakt p, #kontakt ul li, #kontakt a{
color: #fff;
}

#kontakt a:hover{
color: var(--clr2);
}

.kontakt-menue  {
  list-style: none;
}

.kontakt-menue li {
line-height: 2.5rem;
}

.kontakt-menue li a{
color: #fff;
font-family: 'Bitter';
font-weight: 400;
font-size: 1.1rem;
}

.button-footer {
color: #fff;
background-color: var(--gold);
font-size: clamp(0.8rem, 0.6154rem + 0.3846vw, 1rem);
font-weight: 300;
text-transform: uppercase;
border: 1px Solid #fff;
border-radius: 50px;
padding: .6rem 3rem;
transition: background-color 700ms linear;
}

.button-footer:hover {
color: #fff;
background-color: var(--rot);

}

.button-footer:visited, .button1:focus {
color: #fff;
}

.footer-kontakt-daten {
  display: flex;
  flex-direction: column;
}

.footer-kontakt-daten a{
font-size: 1.2rem;  
line-height: 1.7rem;
font-weight: 200;
color: #fff;  
text-decoration: underline;
}

.footer-adresse{
font-size: 0.9rem;  
}

.footer-rechtliches{
  height: 100%;
  display: flex;
align-items: end;
justify-content: end;
  margin-top: auto;
font-size: 0.9rem;  
}
.footer-rechtliches a{
color: #fff;  
font-weight: 200;
font-size: 0.9rem;  
}

.sp-copyright {
font-weight: 200;
}

/* ----------  Referenzen Seite ------------*/
/*------------------ 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 {
position: relative;
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: 4.5rem 0.5rem;
margin-block: auto;
aspect-ratio: 1/1;
}

.counter-wrapper .counter-item span{
color: var(--gold);
font-family: 'Roboto';
font-size: clamp(2rem, -0.4304rem + 5.0633vw, 4rem);
font-weight: 200;
}

.counter-strich {
position: absolute;
bottom:45%;
left: 10%;
right: 10%;
height: 1px;   
width: 80%;
background-color: var(--gold); 
margin-bottom: auto;
transform: translateY(-33px);
}

@media (max-width: 575.98px) {
.counter-strich {
transform: translateY(-33px);
}
}


@media (max-width: 767.98px) {
.counter-strich {
transform: translateY(0px);
margin-block: auto;
}
}


@media (max-width: 991.98px) { 
.counter-strich {
transform: translateY(0px);
margin-top: 4rem;
}
}


@media (max-width: 1199.98px) {
.counter-strich {
transform: translateY(0px);
margin-top: auto;
}
}

@media (max-width: 1399.98px) { 
.counter-strich {
transform: translateY(-18px);
}
}


.counter-wrapper .counter-item h5{
font-family: 'Roboto';
color: var(--gold);    
font-size: clamp(1.2rem, 0.4709rem + 1.519vw, 1.8rem);
font-weight: 300;
margin-top: 5rem;
}

@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;
}
}
/* ----------  Referenzen Auswahl ------------*/
.referenzen-overlay {
width: 100%;
display: grid;
grid-template-areas: "stack";
place-items: center;
}


.referenzen-overlay img {
display: block;
grid-area: stack;
width: 100%;
object-fit: cover;
z-index: -1;
}

.referenzen-overlay .overlay-link {
grid-area: stack;
display: block;
opacity: 0;
z-index: 1;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.4);
text-align: center;
align-content: center;
transition: opacity 700ms linear;
}

.referenzen-overlay .overlay-link:hover {
opacity: 1;
}

.referenzen-overlay .overlay-link h3, .referenzen-overlay .overlay-link p {
color: #fff;
}

.referenzen-overlay .overlay-link h3 {
font-family: 'Bitter';    
font-size: clamp(1.4rem, 0.2923rem + 2.3077vw, 2.6rem);
}

.referenzen-overlay > .overlay-button {
color: #fff;
background-color: transparent;
font-size: clamp(0.8rem, 0.6154rem + 0.3846vw, 1rem);
font-weight: 300;
text-transform: uppercase;
border: 1px solid #fff;
border-radius: 50px;
padding-block: clamp(0.3rem, 0.1944rem + 0.4507vw, 0.6rem);
padding-inline: clamp(0.5rem, -0.3803rem + 3.7559vw, 3rem);
transition: background-color 700ms linear;
}

.referenzen-overlay > .overlay-button:hover {
color: #fff;
background-color: transparent;
}

@media (max-width: 767.98px) { 
.referenzen-overlay .overlay-link h3 {    
font-size: 2.8rem;
}
.overlay-button {
font-size: 1rem;
padding-block:  0.6rem;
padding-inline: 3rem;
}
}


.border-big-left {
  border-left: clamp(1rem, 0.6479rem + 1.5023vw, 2rem) solid #fff;
}
@media (max-width: 767.98px) { 
.border-big-left {
  border-left: none;
}
}
/* ----------  Referenzen  Joomla Seitennavigation ------------*/
.seitennavi-mitte {
transform: translateY(1rem);

}
.btn {
font-family: 'Roboto';
font-weight: 300;
color: var(--gold);  
background-color: #fff;
border: 1px solid var(--gold);
border-radius: 40px;
text-transform: uppercase;
margin-inline: 10%;
}

.btn:hover {
color: var(--clr2);  
background-color: #fff;
border: 1px solid var(--clr2);
}

.btn:focus {
color: var(--clr2);  
background-color: #fff;
border: 1px solid var(--clr2);
}

.pagenavigation .pagination a {
  padding: 5px 8px;
}

/* ----------  Referenzen  Quartiersbeschilderung Seite ------------*/
.doppel-a4 {
display: flex; 
flex-direction: row; 
margin-right: clamp(1rem, 0.4718rem + 2.2535vw, 2.5rem); 
}
@media (max-width: 767.98px) { 
.doppel-a4 {
display: block;  
margin-right: 0; 
}
.doppel-a4 img{ 
margin-bottom: 2rem; 
}
}

/* ----------  Leistungen Seite ------------*/
.picto-leistungen {
display: flex;
flex-direction: column;
}


.picto-leistungen h3, .picto-leistungen p {
color: #fff;
}

.picto-leistungen h3 {
margin-top: 2rem;
}

.picto-leistungen img {
max-width: 60%;
margin-top: 1rem;
}


@media (max-width: 767.98px) { 
.picto-leistungen {
border-bottom: 2px solid rgba(255, 255, 255,0.1);
}
}


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

#form1_text4 {
  width: 23%;
}

@media (max-width: 767.98px) { 
#form1_text4 {
  width: 50%;
}
}

#cf1 input, #cf1 textarea {
border: 1px solid rgba(0, 0, 0,0.1);
border-radius: 0px;
background-color: rgba(181, 152, 89,0.05);
}

.convertforms .cf-input[type="checkbox"] {
align-self: start;
margin-top: 3px;
}

#form1_captcha15 {
    width: 23%;
    align-items: start;
}

.convertforms .captcha-container .captcha-equation {
  flex-grow: 0;
}