html {
box-sizing: border-box;
}
p {
font-family: 'DM Sans', sans-serif;
}
*, *:after, *:before {
box-sizing: border-box;
}
/* HANDY HANDY HANDY */
@media (max-width: 679px) {
.projekte {
column-count: 2;
column-gap: 40px;
}
.text {
display: flex;
flex-direction: column;
}
.year {
font-size: 20px;
font-family: DM Sans;
font-weight: lighter;
padding: 0 0 40px 0;
}
.projektinfos {
display: none;
}
.mehr {
font-family: DM Sans;
font-weight: normal;
font-size: 25px;
}
.beschreibung {
font-size: 4vw;
font-family: DM Sans;
font-weight: normal;
padding-bottom: 10%;
}
.portrait {
position: relative;
width: 100%;
}
.portrait--inaktiv {
position: absolute;
width: 100%;
opacity: 0;
}
.portrait--aktiv {
position: absolute;
width: 100%;
z-index: -1;
}
.title__title {
font-size: 20px;
font-family: DM Sans;
font-weight: bold;
}
.title__title--klein {
font-size: 15px;
font-family: DM Sans;
font-weight: bold;
}
.title__title--extraklein {
font-size: 10px;
font-family: DM Sans;
font-weight: bold;
}
.title__sprachen__sprache {
color:black;
font-size: 25px;
font-family: DM Sans;
font-weight: normal;
cursor: pointer;
}
.title__sprachen__sprache:hover {
color:black;
font-size: 25px;
font-family: DM Sans;
font-weight: normal;
font-style: italic;
cursor: pointer;
}
.menue__sprachen__sprache {
font-size: 25px;
color:white;
font-family: DM Sans;
font-weight: normal;
}
.menue__sprachen__sprache:hover {
font-size: 25px;
color:white;
font-family: DM Sans;
font-weight: normal;
font-style: italic;
}
.pfeil {
font-size: 50px;
font-family: DM Sans;
font-weight: normal;
position: absolute;
left: 20px;
top: 30px;
}
.pfeile {
position: fixed;
display: flex;
justify-content: space-between;
top: 40vh;
left: 10px;
right: 10px;
font-size: 50px;
font-family: DM Sans;
font-weight: normal;
}
.bilder__spalte {
padding: 5%;
}
.bilder__spalte--1-4 {
width: 50%;
}
.bilder__spalte--2-4 {
width: 100%;
}
.bilder__spalte--3-4 {
width: 50%;
}
.bilder__spalte--4-4 {
width: 100%;
}
.bilder__spalte--1-3 {
width: 100%;
}
.bilder__spalte--1-3--gross {
padding-left: calc(100% * 2/8);
padding-right: calc(100% * 2/8);
padding-bottom: calc(100% * 1/8);
}
.bilder__projekt {
width: 100%;
}
.bilder__projekt--zentriert {
/* padding: 0 300px 300px 300px; */
padding-left: auto;
padding-right: auto;
width: 100%;
}
.video-container--typotität {
display: block;
margin-left: auto;
margin-right: auto;
margin-bottom: 80px;
width: 100%;
height: 100%;
}
}
/* DESKTOP DESKTOP DESKTOP */
@media (min-width: 680px) {
.projekte {
column-count: 3;
column-gap: 40px;
break-inside: avoid-column;
}
.text {
display: flex;
flex-direction: row;
align-items: baseline;
}
.year {
font-size: 20px;
font-family: DM Sans;
font-weight: lighter;
white-space: nowrap;
}
.mehr {
display: none;
font-family: DM Sans;
font-weight: normal;
font-size: 20px;
}
.beschreibung {
font-size: 1.6vw;
font-family: DM Sans;
font-weight: normal;
padding: 0px 0px 160px 80px;
}
.portrait {
position: relative;
display: inline-block;
width: calc(100% * 10/10);
margin: 0 0 10px 0;
}
.portrait--inaktiv {
position: absolute;
width: calc(100% * 10/10);
padding-left: calc(100% * 0.8/10);
padding-right: calc(100% * 0.8/10);
}
.portrait--inaktiv:hover {
opacity: 0;
}
.portrait--aktiv {
position: absolute;
width: calc(100% * 10/10);
padding-left: calc(100% * 0.8/10);
padding-right: calc(100% * 0.8/10);
z-index: -1;
}
.title__title {
font-size: 35px;
font-family: DM Sans;
font-weight: bold;
}
.title__title--klein {
font-size: 35px;
font-family: DM Sans;
font-weight: bold;
}
.title__title--extraklein {
font-size: 35px;
font-family: DM Sans;
font-weight: bold;
}
.title__sprachen__sprache {
color:black;
font-size: 20px;
font-family: DM Sans;
font-weight: normal;
cursor: pointer;
}
.title__sprachen__sprache:hover {
color:black;
font-size: 20px;
font-family: DM Sans;
font-weight: normal;
font-style: italic;
cursor: pointer;
}
.menue__sprachen__sprache {
font-size: 20px;
color:white;
font-family: DM Sans;
font-weight: normal;
}
.menue__sprachen__sprache:hover {
font-size: 20px;
color:white;
font-family: DM Sans;
font-weight: normal;
font-style: italic;
}
.pfeil {
font-size: 35px;
font-family: DM Sans;
font-weight: normal;
position: absolute;
left: 20px;
top: 40px;
}
.pfeile {
position: fixed;
display: flex;
justify-content: space-between;
top: 40vh;
left: 10px;
right: 10px;
font-size: 35px;
font-family: DM Sans;
font-weight: normal;
}
.bilder__spalte {
padding: 20px;
}
.bilder__spalte--1-4 {
width: 25%;
}
.bilder__spalte--2-4 {
width: 50%;
}
.bilder__spalte--3-4 {
width: 75%;
}
.bilder__spalte--4-4 {
width: 100%;
}
.bilder__spalte--1-3 {
width: 33.33%;
}
.bilder__spalte--1-3--gross {
padding-bottom: calc(100% * 1/8);
}
.bilder__projekt {
width: 100%;
}
.bilder__projekt--zentriert {
/* padding: 0 300px 300px 300px; */
padding-left: calc(100% * 1/8);
padding-right: calc(100% * 1/8);
padding-bottom: calc(100% * 1/8);
width: 100%;
}
.bilder__projekt--klein {
padding-left: calc(100% * 2/20);
padding-right: calc(100% * 2/20);
padding-bottom: calc(100% * 2/20);
padding-top: calc(100% * 2/20);
}
.video-container--typotität {
display: block;
margin-left: auto;
margin-right: auto;
margin-bottom: 80px;
width: 100%;
height: 100%;
}
.contact {
display: flex;
flex-direction: row;
}
}
/* .background en {
background-color:black;
margin: 40px 40px 10px 40px;
} */
.click--click {
height: 100vh;
width: 100%;
margin: 0;
position: absolute;
z-index: 1;
opacity: 0;
}
.click {
height: 100vh;
width: 100%;
margin: 0;
position: absolute;
}
.teaser {
height: 100vh;
width: 100%;
margin: 0;
}
.menue {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: baseline;
}
.menue__name {
margin: 0px 0 20px 0;
font-size: 35px;
color:white;
font-family: DM Sans;
font-weight: bold;
}
.link {
text-decoration: none;
color: black;
}
.menue__name:hover {
margin: 0px 0 20px 0;
font-size: 35px;
color:white;
font-family: DM Sans;
font-weight: bold;
font-style: italic;
}
.menue__sprachen {
margin: 0px 0 20px 0;
display: flex;
flex-direction: column;
}
.projekte__projekt {
position: relative;
display: flex;
align-items: center;
justify-content: center;
break-inside: avoid-column;
}
.projekte__projektbild {
width: 100%;
padding: 20px 0 20px 0;
}
.link__homepage {
position: absolute;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
}
.projekte__projektname {
position: absolute;
display: flex;
text-align: center;
font-family: DM Sans;
font-weight: normal;
font-size: 2vw;
color: white;
z-index: -1;
}
.projekte__projektbild--aktiv {
position: absolute;
opacity: 1;
width: 100%;
}
.projekte__projektbild--inaktiv:hover {
opacity:0;
}
.body {
margin: 40px 80px 10px 80px
}
.title {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: baseline;
}
.title__sprachen {
margin-right: -65px;
}
.title__hallo {
font-size: 35px;
font-family: DM Sans;
font-weight: bold;
padding: 0 0 40px 0;
}
.title__hallo--pdf {
font-size: 35px;
font-family: DM Sans;
font-weight: bold;
padding: 0px;
}
.themen {
font-size: 20px;
font-family: DM Sans;
font-weight: lighter;
padding: 0 0 40px 0;
margin: -20px 0 0 0px;
}
.dozenten {
font-size: 20px;
font-family: DM Sans;
font-weight: lighter;
padding: 0 0 40px 0;
}
.freizeit {
padding: 40px 0 0 0;
}
.skills {
font-family: DM Sans;
font-size: 20px;
font-weight: normal;
width: 50%;
}
.sprachkenntnisse {
padding: 20px 0 20px 0;
}
.kenntnisse {
padding: 20px 0 20px 0;
}
.grundkenntnisse {
padding: 20px 0 20px 0;
}
.telefon a:link, a:visited{
padding: 20px 0 20px 0;
text-decoration: none;
color: black;
}
.bilder {
display: flex;
flex-wrap: wrap;
flex-direction: row;
align-items: center;
margin: 0 -20px;
}
.pfeile__rechts {
padding: 10px;
}
.pfeile__links {
padding: 10px;
}
body .en,
body .de {
display: none;
}
body.en .en,
body.de .de {
display: block;
}
.background {
background-color:black;
margin: 40px 40px 10px 40px;
}
.pdf a:link, a:visited{
text-decoration: none!important;
color: black;
font-size: 20px;
font-family: DM Sans;
font-weight: lighter;
}
.blink_me {
animation: blinker 1s linear infinite;
font-size: 20px;
font-family: DM Sans;
font-weight: lighter;
cursor: pointer;
}
.blink_me:hover {
font-size: 20px;
font-family: DM Sans;
font-weight: lighter;
cursor: pointer;
font-style: italic;
}
@keyframes blinker {
50% {
color: palevioletred;
}
}
.email {
padding: 20px 0 20px 0;
text-decoration: none;
color: black;
}
.email:hover {
padding: 20px 0 20px 0;
text-decoration: none;
color: black;
font-style: italic;
}
.video-container{
width: 100%;
height: 100vh;
position: relative;
display: block;
overflow: hidden;
}
.video {
position: absolute;
top: 50%;
left: 50%;
width: 100vw;
height: 100vh;
transform: translate(-50%, -50%);
}
@media (min-aspect-ratio: 16/9) {
.video-container iframe {
/* height = 100 * (9 / 16) = 56.25 */
height: 56.25vw;
}
}
@media (max-aspect-ratio: 16/9) {
.video-container iframe {
/* width = 100 / (9 / 16) = 177.777777 */
width: 177.78vh;
}
}