* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: 'Quicksand';
    
    
    
  }

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

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

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

/* great-vibes-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: 'Great Vibes';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/great-vibes-v14-latin-regular.eot'); /* IE9 Compat Modes */
  src: url('../fonts/great-vibes-v14-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/great-vibes-v14-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/great-vibes-v14-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/great-vibes-v14-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/great-vibes-v14-latin-regular.svg#GreatVibes') format('svg'); /* Legacy iOS */
}

  
  :root {
    --color-bg: #fcfcfc;
    --color-primary: #ffffff;
    --color-secondary: #000000;
    --color-2: #a2e3fd; 
    --color-3: #678fc4;
    --color-4: #335d94; 
    --color-5: #dfdbd3b4;
    --color-7: #e6f2ff; 

    --padding-main: 1rem;
    --padding-intro: 2rem;
  
    --border-main: 1px inset black;
    --box-shadow: 3px 3px 10px 2px rgba(0, 0, 0, 0.479);
  }
  
  html,
  body {
    height: 100%;
  }
  
  
  /* DIVIDER */
  .divider0px {
    border: 1px inset var(--color-5);
    
    
    }
    .divider100px {
      width: 100%;
      background-image: linear-gradient(to right, rgb(0, 0, 0) , rgb(46, 49, 65));
     
    }
    .divider25px {
      height: 25px;
    
    }
    .divider50px {
      height: 50px;
    }
    .divider100px {
      height: 100px;
    }
  
  
  header {   
    background-image: url(../images/banner1a_kl.jpg);
    background-size: cover;
    background-position: center;
    min-height: 70vh;
    
    _margin-top: 3rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    color: var(--color-4);
    text-shadow: 3px 3px 10px #ffffff;  /* Links mit Schein nach außen versehen. */  
    
  }
  
h1 { font-size: 4.000rem; }
h2 { font-size: 1.875rem; }
h3 { font-size: 1.500rem; }
h4 { font-size: 1.200rem; }
h5 { font-size: 1.200rem; }
h6 { font-size: 1rem; }
h7 { font-size: 1rem; }

p { margin: 0 0 1.6rem; padding: 0; font-size: 1.1rem; 
}

h1  {
  margin-top: 50vh;
  font-family: 'Great Vibes';
}

h2, h3  {
  margin-top: 50vh;
  font-family: 'Parisienne';
}

h2, h3, h4 h5{
  padding: var(--padding-main); 
}

h6  {
 
  font-family: 'Quicksand';
  padding-left: 1rem;
}

.navbar-brand {
  font-family: 'Great Vibes';
}

.nav-item {
  font-weight: 500;
  color: #000;
}

.nav-link a:active{
  _font-weight: 700;
  _color: #000;
}

.wrapper {
  display: grid;  
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  margin-top: 100px;

}

.wrapper h4{
  font-size: 2rem;
}

img {
  width: 100%;    
}

.navbar-logo {
  width: 250px;     
}
 
/* Call-to-action-button im Header */

.button {
  background-color: var(--color-5);
  position:relative;
  width: fit-content;
  border-radius: 10px;
  margin-left: 2rem;
  margin-top: 1rem;
  font-size: 0.9em;
  _font-weight: 400;
  padding: 0.7rem;
  box-shadow: var(--box-shadow);
}

.button a {
 
    color: #000;
    text-decoration: none;    
}

.button a:hover {
 
  color: #ff487f;
  text-decoration: none;    
}

.button-cta {
  background-color: var(--color-2);
  position:relative;
 
  _align-items: center;
  width: fit-content;
  border-radius: 10px;
  margin-left: 2rem;
  margin-top: 1rem;
  font-size: 0.9em;
  _font-weight: 400;
  padding: 0.7rem;
  box-shadow: var(--box-shadow);

  
}
.button-cta a {
 
  color: #000;
  text-decoration: none;    
}

.button-cta a:hover {

color: #ff487f;
text-decoration: none;    
}

/* Intro-Text */

.intro {
  background-color: var(--color-secondary);
  padding: 1rem;  
}
  
.intro-container {
  padding: var(--padding-intro);
  background-color: var(--color-bg);
  columns: 2 300px;
  min-height: 400px;
}
  
.intro-container img {
  width: 100%;
  margin-bottom: 2rem;
}
  
.intro-card {    
  background-color: var(--color-primary);
  margin-bottom: 1rem;
  min-height: 350px;
}

