/* cmsms stylesheet: global modified: Tuesday, December 2, 2025 3:41:30 PM */
@font-face {
font-family: 'Wolf-Sans-Regular';
src:url('https://wohnenergie-hamburg.de/webfonts/Wolf-Sans-Regular.ttf.woff') format('woff'),
url('https://wohnenergie-hamburg.de/webfonts/Wolf-Sans-Regular.ttf.svg#Wolf-Sans-Regular') format('svg'),
url('https://wohnenergie-hamburg.de/webfonts/Wolf-Sans-Regular.ttf.eot'),
url('https://wohnenergie-hamburg.de/webfonts/Wolf-Sans-Regular.ttf.eot?#iefix') format('embedded-opentype'); 
font-weight: normal;
font-style: normal;
}

/* roboto-regular - latin */
@font-face {
  font-display: swap;
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url('https://wohnenergie-hamburg.de/webfonts/roboto-v50-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-600 - latin */
@font-face {
  font-display: swap;
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 600;
  src: url('https://wohnenergie-hamburg.de/webfonts/roboto-v50-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}


/* Global */

body, html {
font-family: 'Roboto', Arial, sans-serif;
font-size: 1.15em;
font-weight: normal;
color: #000000;
line-height: 1.3em;
height: 100%;
width: 100%;
min-width: 320px;
margin: 0px;
padding: 0px;
text-align: left;
background: #fafafa;
-ms-text-size-adjust: none;
-webkit-text-size-adjust: none;
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
}


img { border: 0px; text-decoration: none; border-style: none; border-width: 0; }

a { outline: 0; -moz-outline: 0 }
b, strong { font-weight: 700; }
i, em { font-style: italic; }
form { margin: 0px; padding: 0px; }
p { margin: 0px; padding: 0px; }
ul { margin: 0px; padding: 0px; }
li { margin-left: 15px; }
.wh100, #kv img, .tbr img, .tbl img { width: 100%; height: auto; }
.imgrb { border-radius: 20px; }
.white { color: #ffffff !important; }

.cb {
clear: both;
}

.fl {
float: left;
}

.fr {
float: right;
}

.dispb { display: block; }
.dispn { display: none; }

.do { display: inline-block; }
.mo { display: none; }

* {
box-sizing: border-box;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}


/* Headlines */

h1 {
color: #184588;
margin: 0px;
padding: 0px 0px 30px 0px;
font-family: 'Wolf-Sans-Regular', sans-serif;
font-size: 1.6em;
line-height: 115%;
font-weight: normal;
text-align: left;
}

h2 {
color: #184588;
margin: 0px;
padding: 0px 0px 40px 0px;
font-family: 'Wolf-Sans-Regular', sans-serif;
font-size: 1.6em;
line-height: 115%;
font-weight: normal;
text-align: left;
}

h3 {
color: #184588;
margin: 0px;
padding: 0px 0px 15px 0px;
font-family: 'Wolf-Sans-Regular', sans-serif;
font-size: 1.4em;
line-height: 115%;
font-weight: normal;
text-align: left;
}

h4 {
color: #184588;
margin: 0px;
padding: 0px 0px 10px 0px;
font-family: 'Wolf-Sans-Regular', sans-serif;
font-size: 1.3em;
line-height: 115%;
font-weight: normal;
text-align: left;
}

h5 {
color: #184588;
margin: 0px;
padding: 0px 0px 10px 0px;
font-family: 'Wolf-Sans-Regular', sans-serif;
font-size: 1.2em;
line-height: 115%;
font-weight: normal;
text-align: left;
}

h6 {
color: #184588;
margin: 0px;
padding: 0px 0px 10px 0px;
font-family: 'Wolf-Sans-Regular', sans-serif;
font-size: 1.2em;
line-height: 115%;
font-weight: normal;
text-align: left;
}


/* Contact */

#fixedcontact {
display: block;
position: fixed;
width: 100%;
min-height: 130px;
padding: 15px;
text-align: center;
background: rgba(255,255,255,1);
z-index: 125;
border-bottom: 1px solid #184588;
transition: all 300ms ease 10ms;
}

.fcup {
top: -131px;
transition: all 300ms ease 10ms;
}

.fcdown {
top: 0px;
transition: all 300ms ease 10ms;
}

.fcbutton {
display: none;
}



/* Container */

#wrapper {
margin: 0px auto;
padding: 0px;
width: 100%;
background: #fafafa;
overflow: hidden;
}

#header_con {
width: 100%;
height: auto;
position: relative;
background: #ffffff;
}

#header {
width: 100%;
max-width: 1400px;
height: auto;
min-height: 130px;
position: relative;
margin: 0px auto;
padding: 0px 0px 0px 0px;
}

#header_contact a, #fixedcontact a {
font-family: 'Roboto', Arial, sans-serif !important;
color: #283583 !important;
text-decoration: none;
border-radius: 10px;
padding: 0px 10px 0px 10px;
background: #ffffff;
}

