/* ---------- ADLER Ostforum --------------*/


:root {
--clr1: #727574;
--clr2: #5f7b51;
--clr3: #2e5355;
--clr4: #c33a31;
--hellgrau: #e6e7e7;
--bg-hellgruen: #e4e8e7;
--bg-news:#f9fbfb;
--bg-tab1: #e4e8e7;
--bg-tab2: #f1f4f4;
}


body {
font-family: 'Inter', sans-serif;
font-size: clamp(1rem, 0.6308rem + 0.7692vw, 1.4rem);
line-height: clamp(1.4rem, 1.1183rem + 1.2019vw, 2.2rem);
color: #727574;
background-color: #ffffff;  
}


/* ------- n3t-Cookie-Banner-Breite ---------*/
.cc_div .bar #s-inr {
  max-width: 44em !important;
}

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

#sp-header.header-sticky {     
background-color: rgba(95, 123, 81,0.9);  
transition: background-color 700ms linear;
}


  /* -------------------------- Navi  ---------------------------- */
.sp-megamenu-parent li.sp-menu-item {
transition: all .3s ease-in-out;
}

/* Nva Link Under line */
.sp-megamenu-parent li.sp-menu-item::after {
    content: '';
    display: block;
    width: 0;
    height: 1px;
    background: var(--clr4);
    transition: width .4s;
    transform: translateY(0.5rem);
}

/* Nva Link Under line on Hover */
.sp-megamenu-parent > li:hover::after {
    width: 100%;
    transform: width .4s;
}
.sp-megamenu-parent > li > a, 
.sp-megamenu-parent > li > span {
line-height: 40px;
} 
  .sp-megamenu-parent > li > a, 
  .sp-megamenu-parent > li > span, 
  .sp-megamenu-parent .sp-dropdown li.sp-menu-item > a{
font-family: 'Inter', sans-serif;
font-weight: 100;
font-size: clamp(1rem, 0.5385rem + 0.9615vw, 1.5rem);
color: #fff;
text-decoration: none;
} 

.sp-megamenu-parent > li.active > a, .sp-megamenu-parent > li:hover > a, .sp-megamenu-parent > li.active:hover > a {
  color: var(--bg-hellgruen);
}

.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: #009cf8;
  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;
}

/* --------------- Title ---------------- */
#sp-title {
transform: translateY(-140px);
box-shadow: none;

}

@media (max-width: 767.98px) { 
 #sp-title {
transform: translateY(-60px);
} 
}
/* --------------- Title Grid ---------------- */
.header-wrapper {
  display: grid;
  grid-template-rows: 1fr;
	grid-template-columns: 1fr;
	gap: 0;
	width: 100%;
	height: 100%;
}

.header-bilder {
  display: grid;
  grid-area: 1/1/2/2;
  z-index: -1;
}

#title-grid-columns {
	display: grid;
  grid-area: 1/1/2/2;
  z-index: 1;
	gap: 3em;
  margin-top: 30%;
}
#title-box-grau {
  aspect-ratio: 1 / 1;
	background-color: var(--clr1);
  padding: 2rem;
}

#title-box-grau h2, #title-box-grau p{
color: #fff;
}

#title-box-grau h2{
/*font-size: clamp(1.8rem, 0.6923rem + 2.3077vw, 3rem);*/
font-size: clamp(1.9rem, 0.2385rem + 3.4615vw, 3.7rem);  
font-weight: 300;
margin-bottom: clamp(1rem, 0.0769rem + 1.9231vw, 2rem);
}

#title-box-grau p{
font-size: clamp(0.9rem, 0.4385rem + 0.9615vw, 1.4rem);
}

#title-grid {
  position: relative;
display: grid;
align-items: end;
justify-items: end;
grid-template-rows: repeat(2, 1fr);
grid-template-columns: repeat(2, 1fr);
gap: 3em;
height: auto;
aspect-ratio: 1 / 1;
z-index: 11111111;
}


#title-box-rot {
display: grid;
grid-area: 1/2/2/3;
aspect-ratio: 1 / 1;
background-color: var(--clr4);
align-self: flex-start;
align-items: center;
justify-items: center;
border: 1px solid #fff;
outline: 32px solid var(--clr4);
width: 7.4em;
}