.intro-card-text,
  h2, h3 {
    padding-left: 2rem;
    padding-right: 1rem;
    padding-bottom: 1rem;
  }
 
.intro-card img {      
  padding: 1rem;
  max-width: 10%;
}
  
 /*  2 Bilder auf der index.html */ 
 
.bilder1 {
  background-image: linear-gradient(to right, rgb(0, 0, 0) , rgb(58, 38, 27)); 
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  padding: 2rem;
  gap: 1rem; 
}


/* Cards heller Hintergrund */

.content-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  padding: var(--padding-intro);
  background-color: var(--color-bg);   
}

.content-container2 {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  background-color: var(--color-bg);   
}

.content-container-text {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  _padding: var(--padding-intro);
  background-color: var(--color-primary); 
  _max-width: 70%; 
  _margin-left:10% ;
}

.content-container-ueberschrift {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  _padding: var(--padding-intro);
  background-color: var(--color-primary); 
  _max-width: 70%; 
  _margin-left:10% ;
}

.content-container-index {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  _padding: 2rem;
  background-color: var(--color-bg);     
  text-align: center;
  
  color: var(--color-secondary);
  border-top: #dfdbd3 1px solid;
}

.content-container-index2 {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  _grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  padding: 2rem;
  background-color: #ffffff;     
  text-align: left;
  align-items: center;
  color: var(--color-secondary);
  _border-top: #dfdbd3 1px solid;
}

.content-container-index3 {
  display: flex;
  width: 70%;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  align-content: center;
  padding: 2rem;
  _background-color: var(--color-primary);     
  text-align: center;
  align-items: center;
  color: var(--color-secondary);
}



.content-card {    
  background-color: var(--color-primary);
  width: 100%;
  padding: 1rem;
}
.content-card-index {    
  background-color: var(--color-bg);
  width: 100%;
  padding-top: 2rem;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-bottom: 0.1rem;
  text-align: left;
 

}

  .content-card-index p { 
   
    font-size: 1rem;
  }
  
 

.content-card-index img{    
  display: block; 
  margin: auto; 
  width: 100%; 
  
}

.content-card-frame {    
  background-color: var(--color-3);
  width: 100%;
  padding: 1rem;
  padding-top: 2rem;
}

.content-card-frame2 {    
  background-color: var(--color-3);
  width: 50%;
  padding: 1rem;
  padding-top: 2rem;
}

.content-card img {
  width: 100%;
  min-width: 250px;
  padding: 1rem;  
}

.content-card p { 
  padding-left: 2rem;
  padding-right: 1rem;
}

.content-card-impressum { 
  padding-right: 4rem; 
}



.content-card a { 
  color: var(--color-4);
  text-decoration: underline;
}

.content-card a:hover { 
  color: var(--color-4);
  text-decoration: none;
}

.content-subtitel {
  font-family: 'Quicksand';
  font-size: 1.2rem;
  padding-left: 1rem;
  padding-right: 1rem;
}
  
 /* Galerie */
 
 .content-container-galerie {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  padding-left: 3rem;
  background-color: var(--color-bg);  
  color: var(--color-primary);
  
}

.galerie {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  padding: 1rem;
  _gap: 1rem;
} 

.content-card-galerie { 
 
  width: 100%;
  padding: 1rem;
 
}

.content-card-galerie img {
  width: 100%;
  min-width: 250px;
  padding: 1rem;  
  margin-left: 5rem;
  margin-right: auto;
 
}

.close {
  font-size: 1.5rem;
}

.col-12 img {
  opacity: 0.7;
  cursor: pointer;
  margin: 2rem;
  width: 100%;
}

