:root {
    /* typography */
    --text-xxl: 2.7vw;
    --text-xl: 3.7rem;
    --text-l:2.4em;
    --text-m: 1.8rem;
    --text-sm: 1.4rem;
    --text-s: 1.2rem;
    --text-xs: 0.92rem;

    --abstand-xs:-40px;
    --abstand-s:28px;
	--abstand-m:70px;
	--abstand-l:100px;
    --abstand-xl:160px;

    --maincolor-rot: #d60b52;
    --maincolor-drot: #D00B50;
    --maincolor-hellgrau: #eeeeee;
    --maincolor-mittelgrau: #e0dfdd;
    --maincolor-grau: #4E4A47;
}

@media(max-width: 1024px){
  :root {
    --text-xxl: 2.0rem;
    --text-xl: 2.3rem;
    --text-l: 1.6rem;
    --text-m: 1.2rem;
    --text-sm: 1.1rem;
    --text-s: 1rem;
    --text-xs: 0.9rem;

    --abstand-xs:-40px;
    --abstand-s:10px;
    --abstand-m:50px;
	--abstand-l:70px;
    --abstand-xl:120px;
  }
}
@media(max-width: 768px){
  :root {
    --abstand-xs:-40px;
    --abstand-s:5px;
    --abstand-m:40px;
	--abstand-l:60px;
    --abstand-xl:100px;
  }
}

@media(max-width: 640px){
  :root {
    --text-xxl: 1.6rem;
    --text-xl: 1.6rem;
    --text-l: 1.4rem;
    --text-m: 1.1rem;
    --text-sm: 1.0rem;
    --text-s: 0.98rem;
    --text-xs: 0.85rem;

    --abstand-xs:0px;
    --abstand-s:10px;
    --abstand-m:30px;
	--abstand-l:50px;
    --abstand-xl:80px;
  }
}



* {
	line-height:140%;
	margin:0;
	padding:0;
	font-size:16px;
	}

body {
	background: #fff;
  	cursor: auto;
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 400;
  	line-height: 1.5;
  	margin: 0;
    padding: 0;
    color:var(--maincolor-grau);
	}

.grid-container {
    max-width: 100rem;
    }

/**************************/

.weiss, rahmen-layout-1 {
    padding:var(--abstand-s) 0;     
    background: #fff;
    }
.hellgrau, .rahmen-layout-2 {
    padding:var(--abstand-s) 0; 
    background:var(--maincolor-hellgrau);
    }
.grau, .rahmen-layout-3 {
    padding:var(--abstand-s) 0; 
    background:var(--maincolor-grau);
    }
.rot {
    padding:var(--abstand-s) 0; 
    background:var(--maincolor-rot);
    }
.rot *, .grau *{
    color:#fff;
    }

.schmetterling {
    background-image: url(../Images/schmetterling2.svg);
    background-size: 26vw auto;
    background-position:-150px 0;
    background-repeat: no-repeat;
    }
.haus {
    background-image: url(../Images/heimatwerk_animiert2.svg);
    background-size: 53vw auto;
    background-position:-130px 0;
    background-repeat: no-repeat;
    }
.hand {
    background-image: url(../Images/hand.svg);
    background-size: 45vw auto;
    background-position:55vw 65px;
    background-repeat: no-repeat;
    }
.lupe {
    background-image: url(../Images/Lupe_gespiegelt3.svg);
    background-size: 38vw auto;
    background-position: right -13vw top 60px;
    background-repeat: no-repeat;
    }
.werkzeug {
    background-image: url(../Images/werkzeug_animiert2.svg);
    background-size: 45vw auto;
    background-position:right 45px;
    background-repeat: no-repeat;
    }
.people {
    background-image: url(../Images/people_animiert2.svg);
    background-size: 39vw auto;
    background-position: right 15vw top 0;
    background-repeat: no-repeat;
    }
.puzzel {
    background-image: url(../Images/puzzel_animiert2.svg);
    background-size: 56vw auto;
    background-position: right -4vw top 7vw;
    background-repeat: no-repeat;
    }
.pflanze {
    background-image: url(../Images/pflanzen_animiert3.svg);
    background-size: 59vw auto;
    background-position: right -1vw top -2vw;
    background-repeat: no-repeat;
    }
/***************************************/
/******** Teaser Startseite ************/
/**************************************/

.submenupages{
	width:100%;
	padding:0 var(--abstand-s) var(--abstand-m) var(--abstand-s);
	margin:0;
	display:grid;
	grid-template-columns:1fr 1fr 1fr 1fr;
  	gap: var(--abstand-s); 
    }