#title-box-rot h5, #title-box-gruen1 h5, #title-box-gruen2 h5{
font-size: clamp(0.9rem, 0.2474rem + 1.0526vw, 1.3rem);
}

#title-box-rot h5{
color: #fff;
font-weight: 500;
text-align: center;
}

#title-box-gruen1 {
display: grid;
grid-area: 2/1/3/2;
aspect-ratio: 1 / 1;
background-color: var(--clr2);
align-items: center;
justify-items: center;
border: 1px solid #fff;
outline: 32px solid var(--clr2);
width: 7.4em;
margin-bottom: 2rem;
}

#title-box-gruen1 h5{
color: #fff;
font-weight: 200;
text-align: center;
}

#title-box-gruen2 {
display: grid;
grid-area: 2/2/3/3;
aspect-ratio: 1 / 1;
background-color: var(--clr3);
align-items: center;
justify-items: center;
border: 1px solid #fff;
outline: 32px solid var(--clr3);
width: 7.4em;
margin-bottom: 2rem;
}

#title-box-gruen2 h5{
color: #fff;
font-weight: 200;
text-align: center;
}

#title-box-gruen1, #title-box-gruen2{
transition: background-color 700ms linear;
}


#title-box-gruen1:hover, #title-box-gruen2:hover{
border: 1px solid var(--clr4);
background-color: var(--clr1);
outline: 32px solid var(--clr1);
animation: schatten-innen 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

@keyframes schatten-innen {
  0% {
    -webkit-box-shadow: inset 0 0 0 0 rgba(0, 0, 0, 0);
            box-shadow: inset 0 0 0 0 rgba(0, 0, 0, 0);
  }
  100% {
    -webkit-box-shadow: inset 6px 6px 14px -6px rgba(0, 0, 0, 0.5);
            box-shadow: inset 6px 6px 14px -6px rgba(0, 0, 0, 0.5);
  }
}


@media (max-width: 991.98px) { 
#title-grid-columns {
margin-top: 20em;
}
#title-box-grau {
aspect-ratio: unset;
padding: 2rem;
}  
#title-grid {
display: grid;
align-items: center;
justify-items: center;
grid-template-rows: 1fr;
grid-template-columns: repeat(3, 1fr);
height: auto;
width: 100%;
aspect-ratio: unset;
}
#title-box-rot {
display: grid;
grid-area: 1/1/2/2;
outline: 16px solid var(--clr4);
width: 9.4em;
}
#title-box-gruen1 {
display: grid;
grid-area: 1/2/2/3;
outline: 16px solid var(--clr2);
width: 9.4em;
}
#title-box-gruen2 {
display: grid;
grid-area: 1/3/2/4;
outline: 16px solid var(--clr3);
width: 9.4em;
}
#title-box-rot h5, #title-box-gruen1 h5, #title-box-gruen2 h5{
font-size: 1.1rem;
}
#title-box-gruen1:hover, #title-box-gruen2:hover{
border: 1px solid var(--clr4);
background-color: var(--clr1);
outline: 16px solid var(--clr1);
}
}
@media (max-width: 575.98px) { 
  #title-grid-columns {
margin-top: 13em;
}
 #title-grid {
display: grid;
align-items: center;
justify-items: center;
grid-template-rows: repeat(3, 1fr);
grid-template-columns: 1fr;
gap: 1em;
height: auto;
width: 100%;
aspect-ratio: unset;
padding: 0 1rem;
} 
#title-box-rot {
display: grid;
grid-area: 1/1/2/2;
outline: 16px solid var(--clr4);
width: 100%;
height: 7em;
}
#title-box-gruen1 {
display: grid;
grid-area: 2/1/3/2;
outline: 16px solid var(--clr2);
width: 100%;
height: 7em;
}
#title-box-gruen2 {
display: grid;
grid-area: 3/1/4/2;
outline: 16px solid var(--clr3);
width: 100%;
height: 7em;
}
#title-box-rot, #title-box-gruen1, #title-box-gruen2{
aspect-ratio: unset;
}
#title-box-rot h5, #title-box-gruen1 h5, #title-box-gruen2 h5{
font-size: 1.1rem;
}

}

