feat: add AND/OR logic mode toggle to filter panel

- Add LogicModeToggle component to switch between AND and OR filter logic
- Enable multi-select for category and icon filters in OR mode
- Update Search component to handle both AND and OR filtering logic
- Resize Toggle component to match LogicModeToggle size (44px x 24px)
- Position logic mode toggle on the left side of filter panel
- Auto-convert arrays to single values when switching from OR to AND mode
- In OR mode: recipes match if they satisfy ANY active filter
- In AND mode: recipes must satisfy ALL active filters

src/lib/components/CategoryFilter.svelte

@@ -6,13 +6,21 @@
 		categories = [],
 		selected = null,
 		onChange = () => {},
-		lang = 'de'
+		lang = 'de',
+		useAndLogic = true
 	} = $props();
 
 	const isEnglish = $derived(lang === 'en');
 	const label = $derived(isEnglish ? 'Category' : 'Kategorie');
 	const selectLabel = $derived(isEnglish ? 'Select category...' : 'Kategorie auswählen...');
 
+	// Convert selected to array for OR mode, keep as single value for AND mode
+	const selectedArray = $derived(
+		useAndLogic
+			? (selected ? [selected] : [])
+			: (Array.isArray(selected) ? selected : (selected ? [selected] : []))
+	);
+
 	let inputValue = $state('');
 	let dropdownOpen = $state(false);
 
@@ -37,9 +45,22 @@
 	}
 
 	function handleCategorySelect(category) {
+		if (useAndLogic) {
+			// AND mode: single select
 			onChange(category);
 			inputValue = '';
 			dropdownOpen = false;
+		} else {
+			// OR mode: multi-select toggle
+			const currentSelected = Array.isArray(selected) ? selected : (selected ? [selected] : []);
+			if (currentSelected.includes(category)) {
+				const newSelected = currentSelected.filter(c => c !== category);
+				onChange(newSelected.length > 0 ? newSelected : null);
+			} else {
+				onChange([...currentSelected, category]);
+			}
+			inputValue = '';
+		}
 	}
 
 	function handleKeyDown(event) {
@@ -49,8 +70,7 @@
 			const matchedCat = categories.find(c => c.toLowerCase() === value.toLowerCase())
 				|| filteredCategories[0];
 			if (matchedCat) {
-				onChange(matchedCat);
+				handleCategorySelect(matchedCat);
-				inputValue = '';
 			}
 		} else if (event.key === 'Escape') {
 			dropdownOpen = false;
@@ -58,8 +78,14 @@
 		}
 	}
 