.item {
    position: relative;
  	height: 200px;
    padding:var(--abstand-s);
    background:var(--maincolor-rot);
    text-align: center;
    -webkit-transition: all .5s ease;
    transition: all .5s ease;
    }
.item:hover {
    background:var(--maincolor-grau);
    -webkit-transition: all .5s ease;
    transition: all .5s ease;
    }
.submenupages .image {
    margin-top:10px;
    max-width: 220px;
    max-height: 70px;
    }
/**************************************/
/****** Menue Wohnungsbestand **********/
/**************************************/

.large-9 .frame-type-menu_subpages ul {
	list-style-type: none;
	width:100%;
	padding:0 0 var(--abstand-m) var(--abstand-s);
	margin:0;
	display:grid;
	grid-template-columns:1fr 1fr 1fr 1fr;
  	column-gap:var(--abstand-s); 
	row-gap:10px; 
	}
.large-3 .frame-type-menu_subpages ul {
	list-style-type: none;
	width:100%;
	padding:0 var(--abstand-s) var(--abstand-m) var(--abstand-s);
	margin:0;
	display:grid;
	grid-template-columns:1fr;
  	column-gap: 0; 
	row-gap:10px; 
	}
.frame-type-menu_subpages ul li {
	margin:3px 0;hyphens:auto;
	}
.frame-type-menu_subpages ul li a{
	display:block;
	padding:4px var(--abstand-s);
    background:var(--maincolor-rot);
	color:#fff;
	}
.frame-type-menu_subpages ul li a:hover, .frame-type-menu_subpages ul li a.active{
	padding:4px var(--abstand-s);
    background:var(--maincolor-grau);
	color:#fff;
	}

.img-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    }

.text {
    position: absolute;
    top: 65%;
    width: 100%;
    color: var(--maincolor-hellgrau);
    text-align: center;
	font-family: AlverataBold;
	font-style: normal;
	font-size:var(--text-m);
    }


a .schalter {
    display: flex;
    flex-direction: column; /* Bild über Text */
    align-items: center;    /* horizontal zentrieren */
    justify-content: center; /* vertikal zentrieren (falls Höhe definiert ist) */
    text-align: center;
    gap: 0.5rem;            /* Abstand zwischen Bild und Text */
    max-width:370px;
    margin:var(--abstand-s) auto;
  	min-height: 200px;
    padding:var(--abstand-m) auto;
    background:var(--maincolor-rot);
    -webkit-transition: all .5s ease;
    transition: all .5s ease;
    }
.schalter img{
   display: block;
    margin-top:var(--abstand-s);
    max-width: 220px;
    max-height: 70px;
    }
.schalter h3{
    color:#fff;
    }
a:hover .schalter {
    background:var(--maincolor-grau);
    -webkit-transition: all .5s ease;
    transition: all .5s ease;
    }


/******** Wohnungsbestand Haeuser und Text **********/

/*.frame-layout-2 .ce-gallery .ce-inner img {
	 margin:0 var(--abstand-s);
	}*/

.image img.image-embed-item{
	margin:0;
	padding:0 var(--abstand-s);
	}

.frame-layout-2 .ce-bodytext {
	background:var(--maincolor-hellgrau);
	padding:20px;
  	margin:-10px var(--abstand-s) var(--abstand-s) var(--abstand-s);
	}

/******** Wohnungsbestand Karte  **********/

.svginside canvas {
    display: block;
    width: 100%;
    height:89vw;
    visibility: hidden;
    vertical-align:top;
	margin-top:var(--abstand-s);
    }


/**************************/
/******** Header **********/
/**************************/

.header {
    -webkit-transition: all 0.5s ease;
 	transition: all 0.5s ease;
	position: fixed;
    margin:0;
  	width: 100vw;	
	background:#fff;
  	height: 110px;
    z-index: 1000;
	}
.scrolled .header{
    -webkit-transition: all 0.4s ease;
 	transition: all 0.4s ease;
    -webkit-box-shadow: 0px 12px 13px -3px rgba(0,0,0,0.38); 
    box-shadow: 0px 12px 13px -3px rgba(0,0,0,0.38);
  	height: 90px;
	}
.abstand {
    height: 110px;
    }
.scrolled .abstand {
    height: 90px;
    }
#logo {
    -webkit-transition: all .5s ease;
    transition: all .5s ease;
    margin:25px 0 auto 0;
    padding:0 var(--abstand-s);
    width:320px;
    opacity: 1;
	}
