/* --- ALLGEMEIN --- */

h1 {
    text-align: center;
    color: #e21433;
}

h2 {
    color: #e21433;
    padding-top: 25px;
}


p {
    color: #676766;
}

a {
    color: #e21433;
    text-decoration: none;
}

a:hover {
    color: #a10e24;
    text-decoration: none;
}

html {
 background: url(Fahrradkette.png) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.btn-primary{
    color: #e21433;
    border-color: #99d0c1;
    border-style: solid;
    background-color: white;
    border-width: 2px;
    padding: 7px;
    margin-top: 0;
    font-size: 20px;
    font-weight: 400;
}

.btn-primary:hover{
    color: white;
    border-color: #99d0c1;
    border-style: solid;
    background-color: #99d0c1;
    border-width: 2px;
    padding: 7px;
    margin-top: 0;
    font-size: 20px;
    font-weight: 400;
}

.btn-primary:active{
    color: white;
    border-color: #99d0c1;
    border-style: solid;
    background-color: #99d0c1;
    border-width: 2px;
    padding: 7px;
    margin-top: 0;
    font-size: 20px;
    font-weight: 400;
}

.btn-primary:focus{
    color: white;
    border-color: #99d0c1;
    border-style: solid;
    background-color: #99d0c1;
    border-width: 2px;
    padding: 7px;
    margin-top: 0;
    font-size: 20px;
    font-weight: 400;
}



/* --- HEADER --- */

.gradient {
    height: 100px;
background: rgb(153,208,193);
background: linear-gradient(180deg, rgba(153,208,193,1) 0%, rgba(153,208,193,0) 100%);
    position: absolute;
  top: 0;
  width: 100%;
}


/* --- NAVI --- */




/* --- CONTENT --- */



.panel-ueberschrift {
    color: #e21433;
    border-color: #99d0c1;
    border-style: solid;
    border-width: 2px;
    padding: 7px;
    margin-top: 0;
        font-size: 20px;
    font-weight: 400;
}

.panel-ueberschrift a:after {
    font-family: Fontawesome;
    content: '\f056';
    font-size: 24px;
    font-weight: 300;
    color: #99d0c1;
    float: right;
}

.panel-ueberschrift a.collapsed:after {
    font-family: Fontawesome;
    content: '\f055';
}

.panel-default > .panel-heading {
    border-color: #99d0c1;
    background-color: none;
}

.table {
    color: #676766;
}



/* --- FOOTER --- */




/* --- MEDIA-QUERIES --- */

/*
bad-script-regular - latin
@font-face {
  font-family: 'Bad Script';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/bad-script-v16-latin-regular.eot'); /* IE9 Compat Modes 
  src: local(''),
       url('../fonts/bad-script-v16-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 
       url('../fonts/bad-script-v16-latin-regular.woff2') format('woff2'), /* Super Modern Browsers 
       url('../fonts/bad-script-v16-latin-regular.woff') format('woff'), /* Modern Browsers 
       url('../fonts/bad-script-v16-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS 
       url('../fonts/bad-script-v16-latin-regular.svg#BadScript') format('svg'); /* Legacy iOS 
} 
*/
/* --- Gallery --- */

.gallery{
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 15px;
 justify-content: center;
 align-items: center;
 padding: 20px;
}

.gallery img{
 cursor: pointer;
}
@media (max-width: 1000px){
    .gallery {
        grid-template-columns: repeat(2, 1fr);
        
    }
}
@media (max-width: 650px){
    .gallery {
        grid-template-columns: repeat(1, 1fr);
        
    }
}


/* ---  --- */

@media (max-width: 692px) {
    .ueberschrift {
      height: 94px;
    }
  }
  @media (max-width: 630px) {
    .ueberschrift {
      height: 89px;
    }
  }
  @media (max-width: 588px) {
    .ueberschrift {
      height: 85px;
    }
  }
  @media (max-width: 520px) {
    .ueberschrift {
      height: 80px;
    }
  }
  @media (max-width: 482px) {
    .ueberschrift {
      height: 76px;
    }
  }
  @media (max-width: 440px) {
    .ueberschrift {
      height: 73px;
    }
  }

  @media (max-width: 418px) {
    .ueberschrift1 {
      height: 55px;
    }
  }