/* =====================================================
   SEITENLAYOUT (Termine links, Kacheln rechts)
   ===================================================== */

.termine-area{
  display: grid;
  grid-template-columns: 1.2fr 640px;
  gap: 18px;
  align-items: start;
}

.termine-left{
  min-width: 0;
}

.termine-area > .tiles{
  width: 100%;
  max-width: 640px;
}

/* kleiner Screen -> untereinander */
@media (max-width:1100px){
  .termine-area{
    grid-template-columns: 1fr;
  }

  .termine-area > .tiles{
    max-width: none;
  }
}


/* =====================================================
   TERMIN-INHALT (linke Spalte)
   ===================================================== */

.termine-container{
  margin: 0;
  padding: px 28px 18px;
  background: transparent;
}


/* Überschrift */
.jahresueberschrift{
  margin: 6px 0 18px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 2.5rem;
  font-weight: 600;
  color: #96d83f;   /* bläulich wie Screenshot */
  letter-spacing: 0.5px;
  padding-left:100px;
}


/* =====================================================
   TERMIN-LISTE
   ===================================================== */

.termin-liste{
  background: transparent;
  border: 0;
  border-radius: 0;
  overflow: visible;
  padding-left:100px;
}

/* normale Termine */
.termin{
  display: grid;
  grid-template-columns: 180px 90px 1fr;
  gap: 12px;
  padding: 2px 0;
  align-items: baseline;

  font-family: Arial, Helvetica, sans-serif;
  font-size: 1.3rem;
  color: #51d45b;  /* türkis */
}

.termin .datum,
.termin .uhr{
  font-weight: 500;
}

.termin .hinweis{
  font-weight: 500;
}


/* =====================================================
   TURNIERE – hellgrün, aber NICHT fett
   ===================================================== */

.termin.turnier{
  color: #b6ff5a;
  font-weight: 400;
}

.termin.turnier .datum,
.termin.turnier .uhr{
  color: #b6ff5a;
  font-weight: 400;
}

.termin.turnier .hinweis{
  color: #b6ff5a;
  font-weight: 400;
}


/* =====================================================
   SPIELZEIT / INFOBLOCK UNTEN
   ===================================================== */

.spielzeit-info{
  margin-top: 18px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1.3rem;
  line-height: 1.2;
  color: #5ca75c;  /* deutlich heller */
  padding-left:100px;
}

.spielzeit-info p{
  margin: 6px 0;
}

/* gelbe Wörter */
.spielzeit-info strong{
  color: #d8ff00;
  font-weight: 500;
}

/* Pause-Hinweis */
.pause-hinweis{
  margin-top: 14px;
  color: #227251;
  font-style: italic;
  font-weight: 500;
}


/* =====================================================
   RESPONSIVE
   ===================================================== */

@media (max-width:900px){

  .jahresueberschrift{
    font-size: 2.4rem;
  }

  .termin{
    grid-template-columns: 160px 80px 1fr;
    font-size: 1.2rem;
  }
}

@media (max-width:650px){

  .termin{
    grid-template-columns: 1fr;
    gap: 4px;
    padding: 6px 0;
  }

  .termin .uhr{
    opacity: 0.95;
  }

  .termin .hinweis:empty{
    display: none;
  }

  .spielzeit-info{
    font-size: 1.1rem;
  }
}