@import url(normalize.css);
@import url(all.min.css);
@import url(lightbox.min.css);
@import url(flickity.min.css);



/*Allgemeine Formatierungen*/
* {
  box-sizing: border-box;
}

/*für alle aktivierten(gedrückter) Links/Anker und fokusierter Eingabefleder die Outline (Auswahl-Rahmen) ausblenden*/
*:active,
*:focus{
  outline: 0;
  outline: none;
}



body {
  margin:0;
  color: #8f8f8f;
  font-family: 'Raleway',sans-serif;
}

a {
  text-decoration: none;
}



h1 {
  text-transform: uppercase;
}



p {
  margin-bottom: 20px;
  font-size: 1em;
  line-height: 1.5em;

}

ul,ol{
  padding:0;
  margin:0;
  list-style-type:none;
}

/*figure-elemente haben links und rechs und oben und unten Außenabstände, braucht kein Mensch*/
figure{
  margin: 0;
}

/*innerbox*/
.innerbox{
  max-width: 980px;
  margin: 0 auto;
  padding: 0 2%;
  position: relative;
}

header .innerbox{
 overflow:hidden;
}

section .innerbox{
  padding: 50px 2%;
}


/*header + nav ----------------------------------------------------------------*/




/*header  mit 3 Zuständen----------------------------------------------------------------*/

/* Zustand 1: -------------------------------------------------------
 Header-Status von Anfang an, bevor man mit der mouse nach unten scroll*/
.main_h {
  position: fixed;
  top:0;
  left:0;
  z-index: 999;
  width: 100%;
  background: none;
  padding-top: 17px;
  padding-bottom: 6px;



  /*für die Auf-Zu-Klapp-Funktion des mobilen Toggles wichtig*/
  max-height: 70px; /*mit der Höhe des Logos abstimmen*/
  overflow: hidden;

   
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -ms-transition: all 0.3s;
  -o-transition: all 0.3s;
}

/* Zustand 2: ---------------------------------------------------------
Beim scrollen mit der Mouse wird ab einer scroll-höhe von 100px dynamisch über das script.js zu der vorhandenen .main_h-klasse die sticky-klasse ergäntzt. Diese sorgt für das Positionieren des Headers(sticky/fixieren/...)*/
.sticky {
  background-color: rgba(255, 255, 255, 0.93);
  border-bottom: 1px solid gainsboro;
}

/* Zustand 3:------------------------------------------------------------
 Nur in der mobilen Ansicht erscheint der toggle(Hamburger-Icon-Menu). Wenn man anklickt wird das navigation-menu auf/zu geklappt  und von der sichtbaren Anfangshöhe 70px wird die Höhe auf 400px erhöht*/
.open-nav {
  max-height: 400px !important;
  background-color: rgba(255, 255, 255, 0.93);
  border-bottom: 1px solid gainsboro;

}
.open-nav .mobile-toggle {
  transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg);
}
 /* Ende - header-Zustände --------------------------------------*/






/*--Logo-Klasse im Anker-tag(Inline-Element) /////////////*/
.logo {
  font-size: 25px;
  color: #8f8f8f;
  line-height: 1;
  text-transform: uppercase;
  float: left;
}
/*Wenn Logo-Bild um Bild-Größe zu ändern /////////////*/

.logo img{
width:80px;/*hier ändern*/

}

/*  Ende ----  Logo ----------------------------------*/



/* Navigation -----------------------------*/
/* Zustand 1:  Navigation-Status von Anfang an, bevor man mit der mouse nach unten scroll*/
nav {
  float: right;
  margin-top:13px;
}

nav ul {
  text-align: right;
}

nav ul li {
  display: inline-block;
  margin-left: 35px;
}

nav ul li:first-child {
  margin-left: 0;
}
nav ul li a {
  color: #8f8f8f;
  text-transform: uppercase;
}


/* Zustand 2: Beim scrollen  --------------------------*/
.sticky nav ul a {
  color: #000;
}


