*{
margin: 0;
}
html{
scroll-behavior: smooth;
}
body{
overflow-x: hidden;
}
:root{
--dark-grey: #353F4A;
--Dunkelrot: #AC2B1C;
--blau: #53BEDF;
--light-grey: #DAE7EA;
--dunkel-orange: #F05542;
--hell-orange: #FFA00B;
--gelb: #FFCC33;
--Hyperlink-blau: #116EA7;
--Leichtes-Grau: #65727F;
}
/* Umbrüche
* 1271px - Ränder werden dünner
* 1093px - 3er auf 2er Layout
* 900px - Projekt-Layout ändert sich, Kontakt ändert sich
* 790px - Hader ändert sich
* 727px - Handy Layout
* */
@font-face{
font-family: 'Raleway';
src: url(Designelemente/Schriften/Raleway-VariableFont_wght.ttf);
}
@font-face{
font-family: 'Cookie';
src: url(Designelemente/Schriften/Cookie-Regular.ttf);
}
h1{
font-family: 'Raleway',sans-serif;
font-weight: 300;
text-transform: uppercase;
letter-spacing: 0.3em;
font-size: 4.5vw;
margin: 0;
}
@media (min-width: 1271px){
h1{
font-size: 3vw;
}
}
@media (max-width: 727px){
h1{
font-size: 7vw;
text-align: center;
}
}
h2{
font-family: 'Raleway',sans-serif;
font-weight: 300;
text-transform: uppercase;
letter-spacing: 0.3em;
font-size: 2.7em;
margin: 0;
}
h3{
font-family: 'Raleway',sans-serif;
font-weight: 300;
font-size: 2.1em;
margin: 0;
}
h4{
font-family: 'Raleway',sans-serif;
font-weight: 700;
font-size: 1.7em;
margin: 0;
}
h5{
font-family: 'Raleway',sans-serif;
font-weight: 400;
font-size: 1.7em;
margin: 0;
}
h6{
font-family: 'Cookie',cursive;
font-size: 3.5em;
font-weight: 200;
line-height: 1;
margin: 0;
}
@media (max-width: 790px){
h6{
font-size: 2.5em;
}
}
p{
font-family: 'Raleway', sans-serif;
font-weight: 400;
font-size: 1em;
line-height: 1.3;
margin: 0;
}
a{
font-family: 'Raleway', sans-serif;
font-weight: 400;
font-size: 1em;
line-height: 1.3;
margin: 0;
color: var(--Hyperlink-blau);
text-decoration: none;
}
.link-weiss{
color: white;
}
li:not(:last-child) {
margin-bottom: 5px;
}
.Text-Rechtsbuendig{
text-align: right;
}
.Text-Linksbuendig{
text-align: left;
}
.Text-Blocksatz{
text-align: justify;
}
.Text-zentriert{
text-align: center;
}
.hintergrund-blau{
background: var(--light-grey);
}
.hintergrund-dunkel{
background: var(--dark-grey);
color: white;
}
.color-white{
color: white;
}
.color-orange{
color: var(--dunkel-orange);
}
.zeilenabstand-1-5{
line-height: 1.5;
}
.deckkraft-50{
opacity: 0.5;
}
.leichter-schatten{
filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.25));
}
textarea{
resize: none;
padding-top: 5px;
padding-bottom: 5px;
}
.ItemHidden{
display: none !important;
}
.VisibilityNone{
visibility: hidden;
}
.aspekt16-9{
aspect-ratio: 16/9;
}
section{
width: 100%;
display: grid;
grid-template-columns: repeat(16, 1fr);
grid-column-gap: 20px;
padding-top: 80px;
padding-bottom: 100px;
}
.button-blau{
width: fit-content;
height: fit-content;
background: var(--Hyperlink-blau);
border: none;
border-radius: 20px;
font-family: 'Raleway';
font-weight: 400;
font-size: 1em;
line-height: 1.3;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 13px;
padding-right: 13px;
color: white;
display: flex;
align-items: center;
justify-content: center;
column-gap: 6px;
}
.button-orange{
width: fit-content;
height: fit-content;
background: var(--dunkel-orange);
border: none;
border-radius: 20px;
font-family: 'Raleway';
font-weight: 400;
font-size: 1em;
line-height: 1.3;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 13px;
padding-right: 13px;
color: white;
display: flex;
align-items: center;
justify-content: center;
column-gap: 6px;
}
.subnav-einblend-button{
width: 60px;
height: 60px;
position: fixed;
top: 80px;
right: 30px;
background: var(--dunkel-orange);
border: none;
border-radius: 30px;
box-shadow: 2px 4px 10px rgba(0, 0, 0, 0.25);
background-image: url(Designelemente/Vektoren/Subnav-Icon-gross.svg);
background-repeat: no-repeat;
background-size: 60%;
background-position: center;
z-index: 7;
}
.einblendbaresubnav{
width: 250px;
display: flex;
flex-direction: column;
align-items: flex-end;
gap:20px;
position: relative;
top: 80px;
left: -195px;
transition: 0.2s;
}
.FloatingAnrufbutton{
width: 60px;
height: 60px;
background: var(--Hyperlink-blau);
border-radius: 30px;
border: none;
background-image: url(Designelemente/Vektoren/Anruf-Icon.svg);
background-repeat: no-repeat;
background-position: center;
background-size: 50%;
position: fixed;
bottom: 80px;
right: 30px;
z-index: 7;
}
.FloatingButtonX{
background-image: url(Designelemente/Vektoren/burger-button-x.svg) !important;
background-size: 40% !important;
}
.EinblendbarerKontakt{
width: 210px;
display: flex;
flex-direction: column;
align-items: flex-end;
gap:20px;
position: relative;
bottom: 145px;
left: -150px;
padding-bottom: 50px;
transition: 0.2s;
}
.FloatAusgeblendet{
left: 100px !important;
}
@media (max-width: 790px){
.subnav-einblend-button{
width: 40px;
height: 40px;
top: 63px;
right: 13px;
background-image: url(Designelemente/Vektoren/Subnav-Icon-klein.svg);
}
.einblendbaresubnav{
top: 50px;
left: -216px;
}
.FloatingAnrufbutton{
width: 40px;
height: 40px;
right: 13px;
}
.EinblendbarerKontakt{
left: -170px;
}
}
header{
position: fixed;
top: 0;
left: 0;
width: 88%;
height: 50px;
background: white;
display: flex;
justify-content: space-between;
align-items: center;
padding-left: 6vw;
padding-right: 6vw;
border-bottom: solid 1px;
z-index: 9;
}
.logo-header{
height: 77%;
display: flex;
align-items: center;
}
.headnav{
display: flex;
align-items: center;
gap: 2vw;
}
.headnav a{
padding: 7px;
}
.Headerfont{
color: black;
}
.Headerfont:hover{
background: var(--light-grey)
}
.Headerfont-Aktiv{
text-decoration: underline 2px;
text-decoration-color: var(--dunkel-orange);
text-underline-offset: 3px;
color: black;
}
.Headerfont-Aktiv:hover{
background: var(--light-grey)
}
.headnav-dropdown{
overflow: hidden;
height: 100%;
}
.dropdown-button{
display: flex;
height: 100%;
font-size: inherit;
gap: 5px;
padding: 7px;
margin: 0;
border: none;
background: inherit;
font-family: inherit;
}
.dropdown-button:hover{
background: var(--light-grey);
}
.header-doropdown-content{
display: none;
position: absolute;
transform: translate(-10px, 0);
background: white;
min-width: 120px;
box-shadow: 0 5px 8px 0 rgba(0,0,0,0.2);
z-index: 1;
border-radius: 0 0 10px 10px;
padding: 10px;
}
.header-doropdown-content a{
padding-top: 7px;
padding-bottom: 7px;
text-align: left;
width: calc(100% - 8px);
}
.headnav-dropdown:hover .header-doropdown-content{
display: flex;
align-items: flex-start;
flex-direction: column;
}
.burger-menue{
visibility:hidden;
}
@media(max-width: 790px){
.burger-menue{
visibility:visible;
}
.headnav{
display: none;
}
}
.burger-button{
background: white;
border: none;
margin: 0;
padding: 7px;
}
.burger_content{
position: absolute;
top: 50px;
transform: translate(-340px, 0);
display:flex;
flex-direction: column;
align-items: center;
gap: 30px;
background: white;
width: 375px;
box-shadow: 0 5px 8px 0 rgba(0,0,0,0.2);
z-index: 1;
border-radius: 0 0 10px 10px;
padding-left: 10px;
padding-right: 10px;
padding-top: 15px;
padding-bottom: 50px;
}
.burger-section-1{
width: 100%;
padding-left: 60px;
display: inherit;
flex-direction: column;
align-items: flex-start;
}
.Burger-grosse-Nav{
padding: 9px;
color: black;
width: 82%;
}
.burger-section-2{
width: 100%;
display: inherit;
justify-content: center;
flex-direction: row;
flex-wrap: wrap;
gap: 14px;
max-width: 400px;
}
.Burger-grosse-Nav:hover{
background: var(--light-grey);
}
.burger-x-button{
background: var(--dunkel-orange);
margin: 0;
padding: 0;
width: 55px;
height: 55px;
border-radius: 50px;
border: none;
display: flex;
justify-content: center;
align-items: center;
box-shadow: none;
}
.burger-x-button:hover{
box-shadow: 1px 1px 24px 0 rgba(0,0,0,0.15);
transform: scale(103%)
}
.burger-logo{
width: 83px;
}
@media(max-width: 470px){
.burger_content{
left: 0;
transform: translate(0, 0);
width: 100vw;
height: 100vh;
box-shadow: none;
border-radius: 0;
padding-left: 2vw;
padding-right: 2vw;
}
}
footer{
padding: 60px 100px;
display: flex;
justify-content: space-between;
gap:80px;
}
.linke-vier-footer-bloecke{
display: flex;
justify-content: space-around;
flex-flow: wrap;
width: 100%;
gap: 100px;
}
.zweier-footer-bloecke{
display: flex;
justify-content: space-between;
width: 40%;
min-width: 506px;
gap: 100px;
}
.footer-bloecke{
display: flex;
flex-direction: column;
gap: 10px;
width: 250px;
min-width: 250px;
}
@media (max-width:1840px){
.zweier-footer-bloecke{
width: 80%;
}
.linke-vier-footer-bloecke{
gap: 40px;
justify-content: flex-start;
}
}
@media (max-width:1125px){
footer{
flex-direction: column;
gap:40px;
}
.zweier-footer-bloecke{
width: 100%;
}
}
.Footer-Mobile{
display: none;
}
@media(max-width: 727px){
footer{
padding: 0 0 100px 0;
justify-content: center;
}
.footer-bloecke{
display: none;
}
.Footer-Mobile{
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
gap: 30px;
}
.footer-section-1{
width: 300px;
display: flex;
flex-direction: column;
align-items: flex-start;
}
.footer-grosse-Nav{
padding: 9px;
color: white;
width: 92%;
}
}
.Segment-Ueberschrift{
grid-column: 3/15;
padding-bottom: 40px;
}
.Kacheln-Segment{
grid-column: 3 / 15;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 20px;
align-items: stretch;
}
.Vorschau-Kachel{
width: calc(33.33% - 15px);
aspect-ratio: 16/9;
min-width: 300px;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
gap: 10px;
background-blend-mode: luminosity;
color: white;
}
.Kacheln-Schrift{
text-transform: uppercase;
}
.pfeil-pille{
width: 54px;
height: 20px;
border: solid 2px;
border-radius: 20px;
display: flex;
justify-content: center;
box-shadow: 0 4px 5.4px 0 rgba(0, 0, 0, 0.50);
}
.pfeil-kachel{
stroke: white;
width: 70%;
stroke-width:2px;
}
.Vorschau-Kachel:hover{
background-blend-mode: normal;
color: var(--dunkel-orange);
}
.Vorschau-Kachel:hover .pfeil-kachel{
stroke: var(--dunkel-orange);
}
.Projekt-Vorschau-Kachel{
width: calc(33.33% - 15px);
aspect-ratio: 385/455;
min-width: 300px;
display: flex;
gap: 7%;
flex-direction: column;
align-items: center;
justify-content: center;
background: var(--light-grey);
color: var(--dark-grey);
font-size: 1vw;
}
.Projekt-Vorschau-Kachel-leer{
width: calc(33.33% - 15px);
aspect-ratio: 385/455;
min-width: 300px;
background: var(--light-grey);
opacity: 40%;
}
.Projekt-Vorschau-Kachel-leer-2er{
width: calc(33.33% - 15px);
aspect-ratio: 385/455;
min-width: 300px;
background: var(--light-grey);
opacity: 40%;
}
.Projektkachel-Bild{
width: 90%;
transition: 0.2s;
}
.Projektkachel-Bild:hover{
width: 100%;
}
.Projekt-Kachel-Kreis{
width: 25%;
aspect-ratio: 1/1;
border: solid 3px;
border-radius: 50%;
border-color: var(--dunkel-orange);
display: flex;
justify-content: center;
align-items: center;
transition: 0.2s;
}
.Projekt-Vorschau-Kachel:hover{
color: var(--dunkel-orange);
}
.Projekt-Vorschau-Kachel:hover .Projekt-Kachel-Kreis{
transform: scale(110%);
}
@media (max-width: 1270px){
.Segment-Ueberschrift{
grid-column: 2 / 16;
}
.Kacheln-Segment{
grid-column: 2 / 16;
}
}
@media (max-width: 1093px){
.Vorschau-Kachel{
width: calc(50% - 15px);
}
.Projekt-Vorschau-Kachel{
width: calc(50% - 15px);
font-size: 0.8em;
}
.Projekt-Vorschau-Kachel-leer{
width: calc(50% - 15px);
}
.Projekt-Vorschau-Kachel-leer-2er{
display: none;
}
}
@media (max-width: 727px){
.Vorschau-Kachel{
width: 100%;
}
.Projekt-Vorschau-Kachel{
width: 100%;
font-size: 1em;
}
.Projekt-Vorschau-Kachel-leer{
display: none;
}
.Projekt-Vorschau-Kachel-leer-2er{
display: none;
}
}
.Scrollnav-oben{
padding-top: 97px;
padding-right: 134px;
display: flex;
flex-direction: row;
gap: 40px;
justify-content: flex-end;
flex-wrap: wrap;
}
@media(max-width:790px){
.Scrollnav-oben{
padding-top: 68px;
padding-right: 82px;
}
}
.scroll-nav-vertikal{
display: flex;
flex-direction: column;
gap: 15px;
width: fit-content;
}
.button-scroll-nav-vertikal{
width: 100%;
justify-content: left;
}
/* HOMEPAGE */
.hero-header{
width: 100vw;
height: 56,25vw;
grid-template-rows: 3vw 12vw 13vw 5vw 5vw;
padding-top: calc(60px + 6vh);
padding-bottom: 6vh;
}
.Heroheader-schrift-fett{
color: var(--Leichtes-Grau);
font-family: Raleway;
font-size: 9.5vw;
font-style: normal;
font-weight: 560;
margin: 0;
}
#Melanie-Header-text{
grid-column: 3/10;
grid-row: 2/3;
}
#Muessig-Header-text{
grid-column: 3/10;
grid-row: 3/4;
}
#Portfolio-Header-text{
grid-column: 3/10;
grid-row: 4/5;
color: #000;
font-family: Raleway;
font-size: 5.3vw;
font-style: normal;
font-weight: 250;
line-height: normal;
letter-spacing: 1.5vw;
}
#kasten-heroheader-bild{
grid-column: 9/16;
grid-row: 1/6;
display: flex;
justify-content: center;
align-items: center;
}
#Heroheader-Bild{
width: 38vw;
aspect-ratio: 1/1;
}
#kasten-heroheader-pfeil{
grid-column: 8/10;
grid-row: 6/7;
display: flex;
justify-content: center;
}
#Heroheader-pfeil{
width: 3.5vw;
padding: 3vh 0;
}
@media(orientation:portrait){
.hero-header{
grid-template-rows: 8vh 55vh 8vh 10vh ;
padding-top: calc(50px + 5vh);
padding-bottom: 3vh;
}
.Heroheader-schrift-fett{
font-size: 10.5vw;
}
#Melanie-Header-text{
grid-column: 2/10;
grid-row: 1/2;
}
#Muessig-Header-text{
grid-column: 10/16;
grid-row: 1/2;
}
#Portfolio-Header-text{
grid-column: 2/16;
grid-row: 3/4;
color: var(--Leichtes-Grau);
font-size: 10.5vw;
letter-spacing: 3.3vw;
}
#kasten-heroheader-bild{
grid-column: 2/16;
grid-row: 2/3;
}
#Heroheader-Bild{
width: 50vh;
max-width: 90vw;
}
#kasten-heroheader-pfeil{
grid-column: 2/16;
grid-row: 4/5;
}
#Heroheader-pfeil{
width: 4.5vh;
padding: 0;
}
}
#Kachel-Fotografie{
background: url(Bilder/Kachel-Bilder/Fotografie-Kachelbild.jpg), white;
background-repeat: no-repeat;
background-size:cover;
}
#Kachel-Film{
background: url(Bilder/Kachel-Bilder/Film-Kachelbild.jpg), white;
background-repeat: no-repeat;
background-size:cover;
}
#Kachel-Logo{
background: url(Bilder/Kachel-Bilder/Logo-Kachelbild.jpg), white;
background-repeat: no-repeat;
background-size:cover;
}
#Kachel-Printprodukte{
background: url(Bilder/Kachel-Bilder/Printprodukte-Kachelbild.jpg), white;
background-repeat: no-repeat;
background-size:cover;
}
#Kachel-Corporate-Design{
background: url(Bilder/Kachel-Bilder/Corporate-Design-Kachelbild.jpg), white;
background-repeat: no-repeat;
background-size:cover;
}
#Kachel-Analoge-Arbeiten{
background: url(Bilder/Kachel-Bilder/Analoge-Arbeiten-Kachelbild.jpg), white;
background-repeat: no-repeat;
background-size:cover;
}
#bild-mel-kamera{
grid-column: 3/7;
grid-row: 2/7;
width: 100%;
margin-bottom: 0;
}
.ueber-mich-teaser-rechts{
grid-column: 8/15;
}
.ueber-mich-teaser-textabstand{
margin-bottom: 10px;
}
#ueber-mich-teaser-berufsbezeichnung{
margin-bottom: 30px;
}
#ueber-mich-teaser-fliesstext{
margin-bottom: 30px;
}
@media (max-width: 1270px){
#bild-mel-kamera{
grid-column: 2/8;
}
.ueber-mich-teaser-rechts{
grid-column: 9/16;
}
}
@media (max-width: 727px){
.ueber-mich-teaser-rechts{
grid-column: 2/16;
}
#bild-mel-kamera{
grid-column: 2/16;
grid-row: 4/5;
width: 100%;
margin-bottom: 30px;
}
}
/* ÜBER MICH */
#Ueber-mich-header{
padding-top: 80px;
}
#Ueber-mich-Header-links{
grid-column: 5/9;
}
#Ueber-mich-Header-Bild{
width: 100%;
aspect-ratio: 1/1;
background-image: url(Bilder/Bilder-von-mir/Mel-CSD.jpg);
background-size: cover;
background-position: center;
}
#Ueber-mich-Header-rechts{
grid-column: 10/14;
display: flex;
flex-direction: column;
align-items: flex-start;
text-align: left;
}
#Ueber-Mich-Header-Ueberschrift{
padding-bottom: 7px;
}
#Ueber-mich-Header-scrollnav{
padding-top: 30px;
}
.Motivation-Zierschrift{
grid-column: 3/8;
padding-bottom: 50px;
}
#letze-Motivation-Zierschrift{
padding-bottom: 0;
}
.Motivation-Fliesstext{
grid-column: 8/15;
padding-bottom: 0;
}
#Philospohie-Links{
grid-column: 3/9;
}
#philosopie-rechts{
grid-column: 10/16;
height: 100%;
max-height: 80vw;
background-image: url(Bilder/Bilder-von-mir/Mel-Tuerrahmen.jpg);
background-position: center;
background-size: cover;
display: flex;
}
.Philosophie-Zierschrift{
padding-bottom: 15px;
}
.Philosophie-Fliesstext{
padding-bottom: 40px;
}
#Letzter-Philosophie-Fliesstext{
padding-bottom: 0;
}
#Segmentueberschrift-Designprozess{
padding-bottom: 20px;
}
#Designprozess-erklaerung{
grid-column: 3/11;
padding-bottom: 70px;
}
#Diagramm-Designprozess{
grid-column: 5/13;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 15px;
}
.Designprozess-pfeil-gerade{
padding-left: 50px;
height: 60px;
}
.Designprozess-pfeil-karussel{
width: 50px;
padding-left: 50px;
}
.Designprozess-pfeil-krumm{
height: 26px;
padding-left: 20px;
}
.pefil-schleife{
display: flex;
column-gap: 10px;
}
.Designprozess-doppelpfeil{
width: 95px;
}
#Designprozess-Umsetzung{
display: flex;
flex-direction: row;
column-gap: 30px;
}
#designprozess-Kontakt{
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
gap: 15px;
margin-top: 70px;
}
#Kachel-Zielgruppe{
background: url(Bilder/Kachel-Bilder/Zielgruppe-Kachelbild.jpg), white;
background-repeat: no-repeat;
background-size:cover;
}
#Kachel-Marktanalyse{
background: url(Bilder/Kachel-Bilder/Marktanalyse-Kachelbild.jpg), white;
background-repeat: no-repeat;
background-size:cover;
}
#Kachel-Strategie{
background: url(Bilder/Kachel-Bilder/Strategie-Kachelbild.jpg), white;
background-repeat: no-repeat;
background-size:cover;
}
#Kachel-Skizzen{
background: url(Bilder/Kachel-Bilder/Skizzen-Kachelbild.jpg), white;
background-repeat: no-repeat;
background-size:cover;
}
#Kachel-Mockup{
background: url(Bilder/Kachel-Bilder/Mockup-Kachelbild.jpg), white;
background-repeat: no-repeat;
background-size:cover;
}
#Kachel-Endprodukt{
background: url(Bilder/Kachel-Bilder/Endprodukt-Kachelbild.jpg), white;
background-repeat: no-repeat;
background-size:cover;
}
#Interessen-Ueberschrift{
margin-bottom: 70px;
}
.Interressen-Kachel{
background: var(--light-grey);
padding-top: 30px;
padding-left: 30px;
padding-right: 30px;
margin-bottom: 20px;
}
.Interessen-Subhead{
padding-bottom: 30px;
}
.Interessen-Text{
padding-bottom: 30px;
}
.interessen-button{
float: right;
align-self: flex-end;
margin-bottom: 20px;
}
#Interessen-1{
grid-column: 3/9;
}
#Interessen-2{
grid-column: 9/15;
}
#Interessen-3{
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
grid-column: 3/7;
}
#blumenstrauss-interessen{
width: 70%;
}
#Interessen-4{
grid-column: 7/11;
order: 0;
}
#Interessen-5{
grid-column: 11/15;
display: flex;
flex-direction: column;
justify-content: space-between;
padding-bottom: 0;
gap: 0;
}
#ohrring-1{
width: 70px;
position: relative;
left: -30px;
}
#Ohring-Text-1{
width: 70%;
}
#ohrring-2{
width: calc(100% + 60px);
position: relative;
left: -30px;
float: right;
shape-outside: url(Bilder/Ueber-mich-interessen/ohrring-2.png);
display: block;
}
#ohrring-gruppe{
display: flex;
flex-direction: row;
align-items: center;
}
#Ohring-Text-2{
width: 90%;
}
#Interessen-6{
grid-column: 3/7;
order: 0;
display: flex;
flex-direction: column;
justify-content: space-between;
}
#schloss-interessen{
width: 200px;
shape-margin: 10px;
}
#Interessen-7{
grid-column: 7/11;
order: 0;
}
#feminismus-interessen{
float: left;
shape-outside: url(Bilder/Ueber-mich-interessen/Feminismus.svg);
shape-margin: 3px;
width: 50%;
position: relative;
left: -25px;
}
#Interessen-8{
grid-column: 11/15;
order: 0;
display: flex;
flex-direction: column;
justify-content: space-between;
}
#seifenblasen-interessen{
width: calc(100% + 60px);
position: relative;
left: -30px;
}
@media (max-width: 1849px){
#delfin-interessen{
margin-top: calc(391px - 13vw);
}
}
@media (max-width: 1270px){
#Ueber-mich-Header-links{
grid-column: 3/9;
}
#Ueber-mich-Header-rechts{
grid-column: 10/15;
}
.Motivation-Zierschrift{
grid-column: 2/8;
}
.Motivation-Fliesstext{
grid-column: 8/16;
}
#Philospohie-Links{
grid-column: 2/16;
}
#philosopie-rechts{
display: none;
}
#Designprozess-erklaerung{
grid-column: 2/11;
}
#Diagramm-Designprozess{
grid-column: 4/14;
}
#Interessen-1{
grid-column: 3/15;
}
#faecher-interessen{
margin-top: calc(150px - 10vw);
}
#Interessen-2{
grid-column: 3/15;
}
#delfin-interessen{
margin-top: calc(300px - 20vw);
}
#Interessen-3{
grid-column: 3/9;
}
#Interessen-4{
grid-column: 3/15;
order: 1;
}
#Interessen-5{
grid-column: 9/15;
padding-bottom: 30px;
}
#ohrring-2{
display: none;
}
#blumenstrauss-interessen{
width: 40%;
}
#Tonangel-interessen{
margin-top: calc(220px - 15vw);
}
#Interessen-6{
order: 1;
grid-column: 3/9;
}
#Interessen-7{
order: 2;
grid-column: 3/15;
}
#Interessen-8{
order: 1;
grid-column: 9/15;
}
#feminismus-interessen{
width: 25%;
position: relative;
left: -25px;
}
}
@media (max-width: 1093px){
#Diagramm-Designprozess{
grid-column: 2/16;
}
}
@media (max-width: 880px){
#Ueber-mich-Header-links{
grid-column: 1/17;
padding-bottom: 40px;
}
#Ueber-mich-header{
padding-top: 0;
}
#Ueber-mich-Header-Bild{
aspect-ratio: 4/3;
}
#Ueber-mich-Header-rechts{
grid-column: 1/17;
align-items: center;
text-align: center;
}
#Interessen-1{
grid-column: 2/16;
}
#Interessen-2{
grid-column: 2/16;
}
#Interessen-3{
grid-column: 2/9;
}
#Interessen-4{
grid-column: 2/16;
}
#Interessen-5{
grid-column: 9/16;
}
#Interessen-6{
grid-column: 2/9;
}
#Interessen-7{
grid-column: 2/16;
}
#Interessen-8{
grid-column: 9/16;
}
}
@media (max-width: 727px){
#Ueber-mich-Header-Bild{
aspect-ratio: 1/1;
}
.Motivation-Zierschrift{
grid-column: 2/16;
padding-bottom: 10px;
}
.Motivation-Fliesstext{
grid-column: 2/16;
padding-bottom: 50px;
}
#Designprozess-erklaerung{
grid-column: 2/16;
}
#Interessen-3{
grid-column: 2/16;
}
#Interessen-5{
grid-column: 2/16;
gap: 20px;
}
#Interessen-6{
grid-column: 2/16;
}
#Interessen-8{
grid-column: 2/16;
}
}
@media (max-width: 580px){
#faecher-interessen{
display: none;
}
#delfin-interessen{
display: none;
}
#Tonangel-interessen{
display: none;
}
.Designprozess-doppelpfeil{
width: 95px;
rotate: 90deg;
transform: translate(0 , -10px);
}
#Designprozess-Umsetzung{
display: flex;
flex-direction: column;
gap: 50px;
}
}
/* FOTOGRAFIE */
.foto-anordnung{
grid-column: 3/15;
display: flex;
flex-flow: row wrap;
gap: 20px;
}
.bild-duenn{
width: calc(33.33% - 14px);
}
.bild-breit{
width: calc(50% - 10px);
}
.bild-breit-klein{
width: calc(50% - 10px);
}
.bild-sehr-breit{
width: calc(66.66% - 7px);
}
.bild-duenn-gross{
width: calc(33.33% - 14px);
}
.Portrait-reihenfolge-1{
order: 1;
}
.Portrait-reihenfolge-2{
order: 1;
}
.Portrait-reihenfolge-3{
order: 1;
}
.Portrait-reihenfolge-4{
order: 1;
}
.Portrait-reihenfolge-5{
order: 1;
}
.Portrait-reihenfolge-6{
order: 1;
}
.Portrait-reihenfolge-7{
order: 1;
}
.anordnung-letzte-Produktfotos{
width: 100%;
display: flex;
flex-direction: row;
gap: 20px;
}
#Produktfoto-Plus{
width: 100%;
aspect-ratio: 3/2;
}
.Produktfoto-reihenfolge-1{
order: 1;
}
.Produktfoto-reihenfolge-2{
order: 1;
}
.Produktfoto-reihenfolge-3{
order: 1;
}
.Kunstfoto-reihenfolge-1{
order: 1;
}
.Kunstfoto-reihenfolge-2{
order: 1;
}
.Kunstfoto-reihenfolge-3{
order: 1;
}
.Kunstfoto-reihenfolge-4{
order: 1;
}
.Naturfoto-reihenfolge-1{
order: 1;
}
.Naturfoto-reihenfolge-2{
order: 1;
}
.Naturfoto-reihenfolge-3{
order: 1;
}
.Naturfoto-reihenfolge-4{
order: 1;
}
.Naturfoto-reihenfolge-5{
order: 1;
}
.Naturfoto-reihenfolge-6{
order: 1;
}
.Naturfoto-reihenfolge-7{
order: 1;
}
.Naturfoto-reihenfolge-8{
order: 1;
}
.Naturfoto-reihenfolge-9{
order: 1;
}
@media (max-width: 1270px){
.foto-anordnung{
grid-column: 2/16;
}
}
@media (max-width: 1093px){
.bild-duenn{
width: calc(50% - 10px);
}
.bild-breit{
width: 100%;
}
.bild-breit-klein{
width: calc(50% - 10px);
}
.bild-sehr-breit{
width: 100%;
}
.bild-duenn-gross{
width: 100%;
}
.Portrait-plus-Kachel{
width: calc(50% - 10px);
}
.Portrait-reihenfolge-1{
order: 1;
}
.Portrait-reihenfolge-2{
order: 2;
}
.Portrait-reihenfolge-3{
order: 3;
}
.Portrait-reihenfolge-4{
order: 4;
}
.Portrait-reihenfolge-5{
order: 5;
}
.Portrait-reihenfolge-6{
order: 6;
}
.Portrait-reihenfolge-7{
order: 7;
}
.Produktfoto-reihenfolge-1{
order: 1;
}
.Produktfoto-reihenfolge-2{
order: 2;
}
.Produktfoto-reihenfolge-3{
order: 3;
}
.anordnung-letzte-Produktfotos{
width: calc(50% - 10px);
flex-direction: column;
}
#Produktfoto-Plus{
aspect-ratio: 3/2.37;
}
.Kunstfoto-reihenfolge-1{
order: 1;
}
.Kunstfoto-reihenfolge-2{
order: 2;
}
.Kunstfoto-reihenfolge-3{
order: 3;
}
.Kunstfoto-reihenfolge-4{
order: 4;
}
.Naturfoto-reihenfolge-1{
order: 1;
}
.Naturfoto-reihenfolge-2{
order: 2;
}
.Naturfoto-reihenfolge-3{
order: 3;
}
.Naturfoto-reihenfolge-4{
order: 4;
}
.Naturfoto-reihenfolge-5{
order: 5;
}
.Naturfoto-reihenfolge-6{
order: 6;
}
.Naturfoto-reihenfolge-7{
order: 7;
}
.Naturfoto-reihenfolge-8{
order: 8;
}
.Naturfoto-reihenfolge-9{
order: 9;
}
}
@media (max-width: 727px){
.bild-duenn{
width: 100%;
}
.bild-breit{
width: 100%;
}
.bild-sehr-breit{
width: 100%;
}
.bild-breit-klein{
width: 100%;
}
.Portrait-plus-Kachel{
width: 100%;
}
.anordnung-letzte-Produktfotos{
width: 100%;
flex-direction: column;
}
#Produktfoto-Plus{
aspect-ratio: 3/2;
gap: 3vw;
}
}
/* FILM */
.Videovorschau-kacheln{
width: calc(33.33% - 15px);
min-width: 300px;
display: flex;
flex-direction: column;
background: var(--dark-grey);
}
.Videovorschau-kachel-leer{
width: calc(33.33% - 15px);
display: flex;
}
.Videovorschau{
width: 100%;
aspect-ratio: 16/9;
background-size: cover;
}
.Videovorschau-textfeld{
padding: 30px;
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100%;
row-gap: 30px;
color: white;
}
.film-stats-vorschau{
display: flex;
flex-direction: column;
row-gap: 10px;
}
#Videovorschau1-1{
background-image: url(Bilder/Video-Vorschaubilder/Preview-Umwerfender-Vortrag.jpg);
}
#Videovorschau1-2{
background-image: url(Bilder/Video-Vorschaubilder/Preview-Friseure.jpg);
}
#Videovorschau1-3{
background-image: url(Bilder/Video-Vorschaubilder/Preview-Maskenbildner.jpg);
}
#Videovorschau1-4{
background-image: url(Bilder/Video-Vorschaubilder/Youtube-SWT-Banner.jpg);
}
#Videovorschau1-5{
background-image: url(Bilder/Video-Vorschaubilder/Preview-Lens-Distortion.jpg);
}
#Videovorschau2-1{
background-image: url(Bilder/Video-Vorschaubilder/Preview-Hakim%20Ludin.jpg);
}
#Videovorschau2-2{
background-image: url(Bilder/Video-Vorschaubilder/Gorgonzola-Preview.jpg);
}
#Videovorschau2-3{
background-image: url(Bilder/Video-Vorschaubilder/Preview-Ueber-Nacht-Gehen-Lassen.jpg);
}
#Videovorschau2-4{
background-image: url(Bilder/Video-Vorschaubilder/SWR_Logo-rahmen.jpg);
}
@media (max-width: 1093px){
.Videovorschau-kacheln{
width: calc(50% - 15px);
}
.Videovorschau-kachel-leer{
width: calc(50% - 15px);
}
}
@media (max-width: 727px){
.Videovorschau-kacheln{
width: 100%;
}
.Videovorschau-kachel-leer{
display: none;
}
}
/* Filmunterseiten Allgemein */
.Filmtitel-Segment{
grid-column: 3/15;
display: flex;
margin-top: 30px;
column-gap: 27px;
justify-content: flex-start;
align-items: center;
margin-bottom: 70px;
}
.Zurrueck-Pfeil-Rund{
height: 53.5px;
width: 53.5px;
min-width: 53.5px;
border-radius: 27px;
display: flex;
justify-content: center;
align-items: center;
background-color: var(--dunkel-orange)
}
.Pfeil-links-zurrueck{
width: 60%;
}
.Trennlinie-Fimtitelsegment{
width: 2px;
min-width: 2px;
height: 100%;
background-color: black;
}
.Film-Segment{
grid-column: 3/15;
}
.Film-gross{
width: 100%;
margin-top: 10px;
margin-bottom: 50px;
}
.Spaltentext{
width: 100%;
column-count: 3;
}
.BTS-Titel{
grid-column: 3/15;
margin-top: 70px;
}
.BTS-Bilder{
background-size: cover;
}
.Videovorschau-kacheln-klein{
width: calc(33.33% - 15px);
background-color: var(--dark-grey);
display: flex;
flex-direction: column;
color: white;
row-gap: 10px;
text-align: center;
padding-bottom: 10px;
}
@media (min-width: 1271px){
.Filmtitel{
font-size: 3vw;
}
}
@media (max-width: 1270px){
.Filmtitel-Segment{
grid-column: 2 / 16;
}
.Film-Segment{
grid-column: 2/16;
}
.BTS-Titel{
grid-column: 2/16;
}
}
@media (max-width: 1093px){
.Spaltentext{
column-count: 2;
}
.Videovorschau-kacheln-klein{
width: calc(50% - 15px);
}
}
@media (max-width: 727px){
.Filmtitel{
font-size: 5vw;
}
.Zurrueck-Pfeil-Rund{
height: 40px;
width: 40px;
min-width: 40px;
}
.Spaltentext{
column-count: 1;
}
.Videovorschau-kacheln-klein{
width: 100%;
}
}
/* Gorgonzola */
#Gorgonzola-BTS-1{
background-image: url(Bilder/BTS-Bilder/Gorgonzola/Gorgonzola_1.jpg);
}
#Gorgonzola-BTS-2{
background-image: url(Bilder/BTS-Bilder/Gorgonzola/Gorgonzola_2.jpg);
}
#Gorgonzola-BTS-3{
background-image: url(Bilder/BTS-Bilder/Gorgonzola/Gorgonzola_3.jpg);
}
#Gorgonzola-BTS-4{
background-image: url(Bilder/BTS-Bilder/Gorgonzola/Gorgonzola_4.jpg);
}
#Gorgonzola-BTS-5{
background-image: url(Bilder/BTS-Bilder/Gorgonzola/Gorgonzola_5.jpg);
}
/* Über Nacht gehen lassen */
#Ueber-nacht-BTS-1{
background-image: url(Bilder/BTS-Bilder/Ueber-Nacht-Gehen-Lassen/Ueber-Nacht_1.jpg);
width: calc(33.33% - 15px);
}
#Ueber-nacht-BTS-2{
background-image: url(Bilder/BTS-Bilder/Ueber-Nacht-Gehen-Lassen/Ueber-Nacht_2.jpg);
width: calc(33.33% - 15px);
}
#Ueber-nacht-BTS-3{
background-image: url(Bilder/BTS-Bilder/Ueber-Nacht-Gehen-Lassen/Ueber-Nacht_3.jpg);
width: calc(33.33% - 15px);
}
#Ueber-nacht-BTS-4{
background-image: url(Bilder/BTS-Bilder/Ueber-Nacht-Gehen-Lassen/Ueber-Nacht_4.jpg);
order: 0;
aspect-ratio: 2/3;
}
#Ueber-nacht-BTS-5{
background-image: url(Bilder/BTS-Bilder/Ueber-Nacht-Gehen-Lassen/Ueber-Nacht_5.jpg);
order: 0;
aspect-ratio: 2/3;
}
#Ueber-nacht-BTS-6{
background-image: url(Bilder/BTS-Bilder/Ueber-Nacht-Gehen-Lassen/Ueber-Nacht_6.jpg);
order: 0;
aspect-ratio: 2/3;
align-self: stretch;
}
#Ueber-Nacht-querformat-bilder-box{
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-between;
order: 0;
}
@media (max-width: 1093px){
#Ueber-Nacht-querformat-bilder-box{
order: 1;
flex-direction: column;
width: calc(50% - 15px);
row-gap: 20px;
}
#Ueber-nacht-BTS-1{
width: 100%;
}
#Ueber-nacht-BTS-2{
width: 100%;
}
#Ueber-nacht-BTS-3{
width: 100%;
}
#Ueber-nacht-BTS-6{
align-self: flex-start;
}
}
@media(max-width: 727px){
#Ueber-Nacht-querformat-bilder-box{
width: 100%;
}
}
/* Tanzende Finger */
#Tanzende-Finger-Trailer{
aspect-ratio: 16/9;
border: 0;
}
/* LAYOUT & BRANDING */
#Flyer-1-box{
height: 25vw;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.Holundra-Eroeffnungsflyer{
width: 100%;
height: 66%;
background-image: url(Bilder/Branding-und-Layout/Flyer/Einladung-Eroeffnung.jpg);
background-size: 100% 100%;
background-repeat: no-repeat;
animation-name: Holundra-Eroeffnungsflyer-umdrehen-rw;
animation-duration: 1s;
}
.Holundra-Eroeffnungsflyer-active{
animation-name: Holundra-Eroeffnungsflyer-umdrehen;
animation-fill-mode: forwards;
}
@keyframes Holundra-Eroeffnungsflyer-umdrehen{
0% {width: 100%; background-image: url(Bilder/Branding-und-Layout/Flyer/Einladung-Eroeffnung.jpg);}
49% {width: 0%; background-image: url(Bilder/Branding-und-Layout/Flyer/Einladung-Eroeffnung.jpg);}
50% {width: 0%; background-image: url(Bilder/Branding-und-Layout/Flyer/Einladung-Eroeffnung2.jpg);}
100% {width: 100%; background-image: url(Bilder/Branding-und-Layout/Flyer/Einladung-Eroeffnung2.jpg);}
}
@keyframes Holundra-Eroeffnungsflyer-umdrehen-rw{
0% {width: 100%; background-image: url(Bilder/Branding-und-Layout/Flyer/Einladung-Eroeffnung2.jpg);}
49% {width: 0%; background-image: url(Bilder/Branding-und-Layout/Flyer/Einladung-Eroeffnung2.jpg);}
50% {width: 0%; background-image: url(Bilder/Branding-und-Layout/Flyer/Einladung-Eroeffnung.jpg);}
100% {width: 100%; background-image: url(Bilder/Branding-und-Layout/Flyer/Einladung-Eroeffnung.jpg);}
}
#Flyer-2-box{
height: 40vw;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.Umblaetter-Gruppe{
width: 100%;
height: 80%;
}
.Kursprogramm-H-1{
height: 90%;
width: 39%;
background-image: url(Bilder/Branding-und-Layout/Flyer/Wickelfalz-S1.png);
background-size: 100% 100%;
background-repeat: no-repeat;
animation-name: Kursprogramm-Oeffnen-rw;
animation-duration: 0.8s;
animation-timing-function: linear;
position: relative;
left: 50%;
top: 10%;
z-index: 1;
}
.Kursprogramm-H-1-active{
animation-name: Kursprogramm-Oeffnen;
animation-fill-mode: forwards;
}
.Kursprogramm-H-2{
height: 90%;
width: 39%;
background-image: url(Bilder/Branding-und-Layout/Flyer/Wickelfalz-S3.png);
background-size: 100% 100%;
background-repeat: no-repeat;
position: relative;
left: 50%;
top: -80%;
animation-name: Kursprogramm-Oeffnen2-rw;
animation-duration: 0.8s;
animation-timing-function: linear;
}
.Kursprogramm-H-2-active{
animation-name: Kursprogramm-Oeffnen2;
animation-fill-mode: forwards;
}
@keyframes Kursprogramm-Oeffnen{
0% {width: 39%; left: 50%; background-image: url(Bilder/Branding-und-Layout/Flyer/Wickelfalz-S1.png);}
49% {width: 0%; left: 50%; background-image: url(Bilder/Branding-und-Layout/Flyer/Wickelfalz-S1.png);}
50% {width: 0%; left: 50%; background-image: url(Bilder/Branding-und-Layout/Flyer/Wickelfalz-S2.png);}
100% {width: 39%; left: 11%; background-image: url(Bilder/Branding-und-Layout/Flyer/Wickelfalz-S2.png);}
}
@keyframes Kursprogramm-Oeffnen-rw{
0% {width: 39%; left: 11%; background-image: url(Bilder/Branding-und-Layout/Flyer/Wickelfalz-S2.png);}
49% {width: 0%; left: 50%; background-image: url(Bilder/Branding-und-Layout/Flyer/Wickelfalz-S2.png);}
50% {width: 0%; left: 50%; background-image: url(Bilder/Branding-und-Layout/Flyer/Wickelfalz-S1.png);}
100% {width: 39%; left: 50%; background-image: url(Bilder/Branding-und-Layout/Flyer/Wickelfalz-S1.png);}
}
@keyframes Kursprogramm-Oeffnen2{
0% {height: 90%; top: -80%; background-image: url(Bilder/Branding-und-Layout/Flyer/Wickelfalz-S3.png);}
99% {height: 90%; top: -80%; background-image: url(Bilder/Branding-und-Layout/Flyer/Wickelfalz-S3.png);}
100% {height: 96.5%; top: -86.6%; background-image: url(Bilder/Branding-und-Layout/Flyer/Wickelfalz-S4.png);}
}
@keyframes Kursprogramm-Oeffnen2-rw{
0% {height: 96.5%; top: -86.6%; background-image: url(Bilder/Branding-und-Layout/Flyer/Wickelfalz-S4.png);}
1% {height: 90%; top: -80%; background-image: url(Bilder/Branding-und-Layout/Flyer/Wickelfalz-S3.png);}
100% {height: 90%; top: -80%; background-image: url(Bilder/Branding-und-Layout/Flyer/Wickelfalz-S3.png);}
}
#Flyer-3-box{
height: 40vw;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.FW-Flyer{
height: 80%;
width: 32%;
background-image: url(Bilder/Branding-und-Layout/Flyer/Flyer-Ferienwohnungen.jpg);
background-size: 100% 100%;
background-repeat: no-repeat;
animation-name: FW-Flyer-Umdrehen-rw;
animation-duration: 1s;
}
.FW-Flyer-aktiv{
animation-name: FW-Flyer-Umdrehen;
animation-fill-mode: forwards;
}
@keyframes FW-Flyer-Umdrehen{
0% {width: 32%; background-image: url(Bilder/Branding-und-Layout/Flyer/Flyer-Ferienwohnungen.jpg);}
49% {width: 0%; background-image: url(Bilder/Branding-und-Layout/Flyer/Flyer-Ferienwohnungen.jpg);}
50% {width: 0%; background-image: url(Bilder/Branding-und-Layout/Flyer/Flyer-Ferienwohnungen2.jpg);}
100% {width: 32%; background-image: url(Bilder/Branding-und-Layout/Flyer/Flyer-Ferienwohnungen2.jpg);}
}
@keyframes FW-Flyer-Umdrehen-rw{
0% {width: 32%; background-image: url(Bilder/Branding-und-Layout/Flyer/Flyer-Ferienwohnungen2.jpg);}
49% {width: 0%; background-image: url(Bilder/Branding-und-Layout/Flyer/Flyer-Ferienwohnungen2.jpg);}
50% {width: 0%; background-image: url(Bilder/Branding-und-Layout/Flyer/Flyer-Ferienwohnungen.jpg);}
100% {width: 32%; background-image: url(Bilder/Branding-und-Layout/Flyer/Flyer-Ferienwohnungen.jpg);}
}
#Flyer-4-box{
height: 35vw;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.KF-Flyer{
height: 90%;
width: 64%;
background-image: url(Bilder/Branding-und-Layout/Flyer/Klimafest-Flugblatt.jpg);
background-size: 100% 100%;
background-repeat: no-repeat;
animation-name: KF-Flyer-Umdrehen-rw;
animation-duration: 1s;
}
.KF-Flyer-aktiv{
animation-name: KF-Flyer-Umdrehen;
animation-fill-mode: forwards;
}
@keyframes KF-Flyer-Umdrehen{
0% {width: 64%; background-image: url(Bilder/Branding-und-Layout/Flyer/Klimafest-Flugblatt.jpg);}
49% {width: 0%; background-image: url(Bilder/Branding-und-Layout/Flyer/Klimafest-Flugblatt.jpg);}
50% {width: 0%; background-image: url(Bilder/Branding-und-Layout/Flyer/Klimafest-Flugblatt2.jpg);}
100% {width: 64%; background-image: url(Bilder/Branding-und-Layout/Flyer/Klimafest-Flugblatt2.jpg);}
}
@keyframes KF-Flyer-Umdrehen-rw{
0% {width: 64%; background-image: url(Bilder/Branding-und-Layout/Flyer/Klimafest-Flugblatt2.jpg);}
49% {width: 0%; background-image: url(Bilder/Branding-und-Layout/Flyer/Klimafest-Flugblatt2.jpg);}
50% {width: 0%; background-image: url(Bilder/Branding-und-Layout/Flyer/Klimafest-Flugblatt.jpg);}
100% {width: 64%; background-image: url(Bilder/Branding-und-Layout/Flyer/Klimafest-Flugblatt.jpg);}
}
#Broschuere-1-box{
height: 35vw;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.MIA-24-1{
height: 90%;
width: 50%;
background-image: url(Bilder/Branding-und-Layout/Broschueren/MIA-Jahresbericht-S1.jpg);
background-size: 100% 100%;
background-repeat: no-repeat;
animation-name: MIA-oeffnen-rw;
animation-duration: 0.8s;
animation-timing-function: linear;
position: relative;
left: 50%;
z-index: 1;
}
.MIA-24-1-aktiv{
animation-name: MIA-oeffnen;
animation-fill-mode: forwards;
}
.MIA-24-2{
height: 90%;
width: 50%;
background-image: url(Bilder/Branding-und-Layout/Broschueren/MIA-Jahresbericht-S3.jpg);
background-size: 100% 100%;
background-repeat: no-repeat;
position: relative;
left: 50%;
top: -90%;
}
@keyframes MIA-oeffnen{
0% {width: 50%; left: 50%; background-image: url(Bilder/Branding-und-Layout/Broschueren/MIA-Jahresbericht-S1.jpg);}
49% {width: 0%; left: 50%; background-image: url(Bilder/Branding-und-Layout/Broschueren/MIA-Jahresbericht-S1.jpg);}
50% {width: 0%; left: 50%; background-image: url(Bilder/Branding-und-Layout/Broschueren/MIA-Jahresbericht-S2.jpg);}
100% {width: 50%; left: 0%; background-image: url(Bilder/Branding-und-Layout/Broschueren/MIA-Jahresbericht-S2.jpg);}
}
@keyframes MIA-oeffnen-rw{
00% {width: 50%; left: 0%; background-image: url(Bilder/Branding-und-Layout/Broschueren/MIA-Jahresbericht-S2.jpg);}
49% {width: 0%; left: 50%; background-image: url(Bilder/Branding-und-Layout/Broschueren/MIA-Jahresbericht-S2.jpg);}
50% {width: 0%; left: 50%; background-image: url(Bilder/Branding-und-Layout/Broschueren/MIA-Jahresbericht-S1.jpg);}
100% {width: 50%; left: 50%; background-image: url(Bilder/Branding-und-Layout/Broschueren/MIA-Jahresbericht-S1.jpg);}
}
#Broschuere-2-box{
height: 35vw;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.SWT-K23{
width: 40%;
rotate: -10deg;
position: relative;
left: 10%;
top: 10%;
}
.SWT-K24-1{
height: 72%;
width: 40%;
background-image: url(Bilder/Branding-und-Layout/Broschueren/SWTK-S1.jpg);
background-size: 100% 100%;
background-repeat: no-repeat;
animation-name: SWTK-oeffnen-rw;
animation-duration: 0.8s;
animation-timing-function: linear;
position: relative;
left: 45%;
top: -63%;
rotate: 10deg;
z-index: 1;
transition-duration: 0.5s;
}
.SWT-K24-1-hover{
height: 90%;
width: 50%;
left: 50%;
top: -64%;
rotate: 0deg;
}
.SWT-K24-1-aktiv{
animation-name: SWTK-oeffnen;
animation-fill-mode: forwards;
height: 90%;
width: 50%;
left: 50%;
top: -64%;
rotate: 0deg;
}
.SWT-K24-2{
height: 90%;
width: 50%;
background-image: url(Bilder/Branding-und-Layout/Broschueren/SWTK-S3.jpg);
background-size: 100% 100%;
background-repeat: no-repeat;
position: relative;
left: 50%;
top: -154%;
animation-name: SWTK-oeffnen2-rw;
animation-fill-mode: forwards;
animation-duration: 0.8s;
}
.SWT-K24-2-aktiv{
animation-name: SWTK-oeffnen2;
animation-fill-mode: forwards;
}
@keyframes SWTK-oeffnen{
0% {width: 50%; left: 50%; background-image: url(Bilder/Branding-und-Layout/Broschueren/SWTK-S1.jpg); height: 90%; rotate: 0deg; top: -64%;}
49% {width: 0%; left: 50%; background-image: url(Bilder/Branding-und-Layout/Broschueren/SWTK-S1.jpg);}
50% {width: 0%; left: 50%; background-image: url(Bilder/Branding-und-Layout/Broschueren/SWTK-S2.jpg);}
100% {width: 50%; left: 0%; background-image: url(Bilder/Branding-und-Layout/Broschueren/SWTK-S2.jpg); height: 90%; rotate: 0deg; top: -64%;}
}
@keyframes SWTK-oeffnen-rw{
0% {width: 50%; left: 0%; background-image: url(Bilder/Branding-und-Layout/Broschueren/SWTK-S2.jpg); height: 90%; rotate: 0deg; top: -64%;}
49% {width: 0%; left: 50%; background-image: url(Bilder/Branding-und-Layout/Broschueren/SWTK-S2.jpg);}
50% {width: 0%; left: 50%; background-image: url(Bilder/Branding-und-Layout/Broschueren/SWTK-S1.jpg);}
100% {width: 50%; left: 50%; background-image: url(Bilder/Branding-und-Layout/Broschueren/SWTK-S1.jpg); height: 90%; rotate: 0deg; top: -64%;}
}
@keyframes SWTK-oeffnen2{
0% {visibility: hidden}
1% {visibility: visible}
100% {visibility: visible}
}
@keyframes SWTK-oeffnen2-rw{
0% {visibility: visible}
99% {visibility: visible}
100% {visibility: hidden}
}
#Broschuere-3-box{
height: 35vw;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.IGM-B23{
width: 40%;
rotate: -10deg;
position: relative;
left: 10%;
top: 10%;
}
.IGM-B22-1{
height: 72%;
width: 40%;
background-image: url(Bilder/Branding-und-Layout/Broschueren/IGM-2022-Seite-1.jpg);
background-size: 100% 100%;
background-repeat: no-repeat;
animation-name: IGMB-oeffnen-rw;
animation-duration: 0.8s;
animation-timing-function: linear;
position: relative;
left: 45%;
top: -63%;
rotate: 10deg;
z-index: 1;
transition-duration: 0.5s;
}
.IGM-B22-1-hover{
height: 90%;
width: 50%;
left: 50%;
top: -64%;
rotate: 0deg;
}
.IGM-B22-1-aktiv{
animation-name: IGMB-oeffnen;
animation-fill-mode: forwards;
height: 90%;
width: 50%;
left: 50%;
top: -64%;
rotate: 0deg;
}
.IGM-B22-2{
height: 90%;
width: 50%;
background-image: url(Bilder/Branding-und-Layout/Broschueren/IGM-2022-Seite-3.jpg);
background-size: 100% 100%;
background-repeat: no-repeat;
position: relative;
left: 50%;
top: -154%;
animation-name: IGMB-oeffnen2-rw;
animation-fill-mode: forwards;
animation-duration: 0.8s;
}
.IGM-B22-2-aktiv{
animation-name: IGMB-oeffnen2;
animation-fill-mode: forwards;
}
@keyframes IGMB-oeffnen{
0% {width: 50%; left: 50%; background-image: url(Bilder/Branding-und-Layout/Broschueren/IGM-2022-Seite-1.jpg); height: 90%; rotate: 0deg; top: -64%;}
49% {width: 0%; left: 50%; background-image: url(Bilder/Branding-und-Layout/Broschueren/IGM-2022-Seite-1.jpg);}
50% {width: 0%; left: 50%; background-image: url(Bilder/Branding-und-Layout/Broschueren/IGM-2022-Seite-2.jpg);}
100% {width: 50%; left: 0%; background-image: url(Bilder/Branding-und-Layout/Broschueren/IGM-2022-Seite-2.jpg); height: 90%; rotate: 0deg; top: -64%;}
}
@keyframes IGMB-oeffnen-rw{
0% {width: 50%; left: 0%; background-image: url(Bilder/Branding-und-Layout/Broschueren/IGM-2022-Seite-2.jpg); height: 90%; rotate: 0deg; top: -64%;}
49% {width: 0%; left: 50%; background-image: url(Bilder/Branding-und-Layout/Broschueren/IGM-2022-Seite-2.jpg);}
50% {width: 0%; left: 50%; background-image: url(Bilder/Branding-und-Layout/Broschueren/IGM-2022-Seite-1.jpg);}
100% {width: 50%; left: 50%; background-image: url(Bilder/Branding-und-Layout/Broschueren/IGM-2022-Seite-1.jpg); height: 90%; rotate: 0deg; top: -64%;}
}
@keyframes IGMB-oeffnen2{
0% {visibility: hidden}
1% {visibility: visible}
100% {visibility: visible}
}
@keyframes IGMB-oeffnen2-rw{
0% {visibility: visible}
99% {visibility: visible}
100% {visibility: hidden}
}
#Postkarte-1-box{
height: 40vw;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.Portrait-PK{
height: 100%;
width: 42%;
background-image: url(Bilder/Branding-und-Layout/Postkarten/Postkarte-Mel.jpg);
background-size: 100% 100%;
background-repeat: no-repeat;
animation-name: Mel-PK-Umdrehen-rw;
animation-duration: 1.3s;
position: relative;
left: 29%;
}
.Portrait-PK-aktiv{
animation-name: Mel-PK-Umdrehen;
animation-fill-mode: forwards;
}
@keyframes Mel-PK-Umdrehen{
0% {width: 42%; left: 29%; background-image: url(Bilder/Branding-und-Layout/Postkarten/Postkarte-Mel.jpg); rotate: 0deg;}
34% {width: 0%; left: 50%; background-image: url(Bilder/Branding-und-Layout/Postkarten/Postkarte-Mel.jpg);}
35% {width: 0%; left: 50%; background-image: url(Bilder/Branding-und-Layout/Postkarten/Postkarte-Mel2.jpg);}
70% {width: 42%; left: 29%; background-image: url(Bilder/Branding-und-Layout/Postkarten/Postkarte-Mel2.jpg); rotate: 0deg;}
100% {background-image: url(Bilder/Branding-und-Layout/Postkarten/Postkarte-Mel2.jpg); rotate: 90deg;}
}
@keyframes Mel-PK-Umdrehen-rw{
0% {background-image: url(Bilder/Branding-und-Layout/Postkarten/Postkarte-Mel2.jpg); rotate: 90deg;}
30% {width: 42%; left: 29%; background-image: url(Bilder/Branding-und-Layout/Postkarten/Postkarte-Mel2.jpg); rotate: 0deg;}
64% {width: 0%; left: 50%; background-image: url(Bilder/Branding-und-Layout/Postkarten/Postkarte-Mel2.jpg);}
65% {width: 0%; left: 50%; background-image: url(Bilder/Branding-und-Layout/Postkarten/Postkarte-Mel.jpg);}
100% {width: 42%; left: 29%; background-image: url(Bilder/Branding-und-Layout/Postkarten/Postkarte-Mel.jpg); rotate: 0deg;}
}
.Portrait-PK-Glanz-layer{
height: 100%;
width: 42%;
background-image: url(Bilder/Branding-und-Layout/Postkarten/Postkarte-Mel-UV-Lack.png);
background-size: 100% 100%;
background-repeat: no-repeat;
position: relative;
left: 29%;
top: -100%;
visibility: hidden;
animation-duration: 0.6s;
}
.Portrait-PK-Glanz-layer-hover{
animation-name: Portrait-PK-Glanz-Effekt;
animation-fill-mode: forwards;
}
.Portrait-PK-Glanz-layer-aktiv{
animation-name: none;
}
@keyframes Portrait-PK-Glanz-Effekt{
0% {visibility: hidden;}
1% {visibility: visible; mask-image: linear-gradient( 45deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 10%, rgba(0,0,0,0) 20%);}
10% {visibility: visible; mask-image: linear-gradient( 45deg, rgba(0,0,0,0) 10%, rgba(0,0,0,1) 20%, rgba(0,0,0,0) 30%);}
20% {visibility: visible; mask-image: linear-gradient( 45deg, rgba(0,0,0,0) 17%, rgba(0,0,0,1) 27%, rgba(0,0,0,0) 37%);}
30% {visibility: visible; mask-image: linear-gradient( 45deg, rgba(0,0,0,0) 25%, rgba(0,0,0,1) 35%, rgba(0,0,0,0) 45%);}
40% {visibility: visible; mask-image: linear-gradient( 45deg, rgba(0,0,0,0) 30%, rgba(0,0,0,1) 40%, rgba(0,0,0,0) 50%);}
50% {visibility: visible; mask-image: linear-gradient( 45deg, rgba(0,0,0,0) 40%, rgba(0,0,0,1) 50%, rgba(0,0,0,0) 60%);}
60% {visibility: visible; mask-image: linear-gradient( 45deg, rgba(0,0,0,0) 50%, rgba(0,0,0,1) 60%, rgba(0,0,0,0) 70%);}
70% {visibility: visible; mask-image: linear-gradient( 45deg, rgba(0,0,0,0) 57%, rgba(0,0,0,1) 67%, rgba(0,0,0,0) 77%);}
80% {visibility: visible; mask-image: linear-gradient( 45deg, rgba(0,0,0,0) 65%, rgba(0,0,0,1) 75%, rgba(0,0,0,0) 85%);}
90% {visibility: visible; mask-image: linear-gradient( 45deg, rgba(0,0,0,0) 72%, rgba(0,0,0,1) 82%, rgba(0,0,0,0) 92%);}
99% {visibility: visible; mask-image: linear-gradient( 45deg, rgba(0,0,0,0) 80%, rgba(0,0,0,1) 90%, rgba(0,0,0,0) 100%);}
100% {visibility: hidden; mask-image: linear-gradient( 45deg, rgba(0,0,0,0) 80%, rgba(0,0,0,1) 90%, rgba(0,0,0,0) 100%);}
}
#Postkarte-2-box{
height: 35vw;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.Wichtel-PK{
height: 90%;
width: 64%;
background-image: url(Bilder/Branding-und-Layout/Postkarten/Wichtel-Postkarte_Vorderseite.jpg);
background-size: 100% 100%;
background-repeat: no-repeat;
animation-name: Wichtel-PK-Umdrehen-rw;
animation-duration: 1.3s;
}
.Wichtel-PK-aktiv{
animation-name: Wichtel-PK-Umdrehen;
animation-fill-mode: forwards;
}
@keyframes Wichtel-PK-Umdrehen{
0% {width: 64%; background-image: url(Bilder/Branding-und-Layout/Postkarten/Wichtel-Postkarte_Vorderseite.jpg); rotate: 0deg;}
34% {width: 0%; background-image: url(Bilder/Branding-und-Layout/Postkarten/Wichtel-Postkarte_Vorderseite.jpg);}
35% {width: 0%; background-image: url(Bilder/Branding-und-Layout/Postkarten/Wichtel-Postkarte_Rueckseite.jpg);}
70% {width: 64%; background-image: url(Bilder/Branding-und-Layout/Postkarten/Wichtel-Postkarte_Rueckseite.jpg); rotate: 0deg;}
100% {background-image: url(Bilder/Branding-und-Layout/Postkarten/Wichtel-Postkarte_Rueckseite.jpg); rotate: -90deg;}
}
@keyframes Wichtel-PK-Umdrehen-rw{
0% {background-image: url(Bilder/Branding-und-Layout/Postkarten/Wichtel-Postkarte_Rueckseite.jpg); rotate: -90deg;}
30% {width: 64%; background-image: url(Bilder/Branding-und-Layout/Postkarten/Wichtel-Postkarte_Rueckseite.jpg); rotate: 0deg;}
64% {width: 0%; background-image: url(Bilder/Branding-und-Layout/Postkarten/Wichtel-Postkarte_Rueckseite.jpg);}
65% {width: 0%; background-image: url(Bilder/Branding-und-Layout/Postkarten/Wichtel-Postkarte_Vorderseite.jpg);}
100% {width: 64%; background-image: url(Bilder/Branding-und-Layout/Postkarten/Wichtel-Postkarte_Vorderseite.jpg); rotate: 0deg;}
}
.Laptop-Mockup-box{
height: 20vw;
}
/* Die weiteren CSS Anweisungen für die Mockup-Iframes finest du bei Kundenprojekte*/
.laptop-mockup-medimel{
width: 100%;
aspect-ratio: 485/274;
background-image: url(Bilder/Branding-und-Layout/Webdesign/Medimel-Seite-Mockup.png);
background-size: contain;
background-repeat: no-repeat;
}
.Branding-Logo-Collagen-Box{
height: 14vw;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
background-color: white;
color: black;
}
.Branding-Logo-Collagen-Box-aktiv{
background-color: var(--dark-grey);
color: white;
}
.Branding-Logo-anordnung{
height: 50%;
width: 90%;
display: flex;
justify-content: space-around;
align-items: center;
}
.Branding-Logo{
background-size: contain;
background-repeat: no-repeat;
background-position: center;
height: 100%;
}
.Trennstrich-Branding-Logo{
width: 2px;
height: 100%;
background-color: var(--dark-grey);
}
.Trennstrich-Branding-Logo-aktiv{
background-color: white;
}
#Holundra-Logo{
background-image: url(Bilder/Branding-und-Layout/Logos/Holundra/Holundra-hellgruen.svg);
width: 50%;
}
#Holundra-Logo.Logo-Invertiert{
background-image: url(Bilder/Branding-und-Layout/Logos/Holundra/Holundra-Weiss.svg);
}
#Holundra-Siegel{
background-image: url(Bilder/Branding-und-Layout/Logos/Holundra/Siegel-Dunkel.svg);
width: 20%;
}
#Holundra-Siegel.Logo-Invertiert{
background-image: url(Bilder/Branding-und-Layout/Logos/Holundra/Siegel-Hell.svg);
}
#Forellenstark-Logo{
background-image: url(Bilder/Branding-und-Layout/Logos/ForellenStark/ForellenStark_Schriftzug_farbig.svg);
width: 40%;
}
#Forellenstark-Logo.Logo-Invertiert{
background-image: url(Bilder/Branding-und-Layout/Logos/ForellenStark/ForellenStark_Schriftzug_weiss.svg);
}
#Forellenstark-Logo2{
background-image: url(Bilder/Branding-und-Layout/Logos/ForellenStark/ForellenStark_Logo_farbig.svg);
width: 30%;
}
#Forellenstark-Logo2.Logo-Invertiert{
background-image: url(Bilder/Branding-und-Layout/Logos/ForellenStark/ForellenStark_Logo_weiss.svg);
}
#SWT-Logo-alt{
width: 40%;
}
#Pfeil-Logo-SWT{
background-image: url(Designelemente/Vektoren/Pfeil-rechts.svg);
width: 10%;
}
#Pfeil-Logo-SWT.Logo-Invertiert{
background-image: url(Designelemente/Vektoren/Pfeil-rechts-weiss.svg);
}
#SWT-Logo-neu{
background-image: url(Bilder/Branding-und-Layout/Logos/SWT/Logo-Schwarzwald_Tani.svg);
width: 35%;
}
#SWT-Logo-neu.Logo-Invertiert{
background-image: url(Bilder/Branding-und-Layout/Logos/SWT/SWT-Weiss.svg);
}
#Branding-IGM-Frauen-Logo{
background-image: url(Bilder/Branding-und-Layout/Logos/IGM-Frauen/V2_IGM_Frauen_Farbig.svg);
width: 100%;
}
#Branding-IGM-Frauen-Logo.Logo-Invertiert{
background-image: url(Bilder/Branding-und-Layout/Logos/IGM-Frauen/V2_IGM_Frauen_weiss.svg);
}
#YEEK-Logo-blau{
background-image: url(Bilder/Branding-und-Layout/Logos/Yeek/schwarz-blau.svg);
width: 25%;
}
#YEEK-Logo-gelb{
background-image: url(Bilder/Branding-und-Layout/Logos/Yeek/schwarz-gelb.svg);
width: 25%;
}
#YEEK-Logo-rot{
background-image: url(Bilder/Branding-und-Layout/Logos/Yeek/schwarz-rot.svg);
width: 25%;
}
#YEEK-Logo-blau.Logo-Invertiert{
background-image: url(Bilder/Branding-und-Layout/Logos/Yeek/beige.svg);
}
#YEEK-Logo-gelb.Logo-Invertiert{
background-image: url(Bilder/Branding-und-Layout/Logos/Yeek/beige.svg);
}
#YEEK-Logo-rot.Logo-Invertiert{
background-image: url(Bilder/Branding-und-Layout/Logos/Yeek/beige.svg);
}
#Ducan-Logo1{
background-image: url(Bilder/Branding-und-Layout/Logos/Ducan-Pirates/farbe-schwarz.svg);
width: 30%;
}
#Ducan-Logo1.Logo-Invertiert{
background-image: url(Bilder/Branding-und-Layout/Logos/Ducan-Pirates/farbe-weiss.svg);
}
#Ducan-Logo2{
background-image: url(Bilder/Branding-und-Layout/Logos/Ducan-Pirates/schrift-schwarz.svg);
width: 45%;
}
#Ducan-Logo2.Logo-Invertiert{
background-image: url(Bilder/Branding-und-Layout/Logos/Ducan-Pirates/schrift-weiss.svg);
}
#CISC-Logo{
background-image: url(Bilder/Branding-und-Layout/Logos/Ausstellungslogo-Uni/Finales-Logo-positiv.svg);
width: 60%;
}
#CISC-Logo.Logo-Invertiert{
background-image: url(Bilder/Branding-und-Layout/Logos/Ausstellungslogo-Uni/Fiales-Logo-negativ.svg);
}
.Branding-CD-Kacheln{
max-width: 100%;
}
.Branding-CD-Anordnung{
padding-top: 3vw;
padding-bottom: 3vw;
}
@media(max-width: 1271px){
#Flyer-1-box{
height: 30vw;
}
#Flyer-2-box{
height: 47vw;
}
#Flyer-3-box{
height: 47vw;
}
#Flyer-4-box{
height: 42vw;
}
#Broschuere-1-box{
height: 42vw;
}
#Broschuere-2-box{
height: 42vw;
}
#Broschuere-3-box{
height: 42vw;
}
#Postkarte-1-box{
height: 47vw;
}
#Postkarte-2-box{
height: 42vw;
}
.Laptop-Mockup-box{
height: 24vw;
}
.Branding-Logo-Collagen-Box{
height: 16vw;
}
}
@media(max-width: 900px){
#Flyer-1-box{
height: 61vw;
}
#Flyer-2-box{
height: 96vw;
}
#Flyer-3-box{
height: 96vw;
}
#Flyer-4-box{
height: 85vw;
}
#Broschuere-1-box{
height: 85vw;
}
#Broschuere-2-box{
height: 85vw;
}
#Broschuere-3-box{
height: 85vw;
}
#Postkarte-1-box{
height: 96vw;
}
#Postkarte-2-box{
height: 85vw;
}
.Laptop-Mockup-box{
height: 48vw;
}
.Branding-Logo-Collagen-Box{
height: 32vw;
}
}
/* ANALOGE ARBEITEN */
#Zeichnungen-Box{
grid-column: 1/17;
height: 47vw;
display: grid;
grid-template-columns: repeat(9,10%);
}
.Zeichnugnen-Blatt{
width: 17vw;
transition: ease-in-out;
transition-duration: 0.3s;
position:relative;
}
.Zeichnugnen-Blatt:hover{
rotate: 0deg;
}
.Zeichnung-1{
left: 10vw;
top: 10vw;
rotate: 6deg;
z-index: 1;
}
.Zeichnung-2{
left: 15vw;
top: 16vw;
rotate: -20deg;
z-index: 4;
}
.Zeichnung-3{
left: 18vw;
top: 6vw;
rotate: 11.5deg;
z-index: 3;
}
.Zeichnung-4{
width: 23vw;
left: 12vw;
top: 23vw;
rotate: -10deg;
z-index: 2;
}
.Zeichnung-5{
left: 17vw;
top: 8vw;
rotate: -8deg;
z-index: 1;
}
.Zeichnung-6{
left: 20vw;
top: 15vw;
rotate: 14deg;
z-index: 0;
}
.Zeichnung-1:focus{
z-index: 5;
width: 27vw;
left: 34vw;
rotate: 0deg;
top: 4vw;
}
.Zeichnung-2:focus{
z-index: 5;
width: 27vw;
left: 24.4vw;
rotate: 0deg;
top: 4vw;
}
.Zeichnung-3:focus{
z-index: 5;
width: 27vw;
left: 14.4vw;
rotate: 0deg;
top: 4vw;
}
.Zeichnung-4:focus{
z-index: 5;
width: 40vw;
left: -2vw;
rotate: 0deg;
top: 8vw;
}
.Zeichnung-5:focus{
z-index: 5;
width: 27vw;
left: -5.3vw;
rotate: 0deg;
top: 4vw;
}
.Zeichnung-6:focus{
z-index: 5;
width: 27vw;
left: -15.2vw;
rotate: 0deg;
top: 4vw;
}
#Skizzen{
grid-template-rows: repeat(17, 8.6vw);
row-gap: 0;
}
.Skizzen-Zettel{
max-width: 100%;
max-height: 100%;
transition-duration: 0.2s;
}
.Skizzen-Zettel:hover{
rotate: 0deg;
}
.Skizze-Hannover{
grid-column: 3/7;
grid-row: 2/5;
rotate: 5deg;
margin-left: 0;
}
.Skizze-uhr{
grid-column: 7/10;
grid-row: 2/5;
rotate: -5deg;
margin-left: 0;
}
.Skizze-bruecke{
grid-column: 10/16;
width: 90%;
margin-left: 5%;
margin-top: 5%;
grid-row: 2/5;
rotate: 10deg;
}
.Skizze-Treppe{
grid-column: 7/11;
grid-row: 4/7;
rotate: -5deg;
width: 70%;
margin-top: 20%;
margin-left: 14%;
}
.Skizze-Cafe{
grid-column: 3/7;
grid-row: 5/8;
rotate: -10deg;
margin-top: 10%;
margin-left: 10%;
width: 90%;
}
.Skizze-Fenchel-Striche{
grid-column: 11/15;
grid-row: 5/8;
rotate: 5deg;
}
.Skizze-Paris-Saeule{
grid-column: 7/10;
grid-row: 7/11;
rotate: 7deg;
margin-left: 0;
}
.Skizze-Paris-U2{
grid-column: 3/7;
grid-row: 8/11;
rotate: -5deg;
width: 80%;
margin-top: 10%;
margin-left: 10%;
}
.Skizze-Anna{
grid-column: 12/15;
grid-row: 8/11;
rotate: 29deg;
margin-top: 15%;
margin-left: 0;
}
.Skizze-Lampe{
grid-column: 10/14;
grid-row: 9/13;
rotate: -15deg;
width: 70%;
margin-top: 35%;
margin-left: 0;
}
.Skizze-Statue-Frau{
grid-column: 2/7;
grid-row: 11/14;
rotate: -5deg;
margin-left: 0;
}
.Skizze-Statue-Abstrakt{
grid-column: 6/11;
grid-row: 11/14;
rotate: 21deg;
width: 55%;
margin-top: 10%;
margin-left: 15%;
}
.Skizze-Paris-U1{
grid-column: 11/15;
grid-row: 13/16;
rotate: 12deg;
width: 90%;
margin-top: 10%;
margin-left: 0;
}
.Skizze-Fenchel-Zebra{
grid-column: 4/8;
grid-row: 14/18;
rotate: -8deg;
width: 90%;
margin-top: 20%;
margin-left: 0;
}
.Skizze-Schienenkilometer{
grid-column: 8/13;
grid-row: 15/18;
rotate: -5deg;
width: 60%;
margin-top: 5%;
margin-left: 0;
}
#Doodles{
display: grid;
grid-template-rows: repeat(7, 8vw);
}
.Doodle-Wie-Du{
grid-column: 4/7;
grid-row: 2/5 ;
rotate: -7deg;
}
.Doodle-Breathing-No1{
grid-column: 8/11;
grid-row: 2/4;
rotate: 5deg;
width: 85%;
}
.Doodle-Birthday{
grid-column: 11/15;
grid-row: 2/5;
rotate: 14.5deg;
width: 80%;
margin-left: 10%;
margin-top: 0;
}
.Doodle-Surviving{
grid-column: 7/11;
grid-row: 4/6;
rotate: -10deg;
width: fit-content;
margin-top: 0;
margin-left: 0;
}
.Doodle-Hab-dich-lieb{
grid-column: 3/6;
grid-row: 5/7;
rotate: -5deg;
width: 80%;
}
.Doodle-flowercrown{
grid-column: 6/9;
grid-row: 6/8;
rotate: 9deg;
}
.Doodle-adventure{
grid-column: 10/14;
grid-row: 5/8;
rotate: -15deg;
width: 75%;
margin-left: 20%;
margin-top: 20%;
}
@media(max-width: 727px){
#Zeichnungen-Box{
height: 117vw;
}
.Zeichnugnen-Blatt{
width: 32vw;
}
.Zeichnung-1{
left: 31vw;
top: 41vw;
rotate: -6.5deg;
z-index: 3;
}
.Zeichnung-2{
left: 1vw;
top: 55vw;
rotate: -6deg;
z-index: 2;
}
.Zeichnung-3{
left: 35vw;
top: 47vw;
rotate: 19deg;
z-index: 1;
}
.Zeichnung-4{
width: 45vw;
left: 2vw;
top: 85vw;
rotate: -5.7deg;
z-index: 0;
}
.Zeichnung-5{
left: -22vw;
top: 3;
rotate: 8deg;
z-index: 2;
}
.Zeichnung-6{
left: -1vw;
top: 9vw;
rotate: -11deg;
z-index: 0;
}
.Zeichnung-1:focus{
z-index: 5;
width: 65vw;
left: 16vw;
rotate: 0deg;
top: 11vw;
}
.Zeichnung-2:focus{
z-index: 5;
width: 65vw;
left: 6vw;
rotate: 0deg;
top: 11vw;
}
.Zeichnung-3:focus{
z-index: 5;
width: 65vw;
left: -4vw;
rotate: 0deg;
top: 11vw;
}
.Zeichnung-4:focus{
z-index: 5;
width: 85vw;
left: -23vw;
rotate: 0deg;
top: 27vw;
}
.Zeichnung-5:focus{
z-index: 5;
width: 65vw;
left: -23.5vw;
rotate: 0deg;
top: 11vw;
}
.Zeichnung-6:focus{
z-index: 5;
width: 65vw;
left: -33vw;
rotate: 0deg;
top: 11vw;
}
#Skizzen{
grid-template-rows: none;
row-gap: 10px;
}
.Skizze-Hannover{
grid-column: 2/15;
grid-row: 2/3;
width: 50%;
margin-left: 30%;
}
.Skizze-uhr{
grid-column: 2/15;
grid-row: 3/4;
width: 60%;
}
.Skizze-bruecke{
grid-column: 2/15;
grid-row: 4/5;
width: 90%;
margin-top: 0;
margin-left: 15%;
}
.Skizze-Treppe{
grid-column: 2/15;
grid-row: 5/6;
width: 50%;
margin-top: 0;
}
.Skizze-Cafe{
grid-column: 2/15;
grid-row: 6/7;
width: 70%;
margin-top: 0;
margin-left: 30%;
}
.Skizze-Fenchel-Striche{
grid-column: 2/15;
grid-row: 7/8;
width: 70%;
}
.Skizze-Paris-Saeule{
grid-column: 2/15;
grid-row: 8/9;
width: 50%;
margin-left: 40%;
}
.Skizze-Paris-U2{
grid-column: 2/15;
grid-row: 9/10;
width: 60%;
margin-top: 0;
}
.Skizze-Anna{
grid-column: 2/15;
grid-row: 10/11;
width: 70%;
margin-top: 6%;
margin-left: 20%;
}
.Skizze-Lampe{
grid-column: 2/15;
grid-row: 11/12;
width: 70%;
margin-top: 0;
}
.Skizze-Statue-Frau{
grid-column: 2/15;
grid-row: 12/13;
width: 70%;
margin-left: 30%;
}
.Skizze-Statue-Abstrakt{
grid-column: 2/15;
grid-row: 13/14;
width: 60%;
margin-top: 0;
rotate: 5deg;
margin-left: 4%;
}
.Skizze-Paris-U1{
grid-column: 2/15;
grid-row: 14/15;
width: 60%;
margin-left: 40%;
margin-top: 0;
rotate: -5deg;
}
.Skizze-Fenchel-Zebra{
grid-column: 2/15;
grid-row: 15/16;
width: 60%;
margin-top: 0;
margin-left: 10%;
}
.Skizze-Schienenkilometer{
grid-column: 2/15;
grid-row: 16/17;
width: 60%;
margin-top: 0;
margin-left: 40%;
}
#Doodles{
display: grid;
grid-template-rows: repeat(7, 19vw);
}
.Doodle-Wie-Du{
grid-column: 3/8;
grid-row: 2/4;
rotate: -7deg;
}
.Doodle-Breathing-No1{
grid-column: 10/15;
grid-row: 4/6;
rotate: 5deg;
width: fit-content;
}
.Doodle-Birthday{
grid-column: 4/10;
grid-row: 6/8;
rotate: 5deg;
width: 80%;
margin-left: 0;
margin-top: 30%;
}
.Doodle-Surviving{
grid-column: 2/11;
grid-row: 3/5;
rotate: -20deg;
width: 70%;
margin-top: 20%;
margin-left: 10%;
}
.Doodle-Hab-dich-lieb{
grid-column: 2/7;
grid-row: 5/7;
rotate: -5deg;
width: 80%;
}
.Doodle-flowercrown{
grid-column: 10/15;
grid-row: 2/4;
rotate: 9deg;
}
.Doodle-adventure{
grid-column: 9/15;
grid-row: 5/7;
rotate: -15deg;
width: 90%;
margin-left: 0;
margin-top: 40%;
}
}
/* KUNDEN-PROJEKTE */
.leichter-schatten{
filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.25));
}
.KP-Projektuebersicht-box{
grid-column: 3/15;
display: flex;
flex-direction: column;
gap: 50px;
margin-bottom: 130px;
}
.KP-Collage-gross{
width: 100%;
}
.KP-Projektuebersich-text{
width: 70%;
max-width: 600px;
}
.KP-Projekte-layout-box{
grid-column: 3/15;
display: flex;
flex-direction: column;
gap: 130px;
}
.KP-Teilprojekt-box{
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.KP-Teilprojekt-Text-box{
width: 48%;
display: flex;
flex-direction: column;
gap: 28px;
}
.KP-Teilprojekt-Collagenbox{
width: 48%;
margin-bottom: 0;
}
#yeek-collage-1-box{
height: 27vw;
}
#yeek-collage-1{
width: 100%;
position: relative;
top: 20%;
}
.yeek-collage-1-baer{
position: relative;
width: 60%;
top: -79%;
left: 33%;
transition: 0.3s;
}
.yeek-collage-1-baer-hover{
scale: 115%;
}
.yeek-collage-1-bear-active{
scale: 190% !important;
left: 20%;
top: -50% !important;
}
#yeek-collage-2-box{
height: 29vw;
}
.KP-coallage-2-Fuchs{
position: relative;
width: 80%;
transform: rotate(20deg);
left: 15%;
top: 15%;
z-index: 2;
transition: 0.3s;
}
.KP-coallage-2-Fuchs-hover{
width: 75%;
transform: rotate(15deg);
}
.KP-coallage-2-Fuchs-active{
width: 70%;
transform: rotate(0);
top: 0;
}
.KP-coallage-2-Baer{
position: relative;
width: 80%;
top: -11%;
left: 8%;
z-index: 1;
transition: 0.3s;
}
.KP-coallage-2-Baer-hover{
width: 75%;
top: -2%;
left: 15%;
}
.KP-coallage-2-Baer-active{
width: 70%;
left: 15%;
top: 0;
}
.KP-coallage-2-Vogel{
position: relative;
width: 80%;
transform: rotate(-20deg);
top: -35%;
left:5%;
transition: 0.3s;
}
.KP-coallage-2-Vogel-hover{
width: 75%;
top: -20%;
left: 15%;
transform: rotate(-15deg);
}
.KP-coallage-2-Vogel-active{
width: 70%;
transform: rotate(0);
left: 15%;
top: 0;
}
#yeek-collage-3-box{
display: flex;
align-items: center;
justify-content: center;
}
.KP-Yeek-vorheriger-Post{
width: 32%;
aspect-ratio: 1/1;
display: flex;
align-items: center;
justify-content: center;
transform: translateX(30%);
}
.KP-YEEK-Post-Background-1-grau{
background: url(Bilder/Kunden-Projekte-Collagen/Yeek-Post-Apfel-1.jpg), white;
background-blend-mode: luminosity;
background-size: cover;
}
.KP-YEEK-Post-Background-2-grau{
background: url(Bilder/Kunden-Projekte-Collagen/Yeek-Post-Apfel-2.jpg), white;
background-blend-mode: luminosity;
background-size: cover;
}
.KP-YEEK-Post-Background-3-grau{
background: url(Bilder/Kunden-Projekte-Collagen/Yeek-Post-Apfel-3.jpg), white;
background-blend-mode: luminosity;
background-size: cover;
}
.KP-YEEK-Post-Background-4-grau{
background: url(Bilder/Kunden-Projekte-Collagen/Yeek-Post-Apfel-4.jpg), white;
background-blend-mode: luminosity;
background-size: cover;
}
.KP-YEEK-Post-Background-5-grau{
background: url(Bilder/Kunden-Projekte-Collagen/Yeek-Post-Apfel-5.jpg), white;
background-blend-mode: luminosity;
background-size: cover;
}
.KP-YEEK-Post-Background-6-grau{
background: url(Bilder/Kunden-Projekte-Collagen/Yeek-Post-Apfel-6.jpg), white;
background-blend-mode: luminosity;
background-size: cover;
}
#KP-Yeek-handy-zurueck-pfeil{
height: 55%;
padding-right: 20%;
}
#KP-yeek-smartphone{
width: 50%;
aspect-ratio: 1/2;
background-image: url(Bilder/Kunden-Projekte-Collagen/YEEK-collage-2-handy.png);
background-repeat: no-repeat;
background-size: contain;
z-index: 1;
}
.KP-Yeek-aktueller-Post{
position: relative;
width: 89.0%;
aspect-ratio: 1/1;
left: 5.6%;
top: 30.8%;
}
.KP-YEEK-Post-Background-1{
background: url(Bilder/Kunden-Projekte-Collagen/Yeek-Post-Apfel-1.jpg);
background-size: contain;
}
.KP-YEEK-Post-Background-2{
background: url(Bilder/Kunden-Projekte-Collagen/Yeek-Post-Apfel-2.jpg);
background-size: contain;
}
.KP-YEEK-Post-Background-3{
background: url(Bilder/Kunden-Projekte-Collagen/Yeek-Post-Apfel-3.jpg);
background-size: contain;
}
.KP-YEEK-Post-Background-4{
background: url(Bilder/Kunden-Projekte-Collagen/Yeek-Post-Apfel-4.jpg);
background-size: contain;
}
.KP-YEEK-Post-Background-5{
background: url(Bilder/Kunden-Projekte-Collagen/Yeek-Post-Apfel-5.jpg);
background-size: contain;
}
.KP-YEEK-Post-Background-6{
background: url(Bilder/Kunden-Projekte-Collagen/Yeek-Post-Apfel-6.jpg);
background-size: contain;
}
.KP-Yeek-naechster-Post{
width: 32%;
aspect-ratio: 1/1;
display: flex;
align-items: center;
justify-content: center;
transform: translateX(-30%);
}
#KP-Yeek-handy-weiter-pfeil{
transform: rotate(180deg);
height: 55%;
padding-right: 20%;
}
#yeek-collage-4-box{
height: 20vw;
}
.laptop-mockup{
width: 100%;
aspect-ratio: 485/274;
background-image: url(Bilder/Mockups/Webseite-Mockup-leer.png);
background-size: contain;
background-repeat: no-repeat;
}
.mockup-iframe{
border: none;
position: relative;
top: 4.9%;
left:11%;
width: 74.5vw;
aspect-ratio: 695/425;
zoom: 0.75;
-moz-transform: scale(0.5);
-moz-transform-origin: 0 0;
-o-transform: scale(0.5);
-o-transform-origin: 0 0;
-webkit-transform: scale(0.5);
-webkit-transform-origin: 0 0;
}
.mockup-iframe-aspectratio{
border: none;
aspect-ratio: 695/425;
}
.mockup-klickbar-icon{
position: relative;
top: -135%;
z-index: 1;
width: 4vw;
}
#SWT-collage-1-box{
height: 25.5vw;
}
#KP-SWT-VideoCollage{
width: 100%;
position: relative;
top: 22%;
}
.KP-SWT-Handy{
width: 32%;
position: relative;
left: 48%;
top: -79%;
rotate: 15deg;
z-index: -1;
transition: ease-in-out;
transition-duration: 0.3s;
}
.KP-SWT-Handy-hover{
left: 40%;
width: 34%;
rotate: 10deg;
}
.KP-SWT-Handy-active{
z-index: 1;
rotate: 0deg;
left: 35%;
width: 36%;
top: -82%;
}
#SWT-collage-2-box{
height: 32.5vw;
}
.SWT-Collage-2-anordnung{
width: 100%;
position: relative;
z-index: 2;
}
.SWT-Collage-2-flyer{
width: 81%;
height: 40%;
position: relative;
top: -27%;
background-image: url(Bilder/Kunden-Projekte-Collagen/SWT-Collage-2-Flyer-Vorderseite.jpg);
background-size: 100% 100%;
background-repeat: no-repeat;
z-index: 1;
transition-duration: 0.55s;
transition-timing-function: ease-in-out;
animation-name: SWT-flyer-umdrehen-rw;
animation-direction: normal;
animation-duration: 1s;
box-shadow: 2px 4px 10px rgba(0, 0, 0, 0.25);
}
.SWT-Collage-2-flyer-hover{
top: -60%;
z-index: 3;
width: 100%;
height: 50%;
box-shadow: 2px 4px 30px rgba(0, 0, 0, 0.5);
}
.SWT-Collage-2-flyer-active{
top: -60%;
z-index: 3;
width: 100%;
height: 50%;
box-shadow: 2px 4px 30px rgba(0, 0, 0, 0.5);
animation-name: SWT-flyer-umdrehen;
animation-direction: normal;
animation-fill-mode: forwards;
}
@keyframes SWT-flyer-umdrehen{
0% {width: 100%; left: 0%; background-image: url(Bilder/Kunden-Projekte-Collagen/SWT-Collage-2-Flyer-Vorderseite.jpg);}
49% {width: 0%; left: 50%; background-image: url(Bilder/Kunden-Projekte-Collagen/SWT-Collage-2-Flyer-Vorderseite.jpg);}
50% {width: 0%; left: 50%; background-image: url(Bilder/Kunden-Projekte-Collagen/SWT-Collage-2-Flyer-Rueckseite.jpg);}
100% {width: 100%; left: 0%; background-image: url(Bilder/Kunden-Projekte-Collagen/SWT-Collage-2-Flyer-Rueckseite.jpg);}
}
@keyframes SWT-flyer-umdrehen-rw{
0% {width: 100%; left: 0%; background-image: url(Bilder/Kunden-Projekte-Collagen/SWT-Collage-2-Flyer-Rueckseite.jpg);}
49% {width: 0%; left: 50%; background-image: url(Bilder/Kunden-Projekte-Collagen/SWT-Collage-2-Flyer-Rueckseite.jpg);}
50% {width: 0%; left: 50%; background-image: url(Bilder/Kunden-Projekte-Collagen/SWT-Collage-2-Flyer-Vorderseite.jpg);}
100% {width: 100%; left: 0%; background-image: url(Bilder/Kunden-Projekte-Collagen/SWT-Collage-2-Flyer-Vorderseite.jpg);}
}
#SWT-collage-3-box{
display: grid;
grid-template-columns: 53% 47%;
grid-template-rows: 50% 50%;
gap: 5px;
height: 25vw;
}
.KP-SWT-C3-Fotos{
background-size: 105%;
background-position: center;
transition: ease-in-out;
transition-duration: 0.5s;
}
.KP-SWT-C3-Fotos:hover{
background-size: 115%;
}
#KP-SWT-C3-F1{
grid-column: 1/2;
grid-row: 1/2;
background-image: url(Bilder/Fotografie/Produktfotografie/Produktfoto-2.JPG)
}
#KP-SWT-C3-F2{
grid-column: 1/2;
grid-row: 2/3;
background-image: url(Bilder/Fotografie/Produktfotografie/Produktfoto-11.jpg)
}
#KP-SWT-C3-F3{
grid-column: 2/3;
grid-row: 1/3;
background-image: url(Bilder/Fotografie/Produktfotografie/Produktfoto-12.jpg)
}
#Forellenstark-collage-1-box{
height: 31.5vw;
}
.Forellenstark-Collage1{
width: 90%;
position: relative;
top: -50%;
visibility: visible;
}
.Forellenstark-Produktverpackung{
width: 46%;
rotate: -15deg;
position: relative;
left: 49%;
top: 32%;
transition: ease-in-out;
transition-duration: 0.2s;
z-index: 0;
}
.Forellenstark-Produktverpackung-hover{
rotate: 0deg;
left: 46%;
top: 30%;
}
.Forellenstark-Produktverpackung-active{
z-index: 1;
rotate: 0deg;
left: 8%;
top: 5%;
width: 84%;
}
.Forellenstark-Collage1-active{
visibility: hidden;
}
#Forellenstark-collage-2-box{
height: 20vw;
}
.Forellenstark-Gutschein{
width: 43%;
position: relative;
box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.25);
transition-duration: 0.4s;
}
.Gutschein1{
rotate: 6.5deg;
top: 60%;
left: 1%;
}
.Gutschein2{
rotate: 38deg;
left: -36%;
top: 38%;
z-index: 1;
}
.Gutschein3{
rotate: 75deg;
left: 20%;
top: -13%;
z-index: 2;
}
.Gutschein4{
background-image: url(Bilder/Kunden-Projekte-Collagen/Gutschein4.jpg);
background-size: 100% 100%;
background-repeat: no-repeat;
width: 43%;
height: 36%;
position: relative;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.25);
transition-duration: 0.4s;
rotate: -75deg;
left: 37%;
top: -50%;
z-index: 3;
animation-name: Gutschein-umdrehen-rw;
animation-duration: 1.3s;
}
.Gutschein5{
rotate: -37.5deg;
z-index: 1;
left: 50%;
top: -71%;
}
.Gutschein6{
rotate: -6.5deg;
top: -50%;
left: 12%;
}
.Gutschein1-hover{
rotate: 90deg;
left: 32%;
top: 32%;
}
.Gutschein2-hover{
rotate: 90deg;
left: -12%;
top: 32%;
}
.Gutschein3-hover{
rotate: 90deg;
left: 32%;
top: -5%;
}
.Gutschein4-hover{
rotate: -90deg;
left: 32%;
top: -42%;
}
.Gutschein5-hover{
rotate: -90deg;
left: 32%;
top: -78%;
}
.Gutschein6-hover{
rotate: -90deg;
left: -12%;
top: -78%;
}
.Forellenstark-Gutschein-aktiv{
visibility: hidden;
transition-duration: 0s;
}
.Gutschein4-active{
animation-name: Gutschein-umdrehen;
animation-fill-mode: forwards;
}
@keyframes Gutschein-umdrehen{
0% {width: 43%; height: 36%; rotate: -90deg; left: 32%; top: -42%; background-image: url(Bilder/Kunden-Projekte-Collagen/Gutschein4.jpg);}
33% {rotate: 0deg; width: 43%; height: 36%; left: 32%; top: -42%; }
65% {width: 0%; left: 50%; background-image: url(Bilder/Kunden-Projekte-Collagen/Gutschein4.jpg);}
66% {width: 0%; left: 50%; background-image: url(Bilder/Kunden-Projekte-Collagen/Gutschein-rueckseite.jpg);}
100% {width: 86%; height: 72%; left: 7%; top: -60%; rotate: 0deg; background-image: url(Bilder/Kunden-Projekte-Collagen/Gutschein-rueckseite.jpg);}
}
@keyframes Gutschein-umdrehen-rw{
0% {width: 86%; height: 72%; left: 7%; top: -60%; rotate: 0deg; background-image: url(Bilder/Kunden-Projekte-Collagen/Gutschein-rueckseite.jpg);}
33% {width: 0%; left: 50%; background-image: url(Bilder/Kunden-Projekte-Collagen/Gutschein-rueckseite.jpg);}
34% {width: 0%; left: 50%; background-image: url(Bilder/Kunden-Projekte-Collagen/Gutschein4.jpg);}
66% {rotate: 0deg; width: 43%; height: 36%; left: 32%; top: -42%; }
100% {width: 43%; height: 36%; rotate: -90deg; left: 32%; top: -42%; background-image: url(Bilder/Kunden-Projekte-Collagen/Gutschein4.jpg);}
}
#IGM-Collage1-box{
height: 28vw;
}
#Buttons-IGM-Hefte{
display: flex;
width: 100%;
flex-flow: wrap;
gap: 10px;
}
.IGM-Collage1{
width: 100%;
}
.IGM-Heft{
width: 45%;
height: 81%;
background-image: url(Bilder/Kunden-Projekte-Collagen/IGM-2022-Seite-1.jpg);
background-size: 100% 100%;
position: relative;
top: -96%;
left: 22%;
rotate: -11deg;
z-index: 1;
transition:ease-in-out;
transition-duration: 0.3s;
animation-name: IGM-Umblaettern-rw;
animation-duration: 0.5s;
animation-timing-function: linear;
}
.IGM-Heft-hover{
rotate: 0deg;
left: 50%;
top: -92%;
}
.IGM-Heft-active{
animation-name: IGM-Umblaettern;
animation-fill-mode: forwards;
rotate: 0deg;
top: -92%;
}
.IGM-Heft-S3{
width: 45%;
height: 81%;
background-image: url(Bilder/Kunden-Projekte-Collagen/IGM-2022-Seite-3.jpg);
background-size: cover;
position: relative;
top: -172.9%;
left: 50%;
visibility: hidden;
transition-delay: 0.5s;
}
.IGM-Heft-S3-active{
visibility: visible;
transition-delay: 0s;
}
@keyframes IGM-Umblaettern{
0% {left: 50%; width: 45%; background-image: url(Bilder/Kunden-Projekte-Collagen/IGM-2022-Seite-1.jpg);}
49% {left: 50%; width: 0%; background-image: url(Bilder/Kunden-Projekte-Collagen/IGM-2022-Seite-1.jpg);}
50% {left: 50%; width: 0%; background-image: url(Bilder/Kunden-Projekte-Collagen/IGM-2022-Seite-2.jpg);}
100%{left: 5%; width: 45%; background-image: url(Bilder/Kunden-Projekte-Collagen/IGM-2022-Seite-2.jpg);}
}
@keyframes IGM-Umblaettern-rw{
0% {left: 5%; width: 45%; background-image: url(Bilder/Kunden-Projekte-Collagen/IGM-2022-Seite-2.jpg);}
49% {left: 50%; width: 0%; background-image: url(Bilder/Kunden-Projekte-Collagen/IGM-2022-Seite-2.jpg);}
50% {left: 50%; width: 0%; background-image: url(Bilder/Kunden-Projekte-Collagen/IGM-2022-Seite-1.jpg);}
100%{left: 50%; width: 45%; background-image: url(Bilder/Kunden-Projekte-Collagen/IGM-2022-Seite-1.jpg);}
}
#IGM-Collage2-box{
height: 17vw;
display: flex;
justify-content: center;
}
#KP-IGM-Frauenlogo{
width: 80%;
transition-duration: 0.2s;
}
#KP-IGM-Frauenlogo:hover{
width: 90%;
}
@media (max-width: 1270px){
.KP-Projektuebersicht-box{
grid-column: 2/16;
}
.KP-Projekte-layout-box{
grid-column: 2/16;
}
#yeek-collage-1-box{
height: 32vw;
}
#yeek-collage-1{
top: 20%;
}
.yeek-collage-1-baer{
top: -78%;
}
#yeek-collage-2-box{
height: 35vw;
}
#yeek-collage-4-box{
height: 24vw;
}
.mockup-iframe{
width: 86vw;
}
.mockup-klickbar-icon{
width: 5vw;
}
#SWT-collage-1-box{
height: 30vw;
}
#SWT-collage-2-box{
height: 38vw;
}
#SWT-collage-3-box{
height: 30vw;
}
#Forellenstark-collage-1-box{
height: 37vw;
}
#Forellenstark-collage-2-box{
height: 23.4vw;
}
#IGM-Collage1-box{
height: 32.5vw;
}
#IGM-Collage2-box{
height: 20vw;
}
}
@media (max-width: 900px){
.KP-Projekte-layout-box{
gap: 90px;
}
.KP-Teilprojekt-box{
flex-direction: column;
}
.KP-Teilprojekt-Text-box{
width: 100%;
}
.KP-Teilprojekt-Collagenbox{
width: 100%;
margin-bottom: 40px;
}
#yeek-collage-1-box{
height: 63vw;
}
#yeek-collage-1{
top: 19%;
}
.yeek-collage-1-baer{
top: -83%;
}
#yeek-collage-2-box{
height: 70vw;
}
#yeek-collage-4-box{
height: 48vw;
}
.mockup-iframe{
width: 181vw;
top: 4%;
left: 11%
}
.mockup-klickbar-icon{
width: 10vw;
}
#SWT-collage-1-box{
height: 61.5vw;
}
#SWT-collage-2-box{
height: 79vw;
}
#SWT-collage-3-box{
height: 60vw;
}
#Forellenstark-collage-1-box{
height: 76vw;
}
#Forellenstark-collage-2-box{
height: 47.8vw;
}
#IGM-Collage1-box{
height: 68vw;
}
.KP-Projektuebersich-text{
width: 100%;
}
#IGM-Collage2-box{
height: 45vw;
}
}
@media (max-width: 500px){
.mockup-iframe{
width: 175vw;
}
}
@media (max-width: 350px){
.mockup-iframe{
width: 172vw;
}
}
/* KONTAKT */
.Kontakt-Kacheln{
padding-top: 20px;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 40px;
border-radius: 20px;
display: flex;
flex-direction: column;
gap: 35px;
margin-bottom: 20px;
}
#blaue-kontakt-buttons{
width: 210px;
display: flex;
flex-direction: column;
gap:20px;
}
#Kontakt{
grid-column: 3/9;
}
#Cookies{
grid-column: 9/15;
}
#Impressum{
grid-column: 3/9;
}
#Impressum-grid{
width: 100%;
display: grid;
grid-template-columns: 1fr 1fr;
grid-column-gap: 12px;
grid-row-gap: 20px;
}
#Kruemelmonster-Zitat-Box{
width: 100%;
text-align: center;
color: var(--gelb);
}
#Inhaltshaftung{
grid-column: 9/15;
}
#Linkhaftung{
grid-column: 3/9;
}
#Urheberrecht{
grid-column: 9/15;
}
@media(max-width: 1271px){
#Kontakt{
grid-column: 2/9;
}
#Cookies{
grid-column: 9/16;
}
#Impressum{
grid-column: 2/9;
}
#Inhaltshaftung{
grid-column: 9/16;
}
#Linkhaftung{
grid-column: 2/9;
}
#Urheberrecht{
grid-column: 9/16;
}
}
@media(max-width: 900px){
#Kontakt{
grid-column: 2/16;
}
#Cookies{
grid-column: 2/16;
}
#Impressum{
grid-column: 2/16;
}
#Inhaltshaftung{
grid-column: 2/16;
}
#Linkhaftung{
grid-column: 2/16;
}
#Urheberrecht{
grid-column: 2/16;
}
}
@media(max-width: 375px){
#Impressum-grid{
grid-template-columns: 1fr;
}
}
/* Beispiel YEEK */
.drittel-box{
grid-column: 3/15;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: 20px;
}
.drittel-segment{
width: calc(33.33% - 15px);
height: fit-content;
}
.halbe-segment{
width: calc(50% - 15px);
height: fit-content;
}
.Bsp-Yeek-grosses-Bild{
grid-column: 3/15;
width: 100%;
}
#Zielgruppe-Yeek{
margin-bottom: 20px;
}
#Persona-Yeek{
width: 80%;
}
#key-narratives-box{
grid-column: 3/15;
display: flex;
justify-content: center;
}
#key-narratives{
width: 300px;
max-width: 100%;
}
#mockup-text{
grid-column: 3/13;
margin-bottom: 40px;
}
.Social-Media-Box{
grid-column: 3/15;
margin-bottom: 30px;
margin-top: 30px;
}
.bsp-yeek-post{
width: 200px;
max-width: 100%;
margin-right: 10px;
margin-top: 10px;
margin-bottom: 20px;
}
#bsp-quellen{
grid-column: 3/15;
line-height: 2em;
}
@media (max-width: 1271px){
.drittel-box{
grid-column: 2/16;
}
.Bsp-Yeek-grosses-Bild{
grid-column: 2/16;
}
#key-narratives-box{
grid-column: 2/16;
}
#mockup-text{
grid-column: 2/13;
}
.Social-Media-Box{
grid-column: 2/16;
}
#bsp-quellen{
grid-column: 2/16;
}
}
@media(max-width: 1093px){
.drittel-segment{
width: calc(50% - 15px);
}
.halbe-segment{
width: 100%;
}
}
@media (max-width: 727px){
.drittel-segment{
width: 100%;
}
#mockup-text{
grid-column: 2/16;
}
}
@media(max-width: 502px){
.bsp-yeek-post{
margin-top: 10px;
margin-bottom: 0;
}
}
/* Video Wrapper */
.video_wrapper {
background-size: cover;
position: relative;
.video_trigger {
padding: 130px 30px;
height: -webkit-calc( 100% - 260px );
height: -moz-calc( 100% - 260px );
height: -o-calc( 100% - 260px );
height: calc( 100% - 260px );
width: -webkit-calc( 100% - 60px );
width: -moz-calc( 100% - 60px );
width: -o-calc( 100% - 60px );
width: calc( 100% - 60px );
position: absolute;
bottom: 0;
z-index: 2;
background-color: rgba( 0, 0, 0, .8 );
color: #fff;
display: flex;
flex-direction: column;
gap: 40px;
align-items: center;
justify-content: center;
}
.video_layer {
position: relative;
display: none;
height: inherit;
width: inherit;
margin: auto;
iframe {
border: 0 none transparent;
width: inherit;
vertical-align: middle;
}
}
}
.iframe-Datenschutz-link{
color: white;
text-decoration: underline;
}
/* Forschung */
.Forschung-Subhead{
padding-bottom: 5vw;
}
/* AZOREN UNTERSEITE */
.Azoren-Texte{
text-align: center;
width: 70%;
padding-bottom: 40px;;
padding-top: 40px;
}
.width-100{
width: 100%;
}
.padding-0{
padding: 0;
}
.zentriert{
display: flex;
flex-direction: column;
align-items: center;
}
#Auf-Buehne{
padding-top: 8vw;
padding-left: 15vw;
}
.overlay_left { position:absolute; z-index: 1; left: 0}
.overlay_right { position:absolute; z-index: 1; right: 0}
.background_blue {background-color: rgba(4, 60, 168 ,0.9)}
.background_beige {background-image: linear-gradient(rgba(220, 219, 214, 1) 7%, rgba(255, 255, 255,1) 70% )}