html {
box-sizing: border-box;
}
*, *:after, *:before {
box-sizing: border-box;
}
@font-face {
font-family:'cinetype';
src: url('fonts/GT-Cinetype-Mono.woff2') format('woff2'),
url('fonts/GT-Cinetype-Mono.woff') format('woff');
}
body .de,
body .en,
body .fr {
display: none;
}
body.de .de,
body.en .en,
body.fr .fr {
display: initial;
}
.animation{
width: 96%;
}
.video-container--quadrat{
display: block;
width: 100%;
align-items: middle;
height: 800px;
margin-bottom: 150px;
}
.background {
background-color: rgb(0, 0, 0);
margin: 145px 145px 145px 145px;
font-family: cinetype, sans-serif;
}
.projektbilder {
display: flex;
flex-wrap: wrap;
margin: 0 -15px;
}
.projektbilder__box--50 {
padding: 0 15px 30px 15px;
width: 50%;
}
.projektbilder__box--100 {
padding: 0 15px 114px 15px;
width: 100%;
}
.projektbilder__box--100--zoom {
padding: 0 15px 114px 15px;
width: 100%;
/* transform: scale(2.0); */
}
.projektbilder__box--20 {
padding: 0 15px 25px 15px;
width: 20%;
}
.projektbilder__bild{
width: 100%;
}
.menuleiste {
color: white;
display: flex;
justify-content: space-between;
height: 145px;
text-decoration: none;
}
.menuleiste__aboutme__handy{
display: none;
}
.menuleiste__hover {
display: flex;
align-items: baseline;
}
.menuleiste__hover:hover .menuleiste__menue {
opacity: 1;
transition: 0.4s;
}
.menuleiste__menue {
opacity: 0;
}
.menuleiste__initialen{
font-size: 50px;
}
.menuleiste__link{
font-size: 18px;
margin: 0 10px;
color: white;
text-decoration: none;
position:relative;
cursor: pointer;
}
.menuleiste__link:hover {
text-decoration: underline;
}
nav{
display: flex;
align-items:baseline;
justify-content:flex-start;
}
.menuleiste{
position: fixed;
display: flex;
align-items: baseline;
left: 0;
top: 0;
color: #fff;
background-color: black;
width: 100%;
padding: 65px 145px;
text-decoration-line: none;
}
.menuleiste__name {
box-sizing: border-box;
display: flex; inline-size: 100%;
margin: 0;
text-decoration: none;
color:#fff;
}
.menuleiste:hover .menuleiste__name-inaktiv a{
display: flex;
text-decoration: none;
color:#fff;
font-size: 18px;
justify-content: space-around;
}
.menuleiste:hover .menuleiste__name-aktiv a{
display: flex;
font-size: 0px;
text-decoration: none;
color:#fff;
justify-content: space-around;
}
.höhe{
display: flex;
}
.information__button {
position: fixed;
color: white;
font-size: 18px;
writing-mode: vertical-lr;
top: 145px;
right: 105px;
text-decoration: none;
}
.information__button:hover {
text-decoration: underline;
text-underline-position: under;
/* text-underline-offset: 2px; */
}
.link {
color: white;
text-decoration: none;
}
.project__button {
position: fixed;
color: white;
font-size: 18px;
line-height: 20px;
top: 95px;
right: 235px;
}
.information__pfeil{
position: fixed;
color: white;
font-size: 35px;
line-height: 20px;
top: 95px;
right: 110px;
text-decoration: none;
}
.information__pfeil:hover{
font-size: 40px;
top: 94.5px;
right: 110px;
text-decoration: none;
color: white;
}
.information__pfeil2{
position: fixed;
color: white;
font-size: 35px;
line-height: 20px;
top: 95px;
right: 170px;
text-decoration: none;
}
.information__pfeil2:hover{
font-size: 40px;
top: 94.5px;
right: 170px;
text-decoration: none;
color: white;
}
.information__pfeil__nodeco{
text-decoration: none;
color: #fff;
}
.information__text{
font-family: 'cinetype';
position: fixed;
width: 500px;
height: 100vh;
padding: 0 10px 10px 10px;
top: 135px;
right: 143px;
line-height: 20px;
background-color: rgb(0, 0, 0);
counter-reset: text;
z-index: 1;
font-size: 18px;
line-height: 28px;
margin: 0;
color: white;
display: none;
}
.marginalie {
font-size: 12px;
display: block;
line-height: 10px;
margin-bottom: 25px;
}
.einstieg {
font-size: 18px;
display: block;
line-height: 28px;
margin-bottom: 25px;
}
.information__text.aktiv {
display: block;
padding-left: 20px;
}
.box {
box-sizing: border-box;
transform: rotate(90deg) translateY(calc(-100%));
transform-origin: left top;
position: absolute;
left: 145px;
top: 145px;
margin-right: 145px;
width: 750px;
}
.box__link{
text-decoration: none;
}
.box__link:hover .projekt {
/* border-bottom-color: black; */
}
.box__link:hover .bildbox {
transform: rotate(-90deg) translateX(-50%) translateY(-13px);
transition: 0.4s;
text-decoration: none;
}
.projekt{
margin-top: 120px;
box-sizing: border-box;
display: flex;
border-bottom: 1px solid white;
align-items: flex-end;
font-size: 40px;
color: #fff;
position: relative;
height: 0;
}
.datum{
box-sizing: border-box;
width: 150px;
height: 50px;
font-size: 40px;
}
.name{
box-sizing: border-box;
width: 378px;
height: 30px;
font-size: 18px;
}
.bildbox {
display: flex;
width: 120px;
position: absolute;
transform: rotate(-90deg) translateX(-50%);
right: 0;
transition: 0.4s;
}
.bild {
width: 110%;
padding-bottom: 20px;
background-color: black;
transform: translate(-22px);
align-self:center;
justify-self: center
}
.projekt2{
margin-right: 170px;
color: #fff;
}
.datum2{
box-sizing: border-box;
width: 150px;
height: 50px;
font-size: 40px;
text-decoration: none;
}
.projekt__name {
box-sizing: border-box;
font-size: 18px;
height: 28px;
}
.bild2{
display: flex;
width: 130px;
position: absolute;
transform: rotate(-90deg);
}
.projekt__nodate{
box-sizing: border-box;
display: flex;
align-items: flex-end;
margin-left: 150px;
color: #fff;
}
.name__nodate{
box-sizing: border-box;
height: 30px;
font-size: 18px;
}
.bild__nodate{
display: flex;
width: 130px;
position: absolute;
margin-left: 530px;
margin-top: 65px;
transform: rotate(-90deg);
}
.projekt__nodate2{
margin-left: 150px;
margin-right: 170px;
}
.name__nodate2{
box-sizing: border-box;
width: 378px;
height: 80px;
}
.bild__nodate2{
box-sizing: border-box;
height: 80px;
}
.bild__datum{
display: flex;
width: 130px;
position: absolute;
margin-left: 680px;
margin-top: 65px;
transform: rotate(-90deg);
}
.project__button--about {
position: fixed;
color: white;
font-size: 18px;
line-height: 20px;
top: 95px;
right: 150px;
}
.about__box {
display:flex;
}
.about__bild{
width: 400px;
}
.about__text{
margin-top: 0px;
font-size: 18px;
color: white;
text-align: left;
line-height: 28px;
flex-direction: row;
margin-left: 0px;
margin-bottom: 40px;
}
.nebeninfos{
display: block;
}
.about__programme {
font-size: 18px;
color: white;
line-height: 11.5px;
display: block;
text-align: left;
}
.bild__grafik {
float: left;
width: 321px;
padding: 0px;
margin-top: 10px;
margin-left: 50px;
}
.container {
display: flex;
}
.language{
font-size: 18px;
color: white;
line-height: 11.5px;
display: block;
text-align: left;
margin-bottom: 50px;
}
.email{
font-size: 18px;
color: white;
display: block;
text-align: left;
margin-top: 50px;
}
.information__text__handy{
display: none;
}
.logo{
display: none;
}
.navbar{
display: none;
}
.menu__optionen {
display: none;
}
.bild__grafik__handy{
display: none;
}
.about__programme__handy{
display: none;
}
.menuleiste__link__optionen_3{
text-decoration: none;
color: white;
cursor: pointer;
}
.menuleiste__link__optionen_3:hover{
text-decoration: underline;
text-underline-position: under;
cursor: pointer;
}
.instagram_1{
text-decoration: none;
color: #fff;
}
.instagram_1:hover {
text-decoration: underline;
text-underline-position: under;
}
.border_box {
width: 150px;
border: 1px solid rgb(255, 255, 255);
padding: 15px;
margin-top: 50px;
margin-right: 40px;
text-align: center;
box-sizing: border-box ;
display: block;
text-decoration: none;
color: rgb(255, 255, 255);
cursor: pointer;
margin-bottom: 40px;
}
.border_box:hover{
width: 150px;
border: 3px solid rgb(255, 255, 255);
margin-top: 46px;
margin-right: 40px;
text-align: center;
}
.pdf:hover {
text-decoration: none;
color: rgb(255, 255, 255);
cursor: pointer;
padding: 5px;
}
.container_2 {
display: flex;
}
.border_box {
width: 150px;
border: 1px solid rgb(255, 255, 255);
padding: 15px;
margin-top: 50px;
margin-right: 40px;
text-align: center;
box-sizing: border-box ;
display: block;
text-decoration: none;
color: rgb(255, 255, 255);
cursor: pointer;
}
.border_box:hover{
width: 150px;
border: 3px solid rgb(255, 255, 255);
margin-top: 46px;
margin-right: 40px;
text-align: center;
}
.pdf:hover {
text-decoration: none;
color: rgb(255, 255, 255);
cursor: pointer;
padding: 5px;
}
.container_desktop {
display: flex;
}
.mitte_desktop{
text-align: center;
}
@media (max-width: 1290px) {
.mitte_handy{
text-align: center;
}
.mitte_desktop{
display: none;
}
.box {
box-sizing: border-box;
transform: rotate(90deg) translateY(calc(-100%));
transform-origin: left top;
position: absolute;
left: 145px;
top: 120px;
margin-right: 145px;
width: 750px;
}
.container_desktop {
display: none;
}
.einstieg{
display: none;
}
.video-container--quadrat{
display: block;
width: 100%;
align-items: middle;
height: 500px;
margin-bottom: 25px;
}
.instagram_1{
text-decoration: none;
color: #fff;
font-size: 14px;
}
.instagram_1:hover {
text-decoration: none;
text-underline-position: none;
}
.about__text{
margin-top: 0px;
font-size: 14px;
color: white;
text-align: left;
line-height: 25px;
flex-direction: row;
margin-left: 0px;
margin-bottom: 40px;
}
.background {
background-color: rgb(0, 0, 0);
margin: 145px 30px 30px 30px;
font-family: cinetype, sans-serif;
}
.projektbilder__box--100 {
padding: 0 15px 25px 15px;
width: 100%;
}
.projektbilder__box--20 {
padding: 0 15px 25px 15px;
width: 50%;
}
.information__button {
display: none;
}
.information__pfeil{
position: fixed;
color: white;
font-size: 35px;
line-height: 20px;
top: 95px;
right: 35px;
text-decoration: none;
}
.information__pfeil:hover{
position: fixed;
color: white;
font-size: 35px;
line-height: 20px;
top: 95px;
right: 35px;
text-decoration: none;
}
.information__pfeil2{
position: fixed;
color: white;
font-size: 35px;
line-height: 20px;
top: 95px;
left: 35px;
text-decoration: none;
}
.information__pfeil2:hover{
position: fixed;
color: white;
font-size: 35px;
line-height: 20px;
top: 95px;
left: 35px;
text-decoration: none;
}
.project__button{
background-color: black;
font-size: 16px;
justify-content: center;
color: white;
display: flex;
align-items: center;
left: 0;
top: 33px;
background-color: none;
width: 100%;
padding: 65px 70px;
text-decoration-line: none;
padding-bottom: 12px;
}
.menuleiste{
display: none;
cursor: pointer;
}
.menuleiste__initialen{
font-size: 30px;
align-items: baseline;
cursor: pointer;
}
.menuleiste__initialen{
display: none;
cursor: pointer;
}
.menuleiste__menue{
display:flex;
cursor: pointer;
}
.information__text__handy{
font-size: 16px;
color: white;
display:block;
align-items: left;
width: 100%;
line-height: 26px;
}
.marginalie__handy{
font-size: 11px;
display: block;
line-height: 10px;
margin-bottom: 24px;
}
.einstieg__handy {
font-size: 14px;
display: block;
line-height: 24px;
margin-bottom: 26px;
}
.einstieg__handy__2 {
font-size: 14px;
display: block;
line-height: 24px;
margin-bottom: 25px;
}
.information__text {
display: none;
}
.information__box {
display: none;
}
.logo {
font-size: 30px;
color: white;
display: flex;
align-items: left;
left: 0;
top: 0px;
background-color: none;
padding: 0px 0px;
text-decoration-line: none;
padding-bottom: 0px;
}
.menuleiste__handy{
align-items: baseline;
background-color: black;
position: fixed;
display: flex;
left: 0;
top: 0;
color: #fff;
width: 100%;
padding: 35px 35px 0 35px;
z-index: 1;
padding-bottom: 15px;
cursor: pointer;
}
.menu__optionen{
font-size: 18px;
color: white;
display: flex;
align-items: right;
z-index: 0;
align-items: baseline;
cursor: pointer;
}
.menuleiste__link__optionen_1{
font-size: 35px;
color: white;
text-decoration-line: none;
margin-left: -5px;
margin-right: 10px;
cursor: pointer;
}
.menuleiste__link__optionen_2{
font-size: 14px;
color: white;
text-decoration-line: none;
margin-right: 20px;
margin-left: 10px;
cursor: pointer;
}
.menuleiste__link__optionen_3{
font-size: 14px;
color: white;
text-decoration-line: none;
margin: 10px;
margin-left: 0px;
cursor: pointer;
}
.menuleiste__link__optionen_3:hover{
text-decoration: none;
text-underline-position: none;
}
.menuleiste__link__optionen_4{
font-size: 14px;
color: white;
text-decoration-line: none;
margin: 10px;
cursor: pointer;
}
.menuleiste__link__optionen_5{
font-size: 14px;
color: white;
text-decoration-line: none;
margin-left: 10px;
margin-top: 10px;
margin-bottom: 10px;
}
.menuleiste__aboutme__handy{
font-size: 18px;
color: white;
display: contents;
cursor: pointer;
}
.language{
font-size: 14px;
cursor: pointer;
}
}
@media (max-width: 1600px) {
.container_desktop {
display: none;
}
.mitte_handy{
text-align: center;
}
.bild__grafik__handy {
float: left;
width: 50px;
padding: 0px;
margin-top: 10px;
margin-left: 50px;
font-size: 14px;
color: white;
line-height: 11.5px;
display: block;
text-align: left;
width: 300px;
margin-left: 0px;
}
.about__programme{
display: none;
}
.bild__grafik{
display: none;
}
}
@media (max-width: 800px) {
.projekt__name {
box-sizing: border-box;
font-size: 16px;
height: 28px;
}
.datum{
box-sizing: border-box;
width: 60px;
height: 40px;
font-size: 20px;
margin-bottom: 18px;
transform: rotate(-90deg) translateY(calc(-35%));
}
.datum2{
box-sizing: border-box;
width: 60px;
height: 40px;
font-size: 20px;
margin-bottom: 18px;
transform: rotate(-90deg) translateY(calc(-35%));
}
.projekt__nodate{
box-sizing: border-box;
display: flex;
align-items: flex-end;
margin-left: 63px;
color: #fff;
}
.projekt__nodate2{
margin-left: 63px;
margin-right: 170px;
}
.box {
box-sizing: border-box;
transform: rotate(90deg) translateY(calc(-100%));
transform-origin: left top;
position: absolute;
left: 75px;
top: 100px;
margin-right: 145px;
width: 565px;
}
.bildbox {
display: flex;
width: 90px;
position: absolute;
}
.projekt{
margin-top: 100px;
}
}