-	function handleRemove() {
+	function handleRemove(category) {
+		if (useAndLogic) {
 			onChange(null);
+		} else {
+			const currentSelected = Array.isArray(selected) ? selected : (selected ? [selected] : []);
+			const newSelected = currentSelected.filter(c => c !== category);
+			onChange(newSelected.length > 0 ? newSelected : null);
+		}
 	}
 </script>
 
@@ -188,7 +214,7 @@
 				{#each filteredCategories as category}
 					<TagChip
 						tag={category}
-						selected={false}
+						selected={selectedArray.includes(category)}
 						removable={false}
 						onToggle={() => handleCategorySelect(category)}
 					/>
@@ -197,15 +223,17 @@
 		{/if}
 	</div>
 
-	<!-- Selected category display below -->
+	<!-- Selected categories display below -->
-	{#if selected}
+	{#if selectedArray.length > 0}
 		<div class="selected-category">
+			{#each selectedArray as category}
 				<TagChip
-				tag={selected}
+					tag={category}
 					selected={true}
 					removable={true}
-				onToggle={handleRemove}
+					onToggle={() => handleRemove(category)}
 				/>
+			{/each}
 		</div>
 	{/if}
 </div>

src/lib/components/FavoritesFilter.svelte

@@ -27,7 +27,7 @@
 	.filter-section {
 		display: flex;
 		flex-direction: column;
-		gap: 0.5rem;
+		gap: 0.3rem;
 		max-width: 100%;
 		align-items: center;
 	}

src/lib/components/FilterPanel.svelte

@@ -5,6 +5,7 @@
 	import IconFilter from './IconFilter.svelte';
 	import SeasonFilter from './SeasonFilter.svelte';
 	import FavoritesFilter from './FavoritesFilter.svelte';
+	import LogicModeToggle from './LogicModeToggle.svelte';
 
 	let {
 		availableCategories = [],
@@ -15,6 +16,7 @@
 		selectedIcon = null,
 		selectedSeasons = [],
 		selectedFavoritesOnly = false,
+		useAndLogic = true,
 		lang = 'de',
 		isLoggedIn = false,
 		hideFavoritesFilter = false,
@@ -22,7 +24,8 @@
 		onTagToggle = () => {},
 		onIconChange = () => {},
 		onSeasonChange = () => {},
-		onFavoritesToggle = () => {}
+		onFavoritesToggle = () => {},
+		onLogicModeToggle = () => {}
 	} = $props();
 
 	const isEnglish = $derived(lang === 'en');
@@ -85,11 +88,11 @@
 	}
 
 	.filter-panel.with-favorites {
-		grid-template-columns: 120px 120px 1fr 160px 90px;
+		grid-template-columns: 110px 120px 120px 1fr 160px 90px;
 	}
 
 	.filter-panel.without-favorites {
-		grid-template-columns: 120px 120px 1fr 160px;
+		grid-template-columns: 110px 120px 120px 1fr 160px;
 	}
 
 	@media (max-width: 968px) {
@@ -135,11 +138,18 @@
 	</button>
 
 	<div class="filter-panel" class:open={filtersOpen} class:with-favorites={isLoggedIn && !hideFavoritesFilter} class:without-favorites={!isLoggedIn || hideFavoritesFilter}>
+		<LogicModeToggle
+			{useAndLogic}
+			onToggle={onLogicModeToggle}
+			{lang}
+		/>
+
 		<CategoryFilter
 			categories={availableCategories}
 			selected={selectedCategory}
 			onChange={onCategoryChange}
 			{lang}
+			{useAndLogic}
 		/>
 
 		<IconFilter
@@ -147,6 +157,7 @@
 			selected={selectedIcon}
 			onChange={onIconChange}
 			{lang}
+			{useAndLogic}
 		/>
 
 		<TagFilter

src/lib/components/IconFilter.svelte

@@ -6,13 +6,21 @@
 		availableIcons = [],
 		selected = null,
 		onChange = () => {},
-		lang = 'de'
+		lang = 'de',
+		useAndLogic = true
 	} = $props();
 
 	const isEnglish = $derived(lang === 'en');
 	const label = 'Icon';
 	const selectLabel = $derived(isEnglish ? 'Select icon...' : 'Icon auswählen...');
 
+	// Convert selected to array for OR mode, keep as single value for AND mode
+	const selectedArray = $derived(
+		useAndLogic
+			? (selected ? [selected] : [])
+			: (Array.isArray(selected) ? selected : (selected ? [selected] : []))
+	);
+
 	let inputValue = $state('');
 	let dropdownOpen = $state(false);
 
@@ -37,9 +45,22 @@
 	}
 
 	function handleIconSelect(icon) {
+		if (useAndLogic) {
+			// AND mode: single select
 			onChange(icon);
 			inputValue = '';
 			dropdownOpen = false;
+		} else {
+			// OR mode: multi-select toggle
+			const currentSelected = Array.isArray(selected) ? selected : (selected ? [selected] : []);
+			if (currentSelected.includes(icon)) {
+				const newSelected = currentSelected.filter(i => i !== icon);
+				onChange(newSelected.length > 0 ? newSelected : null);
+			} else {
+				onChange([...currentSelected, icon]);
+			}
+			inputValue = '';
+		}
 	}
 
 	function handleKeyDown(event) {
@@ -49,8 +70,14 @@
 		}
 	}
 
-	function handleRemove() {
+	function handleRemove(icon) {
+		if (useAndLogic) {
 			onChange(null);
+		} else {
+			const currentSelected = Array.isArray(selected) ? selected : (selected ? [selected] : []);
+			const newSelected = currentSelected.filter(i => i !== icon);
+			onChange(newSelected.length > 0 ? newSelected : null);
+		}
 	}
 </script>
 
@@ -180,7 +207,7 @@
 				{#each filteredIcons as icon}
 					<TagChip
 						tag={icon}
-						selected={false}
+						selected={selectedArray.includes(icon)}
 						removable={false}
 						onToggle={() => handleIconSelect(icon)}
 					/>
@@ -189,15 +216,17 @@
 		{/if}
 	</div>
 
-	<!-- Selected icon display below -->
+	<!-- Selected icons display below -->
-	{#if selected}
+	{#if selectedArray.length > 0}
 		<div class="selected-icon">
+			{#each selectedArray as icon}
 				<TagChip
-				tag={selected}
+					tag={icon}
 					selected={true}
 					removable={true}
-				onToggle={handleRemove}
+					onToggle={() => handleRemove(icon)}
 				/>
+			{/each}
 		</div>
 	{/if}
 </div>

src/lib/components/LogicModeToggle.svelte

@@ -0,0 +1,145 @@
+<script>
+	import "$lib/css/nordtheme.css";
+
+	let {
+		useAndLogic = true,
+		onToggle = () => {},
+		lang = 'de'
+	} = $props();
+
+	const isEnglish = $derived(lang === 'en');
+	const label = $derived(isEnglish ? 'Filter Mode' : 'Filter-Modus');
+	const andLabel = $derived(isEnglish ? 'AND' : 'UND');
+	const orLabel = $derived(isEnglish ? 'OR' : 'ODER');
+
+	let checked = $state(useAndLogic);
+
+	// Watch for changes to checked and call onToggle
+	$effect(() => {
+		const currentChecked = checked;
+		onToggle(currentChecked);
+	});
+</script>
+
+<style>
+	.filter-section {
+		display: flex;
+		flex-direction: column;
+		gap: 0.3rem;
+		max-width: 100%;
+		align-items: center;
+	}
+
+	@media (max-width: 968px) {
+		.filter-section {
+			max-width: 500px;
+			gap: 0.3rem;
+			align-items: flex-start;
+			margin: 0 auto;
+			width: 100%;
+		}
+	}
+
+	.filter-label {
+		font-size: 0.9rem;
+		color: var(--nord2);
+		font-weight: 600;
+		margin-bottom: 0.25rem;
+		text-align: center;
+	}
+
+	@media (prefers-color-scheme: dark) {
+		.filter-label {
+			color: var(--nord6);
+		}
+	}
+
+	@media (max-width: 968px) {
+		.filter-label {
+			font-size: 0.85rem;
+			text-align: left;
+		}
+	}
+
+	.toggle-container {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		font-size: 0.85rem;
+		color: var(--nord4);
+		font-weight: 600;
+	}
+
+	@media (prefers-color-scheme: dark) {
+		.toggle-container {
+			color: var(--nord6);
+		}
+	}
+
+	.toggle-switch {
+		position: relative;
+		width: 44px;
+		height: 24px;
+		background: var(--nord10);
+		border-radius: 24px;
+		cursor: pointer;
+		transition: background 0.3s ease;
+	}
+
+	.toggle-switch.or-mode {
+		background: var(--nord13);
+	}
+
+	.toggle-knob {
+		position: absolute;
+		width: 20px;
+		height: 20px;
+		border-radius: 50%;
+		background: white;
+		top: 2px;
+		left: 2px;
+		transition: transform 0.3s ease;
+		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+	}
+
+	.toggle-switch.or-mode .toggle-knob {
+		transform: translateX(20px);
+	}
+
+	.mode-label {
+		min-width: 40px;
+		text-align: center;
+	}
+
+	.mode-label.active {
+		color: var(--nord10);
+	}
+
+	@media (prefers-color-scheme: dark) {
+		.mode-label.active {
+			color: var(--nord8);
+		}
+	}
+
+	.toggle-switch.or-mode + .mode-label.or {
+		color: var(--nord13);
+	}
+</style>
+
+<div class="filter-section">
+	<div class="filter-label">{label}</div>
+	<div class="toggle-container">
+		<span class="mode-label" class:active={checked}>{andLabel}</span>
+		<div
+			class="toggle-switch"
+			class:or-mode={!checked}
+			onclick={() => checked = !checked}
+			role="button"
+			tabindex="0"
+			onkeydown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); checked = !checked; } }}
+		>
+			<div class="toggle-knob"></div>
+		</div>
+		<span class="mode-label or" class:active={!checked}>{orLabel}</span>
+	</div>
+</div>

src/lib/components/Search.svelte

@@ -42,6 +42,7 @@
     let selectedIcon = $state(null);
     let selectedSeasons = $state([]);
     let selectedFavoritesOnly = $state(false);
+    let useAndLogic = $state(true);
 
     // Initialize from props (for backwards compatibility)
     $effect(() => {
@@ -55,7 +56,9 @@
     // Apply non-text filters (category, tags, icon, season)
     function applyNonTextFilters(recipeList) {
         return recipeList.filter(recipe => {
-            // Category filter
+            if (useAndLogic) {
+                // AND mode: recipe must satisfy ALL active filters
+                // Category filter (single value in AND mode)
                 if (selectedCategory && recipe.category !== selectedCategory) {
                     return false;
                 }
@@ -68,7 +71,7 @@
                     }
                 }
 
-            // Icon filter
+                // Icon filter (single value in AND mode)
                 if (selectedIcon && recipe.icon !== selectedIcon) {
                     return false;
                 }
@@ -87,6 +90,27 @@
                 }
 
                 return true;
+            } else {
+                // OR mode: recipe must satisfy AT LEAST ONE active filter
+                const categoryArray = Array.isArray(selectedCategory) ? selectedCategory : (selectedCategory ? [selectedCategory] : []);
+                const iconArray = Array.isArray(selectedIcon) ? selectedIcon : (selectedIcon ? [selectedIcon] : []);
+
+                const hasActiveFilters = categoryArray.length > 0 || selectedTags.length > 0 || iconArray.length > 0 || selectedSeasons.length > 0 || selectedFavoritesOnly;
+
+                // If no filters active, return all
+                if (!hasActiveFilters) {
+                    return true;
+                }
+
+                // Check if recipe matches any filter
+                const matchesCategory = categoryArray.length > 0 ? categoryArray.includes(recipe.category) : false;
+                const matchesTags = selectedTags.length > 0 ? selectedTags.some(tag => (recipe.tags || []).includes(tag)) : false;
+                const matchesIcon = iconArray.length > 0 ? iconArray.includes(recipe.icon) : false;
+                const matchesSeasons = selectedSeasons.length > 0 ? selectedSeasons.some(s => (recipe.season || []).includes(s)) : false;
+                const matchesFavorites = selectedFavoritesOnly ? recipe.isFavorite : false;
+
+                return matchesCategory || matchesTags || matchesIcon || matchesSeasons || matchesFavorites;
+            }
         });
     }
 
@@ -186,6 +210,20 @@
         selectedFavoritesOnly = enabled;
     }
 
+    function handleLogicModeToggle(useAnd) {
+        useAndLogic = useAnd;
+
+        // When switching to AND mode, convert arrays to single values
+        if (useAnd) {
+            if (Array.isArray(selectedCategory)) {
+                selectedCategory = selectedCategory.length > 0 ? selectedCategory[0] : null;
+            }
+            if (Array.isArray(selectedIcon)) {
+                selectedIcon = selectedIcon.length > 0 ? selectedIcon[0] : null;
+            }
+        }
+    }
+
     function handleSubmit(event) {
         if (browser) {
             // For JS-enabled browsers, prevent default and navigate programmatically
@@ -210,6 +248,7 @@
             const icn = selectedIcon;
             const seasons = selectedSeasons;
             const favsOnly = selectedFavoritesOnly;
+            const andLogic = useAndLogic;
 
             // Set debounce timer
             const timer = setTimeout(() => {
@@ -358,6 +397,7 @@ scale: 0.8 0.8;
     {selectedIcon}
     {selectedSeasons}
     {selectedFavoritesOnly}
+    {useAndLogic}
     {lang}
     {isLoggedIn}
     hideFavoritesFilter={favoritesOnly}
@@ -366,5 +406,6 @@ scale: 0.8 0.8;
     onIconChange={handleIconChange}
     onSeasonChange={handleSeasonChange}
     onFavoritesToggle={handleFavoritesToggle}
+    onLogicModeToggle={handleLogicModeToggle}
   />
 </div>

src/lib/components/Toggle.svelte

@@ -30,10 +30,10 @@
 .toggle-wrapper input[type="checkbox"] {
 	appearance: none;
 	-webkit-appearance: none;
-	width: 51px;
+	width: 44px;
-	height: 31px;
+	height: 24px;
 	background: var(--nord2);
-	border-radius: 31px;
+	border-radius: 24px;
 	position: relative;
 	cursor: pointer;
 	transition: background 0.3s ease;
@@ -55,8 +55,8 @@
 .toggle-wrapper input[type="checkbox"]::before {
 	content: '';
 	position: absolute;
-	width: 27px;
+	width: 20px;
-	height: 27px;
+	height: 20px;
 	border-radius: 50%;
 	top: 2px;
 	left: 2px;