@charset "utf-8";

@media only screen and (max-width: 550px) {
  /* Bessere Lesbarkeit auf kleinen Bildschirmen */
  table {
    font-size: 0.95em;
  }
  
  td, th {
    padding: 0.5em 0.3em; /* Kompakteres Padding */
    max-width: 50vw;       /* Textumbruch erzwingen */
  }
  
  /* Alternierende Zeilenfarben deaktivieren */
  tr:nth-child(even),
  tr:nth-child(odd) {
    background-color: transparent;
  }
  
  /* Horizontales Scrollen für Tabellen */
  .table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch; /* Smooth scrolling auf iOS */
    display: block;
    width: 100%;
  }
  
  /* Spezifische Spalten optimieren */
  td.nobr {
    white-space: normal; /* Umbruch auch in "nowrap"-Zellen */
  }
}

/* ========================================
   Basis-Tabellenlayout
   ======================================== */
table {
  table-layout: auto;						/* lässt die Breite sich nach dem Inhalt richten. */
  /* width: 100%; */
  /* table-layout: fixed;	*/		/* Fixe Spaltenbreiten */
	margin: 1em auto 0.5em;				/*  */
  border: none;
  border-collapse: collapse;		/* Kein Gitter mit Hintergrundfarbe */
  color: #1E374A;
  background-color: #F5F5F5;   /* Hintergrund zwischen Zellen */
}

/* Versteckte Zeilen/Spalten */
#collapse {
  visibility: collapse;
}

/* Zellenverhalten */
td, th {
  width: auto; 									/* Oder minimale Breiten */
  padding: 0.3em;
  vertical-align: middle;
  text-align: left;
  white-space: normal;
	overflow-wrap: break-word;		/* sorgen für sauberen Umbruch langer Texte. */
  /* overflow: hidden; */
  /* text-overflow: ellipsis; */
	/* overflow: hidden; */				/* Ohne overflow: hidden darf der Inhalt die Zelle vergrößern. */
}

td.top {
	vertical-align: baseline;		/* 'baseline' oben besser positioniert als "top" */
}

/* Zentrierte Tabellen */
table.center {
  margin-left: auto;
  margin-right: auto;
}

/* Vollbreite Tabellen */
table.width-100 {
  width: 100%;
}

/* Links in Tabellen */
table a,
table a:link,
table a:visited {
  color: #28497a;
  text-decoration: none;
  background-color: inherit;
}
table a:hover {
  color: #3561a0;
}

/* Alternierende Zeilenfarben */
tr:nth-child(even) {
  background-color: #ebebeb;
}
tr:nth-child(odd) {
  background-color: #DCDCDC;
}

/* No-wrap innerhalb bestimmter Zellen */
td.nobr {
  white-space: nowrap;
}

/* Optional: Ellipsis mit Tooltip */
.ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Bilder responsiv innerhalb von Zellen */
td img {
  max-width: 100%;
  height: auto;
}

/* Horizontales Scrollen auf Mobilgeräten */
.table-container {
  overflow-x: auto;
}

/* ========================================
   Dunkles Tabellen-Theme
   ======================================== */
.dark-table {
  color: #F8F8F8;
  background-color: darkgrey;
}

.dark-table th {
  color: #1E374A;
  background-color: #ffc855;
}

.dark-table tr:nth-child(even) {
  background-color: #213C64;
}
.dark-table tr:nth-child(odd) {
  background-color: #28497A;
}

.dark-table .col1,
.dark-table .col-1 {
  color: #F5F5F5;
  background-color: #213C64;
}
.dark-table .col2,
.dark-table .col-2 {
  color: #F5F5F5;
  background-color: #28497A;
}

tbody.dark-table tr:hover {
  background-color: #3d6caf !important;
}

/* Links im Dark-Theme */
.dark-table td a,
.dark-table a:link,
.dark-table a:visited,
.dark-table a:hover {
  color: #FFEEAA;
}
.dark-table th a,
.dark-table th a:link,
.dark-table th a:visited,
.dark-table th a:hover {
  color: #b22222;
}

/* ========================================
   Weitere Helferklassen
   ======================================== */
/* Erlaubt normale Zeilenumbrüche wieder */
.nobr {
  white-space: normal !important;
}

/* Breite von Dropdowns begrenzen */
select {
  max-width: 100%;
}