/* Zustand 3: Beim mobile-toggle auf-klappen linkfarbe ändern  --------------------------*/
.open-nav nav ul a {
  color: #000;
}

/* Aktiv-Schaltung des Start-Ankers bei */
nav ul li a.active {
    color: #d6bc10;
    text-transform: uppercase;
  }
  
  /*Aktiv-Schaltung der lokaler Anker beim Scrollen*/
  .sticky nav ul a.active {
    color: #d6bc10 !important;
  }

/* Zustand 3: Mobile Ansicht  --------------------------*/
/*  mobile-toggle generieren undpositionieren des Hamburger-Icons in der mobilen Ansicht */
.mobile-toggle {
  display: none;/*toggle wird für die Desktop-Ansicht ausgeblendet und in der mobilen-Ansicht mit display:inherit wieder sichtbar/eingebledet*/
  cursor: pointer;

  position: absolute;
  right: 2%;
  top: 0;

  -webkit-transition: all 200ms ease-in;
  -moz-transition: all 200ms ease-in;
  transition: all 200ms ease-in;
  -ms-transition: all 200ms ease-in;
  -o-transition: all 200ms ease-in;
}

.mobile-toggle span {
  display: block; /*Inline voreingestellt, kann keine Breit- Höhe, deshalb display:block*/
  width: 30px;
  height: 4px;
  margin-bottom: 6px;
  border-radius: 1000px;
  background: #ccc;
}


.sticky .mobile-toggle span {
  background: #d6bc10;
}

.open-nav .mobile-toggle span {
  background: #d6bc10;
}


/* Ende --- Navigation -----------------------------*/





/* Hero-Großbild-Bereich-----------------------------*/
.hero {
  position: relative;
  background: url(../bilder/higru/header_bg_es_lichtet_sich.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  text-align: center;
  color: #fff;
  height:100vh; /*Device-Höhe auslesen und die Box-Höhe dynamisch anpassen*/
  letter-spacing: 2px;
  /*
  Absolulte Ausrichtung mit Flex-Box-Technologie
display:flex;
justify-content: center;   horizontale Zentrierung
align-items: center;  vertikale Zentrierung
*/
}


/* Hero-rechtliches impresseum datenschutz-----------------------------*/
.rechtliches .hero {
  height:50vh; /*Device-Höhe auslesen und die Box-Höhe dynamisch anpassen*/
}

/* Hero-Kontaktformular-----------------------------*/
.kontakt .hero {
  height:50vh; /*Device-Höhe auslesen und die Box-Höhe dynamisch anpassen*/
}



.rechtliches p{
  overflow: hidden;
}


.hero h1 {
width: 65%;
letter-spacing: 4px;
margin:0;/*voreingestellter Aussenabstand oben/unten wegnehmen*/
/* eine Möglichkeit h1 zu zentrieren: padding: 45vh 0;*/
position: absolute;
left: 50%;
top: 50%;
transform:translate(-50%,-50%); /*Positioniert die h1 selbst mittig*/
background: rgba(255, 255, 255, 1);
background: linear-gradient(to right,rgba(255,0,0,0), rgb(255, 255, 255, 0.9), rgba(255,0,0,0));
padding: 5px 10px;
}

.hero h1 span:first-child {
display: block;
font-weight: 700;
color: #000;
font-size: 1.5em;
letter-spacing: 7px;
}

.hero h1 span:last-child {
margin-top: 5px;
display: block;
font-size: 0.5em;
font-weight: 400;
color:  #000;
}



.mouse {
  width: 26px;
  height: 46px;
  border: 2px solid #d6bc10;
  position: absolute;
  bottom: 40px;
  left: 50%;
  /* transform:translate(-50%,0); oder:*/
  transform: translateX(-50%);
  -webkit-border-radius: 13px;
  -moz-border-radius: 13px;
  -ms-border-radius: 13px;
  border-radius: 13px;
}
.mouse span {
  display: block;/*voreingestellt inline*/
  width: 2px;
  height: 2px;

  margin: 6px auto;
  border-radius: 4px;
  background: #d6bc10;

  -webkit-animation-duration: 1s;
  animation-duration: 1s;

  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;

  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;

  -webkit-animation-name: scroll;
  animation-name: scroll;
}



/* Animation der Mouse*/
@-webkit-keyframes scroll {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
    -moz-transform: translateY(20px);
    -ms-transform: translateY(20px);
    -o-transform: translateY(20px);
}
}
@keyframes scroll {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
    -moz-transform: translateY(0);
    -o-transform: translateY(0);
}

  100% {
    opacity: 0;
    -webkit-transform: translateY(20px);
    -ms-transform: translateY(20px);
    transform: translateY(20px);
  }
}