.scrolled  #logo {
    -webkit-transition: all .5s ease;
    transition: all .5s ease;
    margin-top:15px;
    width:250px;
    opacity: 1;
	}

/******** Sprungmarke fuer Barrierefreiheit *******/

a.unsichtbar {
	font-family: AlverataBold;
	font-style: normal;
	font-size:var(--text-s);
	color:var(--maincolor-rot);
	}
a.unsichtbar:focus {
  	position: absolute;
	color:var(--maincolor-rot);
	width:100%;
	text-align:center;
top:4px;
	}
.unsichtbar:not(:focus) {
  	position: absolute;
  	height: 1px;
  	width: 1px;
  	overflow: hidden;
 	clip: rect(0 0 0 0);
 	clip-path: inset(100%);
  	white-space: nowrap;
	font-family: AlverataBold;
	font-style: normal;
	font-size:var(--text-s);
	color:var(--maincolor-rot);
	z-index:20000;
	}
.scrolled .unsichtbar:not(:focus){
    z-index:10000;

	}


/**************************/
/******** Formatierung ****/
/**************************/

h1 {
    position: relative;
	font-family: AlverataBold;
	font-style: normal;
	font-size:var(--text-xl);
    line-height: 130%;
	}
h2 {
    position: relative;
	font-family: AlverataBold;
	font-style: normal;
	font-size:var(--text-l);
    line-height: 130%;
	}
h3 {
	font-family: AlverataBold;
	font-style: normal;
	font-size:var(--text-m);
	line-height:150%;
	}
h4 {
	font-family: AlverataBold;
	font-style: normal;
	font-size:var(--text-sm);
	line-height:150%;
	}
p, ul.liste li {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 400;
	font-size:var(--text-s);
	line-height:170%;
	}
p a, p a:visited {
	font-size:100%;
    color:var(--maincolor-rot);
    font-weight: 500;
	}
p a:hover, p a:visited:hover {
    color:#000;
    font-weight: 500;
	}
p b, p strong, ul li strong {
    font-weight: 600;
    font-size: 100%;
    }
p.lead {
	display:block;
	font-size:var(--text-s);
    color:#fff;
	color:#fff;
	padding:var(--abstand-s);
	background:var(--maincolor-grau);
	}

main .large-6 ul li {
    color:var(--maincolor-grau);
	font-size:var(--text-s);
    padding: 2px 0 2px 1px;
    line-height:170%;
    }
ol {
	list-style: none; 
  	counter-reset: item; 
  	padding: 0;
	margin:var(--abstand-s);
	}
ol li {
	background:#fff;
	margin:var(--abstand-s) 0;
	padding:var(--abstand-s) var(--abstand-m) var(--abstand-s) var(--abstand-s);
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 400;
	font-size:var(--text-s);
	line-height:170%;
 	counter-increment: item;
 	counter-increment: item;
  	display: grid;
  	grid-template-columns: 2em 1fr; 
	gap:30px;
	}
ol li::before {
  	content: counter(item) ". "; /* Zahl anzeigen */
	color:var(--maincolor-grau);
	font-family: AlverataBold;
	font-style: normal;
	font-size:var(--text-l);
  	text-align: right;
	}
a button, form button, a.klickbutton, a.redbutton, p a.redbutton{
    display: inline-block;
    padding: 15px 25px;
	margin-top:20px;
    color: #fff;
    background: var(--maincolor-rot);
        -webkit-transition: all .5s ease;
    transition: all .5s ease;
    cursor: pointer;
	font-size:var(--text-xs);
	font-family: AlverataBold;
	font-style: normal;
    }
a:hover button, form button:hover, a.klickbutton:hover, a.redbutton:hover, p a.redbutton:hover {
    background:var(--maincolor-grau);
     -webkit-transition: all .5s ease;
    transition: all .5s ease;
    }
a[href^="tel:"] {
  	white-space: nowrap;
	}
table.contenttable {
	border-collapse: separate;
	}
table.contenttable {
	border-collapse: separate;
	}
tbody tr:nth-child(2n) {
  	background-color:#fff!important;
	}
table.contenttable tr td{
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 400;
	font-size:var(--text-s);
	line-height:170%;
	padding:0;
	}
table.contenttable tr td:first-child {
  	width:100px;
	}
/**************************/
/******** Abstaende ********/
/**************************/

.frame-space-before-extra-small {
	margin-top:var(--abstand-xs);
	}
.frame-space-before-small {
  	margin-top:var(--abstand-s);
	}
