Add calendar next to newsletter — month view fed by schedule webhook

- Calendar card beside newsletter signup (2-column grid, stacks on mobile)
- Month navigation (prev/next), Monday-first week, today highlighted
- Event dots on days with entries + event list below the grid
- Normalizes schedule webhook response ({data:[]} or [{data:[]}])
- Bilingual DE/EN month names + weekday headers, re-renders on language toggle

css/styles.css

@@ -1387,6 +1387,130 @@ TELEGRAM BANNER
 .newsletter-icon { font-size: 2.5rem; margin-bottom: 16px; }
 .newsletter-hint { color: #65676b; margin-bottom: 16px; font-size: 15px; }
 
+/* ========================================
+   NEWSLETTER + CALENDAR LAYOUT
+   ======================================== */
+.newsletter-calendar-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 32px;
+  align-items: start;
+  max-width: 900px;
+  margin: 0 auto;
+}
+@media (max-width: 768px) {
+  .newsletter-calendar-grid { grid-template-columns: 1fr; }
+}
+
+/* Calendar card */
+.calendar-card {
+  opacity: 0;
+  transform: scale(0.95);
+  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
+              transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
+  background: #ffffff;
+  border: 1px solid #e4e6eb;
+  border-radius: 12px;
+  padding: 16px;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+  max-width: 420px;
+  margin: 0 auto;
+  width: 100%;
+}
+.calendar-card.visible {
+  opacity: 1 !important;
+  transform: scale(1) !important;
+  animation: scaleEntry 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+}
+.calendar-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 12px;
+}
+.calendar-title {
+  font-size: 1.05rem;
+  font-weight: 700;
+  color: #1c1e21;
+}
+.calendar-nav {
+  background: #f0f2f5;
+  border: none;
+  border-radius: 8px;
+  width: 32px;
+  height: 32px;
+  font-size: 1.1rem;
+  line-height: 1;
+  color: #1c1e21;
+  cursor: pointer;
+  transition: background 0.2s ease;
+}
+.calendar-nav:hover { background: #e4e6eb; }
+.calendar-weekdays {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  text-align: center;
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: #65676b;
+  margin-bottom: 4px;
+}
+.calendar-grid {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  gap: 2px;
+}
+.calendar-day {
+  aspect-ratio: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  border-radius: 8px;
+  font-size: 0.85rem;
+  color: #1c1e21;
+  position: relative;
+}
+.calendar-day.empty { visibility: hidden; }
+.calendar-day.today {
+  background: #e7f3ff;
+  color: #1877f2;
+  font-weight: 700;
+}
+.calendar-day.has-event { font-weight: 700; }
+.calendar-dots {
+  display: flex;
+  gap: 2px;
+  position: absolute;
+  bottom: 3px;
+}
+.calendar-dots i {
+  width: 5px;
+  height: 5px;
+  border-radius: 50%;
+  background: #1877f2;
+  display: inline-block;
+}
+.calendar-events { margin-top: 12px; border-top: 1px solid #e4e6eb; padding-top: 10px; }
+.calendar-events-hint { color: #65676b; font-size: 0.85rem; text-align: center; margin: 0; }
+.calendar-event-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
+.calendar-event-list li {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  font-size: 0.85rem;
+  background: #f0f2f5;
+  border-radius: 8px;
+  padding: 8px 10px;
+}
+.calendar-event-date {
+  font-weight: 700;
+  color: #1877f2;
+  white-space: nowrap;
+}
+.calendar-event-headline { flex: 1; color: #1c1e21; }
+.calendar-event-time { color: #65676b; white-space: nowrap; }
+
 /* ========================================
    FOOTER
    ======================================== */