html {
box-sizing: border-box;
}
*, *:after, *:before {
box-sizing: border-box;
}
.body {
margin: 0;
}
body .de,
body .en,
body .fr {
display: none;
}
body.de .de,
body.en .en,
body.fr .fr {
display: initial;
}
/* startseite */
.kopfzeile {
position: fixed;
left: 0;
top: 0;
width: 100%;
z-index: 2;
}
@font-face {
font-family: 'euclid-flex';
src: url('web-files/EuclidFlex-Regular-WebXL.woff2') format('woff2');
font-weight: normal;
}
@font-face {
font-family: 'euclid-mono';
src: url('web-files/EuclidMono-Vanguard-WebXL.woff2') format('woff2');
font-weight: normal;
}
.titel {
font-family: 'euclid-mono';
font-weight: normal;
text-transform: uppercase;
margin: 0;
text-align: center;
}
/* .titel:hover {
font-family: 'euclid-mono', serif;
} */
.projekttitel {
font-family: 'euclid-mono';
font-weight: normal;
text-transform: uppercase;
margin: 0;
padding: 50px 10px 0 40px;
}
.sprachumschalter {
cursor: pointer;
}
.info {
font-family: 'euclid-flex';
font-weight: normal;
text-transform: uppercase;
margin: 0;
width: 21.6vw;
padding-left: 10px;
}
.info__knopf {
cursor: pointer;
}
.tab__swipe {
width: calc(100% - 21.6vw);
height: 100%;
}
.tab__swipe-bild {
width: 100%;
height: 100%;
display: block;
}
.tab--uebermich {
position: relative;
z-index: 2;
}
.swiper-button-prev {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0)
}
.swiper-button-prev::after {
content: none !important;
}
.swiper-button-next {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0)
}
.swiper-button-next::after {
content: none !important;
}
.text {
position: absolute;
top: 0;
right: 0;
font-family: 'euclid-flex';
font-weight: normal;
margin: 0;
padding: 15px;
background-color: white;
border-style: solid;
border-width: 2px;
border-right: none;
z-index: 1;
width: 50%;
transform: translateX(100%);
}
.text.aktiv {
transform: translateX(0);
}
.text--uebermich {
font-size: 12pt;
line-height: 1.2;
border: none;
padding: 15px;
padding-top: 50px;
transform: translateX(0%);
position: relative;
background-color: transparent;
}
.ZWEISPALTEN {
display: flex;
width: 100%;
}
.SPALTE {
display: flex;
width: 100%;
}
.navigation {
font-family: 'euclid-flex';
text-transform: uppercase;
display: flex;
justify-content: space-between;
}
/* .link {
color: #7d7d7d;
text-decoration: none;
}
.link:hover {
color: #00d9ff;
text-decoration: none;
} */
.link {
color: #7d7d7d;
text-decoration: none;
display: inline-block;
transition: color 0.3s ease;
}
/* Hover effect */
.link:hover {
color: #00d9ff;
text-decoration: none;
background: linear-gradient(45deg, #ff00cc, #3333ff, #00d9ff, #ff0000);
background-size: 400% 400%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: gradientMove 3s ease infinite;
}
/* Gradient animation keyframes */
@keyframes gradientMove {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
.navigationsliste {
font-family: 'euclid-flex';
text-transform: uppercase;
display: flex;
flex-flow: column;
position: fixed;
left: 30px;
z-index: 0;
}
.navigationsliste:hover {
font-style: 'semi-bold';
}
.projekte {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
margin: 0 -0.3vw 0 -0.3vw;
position: relative;
top: 60px;
z-index: 1;
background-color: white;
}
.projekte__projekt {
padding: 0.3vw;
margin: 0;
object-fit: contain;
vertical-align: top;
max-width: 100%;
}
.projekte__bildbox {
overflow: hidden;
}
.projekte__projekt:hover .projekte__bild {
transform: scale(1.1);
}
.projekte__bild {
transition: all 0.3s;
width: 100%;
display: block;
}
.projekte__projekt__hover {
width: 100%;
margin: 0;
padding: 0.3vw;
}
input:focus, textarea:focus {
outline: none;
}
/* Smartphone */
@media (max-width: 679px) {
.body {
padding: 315px 5px 10px 5px;
}
.body--startseite {
padding: calc(((100vw - 60px) * 0.07 + 270px)) 5px 10px 5px;
}
.body--projekt {
z-index: -1;
padding: 0;
}
.body--uebermich {
z-index: -1;
padding: 0;
}
.projekte__projekt {
width: calc(100% * 6/12);
margin-bottom: 7vw;
padding: 1vw;
}
.projekte__projekt:nth-child(2n) {
margin-top: -7vw;
}
.kopfzeile {
padding: 20px 30px 0 30px;
}
.kopfzeile--projekt {
position: absolute;
left: 0;
top: 0;
width: 100%;
z-index: -1;
}
.kopfzeile--uebermich {
position: absolute;
left: 0;
top: 0;
width: 100%;
z-index: -1;
}
.titel {
font-size: calc((100vw - 60px) * 0.07);
line-height: calc((100vw - 60px) * 0.07);
padding: 0 0 10px 0;
margin: 0 -30px;
}
.projekttitel {
font-size: calc((100vw - 90px) * 0.07);
padding-top: 40px;
}
.projekte {
top: 100px
}
.tab {
margin: 35px 0 0 0;
z-index: 2;
padding: 0;
background-color: white;
border-style: solid;
border-width: 2px;
display: flex;
flex-direction: column;
}
.tab--projekt {
margin-top: calc((100vw - 60px) * 0.035 + 20px);
position: relative;
}
.tab--uebermich {
margin-top: calc((100vw - 60px) * 0.035 + 20px);
position: relative;
}
.bildundinfo {
display: flex;
position: relative;
height: 100%;
overflow: hidden;
flex-direction: column;
}
.x {
width: 25px;
cursor: pointer;
margin: 1.2vw 0 0 1.4vw;
position: absolute;
z-index: 2;
}
.kreuz {
transform: translateX(2000%);
overflow: hidden;
display: none;
}
.tab__bilduebermich {
position: relative;
width: 80%;
padding-top: 40px;
object-fit: cover;
}
.navigationsliste {
top: calc((100vw - 60px) * 0.07);
margin-top: 60px;
}
.navigationsliste--projekt {
position: absolute;
z-index: -1;
}
.tab__swipe {
width: 100%;
height: 100%;
}
.info {
transform: translateX(-100%);
overflow: hidden;
}
.text {
background-color: transparent;
border-style: none;
width: 100%;
transform: translateX(0%);
}
.text--uebermich {
position: relative;
}
.text--projekt {
position: relative;
}
}
/* Tablet */
@media (min-width: 680px) and (max-width: 1199px) {
.body--startseite {
padding: calc(((100vw - 60px) * 0.07 + 270px)) 5px 10px 5px;
}
.body--projekt {
z-index: -1;
}
.body--uebermich {
z-index: -1;
}
.projekte__projekt {
width: calc(100% * 4/12);
margin-bottom: 7vw;
}
.projekte__projekt:nth-child(3n + 2) {
margin-top: -7vw;
}
.kopfzeile {
padding: 20px 30px 0 30px;
}
.kopfzeile--projekt {
position: absolute;
left: 0;
top: 0;
width: 100%;
z-index: -1;
}
.kopfzeile--uebermich {
position: absolute;
left: 0;
top: 0;
width: 100%;
z-index: -1;
}
.titel {
font-size: calc((100vw - 60px) * 0.07);
line-height: calc((100vw - 60px) * 0.07);
padding: 0 0 10px 0;
}
.projekttitel {
font-size: calc((100vw - 300px) * 0.07);
}
.tab {
z-index: 2;
padding: 0;
background-color: white;
border-style: solid;
border-width: 2px;
display: flex;
flex-direction: column;
}
.tab--projekt {
margin-top: calc((100vw - 60px) * 0.035 + 20px);
margin-left: calc((100vw - 60px) * 0.073 + 30px);
position: relative;
}
.tab--uebermich {
margin-top: calc((100vw - 60px) * 0.035 + 20px);
margin-right: calc((100vw - 60px) * 0.073 + 30px);
position: relative;
flex-direction: row;
}
.bildundinfo {
display: flex;
position: relative;
height: 100%;
overflow: hidden;
}
.x {
width: 25px;
cursor: pointer;
margin: 1.2vw 0 0 1.4vw;
position: absolute;
z-index: 2;
}
.kreuz {
width: 25px;
cursor: pointer;
}
.tab__bilduebermich {
object-fit: cover;
width: 50%;
}
.navigationsliste {
top: calc((100vw - 60px) * 0.07);
margin-top: 60px;
}
.navigationsliste--projekt {
position: absolute;
z-index: 2;
}
}
/* Desktop */
@media (min-width: 1200px) {
.body {
padding: 10px 0 0 5px;
}
.body--startseite {
padding: calc(((100vw - 60px) * 0.07 + 270px)) 5px 10px 5px;
}
.body--projekt {
z-index: -1;
}
.body--uebermich {
margin: 0;
padding: 10px 0 0 0;
z-index: -1;
}
.projekte__projekt {
width: calc(100% * 3/12);
margin-bottom: 7vw;
}
.kopfzeile {
padding: 20px 30px 0 30px;
}
.kopfzeile--projekt {
position: absolute;
left: 0;
top: 0;
width: 100%;
z-index: -1;
}
.kopfzeile--uebermich {
position: absolute;
left: 0;
top: 0;
width: 100%;
z-index: -1;
}
.titel {
font-size: calc((100vw - 60px) * 0.07);
line-height: calc((100vw - 60px) * 0.07);
padding: 0 0 10px 0;
}
.projekttitel {
font-size: calc((100vw - 300px) * 0.07);
}
.navigationsliste {
top: calc((100vw - 60px) * 0.07);
margin-top: 60px;
}
.navigationsliste--projekt {
position: absolute;
z-index: 2;
}
.projekte__projekt:nth-child(2n) {
margin-top: -7vw;
}
.tab {
z-index: 2;
padding: 0;
background-color: white;
border-style: solid;
border-width: 2px;
display: flex;
flex-direction: column;
}
.tab--projekt {
margin-top: calc((100vw - 60px) * 0.027 + 20px);
margin-left: calc((100vw - 60px) * 0.07 + 30px);
position: relative;
}
.tab--uebermich {
margin-top: calc((100vw - 60px) * 0.027 + 20px);
margin-right: calc((100vw - 60px) * 0.07 + 30px);
flex-direction: row;
}
.tab__bilduebermich {
object-fit: cover;
width: 50%;
}
.bildundinfo {
display: flex;
position: relative;
height: 100%;
overflow: hidden;
}
.x {
width: 25px;
cursor: pointer;
margin: 1.2vw 0 0 1.4vw;
position: absolute;
z-index: 2;
}
.kreuz {
width: 25px;
cursor: pointer;
}
}