/* ============================================================
   THEORIEPLANER – Layout
   ============================================================ */

/* ── Innerer Wrapper ──────────────────────────────────────── */
.tp_wrapper_inner {
    max-width: 1250px;
    width: 100%;
    margin: 0 auto;
}

/* ── 3-Spalten-Grid (Desktop) ─────────────────────────────── */
.tp_grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    max-width: 1250px;
    margin: 0 auto;
    padding: 0 2px;
}

/* ── Einzelnes Panel (Karte) ──────────────────────────────── */
.tp_panel {
    background: #fff;
    border-radius: 14px;
    border: 1px solid #e4e4e4;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.tp_panel_header {
    background: #f8f8f8;
    text-align: center;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.3px;
    color: #1a1a1a;
    padding: 16px 12px 14px;
    border-bottom: 2px solid #e8e8e8;
}

/* ── Tabelle ──────────────────────────────────────────────── */
.tp_table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.83rem;
}

.tp_table thead th {
    background: #f8f8f8;
    color: #555;
    font-weight: 600;
    font-size: 0.73rem;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    padding: 9px 14px;
    text-align: left;
    border-bottom: 2px solid #e8e8e8;
}

/* ── Spaltenbreiten ───────────────────────────────────────── */
.tp_col_zeit  { width: 110px; min-width: 95px; }
.tp_col_thema { width: auto; }

/* ── Scrollbarer Body ─────────────────────────────────────── */
.tp_scroll {
    overflow-y: visible;
    padding: 0 0 8px 0;
}

/* ── Zeilen ───────────────────────────────────────────────── */
.tp_table tbody tr td {
    padding: 8px 14px;
    border-bottom: 1px solid #f0f0f0;
    color: #333;
    font-size: 0.83rem;
    vertical-align: top;
}

.tp_table tbody tr td:first-child { padding-left: 16px; }
.tp_table tbody tr td:last-child  { padding-right: 16px; }

/* ── Datum + Uhrzeit übereinander in Spalte 1 ─────────────── */
.tp_datum,
.tp_uhrzeit {
    display: block;
    white-space: nowrap;
}
.tp_datum {
    font-weight: 600;
    color: #222;
}
.tp_uhrzeit {
    color: #666;
    font-size: 0.78rem;
    margin-top: 2px;
}

/* ── Grundstoff-Nr. + Bezeichnung übereinander in Spalte 2 ── */
.tp_nr {
    display: block;
    font-weight: 600;
    color: #333;
    white-space: nowrap;
}
.tp_bezeichnung {
    display: block;
    color: #555;
    font-size: 0.78rem;
    margin-top: 2px;
    line-height: 1.35;
}

/* ── Tagesdifferenzierung (2 abwechselnde Grautöne) ────────── */
.tp_day_a td { background-color: #ffffff; }
.tp_day_b td { background-color: #f2f2f2; }

/* ── PDF-Download-Button ──────────────────────────────────── */
.tp_download_bar {
    display: flex;
    justify-content: center;
    margin: 0 auto 24px;
}

.tp_download_btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 20px;
    background: #1a1a1a;
    color: #fff;
    border-radius: 8px;
    font-size: 0.80rem;
    font-weight: 600;
    text-decoration: none;
    letter-spacing: 0.2px;
    transition: background 0.18s ease, transform 0.15s ease;
    font-family: inherit;
}

.tp_download_btn:hover {
    background: #C50000;
    transform: translateY(-1px);
}

/* ── Schulferien-Hervorhebung ─────────────────────────────── */
.tp_ferien td {
    background-color: #fff8e6 !important;   /* warmes Honig-Gelb */
    border-bottom-color: #f0dfa0;
}
.tp_ferien .tp_datum {
    color: #9a6600;
}
.tp_ferien .tp_uhrzeit {
    color: #b88000;
}
/* Ferienkennzeichnung überschreibt nicht die rote Zusatz-Farbe */
.tp_ferien.tp_zusatz td .tp_nr,
.tp_ferien.tp_zusatz td .tp_bezeichnung {
    color: #C50000 !important;
}

/* ── Ferien-Legende (erscheint nur wenn Ferien vorhanden) ─── */
.tp_legende {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0 auto 20px;
    font-size: 0.82rem;
    color: #7a5500;
    background: #fff8e6;
    border: 1px solid #f0dfa0;
    border-radius: 20px;
    padding: 6px 16px;
    width: fit-content;
}

.tp_legende_farbe {
    display: inline-block;
    width: 14px;
    height: 14px;
    background: #fff8e6;
    border: 2px solid #e8c84a;
    border-radius: 3px;
    flex-shrink: 0;
}

/* ── Leere Zeile ──────────────────────────────────────────── */
.tp_leer {
    text-align: center;
    color: #aaa;
    padding: 20px 14px !important;
    font-style: italic;
}

/* ── Zusatz-PKW-Einträge (rot) ────────────────────────────── */
.tp_zusatz td .tp_nr,
.tp_zusatz td .tp_bezeichnung {
    color: #C50000 !important;
}
.tp_zusatz td .tp_nr {
    font-weight: 600;
}

/* ── Untertitel (Datum-Hinweis) ───────────────────────────── */
.tp_untertitel {
    text-align: center;
    font-size: 0.88rem;
    color: #888;
    margin: 0 auto 32px;
    max-width: 1300px;
}

/* ── Zusatz-Zeilen (ab Tag 4) – standardmäßig versteckt ──── */
.tp_extra {
    display: none;
}

/* ── Toggle-Button ────────────────────────────────────────── */
.tp_toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 10px 16px;
    background: #f8f8f8;
    border: none;
    border-top: 1px solid #e8e8e8;
    color: #555;
    font-size: 0.80rem;
    font-weight: 600;
    letter-spacing: 0.3px;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.18s ease, color 0.18s ease;
}

.tp_toggle:hover {
    background: #efefef;
    color: #222;
}

.tp_toggle_icon {
    font-size: 0.70rem;
    display: inline-block;
    transition: transform 0.25s ease;
}

.tp_toggle[data-open="1"] .tp_toggle_icon {
    transform: rotate(180deg);
}

/* ══════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════ */

@media (max-width: 1100px) {
    .tp_grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 700px) {
    .tp_grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    /* Karte etwas kompakter */
    .tp_panel_header {
        font-size: 0.98rem;
        padding: 13px 12px 11px;
    }

    /* Tabelle: 2-spaltig – Spalte 1 schmal, Spalte 2 nimmt Rest */
    .tp_table {
        font-size: 0.80rem;
    }

    .tp_col_zeit {
        width: 90px;
        min-width: 80px;
    }

    .tp_datum {
        font-size: 0.82rem;
    }

    .tp_uhrzeit {
        font-size: 0.74rem;
    }

    .tp_nr {
        font-size: 0.80rem;
    }

    .tp_bezeichnung {
        font-size: 0.74rem;
    }

    .tp_table tbody tr td {
        padding: 7px 10px;
    }

    .tp_table tbody tr td:first-child { padding-left: 10px; }
    .tp_table tbody tr td:last-child  { padding-right: 10px; }

    .tp_table thead th {
        padding: 8px 10px;
        font-size: 0.68rem;
    }
}