.frame-space-before-medium {
 	margin-top:var(--abstand-m);
	}
.frame-space-before-large {
	margin-top:var(--abstand-l);
	}
.frame-space-before-extra-large {
	margin-top:var(--abstand-xl);
	}

.frame-space-after-extra-small {
	margin-bottom:var(--abstand-xs);
	}
.frame-space-after-small {
  	margin-bottom:var(--abstand-s);
	}
.frame-space-after-medium {
 	margin-bottom:var(--abstand-m);
	}
.frame-space-after-large {
	margin-bottom:var(--abstand-l);
	}
.frame-space-after-extra-large {
	margin-bottom:var(--abstand-xl);
	}

h1 {
	margin:var(--abstand-m) var(--abstand-s) var(--abstand-s) var(--abstand-s);
	}
h2 {
    margin:var(--abstand-m) var(--abstand-s) var(--abstand-s) var(--abstand-s);
	}
h3 {
	margin:var(--abstand-s) var(--abstand-s) var(--abstand-s) var(--abstand-s);
	}
h4 {
	margin:var(--abstand-s) var(--abstand-s) 3px var(--abstand-s);
	}
h4 + p {
    margin:0 var(--abstand-s) var(--abstand-s) var(--abstand-s);
	}
p, ul.kurzmenu {
	margin:var(--abstand-s) var(--abstand-s) var(--abstand-s) var(--abstand-s);
	}
main .large-6 ul {
    margin:20px 10px 20px calc(var(--abstand-s) + 17px);
    }
main .large-6 ul li ul {
    margin:10px 10px 10px calc(var(--abstand-s) - 7px);
    }
button {
    margin:20px var(--abstand-s) 30px var(--abstand-s);
    }
button.btn.btn-primary {
  	margin-left: 0;
    }
table.contenttable {
	margin:-22px var(--abstand-s) var(--abstand-s) var(--abstand-s);
	}
main img {
	filter: sepia(0.1);
	}
main .ausschnitt img, main .geschaeftsberichte img {
	filter: sepia(0);
	}
/**************************/
/******** Zahlen   ********/
/**************************/
.zahlen {
	width:100%;
	padding:0 var(--abstand-s) var(--abstand-m) var(--abstand-s);
	margin:0;
	display:grid;
	grid-template-columns:1fr 1fr 1fr 1fr;
  	gap: var(--abstand-s);
    }
.zahlen div {
	align-items:center;
    background:var(--maincolor-hellgrau);
	font-size:var(--text-s);
    text-align: center;
    padding:var(--abstand-s) calc(var(--abstand-s) + 10px);
    }
.zahlen div span {
	font-family: AlverataBold;
	font-style: normal;
    color:var(--maincolor-grau);
	font-size:var(--text-xl);
    }

/*******************************************/
/******** Header + Inhaltsbilder   ********/
/*****************************************/

.headerbild {
    position: relative;
    display: inline-block;
    width:100%;
	background:var(--maincolor-mittelgrau);
    }
.headerbild img {
    width: 100vw;
    height: auto;
	opacity:.9;
	mix-blend-mode: multiply;
    }
.large-6 .headerbild  {
    padding: 0 var(--abstand-s);
	background:none;
    }
.large-6 .headerbild img  {
    opacity:1;
	mix-blend-mode: normal;
    }
.large-6 .headerbild .dreieck{
     right: var(--abstand-s);
    }
#overlaytext {
    position: absolute;
    top: 75%;
	width: 90%; 
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    text-align: center;
	z-index:999;
    }
#overlaytext h1 {
    margin: 0 0 10px 0;
    }
#overlaytext h2 {
    margin: 0 0 10px 0;
    }
#overlaytext p {
    margin: 0 var(--abstand-m);
    font-size:var(--text-sm);
    }
.dreieck {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 0;
    height: 0 !important;
  	border-bottom: 10vw solid var(--maincolor-rot);
  	border-left: 16vw solid transparent;
  	z-index: 1;
    }
.headerbild.video .dreieck {
    bottom: 6px;
	}
.dreieck-text {
    position: absolute;
	font-family: AlverataBold;
	font-style: normal;
	color:#fff;
    font-size:1vw;
	line-height:1.3vw;
    text-align: center;
    z-index: 2;
	top: auto;
  	bottom: -8.8vw;
  	right: 12px;
  	width: 9vw;
    }
.dreieck:hover {
    border-bottom: 10vw solid var(--maincolor-grau);
    }
.dreieck-text:hover { 
	color:#fff;
	}

