/* --- Container, der die Tabelle scrollen lässt --- */
.table-wrapper {
    position: fixed;          /* außerhalb des Container-Kontexts */
    top: 0;                   /* ganz oben im Fenster */
    left: 0;                  /* ganz links im Fenster */
    width: 100vw;             /* volle Fensterbreite */
    /*height: 100vh;            /* volle Fensterhöhe */
    
    overflow-y: auto;         /* eigener Scrollbereich */
    overflow-x: auto;         /* falls horizontale Scrollleiste nötig */
    
    background: white;        /* optional: Hintergrund */
    z-index: 999;             /* sicher vor anderen Elementen */
}

/* --- Tabelle bündig am linken Fensterrand --- */
.table-wrapper table {
    margin-left: 0;
    left: 0;
}

/* --- Grundformatierung der Tabelle --- */
.jahrestabelle {
    border-collapse: collapse;
    font-family: Arial, sans-serif;
    font-size: 12px;
}

/* Zellen */
.jahrestabelle th,
.jahrestabelle td {
    border: 1px solid #777;
    padding: 2px 2px;
    text-align: center;
    white-space: nowrap;
    min-width: 8px;
}
/* Tooltip-Grundstruktur */
.jahrestabelle td[data-tip] {
    position: relative;  /* notwendig für ::after Positionierung */
    cursor: pointer;
}

/* Tooltip sichtbar beim Hover */
.jahrestabelle td[data-tip]:hover::after {
    content: attr(data-tip);
    position: absolute;
    top: -5px;                 /* über der Zelle */
    left: 100%;                /* rechts von der Zelle */
    background: rgba(0, 0, 0, 0.85);
    color: #fff;
    padding: 4px 8px;
    border-radius: 4px;
    white-space: pre;          /* wichtig für Zeilenumbruch \n */
    font-size: 11px;
    z-index: 9999;
    pointer-events: none;
    transform: translateX(5px); /* kleinen Abstand zur Zelle */
}

/* --- Fixierte Namensspalte links --- */
.jahrestabelle .person {
    position: sticky;
    left: 0;
    background: #f4f4f4;
    z-index: 5;
}

/* --- Fixierte Kopfzeile --- */
.jahrestabelle thead th {
    position: sticky;
    top: 0;
    z-index: 6;
}

/* Tabellenkopf – Monatsüberschrift */
.mon {
    background: #d0d0ff;
    font-weight: bold;
    text-align: center;
}

/* Summenspalten Kopf */
.sumhead {
    background: #ddd;
    font-weight: bold;
}

/* Tagesspalten Kopf */
.dayhead {
    height: 40px;          /* Platz nach oben */
    width: 12px;            /* schmale Spalte */
    white-space: nowrap;
    padding: 0;
    vertical-align: bottom;
    position: relative;
    background: #f0f0f0;
}

/* Eigentliche Drehung */
.dayhead span {
    display: block;
    transform: rotate(-90deg);
    transform-origin: left bottom;
    position: absolute;
    bottom: 2px;
    left: 12px;
    font-size: 11px;
    font-weight: bold;
}

/* Summenzellen */
.sum {
    background: #ddd;
    font-weight: bold;
}
.diff {
    background: #ffb84d !important;
    font-weight: bold;
}

/* Farben für die Tage */
.u  { background: #7cd67c; }  /* Urlaub */
.k  { background: #ff6666; }  /* Krankheit */
.sa { background: #e6e6e6; }  /* Samstag */
.so { background: #bfbfbf; }  /* Sonntag */
.ft { background: #c68cff; }  /* Feiertag */
.d  { background: white; }

/* Mobile: kleinere Schrift */
@media (max-width: 1000px) {
    .jahrestabelle {
        font-size: 10px;
    }
}

/* Very small screens: compact mode */
@media (max-width: 600px) {
    .jahrestabelle {
        font-size: 8px;
    }
    .table-wrapper {
        top: 100px;
    }
}