/* test/public_html/css/calendar.css */

/* Die folgenden Regeln für .header und .background-layer sind spezifisch für die Kalenderseite
   und steuern ihr visuelles Layout mit dem Hintergrundbild. */
.header {
  position: relative; /* wichtig für absolute Position der roten Box */
  height: 100vh;
  width: 100%;
  background-size: cover;
  background-position: center;
}
.background-layer {
  height: 100vh;
  width: 100%;
  background-image: url('images/Background.jpg'); /* Dies wird über API serviert */
  background-size: cover;
  background-position: center;
  filter: brightness(0.5);
}

/* Styling für den fixierten Navigationsheader, der jetzt global über main_layout.php geladen wird */
body.calendar-body .site-header-main-html {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 32px;
    z-index: 1000;
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    color: white; /* Damit Menülinks weiß sind */
}

/* Die folgenden CSS-Regeln für die Navigationsleiste sollten eigentlich global in style.css oder einem dedizierten header.css liegen,
   aber um das ursprüngliche Erscheinungsbild zu wahren, übernehme ich sie hier in calendar.css und passe die Selektoren an.
   Im Idealfall würden diese Duplikate vermieden. */
.site-header-main-html .general-site-navigation { /* Die Nav, die im Partial ist */
    width: 100%; /* Wichtig, damit justify-content space-between funktioniert */
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0; /* Padding kommt vom .site-header-main-html */
}

.site-header-main-html .general-site-navigation .logo-img {
    height: 60px;
    width: auto;
}

.site-header-main-html .general-site-navigation .menu-link {
    color: white;
    text-decoration: none;
    margin-left: 16px;
}

.site-header-main-html .general-site-navigation .menu-link:hover {
    text-decoration: underline;
}

.site-header-main-html .general-site-navigation .button {
    background-color: rgb(189, 49, 49);
    padding: 8px 30px;
    color: black !important;
    border-radius: 8px;
    box-shadow: 5px 2px 15px rgba(0, 0, 0, 0.8);
}

.site-header-main-html .general-site-navigation .button:hover {
    text-decoration: none;
}

.site-header-main-html .general-site-navigation .dropdown {
    position: relative;
    display: inline-block;
}

.site-header-main-html .general-site-navigation .dropdown-content {
    display: none;
    position: absolute;
    top: 120%;
    right: 0;
    background-color: rgb(189, 49, 49);
    min-width: 180px;
    box-shadow: 0px 8px 16px rgba(0,0,0,0.2);
    border-radius: 8px;
    z-index: 1001;
    padding: 10px 0;
}

.site-header-main-html .general-site-navigation .dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    font-weight: 500;
}

.site-header-main-html .general-site-navigation .dropdown-content a:hover {
    background-color: rgb(196, 196, 196);
}

.site-header-main-html .general-site-navigation .dropdown:hover .dropdown-content {
    display: block;
}

/* Hier beginnt der seiten-spezifische Inhalt (roter Kasten, Kalender) */

/* Anpassung für den Main Content Bereich, um Platz für den fixierten Header zu schaffen */
body.calendar-body #page-container .main-content-area {
    padding-top: 70px; /* Höhe des Headers + etwas Puffer */
}

.headline { /* Falls diese Headline auch auf der Kalenderseite sein sollte, ansonsten entfernen */
  position: absolute;
  left: 50px;
  top: 300px;
  color: white;
  font-size: 70px;
  width: 500px;
  text-shadow: 8px 8px 8px rgba(0, 0, 0, 0.8);
}

.red {
  color: rgb(189, 49, 49);
}

/* Rote Boxen für Kalenderlayout */
.rote-box {
  position: absolute;
  top: 15%;
  right: 2.5vw;
  width: 45vw;
  height: 60vh;
  z-index: 500;
}

.rote-box2 {
  position: absolute;
  top: 80%;
  right: 2.5vw;
  width: 45vw;
  height: 10vh;
  background-color: rgb(189, 49, 49);
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  z-index: 500;
}

.rote-box3 {
  position: absolute;
  top: 15%;
  left: 10vw;
  width: 40vw;
  height: 75vh;
  background-color: rgb(189, 49, 49);
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  z-index: 500;
  display: flex;
  flex-direction: row;
  gap: 16px;
  padding: 16px;
  box-sizing: border-box;
  margin: 0;
}

