feat: Enhance navigation with user-specific links and improved styling

Co-authored-by: Copilot <copilot@github.com>

Website/templates/appointments.html

@@ -75,6 +75,14 @@
         flex-wrap: wrap;
     }
 
+    .package-card__header > div {
+        min-width: 0;
+    }
+
+    .package-card__header > div:first-child {
+        flex: 1 1 0;
+    }
+
     .package-card__tag {
         display: inline-flex;
         align-items: center;
@@ -204,6 +212,14 @@
         .package-card {
             padding: 1.4rem;
         }
+
+        .package-card__header {
+            align-items: stretch;
+        }
+
+        .package-card__price {
+            justify-content: flex-start;
+        }
     }
 </style>
 {% endblock %}

Website/templates/base.html

@@ -156,15 +156,24 @@
             display: flex;
             align-items: center;
             gap: 1.1rem;
+            flex-wrap: wrap;
             font-weight: 600;
             color: var(--text-soft);
             font-size: 0.98rem;
         }
 
+        .nav-links a {
+            white-space: nowrap;
+        }
+
         .nav-links a:hover {
             color: var(--brand);
         }
 
+        .nav-links .nav-user-link {
+            display: none;
+        }
+
         .nav-actions {
             display: flex;
             align-items: center;
@@ -393,6 +402,10 @@
                 transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
             }
 
+            .nav-links .nav-user-link {
+                display: block;
+            }
+
             .nav-links.open {
                 opacity: 1;
                 visibility: visible;
@@ -408,6 +421,11 @@
                 font-weight: 700;
             }
 
+            .nav-links .nav-user-link {
+                padding-left: 1rem;
+                border-left: 3px solid rgba(28, 90, 99, 0.18);
+            }
+
             .nav-links a:hover,
             .nav-links a:focus-visible {
                 background: #e7f0ec;
@@ -420,6 +438,10 @@
                 flex-wrap: wrap;
             }
 
+            .nav-links .nav-user-link {
+                display: block;
+            }
+
             .nav-actions .nav-btn {
                 padding: 0.42rem 0.72rem;
                 font-size: 0.85rem;
@@ -467,6 +489,10 @@
             .nav-actions .nav-btn {
                 width: 100%;
             }
+
+            .nav-links .nav-user-link {
+                display: block;
+            }
         }
     </style>
     {% endblock %}
@@ -487,6 +513,17 @@
                 <a href="{{ url_for('default') }}">Start</a>
                 <a href="{{ url_for('dienstleistungen') }}">Für Schulen</a>
                 <a href="{{ url_for('kontakt') }}">Kontakt</a>
+                {% if 'username' in session %}
+                    <a class="nav-user-link" href="{{ url_for('my_invoices') }}">Meine Rechnungen</a>
+                    <a class="nav-user-link" href="{{ url_for('my_instance_management') }}">Meine Instanz</a>
+                    <a class="nav-user-link" href="{{ url_for('user_chat') }}">Chat mit Admin</a>
+                    <a class="nav-user-link" href="{{ url_for('user_tickets') }}">Support Tickets</a>
+                    {% if session.get('is_admin') %}
+                        <a class="nav-user-link" href="{{ url_for('admin_dashboard') }}">Admin Dashboard</a>
+                        <a class="nav-user-link" href="{{ url_for('admin_users') }}">Userverwaltung</a>
+                        <a class="nav-user-link" href="{{ url_for('admin_invoices') }}">Rechnungsverwaltung</a>
+                    {% endif %}
+                {% endif %}
             </div>
             <div class="nav-actions">
                 {% if 'username' in session %}