/**************************/
/******** Footer   ********/
/**************************/
footer {
    padding-bottom:var(--abstand-m);
    background: var(--maincolor-hellgrau);
    }
footer p, footer ul.kurzmenu {
	margin:var(--abstand-s) var(--abstand-s) var(--abstand-s) var(--abstand-s);
	}

footer #logofooter {
    max-width: 200px;
    margin:var(--abstand-m) var(--abstand-m) 20px var(--abstand-s);
    }
footer .grid-container .grid-x{
   	display:flex;
    align-items: flex-end;
    }
#back-top img {
    position: fixed;
  	left: 50%;
  	transform: translate(-50%, -50%);
    bottom: 30px;
	width:20px;
	}
footer p a {
	color: var(--maincolor-drot);
	}


/**************************/
/******** Social Media   ********/
/**************************/

.social{
	display:none; /**** ausgeblendet ***/
    position: fixed;
    right: 1vw;
    top:57px;
    height:auto;
    padding:10px 0;
    -webkit-transition: all 0.4s ease;
 	transition: all 0.4s ease;
    }
.social2{
	display:none;  /**** ausgeblendet ***/
    position: relative;
    height:auto;
    padding:20px;
    }
.social a span, .social2 a span{
    display: none;
    }
.social a, .social2 a  {
    display: inline-block;
    width:28px;
    height:25px;
    background-repeat: no-repeat;
    }
.social a.facebook, .social2 a.facebook{
    background-image: url(../Images/facebook.svg);
    background-size: 22px;
    background-position:0 0;
    }
.social a.instagram, .social2 a.instagram {
    background-image: url(../Images/instagram.svg);
    background-size: 22px;
    background-position:0 0;
    }
.scrolled .social{
    top:28px;
    -webkit-transition: all 0.4s ease;
 	transition: all 0.4s ease;
    }


/********************************************/
/******** Team + Aufsichtsratseite   ********/
/********************************************/


.teamcontainer {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 30px;
    margin: 0 auto;
    }
.aufsichtsrat .links .teamcontainer {
    justify-items: end;
  	}
.aufsichtsrat .rechts .teamcontainer   {
	padding-top:var(--abstand-l);
    justify-items: start;
  	}
.team .links .teamcontainer {
    justify-items: end;
  	}
.team .mitte .teamcontainer {
    justify-items: center;
  	}
.team .rechts .teamcontainer   {
    justify-items: start;
  	}
.team .grid-x.zweispalter{
    margin-bottom:30px;
  	}
.image-container {
    position: relative;
    display: inline-block;
    cursor: pointer;
	height: auto!important;
    }
.image-container.hochformat{
    width:70%;
    }
.large-4.mitte .image-container.hochformat{
    width:100%;
    }
.image-hover-wrapper-banner {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 0;
    height: auto!important;
    border-bottom: 64px solid var(--maincolor-rot);
    border-left:104px solid transparent;  /* kürzere Seite rechts */
    z-index: 1;
    font-size: 18px;
    color: #fff;
    }
.image-hover-wrapper-banner span {
    position: absolute;
	top:8px;
    bottom: 20px;
    right: 15px;
    width: 20px;
    font-size: var(--text-l);
    color: #fff;
    }
.info-text {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height:100%;
    background: var(--maincolor-rot);
    color: white;
    padding:5px var(--abstand-s);
    display: none;
    z-index: 1;
    }
.info-text h3 { 
    padding:20px 0 0 0;
    margin:0;
    color:#fff;
    }
.info-text p { 
    padding:0 0 20px 0;
    margin:0;
    color:#fff;
	font-size:var(--text-xs);
    }
.image-container.active .info-text {
    display: block;
    -webkit-transition: all .5s ease;
    transition: all .5s ease;
    }
.image-container.active .image-hover-wrapper-banner { 
    background: var(--maincolor-grau);
    }



@media (max-width: 600px) {
  .team .ce-gallery .ce-inner {
    grid-template-columns: 1fr; /* eine Spalte */
  }

  /* Reihenfolge der Bilder (optional anpassbar) */
  .ce-gallery .ce-inner img:nth-child(1) { order: 2; }
  .ce-gallery .ce-inner img:nth-child(2) { order: 1; }
  .ce-gallery .ce-inner img:nth-child(3) { order: 3; }
  .ce-gallery .ce-inner img:nth-child(4) { order: 4; }
}



/********************************/
/***** Geschaeftsberichte   ********/
/********************************/