#header_contact a:hover, #fixedcontact a:hover {
background: #f0f0f0;
}

#header_contact {
position: absolute;
top: 15px;
right: 160px;
}

.hc_fon {
display: inline-block;
font-size: 2.8em;
line-height: 115%;
font-family: 'Roboto', Arial, sans-serif !important;
color: #283583 !important;
text-decoration: none !important;
border-radius: 10px;
padding: 0px 10px 0px 10px;
background: #ffffff;
}

.hc_mail {
display: inline-block;
font-size: 1.3em;
line-height: 115%;
font-family: 'Roboto', Arial, sans-serif !important;
color: #283583 !important;
text-decoration: none !important;
border-radius: 10px;
padding: 0px 10px 0px 10px;
background: #ffffff;
}

.hc_fon:hover, .hc_mail:hover {
background: #f0f0f0;
}

#logo-top {
position: absolute;
top: 10px;
left: 10px;
width: 100%;
max-width: 340px;
height: auto;
}

#logo-top img {
width: 100%;
height: auto;
}

#main {
width: 100%;
max-width: 1000px;
margin: 0px auto;
padding: 80px 25px 80px 25px;
background: #ffffff;
}

#kv {
position: relative;
display: block;
margin: 0px 0px 0px 0px;
}

#kv_claim {
position: absolute;
z-index: 10;
bottom: 30px;
left: 50%;
transform: translateX(-50%);
width: auto;
white-space: nowrap;
display: inline-block;
padding: 8px 15px 8px 15px;
background: rgba(255,255,255,0.9);
color: #184588;
font-family: 'Wolf-Sans-Regular', sans-serif;
font-size: 2em;
line-height: 110%;
font-weight: normal;
text-align: center;
border-radius: 10px;
}

.tbl {
float: left;
width: 47%;
}

.tbr {
float: right;
width: 47%;
text-align: left;
}


/* Sections */

section {
width: 100%;
height: auto;
padding: 0px 0px 0px 0px;
}

.separator_cc {
width: 100%;
height: auto;
margin: 0px auto;
padding: 60px 0px 60px 0px;
}

.separator {
width: 125px;
height: 2px;
background: #184588;
margin: 0px auto;
padding: 0px;
}


/* Anfahrt + Footer */

#footerimage {
width: 100%;
max-width: 1000px;
height: auto;
margin: 0px auto;
background: #ffffff;
line-height: 0px;
}

#footer a {
color: #ffffff;
text-decoration: underline;
}

#footer a:hover {
color: #ffffff;
text-decoration: underline;
}


#footer {
width: 100%;
height: auto;
position: relative;
background: #283583;
color: #ffffff;
font-size: 100%;
}

#footer-content {
position: relative;
width: 100%;
max-width: 750px;
height: auto;
min-height: 130px;
margin: 0px auto;
padding: 30px 20px 30px 20px;
}

.footer01 {
float: left;
width: 35%;
padding: 0px 40px 0px 0px;
}

.footer02 {
float: left;
width: 65%;
padding: 0px 0px 0px 0px;
}


/* Suche + Lang */

input[type=search] {
-webkit-appearance: none;
-webkit-border-radius: 0;
}

input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-decoration,
input[type=search]::-webkit-search-results-button,
input[type=search]::-webkit-search-results-decoration {
-webkit-appearance: none;
}

#lang {
float: right;
}

