body  {
     font-size:  clamp(0.6rem,  2vw,  1.5rem);
     font-family:  "Verdana",  sans-serif;
     margin:  0;
     padding:  0;
     box-sizing:  border-box;
}
.page  {
     display:  grid;
     grid-template-areas:  "header" "title-cal" "main" "footer";
     grid-template-rows:  auto auto 1fr auto;
     min-height:  100vh;
     grid-gap:  0;
}
.trainer-member1  {
     display:  none;
}
main  {
     grid-area:  main;
     display:  flex;
     flex-direction:  column;
     justify-content:  flex-start;
     align-items:  center;
     margin-bottom:  1px;
     background-color:  #fff;
     background-image:  linear-gradient(rgb(255 255 255 / .7),  rgb(255 255 255 / .5)),  url(../../assets/images/main/main-back.webp);
     background-size:  contain;
     background-repeat:  repeat;
     background-position:  center;
}
#title  {
     padding:  .5rem;
     margin:  0;
     text-align:  center;
     font-size:  clamp(0.8rem,  2.7vw,  2.2rem);
}
#content  {
     display:  flex;
     flex-direction:  column;
     justify-content:  space-between;
     text-align:  center;
     background-color:  #cd000b;
     background-image:  linear-gradient(rgb(205 0 11 / .7),  rgb(205 0 11 / .5)),  url(../../assets/images/header/background.webp);
     background-size:  contain;
     background-position:  center;
     margin:  1rem .5rem;
     border-radius:  7px;
     box-shadow:  0 10px 15px -3px rgb(0 0 0 / .6),  0 4px 6px -2px rgb(0 0 0 / .3);
     min-width:  80vw;
     max-width:  80vw;
     padding:  .5rem;
     align-items:  center;
}
.content-index  {
     display:  flex;
     flex-direction:  row;
     justify-content:  flex-start;
     flex-wrap:  wrap;
     width:  100%;
     justify-content:  center;
}
.img-container  {
     display:  flex;
     flex-direction:  column;
     background-color:  #fff;
     background-image:  linear-gradient(rgb(255 255 255 / .7),  rgb(255 255 255 / .5)),  url(../../assets/images/main/main-back.webp);
     background-size:  cover;
     background-position:  center;
     border-radius:  7px;
     box-shadow:  0 10px 15px -3px rgb(0 0 0 / .4),  0 4px 6px -2px rgb(0 0 0 / .1);
     text-align:  center;
     padding:  .5rem;
     margin:  .5rem;
     max-width:  100%;
     height:  max-content;
     align-items:  center;
}
.img-title  {
     font-size:  clamp(0.7rem,  2vw,  1.6rem);
     margin:  .5rem;
}
.newsticker-title  {
     font-size:  clamp(0.7rem,  2vw,  1.6rem);
     margin:  .5rem;
}
#newsticker  {
     display:  flex;
     flex-direction:  column;
     flex:  1 1 100%;
     background-color:  #fff;
     background-image:  linear-gradient(rgb(255 255 255 / .7),  rgb(255 255 255 / .5)),  url(../../assets/images/main/main-back.webp);
     background-size:  cover;
     background-position:  center;
     border-radius:  7px;
     box-shadow:  0 10px 15px -3px rgb(0 0 0 / .4),  0 4px 6px -2px rgb(0 0 0 / .1);
     text-align:  center;
     padding:  .5rem;
     margin:  .5rem;
     max-width:  100%;
     height:  max-content;
}
.alert  {
     color:  #cd000b;
     padding:  10px;
     text-align:  center;
     display:  none;
}
.highlight  {
     color:  #cd000b;
     font-weight:  600;
}
.highlight:hover  {
     text-decoration:  underline;
}
#ticker-message p  {
     margin-top:  0;
     margin-bottom:  .5rem;
}
.ticker-navigation  {
     display:  flex;
     justify-content:  center;
     align-items:  center;
     gap:  1rem;
     margin-top:  0.5rem;
     padding-top:  0.5rem;
     border-top:  1px solid rgba(0,  0,  0,  0.1);
}
.ticker-navigation button  {
     background:  none;
     border:  none;
     color:  #cd000b;
     font-size:  clamp(1.2rem,  2vw,  1.6rem);
     cursor:  pointer;
     padding:  0.3rem 0.8rem;
     transition:  all 0.2s ease;
     border-radius:  7px;
}
.ticker-navigation button:hover  {
     background:  rgba(205,  0,  11,  0.2);
     transform:  scale(1.1);
}
.ticker-navigation button:active  {
     transform:  scale(0.95);
}
#page-indicator  {
     font-size:  clamp(0.7rem,  1.5vw,  1rem);
     color:  #000;
     min-width:  2.5rem;
     text-align:  center;
     font-weight:  600;
}
.fade-in  {
     animation:  fadeIn 0.5s ease-in;
}
@keyframes fadeIn  {
     from  {
     opacity:  0;
     transform:  translateY(5px);
 }
 to  {
     opacity:  1;
     transform:  translateY(0);
 }
}
.content-welcome-text  {
     display:  flex;
     flex-direction:  column;
     flex:  1 1 70%;
     background-color:  #fff;
     background-image:  linear-gradient(rgb(255 255 255 / .7),  rgb(255 255 255 / .5)),  url(../../assets/images/main/main-back.webp);
     background-size:  cover;
     background-position:  center;
     border-radius:  7px;
     box-shadow:  0 10px 15px -3px rgb(0 0 0 / .4),  0 4px 6px -2px rgb(0 0 0 / .1);
     text-align:  center;
     padding:  .5rem;
     margin:  .5rem;
     max-width:  100%}