/* Ende Hero-Großbild-Bereich-----------------------------*/


/*Section - Formatierung----------------------------------*/


section h2{
  text-align: center;
  text-transform: uppercase;
  font-weight: 500;
  color: #666;
  margin-bottom: 30px;
  font-size: 1.4em;
}


.rechtliches h2{
  text-align: left;
  font-size: 1.3em;
  margin: 40px 0 15px 0;
  text-transform: capitalize;
  font-weight: 700;
}


section h3{
font-weight: 700;
letter-spacing: 2px;
}

.button{
  color: #8f8f8f;
  border-left: solid 1px #d6bc10;
  border-right: solid 1px #d6bc10; ;
  text-transform: uppercase;
  display:inline-block;/*voreingestellt inline*/
  padding:.625em 1.2em;
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -ms-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
  margin-top: 25px;
}

.button:hover{
background:#d6bc1014;
}


/*css-Spalten-Layout*/
.row{
overflow: hidden;
}

.halbe{
width: 47%;
margin-right:6%;
float: left;
}


.drittel{
width:29.333%;
margin-right:6%;
float: left;
}


.zweidrittel{
  width: 64.666%; /*2x drittel (29.333 + 1 Zwischenabstand 6%*/
  margin-right: 6%;
  float: left;
}


.halbe:last-child,
.drittel:last-child,
.zweidrittel:last-child{
margin-right: 0;
}

/*about //////////////////////////////////////////*/


#about .halbe img{
  width: 100%;
}

#about h3{
  margin: 0 0 20px 0;
}

/*about - vita /////////////////////////////////////*/


#vita,#stipendien{
  background: #F9F9F9;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}




#vita h3{
margin: 15px 0 40px 0;
}

section #stipendien{
  background: #F9F9F9;
}

#vita .innerbox{
padding: 30px;
margin-bottom: 25px;
}

#stipendien .innerbox{
  padding: 30px;
}



section #vita .drittel{
  margin-right:20px;
  }

section #stipendien .drittel{
  margin-right:20px;
}

.block-point-wrapper{
  border-left: 1px solid #d6bc10;
  margin-bottom: 40px;
}

.block-point-date{
  font-weight: 520;
  margin: 0em 1em 0em 0em;
  white-space:nowrap;
}

.block-point-title{
  margin: 0em 1em;
  line-height: 1.5em;
}


.block-point-content{
  font-size: 0.9em;
  font-weight: lighter;
  margin: 0.7em 1em 1em 1em;
}



/*schnellkontakt//////////////////////////////////////////*/

#schnellkontakt{
  background:#393939;
  color: #fff;
}


#schnellkontakt .button{
  color:#393939;
  background: #fff;
}

#schnellkontakt .button:hover{
  color:#d6bc10;
}


/*work ///////////////////////////////////////////*/

#work {
  background: #F9F9F9;
}

ul#work-categories{
  overflow: hidden;
}

ul#work-categories li{
  width:50%;
  float:left; /*li Elemente werden nebeneinander positioniert, im Eltern-Element muss float aber durch overflow:hidden begrenzt werden, sonst rutscht "kontakt" nach oben*/
}

ul#work-categories li img{
  width:100%;
  transform:scale(1);/*voreingestellt scale(1,1)1)*/
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -ms-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}

