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

pages/newsletter/confirm.vue

@@ -2,19 +2,47 @@
   <div class="min-h-full py-16 bg-gray-50">
     <div class="max-w-2xl mx-auto px-4 sm:px-6 lg:px-8">
       <div class="bg-white rounded-xl shadow-lg p-8 text-center">
-        <div v-if="loading" class="py-12">
+        <div
+          v-if="loading"
+          class="py-12"
+        >
           <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-6">
-            <svg class="w-8 h-8 text-blue-600 animate-spin" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
+            <svg
+              class="w-8 h-8 text-blue-600 animate-spin"
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+            >
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
+              />
             </svg>
           </div>
-          <p class="text-lg text-gray-600">Newsletter-Anmeldung wird bestätigt...</p>
+          <p class="text-lg text-gray-600">
+            Newsletter-Anmeldung wird bestätigt...
+          </p>
         </div>
 
-        <div v-else-if="error" class="py-12">
+        <div
+          v-else-if="error"
+          class="py-12"
+        >
           <div class="w-16 h-16 bg-red-100 rounded-full flex items-center justify-center mx-auto mb-6">
-            <svg class="w-8 h-8 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+            <svg
+              class="w-8 h-8 text-red-600"
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+            >
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                d="M6 18L18 6M6 6l12 12"
+              />
             </svg>
           </div>
           <h1 class="text-3xl font-display font-bold text-gray-900 mb-4">

pages/newsletter/confirmed.vue

@@ -3,8 +3,18 @@
     <div class="max-w-2xl mx-auto px-4 sm:px-6 lg:px-8">
       <div class="bg-white rounded-xl shadow-lg p-8 text-center">
         <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-6">
-          <svg class="w-8 h-8 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
+          <svg
+            class="w-8 h-8 text-green-600"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+          >
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              d="M5 13l4 4L19 7"
+            />
           </svg>
         </div>
         

pages/newsletter/subscribe.vue

@@ -7,31 +7,55 @@
         </h1>
         <div class="w-24 h-1 bg-primary-600 mb-8" />
 
-        <div v-if="loadingGroups" class="text-center py-8">
-          <p class="text-gray-600">Lade verfügbare Newsletter...</p>
+        <div
+          v-if="loadingGroups"
+          class="text-center py-8"
+        >
+          <p class="text-gray-600">
+            Lade verfügbare Newsletter...
+          </p>
         </div>
 
-        <form v-else @submit.prevent="subscribe" class="space-y-6">
+        <form
+          v-else
+          class="space-y-6"
+          @submit.prevent="subscribe"
+        >
           <div>
-            <label for="groupId" class="block text-sm font-medium text-gray-700 mb-2">
+            <label
+              for="groupId"
+              class="block text-sm font-medium text-gray-700 mb-2"
+            >
               Newsletter auswählen *
             </label>
             <select
               id="groupId"
               v-model="form.groupId"
               required
-              @change="checkSubscription"
               class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500"
+              @change="checkSubscription"
             >
-              <option value="">Bitte wählen Sie einen Newsletter</option>
-              <option v-for="group in groups" :key="group.id" :value="group.id">
+              <option value="">
+                Bitte wählen Sie einen Newsletter
+              </option>
+              <option
+                v-for="group in groups"
+                :key="group.id"
+                :value="group.id"
+              >
                 {{ group.name }}
               </option>
             </select>
-            <p v-if="selectedGroup?.description" class="mt-2 text-sm text-gray-600">
+            <p
+              v-if="selectedGroup?.description"
+              class="mt-2 text-sm text-gray-600"
+            >
               {{ selectedGroup.description }}
             </p>
-            <div v-if="alreadySubscribed" class="mt-2 p-3 bg-blue-50 border border-blue-200 rounded-lg">
+            <div
+              v-if="alreadySubscribed"
+              class="mt-2 p-3 bg-blue-50 border border-blue-200 rounded-lg"
+            >
               <p class="text-sm text-blue-700">
                 ✓ Sie sind bereits für diesen Newsletter angemeldet.
               </p>
@@ -39,7 +63,10 @@
           </div>
 
           <div>
-            <label for="email" class="block text-sm font-medium text-gray-700 mb-2">
+            <label
+              for="email"
+              class="block text-sm font-medium text-gray-700 mb-2"
+            >
               E-Mail-Adresse *
             </label>
             <input
