/* ------------------------------------------------------------------------------ */
/* ------------------------------------------------------------- 6.0/00 - 22-05-2024
/* colors   -> #EE741D | rgba(238,116,29) | hsla(25,86%,53%) */
/* ------------------------------------------------------------------------------ */
/* holidays */
/* link	-> https://codepen.io/machtweb/pen/LYwOPVr */
/* date	-> 24-10-2024 */
/* ------------------------------------------------------------------------------ */
/* ROOT and VARIABLES */

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  padding: 0;
  font-family: 'GeistVF', sans-serif;    
  background-color: #f9f9f9;
}

.calendar-container {
  display: flex;
  flex-direction: column; /* Stellt die Elemente übereinander */
  align-items: center; /* Zentriert den Inhalt */
  max-width: 600px; /* Maximale Breite des Containers */
  width: 100%; /* Passt die Breite an kleinere Bildschirme an */
  margin: 0 auto; /* Zentriert den Container */
  padding-inline: 1rem;
  border: 1px solid green;
}

.txt_holidays {
  font-size: 1rem; /* Gewünschte Schriftgröße */
  text-align: left; /* Zentriert den Text */
  margin-bottom: 10px; /* Abstand zum Kalender */
  width: 100%; /* Nimmt die volle Breite des Containers ein */
}

.calendar {
  display: flex; /* Flexbox aktivieren */
  flex-wrap: wrap; /* Elemente in die nächste Zeile umbrechen */
  justify-content: space-between; /* Abstand zwischen den Monaten */
  width: 100%; /* Passt sich an die Breite des Containers an */
  margin: 16px; /* Abstand um den Kalender */
}

.month {
  flex: 1 1 300px; /* Mindestbreite von 300px für jedes Monat */
  margin: 10px; /* Abstand um jedes Monat */
  border: 1px solid #ccc; /* Rahmen für jedes Monat */
  padding: 10px; /* Innenabstand für jedes Monat */
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1); /* Leichte Schatten */
}

.days {
  position: relative;
  display: grid;
  grid-template-columns: repeat(7, 40px);
  gap: 4px;
  justify-content: center;
}

.day {
  width: 40px; /* Feste Breite für die Tage */
  height: 40px; /* Feste Höhe für die Tage */
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  font-size: 14px;
  border: 1px solid #ccc; /* Rahmen für jeden Tag */
  border-radius: 4px;
}

/* Anpassung der Header-Zellen für die Wochentage */
.header {
  font-weight: bold;
  background-color: #f0f0f0; /* Hintergrund für Header */
}

/* Leerzellen für nicht vorhandene Tage */
.empty {
  visibility: hidden; /* Unsichtbar */
}

/* Wochenend- und Feiertagsmarkierungen */
.weekend {
  color: red; /* Wochenendfarbe */
}

.holiday {
  color: red; /* Feiertagsfarbe */
}

/* Hervorhebung für den definierten Zeitraum */
.highlight {
  border-bottom: 4px solid red; /* Roten Rahmen für hervorgehobene Tage */
}

/* Monatsrahmen korrekt zentrieren */
.month h2 {
  margin-bottom: 10px; /* Abstand unter der Monatsüberschrift */
  font-size: 18px; /* Schriftgröße */
}

.day {
  position: relative; /* Für Tooltip-Positionierung */
}

/* Tooltip für die Tage */
.day[data-tooltip]::after {
  content: attr(data-tooltip); /* Tooltip-Inhalt */
  position: absolute;
  bottom: 100%; /* Tooltip über der Zelle */
  left: 50%;
  transform: translateX(-50%);
  background-color: rgba(220, 220, 220, 0.6);
  color: #000;
  padding: 10px;
  border-radius: 4px;
  border: 1px solid #aaa; /* Rahmen für Tooltip */
  white-space: nowrap; /* Keine Zeilenumbrüche im Tooltip */
  z-index: 10; /* Tooltip z-Index */
  visibility: hidden; /* Unsichtbar standardmäßig */
  opacity: 0; /* Unsichtbar */
  transition: opacity 0.2s, visibility 0.2s; /* Übergangseffekte */
  font-size: 16px; /* Schriftgröße des Tooltips */
  cursor: pointer; /* Cursoranzeige beim Hover */
}

.day[data-tooltip]:hover::after {
  visibility: visible; /* Tooltip sichtbar beim Hover */
  opacity: 1; /* Voll sichtbar */
  background-color: rgba(200, 200, 200, 0.9); /* Tooltip-Hintergrundfarbe */
}

.day[data-tooltip]:hover {
  background-color: rgba(200, 200, 200, 0.5); /* Hintergrundfarbe beim Hover */
}

/* Styling für besondere Tage */
.specialday {
  border-bottom: 4px solid #808080; /* Dunkler grauer Border */
  background-color: rgba(128, 128, 128, 0.1); /* Leicht grauer, transparenter Hintergrund */
}



	
/* ------------------------------------------------------------------------------ */
/* END */	
/* ------------------------------------------------------------------------------ */