.geschaeftsberichte ul.ce-uploads{
    display: grid;
	grid-template-columns:1fr 1fr 1fr 1fr;
  	column-gap: var(--abstand-s); 
  	row-gap: 0; 
    margin: 0 auto;
	}
.geschaeftsberichte ul.ce-uploads li {
    background: var(--maincolor-hellgrau);
	padding:var(--abstand-s) 5px;
	}
.geschaeftsberichte ul.ce-uploads li a{
    display: block;
	width:100%;
	text-align:center;
	}
.ce-uploads img {
	float:none!important;
	padding:10px 0;
	text-align:center;
   -webkit-transition: all .4s ease;
    transition: all .4s ease;
	}
.ce-uploads a span {
  	display: block;
 	color: var(--maincolor-rot);
	font-family: AlverataBold;
	font-style: normal;
	font-size:var(--text-s);
	margin-top:10px;
	margin-bottom:10px;
	}
.ce-uploads a:hover span {
 	color: var(--maincolor-grau);
	}
.ce-uploads a:hover img {
	scale:1.05;
   -webkit-transition: all .4s ease;
    transition: all .4s ease;
	}
/*********************************/
/******** Mieterzeitung   ********/
/********************************/

.mieterzeitung .teamcontainer {
    display: grid;
	grid-template-columns:1fr 1fr 1fr 1fr;
  	column-gap: var(--abstand-m); 
  	row-gap: var(--abstand-m); 
    margin: 0 auto;
	}
.mieterzeitung .teamcontainer .image-container .info-text {
	padding:20px 10px 20px 12px !important;
	}
.mieterzeitung .teamcontainer .image-container .info-text p {
   	font-size:var(--text-s) !important;
	}
.mieterzeitung .teamcontainer .image-container .info-text ul {
   	font-size:var(--text-s) !important;
	}
.mieterzeitung .teamcontainer .image-container .info-text ul li {
   	hyphens:none;
	}
.mieterzeitung .teamcontainer .image-container .info-text p a {
	position:absolute;   
	bottom:var(--text-s);
	left:20px;
	background:#fff;
	padding:5px 10px;	
	font-size:var(--text-s) !important;
	font-family: AlverataBold;
	font-style: normal;
	font-size:var(--text-s);
	}
.mieterzeitung-einzel .image-container .info-text p a{
	position:absolute;   
	bottom:calc(var(--abstand-m) + 30px);
	left:calc(var(--abstand-m) + 1px);
	background:#fff;
	padding:5px 10px;	
	font-size:var(--text-s) !important;
	font-family: AlverataBold;
	font-style: normal;
	font-size:var(--text-s);
	}
.mieterzeitung-einzel .image-container .info-text h3{
	margin:var(--abstand-m) ;
	}
.mieterzeitung-einzel .image-container .image-hover-wrapper-banner {
  	position: absolute;
  	bottom: 0;
  	right: 0;
  	width: 0;
  	height: auto !important;
  	border-bottom: 10vw solid var(--maincolor-rot);
  	border-left: 16vw solid transparent;
  	z-index: 1;
  	font-size: 18px;
  	color: #fff;
	}
.mieterzeitung-einzel .image-container .image-hover-wrapper-banner span {
  	top: auto;
  	bottom: -10vw;
  	right: 15px;
  	width: 2vw;
	}

/**************************/
/******** Formular   ********/
/**************************/

form {
    margin:0;  
    padding: 0 var(--abstand-s) var(--abstand-s) calc(var(--abstand-s) + 10px);
	color:var(--maincolor-grau);
    }
form h2 {
	margin: var(--abstand-s) var(--abstand-s) var(--abstand-s) 0;
	}
fieldset {
	column-count: 2;
  	column-gap: var(--abstand-s);   
	}
fieldset legend{
	display:none;
	}
form label, .form-check-label span{
	font-size:var(--text-s);
	color:var(--maincolor-grau);
	}
form [type="checkbox"] label, [type="radio"] {
    display: inline-block;
	}   
form [type="checkbox"], [type="radio"] {
    margin: 0 0 0;
    margin-right: 8px;
	}

input::placeholder {
  	color: var(--maincolor-grau);
	font-size:var(--text-xs);
	}