.content-welcome-text p  {
     margin-top:  .5rem;
     margin-bottom:  .5rem;
     font-size:  larger;
}
.hidden-less-than  {
     visibility:  hidden;
}
.fade-in  {
     animation:  fadeIn 1s ease-in-out;
}
#title-cal  {
     padding:  .2rem;
     text-align:  center;
     margin:  .2rem;
     font-size:  clamp(0.6rem,  2.5vw,  2rem);
}
#content-formulare  {
     display:  flex;
     flex-direction:  column;
     justify-content:  space-between;
     background-color:  #cd000b;
     background-image:  linear-gradient(rgb(205 0 11 / .7),  rgb(205 0 11 / .5)),  url(../../assets/images/header/background.webp);
     background-size:  contain;
     background-position:  center;
     border-radius:  7px;
     box-shadow:  0 10px 15px -3px rgb(0 0 0 / .6),  0 4px 6px -2px rgb(0 0 0 / .3);
     align-self:  center;
     margin:  1rem;
     min-width:  80vw;
     max-width:  80vw;
     text-align:  center;
}
.formulare-title  {
     font-size:  clamp(0.7rem,  2.5vw,  2rem);
     margin:  .5rem;
}
:root  {
     --color-white:  #ffffff;
     --color-yellow:  #ffff00;
     --color-orange:  #ff6600;
     --color-green:  #5cb85c;
     --color-blue:  #007bff;
     --color-brown:  #5b2600;
     --color-black:  #000000;
}
.downloads  {
     display:  flex;
     flex-wrap:  wrap;
     justify-content:  space-between;
     margin:  .5rem;
}
.download-item  {
     display:  flex;
     flex-direction:  column;
     flex:  1 1 auto;
     background-color:  #fff;
     background-image:  linear-gradient(rgb(255 255 255 / .7),  rgb(255 255 255 / .5)),  url(../../assets/images/main/main-back.webp);
     background-size:  cover;
     background-position:  center;
     border-radius:  7px;
     box-shadow:  0 10px 15px -3px rgb(0 0 0 / .4),  0 4px 6px -2px rgb(0 0 0 / .1);
     text-align:  center;
     padding:  1rem;
     margin:  .5rem;
     min-width:  min-content;
     max-width:  max-content;
     height:  max-content;
     align-items:  center;
}
.download-preview img  {
     width:  100%;
     height:  auto;
     object-fit:  cover;
}
.download-link  {
     padding:  .5rem;
     background-color:  #000;
     color:  #fff;
     border-radius:  7px;
     text-decoration:  none;
     cursor:  pointer;
     overflow:  hidden;
     transition:  background-color 0.3s ease;
     position:  relative;
     display:  inline-block;
     text-align:  center;
     white-space:  nowrap;
     min-width:  min-content;
     max-width:  90%;
     margin-top:  .5rem;
     margin-bottom:  0;
     font-size:  clamp(0.6rem,  1.2vw,  1.2rem);
}
.E404  {
     display:  flex;
     flex-direction:  column;
     align-items:  center;
}
.download-link::before, .download-link::after  {
     content:  "";
     position:  absolute;
     width:  100%;
     height:  .325em;
     transition:  background-color 0.5s;
     transform:  scaleX(0);
     transform-origin:  left;
     bottom:  0;
     left:  0;
     right:  0;
}
.download-link::before, .download-link::after  {
     background-color:  var(--random-color);
}
.download-link:hover::before, .download-link:hover::after  {
     transform:  scaleX(1);
     background-color:  var(--random-color);
}
.download-link:hover::before  {
     animation:  changeColor 2s infinite alternate;
}
.download-link1  {
     display:  flex;
     flex-direction:  column;
     align-self:  center;
     padding:  .5rem;
     background-color:  #000;
     color:  #fff;
     border-radius:  7px;
     text-decoration:  none;
     cursor:  pointer;
     overflow:  hidden;
     transition:  background-color 0.3s ease;
     position:  relative;
     display:  inline-block;
     text-align:  center;
     white-space:  nowrap;
     min-width:  40%;
     max-width:  50%;
     margin-top:  .5rem;
     margin-bottom:  0;
     font-size:  clamp(0.6rem,  1.2vw,  1.2rem);
}
.download-link1::before, .download-link1::after  {
     content:  "";
     position:  absolute;
     width:  100%;
     height:  .325em;
     transition:  background-color 0.5s;
     transform:  scaleX(0);
     transform-origin:  left;
     bottom:  0;
     left:  0;
     right:  0;
}
.download-link1::before, .download-link1::after  {
     background-color:  var(--random-color);
}
.download-link1:hover::before, .download-link1:hover::after  {
     transform:  scaleX(1);
     background-color:  var(--random-color);
}
.download-link1:hover::before  {
     animation:  changeColor 2s infinite alternate;
}
.training-time-container  {
     display:  flex;
     flex-wrap:  wrap;
     justify-content:  center;
     gap:  1rem;
}
.content-training-time  {
     display:  flex;
     flex:  1 1 auto;
     flex-direction:  column;
     align-items:  left;
     background-color:  #fff;
     background-image:  linear-gradient(rgb(255 255 255 / .7),  rgb(255 255 255 / .5)),  url(../../assets/images/main/main-back.webp);
     background-size:  cover;
     background-position:  center;
     border-radius:  7px;
     box-shadow:  0 10px 15px -3px rgb(0 0 0 / .4),  0 4px 6px -2px rgb(0 0 0 / .1);
     text-align:  left;
     padding:  .5rem;
     margin:  .5rem;
     max-width:  90%}
