/************** CUSTOM Statement Real Estate **************/

:root {
--clr1: #002433;
--clr2: #357b8f;
--hellblau: #d6e7ed;
}

body {
font-family: 'Roboto', sans-serif;
font-size: clamp(1rem, 0.5385rem + 0.9615vw, 1.5rem);
line-height: clamp(1.4rem, 1.1183rem + 1.2019vw, 2.2rem);
color: #002433;
background-color: #ffffff;  
}

body::-webkit-scrollbar {
  width: 12px;
}

.bg-hellblau {
  background-color: var(--hellblau);
}
.bg-dunkelblau {
  background-color: var(--clr1);
}


/* ------- n3t-Cookie-Banner-Breite ---------*/
.cc_div .bar #s-inr {
  max-width: 44em !important;
}
/* ----------- Top-Bar ------------- */
#sp-top-bar {
  background:#002739;
  color: white;
}

/* ----------- Header ------------- */
#sp-header {
background-color: transparent;
box-shadow: none;
}

#sp-header.header-sticky {     
background-color: var(--clr1);
}


.header-sticky .logo img{     
transform: translateY(-10px);
height: 120px;
}



@media (max-width: 992px) {
.logo img{     
transform: translateY(-20px);
height: 110px;
}

.header-sticky .logo img{     
transform: translateY(10px);
height: 80px;
}
}

@media (max-width: 576px) {
.header-sticky .logo img{     
transform: translateY(-10px);
height: 80px;
}
}

#sp-header.header-sticky .sp-megamenu-wrapper {     
transform: translateY(10%);
}

.sp-megamenu-parent > li > a, .sp-megamenu-parent > li > span {
  line-height: 1.4rem;
}

/* ----------- Navi ------------- */
.sp-megamenu-parent > li > a {
color: white;
font-size: clamp(1.2rem, 1.0154rem + 0.3846vw, 1.4rem);
font-weight: 200;
}

.sp-megamenu-parent > li > a:hover {
color: var(--hellblau);
}

.sp-megamenu-parent > li {
  display: block;
  border-right: 1px solid var(--clr2);

  margin-block: 0.5rem;
  transition: border-right 700ms linear, outline 700ms linear;
}

.sp-megamenu-parent > li:hover {
  border-right: 1px solid #fff;
  outline: 1px solid var(--clr2)
}

#sp-menu .align-items-center {
  align-items: start !important;
}

.sp-megamenu-parent > li.active > a, .sp-megamenu-parent > li.active:hover > a {
  color: var(--hellblau);
  font-weight: 600;
}

.sp-megamenu-parent > li:last-child a{
padding-right: 10px;
}

/* ----------- 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(--clr1);
  color: #ffffff;
}
.offcanvas-menu .offcanvas-inner ul.menu > li a, .offcanvas-menu .offcanvas-inner ul.menu > li span {
  color: #ffffff;
  font-weight: 200;
}

.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(--hellblau);
}

.offcanvas-menu .offcanvas-inner ul.menu li.active a {
  color: var(--hellblau);
  font-weight: 600;
}

/* --------------- Header ---------------- */
#sp-title {
transform: translateY(-218px);
box-shadow: none;
z-index: -1;
}

@media (max-width: 767.98px) { 
 #sp-title {
transform: translateY(-120px);
} 
}

.header-wrapper {
width:100%;
display: grid;
grid-template-areas: "stack";
place-items: center;
}

.header-bild {
grid-area: stack;
z-index: -1;
}

.header-box {
grid-area: stack;;
display: block;
width: 100%;
padding: 1em;
z-index: 1;
align-self: center;
place-self: center;
transform: translateY(-4em);
}

.header-box h2{
position: relative;
color: #fff;
font-size: clamp(1.2rem, -2.3077rem + 7.3077vw, 5rem);
font-weight: 600;
padding-left: 0.7em;
}

.header-box h2 span{
position: absolute;
top: -20px;
left: 4.8em;
display: block;
color: #fff;
font-size: clamp(4rem, -2.2769rem + 13.0769vw, 10.8rem);
font-weight: 900;
}

@media (min-width: 992px) {
.header-box h2 span{
left: 5em;
}  
}

@media (min-width: 1200px) {
.header-box h2 span{
left: 5.1em;
}  
}

@media (min-width: 1400px) {
.header-box h2 span{
left: 5.3em;
}
}

