/* ==========================
   Stundenplan Tabelle - Styling
   ========================== */

.sp-table {
    width: 100%;
    border-collapse: collapse;
    border: 2px solid #444;
    font-family: 'Karla', sans-serif;
    background-color: #121212; /* dunkler Hintergrund für die Tabelle */
    color: #f0f0f0;
	
}

.sp-table th {
    background-color: #1f1f1f;
    color: #fff;
    padding: 8px;
    font-weight: 600;
    text-align: center;
    border-bottom: 2px solid #444;
}

.sp-table td {
padding:5px;}

.sp-td {
    position: relative; /* für absolute Position der Lehrerkreise */
    width: 12.5%;
    background-color: #1b1b1b;
    border: 1px solid #333;
    height: 50px;
    text-align: center;
    vertical-align: middle;
    padding: 4px;
    transition: background 0.2s ease;
}

.sp-td:hover {
    background-color: #252525; /* sanfter Hover-Effekt */
}

.sp-meal {
    background-color: #ffd; /* helle Farbe für Mahlzeiten */
    color: #222;
    font-weight: 600;
}

/* Lehrer-Kreis */
.sp-teacher-circle {
    display: inline-block;
    position: absolute;
    top: 2px;
    right: 2px;
    width: 22px;
    height: 22px;
    line-height: 22px;
    border-radius: 50%;
    background-color: #3498db; /* Primärfarbe */
    color: #fff;
    font-size: 12px;
    text-align: center;
    font-weight: bold;
    cursor: default;
    box-shadow: 0 0 3px rgba(0,0,0,0.5);
    transition: transform 0.2s ease, background 0.2s ease;
}

.sp-teacher-circle:hover {
    transform: scale(1.2);
    background-color: #2980b9; /* dunklere Farbe beim Hover */
}

/* Frühstück, Mittag, Abendessen hervorheben */
.sp-meal {
    background-color: #fdf6e3;
    color: #333;
    font-weight: 600;
    border-left: 3px solid #f39c12;
    border-right: 3px solid #f39c12;
}

/* Stundenangaben links */
.sp-table td:first-child {
    font-weight: bold;
    background-color: #1f1f1f;
    color: #fff;
}

/* Optional: abgerundete Ecken für gesamte Tabelle */
.sp-table th:first-child,
.sp-table td:first-child {
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
}
.sp-table th:last-child,
.sp-table td:last-child {
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
}

/* Parallele Klassen kleiner darstellen */
.sp-parallel-classes {
    font-size: 0.8em;      /* kleiner als normal */
    color: #ccc;           /* optional: etwas dezenter */
    font-style: italic;    /* optional: kursiv für Unterscheidung */
}

/* ==============================
   INDEX-STUNDENPLAN STYLING
============================== */

/* ================================
   STUNDENPLAN – FORUMBIT STYLING
================================ */

:root {
    --sp-bg-table: #f9f9f9;
    --sp-border-color: #ccc;
    --sp-header-bg: #e0e0e0;
    --sp-hour-bg: #f0f0f0;
    --sp-teacher-bg: #4a90e2;
    --sp-teacher-color: #fff;
    --sp-meal-bg: #ffe0b2;
    --sp-font-family: "Arial", sans-serif;
    --sp-font-size: 14px;
    --sp-padding: 4px 6px;
    --sp-border-radius: 4px;
}

.sp-index-overview {
    font-family: var(--sp-font-family);
    font-size: var(--sp-font-size);
    margin: 1em 0;
}

.sp-index-title {
    margin-bottom: 0.5em;
    font-weight: bold;
}

.sp-index-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed; /* Alle Spalten gleich breit */
}

.sp-index-table th,
.sp-index-table td {
    border: 1px solid var(--sp-border-color);
    text-align: center;
    vertical-align: middle;
    padding: var(--sp-padding);
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.sp-index-table th {
    background-color: var(--sp-header-bg);
    font-weight: bold;
}

.sp-index-table td:first-child {
    background-color: var(--sp-hour-bg);
    font-weight: bold;
}

.sp-index-meal {
    background-color: var(--sp-meal-bg);
}

.sp-index-teacher-circle {
    display: inline-block;
	float:right;
    width: 20px;
    height: 20px;
    line-height: 20px;
    border-radius: 50%;
    background-color: var(--sp-teacher-bg);
    color: var(--sp-teacher-color);
    font-size: 0.75em;
    font-weight: bold;
    text-align: center;
    vertical-align: middle;
    cursor: default;
}

.sp-index-parallel-classes {
    display: block;
    font-size: 0.75em;
    margin-top: 2px;
    color: #555;
}