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>

components/ui/CountryPicker.tsx

@@ -0,0 +1,68 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+
+type CountryPickerProps = {
+  value: string;
+  onChange: (value: string) => void;
+  countries: string[];
+  placeholder?: string;
+};
+
+// Searchable text combobox constrained to a fixed list (UN member states)
+// rather than a Lookup-style "selected card" — a country is a single text
+// value, not an object with its own detail fields.
+export function CountryPicker({ value, onChange, countries, placeholder = "Land suchen…" }: CountryPickerProps) {
+  const [query, setQuery] = useState(value);
+  const [open, setOpen] = useState(false);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => setQuery(value), [value]);
+
+  useEffect(() => {
+    function onClickOutside(e: MouseEvent) {
+      if (containerRef.current && !containerRef.current.contains(e.target as Node)) {
+        setOpen(false);
+        setQuery(value);
+      }
+    }
+    document.addEventListener("mousedown", onClickOutside);
+    return () => document.removeEventListener("mousedown", onClickOutside);
+  }, [value]);
+
+  const filtered = query.trim() ? countries.filter((c) => c.toLowerCase().includes(query.trim().toLowerCase())) : countries;
+
+  return (
+    <div ref={containerRef} className="relative">
+      <input
+        value={query}
+        onChange={(e) => {
+          setQuery(e.target.value);
+          setOpen(true);
+        }}
+        onFocus={() => setOpen(true)}
+        placeholder={placeholder}
+        className="w-full rounded border border-border px-3 py-2 text-sm"
+      />
+      {open && (
+        <div className="absolute z-20 mt-1 max-h-56 w-full overflow-y-auto rounded border border-border bg-white shadow-lg">
+          {filtered.length === 0 && <div className="px-3 py-2 text-sm text-ink-muted">Keine Treffer</div>}
+          {filtered.slice(0, 50).map((c) => (
+            <button
+              key={c}
+              type="button"
+              onClick={() => {
+                onChange(c);
+                setQuery(c);
+                setOpen(false);
+              }}
+              className="block w-full px-3 py-2 text-left text-sm hover:bg-surface"
+            >
+              {c}
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}