.header-box h2 .end-text {
position: absolute;
top: 1em;
left: 6.2em;
display: block;
width: max-content;
font-size: clamp(3rem, -2.8154rem + 12.1154vw, 9.3rem);
font-weight: 200;
}

.header-box-leistungen {
grid-area: stack;
display: flex;
width: 100%;
flex-direction: row;
padding: 1em;
z-index: 1;
justify-content: end;
align-self: end;
place-self: center;
transform: translateX(- 20%);
padding-right: 10rem;
}

.header-box-leistungen h2{
position: relative;
color: #fff;
font-size: clamp(3rem, -0.6923rem + 7.6923vw, 7rem);
font-weight: 200;
}

.header-box-leistungen h2 .word2{
font-size: clamp(3.5rem, -0.1923rem + 7.6923vw, 7.5rem);
padding-left: 1.1em;
}

.header-box-leistungen h2 .word3{
font-weight: 600;
padding-left: 0.7em;
}

.header-box-profil {
grid-area: stack;
display: flex;
width: 100%;
flex-direction: row;
padding: 1em;
z-index: 1;
justify-content: center;
align-self: center;
place-self: center;
transform: translateX(- 20%);
padding-right: 10rem;
}

.header-box-profil h2{
position: relative;
color: #fff;
font-size: clamp(3rem, -0.6923rem + 7.6923vw, 7rem);
font-weight: 200;
line-height: clamp(3rem, 1.5915rem + 6.0094vw, 7rem);
}

.header-box-profil h2 span{
font-size: clamp(3.5rem, -0.1923rem + 7.6923vw, 7.5rem);
font-weight: 600;
padding-left: 1.1em;
}

@media (max-width: 767.98px) { 
.header-box-profil{
transform: translate(6em, 6em);
}
.header-box-profil h2{
  color: var(--clr1);
font-size: 2rem;
line-height: 2rem;
}
.header-box-profil h2 span{
font-size: 2rem;
}
}

.header-sonstige {
  display: block;
  height: 10em;
  width: 100%;
  background-color: var(--clr1);
}


/* ----------- Hauptcontent ------------- */
#sp-main-body {
  padding: 0;
  margin-top: -210px;
}

@media (max-width: 767.98px) { 
#sp-main-body {
  margin-top: -110px;
} 
}
/* ---

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; hyphens: auto;}
h2 { font-size: clamp(1.45rem, 1.0655rem + 1.068vw, 2rem);font-weight: 400;hyphens: auto; }
h3 { font-size: clamp(1.35rem, 0.9346rem + 0.8654vw, 1.8rem);font-weight: 400; hyphens: auto;}
h4 { font-size: clamp(1.25rem, 1.0192rem + 0.4808vw, 1.5rem);font-weight: 400;line-height: 1.8rem; hyphens: auto;}
h5 { font-size: clamp(0.75rem, 0.6801rem + 0.1942vw, 0.85rem);font-weight: 400; hyphens: auto;}
#sp-main-body > h1::selection,h2::selection,h3::selection,h4::selection,h5::selection { background: var(--clr2); color: #fff; }

.headline {
font-size: clamp(2.5rem, 1.1154rem + 2.8846vw, 4rem); 
font-weight: 200;
}

.headline2 {
font-size: clamp(2rem, 1.0769rem + 1.9231vw, 3rem);
  font-weight: 600;
  margin-bottom: clamp(1.2rem, 0.9183rem + 1.2019vw, 2rem);
}

.headline span{
font-weight: 600;
}

p, ul, li, ol ,li{
hyphens: auto;
font-weight: 300;
}
p::-moz-selection { background: var(--clr1); color: #fff; }
p::selection { background: var(--clr1); color: #fff; }
strong::-moz-selection { background: var(--clr2); color: #fff; }
strong::selection { background: var(--clr2); color: #fff; }

ul { padding-left: 1.5rem; }

.liste1 {
list-style: outside "»  ";
}

li::marker { color: var(--clr1) }

hr {
margin-top: 22px;
margin-bottom: 22px;
border: 0;
border-top: 2px solid #eeeeee;
}

.button1 {
color: #ffffff !important;
background-color: var(--clr2);
border: 1px solid var(--clr2);
padding: 4px 14px;
font-weight: 200;
transition: background-color 700ms linear;
}

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

.readmore a{
color: #ffffff !important;
background-color: var(--clr1);
border: 1px solid #ffffff;
padding: 4px 14px;
font-weight: 400;
transition: background-color 700ms linear;
}

.rand-links {
 border-left: 1px solid var(--clr1);   
}

.box1 {
display: grid; 
width: 100%; 
height: 100%;
flex-direction: column;
justify-content: flex-start;
}
.strich {
align-self: flex-end;
height: 1px;   
width: 18em;
background-color: var(--clr1); 
}

@media (max-width: 767.98px) { 
.rand-links {
 border-left: none; 
} 
} 
/* ----------- Startseite ------------- */
.wrappi {
width:100%;
display: grid;
grid-template-areas: "stack";
place-items: start;
}

