diff --git a/frontend/src/components/calendar/EventDialog.tsx b/frontend/src/components/calendar/EventDialog.tsx
index 7f10c0a..1357d33 100644
--- a/frontend/src/components/calendar/EventDialog.tsx
+++ b/frontend/src/components/calendar/EventDialog.tsx
@@ -5,7 +5,7 @@ import {
   addDays, allDayISO, dateFromInput, eventDay, nthOfMonth, timedISO,
   toDateInput, toTimeInput, weekdayCodeOf, weekdayCodes,
 } from './dates'
-import { CalendarPicker, ColorSwatches, Toggle } from './controls'
+import { CalendarSelect, ColorSwatches, Toggle } from './controls'
 
 interface Props {
   /** Fehlt er, entsteht ein neuer Termin. */
@@ -215,7 +215,7 @@ export default function EventDialog({ event, defaultStart, calendars, calendarId
                 Speichern die Sammlung, behält aber seine Kennung – für
                 CalDAV-Clients derselbe Termin an neuer Adresse, nicht ein
                 neuer. */}
-            <CalendarPicker calendars={calendars} value={calId} onChange={setCalId} disabled={readOnly} />
+            <CalendarSelect calendars={calendars} value={calId} onChange={setCalId} disabled={readOnly} />
             {!!event && calId !== calendarId && (
               <p style={{ margin: '6px 2px 0', fontSize: 12, color: 'var(--color-text-muted)', lineHeight: 1.4 }}>
                 Wird beim Speichern nach „{calendars.find(c => c.id === calId)?.name}" verschoben
diff --git a/frontend/src/components/calendar/controls.tsx b/frontend/src/components/calendar/controls.tsx
index a254190..d3d8045 100644
--- a/frontend/src/components/calendar/controls.tsx
+++ b/frontend/src/components/calendar/controls.tsx
@@ -1,4 +1,4 @@
-import type { CSSProperties } from 'react'
+import { useEffect, useRef, useState, type CSSProperties } from 'react'
 
 /** Eine Palette für Kalender **und** Termine – zwei getrennte Listen liefen
  *  sonst mit der Zeit auseinander, und ein Termin in einer Farbe, die es als
@@ -95,55 +95,99 @@ export function ColorSwatches({ value, onChange, inherit, disabled }: {
 }
 
 /**
- * Kalenderwahl als farbige Plaketten statt als Auswahlfeld.
+ * Kalenderwahl als Ausklappliste – mit dem Farbpunkt des Kalenders.
  *
- * Ein Auswahlfeld zeigt nur den Namen – die Farbe aber ist das, woran man
- * einen Kalender im Raster wiedererkennt. Wer „Arbeit" wählt, soll dabei
+ * Bewusst kein natives `<select>`: Dessen Einträge lassen sich in keinem
+ * Browser verlässlich einfärben, und ausgerechnet die Farbe ist das, woran
+ * man einen Kalender im Raster wiedererkennt. Wer „Arbeit" wählt, soll dabei
  * schon das Blau sehen, in dem der Termin gleich erscheint.
  *
  * Der Punkt spricht dieselbe Sprache wie überall sonst im Kalender: gefüllt
  * heißt gewählt, ein leerer Ring heißt nicht gewählt.
  */
-export function CalendarPicker({ calendars, value, onChange, disabled }: {
+export function CalendarSelect({ calendars, value, onChange, disabled }: {
   calendars: { id: string; name: string; color: string }[]
   value: string
   onChange: (id: string) => void
   disabled?: boolean
 }) {
+  const [open, setOpen] = useState(false)
+  const ref = useRef<HTMLDivElement>(null)
+  const current = calendars.find(c => c.id === value)
+
+  useEffect(() => {
+    if (!open) return
+    function onDoc(e: globalThis.MouseEvent) {
+      if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false)
+    }
+    document.addEventListener('mousedown', onDoc)
+    return () => document.removeEventListener('mousedown', onDoc)
+  }, [open])
+
+  const field: CSSProperties = {
+    width: '100%', boxSizing: 'border-box', display: 'flex', alignItems: 'center', gap: 9,
+    background: 'var(--color-surface-2)', border: '1px solid var(--color-border)',
+    borderRadius: 8, padding: '8px 10px', fontSize: 13.5, color: 'var(--color-text)',
+    cursor: disabled ? 'default' : 'pointer', opacity: disabled ? 0.6 : 1, textAlign: 'left',
+  }
+
+  const dot = (color: string, filled: boolean) => (
+    <span style={{
+      width: 12, height: 12, borderRadius: '50%', flexShrink: 0,
+      border: `2px solid ${color}`, background: filled ? color : 'transparent',
+    }} />
+  )
+
   return (
-    <div style={{ display: 'flex', gap: 7, flexWrap: 'wrap' }}>
-      {calendars.map(cal => {
-        const on = cal.id === value
-        return (
-          <button
-            key={cal.id} type="button" disabled={disabled}
-            onClick={() => onChange(cal.id)}
-            aria-pressed={on}
-            style={{
-              display: 'flex', alignItems: 'center', gap: 7, maxWidth: '100%',
-              padding: '7px 12px 7px 10px', borderRadius: 999, fontSize: 13,
-              border: `1.5px solid ${on ? cal.color : 'var(--color-border)'}`,
-              // Nur ein Hauch der Kalenderfarbe: Ausgefüllte Plaketten in acht
-              // kräftigen Tönen nebeneinander erschlagen das ganze Formular.
-              background: on ? cal.color + '22' : 'transparent',
-              color: on ? 'var(--color-text)' : 'var(--color-text-muted)',
-              cursor: disabled ? 'default' : 'pointer',
-              opacity: disabled ? 0.6 : 1,
-              transition: 'background 0.12s, border-color 0.12s, color 0.12s',
-            } as CSSProperties}
-          >
-            <span style={{
-              width: 12, height: 12, borderRadius: '50%', flexShrink: 0,
-              border: `2px solid ${cal.color}`,
-              background: on ? cal.color : 'transparent',
-              transition: 'background 0.12s',
-            }} />
-            <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
-              {cal.name}
-            </span>
-          </button>
-        )
-      })}
+    <div
+      ref={ref}
+      style={{ position: 'relative' }}
+      // Escape schließt nur die Liste. Ohne das Anhalten liefe es weiter bis
+      // zum Fenster und machte gleich den ganzen Termindialog zu – mitsamt
+      // allem, was schon eingetippt war.
+      onKeyDown={e => { if (open && e.key === 'Escape') { e.stopPropagation(); setOpen(false) } }}
+    >
+      <button type="button" disabled={disabled} onClick={() => setOpen(o => !o)}
+              aria-haspopup="listbox" aria-expanded={open} style={field}>
+        {current && dot(current.color, true)}
+        <span style={{ flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+          {current?.name ?? 'Kalender wählen'}
+        </span>
+        <span style={{ color: 'var(--color-text-muted)', fontSize: 10, flexShrink: 0 }}>▼</span>
+      </button>
+
+      {open && !disabled && (
+        <div role="listbox" style={{
+          position: 'absolute', left: 0, right: 0, top: 'calc(100% + 4px)', zIndex: 40,
+          background: 'var(--color-surface)', border: '1px solid var(--color-border)',
+          borderRadius: 8, boxShadow: '0 6px 18px rgba(0,0,0,0.28)',
+          maxHeight: 220, overflowY: 'auto',
+        }}>
+          {calendars.map(cal => {
+            const on = cal.id === value
+            return (
+              <button
+                key={cal.id} type="button" role="option" aria-selected={on}
+                onClick={() => { onChange(cal.id); setOpen(false) }}
+                className="aether-cal-row"
+                style={{
+                  display: 'flex', alignItems: 'center', gap: 9, width: '100%',
+                  padding: '9px 10px', border: 'none', textAlign: 'left', cursor: 'pointer',
+                  fontSize: 13.5, color: 'var(--color-text)',
+                  // Nur ein Hauch der Kalenderfarbe für den gewählten Eintrag:
+                  // voll ausgefüllt schriee die Liste den Nebendarsteller aus.
+                  background: on ? cal.color + '22' : 'transparent',
+                }}
+              >
+                {dot(cal.color, on)}
+                <span style={{ flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+                  {cal.name}
+                </span>
+              </button>
+            )
+          })}
+        </div>
+      )}
     </div>
   )
 }