/* latin */
@font-face {
  font-family: 'Hind';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(../fonts/Hind/Hind-Light.ttf) format('truetype');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin */
@font-face {
  font-family: 'Hind';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/Hind/Hind-Regular.ttf) format('truetype');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin */
@font-face {
  font-family: 'Hind';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/Hind/Hind-Medium.ttf) format('truetype');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin */
@font-face {
  font-family: 'Hind';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/Hind/Hind-SemiBold.ttf) format('truetype');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 200;
  font-display: swap;
  src: url(../fonts/Oswald/Oswald-ExtraLight.ttf) format('truetype');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(../fonts/Oswald/Oswald-Light.ttf) format('truetype');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/Oswald/Oswald-Regular.ttf) format('truetype');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
* {
    box-sizing:border-box
}

body, html {
    margin: 0;
    padding: 0;
    font-family: "Hind", Helvetica, sans-serif;
    font-size: 20px;
    color:#313A42;
}

html {
    max-width: 1600px;
    margin: auto;
    scroll-padding-top: 200px;
}

body {
    min-width: 320px;
    /* max-width: 1600px; */
    margin: 0 auto;
    background: #fff;
    padding: 0 ;
    min-height: 100vh;
    display: flex;
    flex-direction:column;
  }

h1, h2, h3 {
  margin: 0;
}

h1{
font-size: 2rem;
font-weight: 500;
}


h2{
font-weight: 400;
line-height: 1.9rem;
margin-bottom: 1rem;

  }

h3{
font-weight: 500;
font-size: 1rem;
padding:0.5rem 0 0 0;
}
  a {
    color:#20222b;
    transition: color ease-in-out 0.25s;
  }

  a:hover {
    color:#abde25;
  }

  button, .button{
padding: 0.25rem 1rem 0.15rem 1rem;
background: #313A42;
color: #fff!important;
border-radius: 3px;
border: 1px solid #313A42;
text-decoration: none;
display: inline-block;
font-size: 0.85rem;
margin: 0 1rem 0 0;
box-shadow: 3px 4px 6px -3px rgba(0,0,0,0.5);

  }

  h3 + button, h3 + .button {
margin-top: 1rem;

  }

  button.markme, .button.markme{
background: #abde25;
border: 1px solid #abde25;
color:#1c1e1d!important;
  }



article p, article ul, article ol{
    line-height:1.5rem;
    margin:0 0 1.25rem 0;
    font-size: 0.85rem;
    font-weight: 300;
}

article ul, article ol {
margin-top: 0;
    padding: 0;
    margin-left: 1rem;
  }

/* h3 + p{
    margin-top:0.25rem;
} */




/* Seitenkopf*/

header {
  max-width: 1600px;
  background: #fff;
  position: fixed;
  width: 100%;
  z-index: 2;
  padding: 1rem 4rem 0 4rem;
}

header h1, header h2 {
  font-family: 'Oswald', sanserif;
}

header h1{
  font-size: 2em;
  font-weight: 300;
  letter-spacing: 2px;
}

header h2{
font-size: 1.65em;
font-weight: 200;
line-height: 1rem;
}

header ul{
list-style-type: none;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 0;
}

header > ul li:last-child{
font-size: 0.9em;
line-height: 1.5rem;
}

nav {
  background: #313A42;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0.5rem -4rem -1rem -4rem;

}

nav ul {
display: flex;
list-style-type: none;
justify-content: center;
}

nav li {
margin:0 0.75rem;
}

nav li:first-child{

	background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjwhRE9DVFlQRSBzdmcgIFBVQkxJQyAnLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4nICAnaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkJz48c3ZnIGhlaWdodD0iMzJweCIgaWQ9IkxheWVyXzEiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDMyIDMyOyIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgMzIgMzIiIHdpZHRoPSIzMnB4IiB4bWw6c3BhY2U9InByZXNlcnZlIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48cGF0aCBmaWxsPSIjZmZmIiBkPSJNNCwxMGgyNGMxLjEwNCwwLDItMC44OTYsMi0ycy0wLjg5Ni0yLTItMkg0QzIuODk2LDYsMiw2Ljg5NiwyLDhTMi44OTYsMTAsNCwxMHogTTI4LDE0SDRjLTEuMTA0LDAtMiwwLjg5Ni0yLDIgIHMwLjg5NiwyLDIsMmgyNGMxLjEwNCwwLDItMC44OTYsMi0yUzI5LjEwNCwxNCwyOCwxNHogTTI4LDIySDRjLTEuMTA0LDAtMiwwLjg5Ni0yLDJzMC44OTYsMiwyLDJoMjRjMS4xMDQsMCwyLTAuODk2LDItMiAgUzI5LjEwNCwyMiwyOCwyMnoiLz48L3N2Zz4=);