ul#work-categories li:hover img{
  transform:scale(1.2);
}

/*Overlay-Effekt, Figcaption wird als overlay auf die figure(overlay-box /  Bezugspunkt) geschichtet/gelegt*/


/*overlay-box*/
ul#work-categories figure{
  line-height: 0;
  overflow: hidden;/*überlauf des skalierten Bildes verhindern*/
  position:relative;/*static ist voreingestellt, Bezugspunkt für die figcaption*/
}

/*overlay*/
ul#work-categories figure figcaption{
  background: rgba(0, 0, 0, 0.5); /*Farbe wird in ihrer Deckkraft geändert*/
  line-height: 1.5em;
  position: absolute;
  left:0; /*wir wollen die Fläche(figure) komplett bedecken, deswegen "Kaugummi-Effekt"*/
  right:0; /*wir wollen die Fläche(figure) komplett bedecken, deswegen "Kaugummi-Effekt"*/
  top:0;/*wir wollen die Fläche(figure) komplett bedecken, deswegen "Kaugummi-Effekt"*/
  bottom:0;/*wir wollen die Fläche(figure) komplett bedecken, deswegen "Kaugummi-Effekt"*/
  opacity:0;
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -ms-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}

ul#work-categories figure:hover figcaption{
  opacity:1;
}


/*overlay-content*/
ul#work-categories figure figcaption .figcaption-content{
position: absolute;
left:50%; /*die linke Kante des Objekts wird in die Mitte gesetzt*/
top:50%;
transform: translate(-50%, -50%); /*damit die Mitte der eigenen Breite ausgelesen wird*/
text-align: center;
letter-spacing: 1px;
width:60%;
}


/*Anfangszustand ohne hover*/
span.work-category{
display: block; /*damit nimmt Element die ganze Breite ein, d.h. Elemente werden so untereinander positioniert*/
text-transform: uppercase;
font-size: 1.2em;
color: #fff;
-webkit-transition: all 0.2s ease-in-out 0.1s;
-moz-transition: all 0.2s ease-in-out 0.1s;
-ms-transition: all 0.2s ease-in-out 0.1s;
-o-transition: all 0.2s ease-in-out 0.1s;
transition: all 0.2s ease-in-out 0.1s;
opacity:0;
}



/*beim drüber fahren über das Bild soll die Animation der Texte von oben/unten ausgelöst werden*/
figure:hover span.work-category{
  opacity: 1;
  }


/*work - künstlerische werke, gallery/////////////////////////////////////////*/

#work nav {
  float: left;
}

#kuenstlerische-werke h4{
  margin-top: 0;
}


.gallery-2022,.gallery-2021,.gallery-plastik-2020 {
  margin-bottom: 30px;
}



ul.gallery-drittel{
  overflow: hidden;
}

ul.gallery-drittel li{
  width:32%;
  margin-right:2%;
  float:left;
  }

  ul.gallery-drittel li:nth-child(3n){
    margin-right: 0;
  }

.gallery-2022 li:last-child{
  display: none;
}


ul.gallery-halbe {
  overflow: hidden;
}

ul.gallery-halbe li{
  width:49%;
  margin-right:2%;
  float:left;
  }

.gallery-halbe li:last-child{
  margin-right: 0;
}

.gallery-item {
  break-inside: avoid;
  margin-bottom: 7%;
}

.gallery-2020 .gallery-halbe .gallery-item{
  margin-bottom: 4.6%;
}

.gallery-item figure {
  margin: 0;
  position: relative;
}


.gallery-item img {
  width: 100%;
  transform:scale(1);
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -ms-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}


.gallery-item img:hover{
  transform:scale(1.08);
}


.gallery-item figure{
  line-height: 0;
  overflow: hidden;/*überlauf des skalierten Bildes verhindern*/
}




/*work - grafikdesign, slideshow/////////////////////////////////////////*/

#grafikdesign .main-gallery,.main-gallery-2{
  margin-bottom: 90px;
}






