Semi-stable version with old variable names

www/intern/css/rechnungen.css

@@ -80,13 +80,6 @@ input {
     background: none;
 }
 
-@media (min-width: 1000px) {
-    .bgSection.open {
-        width: calc(100vw - 380px);
-        /* - 2 * var(--paddingSite) */
-    }
-}
-
 /* Cards */
 
 .headerDivTrainer {
@@ -97,8 +90,6 @@ input {
     z-index: 3;
 }
 
-
-
 /* headings */
 
 .containerHeading {
@@ -539,47 +530,47 @@ input[type="number"]::-webkit-outer-spin-button {
 
 /* Burger + menu (unchanged from your style) */
 
-.trainerBurgerMenuDiv {
-    display: flex;
-    align-items: center;
-    justify-content: center;
+.trainerBurgerMenuDiv, .trainerBurgerMenuDiv svg {
+    width: 100%;
+    height: 100%;
     width: 28px;
     height: 28px;
-    cursor: pointer;
-    z-index: 99;
-    color: var(--bg);
 }
 
 .trainerBurgerMenuDiv svg {
-    width: 100%;
-    height: 100%;
-    stroke: currentColor;
     transition: transform 0.3s ease;
+    stroke: #fff;
+    color: #fff;
 }
 
-.trainerBurgerMenuDiv.open svg {
-    transform: rotate(-90deg);
+.trainerBurgerMenuDiv:hover svg {
+    transform: scale(1.02);
+}
+
+.trainerBurgerMenuDiv:active svg {
+    transform: scale(0.95);
 }
 
 .internMenuDiv {
     background-color: #fff;
-    box-shadow: none;
+    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.15);
     position: fixed;
-    left: 0;
-    top: 0;
-    height: 100svh;
-    width: 100%;
-    max-width: 380px;
-    transform: translateX(-100%);
+    right: 0;
+    top: 150px;
+    width: 90vw;
+    height: 200px;
+    max-width: 400px;
+    transform: translateX(0%);
     z-index: 100;
     padding: 20px;
     transition: transform 0.45s cubic-bezier(.4, 0, .2, 1);
     opacity: 1;
+    border-radius: 20px 0 0 20px;
 }
 
 .internMenuDiv.open {
-    transform: translateX(0);
-    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.15);
+    transform: translateX(100%);
+    box-shadow: none;
 }
 
 .innerInternMenuDiv {
@@ -1022,6 +1013,93 @@ tr.rowStartgebuer::after {
     width: 100px;
 }
 
+.chartjs-tooltip {
+    font-size: 12px;
+}
+
+
+.chartjs-tooltip th {
+    font-weight: 500;
+}
+
+.chartjs-tooltip td {
+    font-weight: 200;
+}
+
+.customSelect {
+  position: relative;
+  width: 240px;
+  font-family: system-ui, sans-serif;
+}
+
+.customSelect > * {
+    margin: 0;
+}
+
+.bulkSelectDiv {
+    display: flex; 
+    align-items: center; 
+    gap: 10px; 
+    margin-bottom: 30px;
+}
+
+.bulkSelect:focus .selectArrow {
+    rotate: 180deg
+}
+
+.selectTrigger {
+  width: 100%;
+  border: 1px solid #ccc;
+  background: #fff;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  cursor: pointer;
+}
+
+.selectOptions {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  padding: 0;
+  border: 1px solid #ccc;
+  border-top: none;
+  list-style: none;
+  background: #fff;
+  display: none;
+  z-index: 1000;
+}
+
+.selectOptions li {
+  padding: 10px 12px;
+  cursor: pointer;
+}
+
+.selectOptions li:hover,
+.selectOptions li.selected {
+  background-color: #f2f2f2;
+}
+
+.buttonDownload {
+    padding: 10px;
+    border-radius: 10px;
+    background-color: var(--bg-top);
+    color: #fff;
+    border-top: 2px solid #727272;
+    border-left: 2px solid #727272;
+    border-bottom: 2px solid #2c2c2c;
+    border-right: 2px solid #2c2c2c;
+    transition: transform 0.3s ease;
+}
+
+.buttonDownload:hover {
+    transform: scale(1.015);
+}
+
+.buttonDownload:active {
+    transform: scale(0.95);
+}
 
 select {
     appearance: none;