@@ -47,14 +74,17 @@
               v-model="form.email"
               type="email"
               required
-              @blur="checkSubscription"
               class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500"
               placeholder="ihre.email@example.com"
-            />
+              @blur="checkSubscription"
+            >
           </div>
 
           <div>
-            <label for="name" class="block text-sm font-medium text-gray-700 mb-2">
+            <label
+              for="name"
+              class="block text-sm font-medium text-gray-700 mb-2"
+            >
               Name (optional)
             </label>
             <input
@@ -63,14 +93,20 @@
               type="text"
               class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500"
               placeholder="Ihr Name"
-            />
+            >
           </div>
 
-          <div v-if="error" class="p-4 bg-red-50 border border-red-200 rounded-lg text-red-700">
+          <div
+            v-if="error"
+            class="p-4 bg-red-50 border border-red-200 rounded-lg text-red-700"
+          >
             {{ error }}
           </div>
 
-          <div v-if="success" class="p-4 bg-green-50 border border-green-200 rounded-lg text-green-700">
+          <div
+            v-if="success"
+            class="p-4 bg-green-50 border border-green-200 rounded-lg text-green-700"
+          >
             {{ success }}
           </div>
 

pages/newsletter/unsubscribe.vue

@@ -7,13 +7,25 @@
         </h1>
         <div class="w-24 h-1 bg-primary-600 mb-8" />
 
-        <div v-if="loadingGroups" class="text-center py-8">
-          <p class="text-gray-600">Lade verfügbare Newsletter...</p>
+        <div
+          v-if="loadingGroups"
+          class="text-center py-8"
+        >
+          <p class="text-gray-600">
+            Lade verfügbare Newsletter...
+          </p>
         </div>
 
-        <form v-else @submit.prevent="unsubscribe" class="space-y-6">
+        <form
+          v-else
+          class="space-y-6"
+          @submit.prevent="unsubscribe"
+        >
           <div>
-            <label for="groupId" class="block text-sm font-medium text-gray-700 mb-2">
+            <label
+              for="groupId"
+              class="block text-sm font-medium text-gray-700 mb-2"
+            >
               Newsletter auswählen *
             </label>
             <select
@@ -22,18 +34,30 @@
               required
               class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500"
             >
-              <option value="">Bitte wählen Sie einen Newsletter</option>
-              <option v-for="group in groups" :key="group.id" :value="group.id">
+              <option value="">
+                Bitte wählen Sie einen Newsletter
+              </option>
+              <option
+                v-for="group in groups"
+                :key="group.id"
+                :value="group.id"
+              >
                 {{ group.name }}
               </option>
             </select>
-            <p v-if="selectedGroup?.description" class="mt-2 text-sm text-gray-600">
+            <p
+              v-if="selectedGroup?.description"
+              class="mt-2 text-sm text-gray-600"
+            >
               {{ selectedGroup.description }}
             </p>
           </div>
 
           <div>
-            <label for="email" class="block text-sm font-medium text-gray-700 mb-2">
+            <label
+              for="email"
+              class="block text-sm font-medium text-gray-700 mb-2"
+            >
               E-Mail-Adresse *
             </label>
             <input
@@ -43,14 +67,20 @@
               required
               class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500"
               placeholder="ihre.email@example.com"
-            />
+            >
           </div>
 
-          <div v-if="error" class="p-4 bg-red-50 border border-red-200 rounded-lg text-red-700">
+          <div
+            v-if="error"
+            class="p-4 bg-red-50 border border-red-200 rounded-lg text-red-700"
+          >
             {{ error }}
           </div>
 
-          <div v-if="success" class="p-4 bg-green-50 border border-green-200 rounded-lg text-green-700">
+          <div
+            v-if="success"
+            class="p-4 bg-green-50 border border-green-200 rounded-lg text-green-700"
+          >
             {{ success }}
           </div>
 

pages/newsletter/unsubscribed.vue

@@ -3,8 +3,18 @@
     <div class="max-w-2xl mx-auto px-4 sm:px-6 lg:px-8">
       <div class="bg-white rounded-xl shadow-lg p-8 text-center">
         <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-6">
-          <svg class="w-8 h-8 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636" />
+          <svg
+            class="w-8 h-8 text-blue-600"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+          >
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636"
+            />
           </svg>
         </div>