/* ============================================
   STARTSEITE – GRID-LAYOUT
   ============================================ */
$bodyClass = 'home';

.main-area{
  display: grid;
  grid-template-columns: 1fr 640px;  /* rechte Spalte fester Block */
  column-gap: 10px;                  /* Abstand Bild ↔ Kachelblock */
  align-items: start;
}

/* ============================================
   LINKE SPALTE (Monatsbild + Eventline)
   ============================================ */

.left-col {
  display: flex;
  flex-direction: column;
  height: 100%;          /* gleiche Höhe wie rechte Spalte */
  padding-right: 0px;   /* Abstand zu den Kacheln */
}


/* ============================================
   MONATSBILD
   ============================================ */

.home-left {
  position: relative;
  background-image: url("../pics/monat/mar26b.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  flex: 0 0 auto;               /* füllt die gesamte linke Spalte */
  height: 620px;     /* feste Höhe */
  

  display: flex;
  flex-direction: column;
  justify-content: flex-end;

  border-top: none;
}

.month-box {
  height: 420px;        /* Wunschhöhe */
  overflow: hidden;     /* schneidet Überstand ab */
}

.month-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;    /* füllt Fläche ohne Verzerren */
  display: block;
}
/* Monatsname im Bild */
.month-title {
  position: absolute;
  right: 28px;
  bottom: 30px;

  margin: 0;

  color: #70e610;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 400; /* dünner wie gewünscht */
  font-size: clamp(2rem, 3vw, 3.2rem);
  text-shadow: 0 3px 8px rgba(0,0,0,0.9);
}


/* ============================================
   EVENTLINE – unter dem Monatsbild
   ============================================ */

.eventline {
  background: none;
  padding: 12px 0;

  color: #6ee000;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: normal;
  font-size: clamp(1.3rem, 2.4vw, 1.6rem);

  display: flex;
  align-items: center;
  gap: 0.5rem;

  margin-bottom: 1rem;
}

.pfeil {
  height: 20px;
  vertical-align: middle;
  margin: 0 6px;
}


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

/* Tablet */
@media (max-width: 1100px) {

  .main-area {
    grid-template-columns: 1fr;
  }

  .left-col {
    padding-right: 0; /* auf Tablet kein Spaltenabstand nötig */
  }

  .home-left {
    min-height: 380px;
  }

  .month-title {
    bottom: 80px;
  }
}


/* Smartphone */
@media (max-width: 600px) {

  .home-left {
    min-height: 300px;
  }

  .month-title {
    right: 16px;
    bottom: 70px;
    font-size: 1.8rem;
  }

  .eventline {
    padding: 10px 0;
    font-size: 1.2rem;
  }
}
/* ================================
   Menü – ausgewogen schlank
   ================================ */

.mainnav {
  padding: 6px 0 !important;   /* vorher 0 – jetzt wieder etwas Luft */
  
}

.mainnav ul {
  padding: 0 18px !important;
  gap: 26px !important;
}

.mainnav a {
  padding: 6px 0 !important;   /* mehr Innenraum */
  line-height: 1.1 !important;
  font-size: 1.5rem !important;
}

.mainnav a.active {
  border-bottom: 3px solid #d8ff00 !important;
  padding-bottom: 4px !important;
}