[type='text'], [type='password'], [type='date'], [type='datetime'], [type='datetime-local'], [type='month'], [type='week'], [type='email'], [type='number'], [type='search'], [type='tel'], [type='time'], [type='url'], [type='color'], [type='select'],
textarea, select {
  display: block;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  width: 100%;
  margin: 0 0 1rem;
  padding: 0 10px;
  border: 1px solid var(--maincolor-grau);
  border-radius: 0;
  background-color: #fff;
  -webkit-box-shadow: none !important;
          box-shadow: none !important;
  font-family: inherit;
    font-size:var(--text-s);
  font-weight: normal;
  line-height: 1.5;
  color: var(--maincolor-grau);
    -webkit-transition: all 0.4s ease;
 	transition: all 0.4s ease;
}
[type='text']:focus, [type='password']:focus, [type='date']:focus, [type='datetime']:focus, [type='datetime-local']:focus, [type='month']:focus, [type='week']:focus, [type='email']:focus, [type='number']:focus, [type='search']:focus, [type='tel']:focus, [type='time']:focus, [type='url']:focus, [type='color']:focus,
  textarea:focus, select:focus {
    outline: none;
    border: 1px solid var(--maincolor-rot);
    -webkit-box-shadow: none !important;
            box-shadow: none !important;
    -webkit-transition: all 0.4s ease;
 	transition: all 0.4s ease;
    }
#schadensformular-370-imageupload-1, #schadensformular-370-imageupload-2, #schadensformular-370-date-1 {
	background-color: #fff;
 	padding: 8px;
  	border: 1px solid var(--maincolor-grau);
	border-radius: 0;
	}
.form-group {
	display:block;
	}
textarea { 
    min-height: 200px;
    }
#c372 p {
	margin:0;
	hyphens:auto;
	}
#schadensformular-370-captcha-1, #kontaktformular-320-captcha-1 {
    width:250px;
	}
select:not([multiple]) {
  	padding-right: 20px;
	}

/**********************************************/

@media only screen and (max-width: 1400px)  {

.mieterzeitung .teamcontainer {
  	grid-template-columns: 1fr 1fr 1fr;
  	column-gap: var(--abstand-m);
  	row-gap: var(--abstand-m);
	}
}

/**********************************************/

@media only screen and (max-width: 1320px)  {

.info-text { 
	padding: 5px 5px;
	}
.info-text h3 {
  	padding: 5px 0 0 0;
	}
.info-text p {
  	padding: 0 0 8px 0;
	}	
h2 br {
	display:none;
	}
}

/**********************************************/

@media only screen and (max-width: 1200px)  {
    
.large-9 .frame-type-menu_subpages ul {
	grid-template-columns:1fr 1fr 1fr;
  	column-gap: var(--abstand-s); 
	}
.large-3 .frame-type-menu_subpages ul {
	grid-template-columns:1fr;
  	 	column-gap: var(--abstand-s); 
	}
.image-container.hochformat {
  	width: 100%;
	}
.geschaeftsberichte ul.ce-uploads{
	grid-template-columns:1fr 1fr 1fr;
	}
.info-text p {
  	padding: 0 0 8px 0;
	line-height:130%;
	}
footer .grid-container .grid-x {
  	align-items: flex-start;
	}
}

/**********************************************/

@media only screen and (max-width: 1024px)  {

#logo, .scrolled  #logo {
    margin:15px 0 auto 0;
    padding:0 var(--abstand-s);
    width:210px;
	}
.scrolled .social{
     top:57px;
    }
.header, .scrolled .header, .abstand, .scrolled .abstand {
  	height: 125px;
	}
footer p, footer ul.kurzmenu{
	margin:var(--abstand-s) var(--abstand-s) var(--abstand-s) var(--abstand-s);
	}
footer #logofooter {
    margin:var(--abstand-m) var(--abstand-s) var(--abstand-s) var(--abstand-s);
    }
form {
    padding: 0 var(--abstand-s) var(--abstand-s) var(--abstand-s);
    }
.text span{
    display: block;
    padding-top:20px;
    }
#overlaytext {
    top: 65%;
	width: 70%; 
    }

.large-9 .frame-type-menu_subpages ul, .large-3 .frame-type-menu_subpages ul {
	grid-template-columns:1fr 1fr 1fr;
  	column-gap: var(--abstand-s); 
	padding: 0 var(--abstand-s) var(--abstand-m) var(--abstand-s);
	}

.teamcontainer .info-text  { 
    padding:var(--abstand-s);
    margin:0;
    }
.teamcontainer .info-text h3 { 
    padding:6px 0 0 0;
    margin:0;
    }
.teamcontainer .info-text p { 
    padding:0 0 5px 0;
    margin:0;
	font-size:var(--text-xs);
	line-height:130%;
    }
.team .rechts .teamcontainer .image-container.querformat, .team .rechts .teamcontainer .image-container.hochformat {
	width:auto;
	}