.title-training-time  {
     font-size:  clamp(0.7rem,  2.5vw,  2rem);
     margin:  .5rem;
}
.content-training-time h3  {
     text-align:  center;
     margin:  .5rem;
}
.content-training-time strong  {
     margin:  .3rem;
}
.content-training-time li  {
     margin:  .3rem;
}
.content-training-time img  {
     align-self:  center;
     min-width:  100%;
     min-height:  auto;
     padding-top:  3px;
     border-radius:  7px;
}
.zerti-title  {
     font-size:  clamp(0.7rem,  2.5vw,  2rem);
     text-align:  center;
     margin:  .5rem;
}
.content-zerti  {
     display:  flex;
     flex-direction:  column;
     background-color:  #fff;
     background-image:  linear-gradient(rgb(255 255 255 / .7),  rgb(255 255 255 / .5)),  url(../../assets/images/main/main-back.webp);
     background-size:  cover;
     background-position:  center;
     border-radius:  7px;
     box-shadow:  0 10px 15px -3px rgb(0 0 0 / .4),  0 4px 6px -2px rgb(0 0 0 / .1);
     text-align:  center;
     padding:  1rem;
     margin:  1rem;
     max-width:  90%}
.content-zerti h2  {
     text-align:  center;
}
.img-zerti-container  {
     display:  flex;
     flex-wrap:  wrap;
     align-items:  center;
     justify-content:  space-around;
     gap:  1rem;
     max-width:  100%;
     height:  auto;
}
.img-zerti-container img  {
     flex:  1 1 auto;
     width:  100%;
     max-width:  30vw;
     height:  auto;
     margin:  1rem;
}
#alert  {
     font-size:  clamp(0.6rem,  2vw,  2.2rem);
     text-align:  center;
}
#content-allg  {
     display:  flex;
     flex-direction:  column;
     justify-content:  space-between;
     background-color:  #cd000b;
     background-image:  linear-gradient(rgb(205 0 11 / .7),  rgb(205 0 11 / .5)),  url(../../assets/images/header/background.webp);
     background-size:  cover;
     background-position:  center;
     border-radius:  7px;
     box-shadow:  0 10px 15px -3px rgb(0 0 0 / .6),  0 4px 6px -2px rgb(0 0 0 / .3);
     align-self:  center;
     margin:  1rem;
     min-width:  80vw;
     align-items:  center;
     max-width:  80vw;
}
.content-section  {
     display:  flex;
     flex-direction:  column;
     flex:  1 1 auto;
     background-color:  #fff;
     background-image:  linear-gradient(rgb(255 255 255 / .7),  rgb(255 255 255 / .5)),  url(../../assets/images/main/main-back.webp);
     background-size:  cover;
     background-position:  center;
     border-radius:  7px;
     box-shadow:  0 10px 15px -3px rgb(0 0 0 / .4),  0 4px 6px -2px rgb(0 0 0 / .1);
     text-align:  center;
     padding:  1rem;
     margin:  .5rem;
     max-width:  90%}
.content-section img  {
     max-width:  100%;
     max-height:  100%}
#content-allg h1, h2  {
     color:  #000;
     margin:  .2rem;
}
#content-allg ul  {
     list-style-type:  none;
}
#content-allg li  {
     margin-bottom:  .5rem;
     padding:  0;
}
.benefit h4  {
     color:  #000;
}
#ticker:hover #next-messages  {
     display:  inline-block;
}
#content-allg strong  {
     color:  #000;
}
.media-flex  {
     column-count:  3;
     column-gap:  .5rem;
     margin:  .5rem;
}
.media-item  {
     display:  inline-block;
     background-color:  #fff;
     background-image:  linear-gradient(rgb(255 255 255 / .7),  rgb(255 255 255 / .5)),  url(../../assets/images/main/main-back.webp);
     background-size:  cover;
     background-position:  center;
     border-radius:  7px;
     box-shadow:  0 10px 15px -3px rgb(0 0 0 / .4),  0 4px 6px -2px rgb(0 0 0 / .1);
     text-align:  center;
     padding:  1rem;
     margin:  .5rem;
     max-width:  max-content;
     max-height:  max-content;
}
.article  {
     display:  flex;
     flex-direction:  column;
     align-items:  center;
}
.article .image-media  {
     display:  flex;
     flex-wrap:  wrap;
     justify-content:  center;
     gap:  1rem;
}
.media-title  {
     margin:  .5rem;
     font-size:  clamp(0.7rem,  2.5vw,  2rem);
}
.article-date  {
     color:  #888;
}
.article a.lightbox  {
     display:  block;
}
.article p  {
     margin:  1rem 0;
}
.article a.lightbox  {
     max-width:  100%;
     height:  auto;
     border-radius:  7px;
     cursor:  pointer;
}
.content-article  {
     margin:  15px 0;
}
.presse  {
     font-size:  small;
}
#lightbox-overlay  {
     display:  none;
     position:  fixed;
     top:  0;
     left:  0;
     width:  100%;
     height:  100%;
     background-color:  rgb(0 0 0 / .8);
     justify-content:  center;
     align-items:  center;
     z-index:  10000;
}
#lightbox-overlay img  {
     max-width:  80%;
     max-height:  80%}
#zerti-hover:hover  {
     cursor:  pointer;
     transform:  scale(1.02);
}
.content-about  {
     display:  flex;
     flex-direction:  column;
     align-items:  center;
}
.content-about-textarea  {
     display:  flex;
     flex-direction:  column;
     justify-content:  center;
     align-items:  center;
     background-color:  #fff;
     background-image:  linear-gradient(rgb(255 255 255 / .7),  rgb(255 255 255 / .5)),  url(../../assets/images/main/main-back.webp);
     background-size:  cover;
     background-position:  center;
     border-radius:  7px;
     box-shadow:  0 10px 15px -3px rgb(0 0 0 / .4),  0 4px 6px -2px rgb(0 0 0 / .1);
     text-align:  center;
     padding:  .5rem;
     margin:  .5rem;
     max-width:  90%}
