html {
box-sizing: border-box;
}
* { margin:0; padding:0;}
*, *:after, *:before {
box-sizing: border-box;
}
body .de,
body .en,
body .fr {
display: none;
}
body.de .de,
body.en .en,
body.fr .fr {
display: initial;
}
body{
text-align: center;
padding: 0px 10px 0px 10px;
}
copy
css
body {
margin: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0; /* Light background for contrast */
}
@media (max-width: 799px) {
.body {
padding: 0px 0px 0px 0px;
}
}
@media (min-width: 800px) {
.body {
padding: 0px 10px 0px 10px;
}
}
.btn,
.btn:visited {
color:black;
font-size: 1.7vh;
font-family: "guyot-text", sans-serif;
font-weight: 300;
font-style: normal;
text-align: center;
letter-spacing: 1px;
line-height: 2.3vh;
margin: 0px 0px 80px 0px;
}
@media (min-width: 800px) {
.btn,.btn:visited {
color:black;
font-size: 1.7vh;
font-family: "guyot-text", sans-serif;
font-weight: 300;
font-style: normal;
text-align: center;
letter-spacing: 1px;
line-height: 2.3vh;
margin-left: auto;
margin-right: auto;
color:black;
text-decoration:underline;
text-underline-position: 5px;
text-decoration-color:darkgrey;
text-decoration-thickness: 1.3px;
text-underline-offset: 3px;
}
}
@media (max-width: 799px) {
.btn,.btn:visited {
margin: 0px 0px 30px 0px;
font-size: 1.5vh;
font-family: "guyot-text", sans-serif;
font-weight: 300;
font-style: normal;
text-align: center;
letter-spacing: 0px;
line-height: 1.8vh;
margin-left: auto;
margin-right: auto;
color:black;
text-decoration:underline;
text-underline-position: 5px;
text-decoration-color:darkgrey;
text-decoration-thickness: 1.3px;
text-underline-offset: 3px;
}
}
.btn:hover,
.btn:visited:hover,
.btn:focus,
.btn:visited:focus {
color:black;
text-decoration:underline;
text-underline-position: 5px;
text-decoration-color: black;
text-decoration-thickness: 1.3px;
text-underline-offset: 3px;
text-align: center;
margin-left: auto;
margin-right: auto;
}
.btn:active,
.btn:visited:active {
color:black;
text-decoration:underline;
text-underline-position: 5px;
text-decoration-color:black;
text-decoration-thickness: 1.3px;
text-underline-offset: 3px;
text-align: center;
margin-left: auto;
margin-right: auto;
}
.wrapper {
text-align: center;
margin-left: auto;
margin-right: auto;
text-align: justify;
display: block;
font-size: 1.7vh;
font-family: "guyot-text", sans-serif;
font-weight: 300;
font-style: normal;
text-align: center;
letter-spacing: 0.5px;
line-height: 2.3vh;
width: 100%;
}
.wrapper div{
display: none;
color:black;
font-size: 1.7vh;
font-family: "guyot-text", sans-serif;
font-weight: 300;
font-style: normal;
text-align: center;
letter-spacing: 0.5px;
line-height: 2.3vh;
margin-left: auto;
margin-right: auto;
cursor: pointer;
width: 100%;
}
@media (min-width: 800px) {
.wrapper div {
margin-top: 30px;
margin-bottom: 20px;
color:black;
font-size: 1.7vh;
font-family: "guyot-text", sans-serif;
font-weight: 300;
font-style: normal;
text-align: center;
letter-spacing: 0.5px;
line-height: 2.3vh;
margin-left: auto;
margin-right: auto;
width: 50%;
}
}
@media (max-width: 799px) {
.wrapper div {
margin-top: 20px;
margin-bottom: 20px;
font-size: 1.5vh;
font-family: "guyot-text", sans-serif;
font-weight: 300;
font-style: normal;
text-align: center;
letter-spacing: 0px;
line-height: 2vh;
width:fit-content;
margin-left: auto;
margin-right: auto;
text-align: center;
}
}
input[type=radio] {
opacity: 0;
text-align: center;
}
label {
color:black;
font-size: 1.7vh;
font-family: "guyot-text", sans-serif;
font-weight: 300;
font-style: normal;
text-align: center;
letter-spacing: 1px;
line-height: 2.3vh;
margin-left: auto;
margin-right: auto;
cursor: pointer;
}
/* Default State */
/* Toggled State */
#english:checked ~ .wrapper .english{
display: block;
}
#english ~ .wrapper .english{
display: none;
}
#english:checked ~ .wrapper .german{
display: none;
}
#german ~ .wrapper .german{
display: none;
}
#german:checked ~ .wrapper .english{
display: none;
}
#german:checked ~ .wrapper .german{
display: block;
}
@media (min-width: 800px) {
.sprachkentnisse {
font-size: 1.5vh;
line-height: 1.5vh;
flex-direction: column;
/* margin: -830px 0px 0px 870px;
padding: 0px 0px 0px 0px; */
position: absolute;
right: 100px;
top: 40px;
flex-direction: column;
object-position: right;
/* text-align:right; */
}
}
@media (max-width: 799px) {
.sprachkentnisse {
font-size: 2vh;
line-height: 2vh;
margin: 80px 0px 0px 60px;
padding: 0px 0px 0px 0px;
flex-direction: column;
}
}
.monogramm{
object-position: center;
color:rgb(0, 0, 0);
display: block;
margin-left: auto;
margin-right:auto;
margin-top: -50px;
width: 40%;
position: sticky;
position: fixed;
z-index: 999;
transition: top 0.3s;
}
@media (min-width: 800px) {
.monogramm{
object-position: center;
color:rgb(0, 0, 0);
margin-left: 22%;
margin-right: 10%;
position: fixed;
margin-top: -10px;
width: 12%;
}
}
@media (max-width: 799px){
.monogramm{
object-position: center;
color:rgb(0, 0, 0);
margin-left: 20%;
margin-right: 10%;
position: fixed;
margin-top: -10px;
width: 60%;
position: sticky;
}
}
@media screen and (max-width: 580px) {
.monogramm {
margin-left: 15%;
margin-right: 15%;
position: sticky;
width: 30%;
position: fixed;
}
}
#navbar {
font-family: "elza", sans-serif;
font-weight: 500;
font-style: normal;
font-size: 1.5vh;
position: sticky;
top: 20px;
left: 20px;
overflow: hidden;
z-index: 999;
flex-wrap: wrap;
}
#navbar a:hover {
color:black;
text-decoration: underline;
text-underline-position: 5px;
text-decoration-color: darkgray;
text-decoration-thickness: 1px;
text-underline-offset: 3px;
}
#navbar a:active {
color:black;
text-decoration: underline;
text-underline-position: 5px;
text-decoration-color:rgb(0, 0, 0);
text-decoration-thickness: 1px;
text-underline-offset: 3px;
}
/* Navbar links */
#navbar_links a {
float: left;
font-size: 1.5vh;
display: block;
color:black;
text-align: center;
padding: 0 80px 0 40px;
left: 20px;
text-decoration: none;
}
@media (min-width: 800px) {
#navbar_links a {
float: left;
font-size: 1.7vh;
display: block;
color:black;
text-align: center;
padding: 0 80px 0 40px;
left: 20px;
text-decoration: none;
}
}
@media (max-width: 799px) {
#navbar_links a {
float: left;
display: block;
color:black;
text-align: center;
padding: 0 15px 0 0px;
text-decoration: none;
}
}
#navbar_links a:hover {
color:black;
text-decoration: underline;
text-underline-position: 5px;
text-decoration-color: darkgray;
text-decoration-thickness: 1px;
text-underline-offset: 3px;
}
#navbar_links a:active {
color:black;
text-decoration: underline;
text-underline-position: 5px;
text-decoration-color:rgb(0, 0, 0);
text-decoration-thickness: 1px;
text-underline-offset: 3px;
}
#navbar_rechts {
font-size: 1.7vh;
position: sticky;
top: 20px;
overflow: hidden;
z-index: 999;
}
/* Navbar links */
#navbar_rechts a {
float: right;
display: block;
color:black;
text-align: center;
padding: 0 40px 0 80px;
text-decoration: none;
}
@media (min-width: 800px) {
#navbar_rechts a {
float: right;
font-size: 1.7vh;
display: block;
color:black;
text-align: center;
padding: 0 40px 0 80px;
text-decoration: none;
}
}
@media (max-width: 799px) {
#navbar_rechts a {
float: right;
font-size: 1.5vh;
display: block;
color:black;
text-align: center;
padding: 0 0px 0 15px;
text-decoration: none;
}
}
#navbar_rechts a:hover {
color:black;
text-decoration: underline;
text-underline-position: 5px;
text-decoration-color: darkgray;
text-decoration-thickness: 1px;
text-underline-offset: 3px;
}
#navbar_rechts a:active {
color:black;
text-decoration: underline;
text-underline-position: 5px;
text-decoration-color:rgb(0, 0, 0);
text-decoration-thickness: 1px;
text-underline-offset: 3px;
}
/* Page content */
.content {
padding: 16px;
}
.cursor{
cursor: url ("website-portfolio/cursor-1.png"),auto;
width: 20px;
height: 20px;
border: 1px solid transparent
}
.container{
width: 35%;
height: 100%;
}
.container2{
width: 70%;
height: 100%;
}
.pdf {
font-size: 2vh;
color:rgb(0, 0, 255)
text-decoration: none;
}
.mailto {
color:black;
padding: 0px 20px 0 1000px;
text-align: right;
}
.mailto :hover {
color:rgb(0, 0, 255)
}
.de{
color:rgb(0, 0, 0)
}
/* @-webkit-keyframes blinker {
from {opacity: 1.0;}
to {opacity: 0.2;}
}
. {
text-decoration: blink;
-webkit-animation-name: blinker;
-webkit-animation-duration: 0.4s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-timing-function:ease-in-out;
-webkit-animation-direction: alternate;
} */
.sprachumschalter :hover{
color: rgb(0, 0, 255);
text-decoration: none;
margin: 0px 0px 100px 0px;
font-size: 1.7vh;
font-family: "Poppins", sans-serif;
font-weight: 300;
font-style: normal;
text-align: center;
margin-left: auto;
margin-right: auto;
letter-spacing: 1px;
line-height: 2.3vh;
}
.pdf :hover {
color: rgb(0, 0, 0);
text-decoration: none;
}
.info__startseite :hover {
color: rgb(0, 0, 0);
text-decoration: none;
}
.info__name :hover {
color: rgb(0, 0, 0);
text-decoration: none;
}
a :active{
color: rgb(0, 0, 0);
text-decoration: none;
}
.mailto a{
font-size: 2vh;
color:black;
text-decoration: none;
cursor:pointer;
}
.lazyload {
data-sizes="auto";
}
@media (min-width: 800px) {
.body {
background-color:rgb(255, 255, 255);
margin: 20px 0px 0 0px;
margin-left: 0px;
margin-right: 0px;
font-family: "Poppins", sans-serif;
font-weight: 300;
font-style: normal;
}
}
@media (max-width: 799px) {
.body {
margin: 0px 20px 0 20px;
font-family: "Poppins", sans-serif;
font-weight: 300;
font-style: normal;
}
}
.info {
font-family: "Poppins", sans-serif;
font-weight: 300;
font-style: normal;
font-size: 1vh;
display: flex;
margin: 0 -40px;
}
.link:hover {
color:black;
}
.link {
color:blue;
}
.link_1:hover {
color:black;
text-decoration: underline;
text-decoration-thickness: 1px;
text-decoration-color: black;
text-underline-offset: 4px;
}
.link_1 {
color:black;
text-decoration: underline;
text-decoration-thickness: 1px;
text-decoration-color: darkgrey;
text-underline-offset: 4px;
}
@media (max-width: 799px) {
.projekt_jahr_start {
margin: -15px 0px 0px 0px;
font-size: 2vh;
font-family: "quincy-cf", serif;
font-weight: 100;
font-style: normal;
text-align: center;
letter-spacing: 0px;
}
}
@media (min-width: 800px) {
.projekt_jahr_start {
margin: 0px 0px 0px 0px;
font-size: 1.7vh;
font-family: "quincy-cf", serif;
font-weight: 100;
font-style: normal;
text-align: left;
letter-spacing: 0px;
float: none;
text-underline-position: below;
text-align:left; /* Center the caption text */
position: absolute; /* Positioning the caption over the image */
bottom: 0; /* Align it to the bottom of the image */
left: 0;
right: 0;
top:-40px;
}
}
@media (max-width: 799px) {
.projekt_specification_start {
margin: -5px 0px 4px 0px;
font-size: 1.3vh;
font-family: "elza", sans-serif;
font-weight: 500;
font-style: normal;
text-align: left;
letter-spacing: 0px;
text-decoration: none;
color:black;
line-height: 1.2vh;
}
}
@media (min-width: 800px) {
.projekt_specification_start {
margin: -30px 0px 0px 20px;
font-size: 1.3vh;
font-family: "elza", sans-serif;
font-weight: 500;
font-style: normal;
line-height: 1.5vh;
text-align: justify;
letter-spacing: 1px;
text-align: left;
float: none;
text-underline-position: below;
text-align:left; /* Center the caption text */
position: absolute; /* Positioning the caption over the image */
bottom: 0; /* Align it to the bottom of the image */
left: 0;
right: 0;
top:0px;
}
}
a {
text-decoration: none; /* Entfernt die Unterstreichung */
color: black; /* Alternativ, Farbe des Links festlegen */
}
@media (max-width: 799px) {
.projekt_head_start {
margin: -10px 0px 10px 0px;
font-size: 2vh;
font-family: "guyot-text", sans-serif;
font-weight: 400;
font-style: normal;
text-align: center;
letter-spacing: 0px;
}
}
@media (min-width: 800px) {
.projekt_head_start {
margin: -35px 0px 0px 0px;
font-size: 1.7vh;
font-family: "guyot-text", sans-serif;
font-weight: 400;
font-style: normal;
text-align: right;
letter-spacing: 0px;
float: right;
text-underline-position: below;
text-align:right; /* Center the caption text */
position:fixed; /* Positioning the caption over the image */
bottom: 0; /* Align it to the bottom of the image */
left: 0px;
right: 50px;
top:0px;
}
}
@media (max-width: 799px) {
.projekt_specification {
margin: 0px 0px 0px 0px;
font-size: 1.7vh;
font-family: "elza", sans-serif;
font-weight: 500;
font-style: normal;
text-align: center;
letter-spacing: 0px;
}
}
@media (min-width: 800px) {
.projekt_specification {
margin: 0px 0px 8px 0px;
font-size: 2vh;
font-family: "elza", sans-serif;
font-weight: 500;
font-style: normal;
line-height: 0.8vh;
letter-spacing: 1px;
text-align: center;
letter-spacing: 0px;
}
}
@media (max-width: 799px) {
.projekt_head {
margin: -5px 0px 10px 0px;
font-size: 1.7vh;
font-family: "guyot-text", sans-serif;
font-weight: 400;
font-style: normal;
text-align: center;
letter-spacing: 0px;
line-height: 3vh;
}
}
@media (min-width: 800px) {
.projekt_head {
margin: 2px 0px 15px 0px;
font-size: 2.5vh;
font-family: "guyot-text", sans-serif;
font-weight: 400;
font-style: normal;
text-align: center;
letter-spacing: 0px;
line-height: 3vh;
}
}
@media (max-width: 799px) {
.projekt_text {
color:black;
margin: 30px 0px 80px 0px;
font-size: 1.5vh;
font-family: "Poppins", sans-serif;
font-weight: 400;
font-style: normal;
text-align: center;
letter-spacing: 0.7px;
line-height: 1.8vh;
}
}
@media (min-width: 800px) {
.projekt_text {
color:black;
text-decoration: none;
margin: 40px 0px 130px 0px;
font-size: 1.7vh;
font-family: "Poppins", sans-serif;
font-weight: 400;
font-style: normal;
text-align: center;
letter-spacing: 0.7px;
line-height: 5px;
line-height: 2.3vh;
}
}
.projekt_text :active {
margin-top: 50px;
color:black;
font-family: "Poppins", sans-serif;
font-weight: 400;
font-style: normal;
text-align: center;
line-height: 2px;
}
@media (max-width: 799px) {
.bottom_text {
color:black;
margin: 30px 0px 10px 0px;
font-size: 1.5vh;
font-family: "Poppins", sans-serif;
font-weight: 400;
font-style: normal;
text-align: center;
letter-spacing: 0.7px;
line-height: 1.8vh;
}
}
@media (min-width: 800px) {
.bottom_text {
color:black;
text-decoration: none;
margin: 40px 0px 20px 0px;
font-size: 1.5vh;
font-family: "Poppins", sans-serif;
font-weight: 400;
font-style: normal;
text-align: center;
letter-spacing: 0.7px;
line-height: 5px;
line-height: 2.3vh;
}
}
hr {
border: none;
border-top: 2px dotted rgb(0, 0, 0);
width: 12%;
}
@media (max-width: 799px) {
.projekte {
margin: 0px 0px 0px 0px;
padding: 30px 0px 10px 0px;
padding-bottom: 0px;
}
}
@media (min-width: 800px) {
.projekte {
margin-top: 120px;
padding: 30px 0px 10px 0px;
float: none;
position: relative;
overflow: hidden;
text-underline-position: below;
}
}
@media (max-width: 799px) {
.projekte__projekt {
padding: 0px 0px 0px 0px;
float: none;
position: relative;
overflow: hidden;
text-underline-position: below;
}
}
@media (min-width: 800px) {
.projekte__projekt {
padding: 0px 20px 0px 20px;
float: none;
position: relative;
overflow: hidden;
text-underline-position: below;
}
}
.projekte__projekt:hover {
filter: none;
}
@media (max-width: 799px) {
.projekte__bild {
width: 100%;
padding: 30px 0px 10px 0px;
float: none;
text-underline-position: below;
position: relative;
overflow: hidden;
}
}
@media (min-width: 800px) {
.projekte__bild {
/* width:30%; */
/* padding: 0px 10px 10px 0px; */
padding: 0px 0px 60px 0px;
float: none;
width: calc(120% * 1/4);
text-underline-position: below;
}
}
@media (max-width: 799px) {
.projekte__bild_links {
width: 100%;
padding-bottom: 0px;
padding: 0px 10px 10px 0px;
}
}
@media (min-width: 800px) {
.projekte__bild_links {
width:43%;
float:left;
margin-right: 20px;
padding-bottom: 20px;
}
}
@media (max-width: 799px) {
.projekte__bild_rechts {
width: 100%;
padding-bottom: 0px;
padding: 0px 10px 10px 0px;
}
}
@media (min-width: 800px) {
.projekte__bild_rechts {
width:43%;
float:right;
margin-right: 20px;
padding-bottom: 20px;
}
}
@media (max-width: 799px) {
.projekte__bild_center {
width: 100%;
padding-bottom: 0px;
padding: 0px 10px 10px 0px;
}
}
@media (min-width: 800px) {
.projekte__bild_center {
width:43%;
float:center;
object-position: center;
margin-left:200px;
margin-right: 200px;
margin-bottom: 20px;
}
}
@media (max-width: 799px) {
.animation{
width: 100%;
padding-top: 20px;
}
}
@media (min-width: 800px) {
.animation {
width: 100%;
padding-top: 40px;
}
}
@media (max-width: 799px) {
.animation_about_me {
width: 80%;
padding-top: 20px;
align-content: center;
margin-right: auto;
margin-left: auto;
}
}
@media (min-width: 800px) {
.animation_about_me {
width: 50%;
padding-top: 20px;
align-content: center;
margin-right: auto;
margin-left: auto;
}
}
@media (max-width: 799px) {
.animation_klein {
width: 50%;
padding-top: 20px;
align-content: center;
margin-right: auto;
margin-left: auto;
}
}
@media (min-width: 800px) {
.animation_klein {
width: 30%;
padding-top: 20px;
align-content: center;
margin-right: auto;
margin-left: auto;
}
}
@media (max-width: 799px) {
.zentriert {
height: 40%;
width: 40%;
position: center;
margin-top: 0px;
margin-left: auto;
margin-right: auto;
}
}
@media (min-width: 800px) {
.zentriert {
height:40%;
width: 40%;
/* width: calc(100% * 4/6); */
position: center;
margin-left: auto;
margin-right: auto;
}
}
@media (max-width: 799px) {
.zentriert__uno {
width: 100%;
height:100%;
object-position: center;
padding: 0px 0px 0px 0px;
/* padding: 20px calc(100% * 2/6) 0px 0px; */
}
}
@media (min-width: 800px) {
.zentriert__uno {
width: 100%;
object-position: center;
padding: 0px 0px 0px 0px;
}
}
@media (max-width: 799px) {
.seiten__quer {
height: 100%;
width: 100%;
object-fit: contain;
object-position: left;
object-position: top;
}
}
@media (min-width: 800px) {
.seiten__quer {
height: 100%;
/* width: calc(100% * 4/6); */
position: relative;
}
}
/* .seiten__quer__seite1{
width: 100%;
padding: 20px 0px 0px 0px;
} */
@media (max-width: 799px) {
.seiten__quer__links {
width: 100%;
height:100%;
padding: 20px 0px 20px 0px;
/* padding: 20px calc(100% * 2/6) 0px 0px; */
}
}
@media (min-width: 800px) {
.seiten__quer__links {
width: 100%;
padding: 20px calc(100% * 2/6) 20px 0px;
}
}
@media (max-width: 799px) {
.seiten__quer__rechts {
width: 100%;
height:100%;
padding: 20px 0px 20px 0px;
/* padding: 20px calc(100% * 2/6) 0px 0px; */
}
}
@media (min-width: 800px) {
.seiten__quer__rechts {
width: 100%;
padding: 20px 0 20px calc(100% * 2/6);
}
}
.nahaufnahme__1 {
height:40%;
width: 40%;
/* width: calc(100% * 4/6); */
position: center;
margin-left: auto;
margin-right: auto;
}
@media (max-width: 799px) {
.nahaufnahme {
height:40%;
width: 40%;
/* width: calc(100% * 4/6); */
position: center;
margin-left: auto;
margin-right: auto;
}
}
@media (min-width: 800px) {
.nahaufnahme {
height:40%;
width: 40%;
/* width: calc(100% * 4/6); */
position: center;
margin-left: auto;
margin-right: auto;
}
}
@media (max-width: 799px) {
.seiten__hoch {
width: 100%;
height:100%;
object-fit: contain;
object-position: right;
object-position: top;
padding: 40px 0px 40px 0px;
}
}
@media (min-width: 800px) {
.seiten__hoch {
display: flex;
flex-wrap:wrap;
flex-direction:row;
margin: -20px -20px;
/* object-fit: contain;
object-position: left;
object-position: top; */
}
}
@media (max-width: 799px) {
.seiten__hoch__seite1 {
height: 100% ;
width: calc(100% * 4/6);
object-fit: contain;
object-position: right;
object-position: top;
padding: 0 0px 20px 0px;
}
}
@media (min-width: 800px) {
.seiten__hoch__seite1 {
width: calc(100% * 2/6);
padding: 80px 20px 40px 0px;
object-fit: contain;
object-position: left;
object-position: top;
}
}
@media (max-width: 799px) {
.seiten__hoch__seite2 {
height: 100% ;
width: calc(100% * 4/6);
object-fit: contain;
object-position: right;
object-position: top;
padding: 20px 0px 20px 0px;
}
}
@media (min-width: 800px) {
.seiten__hoch__seite2 {
width: calc(100% * 2/6);
padding: 80px 20px 40px 0px;
object-fit: contain;
object-position: left;
object-position: top;
}
}
@media (max-width: 799px) {
.seiten__hoch__seite3 {
height: 100% ;
width: calc(100% * 4/6);
object-fit: contain;
object-position: right;
object-position: top;
padding: 20px 0px 0 0px;
}
}
@media (min-width: 800px) {
.seiten__hoch__seite3 {
width: calc(100% * 2/6);
padding: 80px 20px 40px 0px;
object-fit: contain;
object-position: left;
object-position: top;
}
}
@media (min-width: 800px) {
.spezial {
width: 70%;
height:70%;
object-fit: contain;
object-position: right;
object-position: top;
padding: 0px 20px 40px 0px;
}
}
@media (max-width: 799px) {
.spezial__1 {
height: 100% ;
width: calc(100% * 4/6);
object-fit: contain;
object-position: right;
object-position: top;
padding: 0px 0px 20px 0px;
}
}
@media (min-width: 800px) {
.spezial__1 {
width: calc(100% * 2/6);
padding: 40px 0px 40px 0px;
object-fit: contain;
object-position: left;
object-position: top;
}
}
@media (max-width: 799px) {
.spezial__2 {
height: 100% ;
width: calc(100% * 4/6);
object-fit: contain;
object-position: right;
object-position: top;
padding: 0px 0px 20px 0px;
}
}
@media (min-width: 800px) {
.spezial__2 {
width: calc(100% * 2/6);
padding: 0px 0px 40px 0px;
object-fit: contain;
object-position: left;
object-position: top;
}
}
@media (max-width: 799px) {
.spezial__3 {
height: 100% ;
width: calc(100% * 4/6);
object-fit: contain;
object-position: right;
object-position: top;
padding: 20px 0px 0 0px;
}
}
@media (min-width: 800px) {
.spezial__3 {
width: calc(100% * 2/6);
padding: 40px 20px 40px 0px;
object-fit: contain;
object-position: left;
object-position: top;
}
}
.skizzen{
width: calc(100% * 4/6);
display: flex;
flex-direction:column;
position: relative;
}
.skizzen__skizze1{
width: 100%;
height: 100%;
padding: 60px 0px 0px 0px;
margin-left: 500px;
/* justify-content:flex-end;
align-content: flex-end;
align: right; */
/* margin-left: 500px; */
}
.skizzen__skizze2{
width: 100%;
height: 100%;
padding: 60px 0px 0px 0px;
}
@media (max-width: 799px) {
.portraet {
/* width: calc(100% * 4/6); */
height: 100%;
object-position: right;
padding: 0px 0px 0px 20px;
}
}
@media (min-width: 800px) {
.portraet {
width: 100%;
height: 100%;
margin-top: 80px;
padding: 32px 0px 0px 150px;
}
}
@media (max-width: 799px) {
.portraet__rechts {
width: 100%;
padding: 50px 0px 0px 0px;
margin-left: 0px;
}
}
@media (min-width: 800px) {
.portraet__rechts {
width: calc(70% * 4/6);
padding: 0px 0px 0px 0px;
}
}
@media (max-width: 799px) {
.portraet__links {
width: 80%;
padding: 20px 0px 20px 20px;
margin-left: 200px;
}
}
@media (min-width: 800px) {
.portraet__links {
width: calc(55% * 4/6);
padding: 20px 10px 0px 0px;
}
}
@media (max-width: 799px) {
.portraet__hinten {
width:80%;
padding: 20px 0px 20px 20px;
}
}
@media (min-width: 800px) {
.portraet__hinten {
width: calc(55% * 4/6);
padding: 0px 0px 0px 10px;
}
}
@media (max-width: 799px) {
.portraet__vorne {
width:80%;
padding: 20px 0px 20px 20px;
}
}
@media (min-width: 800px) {
.portraet__vorne {
width: calc(55% * 4/6);
padding: 20px 0px 0px 10px;
}
}
.more de{
position: relative;
text-align: center;
margin: 0px 0px 100px 0px;
font-size: 1.7vh;
font-family: "Poppins", sans-serif;
font-weight: 300;
font-style: normal;
text-align: center;
letter-spacing: 1px;
line-height: 2.3vh;
margin-left: auto;
}
@media (max-width: 799px) {
.more {
margin: 0px 0px 100px 0px;
font-size: 1.5vh;
font-family: "Poppins", sans-serif;
font-weight: 300;
font-style: normal;
text-align: center;
letter-spacing: 1px;
line-height: 2.3vh;
}
}
@media (min-width: 800px) {
.more {
margin: 0px 0px 100px 0px;
font-size: 1.7vh;
font-family: "Poppins", sans-serif;
font-weight: 300;
font-style: normal;
text-align: center;
letter-spacing: 1px;
line-height: 2.3vh;
}
}
.sprachumschalter {
cursor:pointer;
margin: 0px 0px 100px 0px;
font-size: 1.7vh;
font-family: "Poppins", sans-serif;
font-weight: 300;
font-style: normal;
text-align: center;
letter-spacing: 1px;
line-height: 2.3vh;
margin-left: auto;
margin-right: auto;
}
.more__more {
font-size: 1.7vh;
font-family: "Poppins", sans-serif;
font-weight: 300;
font-style: normal;
text-align: center;
letter-spacing: 1px;
line-height: 2.3vh;
}
@media (max-width: 799px) {
.more__more {
argin: 0px 0px 100px 0px;
font-size: 1.5vh;
font-family: "Poppins", sans-serif;
font-weight: 300;
font-style: normal;
text-align: center;
letter-spacing: 1px;
line-height: 2.3vh;
}
}
@media (min-width: 800px) {
.more__more {
font-size: 1.7vh;
font-family: "Poppins", sans-serif;
font-weight: 300;
font-style: normal;
text-align: center;
letter-spacing: 1px;
line-height: 2.3vh;
}
}
@media (max-width: 799px) {
.more__more.aktiv {
font-size: 1.5vh;
font-family: "Poppins", sans-serif;
font-weight: 300;
font-style: normal;
text-align: center;
letter-spacing: 1px;
line-height: 2.3vh;
}
}
@media (min-width: 800px) {
.more__more.aktiv {
font-size: 1.7vh;
font-family: "Poppins", sans-serif;
font-weight: 300;
font-style: normal;
text-align: center;
letter-spacing: 1px;
line-height: 2.3vh;
}
}
.more__text {
color:rgb(0, 0, 0);
background-color: rgb(255, 255, 255);
font-size: 1.7vh;
width: 30%;
z-index: 50;
transform: translateX(calc(-100% - 500px));
transition: ease-in 0.4s;
bottom: 0;
left: 0px;
text-align: center;
letter-spacing: 1px;
line-height: 2.3vh;
}
@media (max-width: 799px) {
.more__text {
margin: 0px 0px 100px 0px;
font-size: 1.5vh;
font-family: "Poppins", sans-serif;
font-weight: 300;
font-style: normal;
text-align: center;
letter-spacing: 1px;
line-height: 2.3vh;
margin-left: auto;
margin-right: auto;
}
}
@media (min-width: 800px) {
.more__text {
margin: 0px 0px 100px 0px;
font-size: 1.7vh;
font-family: "Poppins", sans-serif;
font-weight: 300;
font-style: normal;
text-align: center;
letter-spacing: 1px;
line-height: 2.3vh;
margin-left: auto;
margin-right: auto;
}
}
.more__text.aktiv {
transform: translateX(0);
/* padding: 0px 0px 20px 0px; */
transition: ease-in 0.4s;
}
.seitentitel {
z-index: -50;
position: fixed;
width: 100%;
left: 0;
top: 0;
padding: calc(20px + 3vh) 80px 0 80px;
}
@media (max-width: 799px) {
.seitentitel__text {
color:rgb(0, 0, 0);
font-size: 22vh;
line-height: 10vh;
padding: 40px 0px 40px 0px;
margin-left: -20px;
/* font-weight: bold; */
}
}
@media (min-width: 800px) {
.seitentitel__text {
color:rgb(0, 0, 0);
font-size: 38vh;
line-height: 30vh;
/* font-weight: bold; */
}
}
@media (max-width: 799px) {
.seitentitel__text--1 {
text-align: left;
/* padding: 0px 40px 0px 40px; */
}
}
@media (min-width: 800px) {
.seitentitel__text--1 {
text-align: left;
margin-left: -2.2vh;
}
@media (max-width: 799px) {
.seitentitel__text--2 {
text-align: center;
/* padding: 0px 40px 0px 40px; */
}
}
@media (min-width: 800px) {
.seitentitel__text--2 {
text-align: center;
margin-left: 20vh;
}
@media (max-width: 799px) {
.seitentitel__text--3 {
text-align: right;
/* margin-right: -6.7vh; */
}
}
@media (min-width: 800px) {
.seitentitel__text--3 {
text-align: right;
margin-right: -6.7vh;
}
@media (max-width: 799px) {
.projekte__projekt {
width: 100%;
padding: 0px 0px 0px 0px;
}
}
@media (min-width: 800px) {
.projekte__projekt {
width:100%;
}
}
a { text-decoration: none; } /* Unterstreichung entfernen
a:active {
}
a {
text-decoration: none;
outline: none;
}