/*Ausstellungen /////////////////////////////////////////*/
section #ausstellungen{
  background: #fff;
}




/*kontakt/////////////////////////////////////////*/
form#kontaktformular input[type="text"],
form#kontaktformular input[type="email"],
form#kontaktformular textarea{
background: #f9f9f9;
border:1px solid #eee;
padding:0.625em;
}

form#kontaktformular input[type="text"]:focus,
form#kontaktformular input[type="email"]:focus,
form#kontaktformular textarea:focus{
background: #fff;
border:1px solid #d6bc10;
}



form#kontaktformular textarea{
  width: 100%;
  height: 300px;
  resize: none; /*Vergrößerungsanfasser für Chrome/Firefox ausblenden*/
}

form#kontaktformular input[type="submit"]{
  border: 0;/*voreingestellten Rahmen beim Sende-Button ausblenden*/
}

form#kontaktformular input[type="submit"].button:hover{
  background:#d6bc10;
  color: #F9F9F9;
  }


/*Placeholder-Formatierung des Platzhalter-Textes bei den Eingabefeldern*/
::-webkit-input-placeholder { /* Edge */
  text-transform: capitalize;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
  text-transform: capitalize;
}
::placeholder {
  text-transform: capitalize;
}




/*Footer - Formatierung----------------------------------*/

footer{
  background: #393939;
}

footer .innerbox{
  padding:40px 2%;
  overflow: hidden;
}

footer ul.rechtliches{
float: left;
margin-top: 8px;
}

footer ul.rechtliches li{
  display: inline;
}

footer ul.rechtliches li a{
  color:rgba(255, 255, 255, 0.6);
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -ms-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
  margin-right: 15px;
 }
 


 footer ul.rechtliches li a:hover{
  color:rgba(255, 255, 255, 1);
 }


footer ul.social{
float:right;
margin-top:0;
}

ul.social{
  margin-top: 20px;
}

ul.social li{
  display: inline-block;
}

ul.social li a{
  color: rgba(255, 255, 255, 0.7);
  font-size: 2em;
  margin:0 5px;
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -ms-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}

ul.social li a:hover{
  color: rgba(255, 255, 255, 1);
}


footer ul.social li a{
  /*
  margin-right:0;
  margin-left:15px;
  */
  margin: 0 0 0 15px;
  }

  
/*back-to-top*/

#back-to-top {
  background: #d6bc10;
  font-size: 2em;
  color: #fff;
  position: fixed;
  bottom: 20px;
  right: 20px;
  padding: 0.2em 0.3em;
  z-index: 100;
  display:none;/*back-to-top-button wird positioniert und von Anfang an ausgeblendet. Das Einblenden erfolgt über das Scroll-Verhalten */
}





/*  CSS-Weichen/Breakpoints/Mediaqueries //////////////////*/


@media only screen and (max-width: 1500px) {



/* Apple-Problematik für touch-screen-fähige Geräte:Hero-Großbild-Bereich-----------------------------*/

.hero {

  background: url(../bilder/higru/header_bg_es_lichtet_sich.jpg) no-repeat 17% center scroll;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
}

    
    ul#work-categoriest li:last-child{
    display: inherit;/*voreingestellt, du bist was du warst vor deiner Ausblendung und wirst wieder standart sichtbar*/
    }

}/*ende Breakpoint bis 1500px*/


@media only screen and (max-width: 1200px) {

.hero h1 {
  /*zwei Möglichkeiten:*/
  font-size: 1.7em;
  width: 80%;
  }


 

}/*ende Breakpoint bis 1200px*/


@media only screen and (max-width: 1100px) {
            /*back-to-top*/
            #back-to-top {
              right: inherit; /*inherit oder auto, um den bereits zugewiesenen Wert von right aufzuheben*/
              left: 50%;
              transform: translateX(-50%);
              }
      

}/*ende Breakpoint bis 1100px*/