#srchtrg {
cursor: pointer;
position: relative;
float: right;
}

#srchtrg:hover {
text-decoration: underline;
}

.searchbox-off {
display: none;
}

.searchbox-on {
z-index: 199;
opacity: 1.0;
height: 25px;
width: 145px;
background: #d6e6e8;
position: absolute;
right: 0px;
top: -3px;
display: block;
-webkit-animation: fadeIn 450ms;
animation: fadeIn 450ms;
}

.search-input {
width: 135px;
height: 20px;
border: 0px;
outline: 0px;
background: #d6e6e8;
color: #00547a;
font-size: 100%;
font-family: 'Roboto', Arial, sans-serif;
margin-left: 5px;
}

::-webkit-input-placeholder {
color: #00547a;
font-size: 100%;
font-family: 'Roboto', Arial, sans-serif;
opacity: 1;
}

:-moz-placeholder { 
color: #00547a;
font-size: 100%;
font-family: 'Roboto', Arial, sans-serif;
opacity: 1;
}

::-moz-placeholder { 
color: #00547a;
font-size: 100%;
font-family: 'Roboto', Arial, sans-serif;
opacity: 1;
}

:-ms-input-placeholder {  
color: #00547a;
font-size: 100%;
font-family: 'Roboto', Arial, sans-serif;
opacity: 1;
}

::input-placeholder {  
color: #00547a;
font-size: 100%;
font-family: 'Roboto', Arial, sans-serif;
opacity: 1;
}






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



}



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

#header {
width: 100%;
max-width: 1400px;
height: auto;
min-height: 130px;
position: relative;
margin: 0px auto;
padding: 130px 0px 0px 0px;
}

#header_contact {
display: none;
}

.fcbutton {
display: block;
position: fixed;
top: -5px;
right: 15%;
width: auto;
height: auto;
padding: 8px 6px 3px 6px;
text-align: center;
text-transform: uppercase;
color: #ffffff;
font-size: 90%;
line-height: 100%;
border-radius: 0px 0px 5px 5px;
background: #184588;
z-index: 100;
cursor: pointer;
transition: all 200ms linear 10ms;
}

.fcbutton:hover {
top: 0px;
}

}



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

body, html {
font-family: 'Roboto', Arial, sans-serif;
font-size: 1.05em;
font-weight: normal;
color: #000000;
line-height: 1.3em;
height: 100%;
width: 100%;
min-width: 320px;
margin: 0px;
padding: 0px;
text-align: left;
background: #fafafa;
-ms-text-size-adjust: none;
-webkit-text-size-adjust: none;
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
}

.do { display: none; }
.mo { display: inline-bloc; }

.hc_fon {
display: inline-block;
font-size: 2em;
line-height: 115%;
margin: 15px 0px 0px 0px;
}

.hc_mail {
display: inline-block;
font-size: 1em;
line-height: 115%;
}

#kv_claim {
position: relative;
z-index: 10;
bottom: auto;
left: auto;
transform: none;
width: 100%;
max-width: 1000px;
margin: 0px auto;
white-space: normal;
display: block;
padding: 10px 20px 10px 20px;
background: rgba(255,255,255,1);
color: #184588;
font-family: 'Wolf-Sans-Regular', sans-serif;
font-size: 2em;
line-height: 110%;
font-weight: normal;
text-align: center;
border-radius: none;
}

.tbl {
float: none;
width: 100%;
margin: 0px 0px 50px 0px;
}

.tbr {
float: none;
width: 100%;
text-align: left;
}

.footer01 {
float: none;
width: 25%;
padding: 0px 0px 20px 0px;
margin: 0px 0px 0px 0px;
}

.footer02 {
float: none;
width: 100%;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
}

}


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

#logo-top {
position: absolute;
top: 20px;
left: 10px;
width: 100%;
max-width: 280px;
height: auto;
}

}


/* Links */


a:link { 
color: #000000;
text-decoration: underline;
transition: all 200ms ease 10ms;
}

a:active { 
color: #000000;
text-decoration: underline; 
transition: all 200ms ease 10ms;
}

a:visited { 
color: #000000;
text-decoration: underline; 
transition: all 200ms ease 10ms;
}