.wrappi-bild {
display: block;
width: 100%;
grid-area: stack;
z-index: -1;
}

.info-box {
grid-area: stack;;
display: block;
width: clamp(20rem, 17.1831rem + 12.0188vw, 28rem);
aspect-ratio: 1 / 1;
padding: 1em;
background-color:rgba(53, 123, 143,0.8);
z-index: 1;
place-self: start;
transform: translate(20%, 20%);
}

@media (max-width: 767.98px) { 
.info-box {
transform: translate(0%, 0%);
} 
} 

.info-box h2{
font-size: clamp(1.8rem, 1.4308rem + 0.7692vw, 2.2rem);
font-weight: 200;
color: #fff;
margin-bottom: 2rem;
}

.info-box h2 span{
font-weight: 600;
}

.start-icon img{
max-width: 40% !important;
margin-bottom: 1.8rem;
}

.start-icon {
text-align: center;
}

.start-icon h3{
text-align: center;
font-size: 1.8rem;
font-weight: 600;
margin-bottom: 1.2rem;
}
/* ----------- Leistungen ------------- */
#leistungen .sec2 h2{
font-size: clamp(1.8rem, 1.2462rem + 1.1538vw, 2.4rem);
font-weight: 600;
text-align: center;
color: #fff;
}

#leistungen .sec2 .box{
  padding: 3rem;
place-items: center;
text-align: center;
}

#leistungen .sec2 h4, #leistungen .sec2 p{
color: #fff;
}

#leistungen .sec2 h4{
  font-size: 1.4rem;
  font-weight: 600;
text-transform: uppercase;
}

#leistungen .rand-links {
 border-left: 1px solid #fff;   
}

#leistungen .rand-unten {
 border-bottom: 1px solid #fff;   
}

#leistungen .sec2 img{
max-width: 30% !important;
margin-bottom: 2rem;
}

@media (max-width: 767.98px) { 
#leistungen .rand-links {
 border-left: 0px;   
} 
#leistungen .rand-unten {
 border-left: 0px;   
}
#leistungen .sec2 .box{
border-bottom: 1px solid #fff;  
}
} 

.leistungen-wrappi {
width:100%;
display: grid;
grid-template-areas: "stack";
place-items: end;
}

.leistungen-wrappi-bild {
display: block;
width: 100%;
grid-area: stack;
z-index: -1;
}

.leistungen-info-box {
grid-area: stack;;
display: block;
width: clamp(20rem, 17.1831rem + 12.0188vw, 28rem);
aspect-ratio: 4 / 3;
padding: 1em;
background-color: rgb(0, 36, 51,0.8);
z-index: 1;
place-self: end;
transform: translate(-20%, -40%);
}

@media (max-width: 1199.98px) {
.leistungen-info-box {
transform: translate(-20%, -30%);
} 
}

@media (max-width: 991.98px) { 
.leistungen-info-box {
transform: translate(-20%, -20%);
}  
}

@media (max-width: 767.98px) { 
.leistungen-info-box {
transform: translate(0%, 0%);
} 
} 

.leistungen-info-box h2{
font-size: clamp(1.8rem, 1.4308rem + 0.7692vw, 2.2rem);
font-weight: 200;
color: #fff;
margin-bottom: 2rem;
}
/* ----------- Leistungen Section 5 Grid------------- */
.wrapper-box-mitte {
  position: relative;
width:100%;
display: grid;
grid-template-areas: "stacki";
place-items: center;
}

.lv-box-mitte {
position: absolute;
display: block;
grid-area: stacki;
width: max-content;
height: max-content;
place-self: center;
justify-self: center;
aspect-ratio: 1 / 1;
background-color:rgba(53, 123, 143,0.8);
z-index: 2;
align-items: center;
justify-items: center;
padding: 2rem;
}