.about-title  {
     font-size:  clamp(0.7rem,  2.5vw,  2rem);
     margin:  .5rem;
}
.content-about p  {
     color:  #000;
     margin:  .5rem;
}
.vorstand-container  {
     display:  flex;
     flex-wrap:  wrap;
     justify-content:  center;
}
.vorstand-member  {
     display:  flex;
     flex:  1 1 auto;
     flex-direction:  column;
     align-items:  center;
     background-color:  #fff;
     background-image:  linear-gradient(rgb(255 255 255 / .7),  rgb(255 255 255 / .5)),  url(../../assets/images/main/main-back.webp);
     background-size:  cover;
     background-position:  center;
     border-radius:  7px;
     box-shadow:  0 10px 15px -3px rgb(0 0 0 / .4),  0 4px 6px -2px rgb(0 0 0 / .1);
     text-align:  center;
     padding:  1rem;
     margin:  .5rem;
     max-width:  70%}
.vorstand-member img  {
     width:  100%;
     height:  auto;
     border-radius:  7px;
     display:  block;
     order:  -1;
}
.vorstand-title  {
     margin:  .5rem;
     font-size:  clamp(0.7rem,  2.5vw,  2rem);
}
.vorstand-member h3, .vorstand-member p  {
     margin:  .5rem 0;
}
.vorstand-member a:hover  {
     text-decoration:  underline;
}
#container-form  {
     display:  flex;
     flex-direction:  column;
     background-color:  #cd000b;
     background-image:  linear-gradient(rgb(205 0 11 / .7),  rgb(205 0 11 / .5)),  url(../../assets/images/header/background.webp);
     background-size:  cover;
     background-position:  center;
     border-radius:  7px;
     box-shadow:  0 10px 15px -3px rgb(0 0 0 / .6),  0 4px 6px -2px rgb(0 0 0 / .3);
     margin:  1rem;
     min-width:  80vw;
     max-width:  80vw;
     padding-bottom:  1rem;
}
.contact-form input[type="checkbox"]  {
     transform:  scale(1.8);
     margin:  .5rem;
}
.contact-form label[for="privacy-policy"]  {
     display:  inline;
     color:  #000;
     text-align:  left;
}
.privacy-text a:hover  {
     text-decoration:  underline;
     color:  #cd000b;
}
.invalid-feedback-dsk  {
     display:  none;
     color:  #fc0000;
     margin-top:  .25rem;
}
.contact-title  {
     font-size:  clamp(0.7rem,  2.5vw,  2rem);
     text-align:  center;
     padding:  .5rem;
}
.invalid-feedback  {
     color:  #000;
}
.content-contact  {
     display:  flex;
     flex-direction:  column;
     align-items:  center;
}
#contact  {
    display:  flex;
    flex-direction:  column;
    align-items:  left;
    background-color:  #fff;
    background-image:  linear-gradient(rgb(255 255 255 / .7),  rgb(255 255 255 / .5)),  url(../../assets/images/main/main-back.webp);
    background-size:  cover;
    background-position:  center;
    border-radius:  7px;
    box-shadow:  0 10px 15px -3px rgb(0 0 0 / .4),  0 4px 6px -2px rgb(0 0 0 / .1);
    min-width:  90%;
    max-width:  90%;
    padding:  .5rem;
    margin:  .5rem;
    margin-bottom:  1rem;
}
.contact-form input[type="text"], .contact-form input[type="email"], .contact-form textarea  {
    width:  60%;
    padding:  .5rem;
    margin-bottom:  1rem;
    margin-top:  .5rem;
    border:  1px solid #4c4c4c;
    border-radius:  7px;
    box-sizing:  border-box;
}
.contact-form textarea  {
    height:  20vh;
    width:  80%;
    margin-bottom:  0;
}
.submit-button  {
    background-color:  #000000dc;
    color:  #fff;
    border:  none;
    padding:  .5rem 1rem;
    border-radius:  7px;
    cursor:  pointer;
    width:  25%;
    min-width:  min-content;
    margin:  .5rem;
}
.g-recaptcha  {
    z-index:  100;
}

#container-form  {
    display:  flex;
    flex-direction:  column;
    background-color:  #cd000b;
    background-image:  linear-gradient(rgb(205 0 11 / .7),  rgb(205 0 11 / .5)),  url(../../assets/images/header/background.webp);
    background-size:  cover;
    background-position:  center;
    border-radius:  7px;
    box-shadow:  0 10px 15px -3px rgb(0 0 0 / .6),  0 4px 6px -2px rgb(0 0 0 / .3);
    margin:  1rem;
    min-width:  80vw;
    max-width:  80vw;
    padding-bottom:  1rem;
}
.contact-form input[type="checkbox"]  {
    transform:  scale(1.8);
    margin:  .5rem;
}
.contact-form label[for="privacy-policy"]  {
    display:  inline;
    color:  #000;
    text-align:  left;
}
.privacy-text a:hover  {
    text-decoration:  underline;
    color:  #cd000b;
}
.invalid-feedback-dsk  {
    display:  none;
    color:  #fc0000;
    margin-top:  .25rem;
}
.contact-title  {
    font-size:  clamp(0.7rem,  2.5vw,  2rem);
    text-align:  center;
    padding:  .5rem;
}
.invalid-feedback  {
    color:  #000;
}
.content-contact  {
    display:  flex;
    flex-direction:  column;
    align-items:  center;
}
#contact  {
    display:  flex;
    flex-direction:  column;
    align-items:  left;
    background-color:  #fff;
    background-image:  linear-gradient(rgb(255 255 255 / .7),  rgb(255 255 255 / .5)),  url(../../assets/images/main/main-back.webp);
    background-size:  cover;
    background-position:  center;
    border-radius:  7px;
    box-shadow:  0 10px 15px -3px rgb(0 0 0 / .4),  0 4px 6px -2px rgb(0 0 0 / .1);
    min-width:  90%;
    max-width:  90%;
    padding:  .5rem;
    margin:  .5rem;
    margin-bottom:  1rem;
}
.contact-form input[type="text"], .contact-form input[type="email"], .contact-form textarea  {
    width:  60%;
    padding:  .5rem;
    margin-bottom:  1rem;
    margin-top:  .5rem;
    border:  1px solid #4c4c4c;
    border-radius:  7px;
    box-sizing:  border-box;
}
.contact-form textarea  {
    height:  20vh;
    width:  80%;
    margin-bottom:  0;
}
.submit-button  {
    background-color:  #000000dc;
    color:  #fff;
    border:  none;
    padding:  .5rem 1rem;
    border-radius:  7px;
    cursor:  pointer;
    width:  25%;
    min-width:  min-content;
    margin:  .5rem;
}
.g-recaptcha  {
    z-index:  100;
}

