/* Basis-Stil */
    body {
      font-family: Arial, Helvetica, sans-serif;
      font-size: 18px;
      margin: 5px;
      background-color: #dcdcdc;
    }

    h1 {
      text-align: center;
      font-variant: small-caps;
      color: teal;
    }

    /* Scrollbarer Bereich für die Tabelle */
    .table-wrapper {
      max-height: 800px;
      overflow-y: auto;
      border: 1px solid #ccc;
    }

    /* Tabelle */
    table {
      border-collapse: collapse;
      width: auto;
      margin: 0 auto;
    }

    /* Kopfzeile sticky */
    thead th {
      position: sticky;
      top: 0;
      background-color: #333;
      color: white;
      padding: 8px;
      text-align: left;
      z-index: 10;
    }

    /* Tabellenzellen */
    th,
    td {
      padding: 4px 6px;
      text-align: left;
      border-bottom: 1px solid #ccc;
    }

    /* Erste Spalte (Show) schmal und zentriert */
    table th:first-child,
    table td:first-child {
      min-width: 50px;
      max-width: 50px;
      text-align: center;
      font-weight: bold;
    }

    /* Zebra-Streifen nur für normale Shows */
    tbody tr:not(.note):nth-child(even) {
      background-color: #f2f2f2;
    }

        tbody tr.clickable.clicked {
      background-color: #c0d8f7;
      /* Dezente Markierung */
    }

    tbody tr.clickable:hover {
      background-color: #ffeeba;
      cursor: pointer;
    }

    /* Info-Zeilen (note) leicht abgesetzt, hellgrau, kursiv */
    tr.note {
      background-color: #f9f9f9;
      font-style: italic;
      color: #555;
    }

    /* Optional: Hover für Info-Zeilen bleibt hellgrau */
    tr.note:hover {
      background-color: #ee0a0a;
      color: #fff;
    }