.lv-box-mitte h2{
font-size: clamp(1.8rem, 1.4308rem + 0.7692vw, 2.2rem);
font-weight: 200;
color: #fff;
text-align: center;
place-self: center;
justify-self: center;
}

.lv-box-mitte h2 span{font-size: clamp(1.8rem, 1.4308rem + 0.7692vw, 2.2rem);
font-weight: 600;

}
.wrapper-lv {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "box1 box2" "box3 box4";
}

@media (max-width: 767.98px) { 
 .wrapper-lv {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas: "box1" "box2" "box3" "box4";
} 
   .wrapper-lv:has(.fade-right-desktop) {
transform: translateX(0px);
}
 .wrapper-lv:has(.fade-left-desktop) {
transform: translateX(0px); 
}
.lv-box-mitte {
aspect-ratio: auto;
padding: 1rem;
}
}

.lv-box {
display: grid;
align-items: center;
justify-items: center;
}

.lv-box img {
grid-area: stacki;
z-index: -1;
}

.lv-box-text {
grid-area: stacki;
display: grid;
width: 100%;
height: 100%;
z-index: 1;
background-color: rgba(0, 36, 51,0.8);
transition: background-color 700ms linear;
}

.lv-box-text:hover {
background-color:transparent;
}

.lv-box-text h5{
display: block;
font-size: clamp(2rem, 1.2615rem + 1.5385vw, 2.8rem);  
font-weight: 400;
color: #fff;
text-align: center;
place-self: center;
justify-self: center;
}

.box1 {
  grid-area: box1;
}
.box2 {
  grid-area: box2;
}
.box3 {
  grid-area: box3;
}
.box4 {
  grid-area: box4;
}
/* ----------- Über uns------------- */

.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;  
aspect-ratio: 1 / 1;
width: 100%;
height: 100%; 
border: 1px solid #fff;  
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{
display: inline;
width: 100%;  
height: max-content;
color: #fff;
font-size: clamp(2rem, -0.7692rem + 5.7692vw, 5rem);
font-weight: 200;
}

.counter-wrapper .counter-item p {
width: 100%;
height: max-content;
color: #fff;
font-size: clamp(1rem, 0.0769rem + 1.9231vw, 2rem);
font-weight: 200;
}

.counter-strich {
display: block;
align-self: start;
height: 1px;   
width: 100%;
background-color: var(--clr2); 
margin-top: 3rem;  
margin-bottom: 2rem;
transform: translateY(-30px);
}

.counter-headline {
text-align: center;
color: #fff;
font-size: clamp(1.8rem, 1.2462rem + 1.1538vw, 2.4rem);
font-weight: 200;
background-color: var(--clr1);
margin-block: 1rem;
}

.counter-headline span{
font-weight: 600;
}


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

@media (max-width: 767.98px) {
.counter-wrapper {
display: flex;
flex-direction: column;
gap: 2em;   
} 
.counter-wrapper .counter-item {
padding: 2.5rem 1rem;
}
.counter-wrapper .counter-item span {
font-size: 5rem;
}
.counter-wrapper .counter-item p {
font-size: 2rem;
line-height: 3rem;
}
.counter-strich {
margin-top: 2rem;
}
}

.profil h3{
  color: var(--clr1);
font-size: clamp(1.3rem, 0.8385rem + 0.9615vw, 1.8rem);
font-weight: 200;
}

.profil h3 span{
font-weight: 600;
}



/*
/* ----------- Readmore ------------- */
.readmore a:hover {
color: var(--clr1) !important;
background-color: #ffffff;
border: 1px solid var(--clr1);
}

/* ----------- Kontakt ------------- */
#kontakt {
  scroll-margin-top: 200px; 
}

#sp-kontakt {
  background-color: var(--clr1);
}

#sp-kontakt h2, #sp-kontakt p, #sp-kontakt td{
color: #fff;
}

#sp-kontakt h2{
font-size: clamp(2rem, 1.0769rem + 1.9231vw, 3rem);
font-weight: 200;
}
#sp-kontakt h2 span{
font-weight: 600;
}

#sp-kontakt img{
max-width: 40%;
}

.strich-blau {
align-self: flex-end;
height: 1px;   
width: 18em;
background-color: var(--clr2); 
}
/* ----------- Footer ------------- */
#sp-footer {
  background-color: var(--clr1);
}
#sp-footer .container-inner {
  padding: 30px 0;
  border-top: 0px;
}
.footer-button {
  display: flex;
padding-block: 2px;
}

.footer-button a{
margin-right: 1rem;
}