.contact-form:disabled  {
    opacity:  .5;
    pointer-events:  none;
}

/* Neue CSS-Regeln für die verbesserte Kontaktseite */

/* Verstecken von Labels visuell, aber für Screen Reader zugänglich */
.form-label {
    display: block;
    margin-bottom: 0.25rem;
    font-weight: bold;
}

/* Formatierung für die Fehlermeldungen */
.invalid-feedback {
    display: none;
    color: #fc0000;
    margin-top: 0.25rem;
    font-size: 0.875rem;
}

/* Verbesserte Formatierung für das Formular */
.form-element {
    margin-bottom: 1rem;
    width: 100%;
}

/* Status-Anzeige für die Formularverarbeitung */
.form-alert {
    padding: 0.75rem;
    margin-top: 1rem;
    border-radius: 7px;
    width: 100%;
    text-align: center;
}

.form-alert.success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.form-alert.error {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

/* Fokus-Styles für bessere Accessibility */
.form-control:focus {
    border-color: #4c4c4c;
    outline: 2px solid #0066cc;
    box-shadow: 0 0 0 0.2rem rgba(0, 102, 204, 0.25);
}

/* Overlay für Hintergrundabdunklung */
.cookie-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 99;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

/* Cookie-Banner zentriert */
#cookie-banner {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 999;
    background-color: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.2);
    text-align: center;
    width: 80%;
    max-width: 500px;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}

/* Buttons im Banner */
#cookie-banner button {
    margin: 10px;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

#accept-cookies {
    background-color: #cd000b;
    color: white;
}

#accept-cookies:hover {
    background-color: #a70009;
}

#decline-cookies {
    background-color: #f0f0f0;
    color: #333;
}

#decline-cookies:hover {
    background-color: #e0e0e0;
}

/* Sichtbarkeitssteuerung */
.cookie-overlay.visible {
    display: block;
    opacity: 1;
}

#cookie-banner.visible {
    display: flex;
    opacity: 1;
}



.content-trainer  {
     display:  flex;
     flex-direction:  column;
     text-align:  center;
     align-items:  center;
}
.trainer-title  {
     font-size:  clamp(0.7rem,  2.5vw,  2rem);
     margin:  .5rem;
}
.trainer-container  {
     display:  flex;
     flex-wrap:  wrap;
     justify-content:  center;
}
.trainer-member  {
     display:  flex;
     flex:  1 1 auto;
     flex-direction:  column;
     align-items:  center;
     background-color:  #fff;
     background-image:  linear-gradient(rgb(255 255 255 / .7),  rgb(255 255 255 / .5)),  url(../../assets/images/main/main-back.webp);
     background-size:  cover;
     background-position:  center;
     border-radius:  7px;
     box-shadow:  0 10px 15px -3px rgb(0 0 0 / .4),  0 4px 6px -2px rgb(0 0 0 / .1);
     text-align:  center;
     padding:  1rem;
     margin:  .5rem;
     max-width:  80%}
.trainer-member p  {
     padding:  .5rem;
}
.info-pair  {
     display:  flex;
     flex-direction:  row;
     justify-content:  flex-start;
     align-items:  center;
     width:  100%}