a:hover { 
color: #000000;
text-decoration: underline; 
transition: all 200ms ease 10ms;
}
/* cmsms stylesheet: menu modified: Monday, July 21, 2025 9:08:20 AM */
/* Fader */

@-webkit-keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}

@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}


#menuopener {
width: 60px;
height: 33px;
cursor: pointer;
position: absolute;
top: 50px;
right: 20px;
z-index: 100;
display: block;
}

#burger {
width: 100%;
height: 4px;
background: #9D9D9C;
position: absolute;
top: 15px;
right: 0px;
transition: all 200ms ease 10ms;
}

#burger:before {
content: '';
width: 100%;
height: 4px;
background: #184588;
cursor: pointer;
position: absolute;
top: -14px;
transition: all 200ms ease 10ms;
}

#burger:after {
content: '';
width: 100%;
height: 4px;
background: #184588;
cursor: pointer;
position: absolute;
bottom: -14px;
transition: all 200ms ease 10ms;
}


#menuopener:hover #burger {
background: #184588;
transition: all 200ms ease 10ms;
}

#menuopener:hover #burger:before {
background: #184588;
top: -12px;
transition: all 200ms ease 10ms;
}

#menuopener:hover #burger:after {
background: #184588;
bottom: -12px;
transition: all 200ms ease 10ms;
}

.closeX {
position: absolute;
right: 0px;
top: 40px;
width: 60px;
height: 60px;
opacity: 1;
cursor: pointer;
}

.closeX:before, .closeX:after {
position: absolute;
left: 15px;
content: ' ';
height: 50px;
width: 4px;
background-color: #184588;
}
.closeX:before {
transform: rotate(45deg);
}
.closeX:after {
transform: rotate(-45deg);
}

.closeX:hover:before {
transform: rotate(-45deg);
transition: all 500ms ease 10ms;
}
.closeX:hover:after {
transform: rotate(45deg);
transition: all 500ms ease 10ms;
}


.mlopen {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
background: rgba(255,255,255,0.98);
position: fixed;
top: 0px;
right: 0px;
overflow-x: hidden;
overflow-y: auto;
z-index: 1000;
opacity: 1;
transition: all 200ms ease 10ms;
}

.mlclosed {
width: 0px;
height: 100%;
margin: 0px;
padding: 0px;
background: rgba(255,255,255,0);
position: fixed;
top: 0px;
right: -250px;
overflow: hidden;
z-index: 1;
opacity: 0;
transition: all 200ms ease 10ms;
}

.mlopen #mainmenu {
opacity: 1;
transform: scaleX(1);
transition: all 200ms ease 10ms;
}

.mlclosed #mainmenu {
opacity: 0;
transform: scaleX(0);
transition: all 200ms ease 10ms;
}

/* Mainmenu */

#mainmenu {
float: right;
margin: 0px;
width: 250px;
padding: 100px 20px 20px 20px;
position: relative;
color: #000000;
}

#mainmenu ul {
margin: 0px;
padding: 0px;
}

#mainmenu ul ul {
margin: 0px 0px 15px 0px;
padding: 0px;
}

#mainmenu ul li {
list-style-type: none;
margin: 5px 0px 5px 0px;
padding: 0px;
position: relative;
}

#mainmenu ul li a {
font-size: 1.4em;
color: #283583 !important;
text-decoration: none;
border-radius: 10px;
padding: 10px;
margin: 0px;
background: #ffffff;
display: inline-block;
}

#mainmenu ul ul li a {
font-size: 1.1em;
color: #000000;
text-decoration: none;
padding: 5px 0px 5px 0px;
display: inline-block;
}

#mainmenu ul li a:hover {
text-decoration: none;
background: #f0f0f0;
}

#mainmenu li a.menuactive span {
text-decoration: none;
}


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

#mainmenu {
float: right;
margin: 0px;
width: 100%;
text-align: center;
padding: 100px 20px 20px 20px;
position: relative;
color: #000000;
}

}
/* cmsms stylesheet: components modified: Monday, July 21, 2025 6:13:21 PM */
.qrcode { 
width: 70% !important;
height: auto;
margin: 0px auto;
}