background-repeat: no-repeat;
background-position: 50%;
  display: none;
}

nav a {
  color: #fff;
  text-decoration: none;
  position: relative;
}

nav a:hover {
  color: #abde25;
  text-decoration: none;
  position: relative;
}

nav a:after {
content:"";
  background-color: #abde25;
  position: absolute;
  height: 2px;
  width: 0;
  bottom: 2px;
  left: 0;
  transition: all ease-in-out 0.25s;
}

nav a:hover:after {

  width: 100%;

}
/*Seitenkopf Ende*/
main{
  margin-top: 9rem;
}

main > article{
  margin:3.5rem 7rem 4rem 7rem;
          }

/* fond img section*/

section.starter {
  background: url(../img/HO6A7376.jpg) no-repeat;
  background-size: cover;
  background-position: center;
  min-height: 17rem;
}

section.lesson {
  background: url(../img/guitar.jpg) no-repeat;
  background-size: cover;
  background-position: center;
  min-height: 11rem;
}

section.workshoppiano {
  background: url(../img/nord.jpg) no-repeat;
  background-size: cover;
  background-position: center;
  min-height: 11rem;
}

section.clear {
  background-size: cover;
  background-position: center;
  min-height: 2rem;
}

/* fond img section Ende */


/* flexit Bereiche*/

section  {
  display: flex;
}

section article {
  flex-basis: 100%;
  min-width: 50%;
  padding: 2.5rem 2rem 3rem 2rem;
}

section article img {
  width: 100%;
  height: 101%;
    object-fit: cover;
    font-family: 'object-fit: cover;';
    vertical-align: top;
}

section.gridit  {
  display: flex;
  flex-wrap: wrap;
}

section.gridit article {
  flex:1 1 16.5rem;
  padding: 1.5rem 0 1rem 0;
  min-width: auto;
}
section.gridit article > *:not(img){
  padding-left: 2rem;
  padding-right: 2rem;
}


/* Medien*/
iframe {
  width:100%;
  height:100%;
  min-height: 200px;
  border: none;
  vertical-align: top;
}

.socialcontact {
  position: absolute;
    z-index: 1;
    right: 0;
    bottom: 0;

    height:100%;
    width:4rem;
}

.socialcontact ul{
  margin: 0;
  padding:0;
  list-style-type: none;
  margin-top: 15rem;
}

.socialcontact a{
  text-decoration: none;
    color: #fff;
    display: inline-block;
    width: 100%;
    text-align: center;
    height: 2rem;
    margin-bottom: 1rem;

    background-repeat: no-repeat;
    background-position: 50%;

}

.socialcontact a:hover{
background-color: #abde25;

}

/*Social Media*/
.facebook {
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNjQgNTEyIj48cGF0aCBmaWxsPSIjZmZmIiBkPSJNNzYuNyA1MTJWMjgzSDB2LTkxaDc2Ljd2LTcxLjdDNzYuNyA0Mi40IDEyNC4zIDAgMTkzLjggMGMzMy4zIDAgNjEuOSAyLjUgNzAuMiAzLjZWODVoLTQ4LjJjLTM3LjggMC00NS4xIDE4LTQ1LjEgNDQuM1YxOTJIMjU2bC0xMS43IDkxaC03My42djIyOSIvPjwvc3ZnPg==);
background-size: 25%;
}

