    /* Nur den Tabellen‑Header einfärben – Rest der Tabelle unverändert lassen */
    .table thead th {
        background-color: #0d6efd !important; /* Bootstrap‑Primary‑Blau */
        color: #ffffff !important;
        border: none !important;              /* verhindert Trennlinien zwischen Header‑Zellen */
    }


/* Form-Gruppen */

.form-group {
    margin-bottom: 20px;
}
.form-select {
    border: 1px solid #000;
    border-radius: 10px;
}
.form-control {
    border: 1px solid #000;
    border-radius: 10px;
}
input, textarea,text, select {
    border: 1px solid #000;
    border-radius: 10px;
}

/* Labels */

label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}


/* Text Input & Select */



/* Checkbox und Radio Buttons */

input[type="checkbox"],
input[type="radio"] {
    margin-right: 5px;
    transform: scale(1.2);
    cursor: pointer;
}


/* Optional: Inline-Anordnung für Checkbox/Radio-Buttons */

.inline-input {
    display: inline-block;
    margin-right: 15px;
}


/* Stil für das select-Element */

select {
    width: 100%;
    padding: 10px;
    font-size: 16px;
    border: 1px solid #ced4da;
    border-radius: 10px;
    box-sizing: border-box;
    transition: border-color 0.3s, box-shadow 0.3s;
    background-color: #fff;
    appearance: none;
    /* Entfernt Standard-Styling des Browsers */
    cursor: pointer;
}


/* Stil für das select-Element beim Fokus */

select:focus {
    border-color: #66afe9;
    outline: none;
    box-shadow: 0 0 8px rgba(102, 175, 233, 0.6);
}


/* Stil für das Dropdown-Icon */

select::-ms-expand {
    display: none;
    /* Entfernt den Standard-Pfeil in IE */
}

select {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16"><path fill="%23000000" d="M7 10l5 5 5-5H7z"/></svg>');
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 16px;
    padding-right: 30px;
    /* Platz für den Pfeil */
}


/* Hover-Effekt */

select:hover {
    border-color: #999;
}


/* Nur wenn Dark-Mode aktiv ist */
@media (prefers-color-scheme: dark) {
  .table td {
    background: #262626; /* dunkler Hintergrund  */
    color: #f2f2f2;      /* helle Schriftfarbe */
  }
}

/* Optional – Light-Mode explizit angeben, falls du andere Farben willst */
@media (prefers-color-scheme: light) {
  .table td {
    background: #ffffff;
    color: #1a1a1a;
  }
}
/* Option-Styling */

select option {
    padding: 10px;
    font-size: 16px;
}

    /* Tabelle durchsichtig und mit Abstand zwischen den Zellen */
    .table {
        background-color: transparent !important;
        border-collapse: separate; /* nötig für border-spacing und Border-Radius */
        border-spacing: 10px; /* Abstand zwischen den Zellen */
      }
    
      /* Schwarzer Rahmen und abgerundete Ecken für alle Zellen */
      .table th,
      .table td {
        
        border-radius: 10px;
        padding: 8px; /* Innenabstand, damit der Inhalt nicht direkt am Rahmen klebt */
      }
  
      
      @media (prefers-color-scheme: dark) {
        /* Inputs, Textareas, Selects im Dark‑Mode */
        .form-control,
        .form-select,
        input[type="text"],
        input[type="email"],
        input[type="password"],
        textarea,
        select {
          background-color: #333 !important;
          color: #fff    !important;
          border-color: #555 !important;
        }
      
        /* Dropdown‑Pfeil in Weiß */
        select {
          background-image: url('data:image/svg+xml;utf8,\
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16">\
      <path fill="%23ffffff" d="M7 10l5 5 5-5H7z"/></svg>');
        }
      
        /* Placeholder‑Text auch weiß */
        ::placeholder {
          color: #aaa !important;
        }
      
        /* Labels in Weiß */
        label {
          color: #fff !important;
        }
      
        /* Tabellenrahmen anpassen */
        .table th,
        .table td {
          border-color: #777 !important;
        }
      }
