/* ---------------------------------------------------
   Grundlayout – warmes, gedämpftes Beige
--------------------------------------------------- */
/* Seite füllt das Fenster, kein Body-Scrollen */
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

/* Body als Spalte: oben Header, unten Scrollbereich */
body {
    background-color: #dddddd;
    color: #2a2a2a;
    display: flex;
    flex-direction: column;
}

/* Header bekommt den bisherigen Außenabstand */
#page-header {
    flex: 0 0 auto;
    padding: 20px;
}

#page-wrapper {
    max-width: 1250px;
    margin: 0 auto;      /* zentriert */
    width: 100%;         /* füllt kleine Fenster vollständig */
    display: flex;
    flex-direction: column;
    height: 100%;        /* wichtig für den Scrollbereich */
}


/* ---------------------------------------------------
   Sticky Header (Filterleiste)
--------------------------------------------------- */
#filter-header {
    position: sticky;
    top: 0;
    z-index: 50;
    padding-bottom: 5px;
    padding-top: 5px;
    /* border-bottom: 1px solid #c8c4bb; */
}

/* ---------------------------------------------------
   Scroll-Container für Datentabelle
--------------------------------------------------- */
/*
.table-scroll {
    max-height: 70vh;
    overflow-y: auto;
    margin-top: 5px;
    border: 1px solid #c8c4bb;
}
*/

/* Tabellen-Scrollbereich füllt den Rest */
.table-scroll {
    flex: 1 1 auto;
    overflow-y: auto;
    margin: 0 20px 20px 20px;
    border: 1px solid #c8c4bb;
}

/* ---------------------------------------------------
   Tabelle
--------------------------------------------------- */
table {
    border-collapse: collapse;
    width: 100%;
}

th {
/*    color: #2a2a2a; */
    border-bottom: 1px solid #c8c4bb;
    padding: 6px;
    text-align: left;
    background-color: #cccccc;
    /* Sticky Tabellenkopf */
    position: sticky;
    top: 0;
    z-index: 5;
}

td {
    border-bottom: 1px solid #d4d0c7;
    padding: 3px;
}

tr {
/*    background-color: #eeeeee;  */
}

/*
tr:hover td {
    background-color: #e0ddd6;
}
*/

td.tfz {
    white-space: nowrap;
}

/* ---------------------------------------------------
   Links
--------------------------------------------------- */
a {
/*    color: #4f6a8a; */
    text-decoration: none;
}

a:hover {
/*    color: #6f89a8; */
    text-decoration: underline;
}

/* ---------------------------------------------------
   Filterzeile
--------------------------------------------------- */
.filter-row select,
.filter-row input {
    padding: 3px 10px;
    border: 1px solid #c8c4bb;
    color: #2a2a2a;
    margin-bottom: 4px;
    margin-top: 4px; 
}

.filter-small  { width: 80px; }
.filter-medium { width: 130px; }
.filter-large  { width: 180px; }
.filter-num    { width: 50px; }

/* ---------------------------------------------------
   Buttons
--------------------------------------------------- */
button {
    padding: 6px 12px;
    margin-right: 6px;
    background-color: #d7d3ca;
    border: 1px solid #b8b4ac;
    cursor: pointer;
}

button:hover {
    background-color: #cfcac1;
}

button.reset {
    background-color: #ddd;
}

/* ---------------------------------------------------
   Filter-Actions
--------------------------------------------------- */
.filter-actions {
    margin-top: 10px;
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.result-count {
    font-size: 14px;
    color: #333;
}

.preview-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    cursor: pointer;
}

/* ---------------------------------------------------
   Vorschau-Bilder
--------------------------------------------------- */
img {
    border: 1px solid #c8c4bb;
}