@media only screen and (max-width: 866px) {

				  nav ul li {
					margin-left: 20px;
					font-size:0.9em;
				  }

          /*Gestaltungs-Raster umstellen auf 1-spaltig*/
          .halbe,.drittel,.zweidrittel{
            width:100%;
            margin-right:0;
            float:none;
          }

          /*about ///////////////*/
          
          #about .innerbox{
          text-align: center;
          width:90%;
          }
        


          #about .halbe:first-child{
          margin-bottom: 60px;
          }

          #about .button{
            margin-top: 10px;
          }


          /*about - vita*/

          #about #vita,#stipendien{
            text-align: center;
          }

          .block-point-wrapper{
              border-top: 1px solid #d6bc10;
              border-left: 0;
            }
        
          .block-point-date{
            margin-bottom: 10px;
          }

        .block-point-title{
            margin-top: 15px;
          }
    

          /*schnellkontakt*/
          #schnellkontakt{
            text-align: center;
          }
            

          /*work////////////////*/

          ul#work-categories{
            width: 96%;
            margin:auto; /*die 4% Abstand werden automatisch aufgeteilt*/
         }

         ul#work-categories li{
           width:49%;
           margin:0 2% 2% 0;
           border: 1px solid #e8e8e8;
           padding: 0.625em;
         }

         ul#work-categories li:hover img{
          transform:scale(1); /*Bild soll beim hovern nicht mehr "wachsen"*/
        }

         ul#work-categories li:nth-child(2n){ /*jedes zweite Kind soll nach rechts keinen Abstand mehr haben*/
          margin-right:0;
          /*margin:0 0 2% 0;*/
        }

           /*overlay*/
           ul#work-categories figure figcaption{
              background:none; /*keine Farbe mehr*/
              position:static; /*von absolute auf static, weil kein overlay mehr über figure gezogen werden soll. Wir brauchen also keine Referenz mehr*/
              opacity:1;
            }

          /*overlay-content*/
           ul#work-categories figure figcaption .figcaption-content{
          position:static;
          transform: translate(0,0);
          letter-spacing: 1px;
          width:100%; /*oder auto, da es ein Blockelement ist und es dann die reguläre Breite hätte*/
           }

          /*Anfangszustand ohne :hover*/
          span.work-category{
          background:none;
          color:#666;;
          font-size: 1em;
          padding:10px 0 0;
          transform:translateY(0);
          opacity:1; /*Sichtbarkeit einblenden, da wir jetzt kein hovern mehr haben, sondern span immer eingeblendet werden soll*/
        }



        /*work - galleries ////////////////*/
        
        #kuenstlerische-werke .innerbox{
          width:90%;
          }


          /*kontakt/////////////*/
  
          #kontaktformular .halbe:first-child{
          margin-bottom: 20px;
          }
    
          #kontaktformular .button{
          margin:0;
          }

          #kontakformular p:last-child{
            text-align: center;
          }

        /*rechtliches/////////////*/
          .rechtliches section h2{
            text-align: center;
          }



  
}/*ende Breakpoint bis 866px*/


