:root {
--lightest: #fefefe;
--semidark: #3e3e3e;
--darkest: #000;
--orange: #F74F45;
}
@font-face {
font-family: 'oswaldsemibold';
src: url(//www.hausnummernull.de/wp-content/themes/hausnummernull/inc/fonts/Oswald-SemiBold.ttf) format('truetype');
font-weight: bold;
font-style: normal;
}
@font-face {
font-family: 'univers';
src: url(//www.hausnummernull.de/wp-content/themes/hausnummernull/inc/fonts/UniversLTStd.otf) format('opentype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'univers';
src: url(//www.hausnummernull.de/wp-content/themes/hausnummernull/inc/fonts/UniversLTStd-Bold.otf) format('opentype');
font-weight: bold;
font-style: normal;
}
body {
font-family: 'univers', Verdana, sans-serif;
overflow-x: clip;
}
h1 {
font-family: 'oswaldsemibold', Verdana, sans-serif;
font-weight: bolder;
font-size: clamp(1vw, 3.2rem, 15vw);
text-transform: none;
color: var(--highlight-color) !important;
line-height: 87.5%;
mix-blend-mode: color-dodge;
width: min-intrinsic; width: -webkit-min-content; width: -moz-min-content; width: min-content; text-align: left;
}
h1.has-text-align-right{
text-align: right;
float: right;
}
h2 {
font-family: 'oswaldsemibold', Verdana, sans-serif;
font-weight: bolder;
font-size: clamp(1vw, 3.2rem, 15vw);
text-transform: uppercase;
}
nav {
position: sticky;
width: 100%;
height: 100px; padding-top: 50px;
-webkit-transition: height 0.5s ease-in-out, top 0.5s ease-in-out, mix-blend-mode 0.5s ease-in-out;
-o-transition: height 0.5s ease-in-out, top 0.5s ease-in-out, mix-blend-mode 0.5s ease-in-out;
transition: height 0.5s ease-in-out, top 0.5s ease-in-out, mix-blend-mode 0.5s ease-in-out;
z-index: 100;
mix-blend-mode: normal;
}
nav.toggled {
mix-blend-mode: normal;
}
nav.scrolled {
top: 0px;
height: 50px;
mix-blend-mode: color-dodge;
}
nav .navigation_container {
position: relative;
max-width: 1280px;
margin: 0 auto;
width: calc(100% - 2.5rem);
padding: 1rem;
}
nav .logo {
display: inline-block;
}
nav .logo a{
text-decoration: none;
}
nav .logo h1{
-webkit-transition: font-size 0.5s ease-in-out, line-height 0.5s ease-in-out;
-o-transition: font-size 0.5s ease-in-out, line-height 0.5s ease-in-out;
transition: font-size 0.5s ease-in-out, line-height 0.5s ease-in-out;
}
nav.scrolled .logo h1{
font-size: clamp(1vw, 1.6rem, 15vw);
}
nav .logo h1:nth-of-type(2) {
line-height: 1.5rem;
}
nav .logo h1:nth-of-type(3) {
line-height: 4rem;
}
nav.scrolled .logo h1:nth-of-type(2) {
line-height: 0.75rem;
}
nav.scrolled .logo h1:nth-of-type(3) {
line-height: 2rem;
} .navigation_content {    
display: block;
position: absolute;
top: -150vh;
left: 0;
background-color: var(--lightest);
height: 110vh;
width: 100vw;
padding: 0.5rem;
padding-top:  calc(10vh + 3rem);
margin-top: -10px;
-webkit-transition: top 0.25s ease-in-out;
-o-transition: top 0.25s ease-in-out;
transition: top 0.25s ease-in-out;
}
nav.toggled .navigation_content {
top: -10vh;
}
.navigation_links li {
display: block;
margin-bottom: 0.5rem;
}
.navigation_links li a{
cursor: pointer;
color: var(--primary-color);
text-transform: uppercase;
text-decoration: none;
font-size: 1.5rem;
opacity: 0.8;
-webkit-transition: font-size 0.5s ease-in-out, opacity 0.2s ease-in-out, color 0.5s ease-in-out;
-o-transition: font-size 0.5s ease-in-out, opacity 0.2s ease-in-out, color 0.5s ease-in-out;
transition: font-size 0.5s ease-in-out, opacity 0.2s ease-in-out, color 0.5s ease-in-out;
}
.navigation_links li a:hover{
opacity: 1;
}
nav.scrolled .navigation_links li a{
font-size: clamp(1vw, 0.8rem, 15vw);
color: var(---primary-color);
}
nav.toggled.scrolled .navigation_links li a{
font-size: clamp(1vw, 1.8rem, 15vw);
} #navigation_hamburger {
position: relative;
float: right;
display: block;
width: 26px;
height: 26px;
cursor: pointer;
z-index: 100;
}
#menu__toggle {
opacity: 0;
}
#navigation_hamburger.toggled .menu__btn > span {
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
#navigation_hamburger.toggled .menu__btn > span::before {
top: 0;
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
#navigation_hamburger.toggled .menu__btn > span::after {
top: 0;
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
.menu__btn {
position: absolute;
top: calc(50% - 4px);
left: 0;
width: 26px;
height: 26px;
cursor: pointer;
z-index: 1;
}
.menu__btn > span,
.menu__btn > span::before,
.menu__btn > span::after {
display: block;
position: absolute;
width: 100%;
height: 2px;
background-color: var(--lightest);
-webkit-transition-duration: .25s;
-o-transition-duration: .25s;
transition-duration: .25s;
}
nav.scrolled .menu__btn > span,
nav.scrolled .menu__btn > span::before,
nav.scrolled .menu__btn > span::after {
background-color: var(--primary-color);
}
nav.toggled .menu__btn > span,
nav.toggled .menu__btn > span::before,
nav.toggled .menu__btn > span::after {
background-color: var(--primary-color);
}
.menu__btn > span::before {
content: '';
top: -8px;
}
.menu__btn > span::after {
content: '';
top: 8px;
}
footer {
position: relative;
display: block;
width: 100%;
height: 2rem;
margin-top: 10rem;
background-color: var(--primary-color);
}
footer .footer_container{
max-width: 1280px;
margin: 0 auto;
width: calc(100% - 2rem);
padding: 0 1rem;
color: var(--lightest);
font-size: 0.7rem;
position: relative;
}
.footer-content {
position: absolute;
top: 50%;
-webkit-transform: translateY(50%);
-ms-transform: translateY(50%);
transform: translateY(50%);
width: calc(100% - 2rem);
}
.footer-year {
display: inline-block;
}
.footer_legal-menu {
position: absolute;
right: 0;
top: 0;
float: right;
}
.footer_legal-menu li {
display: inline-block;
margin-left: 0.5rem;
}
.footer_legal-menu li a {
color: var(--lightest);
text-decoration: none;
-webkit-transition: color 0.25s ease-in-out;
-o-transition: color 0.25s ease-in-out;
transition: color 0.25s ease-in-out;
}
.footer_legal-menu li a:hover {
color: var(--secondary-color);
}
main {
position: relative;
width: 100%;
margin-top: -150px;
overflow-x: clip;
}
main section{
position: relative;
width: 100%;
}
.wp-block-cover__background {
display: none;
}
main section.wp-block-group{
max-width: 1280px;
margin: 0 auto; }
main section.wp-block-group h1 {
-webkit-transform: translateY(3.2rem);
-ms-transform: translateY(3.2rem);
transform: translateY(3.2rem);
z-index: 10;
position: relative;
}
main .wp-block-group__inner-container:first-of-type {
padding-left: 2rem;
padding-right: 2rem;
}
main .wp-block-group__inner-container:first-of-type {
padding-top: calc(100px + 1.9rem);
} main article.single .wp-block-group__inner-container {
padding: 200px 2rem 0 2rem;
min-height: calc(100vh - (200px + 12rem));
}
main article.single h1 {
-webkit-transform: none;
-ms-transform: none;
transform: none;
}
main article.single h1.has-text-align-right {
margin-left: 1rem;
margin-bottom: 1rem;
}
main .wp-block-group__inner-container p {
padding-top: 1rem;
text-align: justify;
line-height: 1.25rem;
}
main .wp-block-group__inner-container a {
font-weight: bold;
text-decoration: none;
cursor: pointer;
font-size: 1rem;
color: var(--highlight-color);
-webkit-transition: color 0.25s ease-in-out;
-o-transition: color 0.25s ease-in-out;
transition: color 0.25s ease-in-out;
}
main .wp-block-group__inner-container a:hover {
color: var(--secondary-color);
}
main .wp-block-group__inner-container img {
padding-top: 1rem;
}
main .wp-block-group__inner-container .wp-block-gallery img {
padding-top: 0;
}
main .wp-block-cover img.wp-block-cover__image-background {
opacity: 0.5;
}
main .wp-block-cover__inner-container {
display: contents;
}
main figure.wp-block-gallery {
gap: 0 !important;
width: 100vw;
position: relative;
left: 50%;
-webkit-transform: translateX(-50%) translateY(1em);
-ms-transform: translateX(-50%) translateY(1em);
transform: translateX(-50%) translateY(1em);
}
main article.single figure.wp-block-gallery {
gap: 0.5rem !important;
}
main figure.wp-block-gallery.laurels {
margin-bottom: 3rem;
}
main figure.wp-block-gallery.laurels img{
height: 150px !important;
width: auto !important;
-o-object-fit: contain !important;
object-fit: contain !important;
-ms-flex-item-align: center !important;
-ms-grid-row-align: center !important;
align-self: center !important;
}
main figure.wp-block-video {
margin-bottom: 3rem;
}
div.wp-block-image {
margin-bottom: 3rem;
}
.push-down {
margin-top: 4rem;
}
main details {
}
main details summary {
font-family: 'oswaldsemibold', Verdana, sans-serif;
font-weight: bolder;
font-size: clamp(1vw, 1.6rem, 15vw);
text-transform: none;
color: var(--highlight-color) !important;
line-height: 87.5%;
text-align: left;
margin-top: 2rem;
list-style: none;
}
main details > summary::marker {
content: "+ ";
margin-right: 0.5rem;
}
main details[open] > summary {
padding-left: 0rem;
}
main details[open] > summary::marker {
display: none;
content: "";
} table, table a {
font-size: 0.75rem !important;
line-height: 1rem !important;
}
table tr{
margin-bottom: 1rem !important;
}
table td{
background-color: white !important;
} .alm-reveal {
position: relative;
display: -ms-grid;
display: grid;
-ms-grid-columns: auto;
grid-template-columns: auto;
grid-gap: 3rem;
width: 100%;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
justify-items: start;
}
li.alm-item::marker {
display: none;
}
li.alm-item {
position: relative;
display: inline-block;
width: 100%;
margin-bottom: 3rem;
}
li.alm-item p{
font-size: 1rem;
width: 100%;
position: relative;
text-align: justify;
}
li.alm-item p.entry-meta{
font-size: 0.8rem;
}
li.alm-item .alm-item-box{
display: block;
width: auto;
position: relative;
padding: 0.5rem; color: var(--primary-color);
margin-top: 0.25rem;
margin-bottom: 0.5rem;
}
li.alm-item .alm-item-box h3{
color: var(--primary-color);
font-size: 1.9rem;
margin-bottom: 0.5rem;
}
li.alm-item .alm-item-box img{
width: 100%;
height: auto;
margin-bottom: 0.5rem;
}
li.alm-item .alm-read-more{
text-align: right;
float: right;
}
.alm-btn-wrap {
height: 1.9rem;
position: relative;
}
.alm-load-more {
position: absolute;
right: 0;
border: none;
background-color: transparent;
color: var(--highlight-color);
font-size: 1.9rem;
cursor: pointer;
font-weight: bold;
-webkit-transition: color 0.2s ease-in-out;
-o-transition: color 0.2s ease-in-out;
transition: color 0.2s ease-in-out;
}
.alm-load-more:hover {
color: var(--secondary-color);
}
.alm-load-more.done {
display: none;
} .wp-block-file {
text-align: center;
}
.wp-block-file .wp-block-file__button {
background-color: var(--secondary-color) !important;
padding: 0.5rem !important;
border-radius: 0 !important;
-webkit-transition: color 0.25s ease-in-out, background-color 0.25s ease-in-out !important;
-o-transition: color 0.25s ease-in-out, background-color 0.25s ease-in-out !important;
transition: color 0.25s ease-in-out, background-color 0.25s ease-in-out !important;
}
.wp-block-file .wp-block-file__button:hover {
background-color: var(--highlight-color) !important;
} main .bg-img-wrapper {
position: absolute;
left: 0;
z-index: -100;
width: 100vw;
height: 50vh;
max-height: calc(200px - 1rem);
}
main .bg-img-wrapper.frontpage {
max-height: 60vw;
}
main .bg-img-wrapper h1{
position: absolute;
bottom: 0;
width: 100%;
display: none;
}
main .bg-img-wrapper img.bg-img {
position: absolute;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover
}
main .bg-img-wrapper.top, main .bg-img-wrapper.top img.bg-img {
top: 0;
}
main .bg-img-wrapper.bottom, main .bg-img-wrapper.bottom img.bg-img {
bottom: 0;
display: none;
}
main .bg-img-wrapper.bottom.frontpage, main .bg-img-wrapper.bottom.frontpage img.bg-img {
display: block;
} .boxzilla {
font-family: 'opensans', Verdana, sans-serif !important;
padding-bottom: 3.2rem !important;
cursor: pointer;
}
.boxzilla h4 {
position: absolute;
font-family: 'oswaldsemibold', Verdana, sans-serif !important;
font-size: clamp(1vw, 3.2rem, 15vw) !important;
text-transform: none !important;
color: var(--highlight-color) !important;
line-height: 87.5% !important;
bottom: -4rem !important;
}
.boxzilla p{
color: var(--lightest) !important;
}
.boxzilla a{
color: var(--highlight-color) !important;
font-weight: bold !important;
}
.boxzilla-close-icon.boxzilla-close-icon {
color: var(--highlight-color) !important;
font-weight: bold !important;
}
.boxzilla.boxzilla-top-right {
margin-right: calc(50vw - 361px / 2) !important;
margin-top: 8rem !important;
}
.boxzilla.boxzilla-bottom-right {
margin-right: 1rem !important;
margin-bottom: 1rem !important;
} @media only screen and (min-width: 48em) { #navigation_hamburger {
display: none;
}
.navigation_content {
top: 0;
left: 0;
background-color: transparent;
height: auto;
width: 100%;
padding: 0;
margin-top: 0;
-webkit-transition: none;
-o-transition: none;
transition: none;
text-align: right;
}
.navigation_links li a{  
color: var(--lightest)
}
nav.scrolled .navigation_links li a{
color: var(--secondary-color);
}
.navigation_links li {  
display: inline-block;
margin-right: 1rem;
margin-bottom: 0.5rem;
}
.alm-reveal {
-ms-grid-columns: 1fr 3rem 1fr;
grid-template-columns: 1fr 1fr;
}
main details {
padding-left: 2rem;
}
main details summary {
transform: translateX(-1rem);
}
main details[open] {
box-shadow: -3px 0 0 var(--highlight-color);
}
table, table a {
font-size: 1rem !important;
line-height: 1.5rem !important;
}
table tr{
margin-bottom: 2rem !important;
}
} @media only screen and (min-width: 80em) {
.boxzilla.boxzilla-top-right {
margin-right: 2rem !important;
margin-top: 8rem !important;
}
.alm-reveal {
-ms-grid-columns: 1fr 3rem 1fr 3rem 1fr;
grid-template-columns: 1fr 1fr 1fr;
}
}