feat: enhance termine.php with year/month filtering, sidebar grouping, and improved layout styling

assets/css/styles.css

@@ -268,6 +268,9 @@
   .mx-auto {
     margin-inline: auto;
   }
+  .mt-1 {
+    margin-top: calc(var(--spacing) * 1);
+  }
   .mt-2 {
     margin-top: calc(var(--spacing) * 2);
   }
@@ -295,6 +298,9 @@
   .ml-1 {
     margin-left: calc(var(--spacing) * 1);
   }
+  .ml-4 {
+    margin-left: calc(var(--spacing) * 4);
+  }
   .block {
     display: block;
   }
@@ -658,6 +664,9 @@
   .text-sf_blau-500 {
     color: var(--color-sf_blau-500);
   }
+  .text-sf_blau-600 {
+    color: var(--color-sf_blau-600);
+  }
   .text-sf_blau-700 {
     color: var(--color-sf_blau-700);
   }
@@ -753,6 +762,11 @@
       }
     }
   }
+  .group-\[\.open\]\:rotate-90 {
+    &:is(:where(.group):is(.open) *) {
+      rotate: 90deg;
+    }
+  }
   .odd\:bg-white {
     &:nth-child(odd) {
       background-color: var(--color-white);
@@ -855,6 +869,13 @@
       }
     }
   }
+  .hover\:underline {
+    &:hover {
+      @media (hover: hover) {
+        text-decoration-line: underline;
+      }
+    }
+  }
   .focus\:text-blue-600 {
     &:focus {
       color: var(--color-blue-600);
@@ -907,6 +928,11 @@
       margin-top: calc(var(--spacing) * 8);
     }
   }
+  .md\:mb-0 {
+    @media (width >= 48rem) {
+      margin-bottom: calc(var(--spacing) * 0);
+    }
+  }
   .md\:block {
     @media (width >= 48rem) {
       display: block;
@@ -927,11 +953,26 @@
       width: calc(1/2 * 100%);
     }
   }
+  .md\:w-1\/4 {
+    @media (width >= 48rem) {
+      width: calc(1/4 * 100%);
+    }
+  }
+  .md\:w-3\/4 {
+    @media (width >= 48rem) {
+      width: calc(3/4 * 100%);
+    }
+  }
   .md\:w-36 {
     @media (width >= 48rem) {
       width: calc(var(--spacing) * 36);
     }
   }
+  .md\:flex-row {
+    @media (width >= 48rem) {
+      flex-direction: row;
+    }
+  }
   .md\:px-10 {
     @media (width >= 48rem) {
       padding-inline: calc(var(--spacing) * 10);