@media only screen and (max-width: 766px) {

				/*header*/
				.main_h {
				  padding-top: 25px;
				}

        .hero h1 {
          /*zwei Möglichkeiten:*/
          font-size:1.2em;
          width: 100%;
          }
            
          .hero h1 span:last-child {
          font-size:0.6em;
          }

				.logo {
				  float: none;
				}

        .logo img{
          width:65px;
        }
        
				/*nav*/
				nav {
				  width: 100%;
				}

				nav ul {
				  padding-top: 10px;
				  margin-bottom: 22px;
				  float: left;
				  text-align: center;
				  width: 100%;
				}

				nav ul li {
				  width: 100%;
				  padding: 7px 0;
				  margin: 0;
				}

				.mobile-toggle {
				  display:inherit;
				  /*toggle wird in der mobilen Ansicht durch display:block wieder sichtbar gemacht. Wurde in der Desktop-Ansicht erst positioniert und auch gleich ausgeblendet*/
				}


        ul#work-categories li{
          width:100%; 
          float: none;            
          margin:0 0 2% 0;
        }


        #kuenstlerische-werke nav ul{
          padding-top:0;
           }
   
   
         /*Nur die direkte innerbox der nav soll angesprochen werden, nicht die innerbox der Gallery*/
         #kuenstlerische-werke > div{
         margin-bottom: 10px;
         }
      


        .gallery-2022 li:last-child{
          display:inherit;
        }

    
        ul.gallery-drittel li{
          width: 49%;
          margin-right: 2%;
        }
  
      .gallery-drittel li:nth-child(2n){
        margin-right:0;
      }

      ul.gallery-drittel li:nth-child(3){
        margin-right: 2%;
      }


      ul.gallery-drittel li:nth-child(9){
        margin-right: 2%;
      }

      .gallery-item {
        margin-bottom: 5.3%;
      }

      .gallery-2020 li:nth-child(2){
        margin-right: 0;
      }

      .gallery-2020 li:nth-child(3){
         display: none;
          }
        
 
      ul.gallery-halbe li{
          width: 100%;
          margin-right: 2%;
        }
      
 
        #grafikdesign h2{
          margin-bottom: 0;
        }



}/*ende Breakpoint bis 766px*/



@media only screen and (max-width: 600px) {




  .rechtliches h2{
    font-size: 1.3em;
  }


  footer{
    padding-bottom: 50px; /*damit back to top button mit dem Text im footer nicht überlappt*/
  }

  footer ul.rechtliches{
    float:none;
    margin-top:8px;
    text-align: center;
    }
    
    footer ul.social{
       float:none;
       margin-top:15px;
       text-align: center;
     }
     
    footer ul li a{
      margin:0 10px !important;
    }



}/*ende Breakpoint bis 600px*/


@media only screen and (max-width: 500px) {

  .hero h1 {
    /*zwei Möglichkeiten:*/
    font-size:1.1;
    width: 100%;
    letter-spacing: 1.6px;
    }
    
    .hero h1 span:last-child{
      letter-spacing: 2.5px; 
    }

    

}/*ende Breakpoint bis 500px*/


@media only screen and (max-width: 400px) {
  .hero h1 span:first-child{
    letter-spacing: 3.5px; 
  }



}/*ende Breakpoint bis 400px*/




/*Datenscchutz konformes Einbinden von google schrfit raleway*/
/* raleway-300 - latin */

@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/raleway-v28-latin-300.eot'); /* IE9 Compat Modes */
  src: url('../fonts/raleway-v28-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/raleway-v28-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/raleway-v28-latin-300.woff') format('woff'), /* Modern Browsers */
       url('../fonts/raleway-v28-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/raleway-v28-latin-300.svg#Raleway') format('svg'); /* Legacy iOS */
}

/* raleway-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/raleway-v28-latin-regular.eot'); /* IE9 Compat Modes */
  src: url('../fonts/raleway-v28-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/raleway-v28-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/raleway-v28-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/raleway-v28-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/raleway-v28-latin-regular.svg#Raleway') format('svg'); /* Legacy iOS */
}

/* raleway-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/raleway-v28-latin-700.eot'); /* IE9 Compat Modes */
  src: url('../fonts/raleway-v28-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/raleway-v28-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/raleway-v28-latin-700.woff') format('woff'), /* Modern Browsers */
       url('../fonts/raleway-v28-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/raleway-v28-latin-700.svg#Raleway') format('svg'); /* Legacy iOS */
}

/* raleway-800 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 800;
  src: url('../fonts/raleway-v28-latin-800.eot'); /* IE9 Compat Modes */
  src: url('../fonts/raleway-v28-latin-800.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/raleway-v28-latin-800.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/raleway-v28-latin-800.woff') format('woff'), /* Modern Browsers */
       url('../fonts/raleway-v28-latin-800.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/raleway-v28-latin-800.svg#Raleway') format('svg'); /* Legacy iOS */
}