.linkedin {
	background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBmaWxsPSIjZmZmIiBkPSJNMTkgMGgtMTRjLTIuNzYxIDAtNSAyLjIzOS01IDV2MTRjMCAyLjc2MSAyLjIzOSA1IDUgNWgxNGMyLjc2MiAwIDUtMi4yMzkgNS01di0xNGMwLTIuNzYxLTIuMjM4LTUtNS01em0tMTEgMTloLTN2LTExaDN2MTF6bS0xLjUtMTIuMjY4Yy0uOTY2IDAtMS43NS0uNzktMS43NS0xLjc2NHMuNzg0LTEuNzY0IDEuNzUtMS43NjQgMS43NS43OSAxLjc1IDEuNzY0LS43ODMgMS43NjQtMS43NSAxLjc2NHptMTMuNSAxMi4yNjhoLTN2LTUuNjA0YzAtMy4zNjgtNC0zLjExMy00IDB2NS42MDRoLTN2LTExaDN2MS43NjVjMS4zOTYtMi41ODYgNy0yLjc3NyA3IDIuNDc2djYuNzU5eiIvPjwvc3ZnPg==);
background-size: 40%;
}

.xing {
	background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzODQgNTEyIj48cGF0aCBmaWxsPSIjZmZmIiBkPSJNMTYyLjcgMjEwYy0xLjggMy4zLTI1LjIgNDQuNC03MC4xIDEyMy41LTQuOSA4LjMtMTAuOCAxMi41LTE3LjcgMTIuNUg5LjhjLTcuNyAwLTEyLjEtNy41LTguNS0xNC40bDY5LTEyMS4zYy4yIDAgLjItLjEgMC0uM2wtNDMuOS03NS42Yy00LjMtNy44LjMtMTQuMSA4LjUtMTQuMUgxMDBjNy4zIDAgMTMuMyA0LjEgMTggMTIuMmw0NC43IDc3LjV6TTM4Mi42IDQ2LjFsLTE0NCAyNTN2LjNMMzMwLjIgNDY2YzMuOSA3LjEuMiAxNC4xLTguNSAxNC4xaC02NS4yYy03LjYgMC0xMy42LTQtMTgtMTIuMmwtOTIuNC0xNjguNWMzLjMtNS44IDUxLjUtOTAuOCAxNDQuOC0yNTUuMiA0LjYtOC4xIDEwLjQtMTIuMiAxNy41LTEyLjJoNjUuN2M4IDAgMTIuMyA2LjcgOC41IDE0LjF6Ii8+PC9zdmc+);
background-size: 40%;
}
/* Einteilen der Section in 1 Block/Article, 2 Blöcke/Article, 3 Blöcke/Article, oder einen schmalen Trenner   */

section.marker article, section.featurette.marker article{
    padding-top: 6rem;
  }

section.spacer {
      text-align: center;
    }



/* section.gallery article{
  padding:1rem 3rem 1.5rem 3rem;
          } */

section.featurette article{
  padding:1.5rem 2rem;
          }




footer {
  max-width: 1600px;
  position: fixed;
width: 100%;
bottom: 0;
}

footer article{
    padding:0 2rem;
      }

      footer p{
        margin: 0;
      }

/*   Styling der Blöcke/Article   */

  .darkmode {
    background: #313A42;
    color: #fff!important;
  }

  .darkmode a {
    color: #abde25;
  }

  .darkmode a:hover {
    color: #fff;
  }

  .markme {
    color:#8abe00;
  }


  .lightmode{
  background: #e6e6e6;

    }

  .colormode{
    /* background-color: #abde25; */
    background: linear-gradient(to bottom right, #e3ff9a, #96c824 31.09%, #608700 74.79%);
    }

  .imagemode {
    padding: 0!important;
    overflow: hidden;
    }


/*   Styling von text (p) in Blöcken/Article   */


p.xtr {
  font-size: 1.1rem;
}
p.xtrbold {
  font-weight: 600;
  font-size: 1.1rem;
}
footer p {
  text-align: right;
}


/*   Styling der Gallery   */

 section.gallery article {
        padding:0;
        }


section.gallery article div{
          display: flex;
          flex-wrap: wrap;
          /* margin-top: 1rem; */
          justify-content: space-between;

        }

section.gallery article img{
  width:12rem;
height: 12rem;
/* margin: 0 0.25rem 0.5rem 0.25rem; */
flex-grow: 1;
        }

        .cc_container .cc_message { font-size: 1rem;}