/* ============================================================
   LUMI F1 — ENTWURF 3, Runde 2
   ------------------------------------------------------------
   Michaels Rueckmeldung:
   1. Startgrid nimmt zu viel Platz, wieder raus. Oben vier
      Kacheln nebeneinander.
   2. Die oberen Events tauchten unten nochmal auf. Das Feld
      faengt jetzt nach den vier Kacheln an.
   3. Jahresuebersicht: alle Monate verfuegbar, auch leere, und
      an markierten Tagen muss man Flagge und Uhrzeit sehen.
   4. Partner: nur 1C1C1C, keine Linien, weicher Uebergang.
   ============================================================ */

/* ---------- 1. Startaufstellung wieder raus ----------
   Zurueck zur Kachelreihe aus Entwurf 1, aber vier nebeneinander. */
.events-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(12px, 1.4vw, 18px);
  padding-inline: 0;
}
.events-grid .ev,
.events-grid .ev:first-child{ width: auto; }
.events-grid .ev:nth-child(even){ align-self: auto; }

/* Startnummern und Mittellinie gehoerten zum Grid, also weg */
.ev-pos{ display: none; }
#events .shell::before{ display: none; }

/* Diagonal-Wisch aus Entwurf 1 wiederherstellen */
.events-grid .ev{ overflow: hidden; }
.events-grid .ev:hover::before{ clip-path: polygon(0 0, 100% 0, 0 160%); }
.events-grid .ev::after{ transform: translateX(-40px); }
.events-grid .ev:hover::after{ transform: none; }

/* Vier Kacheln brauchen etwas kompaktere Innenmasse */
.events-grid .ev h3{ font-size: 20px; }
.events-grid .ev-when{ font-size: 17px; margin: 18px 0 5px; }
.events-grid .ev-count b{ font-size: 22px; }
.events-grid .ev-flag{ width: 62px; height: 42px; }

@media (max-width: 1100px){ .events-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px){  .events-grid{ grid-template-columns: 1fr; } }

/* ============================================================
   3. JAHRESUEBERSICHT
   Alle zwoelf Monate, auch die ohne Termine. An belegten Tagen
   Flagge und Uhrzeit statt nur einer Farbflaeche.
   ============================================================ */
.panel-box{ width: min(1180px, 100%); }

.year{
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: clamp(18px, 2.2vw, 30px);
}
.month{ max-width: none; }
.month--empty h4{ color: var(--ink-faint); }
.month--empty .month-grid{ opacity: .45; }

.month-grid{ gap: 4px; }

.day{
  aspect-ratio: auto;
  min-height: 52px;
  padding: 4px 2px 3px;
  align-content: center;
  gap: 1px;
  line-height: 1.1;
}
.day.pad{ min-height: 0; }

/* Belegter Tag: Flagge oben, Tageszahl, Uhrzeit darunter */
.day.has{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  position: relative;
  overflow: hidden;
}
.day-flag{
  width: 22px;
  height: 15px;
  object-fit: cover;
  border-radius: 2px;
  display: block;
  box-shadow: 0 1px 3px rgba(0,0,0,.5);
}
.day-num{ font-size: 12px; font-weight: 900; line-height: 1; }
.day-time{
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
  opacity: .92;
}
.day-plus{
  position: absolute;
  top: 2px; right: 3px;
  font-size: 8px;
  font-weight: 900;
  opacity: .8;
}
/* Sonderstream hat keine Flagge, dafuer ein Zeichen */
.day.special .day-mark{ font-size: 13px; font-weight: 900; line-height: 1; }

.legend{ font-size: 13px; }

/* ============================================================
   4. PARTNER — ruhige Flaeche, weicher Uebergang
   ============================================================ */
#partner .diag{ display: none; }
.partner{
  background: var(--bg);
  border-block: none;
}
/* Die Linien des vorherigen Blocks laufen nach unten aus,
   damit die Kante nicht hart abbricht */
.about-sec .diag{
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 58%, transparent 96%);
          mask-image: linear-gradient(180deg, #000 0%, #000 58%, transparent 96%);
}
/* Feiner Trennschimmer statt harter Kante */
.partner::after{
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(242,242,242,.12) 22%, rgba(242,242,242,.12) 78%, transparent);
}