Document and explain curator special curation flow

app/curator/specials/[id]/page.tsx

@@ -5,6 +5,7 @@ import { useParams, useRouter, usePathname } from 'next/navigation';
 import { useLocale, useTranslations } from 'next-intl';
 import CurateSpecialEditor, { CurateSpecial } from '@/components/CurateSpecialEditor';
 import { getCuratorAuthHeaders } from '@/lib/curatorAuth';
+import HelpTooltip from '@/components/HelpTooltip';
 
 export default function CuratorSpecialEditorPage() {
     const params = useParams();
@@ -14,6 +15,7 @@ export default function CuratorSpecialEditorPage() {
     const intlLocale = useLocale() as 'de' | 'en';
     const locale: 'de' | 'en' = urlLocale === 'de' || urlLocale === 'en' ? urlLocale : intlLocale;
     const t = useTranslations('Curator');
+    const tHelp = useTranslations('CuratorHelp');
 
     const specialId = params?.id as string;
 
@@ -117,20 +119,49 @@ export default function CuratorSpecialEditorPage() {
     }
 
     return (
-        <CurateSpecialEditor
-            special={special}
-            locale={locale}
-            onBack={() => router.push(`/${locale}/curator/specials`)}
-            onSaveStartTime={handleSaveStartTime}
-            backLabel={t('backToCuratorSpecials')}
-            headerPrefix={t('curateSpecialHeaderPrefix')}
-            noSongsHint={t('curateSpecialNoSongs')}
-            noSongsSubHint={t('curateSpecialNoSongsSub')}
-            instructionsText={t('curateSpecialInstructions')}
-            savingLabel={t('saving')}
-            saveChangesLabel={t('saveChanges')}
-            savedLabel={t('saved')}
-        />
+        <div style={{ padding: '2rem', maxWidth: '1200px', margin: '0 auto' }}>
+            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '1rem' }}>
+                <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
+                    <h1 style={{ fontSize: '1.75rem', fontWeight: 'bold' }}>
+                        {t('curateSpecialHeaderPrefix')}
+                    </h1>
+                    <HelpTooltip
+                        shortText={tHelp('tooltipCurateSpecialEditorShort')}
+                        longText={tHelp('tooltipCurateSpecialEditorLong')}
+                        position="bottom"
+                    />
+                </div>
+                <button
+                    type="button"
+                    onClick={() => router.push(`/${locale}/curator/specials`)}
+                    style={{
+                        padding: '0.5rem 1rem',
+                        background: '#e5e7eb',
+                        borderRadius: '0.5rem',
+                        border: 'none',
+                        cursor: 'pointer',
+                        fontSize: '0.9rem',
+                    }}
+                >
+                    {t('backToCuratorSpecials')}
+                </button>
+            </div>
+
+            <CurateSpecialEditor
+                special={special}
+                locale={locale}
+                onBack={() => router.push(`/${locale}/curator/specials`)}
+                onSaveStartTime={handleSaveStartTime}
+                backLabel={t('backToCuratorSpecials')}
+                headerPrefix={t('curateSpecialHeaderPrefix')}
+                noSongsHint={t('curateSpecialNoSongs')}
+                noSongsSubHint={t('curateSpecialNoSongsSub')}
+                instructionsText={t('curateSpecialInstructions')}
+                savingLabel={t('saving')}
+                saveChangesLabel={t('saveChanges')}
+                savedLabel={t('saved')}
+            />
+        </div>
     );
 }
 

app/curator/specials/page.tsx

@@ -4,6 +4,7 @@ import { useEffect, useState } from 'react';
 import { useLocale, useTranslations } from 'next-intl';
 import { Link } from '@/lib/navigation';
 import { getCuratorAuthHeaders } from '@/lib/curatorAuth';
+import HelpTooltip from '@/components/HelpTooltip';
 
 type LocalizedString = string | { de: string; en: string };
 
@@ -15,6 +16,7 @@ interface CuratorSpecialSummary {
 
 export default function CuratorSpecialsPage() {
     const t = useTranslations('Curator');
+    const tHelp = useTranslations('CuratorHelp');
     const locale = useLocale();
     const [specials, setSpecials] = useState<CuratorSpecialSummary[]>([]);
     const [loading, setLoading] = useState(true);
@@ -94,9 +96,16 @@ export default function CuratorSpecialsPage() {
     return (
         <div style={{ padding: '2rem', maxWidth: '900px', margin: '0 auto' }}>
             <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '1.5rem' }}>
-                <h1 style={{ fontSize: '2rem', fontWeight: 'bold' }}>
-                    {t('curateSpecialsTitle')}
-                </h1>
+                <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
+                    <h1 style={{ fontSize: '2rem', fontWeight: 'bold' }}>
+                        {t('curateSpecialsTitle')}
+                    </h1>
+                    <HelpTooltip
+                        shortText={tHelp('tooltipCurateSpecialsShort')}
+                        longText={tHelp('tooltipCurateSpecialsLong')}
+                        position="bottom"
+                    />
+                </div>
                 <Link
                     href="/curator"
                     style={{