body {
    font-family: Arial, sans-serif;
    margin: 20px;
    color: #333;
    background-color: #fff;
}

h1, h2 {
    color: #b11d32; /* Rotton der Tanzschule */
}

p {
    margin-bottom: 10px;
}

ul {
    list-style: none;
    padding-left: 0;
}

li {
    padding: 5px 0;
    border-bottom: 1px solid #eee;
}

/* Monatsnavigation */
a {
    color: #b11d32;
    text-decoration: none;
    margin: 0 5px;
}

a:hover {
    text-decoration: underline;
}

/* Tabellenansicht Kalender */
table {
    width: 100%;
    max-width: 500px;
    border-collapse: collapse;
    margin-bottom: 20px;
}

th, td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: center;
    min-width: 40px;
}

th {
    background-color: #f5f5f5;
}

td {
    position: relative;
}

/* Reguläre Unterrichtstage */
.tag-unterricht {
    background-color: #8dc73f; /* freundliches Grün passend zum Stil */
    color: #fff;
}

.heute {
    border: 2px solid gray;
    border-radius: 6px;
    position: relative;
    /*background-color: #f3f3f3;*/
}

.heute-label {
    position: absolute;
    top: 2px;
    right: 3px;
    font-size: 0.45em;
    font-weight: bold;
    background-color: #e0e0e0;
    padding: 1px 3px;
    border-radius: 3px;
    color: #333;
}

/* Generelle Hervorhebung unterrichtsfreier Tage */
.tag-unterrichtsfrei {
    background-color: #ffc2c2; /* Grundhellrot */
}

/* Keine Schnupperstunde */
.tag-schnupper {
    background-color: #f59c35; /* Orangeton passend zur Website */
    color: #fff;
}

/* Wirklich unterrichtsfreie Tage wie Ferien, geschlossen */
.tag-wichtig {
    background-color: #b11d32;
    color: #fff;
}

/* Hover-Effekt für Erklärung */
td[data-begruendung]:hover::after {
    content: attr(data-begruendung);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background-color: #333;
    color: #fff;
    padding: 4px 8px;
    font-size: 12px;
    border-radius: 4px;
    white-space: nowrap;
    z-index: 10;
}

.legende {
    margin-top: 20px;
}

.legende div {
    display: flex;
    align-items: center;
    margin: 5px 0;
}

.legende-feld {
    display: inline-block;
    width: 15px;
    height: 15px;
    margin-right: 8px;
    border: 1px solid #555;
}

/* Vertretung: Unterricht findet statt, aber markiert */
.tag-vertretung { outline: 2px dashed #666; }
.tag-teilweise  { outline: 2px dotted #b11d32; }

/* Responsive Optimierung */
@media (max-width: 600px) {
    table {
        font-size: 14px;
    }
    th, td {
        padding: 6px;
        min-width: 30px;
    }
}