.info-pair strong  {
     margin-right:  1rem;
}
.trainer-member img  {
     order:  -1;
     width:  100%;
     height:  auto;
     border-radius:  7px;
     display:  block;
     cursor:  pointer;
}
#caption  {
     text-align:  center;
     color:  #ccc;
}
.satzung-flex  {
     display:  flex;
     flex-wrap:  wrap;
     gap:  1rem;
     margin:  1rem;
     justify-content:  space-between;
     align-items:  stretch;
}
.satzung-paragraph  {
     display:  flex;
     flex-direction:  column;
     flex:  1 0 auto;
     background-color:  #fff;
     background-image:  linear-gradient(rgb(255 255 255 / .7),  rgb(255 255 255 / .5)),  url(../../assets/images/main/main-back.webp);
     background-size:  cover;
     background-repeat:  repeat;
     background-position:  center;
     border-radius:  7px;
     box-shadow:  0 10px 15px -3px rgb(0 0 0 / .4),  0 4px 6px -2px rgb(0 0 0 / .1);
     text-align:  left;
     padding-left:  .5rem;
     padding-right:  .5rem;
     margin-bottom:  1em;
}
.satzung-title  {
     margin-top:  .5rem;
     color:  #000;
     font-size:  clamp(0.7rem,  2.5vw,  2rem);
}
.satzung-paragraph h3  {
     margin-bottom:  .5rem;
     padding-top:  .4rem;
}
.satzung-paragraph p  {
     margin:  .2rem 0;
     line-height:  1.6;
}
.satzung-paragraph ul  {
     list-style:  disc;
     padding-left:  1.5rem;
}
.satzung-paragraph ul li  {
     margin:  0 0;
}
.satzung-paragraph ul li::marker  {
     color:  #cd000b;
}
#content-impressum  {
     display:  flex;
     flex-direction:  column;
     background-color:  #cd000b;
     background-image:  linear-gradient(rgb(205 0 11 / .7),  rgb(205 0 11 / .5)),  url(../../assets/images/header/background.webp);
     background-size:  cover;
     background-position:  center;
     border-radius:  7px;
     box-shadow:  0 10px 15px -3px rgb(0 0 0 / .6),  0 4px 6px -2px rgb(0 0 0 / .3);
     margin:  1rem;
     min-width:  80vw;
     max-width:  80vw;
}
.impressum-title  {
     text-align:  center;
     padding:  .5rem;
     font-size:  clamp(0.7rem,  2.5vw,  2rem);
}
.content-impressum  {
     display:  flex;
     flex-direction:  column;
     align-items:  center;
     margin-bottom:  .5rem;
}
.content-impressum-textarea  {
     display:  flex;
     flex-direction:  column;
     background-color:  #fff;
     background-image:  linear-gradient(rgb(255 255 255 / .7),  rgb(255 255 255 / .5)),  url(../../assets/images/main/main-back.webp);
     background-size:  cover;
     background-position:  center;
     border-radius:  7px;
     box-shadow:  0 10px 15px -3px rgb(0 0 0 / .4),  0 4px 6px -2px rgb(0 0 0 / .1);
     text-align:  left;
     padding:  .5rem;
     max-width:  90%;
     word-wrap:  break-word;
}
.content-impressum p  {
     color:  #000;
     margin:  1rem 0;
}
.content-impressum a  {
     color:  #cd000b;
     text-decoration:  none;
}
.content-impressum a:hover  {
     text-decoration:  underline;
}
#content-datenschutz  {
     display:  flex;
     flex-direction:  column;
     background-color:  #cd000b;
     background-image:  linear-gradient(rgb(205 0 11 / .7),  rgb(205 0 11 / .5)),  url(../../assets/images/header/background.webp);
     background-size:  contain;
     background-position:  center;
     border-radius:  7px;
     box-shadow:  0 10px 15px -3px rgb(0 0 0 / .6),  0 4px 6px -2px rgb(0 0 0 / .3);
     margin:  1rem;
     min-width:  80vw;
     max-width:  80vw;
}
.datenschutz-title  {
     text-align:  center;
     font-size:  clamp(0.7rem,  2.5vw,  2rem);
     padding:  .3rem;
}
.content-datenschutz  {
     display:  flex;
     flex-direction:  column;
     align-items:  center;
     margin-bottom:  .5rem;
}
.content-datenschutz-textarea  {
     display:  flex;
     flex-direction:  column;
     background-color:  #fff;
     background-image:  linear-gradient(rgb(255 255 255 / .7),  rgb(255 255 255 / .5)),  url(../../assets/images/main/main-back.webp);
     background-size:  contain;
     background-position:  center;
     border-radius:  7px;
     box-shadow:  0 10px 15px -3px rgb(0 0 0 / .4),  0 4px 6px -2px rgb(0 0 0 / .1);
     text-align:  left;
     padding:  .5rem;
     max-width:  90%;
     word-wrap:  break-word;
}
#content-datenschutz-textarea h2  {
     color:  #000;
     margin:  .7rem;
}
.content-datenschutz-textarea p  {
     color:  #000;
     margin:  .5rem 0;
}
.content-datenschutz-textarea a  {
     color:  #cd000b;
     text-decoration:  none;
}
.content-datenschutz-textarea a:hover  {
     text-decoration:  underline;
}
.content-datenschutz-textarea ul  {
     list-style:  disc;
     padding-left:  1.5rem;
}
.content-datenschutz-textarea ul li  {
     margin:  .1rem 0;
}
.content-datenschutz ul li::marker  {
     color:  #cd000b;
}
.seal  {
     font-size:  smaller;
     text-align:  center;
}
.calendar  {
     min-width:  80vw;
     margin-left:  auto;
     margin-right:  auto;
     display:  flex;
     flex-direction:  column;
     align-items:  center;
     border-radius:  7px;
     overflow:  hidden;
     background-color:  #cd000b;
     background-image:  linear-gradient(rgb(205 0 11 / .7),  rgb(205 0 11 / .5)),  url(../../assets/images/header/background.webp);
     background-size:  contain;
     background-position:  center;
     font-size:  clamp(0.6,  1.3vw,  1.5rem);
     box-shadow:  0 10px 15px -3px rgb(0 0 0 / .4),  0 4px 6px -2px rgb(0 0 0 / .1);
     position:  relative;
     margin-bottom:  0;
     z-index:  0;
     max-width:  90vw;
     max-height:  auto;
}
.container  {
     margin-top:  1rem;
     margin-bottom:  1rem;
}
.event-details  {
     display:  flex;
     flex-direction:  column;
     background-color:  #fff;
     background-image:  linear-gradient(rgb(255 255 255 / .7),  rgb(255 255 255 / .5)),  url(../../assets/images/main/main-back.webp);
     background-size:  contain;
     background-position:  center;
     border-radius:  7px;
     box-shadow:  0 10px 15px -3px rgb(0 0 0 / .4),  0 4px 6px -2px rgb(0 0 0 / .1);
     text-align:  center;
     padding:  1rem;
     margin:  1rem;
     overflow-wrap:  break-word;
     animation:  showEventDetails 0.5s forwards ease-in-out;
     opacity:  0;
     white-space:  break-spaces;
     max-width:  90%}
