Update package-lock.json and package.json to include 'globals' dependency and improve code formatting in various components for better readability.

pages/cms/tt-regeln.vue

@@ -4,58 +4,142 @@
     <div class="fixed top-20 left-0 right-0 z-40 bg-white border-b border-gray-200 shadow-sm">
       <div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 py-3 sm:py-4">
         <div class="flex items-center justify-between">
-          <h1 class="text-xl sm:text-3xl font-display font-bold text-gray-900">TT-Regeln bearbeiten</h1>
+          <h1 class="text-xl sm:text-3xl font-display font-bold text-gray-900">
+            TT-Regeln bearbeiten
+          </h1>
           <div class="space-x-3">
-            <button @click="save" class="inline-flex items-center px-3 py-1.5 sm:px-4 sm:py-2 rounded-lg bg-primary-600 text-white hover:bg-primary-700 text-sm sm:text-base">Speichern</button>
+            <button
+              class="inline-flex items-center px-3 py-1.5 sm:px-4 sm:py-2 rounded-lg bg-primary-600 text-white hover:bg-primary-700 text-sm sm:text-base"
+              @click="save"
+            >
+              Speichern
+            </button>
           </div>
         </div>
       </div>
     </div>
     
     <!-- Fixed Toolbar below header -->
-    <div class="fixed left-0 right-0 z-30 bg-white border-b border-gray-200 shadow-sm" style="top: 9.5rem;">
+    <div
+      class="fixed left-0 right-0 z-30 bg-white border-b border-gray-200 shadow-sm"
+      style="top: 9.5rem;"
+    >
       <div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
         <div class="flex flex-wrap items-center gap-1 sm:gap-2 py-1.5 sm:py-2">
           <!-- Formatierung -->
           <div class="flex items-center gap-1 border-r pr-2 mr-2">
-            <button class="px-2 py-1 sm:px-3 sm:py-1 rounded border hover:bg-gray-50 text-xs sm:text-sm" @click="format('bold')"><strong>B</strong></button>
-            <button class="px-2 py-1 sm:px-3 sm:py-1 rounded border hover:bg-gray-50 text-xs sm:text-sm" @click="format('italic')"><em>I</em></button>
-            <button class="px-2 py-1 sm:px-3 sm:py-1 rounded border hover:bg-gray-50 text-xs sm:text-sm" @click="formatHeader(1)">H1</button>
-            <button class="px-2 py-1 sm:px-3 sm:py-1 rounded border hover:bg-gray-50 text-xs sm:text-sm" @click="formatHeader(2)">H2</button>
-            <button class="px-2 py-1 sm:px-3 sm:py-1 rounded border hover:bg-gray-50 text-xs sm:text-sm" @click="formatHeader(3)">H3</button>
+            <button
+              class="px-2 py-1 sm:px-3 sm:py-1 rounded border hover:bg-gray-50 text-xs sm:text-sm"
+              @click="format('bold')"
+            >
+              <strong>B</strong>
+            </button>
+            <button
+              class="px-2 py-1 sm:px-3 sm:py-1 rounded border hover:bg-gray-50 text-xs sm:text-sm"
+              @click="format('italic')"
+            >
+              <em>I</em>
+            </button>
+            <button
+              class="px-2 py-1 sm:px-3 sm:py-1 rounded border hover:bg-gray-50 text-xs sm:text-sm"
+              @click="formatHeader(1)"
+            >
+              H1
+            </button>
+            <button
+              class="px-2 py-1 sm:px-3 sm:py-1 rounded border hover:bg-gray-50 text-xs sm:text-sm"
+              @click="formatHeader(2)"
+            >
+              H2
+            </button>
+            <button
+              class="px-2 py-1 sm:px-3 sm:py-1 rounded border hover:bg-gray-50 text-xs sm:text-sm"
+              @click="formatHeader(3)"
+            >
+              H3
+            </button>
           </div>
           
           <!-- Listen -->
           <div class="flex items-center gap-1 border-r pr-2 mr-2">
-            <button class="px-2 py-1 sm:px-3 sm:py-1 rounded border hover:bg-gray-50 text-xs sm:text-sm" @click="format('insertUnorderedList')">•</button>
-            <button class="px-2 py-1 sm:px-3 sm:py-1 rounded border hover:bg-gray-50 text-xs sm:text-sm" @click="format('insertOrderedList')">1.</button>
+            <button
+              class="px-2 py-1 sm:px-3 sm:py-1 rounded border hover:bg-gray-50 text-xs sm:text-sm"
+              @click="format('insertUnorderedList')"
+            >
+              •
+            </button>
+            <button
+              class="px-2 py-1 sm:px-3 sm:py-1 rounded border hover:bg-gray-50 text-xs sm:text-sm"
+              @click="format('insertOrderedList')"
+            >
+              1.
+            </button>
           </div>
           
           <!-- Schnellzugriff für Regeln -->
           <div class="flex items-center gap-1 border-r pr-2 mr-2">
