/* Generelles Layout */ body { font-family: Arial, sans-serif; margin: 20px; background-color: #f4f4f9; } .calendar-container { max-width: 1200px; margin: auto; background: white; padding: 20px; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1); } .calendar-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; margin-top: 20px; } /* Monatsansicht */ .month { border: 1px solid #ccc; padding: 15px; border-radius: 4px; background-color: #e9ecef; } .month h3 { text-align: center; color: #333; margin-top: 0; } /* Wochentage und Tage */ .weekdays { display: grid; grid-template-columns: repeat(7, 1fr); font-weight: bold; text-align: center; margin-bottom: 5px; color: #007bff; } .days { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; } .day { padding: 8px 0; border-radius: 4px; position: relative; cursor: pointer; } .day:hover:not(.empty):not(.has-event) { background-color: #ddd; } .day.empty { visibility: hidden; } /* Heute-Markierung */ .day.today { background-color: #ffc107; font-weight: bold; color: white; } /* Event-Markierung */ .day.has-event { background-color: #28a745; color: white; font-weight: bold; } /* Steuerelemente */ .controls { text-align: center; margin-bottom: 20px; } .controls button { padding: 8px 15px; margin: 0 10px; background-color: #007bff; color: white; border: none; border-radius: 5px; cursor: pointer; }