.calendar-days .other-month  {
     color:  #fa6868;
     cursor:  auto;
}
.selected-date-container  {
     display:  flex;
     align-items:  center;
     justify-content:  center;
     font-weight:  700;
     margin-top:  1rem;
     margin-bottom:  .5rem;
     color:  #fff;
     cursor:  pointer;
     animation:  pulsieren 1.7s infinite;
     transition:  transform 0.5s ease-in-out;
}
#selected-day  {
     margin-right:  5px;
}
#selected-month  {
     margin-right:  5px;
}
#selected-year  {
     margin-left:  5px;
}
.calendar-days  {
     display:  grid;
}
.calendar-days .event  {
     font-weight:  700;
     color:  #000;
}
.calendar-day  {
     cursor:  pointer;
}
#event-details  {
     display:  none;
}
.minimized .calendar-days  {
     display:  grid;
     grid-template-columns:  repeat(7,  1fr);
}
.minimized .calendar-day  {
     display:  none;
}
.minimized .calendar-day.selected  {
     display:  block;
     transform:  translateY(0);
     transition:  all 0.5s ease;
}
.minimized .calendar-days, .minimized .calendar-header, .minimized .calendar-footer, .minimized .date-time-formate, .minimized .calendar-week-days  {
     display:  none;
}
.minimized .calendar-day.selected  {
     display:  block;
}
.minimized .calendar-day .day-number-container  {
     text-align:  center;
}
.minimized .selected-date-container  {
     display:  flex;
}
.calendar-header  {
     background:  #000000de;
     display:  flex;
     justify-content:  space-between;
     align-items:  center;
     padding:  10px;
     border-radius:  7px;
     color:  #fff;
     width:  80%;
     margin:  0 auto;
}
.calendar-week-days  {
     display:  grid;
     grid-template-columns:  repeat(7,  1fr);
     padding-right:  1rem;
     width:  60vw;
     padding-bottom:  .2rem;
}
.calendar-week-days div  {
     display:  grid;
     color:  #fff;
     align-items:  center;
}
.calendar-week-days div:hover  {
     color:  #000;
     transform:  scale(1.05);
     transition:  all 0.2s ease-in-out;
}
.calendar-days  {
     display:  grid;
     grid-template-columns:  repeat(7,  1fr);
     color:  #fff;
     padding-right:  1rem;
     padding-bottom:  .5;
}
.calendar-days div  {
     display:  flex;
     padding:  .2rem;
     position:  relative;
     cursor:  pointer;
     animation:  to-top 1s forwards;
     align-items:  baseline;
}
#event-title  {
     color:  #000;
     margin-top:  1rem;
     margin-bottom:  1rem;
     text-decoration:  underline;
}
#event-description  {
     color:  #000;
     animation:  showDescription 0.5s forwards ease-in-out;
     opacity:  0;
     margin-top:  1rem;
     margin-bottom:  .4rem;
}
#event-gallery  {
     column-count:  5;
     column-gap:  .5rem;
}
.image-container  {
     display:  inline-block;
     background-color:  #cd000b;
     background-image:  linear-gradient(rgb(205 0 11 / .7),  rgb(205 0 11 / .5)),  url(../../assets/images/header/background.webp);
     background-size:  contain;
     background-position:  center;
     border-radius:  7px;
     box-shadow:  0 10px 15px -3px rgb(0 0 0 / .4),  0 4px 6px -2px rgb(0 0 0 / .1);
     padding:  .8rem;
     max-width:  max-content;
     height:  max-content;
     margin:  .5rem;
}
.image-container img  {
     width:  100%;
     border-radius:  7px;
     border:  2px solid #000;
     box-shadow:  0 10px 15px -3px rgb(0 0 0 / .4),  0 4px 6px -2px rgb(0 0 0 / .1);
     max-width:  max-content;
}
.image-container img:hover  {
     transform:  scale(1.05);
     cursor:  pointer;
}
.event-title  {
     position:  absolute;
     bottom:  20px;
     left:  50%;
     transform:  translateX(-50%);
     background:  rgb(0 0 0 / .9);
     border-radius:  5px;
     padding:  5px;
     display:  none;
     width:  23vw;
     z-index:  10;
     box-shadow:  0 10px 15px -3px rgb(0 0 0 / .4),  0 4px 6px -2px rgb(0 0 0 / .1);
     animation:  showTitle 0.5s forwards ease-in-out;
     opacity:  0;
}
.calendar-day:hover .event-title  {
     display:  block;
}
.calendar-day.current-date  {
     background-color:  #000000be;
     color:  #fff;
     border-radius:  7px;
}
.month-container, .year-container  {
     display:  flex;
     align-items:  center;
}
.month-picker  {
     display:  flex;
     align-items:  center;
     min-width:  150px;
     justify-content:  flex-start;
}
.year-picker  {
     display:  flex;
     align-items:  center;
     min-width:  100px;
     justify-content:  flex-end;
}
.month-change, .year-change  {
     cursor:  pointer;
     user-select:  none;
     transition:  all 0.3s ease;
     padding:  0 5px;
}
.month-change:hover, .year-change:hover  {
     transition:  all 0.2s ease-in-out;
     transform:  scale(1.4);
}
.month-change pre, .year-change pre  {
     margin:  0;
     transition:  transform 0.2s ease;
}
.month-change:hover pre, .year-change:hover pre  {
     transform:  scale(1.2);
}
#month  {
     padding:  .5rem;
     text-align:  center;
     min-width:  9rem;
}
#year  {
     padding:  .5rem;
     text-align:  center;
     min-width:  2rem;
}
#next-year  {
     margin-right:  2rem;
}
.calendar-footer  {
     padding:  5px;
     display:  flex;
     justify-content:  flex-end;
     align-items:  center;
}
.date-time-formate  {
     width:  100%;
     position:  relative;
     display:  flex;
     justify-content:  center;
     align-items:  center;
     padding-bottom:  1rem;
     padding-top:  1rem;
     margin-bottom:  1rem;
}
.day-text-formate  {
     padding-right:  1rem;
     border-right:  4px solid #000;
}
.date-time-value  {
     display:  block;
     position:  relative;
     text-align:  center;
}
.time-formate  {
     padding-left:  1rem;
}
.date-formate  {
     padding-left:  1rem;
     white-space:  nowrap;
}
.time-formate.hideTime  {
     animation:  hidetime 1.5s forwards;
}
.day-text-formate.hidetime  {
     animation:  hidetime 1.5s forwards;
}
.date-formate.hideTime  {
     animation:  hidetime 1.5s forwards;
}
.day-text-formate.showtime  {
     animation:  showtime 1s forwards;
}
.time-formate.showtime  {
     animation:  showtime 1s forwards;
}
.date-formate.showtime  {
     animation:  showtime 1s forwards;
}
@keyframes fadeIn  {
     from  {
     opacity:  0 }
 to  {
     opacity:  1 }
}@keyframes pulsieren  {
     0%  {
     transform:  scale(1) }
 50%  {
     transform:  scale(1.1) }
 100%  {
     transform:  scale(1) }
}@keyframes to-top  {
     0%  {
     transform:  translateY(0);
     opacity:  0 }
 100%  {
     transform:  translateY(10%);
     opacity:  1 }
}@keyframes to-left  {
     0%  {
     transform:  translatex(230%);
     opacity:  1 }
 100%  {
     transform:  translatex(0);
     opacity:  1 }
}@keyframes to-right  {
     10%  {
     transform:  translatex(0);
     opacity:  1 }
 100%  {
     transform:  translatex(-150%);
     opacity:  1 }
}@keyframes showtime  {
     0%  {
     transform:  translatex(250%);
     opacity:  1 }
 100%  {
     transform:  translatex(0%);
     opacity:  1 }
}@keyframes hidetime  {
     0%  {
     transform:  translatex(0%);
     opacity:  1 }
 100%  {
     transform:  translatex(-400%);
     opacity:  1 }
}@keyframes showTitle  {
     from  {
     opacity:  0;
     transform:  translateY(-20px) }
 to  {
     opacity:  1;
     transform:  translateY(0) }
}@keyframes showDescription  {
     from  {
     opacity:  0;
     transform:  translateY(20px) }
 to  {
     opacity:  1;
     transform:  translateY(0) }
}@keyframes showEventDetails  {
     from  {
     opacity:  0;
     transform:  translateY(20px) }
 to  {
     opacity:  1;
     transform:  translateY(0) }
}@keyframes changeColor  {
     to  {
     background-color:  var(--random-color) }
}@media (min-width:2000px)  {
     #contact  {
     min-width:  60vw;
     max-width:  60vw;
 }
}
@media (max-width:1920px)  {
     .media-flex  {
     column-count:  2;
     font-size:  clamp(0.8rem,  1.7vw,  1.2rem);
 }
}
@media (max-width:1680px)  {
     #event-gallery  {
     column-count:  4;
 }
 .content-container  {
     flex-direction:  column;
 }
 #newsticker,  .content-welcome-text  {
     flex:  1 1 100%;
 }
 .content-welcome-text p  {
     font-size:  clamp(0.6rem,  1.5vw,  1.3rem);
 }
}
@media(max-width:1440px)  {
     #month  {
     min-width:  5rem;
 }
 .download-preview img  {
     min-width:  150px;
     max-width:  350px;
 }
}
@media (max-width:1201px)  {
     #event-gallery  {
     column-count:  3 }
}@media (max-width:1000px)  {
     .media-flex  {
     column-count:  1;
     font-size:  clamp(0.6rem,  1.5vw,  1rem);
 }
 .media-item  {
     width:  100%;
     height:  auto;
     margin:  .5rem 0;
     max-width:  none;
     max-height:  none;
 }
 .article img  {
     width:  100%;
     height:  auto;
     min-width:  150px;
     max-width:  250px;
 }
 .title-img img  {
     width:  100%;
     height:  auto;
     min-width:  150px;
     max-width:  250px;
 }
 .calendar  {
     font-size:  clamp(0.6rem,  2vw,  1.5rem);
     width:  70vw;
 }
 .calendar-header  {
     width:  70vw;
     padding:  5px;
 }
 .month-picker,  .year-picker  {
     min-width:  auto;
 }
 #month  {
     min-width:  5rem;
     text-align:  center;
 }
 #year  {
     min-width:  3rem;
     text-align:  center;
 }
 .month-change,  .year-change  {
     padding:  0 3px;
 }
}
 #next-year  {
     width:  1rem;
 }
 #event-gallery  {
     column-count:  2;
 }
 .downloads  {
     justify-content:  center;
 }
