Daten aendern: effective date, searchable UN country pickers, 2 more bugfixes

Feature requests from live use:
- "Daten aendern" was missing a "Wirksam ab" field (unlike Versetzen/
  Befoerdern/Karenz, which all have one) - every change was silently
  logged with today's date. Added the field, threaded through
  change_employee_data (defaults to today if omitted).
- Staatsbuergerschaft and Wohnland now use a searchable picker
  (components/ui/CountryPicker) over the full 193-country UN member
  state list (lib/countries.ts) instead of the original ~9/5-value
  picklists. Dropped the now-too-narrow CHECK constraints
  (supabase/schema_2.sql) since the app is the source of truth for
  valid values, same approach used elsewhere for large open-ended
  pickers.

Two more real bugs found via live testing of the above (both in
change_employee_data, supabase/functions.sql + functions_4.sql):
1. `text[] || 'literal'` is ambiguous in Postgres - it can resolve to
   the array||array overload and try to parse the plain word as array
   syntax ('{...}'), failing with "malformed array literal". Hit on
   every single field-diff line the moment a user actually changed
   something (Staatsbuergerschaft first, then Beschaeftigungsausmass
   confirmed the same root cause). Fixed everywhere by switching to the
   unambiguous array_append() function.
2. The contract_end_date diff-check cast an empty string straight to
   date ("invalid input syntax for type date: ''") instead of using the
   same nullif(...,'')::date guard the UPDATE line below it already had.

Verified live end-to-end after both fixes: changed Staatsbuergerschaft
to Brasilien with a backdated effective date, save succeeded, Stammdaten
tab reflects it, and employee_history got the correct event_date
("2026-07-01") and description ("Geänderte Felder: Staatsbürgerschaft,
wirksam ab 2026-07-01"). Reverted the test employee's data back
afterward; seed data is clean again.

components/employees/panels/DatenAendernPanel.tsx

@@ -3,19 +3,19 @@
 import { useRouter } from "next/navigation";
 import { useState } from "react";
 import { changeEmployeeData } from "@/actions/employees";
+import { CountryPicker } from "@/components/ui/CountryPicker";
 import { SlideOver } from "@/components/ui/SlideOver";
 import { useToast } from "@/components/ui/Toast";
+import { UN_COUNTRIES } from "@/lib/countries";
 import type { ContractType, Database, EmploymentType, GenderType } from "@/lib/supabase/types";
 
 type EmployeeRow = Database["public"]["Views"]["employees_directory"]["Row"];
 
-const NATIONALITIES = ["Österreich", "Deutschland", "Tschechien", "Slowenien", "Türkei", "Serbien", "Kroatien", "Bosnien", "Ungarn", "Andere"];
-const ADDRESS_COUNTRIES = ["Österreich", "Deutschland", "Tschechien", "Slowenien", "Andere"];
-
 export function DatenAendernPanel({ open, onClose, employee }: { open: boolean; onClose: () => void; employee: EmployeeRow }) {
   const { showToast } = useToast();
   const router = useRouter();
   const [pending, setPending] = useState(false);
+  const [effectiveDate, setEffectiveDate] = useState(new Date().toISOString().slice(0, 10));
 
   const [firstName, setFirstName] = useState(employee.first_name);
   const [lastName, setLastName] = useState(employee.last_name);
@@ -47,9 +47,14 @@ export function DatenAendernPanel({ open, onClose, employee }: { open: boolean;
       showToast("Bei befristetem Vertrag ist ein Enddatum erforderlich.", "error");
       return;
     }
+    if (!effectiveDate) {
+      showToast("Bitte ein Wirksam-ab-Datum angeben.", "error");
+      return;
+    }
     setPending(true);
     const result = await changeEmployeeData({
       employee_id: employee.id,
+      effective_date: effectiveDate,
       person: {
         first_name: firstName,
         last_name: lastName,
@@ -101,6 +106,16 @@ export function DatenAendernPanel({ open, onClose, employee }: { open: boolean;
       }
     >
       <div className="flex flex-col gap-6">
+        <div>
+          <label className="mb-1 block text-sm font-semibold text-ink">Wirksam ab*</label>
+          <input
+            type="date"
+            value={effectiveDate}
+            onChange={(e) => setEffectiveDate(e.target.value)}
+            className="w-full rounded border border-border px-3 py-2 text-sm"
+          />
+        </div>
+
         <div>
           <h3 className="mb-3 text-sm font-bold text-ink">Person</h3>
           <div className="flex flex-col gap-3">
@@ -138,13 +153,7 @@ export function DatenAendernPanel({ open, onClose, employee }: { open: boolean;
             </div>
             <div>
               <label className="mb-1 block text-xs font-semibold text-ink-muted">Staatsbürgerschaft</label>
-              <select value={nationality} onChange={(e) => setNationality(e.target.value)} className="w-full rounded border border-border px-3 py-2 text-sm">
-                {NATIONALITIES.map((n) => (
-                  <option key={n} value={n}>
-                    {n}
-                  </option>
-                ))}
-              </select>
+              <CountryPicker value={nationality} onChange={setNationality} countries={UN_COUNTRIES} placeholder="Staatsbürgerschaft suchen…" />
             </div>
             <div className="grid grid-cols-2 gap-3">
               <div>
@@ -153,13 +162,7 @@ export function DatenAendernPanel({ open, onClose, employee }: { open: boolean;
               </div>
               <div>
                 <label className="mb-1 block text-xs font-semibold text-ink-muted">Land</label>
-                <select value={addressCountry} onChange={(e) => setAddressCountry(e.target.value)} className="w-full rounded border border-border px-3 py-2 text-sm">
-                  {ADDRESS_COUNTRIES.map((c) => (
-                    <option key={c} value={c}>
-                      {c}
-                    </option>
-                  ))}
-                </select>
+                <CountryPicker value={addressCountry} onChange={setAddressCountry} countries={UN_COUNTRIES} placeholder="Land suchen…" />
               </div>
             </div>
             <div>