.col-12 img:hover {
  opacity: 1;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.video1 {
  background-color: var(--color-4);
  width: 100%;
  padding: 2rem;
  
}


/* Cards mit Bild und Text - für Events und Angebote*/

.carddesign {
  background-color: var(--color-4);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  
}
  
.carddesign-container {
  display: flex;
  min-width: 300px;
  justify-content: center;
  padding: 1rem;
  _padding-bottom: 2rem;
  
}

.carddesign-card {
  background-color: var(--color-primary);
  max-width: 450px;
  position: relative;
  flex-grow: 1;
  border:var(--border-main);
  box-shadow: var(--box-shadow);
}
.carddesign-card a{
 color: #000;
 text-decoration: underline;
}

.carddesign-card a:hover{
  color: rgb(61, 61, 61);
  text-decoration: none;
 }


.carddesign-card:hover {
  background-color: var(--color-primary);
  max-width: 450px;
  position: relative;
  flex-grow: 1;
  border:var(--border-main);
  box-shadow: 0 0 1rem rgb(0, 0, 0);
}
  
.carddesign-card img {
  width: 100%;
  object-fit: cover;
  object-position: top; 
}

.carddesign-card p {
  
  position: relative;
  font-size: 1em;
  padding-left: 2rem;
  padding-right: 1rem;
  padding-bottom: 1rem;

}

.carddesign-card-title {

  padding-left: 2rem;
  padding-right: 1rem;
  padding-bottom: 0.1rem;

}

.carddesign-card-title2 {
  font-family: 'Quicksand';
  font-size: 1.2rem;
  font-weight: 600;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-bottom: 0.1rem;

}



.carddesign-card-title3 {
background-color:var(--color-7);
  padding-left: 2rem;
  padding-right: 1rem;
  padding-bottom: 0.1rem;

}


.carddesign-container2 {
  background-color: var(--color-primary);
  display: flex;
  _min-width: 400px;
  justify-content: center;
  padding-left: 1rem;
  _padding-bottom: 1rem;
  
}

.carddesign-card2 {
  background-color: var(--color-primary);
  max-width: 400px;
  position: relative;
  flex-grow: 1;
  text-align: left;
  _border:var(--border-main);
  _box-shadow: var(--box-shadow);
}

.carddesign-card2 img{
 max-width: 300px;
}

.carddesign-card2 a{
  color: #000;
 }

 .carddesign-card2 a:hover{
  color: #021cb1;
  text-shadow: 2px 2px 4px #013f69;
 }

.button3 img{
  width: 70%;
}

/* Cards mit Text - für Team / Über uns - :target*/

.carddesign-card-tab {
  background-color: var(--color-primary);
  position: relative;
  flex-grow: 1;
  width: 100%;
  gap: 1rem;
  border:var(--border-main);
  box-shadow: var(--box-shadow);
}

.carddesign-card-tab h3 {
  padding-left: 1rem;

}

.carddesign-card-tab p {
  padding-left: 2rem;
  padding-bottom: 2rem;

}

.carddesign-card-tab a {
  font-size: 1.4rem;
  color: var(--color-4);
  text-decoration: underline;
  margin-top: 2rem;
  padding-left: 2rem;
  padding-right: 3rem;
}

.carddesign-card-tab a:hover {
  color: var(--color-3);
  margin-top: 2rem;
  padding-left: 2rem;
}

.carddesign-card-tab div {
  display: none;
}

.carddesign-card-tab div:target {
  display: block;
  width: 70%;
  margin-top: 1rem;
  margin-left: 2rem;
  padding-top: 2rem;
  background-color: var(--color-bg);
}

/* Überschriften und Untertitel */

.subtitel {
  font-family: 'Quicksand';
  font-size: 1.1rem;
  line-height: 1.2;
  padding-left: 2rem;
  padding-right: 1rem;
  padding-bottom: 1rem;
}

.subtitel2 {
  font-family: 'Quicksand';
  font-size: 1.2rem;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-bottom: 1rem;
}

.subtitel-preis {
  font-family: 'Quicksand';
  color: #021cb1;
  font-size: 1.2rem;
  font-weight: 600;
  text-align: left;
  padding-left: 2rem;
  padding-right: 2rem;
  _padding-bottom: 1rem;
}

.subtitel-preis li {
  font-size: 1.2rem;
}

.subtitel-preis2 {
  font-family: 'Quicksand';
  color: #021cb1;
  font-size: 1.2rem;
  font-weight: 600;
  text-align: right;
  padding-left: 2rem;
  padding-right: 4rem;
  _padding-bottom: 1rem;
}

/* Bildaustausch  */

.picture-tag {
  background-color: var(--color-3);
  display: flex;
  flex-wrap: wrap;
  text-align: center;
  padding: 2rem;
}


/* Keyframe-Animation schwarze Katze 
.katze-schwarz {
  position: absolute;
  width: 50px;
  animation: katze-schwarz-bewegung 6s ease 0s infinite normal;;
  animation-delay: 2s;
  opacity: 0;
 
}


@keyframes katze-schwarz-bewegung {
0% {
bottom: 5%;
left: 20%;
opacity: 0;
width: 50px;
}

50% {
bottom: 5%;
left: 30%;
opacity: 1;
width: 50px;
}

100% {
bottom: 5%;
left: 40%;
opacity: 0;
width: 50px;
}
}
*/


/* Team - Bilder rund */

.team-container {
  padding: var(--padding-intro);
  background-color: var(--color-4);
  display: grid;  
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  min-height: 400px;
  gap: 1rem;
}
   
.team-card {    
  background-color: var(--color-primary);
  margin-bottom: 1rem;
 
}

.team-card-text,
  h2, h3{
    padding-left: 2rem;
    padding-right: 2rem;
   padding-top: 2rem;
  }

  .team-card-aufzaehlung {
    padding-left: 3rem;
    padding-right: 1rem;
    padding-bottom: 1rem;
  }
 
.team-card img {    
  display: block; 
  _margin: auto; 
  margin-left:2rem;
  margin-right: auto;
 margin-bottom: 1rem;
  width: 50%;
  _border-radius: 50%;
 
}



/* Footer */

.footer {
  background: #ffffff;
  _background-image: linear-gradient(to right, rgb(87, 131, 182) , rgb(141, 147, 185));
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  min-height: 280px;
  padding: 1rem;
  padding-left: 3rem;
  color: var(--color-secondary);
}

.footer-card-text {
  padding-left: 2rem;
  }

  .footer-card-text a{
    color: #000;
    text-decoration: none;
   }

.footer-logo-bild {
  display: flex;  
  width: 50%; 
  padding-left: 0.5rem;
  gap: 1rem;
  
}

.socialmedia {
  display: flex;  
  width: 70%; 
  padding-left: 2rem;
  gap: 1rem;
  
}



.copyright {
  background-color: var(--color-4);
  padding: 1rem;
  padding-left: 5rem;
  color: var(--color-primary);
  
}

 
  
  /* DESKTOP ANSICHT MQ*/
@media screen and (min-width: 1200px) {
  * {
    
    font-size: 1.1rem;
    
    
    
  }


  header {   
    background-image: url(../images/banner1a.jpg);
    _background-size: cover;
    _background-position: center;
    min-height: 800px;
    _max-width: 1920px;
    _display: flex;
    _flex-wrap: wrap;
    _justify-content: center;
    _align-items: center;
    color: var(--color-secondary);
    text-shadow: none;
    
  }
}
@media screen and (min-width: 1000px) {
.video1 {
 width: 50%;
  
}
}


@media screen and (min-width: 1000px){ 
  .wrapper {
  display: grid;  
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  margin-top: 400px;
  color: #dfdbd3;
  text-shadow: 3px 3px 4px #5c5c5c;

}
  }

  @media screen and (min-width: 1000px){ 
    .content-card-index img{    
      display: block; 
      margin: auto; 
      width: 70%; 
      
    }
    }

    @media screen and (min-width: 1000px){ 
      .content-card-index2 img{    
        display: block; 
        margin: auto; 
        width: 50%; 
        
      }
      }

    @media screen and (min-width: 1000px){ 
      .content-container-index2 {
        display: grid;
        width: 100%;
        grid-template-columns: repeat(auto-fit, minmax(100%, 1fr));
        justify-content: center;
        padding: 0.5rem;
        background-color: var(--color-primary);     
        text-align: center;
        align-items: center;
        color: var(--color-secondary);
      }

      .content-container-index2 img{    
        display: block; 
        margin: auto; 
        width: 20%; 
        
      }

      .carddesign2 {
        background-color: var(--color-primary);
        background-size:auto;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        
      }

      .carddesign-container2 {
        background-color: var(--color-primary);
        display: flex;
        min-width: 400px;
        justify-content: center;
        padding: 1rem;
        padding-bottom: 2rem;
        
      }
      
      .carddesign-card2 {
        background-color: var(--color-primary);
        max-width: 450px;
        position: relative;
        flex-grow: 1;
        padding: 2rem;
        _border:var(--border-main);
        _box-shadow: var(--box-shadow);
       
      }

      .content-container-text {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        padding: var(--padding-intro);
        background-color: var(--color-primary); 
        max-width: 70%; 
        margin-left:10% ;
      }

      .content-container-ueberschrift {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        padding-left: var(--padding-intro);
        _background-color: var(--color-primary); 
        max-width: 70%; 
        margin-left:10% ;
      }
      }

   /*
  @media screen and (min-width: 450px, max-width: 750px){ 
    *{    
      
      width: 50%; 
      
    }
    }