/* =========================================
   Info – Jahres-Buttons
   EXAKT wie Speiseplan/Aktuelles (.month-switch)
========================================= */

.year-switch {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  margin: 0 auto 1.5rem;
  max-width: 80%;
  position: relative;
}

.year-switch button {
  appearance: none;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.7);
  cursor: pointer;
  font-size: 0.95rem;
  font-weight: 500;
  font-style: normal;
  font-family: Roboto, sans-serif;
  min-height: 40px;
  line-height: 1.2;
  color: #333;
  box-shadow: 0 1px 2px rgba(0,0,0,.05);
  transition: all .2s ease;
}

.year-switch button:hover {
  background: rgba(255, 255, 255, 0.95);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,.08);
}

.year-switch button.is-active {
  background: #cfe36e; /* Using corner-left color equivalent or accent */
  border-color: transparent;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.05);
  color: #000;
  font-weight: 600;
}

.year-switch button:focus {
  outline: 2px solid rgba(0,0,0,.2);
  outline-offset: 2px;
}

/* Mobile wie month-switch: Buttons etwas strecken */
@media (max-width: 768px) {
  .year-switch {
    max-width: 100%;
    padding: 0 0.5rem;
  }

  .year-switch button {
    flex: 1 1 calc(50% - 0.5rem);
    text-align: center;
  }
}