/* ----------- Breadcrumb ------------- */
.breadcrumb {
  padding: 1rem 0rem;
  background-color: #fff;
  border-radius: 0rem;
  margin-top: 0px;
  margin-bottom: 10px;
}
.mod-breadcrumbs__item a, .breadcrumb-item.active {
font-size: 1rem;  
}

.breadcrumb-item + .breadcrumb-item::before {
font-size: 1rem; 
}

/* ----------- Hauptcontent ------------- */
#gewerbe, #wohnen, #news, #lage, #galerie {
  scroll-margin-top: 170px; 
}



#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;
}

ul { padding-left: 1.5rem; }

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



.headline {
font-weight: 600;
text-transform: uppercase;
}

.headline2 {
font-size: clamp(1.9rem, 0.2385rem + 3.4615vw, 3.7rem);
font-weight: 300;
margin-bottom: clamp(1rem, 0.0769rem + 1.9231vw, 2rem);
}

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

.text-clr3 {
 color: var(--clr3);   
}
.text-clr4 {
 color: var(--clr4);   
}

.text-weiss {
 color: #fff;   
}

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

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

.hr-hellgruen {
  border: 1px solid var(--clr2); 
}

.hr-dunkelgruen {
  border: 1px solid var(--clr3); 
}

.hr-hellgrau {
  border: 1px solid var(--hellgrau); 
}

.button1 {
color: #fff;
background-color: var(--clr4);
font-size: 1.1rem;
border: 1px solid #fff;
padding: .2rem 4rem;
outline: 0.4rem solid var(--clr4);
}

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

.rahmen-box1 {
height: 100%;
  border: 1px solid var(--clr3); 
}

.rahmen-box1 h2{
font-size: clamp(1.9rem, 0.2385rem + 3.4615vw, 3.7rem);
font-weight: 300;
margin-bottom: clamp(1rem, 0.0769rem + 1.9231vw, 2rem);
}

@media (max-width: 767.98px) { 
.rahmen-box1 h2{
font-size: 3rem;
margin-bottom: 3rem;
} 
}

@media (max-width: 575.98px) { 
.rahmen-box1 h2{
font-size: 1.8rem;
margin-bottom: 2rem;
} 
}

#gewerbe-ausstattung {
background-image: url(../../../images/startseite/gewerbe-austattung.avif);
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
padding-bottom: 10em;
}

.gewerbe-ausstattung-box {
aspect-ratio: 1 / 1;
background-color: rgba(255, 255, 255,0.9);
}

.gewerbe-ausstattung-box h3{
font-size: 1.8rem;
text-transform: uppercase;
color: var(--clr2);
position: relative;
background-color: transparent;
margin-bottom: 1rem;
}

.gewerbe-ausstattung-box h3::before{
content: "";
position: absolute;
left: 0px;
top: 2.5rem;
height: 1px;
width: 100%;
background-color: var(--clr2);
}

@media (max-width: 767.98px) { 
.gewerbe-ausstattung-box h3{
font-size: 1.6rem;
}
.gewerbe-ausstattung-box h3::before{
display: none;
}
}
/* --- Gewerbe-Tabelle --- */
.table-gewerbe .row{
border-bottom: 1px solid var(--hellgrau);
}

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

.table-gewerbe .table-head .col-3{
font-weight: 600;
}

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

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

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

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

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

.table-gewerbe .collapse{
background-color: #f3f3f3;
}
/* -----------------------------
.table-gewerbe .show{
animation: scale-in-center 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

@-webkit-keyframes scale-in-center {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
  }
}
@keyframes scale-in-center {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
  }
}
-------------------*/

.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;
}

.grundrissbox-link span {
position: relative;
}

.grundrissbox-link span::after{
content: " →";
display: inline-block;
text-decoration: none;
position: absolute;
left: 25px;
top: -6px;
width: 2em;
z-index: 2;
}

@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: var(--clr2);
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;
}

#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);
}

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

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

/* -------- Wohnen ---------------*/
#wohnen-ausstattung {
background-image: url(../../../images/startseite/wohnen-austattung.avif);
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
padding-bottom: 10em;
}

.wohnen-ausstattung-box {
aspect-ratio: 1 / 1;
background-color: rgba(255, 255, 255,0.9);
}

