.tabs {
  width: 100%;
}
.tab-nav {
  list-style: none;
  padding: 0;
  display: flex;
  gap: 1rem;
  border-bottom: 2px solid #ccc;
  cursor: pointer;
}
.tab-nav li {
  padding: 0.5rem 1rem;
  border: 1px solid transparent;
  border-bottom: none;
  background-color: #f9f9f9; /* hellgrauer Hintergrund für alle */
  transition: background 0.3s;
}

.tab-nav li:hover {
  background-color: #e0e0e0; /* dunkleres Grau bei Hover */
}

.tab-nav li.active {
  background-color: #ffffff; /* aktiver Tab bleibt weiß */
  border: 1px solid #ccc;
  border-bottom: 2px solid white;
  font-weight: bold;
}

.tab-nav li.active {
  border: 1px solid #ccc;
  border-bottom: 2px solid white;
  font-weight: bold;
}
.tab {
  display: none;
  padding: 1rem 0;
}
.tab.active {
  display: block;
}
.infos {
  padding: 10px;
  min-height: 20px;
  color: #ffffff;
  background-color: #909190;
  border: 1px solid #747574;
  border-radius: 5px;
  margin-bottom: 1em;
}
.tab-desc {
margin:8px 0 16px;color:#3e89fa;
}
.tab-descs {
margin:8px 0 16px;color:#333333;
}
.whitelist-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1em;
  background: #fff;
  box-shadow: 0 0 6px rgba(0,0,0,0.05);
}

.whitelist-table th, .whitelist-table td {
  padding: 12px 16px;
  border: 1px solid #ddd;
  text-align: left;
}

.whitelist-table thead {
  background-color: #f5f5f5;
  font-weight: bold;
}

.whitelist-table tr:nth-child(even) {
  background-color: #f9f9f9;
}

.whitelist-table tr:hover {
  background-color: #eef5ff;
}
.bot-info-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1em;
  background-color: #fff;
  box-shadow: 0 0 5px rgba(0,0,0,0.1);
}

.bot-info-table th,
.bot-info-table td {
  border: 1px solid #ddd;
  padding: 10px;
  text-align: left;
}

.bot-info-table th {
  background-color: #f0f0f0;
  font-weight: bold;
}

.bot-info-table tr:nth-child(even) {
  background-color: #fafafa;
}

.bot-info-table tr:hover {
  background-color: #f5f5f5;
}

.bot-info-table td:last-child {
  font-style: italic;
}
/* Einmal definieren – gilt für beide Tabellen */
.bot-info-table {
  width: 100%;
  table-layout: fixed;        /* feste Spaltenbreiten aus colgroup nutzen */
  border-collapse: collapse;
}
.bot-info-table th, .bot-info-table td {
  border: 1px solid #ccc;
  padding: 8px;
  text-align: left;
  vertical-align: top;
  overflow: hidden;           /* für Ellipse */
  text-overflow: ellipsis;    /* … */
  white-space: nowrap;        /* einzeilig; ggf. entfernen, wenn Zeilenumbruch gewünscht */
}

/* Breiten zentral steuerbar (bei Bedarf anpassen) */
:root {
  --bp-col-name: 24%;
  --bp-col-desc: 46%;
  --bp-col-reco: 20%;
  --bp-col-flag: 10%;
}
.bot-cols col.c1 { width: var(--bp-col-name); }
.bot-cols col.c2 { width: var(--bp-col-desc); }
.bot-cols col.c3 { width: var(--bp-col-reco); }
.bot-cols col.c4 { width: var(--bp-col-flag); }
/* Überschrift zentriert */
.tabs .desc-header { text-align: center !important; }

/* Beschreibung linksbündig */
.tabs .desc-content { text-align: left !important; }
.tabs .bot-table-wrapper {
  width: 88%;
  margin: 0 auto;   /* zentriert */
}

/* Mobil vollbreit */
@media (max-width: 900px) {
  .tabs .bot-table-wrapper { width: 100%; }
}
/* KPI Grid */
.bp-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin: 10px 0 20px 0;
}
@media (max-width: 1200px) {
  .bp-kpi-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
  .bp-kpi-grid { grid-template-columns: 1fr; }
}

.bp-card {
  background: #fff;
  border: 1px solid #e6e8ee;
  border-radius: 12px;
  padding: 14px 16px;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
.bp-card-title {
  font-size: 12px;
  color: #6b7280;
  letter-spacing: .02em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.bp-kpi-number {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.2;
}
.bp-kpi-sub {
  color: #6b7280;
  margin-top: 4px;
  font-size: 13px;
}

/* Charts row */
.bp-charts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
@media (max-width: 1000px) {
  .bp-charts { grid-template-columns: 1fr; }
}
.bp-chart-box {
  background: #fff;
  border: 1px solid #e6e8ee;
  border-radius: 12px;
  padding: 14px 16px;
}

/* Two columns block */
.bp-rows {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 16px;
}
@media (max-width: 1000px) {
  .bp-rows { grid-template-columns: 1fr; }
}
.bp-col fieldset {
  background:#fff;
  border:1px solid #e6e8ee;
  border-radius:12px;
  padding:10px 14px;
}
.bp-link { color:#2563eb; text-decoration:underline; }
.bp-link:hover { text-decoration:none; }