@media (max-width:900px)  {
     .calendar-header  {
     padding:  3px;
 }
 #month  {
     min-width:  4.3rem;
     padding:  0.3rem;
 }
 #year  {
     min-width:  2.5rem;
     padding:  0;
 }
 .month-picker,  .year-picker  {
     min-width:  auto;
 }
}
 .download-link  {
     padding:  .5rem;
     font-size:  .5rem }
 .contact-form input[type="checkbox"]  {
     transform:  scale(1);
     margin:  .2rem }
@media (max-width:800px)  {
     .date-time-formate  {
     display:  none }
}@media (max-width:768px)  {
     p  {
     text-align:  left;
     margin:  .5rem }
 .content-datenschutz-textarea ul  {
     list-style:  disc;
     padding-left:  1rem }
 .satzung-paragraph ul  {
     list-style:  disc;
     padding-left:  1rem }
 .satzung-paragraph ul li  {
     padding-bottom:  .2rem }
 .satzung-paragraph h3  {
     padding-top:  .2rem }
 .trainer-member p  {
     padding:  0 }
 #event-gallery  {
     column-count:  1 }
}@media (max-width:767px)  {
     .vorstand-container  {
     flex-direction:  column }
 .vorstand-member  {
     max-width:  100%;
     margin:  .5rem 0 }
 .calendar-header  {
     padding:  0;
     margin:  0;
 }
 .contact-form label[for="privacy-policy"]  {
     font-size:  .7rem }
}@media (hover: none)  {
     .ticker-navigation button  {
     padding:  0.5rem 1rem;
 }
 .ticker-navigation  {
     gap:  1.5rem;
 }
}