.box {
    background-color: rgb(20, 105, 145);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    border: 3px solid rgb(22, 90, 121);
    margin: 20px;
    padding: 50px;
    text-align: center;

}

/* Responsive Anpassungen */
@media (max-width: 600px) {
  .box {
    padding: 15px;
    margin: 5px;
  }
  .table {
    font-size: 0.9em;
  }
  .button-color {
    font-size: 1em;
    padding: 10px 16px;
  }
}

.table-responsive {
  overflow-x: auto;
  display: block;
}

.app-color {
    background-color: rgb(33, 136, 183);
}

.button-color {
    border: 2px solid rgb(22, 90, 121);
    background: linear-gradient(135deg, rgb(22, 90, 121) 0%, rgb(33, 136, 183) 100%);
    color: white;
    font-weight: 500;
    transition: all 0.3s ease;
}

.button-color:hover {
    border: 2px solid rgb(22, 90, 121);
    background: linear-gradient(135deg, rgb(33, 136, 183) 0%, rgb(50, 160, 210) 100%);
    color: white;
    box-shadow: 0 4px 12px rgba(22, 90, 121, 0.3);
    text-decoration: none;
}

.button-color:active {
    background: linear-gradient(135deg, rgb(15, 75, 105) 0%, rgb(22, 90, 121) 100%);
}


.button-color-green {
    border: 2px solid rgb(22, 121, 27);
    background: linear-gradient(135deg, rgb(22, 121, 22) 0%, rgb(33, 183, 33) 100%);
    color: white;
    font-weight: 500;
    transition: all 0.3s ease;
}

.button-color-green:hover {
    border: 2px solid rgb(30, 121, 22);
    background: linear-gradient(135deg, rgb(33, 183, 33) 0%, rgb(55, 210, 50) 100%);
    color: white;
    box-shadow: 0 4px 12px rgba(22, 121, 27, 0.3);
    text-decoration: none;
}

.button-color-green:active {
    background: linear-gradient(135deg, rgb(15, 105, 15) 0%, rgb(22, 121, 30) 100%);
}






/* Bootstrap button overrides */
.btn-secondary {
    background: linear-gradient(135deg, rgb(22, 90, 121) 0%, rgb(33, 136, 183) 100%);
    border: 2px solid rgb(22, 90, 121);
    color: white;
    font-weight: 500;
    transition: all 0.3s ease;
}

.btn-secondary:hover {
    background: linear-gradient(135deg, rgb(33, 136, 183) 0%, rgb(50, 160, 210) 100%);
    border: 2px solid rgb(22, 90, 121);
    color: white;
    box-shadow: 0 4px 12px rgba(22, 90, 121, 0.3);
}

.btn-secondary:active,
.btn-secondary.active {
    background: linear-gradient(135deg, rgb(15, 75, 105) 0%, rgb(22, 90, 121) 100%);
    border-color: rgb(22, 90, 121);
}

.btn-danger {
    background: linear-gradient(135deg, rgb(220, 53, 69) 0%, rgb(255, 77, 77) 100%);
    border: 2px solid rgb(187, 34, 45);
    color: white;
    font-weight: 500;
    transition: all 0.3s ease;
}

.btn-danger:hover {
    background: linear-gradient(135deg, rgb(255, 77, 77) 0%, rgb(255, 100, 100) 100%);
    border-color: rgb(187, 34, 45);
    color: white;
    box-shadow: 0 4px 12px rgba(187, 34, 45, 0.3);
}

.btn-danger:active,
.btn-danger.active {
    background: linear-gradient(135deg, rgb(187, 34, 45) 0%, rgb(140, 25, 30) 100%);
    border-color: rgb(140, 25, 30);
}
body {

    background-color: rgba(255, 255, 255, 0.5); 
    background-image: url('/images/wappen.png');
    background-blend-mode: multiply;
    background-repeat: no-repeat;
    background-position: center center;
}

.scrollable-table {
  height: 500px;
  overflow-y: auto;
  border-radius: 8px;
}

/* Table Styling */
.table {
  margin: 0; /* remove all margins */
  margin-bottom: 0;
  border-collapse: collapse !important;
  border-spacing: 0 !important;
}

/* ensure no top border on any body cell */
.table > tbody > tr > td {
  border-top: 0 !important;
}


.table thead th {
  position: sticky;
  top: 0;
  background: linear-gradient(135deg, rgb(22, 90, 121) 0%, rgb(33, 136, 183) 100%);
  color: white;
  font-weight: 600;
  padding: 15px 12px;
  text-align: center;
}

.table thead th:first-child {
  border-radius: 8px 0 0 0;
}

.table thead th:last-child {
  border-radius: 0 8px 0 0;
}

.table tbody td {
  padding: 12px;
  border-color: rgb(33, 136, 183);
  vertical-align: middle;
}

/* avoid double border between header and first row */
.table tbody tr:first-child td {
  border-top: none;
}

.table tbody tr {
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.table tbody tr:hover {
  background-color: rgba(33, 136, 183, 0.1);
  box-shadow: inset 0 2px 4px rgba(22, 90, 121, 0.1);
}

.table tbody tr:last-child td {
  border-bottom-color: rgb(22, 90, 121);
}

.table tbody tr:last-child td:first-child {
  border-radius: 0 0 0 8px;
}

.table tbody tr:last-child td:last-child {
  border-radius: 0 0 8px 0;
}

.table-bordered {
  border-color: rgb(22, 90, 121);
  border-width: 2px;
  border-radius: 8px;
  overflow: hidden;
}

.table-bordered > :not(caption) > * > * {
  border-color: rgb(33, 136, 183);
}

/* Table inside scrollable container */
.scrollable-table .table {
  margin-bottom: 0;
}

.scrollable-table thead th {
  z-index: 10;
}

/* Responsive adjustments */
@media (max-width: 600px) {
  .table thead th {
    padding: 10px 8px;
    font-size: 0.85em;
  }
  
  .table tbody td {
    padding: 8px;
    font-size: 0.9em;
  }
}

h1 {

  background: linear-gradient(135deg, rgb(22, 90, 121) 0%, rgb(33, 136, 183) 100%);
  border-color: rgb(22, 90, 121);
  border-bottom: 3px solid rgb(22, 90, 121);
}