a {
  color: rgb(19, 18, 18);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
  background: #c40d0d;
}

#kalenderhead {
  margin-left: auto;
  margin-right: auto;
  color: rgb(248, 246, 246);
  font-weight: bold;
  background-color: rgb(122, 119, 119);
}

#wochentage {
  color: rgb(248, 246, 246);
  font-weight: bold;
  background-color: rgb(122, 119, 119);
}

#aktuellertag {
  color: rgb(252, 247, 247);
  font-weight: bold;
  background-color: rgb(238, 123, 123);
}

#normalertag {
  color: rgb(6, 7, 6);
  font-weight: bold;
  background-color: rgb(152, 241, 144);
}

#vormonat {
  color: rgb(241, 214, 57);
}

#aktTag {
  color: black;
  font-weight: bold;
  background-color: rgb(152, 241, 144);
}

table {
  width: auto;
  /* Passt sich dem Inhalt an */
  margin: 0 auto;
  /* Zentriert die Tabelle innerhalb des Divs */
  /* border-collapse: collapse; */
  border-collapse: separate;
  /* Erlaubt 'border-spacing' */
  border-spacing: 10px 15px;
  /* border-spacing: 10px 15px; */
  /* Horizontal (10px) und vertikal (15px) Abstand zwischen Zellen */
  margin: 0 auto;
  /* Zentriert die Tabelle */

  /* Verhindert doppelte Ränder */

  /* border: 3px solid black; */
  /* Border in Schwarz mit 3 Pixeln */
  /* border-collapse: collapse; */
  /* Verhindert doppelte Ränder */
  /* width: auto; */
  /* Passt die Breite der Tabelle an den Inhalt an */
  /* margin: 0 auto; */
  /* Zentriert die Tabelle */
}

table th,
table td {
  padding: 10px;
  /* Innenabstand in jeder Zelle */
  text-align: center;
  /* Text zentrieren */
  border: 1px solid #ccc;
  /* Optional: Leichte Umrandung */
}

.kalender {
  width: 100%;
  background-color: #333;
  /* Beispiel: dunkler Hintergrund */
  color: white;
  padding: 10px 20px;
  box-sizing: border-box;
  text-align: center;

  /* display: inline-block; */
  /* Passt sich automatisch an die Breite des Inhalts (Tabelle) an */
  /* margin: 0 auto; */
  /* Zentriert das Div horizontal */
  /* padding: 20px; */
  /* Optional: Abstand um die Tabelle herum */
  /* text-align: center; */
  /* Stellt sicher, dass der Inhalt mittig bleibt */
  /* background-color: #f4f4f4; */
  /* Optional: Hintergrundfarbe für das Div */
  /* border-radius: 8px; */
  /* Optional: Abgerundete Ecken */
}

/* Tabelle Kopfzeile */
#kalenderhead {
  text-align: center;
}

/* Hinweis-Div */
#Hinweis {
  width: 100%;
  /* Nimmt die volle Breite des Bildschirms */
  max-width: 600px;
  /* Maximale Breite des Divs */
  margin: 10px auto;
  /* Abstand nach oben/unten und zentriert horizontal */
  padding: 10px 20px;
  /* Innenabstand für besseren Look */
  text-align: center;
  /* Zentriert den Text */
  background-color: #e8f5e9;
  /* Beispiel: Helles Grün als Hintergrund */
  border: 1px solid #c8e6c9;
  /* Leichte Umrandung */
  border-radius: 8px;
  /* Abgerundete Ecken */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  /* Optional: Schatteneffekt */
}




@media (max-width: 768px) {
  .kalender {
    width: 95%;
    /* Auf kleinen Bildschirmen etwas mehr Platz nutzen */
    margin-left: 10Px;
  }

  #Hinweis {
    max-width: 90%;
    /* Reduzierte Breite auf kleinen Bildschirmen */
    font-size: 14px;
    /* Kleinere Schriftgröße */
  }

  table {
    width: 100%;
    border-spacing: 5px 10px;
    padding: 3px;
    /* Tabelle nimmt die volle Breite des Divs ein */
  }

  table td {
    padding: 3px;
    /* Innenabstand in jeder Zelle */
    text-align: center;
    /* Text zentrieren */
    border: 1px solid #ccc;
    /* Optional: Leichte Umrandung */
  }
}