.datagrid {
    overflow-x: auto; /* Ermöglicht horizontales Scrollen */
    -webkit-overflow-scrolling: touch; /* Für sanftes Scrollen auf mobilen Geräten */
}

#meineTabelle {
    width: 100%; /* Tabelle nimmt die gesamte Breite ein */
    min-width: 800px; /* Mindestbreite, um alle Spalten sichtbar zu machen */
    border-collapse: collapse; /* Entfernt doppelte Rahmen */
}

#meineTabelle th, #meineTabelle td {
    text-align: left;
    padding: 8px;
    border: 1px solid #ddd; /* Rahmen für bessere Lesbarkeit */
}

#meineTabelle th {
    background-color: #f4f4f4; /* Hintergrundfarbe für Spaltenköpfe */
    position: sticky; /* Spaltenkopf bleibt beim Scrollen sichtbar */
    top: 0;
    z-index: 1;
}

.subtable {
    display: none; /* Standardmäßig ausgeblendet */
    background-color: #f9f9f9; /* Hintergrundfarbe für Untertabellen */
}

.subtable td {
    padding: 10px;
    border-top: 1px solid #ddd;
}

.inner-table {
    width: 100%;
    border-collapse: collapse;
}

.inner-table th, .inner-table td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
}


.datagrid2 {font: normal 12px/150% Arial, Helvetica, sans-serif; background: #fff; overflow: hidden; border: 0px solid #CFCFCF; }
.datagrid2 table { 
    border-collapse: collapse; text-align: left; width: 100%;
    
} 
.datagrid2 {
    font: normal 12px/150% Arial, Helvetica, sans-serif; 
    background: #fff; 
    overflow: hidden; 
    -webkit-border-radius: 0px; 
    -moz-border-radius: 0px; 
    border-radius: 0px; }
.datagrid2 table td, .datagrid2 table th { 
    padding: 6px 10px; }
.datagrid2 table thead th {
    background:-webkit-gradient( linear, left top, left bottom, 
    color-stop(0.05, #006699), 
    color-stop(1, #00557F) );
    background:-moz-linear-gradient( center top, #006699 5%, #00557F 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#006699', 
    endColorstr='#00557F');
    background-color:#006699; 
    color:#FFFFFF; 
    font-size: 15px; 
    font-weight: bold; } 
.datagrid2 table thead th:first-child { 
    border: none; }
.datagrid2 table tbody td { 
    color: #00496B; 
    border-left: 2px solid #E1EEF4;
    font-size: 13px;font-weight: normal; }

.datagrid2 table tbody td:first-child { 
    border-left: none; }
.datagrid2 table tbody tr:last-child td { 
    border-bottom: none; }
.datagrid2 table tfoot td div { 
    border-top: 1px solid #CFCFCF;
    background: #E1EEF4;} 
.datagrid2 table tfoot td { 
    padding: 0; font-size: 12px } 
.datagrid2 table tfoot td div{ padding: 0px; }
.datagrid2 table tfoot td ul { 
    margin: 0; padding:0; 
    list-style: none; 
    text-align: right; }
.datagrid2 table tfoot  li { display: inline; }
.datagrid2 table tfoot li a { 
    text-decoration: none; 
    display: inline-block;  
    padding: 2px 8px; 
    margin: 1px;color: #FFFFFF;
    border: 1px solid #006699;
    -webkit-border-radius: 3px; 
    -moz-border-radius: 3px; 
    border-radius: 3px; 
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #006699), color-stop(1, #00557F) );
    background:-moz-linear-gradient( center top, #006699 5%, #00557F 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#006699', endColorstr='#00557F');
    background-color:#006699; }
.datagrid2 table tfoot ul.active, .datagrid2 table tfoot ul a:hover { 
    text-decoration: none;
    border-color: #006699; 
    color: #FFFFFF; 
    background: none; 
    background-color:#00557F;}
div.dhtmlx_window_active, div.dhx_modal_cover_dv { position: fixed !important; }




.datagrid table { 
border-collapse: collapse; 
text-align: left; width: 100%; } 

.datagrid {
	font: normal 12px/150% Arial, Helvetica, sans-serif; 
	background: #fff; overflow: hidden; 
	-webkit-border-radius: 10px; 
	-moz-border-radius: 10px; 
	border-radius: 10px; 

    }
	.datagrid table td, 
	.datagrid table th { padding: 6px 10px; }
	.datagrid table thead th {
		background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #006699), color-stop(1, #00557F) );
		background:-moz-linear-gradient( center top, #006699 5%, #00557F 100% );
		filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#006699', endColorstr='#00557F');
		background-color:#006699; 
		color:#FFFFFF; 
		font-size: 15px; 
		font-weight: bold; 
		border-left: 0px solid #0070A8; } 
		.datagrid table thead th:first-child { border: none; }
        .datagrid table tbody td { 
            color: #00496B; 
            border-left: 2px solid #E1EEF4;
            font-size: 13px;
            border-bottom: 1px solid #929292;
            font-weight: normal; }
		.datagrid table tbody .alt td { 
		background: #E1EEF4; 
		color: #00496B; }
		.datagrid table tbody td:first-child { 
		border-left: none; }
		.datagrid table tbody tr:last-child td { 
		border-bottom: none; }

*{
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}

nav{
    display: flex;
    justify-content: space-around;
    align-items: center;
    min-height: 8vh;
    background-color: #5d49d4;
    font-family: 'Poppins', sans-serif;
    z-index: 5;
}

.logo{
    color: rgb(240, 240, 240);
    text-transform: uppercase;
    letter-spacing: 5px;
    font-size: 20px;
}
.nav-links{
    display: flex;

    justify-content: space-around;
    width: 30%
}

.nav-links li{
    list-style: none;
}

.nav-links a{
    color: rgb(240, 240, 240);
    text-decoration: none;
    letter-spacing: 3px;
    font-weight: bold;
    font-size: 14px;
}



table.meineTabelle {
    display: flex;
    flex-direction: column;
    height: 100%;
  }
  table.meineTabelle thead,
  table.meineTabelle tbody {
    display: block;
  }
  table.meineTabelle thead {
    margin-right: 0px;
  }
  table.meineTabelle tbody {
    flex: 1;
    overflow-y: scroll;
  }
  table.meineTabelle tr {
    width: 100%;
    display: flex;
  }
  table.meineTabelle tr td,
  table.meineTabelle tr th {
    display: block;
    flex: 1;
  }
  table.flex-widths.meineTabelle-aligned thead > tr {
    overflow-y: scroll;
    overflow-x: hidden;
  }