.wohnen-ausstattung-box h3{
font-size: 1.8rem;
text-transform: uppercase;
color: var(--clr3);
position: relative;
background-color: transparent;
margin-bottom: 1rem;
}

.wohnen-ausstattung-box h3::before{
content: "";
position: absolute;
left: 0px;
top: 2.5rem;
height: 1px;
width: 100%;
background-color: var(--clr3);
}
/* -------- Beispielwohnung ---------------*/

#beispielwohnung .rahmen-box1 h3{
font-size: 1.8rem;
text-transform: uppercase;
color: var(--clr3);
position: relative;
background-color: transparent;
margin-bottom: 1rem;
}

#beispielwohnung .rahmen-box1 h3::before{
content: "";
position: absolute;
left: 0px;
top: 2.5rem;
height: 1px;
width: 100%;
background-color: var(--clr3);
}

#beispielwohnung table .border-bottom {
border-bottom: 1px solid var(--clr3) !important;
}
/* -------- Wohnen Kontakt ---------------*/
#wohnen-kontakt .rahmen-box2 {
background-color: var(--clr3);
border: 1px solid #fff;
aspect-ratio: 1 / 1;
width:96%;
height:96%;
outline: 3rem solid var(--clr3);
padding: 1.6rem;
}


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

@media (max-width: 767.98px) { 
 #wohnen-kontakt .rahmen-box2 h2{
font-size: 1.2rem;
} 
#wohnen-kontakt .rahmen-box2 {
outline: 1rem solid var(--clr3);  
aspect-ratio: unset;
width:99%;
height:99%;
}
}
/* ---------- News ---------- */
#news h2{
font-size: clamp(1.9rem, 0.2385rem + 3.4615vw, 3.7rem);
font-weight: 300;
margin-bottom: clamp(1rem, 0.0769rem + 1.9231vw, 2rem);
}
.mod-articles-items {
list-style-type: none;
padding-left: 0px;
}

@media (max-width: 767.98px) { 
#news h2 {
font-size: 1.4rem;
} 
}  
/* ---------- News auf Startseite---------- */
#news .mod-articles-title a {
  color: var(--clr3);
  font-weight: 600;
}
#news .article-intro-image {
  margin-block: 1.2rem;
}
.mod-articles-item-content {
  height: 100%;
}

.mod-articles-items li  {
position: relative;
}


.mod-articles-items li div.readmore {
position: absolute;
bottom: -20px;
padding-top: 2rem;
}

/* ---------- News auf Newsseite---------- */
.pagination-wrapper {
  margin-top: 2rem;
}

.pagination-counter {
  font-size: 1rem;
}

.sp-module .sp-module-title {
color: var(--clr3); 
font-weight: 600 !important;
}

#sp-component .blog div.row .col-md-4{
margin-bottom: 30px;
}
#sp-component .blog div.row .article{
position: relative;
height: 100%;
}
#sp-component .article-list .article {
background-color: #fafafa;
}

#sp-component .blog div.row .article .article-body div.readmore{
position: absolute;
bottom: 10px;
}

.article-list .article .article-header h2 a{
font-weight: 500;   
color: var(--clr3);

}

.readmore a{
color: var(--clr1);
font-size: 16px;
font-weight: 500;
background-color: none;
text-decoration: underline;
}
.readmore a:hover {
color: #000000;
}

.article-list .article .readmore a {
  color: var(--clr1);
  font-weight: 500;
}
/* ---------- Galerie ---------- */

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

.flickity-button {
background: hsla(0, 100%, 50%, 0.75) !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 Google Karte ------------ */
.google-maps {
overflow:hidden;height:100%;width:100%; margin-bottom:10px;  
}
#gmap_canvas {
height:100%;width:100%; 
}
@media (max-width: 767.98px) { 
.google-map {
height:400px;
}
#gmap_canvas {
height:400px; 
}
}
/* -------------------------- Footer  ---------------------------- */
#sp-footer .container-inner {
  padding: 30px 0px 0px 0px;
}

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

.footer-button {
color: #fff;
background-color: var(--clr3);
line-height: normal;
padding: 8px 12px;
margin-right: 1rem;
align-self: button;
}

.footer-button:hover {
color: #fff !important;
background-color: var(--clr1);
}



.footer-logo {
max-width: 200px;
  }