.event-button {
    width: 96%;
    height: 68.5%; /* Angepasst, um den Text besser zu füllen */
    margin-left: 2%;
    margin-top: 1.85%;
    background-color: white;
    color: rgb(189, 49, 49);
    font-size: 1.5rem;
    font-weight: bold;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3);
    transition: background-color 0.3s ease, color 0.3s ease;
    display: flex; /* Für Button-Text Zentrierung */
    justify-content: center;
    align-items: center;
    text-decoration: none; /* Für Anchor-Tag, wenn es ein Button ist */
}

.event-button:hover {
  background-color: rgb(240, 240, 240);
  color: black;
}

.grau-box {
  background-color: white;
  color: black;
  border-radius: 8px;
  height: 100%;                
  width: 50%;                  
  overflow-y: auto;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1);
  padding: 16px;
  box-sizing: border-box;
  margin: 0;
  order: 1;                
}

.event-stack {
  background-color: white;
  color: black;
  border-radius: 8px;
  height: 100%;                /* volle Höhe der .rote-box3 */
  width: 50%;                  /* gleiche Breite */
  overflow-y: auto;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1);
  padding: 16px;
  box-sizing: border-box;
  margin: 0;                   /* alle Margins entfernen */
  order: 2;
}
        
    
.event-stack h3 {
  margin-top: 0;
  font-size: 1.5rem;
  color: rgb(189, 49, 49);
  text-align: center;
  border-bottom: 2px solid rgb(189, 49, 49);
  padding-bottom: 8px;
}

.event-item {
  padding: 8px;
  margin: 8px 0;
  background-color: #f2f2f2;
  border-radius: 5px;
  font-weight: 500;
}
.cal-box { /* Container für FullCalendar, jetzt innerhalb von .rote-box (rechts) */
  aspect-ratio: 13 / 9; /* oder 16 / 9, 1 / 1 etc. */
  width: 100%; /* passt sich dem Elterncontainer an */
  border-radius: 8px;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1);
  background-color: white; 
  flex-grow: 1; 
  display: flex;
  flex-direction: column;
  overflow: hidden; 
  padding: 10px; 
  box-sizing: border-box;
}

#calendar-instance { 
    width: 100%;
    height: 100%;
    flex-grow: 1;
}

@media (max-width: 1024px) {
    .rote-box, .rote-box2, .rote-box3 {
        position: relative;
        width: 90vw;
        height: auto;
        margin: 20px auto;
        right: auto;
        left: auto;
        top: auto;
    }
    .rote-box3 {
        flex-direction: column;
        gap: 20px;
        padding: 20px;
    }
    .grau-box, .event-stack {
        width: 100%;
        height: auto;
        min-height: 200px; /* Mindesthöhe für die Boxen */
    }
}

@media (max-width: 768px) {
    body.calendar-body .site-header-main-html {
        flex-direction: column;
        align-items: flex-start;
    }
    .site-header-main-html .general-site-navigation { /* Die Nav, die im Partial ist */
        flex-direction: column;
        align-items: flex-start;
        padding: 0;
    }
    .site-header-main-html .general-site-navigation > div {
        margin-top: 10px;
        display: flex;
        flex-wrap: wrap;
    }
    .site-header-main-html .general-site-navigation .menu-link { margin-bottom: 5px; }

    .rote-box, .rote-box2, .rote-box3 {
        width: 95vw;
        margin: 15px auto;
    }
    .cal-box {
        aspect-ratio: auto;
        height: 400px; /* Feste Höhe für Kalender auf kleineren Screens */
    }
}

@media (max-width: 480px) {
    body.calendar-body .site-header-main-html { font-size: 18px; padding: 10px 15px;}
    .site-header-main-html .general-site-navigation .logo-img { height: 30px; }
    .site-header-main-html .general-site-navigation .menu-link.button { padding: 6px 15px; }
    .site-header-main-html .general-site-navigation .dropdown-content {min-width: 150px;}
    .site-header-main-html .general-site-navigation .dropdown-content a {padding: 10px 12px; font-size: 0.9em;}

    .rote-box, .rote-box2, .rote-box3 {
        margin: 10px auto;
        padding: 10px;
    }
    .grau-box, .event-stack {
        min-height: 150px;
        padding: 10px;
    }
    .event-stack h3 {
        font-size: 1.2rem;
    }
    .event-item {
        font-size: 0.9em;
        padding: 6px;
    }
}