.team .large-4.rechts .grid-x   {
    display: block !important;  /* nicht flex */
  	}
.team .large-4.rechts .teamcontainer   {
  	display: block !important;  /* nicht flex */
    column-count: 2!important;         /* 2 Spalten */
    column-gap: 30px;        /* Abstand zwischen den Spalten */
  	margin-top:30px;
  	}
.team .large-4.rechts .teamcontainer .image-container {
	break-inside: avoid;     /* verhindert, dass Bilder zerstückelt werden */
  	margin-bottom: 20px;     /* Abstand zwischen den Elementen */
	}
.team .large-4.rechts .teamcontainer img {
  	width: 100%;
  	height: auto;
  	display: block;
	}
.image-hover-wrapper-banner span, .mieterzeitung-einzel .image-container .image-hover-wrapper-banner span {
  	top: 18px;
  	bottom: 20px;
  	right: 10px;
  	font-size: var(--text-xl);
	}
table.contenttable {
	margin:0 var(--abstand-s) var(--abstand-s) var(--abstand-s);
	}
}

/**********************************************/

@media only screen and (max-width: 768px)  {
    
.submenupages{
    grid-template-columns: 1fr 1fr;
	gap:var(--abstand-s);
    }
.zahlen {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    column-gap:var(--abstand-s);
    row-gap:var(--abstand-m);
    }
.item {
  	position: relative;
  	height: 120px;
	}
.text {
    top: 70%;
	}
fieldset {
	column-count: 1;
	}
.geschaeftsberichte ul.ce-uploads{
	grid-template-columns:1fr 1fr;
	}
.mieterzeitung .teamcontainer {
  	grid-template-columns: 1fr 1fr;
  	column-gap: var(--abstand-m);
  	row-gap: var(--abstand-m);
	}
p, ul.liste li {
	hyphens:auto;
	}
.dreieck {
  	border-bottom: 14vw solid var(--maincolor-rot);
  	border-left: 25vw solid transparent;
    }
.dreieck-text {
    font-size:1.5vw;
	line-height:1.5vw;
  	bottom: -12vw;
  	right: 6px;
  	width: 13vw;
    }
.dreieck:hover {
    border-bottom: 14vw solid var(--maincolor-grau);
    }

}

/**********************************************/

@media only screen and (max-width: 640px) {

.dreieck { 
	display:none;
	}
.submenupages{
    grid-template-columns: 1fr;
	column-gap:var(--abstand-s);
    row-gap:var(--abstand-m);
    }
.zahlen {
    grid-template-columns: 1fr;
    }
.large-9 .frame-type-menu_subpages ul, .large-3 .frame-type-menu_subpages ul {
	grid-template-columns:1fr 1fr;
  	column-gap: var(--abstand-s); 
	}
.team .grid-x.zweispalter{
    margin-bottom:0;
  	}
.team .grid-x.zweispalter div.large-6, .team .large-4.links .teamcontainer {
    margin-bottom:30px;
  	}
.team .large-4.rechts .teamcontainer {
    column-count: 1 !important;
  	}

.image-hover-wrapper-banner span, .mieterzeitung-einzel .image-container .image-hover-wrapper-banner span {
  	top: 15px;
  	bottom: 20px;
  	right: 10px;
  	font-size: 2.5rem;
	}
#overlaytext {
    top: 70%;
    width: 90%;
  	}
#overlaytext h1 {
  	margin: 0;
	}	
.svginside {
    display: none;
    }
.schmetterling, .haus, .hand, .lupe, .werkzeug, .people, .puzzel, .pfanze{
    background-image: none;
    }
 .mieterzeitung .teamcontainer {
    row-gap: var(--abstand-m);
  }
main .large-6 ul li ul {
    margin:10px 10px 10px calc(var(--abstand-s) + 10px);
    }
.image-hover-wrapper-banner, .mieterzeitung-einzel .image-container .image-hover-wrapper-banner {
    border-bottom: 64px solid var(--maincolor-rot);
    border-left:104px solid transparent;  /* kürzere Seite rechts */
    }
}

/**********************************************/
@media only screen and (max-width: 480px) {
    
.mieterzeitung .teamcontainer {
  	grid-template-columns: 1fr;
  	column-gap: var(--abstand-s);
	}
#overlaytext {
    top: 75%;
  	}
#overlaytext p {
  	display:none;
	}
.geschaeftsberichte ul.ce-uploads {
    grid-template-columns: 1fr;
  }

}

.error.form-text {
    color:red;
}