/*
    Team
*/

#cards {
    --bs-gutter-x: 0.2rem;
}

.card {
    padding-bottom: 3rem; /* genug Platz für Badge */
  }

 
  .gruppe {
    /*position: relative;*/
    display: inline-block;
    white-space: nowrap;         /* Text bleibt in einer Zeile */

    padding: 0.3rem 0.8rem 0.3rem 0.8rem; /* kein extra left-padding nötig */
    border-radius: 1rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: #333;
    background-color: #eee;
    margin-top: 0.3rem;
    vertical-align: middle;

    position: absolute; /* jetzt absolut innerhalb der Karte */
    bottom: 0.5rem;     /* Abstand vom unteren Rand */
    left: 50%;            /* horizontal bei 50% */
    transform: translateX(-50%); /* zentriert den Badge */
  
  }

  .Rot   { background-color: #f8d7da; color: #a3001b; }
  .Blau  { background-color: #d1ecf1; color: #004085; }
  .Gruen { background-color: #d4edda; color: #155724; }
  .Gelb  { background-color: #fff3cd; color: #856404; }

  .Rot::before   { content: "❤️ "; }
  .Blau::before  { content: "🔵 "; }
  .Gruen::before { content: "🌿 "; }
  .Gelb::before  { content: "💛 "; }
  .RGBG::before  { content: "🐸 "; box-sizing:unset;}

  .RGBG {
    background: repeating-linear-gradient(
      -55deg,
      #f8d7da,
      #f8d7da 25%,
      #d1ecf1 25%,
      #d1ecf1 50%,
      #d4edda 50%,
      #d4edda 75%,
      #fff3cd 75%,
      #fff3cd 100%
    );
    color: #004085;
  }



/* Gruppenfilterbuttons */
  #gruppe-filters > .gruppe-rot   { background-color: #f8d7da; color: #a3001b; }
  #gruppe-filters > .gruppe-blau  { background-color: #d1ecf1; color: #004085; }
  #gruppe-filters > .gruppe-gruen { background-color: #d4edda; color: #155724; }
  #gruppe-filters > .gruppe-gelb  { background-color: #fff3cd; color: #856404; }
  #gruppe-filters > .gruppe-rgbg {
    background: repeating-linear-gradient(
      -55deg,
      #f8d7da,
      #f8d7da 25%,
      #d1ecf1 25%,
      #d1ecf1 50%,
      #d4edda 50%,
      #d4edda 75%,
      #fff3cd 75%,
      #fff3cd 100%
    );
    color: #004085;
  }




  
  .text-xs {
    font-size: 0.8rem; /* kleiner als fs-6 */
  }

  .text-xxs { font-size: 0.5rem;}

.footer .copyright {
    padding: 0;
    border-top: 0;
}
  .footer .credits {
    margin-top: 8px;
    font-size: 0.5rem;
}

  .card-img-top {min-height: 292px;}



  
/*
    Öffnungszeiten Tabelle
*/

  .pastel-table {
    border-collapse: separate;
    border-spacing: 0.5rem;
  }
  
  .pastel-day {
    padding: 0.4rem 0.6rem;
    border-radius: 0.5rem;
  }
  
  .pastel-time {
    padding: 0.4rem 0.6rem;
    border-radius: 0.5rem;
  }




  
/*
    Termine / Events
*/

  .pastel-card {
    background: #fffdf8;
    border-radius: .75rem;
    transition: transform .15s ease;
  }
  .pastel-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.08);
  }
  .card-title {
    font-weight: 600;
    color: #333;
  }


  
/*
    Schliesstage
*/

.table-striped tbody tr:nth-of-type(odd) {
    background-color: #d4edda !important;
    --bs-table-bg: #d4edda !important; 
  }
  
  .table-hover tbody tr:hover {
    background-color: #c3e6cb !important;
  }
  






/*
    Gruppenboxen
*/



.features-cards .feature-box h4,
.features-cards .feature-box p {
    padding-left: 100px;
  }


.features-cards .feature-box i {
    position: absolute;
    left: 50px;
  }



/*
    Image Wrapper (Bild in Bild)
*/

.tab-pane .image-wrapper {
    position: relative;

    margin-left: 40px;
  }
  
  @media (max-width: 992px) {
    .tab-pane .image-wrapper {
      padding-left: 0;
      margin-top: 3rem;
      display: flex;
      flex-direction: column;
      gap: 2rem;
    }
  }
  
  @media (max-width: 992px) {
    .tab-pane .image-wrapper .images {
      display: flex;
      flex-direction: column;
      gap: 1.5rem;
    }
  }
  
  @media (max-width: 992px) {
    .tab-pane .image-wrapper .main-image {
      margin-left: 0;
    }
  }
  
  .tab-pane .image-wrapper .small-image {
    position: absolute;
    top: 20%;
    left: -10%;
    width: 45%;
    border: 8px solid var(--surface-color);
  }
  
  @media (max-width: 992px) {
    .tab-pane .image-wrapper .small-image {
      position: static;
      width: 100%;
      margin: 0 auto;
      border: 0;
    }
  }
  
  .tab-pane .image-wrapper .experience-badge {
    position: absolute;
    bottom: 5%;
    right: 5%;
    background-color: var(--accent-color);
    color: var(--contrast-color);
    padding: 1.5rem;
    border-radius: 0.5rem;
    text-align: center;
    min-width: 200px;
    animation: experience-float 3s ease-in-out infinite;
  }
  
  @media (max-width: 992px) {
    .tab-pane .image-wrapper .experience-badge {
      position: static;
      width: fit-content;
      margin: 0 auto;
    }
  }
  
  .tab-pane .image-wrapper .experience-badge h3 {
    color: var(--contrast-color);
    font-size: 2.5rem;
    margin: 0;
    line-height: 0.5;
  }
  
  .tab-pane .image-wrapper .experience-badge h3 span {
    font-size: 1rem;
    display: inline-block;
    margin-left: 0.25rem;
  }
  
  .tab-pane .image-wrapper .experience-badge p {
    margin: 0.5rem 0 0;
    font-size: 0.875rem;
  }




/*
    ImageWall

    #unused
*/

    .wally .img {
        background-image: url('BlaueGruppe.jpg');
        background-size: cover;
        background-position: 50% 50%;
        background-repeat: no-repeat;
        border: 2px solid #fff;
    }
    .wally .img-sm {
        height: 100px;
    }
    .wally .img-md {
        height: 200px;
    }
    .wally .img-lg {
        height: 400px;
    }
    .wally .img-xl {
        height: 600px;
    }
    .wally .m {
        margin-top: 25px;
        margin-bottom: 25px;
    }






/*
    Timeline / Kalender

*/

.timeline_area {
    position: relative;
    z-index: 1;
}
.single-timeline-area {
    position: relative;
    z-index: 1;
    padding-left: 180px;
}
@media only screen and (max-width: 575px) {
    .single-timeline-area {
        padding-left: 100px;
    }
}
.single-timeline-area .timeline-date {
    position: absolute;
    width: 180px;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -ms-grid-row-align: center;
    align-items: center;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    padding-right: 60px;
}
@media only screen and (max-width: 575px) {
    .single-timeline-area .timeline-date {
        width: 100px;
    }
}
.single-timeline-area .timeline-date::after {
    position: absolute;
    width: 3px;
    height: 100%;
    content: "";
    background-color: #ebebeb;
    top: 0;
    right: 30px;
    z-index: 1;
}
.single-timeline-area .timeline-date::before {
    position: absolute;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background-color: #f1c40f;
    content: "";
    top: 50%;
    right: 26px;
    z-index: 5;
    margin-top: -5.5px;
}
.single-timeline-area .timeline-date p {
    margin-bottom: 0;
    color: #020710;
    font-size: 13px;
    text-transform: uppercase;
    font-weight: 500;
}
.single-timeline-area .single-timeline-content {
    position: relative;
    z-index: 1;
    padding: 30px 30px 25px;
    border-radius: 6px;
    margin-bottom: 15px;
    margin-top: 15px;
    -webkit-box-shadow: 0 0.25rem 1rem 0 rgba(47, 91, 234, 0.125);
    box-shadow: 0 0.25rem 1rem 0 rgba(47, 91, 234, 0.125);
    border: 1px solid #ebebeb;
}
@media only screen and (max-width: 575px) {
    .single-timeline-area .single-timeline-content {
        padding: 20px;
    }
}
.single-timeline-area .single-timeline-content .timeline-icon {
    -webkit-transition-duration: 500ms;
    transition-duration: 500ms;
    width: 30px;
    height: 30px;
    background-color: #f1c40f;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 30px;
    flex: 0 0 30px;
    text-align: center;
    max-width: 30px;
    border-radius: 50%;
    margin-right: 15px;
}
.single-timeline-area .single-timeline-content .timeline-icon i {
    color: #ffffff;
    line-height: 30px;
}
.single-timeline-area .single-timeline-content .timeline-text h6 {
    -webkit-transition-duration: 500ms;
    transition-duration: 500ms;
}
.single-timeline-area .single-timeline-content .timeline-text p {
    font-size: 13px;
    margin-bottom: 0;
}
.single-timeline-area .single-timeline-content:hover .timeline-icon,
.single-timeline-area .single-timeline-content:focus .timeline-icon {
    background-color: #020710;
}
.single-timeline-area .single-timeline-content:hover .timeline-text h6,
.single-timeline-area .single-timeline-content:focus .timeline-text h6 {
    color: #3f43fd;
}




/*
    anderes
*/

.hdit {
    position: relative;
    visibility: hidden;
    opacity: 0;
    z-index: 99999;
    background-color: var(--accent-color);
    width: 66px;
    height: 66px;
    border-radius: 50px;
    transition: all 0.4s;
  }
  
  .hdit i {
    font-size: 24px;
    color: var(--contrast-color);
    line-height: 0;
  }
  
  .hdit:hover {
    background-color: color-mix(in srgb, var(--accent-color), transparent 20%);
    color: var(--contrast-color);
  }
  
  .hdit.active {
    visibility: visible;
    opacity: 1;
  }
  

/*
    #unused
*/