.gototop {
position: fixed;
bottom: 17px;
right: 20px;
background: url(https://wohnenergie-hamburg.de/imgs/totop.png) center 12px no-repeat #ffffff;
background-size: 20px auto;
width: 40px;
height: 40px;
border-radius: 20px;
border: 1px solid #184588;
text-align: center;
z-index: 9999;
display: none;
opacity: 0.7;
}

.gototop:hover {
opacity: 1;
}


/* Klickliste */

dl {
margin: 0px;
}

dd { 
display: none;
margin: 0px;
}

dt {
cursor: pointer;
}

dt h3 {
margin: 0px;
padding: 15px 90px 15px 20px;
font-family: 'Roboto', Arial, sans-serif;
font-size: 1.3em;
font-weight: normal;
line-height: 115%;
position: relative;
}

.closed {
color: #184588;
background: #fafafa;
transition: all 200ms ease 10ms;
}

.open {
color: #184588;
background: #ffffff;
transition: all 200ms ease 10ms;
}

.closed .lbh3arr {
display: block;
position: absolute;
top: 22px;
right: 24px;
width: 40px;
height: 24px;
background: url(https://wohnenergie-hamburg.de/imgs/Button_Klicklist.png) no-repeat;
background-size: 40px 24px;
transform: rotate(0deg);
transition: all 200ms linear 10ms;
}

.open .lbh3arr {
display: block;
position: absolute;
top: 22px;
right: 24px;
width: 40px;
height: 24px;
background: url(https://wohnenergie-hamburg.de/imgs/Button_Klicklist.png) no-repeat;
background-size: 40px 24px;
transform: rotate(180deg);
transition: all 200ms linear 10ms;
}

.listbox {
background: #ffffff;
min-height: 28px;
width: 100%;
margin: 0px 0px 20px 0px;
padding: 0px;
display: block;
border-radius: 15px;
border: 1px solid #184588;
overflow: hidden;
}

.listcontent {
margin: 0px;
padding: 30px 20px 30px 20px;
position: relative;
font-size: 100%;
}

.listimg {
float: right;
width: 40%;
max-width: 510px;
height: auto;
margin: 0px 0px 30px 30px;
}


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

dt h3 {
margin: 0px;
padding: 15px 70px 15px 20px;
font-family: 'Roboto', Arial, sans-serif;
font-size: 1.2em;
line-height: 115%;
font-weight: normal;
position: relative;
}

.closed .lbh3arr {
display: block;
position: absolute;
top: 20px;
right: 15px;
width: 30px;
height: 18px;
background: url(https://wohnenergie-hamburg.de/imgs/Button_Klicklist.png) no-repeat;
background-size: 30px 18px;
transform: rotate(0deg);
transition: all 200ms linear 10ms;
}

.open .lbh3arr {
display: block;
position: absolute;
top: 20px;
right: 15px;
width: 30px;
height: 18px;
background: url(https://wohnenergie-hamburg.de/imgs/Button_Klicklist.png) no-repeat;
background-size: 30px 18px;
transform: rotate(180deg);
transition: all 200ms linear 10ms;
}

.listcontent {
margin: 0px;
padding: 20px 20px 20px 20px;
position: relative;
font-size: 100%;
}

.listimg {
float: right;
width: 40%;
max-width: 510px;
height: auto;
margin: 0px 0px 20px 20px;
}

}


/* Buttons */

.button-std {
font-family: 'Roboto', Arial, sans-serif !important;
display: inline-block;
width: auto;
height: 40px;
line-height: 40px;
border-radius: 10px;
background: #184588;
border: 1px solid #184588;
color: #ffffff !important;
text-transform: uppercase;
text-decoration: none !important;
font-size: 110%;
padding: 0px 15px 0px 15px !important;
margin: 0px auto;
cursor: pointer;
transition: all 200ms ease 10ms;
}

.button-std:hover {
background: #ffffff;
color: #184588 !important;
text-decoration: none !important;
transition: all 200ms ease 10ms;
}



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


}




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


}



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


}



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


}


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

.listimg {
float: none;
width: 100%;
max-width: 100%;
height: auto;
margin: 0px 0px 30px 0px;
}

}