/* +++++++++++++++++++++++++++++++++++++++++ */
/*     custom.css Ehlhaltener Tennisclub     */
/*     Farben: grün: #00b51a | gelb: #ffff00    */
/* +++++++++++++++++++++++++++++++++++++++++ */

body {line-height: 1.35em;}
h1 {font-size: 2.4em; font-weight: 600;}
h2 {font-size: 1.8em; font-weight: 600;}
h3 {font-size: 1.3em;}
a {text-decoration: none;}
hr {max-width: 380px; border-top: 4px double var(--primary) !important; opacity: 1 !important;}

.hornav ul.menu > li.active > a {color: #ffff00;}
.hornav ul.menu > li > a, .hornav ul.menu > li > span {color: #fff; font-size: 1em;}
.hornav ul.menu > .parent-hover > a {color: #ffff00;}
.hornav ul.menu > li > a:hover, .hornav ul.menu > li > span:hover {color: #ffff00 !important;}
li.active.parent span {color: #ffff00 !important;}
#container_base2_modules {background-color: #00b51a;}
.module .module_header h3 {text-decoration: underline double #00b51a;}
.module .module_surround, .module_menu .module_surround {padding: 0 20px 40px;}
.module:first-of-type .module_surround {padding-top: 40px;}
.fa, .fab, .fad, .fal, .far, .fas {padding: 0 5px 0 2px; color: #00b51a;}
.header-2 {margin-right: auto;}
.mm-spn span {color: #00b51a; opacity: 1 !important;}
.mm-spn a {color: #00b51a;}  
.mm-spn .active.deeper.parent span {color: #cfcc00 !important;}
.mm-spn li::before {color:#00b51a !important; opacity: 1 !important;}
.mm-spn.mm-spn--dark {color:#00b51a !important; opacity: 1 !important;}

/* J51 Layer Slideshow */
h2.layerslideshow-title {font-size: 2.4em; font-weight: 600; text-shadow: 5px 5px 5px #1b1b1b;}
.layerslideshow .info {justify-content: initial !important; top: 60% !important;}
.layerslideshow-caption {font-weight: 600; font-size: 1.7em !important; line-height: 1.4em; text-shadow: 3px 3px 5px #1b1b1b;}


/* J51 Menu */
.j51_menu_item_description {font-size: 0.85em; font-style: italic;}
.j51_menu_item_price {font-weight: 600; color: #00b51a;}
.j51_menu_group_header {font-size: 1.1em;}
.j51_menu_group:first-child {border-bottom: 4px double #00b51a;}
.j51_menu_group:nth-child(2) {margin-top: 40px;}

/* Minitek Wall */
.mwall-readmore a:hover {color: #00b51a !important; font-weight: 500;}
.mwall-readmore a {border: 1px solid rgba(0, 181, 27, 1) !important;}

/* eigene Classes */
.clsTxtTeaser {font-size: 1.6em; font-weight: 600; color: #00b51a;}
div#cls50Year {position: relative; max-width: 100%; width: 700px; margin: 0 auto; border: 8px double #00b51a; padding: 25px; border-radius: 25px;}
.clsH250Year {font-size: 1.4em; font-weight: 600; line-height: 1.2em;}
.clsFooterLink {color: #fff; text-transform: uppercase; text-decoration: none;}
.clsIconPos {margin-top: 25px; margin-left: 25px;}

/* --- MANNSCHAFTEN GRID --- */
.clsGridWrapper {
  display: grid;
  grid-template-columns: 40% 60%;
  width: 100%;
  gap: 1rem;
  align-items: center; /* 🔥 DAS ist der Trick */
}

.clsGridImage img {
  width: 100%;
  max-width: 400px;
  height: auto;
  display: block;
}

.clsGridText {
  text-align: left;
}

/* ✅ Responsive: unter 768px untereinander */
@media (max-width: 768px) {
  .clsGridWrapper {
    grid-template-columns: 1fr;
  }

  .clsGridText {
    align-items: flex-start; /* optional: oben starten auf Mobile */
  }
}

@media only screen and ( max-width: 1280px) {
  .clsIconPos {margin-top: 24px; margin-left: 20px;}
  .hornav ul.menu > li {margin: 0 13px;}
}
@media only screen and ( max-width: 959px) {
  h1 {font-size: 2.2em; padding-left: 3px;}
  h2 {font-size: 1.6em; line-height: 2rem;}
  body {font-size: 0.9em !important;}
  .clsIconPos {margin-top: 7px; margin-left: 7px; width: 65%;}
}
@media only screen and ( max-width: 767px ) {
  h1 {font-size: 1.8em; padding-left: 5px;}
  h2 {font-size: 1.4em; line-height: 2rem;}
  body {font-size: 0.85em !important;}
  .clsImgSmall {width: 50%;}
}
@media only screen and ( max-width: 440px ) {
  h1 {font-size: 1.8em; padding-left: 5px;}
  h2 {font-size: 1.4em; line-height: 2rem;}
  h3 {font-size: 1.1rem;}
  body {font-size: 0.85em !important;}
  .clsImgSmall {width: 50%;}
  .clsUmbruch::after {content: '\A'; white-space: pre;}
  .clsIconPos {margin-top: 8px; margin-left: 8px; width: 55%;}
  .logo {padding: 10px 10px;}
  .layerslideshow-title-container {max-height: 20px; bottom: 50%; position: relative;}
  .layerslideshow .info {top: 40% !important;}
  .layerslideshow .item h2 {font-size: 18px !important;}
}
/* Grid Container für Vorstand u.#. */
  .grid-container {
      display: grid;
      grid-template-columns: repeat(3, 300px); /* 2 Spalten à 400px */
      gap: 2rem; /* Abstand zwischen Spalten */
      justify-content: center; /* Zentriert das Grid horizontal */
      max-width: calc(600px + 2rem); /* Max-Breite für 2 Spalten + Gap */
      margin: 0 auto;
      padding: 2rem;
    }

    .grid-item {
      display: flex;
      flex-direction: column; /* Bild oben, Text unten */
      align-items: center;
      text-align: center;
      max-width: 300px;
    }

    .grid-item img {
      width: 300px; /* Feste Breite der Bilder */
      height: auto; /* Verhältnis bleibt erhalten */
      border-radius: 8px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    }

    .grid-item-text {
      margin-top: 1rem;
      padding: 1rem;
      font-size: 1.1rem;
      line-height: 1.6;
    }

    /* Responsive: Bei < 900px (2*400px + Gap) zu 1 Spalte */
    @media (max-width: 900px) {
      .grid-container {
        grid-template-columns: 300px; /* 1 Spalte */
      }
    }

    /* Optional: Noch kleinere Screens */
    @media (max-width: 450px) {
      .grid-container {
        grid-template-columns: 1fr; /* Vollbreite */
        padding: 1rem;
      }
      
      .grid-item img {
        width: 100%; /* Responsive auf sehr kleinen Screens */
        max-width: 300px;
      }
    }