-            <button class="px-2 py-1 sm:px-3 sm:py-1 rounded bg-gray-100 hover:bg-gray-200 text-gray-700 text-xs sm:text-sm" @click="insertRuleTemplate('generic')">Neue Regel</button>
-            <button class="px-2 py-1 sm:px-3 sm:py-1 rounded bg-blue-100 hover:bg-blue-200 text-blue-700 text-xs sm:text-sm" @click="insertRuleTemplate('basic')">Grundregel</button>
-            <button class="px-2 py-1 sm:px-3 sm:py-1 rounded bg-green-100 hover:bg-green-200 text-green-700 text-xs sm:text-sm" @click="insertRuleTemplate('penalty')">Strafregel</button>
-            <button class="px-2 py-1 sm:px-3 sm:py-1 rounded bg-yellow-100 hover:bg-yellow-200 text-yellow-700 text-xs sm:text-sm" @click="insertRuleTemplate('service')">Aufschlag</button>
-            <button class="px-2 py-1 sm:px-3 sm:py-1 rounded bg-red-100 hover:bg-red-200 text-red-700 text-xs sm:text-sm" @click="deleteCurrentRule()">Regel löschen</button>
+            <button
+              class="px-2 py-1 sm:px-3 sm:py-1 rounded bg-gray-100 hover:bg-gray-200 text-gray-700 text-xs sm:text-sm"
+              @click="insertRuleTemplate('generic')"
+            >
+              Neue Regel
+            </button>
+            <button
+              class="px-2 py-1 sm:px-3 sm:py-1 rounded bg-blue-100 hover:bg-blue-200 text-blue-700 text-xs sm:text-sm"
+              @click="insertRuleTemplate('basic')"
+            >
+              Grundregel
+            </button>
+            <button
+              class="px-2 py-1 sm:px-3 sm:py-1 rounded bg-green-100 hover:bg-green-200 text-green-700 text-xs sm:text-sm"
+              @click="insertRuleTemplate('penalty')"
+            >
+              Strafregel
+            </button>
+            <button
+              class="px-2 py-1 sm:px-3 sm:py-1 rounded bg-yellow-100 hover:bg-yellow-200 text-yellow-700 text-xs sm:text-sm"
+              @click="insertRuleTemplate('service')"
+            >
+              Aufschlag
+            </button>
+            <button
+              class="px-2 py-1 sm:px-3 sm:py-1 rounded bg-red-100 hover:bg-red-200 text-red-700 text-xs sm:text-sm"
+              @click="deleteCurrentRule()"
+            >
+              Regel löschen
+            </button>
           </div>
           
           <!-- Weitere Tools -->
           <div class="flex items-center gap-1">
-            <button class="px-2 py-1 sm:px-3 sm:py-1 rounded border hover:bg-gray-50 text-xs sm:text-sm" @click="createLink()">Link</button>
-            <button class="px-2 py-1 sm:px-3 sm:py-1 rounded border hover:bg-gray-50 text-xs sm:text-sm" @click="removeFormat()">Clear</button>
+            <button
+              class="px-2 py-1 sm:px-3 sm:py-1 rounded border hover:bg-gray-50 text-xs sm:text-sm"
+              @click="createLink()"
+            >
+              Link
+            </button>
+            <button
+              class="px-2 py-1 sm:px-3 sm:py-1 rounded border hover:bg-gray-50 text-xs sm:text-sm"
+              @click="removeFormat()"
+            >
+              Clear
+            </button>
           </div>
         </div>
       </div>
     </div>
     
     <!-- Content with top padding -->
-    <div class="pb-16" style="padding-top: 12rem;">
+    <div
+      class="pb-16"
+      style="padding-top: 12rem;"
+    >
       <div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
-        
         <!-- Hilfe-Sektion -->
         <div class="mb-6 bg-blue-50 border border-blue-200 rounded-lg p-4">
-          <h3 class="text-lg font-semibold text-blue-900 mb-2">💡 So arbeiten Sie mit Regel-Kästchen:</h3>
+          <h3 class="text-lg font-semibold text-blue-900 mb-2">
+            💡 So arbeiten Sie mit Regel-Kästchen:
+          </h3>
           <div class="text-sm text-blue-800 space-y-2">
             <p><strong>1. Neue Kästchen hinzufügen:</strong> Klicken Sie in ein bestehendes Kästchen und verwenden Sie die Buttons:</p>
             <ul class="ml-4 space-y-1">
@@ -67,7 +151,9 @@
             <p><strong>2. Kästchen löschen:</strong> Klicken Sie in ein Kästchen und dann auf <span class="bg-red-100 px-2 py-1 rounded text-xs">Regel löschen</span></p>
             <p><strong>3. Kästchen bearbeiten:</strong> Klicken Sie direkt in die Texte und bearbeiten Sie sie</p>
             <p><strong>4. Grid-Layout:</strong> Kästchen werden automatisch im Grid-Layout angeordnet</p>
-            <p class="text-xs text-blue-600 mt-2">💡 <strong>Tipp:</strong> Neue Kästchen werden automatisch in das bestehende Grid eingefügt!</p>
+            <p class="text-xs text-blue-600 mt-2">
+              💡 <strong>Tipp:</strong> Neue Kästchen werden automatisch in das bestehende Grid eingefügt!
+            </p>
           </div>
         </div>