/* ==========================================================
   WERKSTURBO REGISTER
   dokumente.css
========================================================== */

/* ---------- Tabellenbereich ---------- */

.table-container{

    width:1100px;
    max-width:95%;

    margin:50px auto 80px auto;

}

/* ---------- Tabelle ---------- */

#dokumente-tabelle{

    width:100%;

    border-collapse:collapse;

    background:#ffffff;

    box-shadow:0 8px 20px rgba(0,0,0,.10);

    border-radius:10px;

    overflow:hidden;

}

/* ---------- Tabellenkopf ---------- */

#dokumente-tabelle thead{

    background:#0b4f7d;

    color:white;

}

#dokumente-tabelle th{

    padding:16px 18px;

    text-align:left;

    font-size:17px;

    font-weight:600;
      
    position:sticky;

    top:0;

    z-index:10;

}

/* ---------- Tabelleninhalt ---------- */

#dokumente-tabelle td{

    padding:15px 18px;

    border-bottom:1px solid #e4e7eb;

    vertical-align:top;

    font-size:16px;
   
    line-height:1.5;

}

/* ---------- Zebra-Effekt ---------- */

#dokumente-tabelle tbody tr:nth-child(even){

    background:#f7f9fb;

}

/* ---------- Hover ---------- */

#dokumente-tabelle tbody tr:hover{

    background:#eaf4fc;

}

/* ---------- PDF-Link ---------- */

#dokumente-tabelle a{

    color:#0b4f7d;

    text-decoration:none;

    font-weight:bold;

}

#dokumente-tabelle a:hover{

    color:#1573b5;

    text-decoration:underline;

}

/* ----------------------------------------------------------
   Dokumentenarchiv – Spaltenbreiten
---------------------------------------------------------- */

#dokumente-tabelle {
    table-layout: fixed;
    width: 100%;
}

/* Vorschau */
#dokumente-tabelle th:nth-child(1),
#dokumente-tabelle td:nth-child(1) {
    width: 16%;
}

/* Dokument */
#dokumente-tabelle th:nth-child(2),
#dokumente-tabelle td:nth-child(2) {
    width: 25%;
}

/* Kategorie */
#dokumente-tabelle th:nth-child(3),
#dokumente-tabelle td:nth-child(3) {
    width: 17%;
}

/* Beschreibung */
#dokumente-tabelle th:nth-child(4),
#dokumente-tabelle td:nth-child(4) {
    width: 42%;
}

/* ---------- Responsive ---------- */

@media (max-width:900px){

    .table-container{

        width:95%;

        overflow-x:auto;

    }

    #dokumente-tabelle{

        min-width:750px;

    }

}

/* ---------- Thumbnails ---------- */

.thumb{

    width:80px;

    height:auto;

    border:1px solid #cfcfcf;

    border-radius:4px;

    transition:all .2s ease;

    cursor:pointer;

}

.thumb:hover{

    transform:scale(1.15);

    box-shadow:0 6px 15px rgba(0,0,0,.30);

}


/* ==========================================================
   Pressefotos – Tabellenlayout wie Dokumente
========================================================== */

#pressefotos-tabelle {
    width: 1100px;
    max-width: 90%;
    margin: 40px auto;
    border-collapse: separate;
    border-spacing: 0;
    background: #ffffff;
    border-radius: 10px 10px 0 0;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
}

/* Kopfzeile */

#pressefotos-tabelle thead {
    background: #0b4f7d;
    color: #ffffff;
}

#pressefotos-tabelle th {
    background: #0b4f7d;
    color: #ffffff;
    padding: 16px 18px;
    text-align: left;
    font-weight: 600;
    font-size: 16px;
}

/* Tabellenzeilen */

#pressefotos-tabelle td {
    padding: 14px 18px;
    border-bottom: 1px solid #dfe4e8;
    color: #243b53;
    font-size: 16px;
    vertical-align: middle;
}

/* Abwechselnde Zeilen */

#pressefotos-tabelle tbody tr:nth-child(even) {
    background: #f7f9fb;
}

#pressefotos-tabelle tbody tr:nth-child(odd) {
    background: #ffffff;
}

/* Hover */

#pressefotos-tabelle tbody tr:hover {
    background: #eef4f8;
}

/* Spaltenbreiten */

#pressefotos-tabelle th:nth-child(1),
#pressefotos-tabelle td:nth-child(1) {
    width: 25%;
}

#pressefotos-tabelle th:nth-child(2),
#pressefotos-tabelle td:nth-child(2) {
    width: 15%;
}

#pressefotos-tabelle th:nth-child(3),
#pressefotos-tabelle td:nth-child(3) {
    width: 45%;
}


/* Pressefoto-Thumbnail */

#pressefotos-tabelle .pressefoto-thumbnail {
    width: 120px;
    height: auto;
    display: block;
    transition: transform 0.2s ease;
}

/* Vergrößerung bei Mouseover */

#pressefotos-tabelle .pressefoto-thumbnail:hover {
    transform: scale(1.08);
}