@media screen
{
	/* ******************** Reset ******************** */

	html,
	body,
	div,
	span,
	applet,
	object,
	iframe,
	h1,
	h2,
	h3,
	h4,
	h5,
	h6,
	p,
	blockquote,
	pre,
	a,
	abbr,
	acronym,
	address,
	big,
	cite,
	code,
	del,
	dfn,
	em,
	font,
	img,
	ins,
	kbd,
	q,
	s,
	samp,
	small,
	strike,
	strong,
	sub,
	sup,
	tt,
	var,
	dl,
	dt,
	dd,
	ol,
	ul,
	li,
	fieldset,
	form,
	label,
	legend,
	table,
	caption,
	tbody,
	tfoot,
	thead,
	tr,
	th,
	td,
	article,
	aside,
	canvas,
	details,
	figcaption,
	figure,
	footer,
	header,
	hgroup,
	menu,
	nav,
	section,
	summary,
	time,
	mark,
	audio,
	video
	{
		margin: 0;
		padding: 0;
		border: 0;
		outline: 0;
		font-weight: inherit;
		font-style: inherit;
		font-size: 100%;
		font-family: inherit;
		vertical-align: baseline;
	}

	article,
	aside,
	details,
	figcaption,
	figure,
	footer,
	header,
	hgroup,
	menu,
	nav,
	section
	{
		display: block;
	}

	:focus
	{
		outline: 0;
	}

	ol,
	ul
	{
		list-style: none;
	}

	table
	{
		border-collapse: separate;
		border-spacing: 0;
	}

	caption,
	th,
	td
	{
		text-align: left;
	}

	#main ol,
	ul
	{
		margin: var(--fontBottomH6) 0 var(--fontBottomP) 30px;
	}

	#main ol.level_1,
	#main ol.level_2,
	ul.level_1,
	#main ul.level_2
	{
		margin: 0 0 20px 30px;
	}

	#main ol.level_1 > li,
	ul.level_1 > li
	{
		margin: 0 0 20px 0;
	}

	#main ol li
	{
		list-style: decimal;
		padding-left: 0;
		margin-bottom: var(--fontBottomH6);
	}

	#main ul li
	{
		list-style: disc;
		padding-left: 0;
		margin-bottom: var(--fontBottomH6);
	}

	blockquote::before,
	blockquote::after,
	q::before,
	q::after
	{
		content: "";
	}

	blockquote,
	q
	{
		quotes: "" "";
	}

	html
	{
		box-sizing: border-box;
	}

	*,
	*::before,
	*::after
	{
		box-sizing: inherit;
	}

	/* ************************************************************ Standard ************************************************************ */
	/* ************************************************************ Standard ************************************************************ */
	/* ************************************************************ Standard ************************************************************ */

	body
	{
		font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
		background: #f8f9fa;
		min-height: 100vh;
	}

	/* Screen Management */
	.screen
	{
		display: none;
	}

	.screen.active
	{
		display: block;
	}

	small
	{
		font-size: 0.8em;
		color: #666;
	}

	/* ******************** Farben ******************** */
	/* ******************** Farben ******************** */
	/* ******************** Farben ******************** */

	:root
	{
		/* Benutzer */
		--farbeUserSchriftHell: #fff;
		--farbeUserSchriftDunkel: #333;

		--farbeUserBadgeAdmin: #ac3030;
		--farbeUserBadgeSchreiben: #354bab;
		--farbeUserBadgeLesen: #158799;
		--farbeUserBadgeEinkauf: #ffc107;

		--farbeBadgeAktiv: #28a745;
		--farbeBadgeInaktiv: #dc3545;

		/* Menü */
		--farbeMenuSchriftHell: #fff;
		--farbeMenuSchriftDunkel: #333;

		--farbeMenuBadgeKuehlung: #158799bb;
		--farbeMenuBadgeGefrierung: #354babbb;
		--farbeMenuBadgeWennmoeglich: #ffc107bb;
		--farbeMenuBadgeZwingend: #ac3030bb;
	}

	/* ******************** Buttons ******************** */
	/* ******************** Buttons ******************** */
	/* ******************** Buttons ******************** */

	.btn
	{
		padding: 12px 24px;
		border: none;
		border-radius: 6px;
		font-size: 14px;
		font-weight: 500;
		cursor: pointer;
		transition: all 0.2s;
		font-family: inherit;
	}

	.btn-primary
	{
		background: #667eea;
		color: white;
	}

	.btn-primary:hover
	{
		background: #5568d3;
		transform: translateY(-1px);
		box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
	}

	.btn-secondary
	{
		background: #6c757d;
		color: white;
	}

	.btn-secondary:hover
	{
		background: #5a6268;
		transform: translateY(-1px);
		box-shadow: 0 4px 12px rgba(76, 78, 87, 0.4);
	}

	.btn-danger
	{
		background: #dc3545;
		color: white;
	}

	.btn-danger:hover
	{
		background: #c82333;
		transform: translateY(-1px);
	}

	.btn-info
	{
		background: #17a2b8;
		color: white;
	}

	.btn-info:hover
	{
		background: #138496;
		transform: translateY(-1px);
	}

	/* ******************** Login ******************** */
	/* ******************** Login ******************** */
	/* ******************** Login ******************** */

	#loginScreen
	{
		min-height: 100vh;
		display: none;
		justify-content: center;
		align-items: center;
		padding: 20px;
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	}

	#loginScreen.active
	{
		display: flex;
	}

	.login-container
	{
		background: white;
		border-radius: 10px;
		box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
		padding: 40px;
		width: 100%;
		max-width: 400px;
	}

	.login-container h1
	{
		color: #333;
		margin-bottom: 30px;
		text-align: center;
		font-size: 28px;
	}

	.form-group
	{
		margin-bottom: 20px;
	}

	.form-group label
	{
		display: block;
		margin-bottom: 8px;
		color: #555;
		font-weight: 500;
	}

	.form-group input,
	.form-group select,
	.form-group textarea
	{
		width: 100%;
		padding: 12px;
		border: 2px solid #e0e0e0;
		border-radius: 6px;
		font-size: 16px;
		transition: border-color 0.3s;
		font-family: inherit;
	}

	.form-group input:focus,
	.form-group select:focus,
	.form-group textarea:focus
	{
		outline: none;
		border-color: #667eea;
	}

	.form-group textarea
	{
		resize: vertical;
		min-height: 120px;
	}

	.form-group input[type="checkbox"]
	{
		width: auto;
		margin-right: 8px;
	}

	.error
	{
		background: #fee;
		border: 1px solid #fcc;
		color: #c33;
		padding: 10px;
		border-radius: 6px;
		margin-bottom: 20px;
		font-size: 14px;
		display: none;
	}

	.error:not(:empty)
	{
		display: block;
	}

	/* ******************** Main Screen ******************** */
	/* ******************** Main Screen ******************** */
	/* ******************** Main Screen ******************** */

	#mainScreen
	{
		display: none;
		min-height: 100vh;
	}

	#mainScreen.active
	{
		display: flex;
		flex-direction: column;
	}

	/* ******************** Header ******************** */
	/* ******************** Header ******************** */
	/* ******************** Header ******************** */

	.header
	{
		background: white;
		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
		padding: 0 30px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		min-height: 70px;
		position: sticky;
		top: 0;
		z-index: 100;
	}

	.header-left
	{
		display: flex;
		align-items: center;
		gap: 15px;
	}

	.header h1
	{
		color: #333;
		font-size: 24px;
		margin: 0;
		font-weight: 700;
	}

	.header-right
	{
		display: flex;
		align-items: center;
		gap: 20px;
	}

	.user-info
	{
		color: #666;
		font-size: 14px;
	}

	/* ******************** Burger Menü ******************** */
	/* ******************** Burger Menü ******************** */
	/* ******************** Burger Menü ******************** */

	.menu-toggle
	{
		display: none;
		flex-direction: column;
		gap: 5px;
		background: none;
		border: none;
		cursor: pointer;
		padding: 8px;
	}

	.menu-toggle span
	{
		width: 25px;
		height: 3px;
		background: #333;
		border-radius: 3px;
		transition: all 0.3s;
	}

	.menu-toggle.active span:nth-child(1)
	{
		transform: rotate(45deg) translate(8px, 8px);
	}

	.menu-toggle.active span:nth-child(2)
	{
		opacity: 0;
	}

	.menu-toggle.active span:nth-child(3)
	{
		transform: rotate(-45deg) translate(7px, -7px);
	}

	/* Sidebar - Horizontal Navigation */
	.sidebar
	{
		width: 100%;
		background: white;
		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
		display: flex;
		flex-direction: row;
		overflow-x: auto;
	}

	.nav-item
	{
		padding: 16px 24px;
		color: #555;
		cursor: pointer;
		transition: all 0.2s;
		display: flex;
		align-items: center;
		gap: 8px;
		font-weight: 500;
		font-size: 15px;
		border-bottom: 3px solid transparent;
		text-decoration: none;
		user-select: none;
		white-space: nowrap;
	}

	.nav-item:hover
	{
		background: #f8f9fa;
		color: #667eea;
		border-bottom-color: #667eea;
	}

	.nav-item.active
	{
		background: #eef2ff;
		color: #667eea;
		border-bottom-color: #667eea;
		font-weight: 600;
	}

	/* ******************** Content ******************** */
	/* ******************** Content ******************** */
	/* ******************** Content ******************** */

	.content
	{
		flex: 1;
		padding: 30px;
		overflow-y: auto;
		background: #f8f9fa;
	}

	.page
	{
		display: none;
	}

	.page.active
	{
		display: block;
		animation: fadeIn 0.3s ease-in;
	}

	@keyframes fadeIn
	{
		from
		{
			opacity: 0;
			transform: translateY(10px);
		}

		to
		{
			opacity: 1;
			transform: translateY(0);
		}
	}

	.page-header
	{
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 30px;
	}

	.page-header h2
	{
		color: #333;
		font-size: 28px;
		margin: 0;
		font-weight: 700;
	}

	/* Cards */
	.card
	{
		background: white;
		border-radius: 10px;
		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
		padding: 30px;
		margin-bottom: 20px;
	}

	.card h3
	{
		color: #333;
		margin-bottom: 20px;
		font-size: 20px;
		font-weight: 600;
	}

	/* Modals */
	.modal
	{
		display: none;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.5);
		justify-content: center;
		align-items: center;
		z-index: 1000;
	}

	.modal.active
	{
		display: flex;
	}

	.modal-content
	{
		background: white;
		border-radius: 10px;
		padding: 30px;
		width: 90%;
		max-width: 500px;
		max-height: 90vh;
		overflow-y: auto;
		box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
	}

	.modal-header
	{
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 25px;
	}

	.modal-header h2
	{
		color: #333;
		font-size: 24px;
		margin: 0;
		font-weight: 700;
	}

	.modal-close
	{
		transition: color 0.2s;
	}

	.modal-close-x
	{
		background: none;
		border: none;
		font-size: 28px;
		color: #999;
		cursor: pointer;
		padding: 0;
		width: 30px;
		height: 30px;
		display: flex;
		align-items: center;
		justify-content: center;
		line-height: 1;
		transition: color 0.2s;
	}

	.modal-close-x:hover
	{
		color: #333;
	}

	.form-hint
	{
		font-size: 12px;
		color: #888;
		margin-top: 5px;
		display: block;
	}

	.form-actions
	{
		display: flex;
		gap: 10px;
		margin-top: 30px;
	}

	.form-actions .btn
	{
		flex: 1;
		padding: 12px 24px;
	}

	/* ******************** Benutzer ******************** */
	/* ******************** Benutzer ******************** */
	/* ******************** Benutzer ******************** */

	/* User Cards */
	#usersList
	{
		display: flex;
		flex-direction: column;
		gap: 20px;
	}

	.user-card
	{
		background: white;
		border-radius: 10px;
		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
		padding: 24px;
		transition: transform 0.2s, box-shadow 0.2s;
	}

	.user-card:hover
	{
		transform: translateY(-2px);
		box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
	}

	.user-card-header
	{
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		margin-bottom: 20px;
		padding-bottom: 16px;
		border-bottom: 2px solid #f0f0f0;
	}

	.user-card-title
	{
		flex: 1;
	}

	.user-card-title h3
	{
		color: #333;
		font-size: 20px;
		margin: 0 0 6px 0;
		font-weight: 600;
	}

	.user-card-title .email
	{
		color: #666;
		font-size: 14px;
	}

	.user-card-actions
	{
		display: flex;
		gap: 10px;
		flex-shrink: 0;
	}

	.user-card-actions .btn
	{
		padding: 10px 20px;
		font-size: 14px;
	}

	.user-card-info
	{
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
		gap: 20px;
	}

	.info-item
	{
		display: flex;
		flex-direction: column;
		gap: 6px;
	}

	.info-label
	{
		color: #888;
		font-size: 11px;
		text-transform: uppercase;
		font-weight: 600;
		letter-spacing: 0.5px;
	}

	.info-value
	{
		color: #333;
		font-size: 14px;
		font-weight: 500;
	}

	/* Badges */
	.badge
	{
		display: inline-block;
		padding: 5px 12px;
		border-radius: 20px;
		font-size: 11px;
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: 0.3px;
		color: var(--farbeUserSchriftHell);
	}

	.badge-admin
	{
		background: var(--farbeUserBadgeAdmin);
	}

	.badge-schreibrechte
	{
		background: var(--farbeUserBadgeSchreiben);
	}

	.badge-leserechte
	{
		background: var(--farbeUserBadgeLesen);
	}

	.badge-einkauf
	{
		background: var(--farbeUserBadgeEinkauf);
		color: var(--farbeUserSchriftDunkel);
	}

	.badge-active
	{
		background: var(--farbeBadgeAktiv);
	}

	.badge-inactive
	{
		background: var(--farbeBadgeInaktiv);
	}

	/* Checkbox Styling */
	.checkbox-group
	{
		display: flex;
		align-items: center;
		gap: 8px;
		margin-top: 8px;
	}

	.checkbox-group input[type="checkbox"]
	{
		width: 18px;
		height: 18px;
		cursor: pointer;
	}

	.checkbox-group label
	{
		margin-bottom: 0 !important;
		cursor: pointer;
		user-select: none;
	}

	/* ******************** Menü ******************** */
	/* ******************** Menü ******************** */
	/* ******************** Menü ******************** */

	.detail-shelf-life
	{
		color: #910000;
		font-size: 13px;
		margin-bottom: 8px;
	}

	.detail-shelf-life::before
	{
		content: "⚠️";
		display: inline-block;
		color: #ffc107;
		font-size: 18px;
		margin-right: 3px;
		margin-bottom: 6px;
		vertical-align: middle;
		font-weight: bold;
	}

	.badge-menu-details
	{
		display: inline-block;
		padding: 4px 10px;
		border-radius: 12px;
		font-size: 11px;
		font-weight: 600;
		color: var(--farbeMenuSchriftHell);
	}

	.badge-kuehlung
	{
		background: var(--farbeMenuBadgeKuehlung);
	}

	.badge-gefrierung
	{
		background: var(--farbeMenuBadgeGefrierung);
	}

	.badge-wennmoeglich
	{
		background: var(--farbeMenuBadgeWennmoeglich);
		color: var(--farbeMenuSchriftDunkel);
	}

	.badge-zwingend
	{
		background: var(--farbeMenuBadgeZwingend);
	}

	/* ******************** Einkaufszettel ******************** */
	/* ******************** Einkaufszettel ******************** */
	/* ******************** Einkaufszettel ******************** */

	.storage-category
	{
		margin-bottom: 30px;
		border: 1px dashed #666;
	}

	.storage-category h4
	{
		color: #333;
		font-size: 18px;
		padding: 10px 15px;
		background: #dcedff;
		border-left: 4px solid #667eea;
		border-radius: 4px;
		font-weight: 600;
	}

	.storage-category-normal h4
	{
		background: #ddffdc;
	}

	.shopping-section
	{
		margin-bottom: 40px;
	}

	.shopping-section h3
	{
		color: #333;
		font-size: 22px;
		margin-bottom: 10px;
		font-weight: 700;
		display: flex;
		align-items: center;
		gap: 10px;
		background-color: #ddd;
		padding: 10px;
	}

	.shopping-section-completed
	{
		opacity: 0.85;
	}

	.shopping-items-list
	{
		padding: 0;
	}

	.shopping-item
	{
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		padding: 16px 24px;
		border-bottom: 1px solid #f0f0f0;
		transition: background 0.2s;
	}

	.shopping-item:last-child
	{
		border-bottom: none;
	}

	.shopping-item:hover
	{
		background: #fffff0;
		box-shadow: 0 2px 8px rgba(102, 126, 234, 0.15);
		border-radius: 8px;
	}

















	


	/* Menu Cards */
	#menusList
	{
		display: flex;
		flex-direction: column;
		gap: 20px;
	}

	.menu-card
	{
		background: white;
		border-radius: 10px;
		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
		padding: 24px;
		transition: transform 0.2s, box-shadow 0.2s;
	}

	.menu-card:hover
	{
		transform: translateY(-2px);
		box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
	}

	.menu-card-header
	{
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		margin-bottom: 20px;
		padding-bottom: 16px;
		border-bottom: 2px solid #f0f0f0;
	}

	.menu-card-title
	{
		flex: 1;
	}

	.menu-card-title h3
	{
		color: #333;
		font-size: 20px;
		margin: 0 0 6px 0;
		font-weight: 600;
	}

	.menu-card-title .menu-date
	{
		color: #667eea;
		font-size: 14px;
		font-weight: 600;
	}

	.menu-card-actions
	{
		display: flex;
		gap: 10px;
		flex-shrink: 0;
	}

	.menu-card-actions .btn
	{
		padding: 10px 20px;
		font-size: 14px;
	}

	.menu-card-info
	{
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
		gap: 20px;
	}

	/* Modal Large (for menus) */
	.modal-large
	{
		max-width: 900px;
	}

	/* Form Row */
	.form-row
	{
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 20px;
		margin-bottom: 20px;
	}

	/* Ingredient Row */
	.ingredient-row
	{
		background: #f8f9fa;
		border: 2px solid #e0e0e0;
		border-radius: 8px;
		padding: 20px;
		margin-bottom: 15px;
		position: relative;
	}

	.ingredient-fields
	{
		display: grid;
		grid-template-columns: 3fr 1fr 1fr 1fr;
		gap: 15px;
		margin-bottom: 15px;
	}

	.ingredient-checkboxes
	{
		display: flex;
		gap: 20px;
		align-items: center;
		flex-wrap: wrap;
		margin-bottom: 15px;
	}

	/* Autocomplete Styles */
	.autocomplete-wrapper
	{
		position: relative;
	}

	.autocomplete-list
	{
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		max-height: 200px;
		overflow-y: auto;
		background: white;
		border: 2px solid #667eea;
		border-top: none;
		border-radius: 0 0 6px 6px;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
		z-index: 1000;
		margin-top: -2px;
	}

	.autocomplete-list.active
	{
		display: block;
	}

	.autocomplete-item
	{
		padding: 10px 12px;
		cursor: pointer;
		transition: background 0.2s;
		font-size: 14px;
		color: #333;
		border-bottom: 1px solid #f0f0f0;
	}

	.autocomplete-item:last-child
	{
		border-bottom: none;
	}

	.autocomplete-item:hover
	{
		background: #eef2ff;
		color: #667eea;
		font-weight: 500;
	}

	.autocomplete-wrapper input:focus
	{
		border-radius: 6px 6px 0 0;
	}

	.autocomplete-wrapper input:focus + .autocomplete-list.active
	{
		border-top: 2px solid #667eea;
	}

	.checkbox-inline,
	.select-inline
	{
		display: flex;
		align-items: center;
		gap: 8px;
		font-size: 14px;
		color: #555;
	}

	.checkbox-inline input[type="checkbox"]
	{
		width: 18px;
		height: 18px;
		cursor: pointer;
	}

	.select-inline select
	{
		padding: 8px 12px;
		border: 2px solid #e0e0e0;
		border-radius: 6px;
		font-size: 14px;
		cursor: pointer;
	}

	.btn-sm
	{
		padding: 8px 16px;
		font-size: 13px;
	}

	#ingredientsContainer:empty + .btn
	{
		margin-top: 0;
	}

	/* Menu Details Modal */
	.detail-section
	{
		margin-bottom: 30px;
	}

	.detail-section h3
	{
		color: #333;
		font-size: 18px;
		margin-bottom: 15px;
		padding-bottom: 10px;
		border-bottom: 2px solid #e0e0e0;
		font-weight: 600;
	}

	.detail-grid
	{
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 20px;
		margin-bottom: 20px;
	}

	.detail-item
	{
		display: flex;
		flex-direction: column;
		gap: 6px;
	}

	.detail-label
	{
		color: #888;
		font-size: 11px;
		text-transform: uppercase;
		font-weight: 600;
		letter-spacing: 0.5px;
	}

	.detail-value
	{
		color: #333;
		font-size: 16px;
		font-weight: 500;
	}

	.details-list
	{
		list-style: none;
		padding: 0;
		margin: 0;
	}

	.detail-ingredient
	{
		background: #f8f9fa;
		border: 1px solid #e0e0e0;
		border-radius: 8px;
		padding: 15px;
		margin-bottom: 12px;
	}

	.detail-ingredient-main
	{
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 8px;
	}

	.detail-ingredient-main strong
	{
		color: #333;
		font-size: 16px;
	}

	.detail-amount
	{
		color: #667eea;
		font-weight: 600;
		font-size: 15px;
	}

	.detail-badges
	{
		display: flex;
		gap: 8px;
		flex-wrap: wrap;
	}

	.badge-info
	{
		background: #17a2b8;
		color: white;
	}

	.badge-warning
	{
		background: #ffc107;
		color: #333;
	}

	.badge-success
	{
		background: #28a745;
		color: white;
	}

	.badge-danger
	{
		background: #dc3545;
		color: white;
	}

	/* Shopping List Styles */
	.shopping-stats
	{
		display: flex;
		gap: 12px;
		align-items: center;
	}

	.stat-badge
	{
		padding: 8px 16px;
		border-radius: 20px;
		font-size: 13px;
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: 0.3px;
	}

	.shopping-menu-group
	{
		background: white;
		border-radius: 10px;
		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
		margin-bottom: 20px;
		overflow: hidden;
	}

	.shopping-menu-group-completed
	{
		background: #f8f9fa;
	}

	.shopping-menu-header
	{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20px 24px;
		background: #f8f9fa;
		border-bottom: 2px solid #e0e0e0;
	}

	.shopping-menu-group-completed .shopping-menu-header
	{
		background: #e9ecef;
	}

	.shopping-menu-info h4
	{
		color: #333;
		font-size: 18px;
		margin: 0 0 4px 0;
		font-weight: 600;
	}

	.shopping-menu-date
	{
		color: #667eea;
		font-size: 13px;
		font-weight: 600;
	}







	.shopping-item-erledigt
	{
		opacity: 0.7;
	}

	.shopping-item-erledigt:hover
	{
		background: #f0f0f0;
	}

	.shopping-item-teilweise
	{
		background: #fff9e6;
	}

	.shopping-item-teilweise:hover
	{
		background: #fff5d6;
	}

	.shopping-item-main
	{
		display: flex;
		align-items: flex-start;
		gap: 12px;
		flex: 1;
	}

	.shopping-item-checkbox
	{
		margin-top: 2px;
	}

	.shopping-item-checkbox input[type="checkbox"]
	{
		width: 20px;
		height: 20px;
		cursor: pointer;
		accent-color: #28a745;
	}

	.shopping-item-content
	{
		flex: 1;
		cursor: pointer;
		user-select: none;
	}

	.shopping-item-erledigt .shopping-item-content
	{
		text-decoration: line-through;
		color: #999;
	}

	.shopping-item-name
	{
		display: flex;
		align-items: center;
		gap: 8px;
		margin-bottom: 6px;
		flex-wrap: wrap;
	}

	.shopping-item-name strong
	{
		color: #333;
		font-size: 16px;
		font-weight: 600;
	}

	.shopping-item-erledigt .shopping-item-name strong
	{
		color: #999;
	}

	.item-badge
	{
		padding: 3px 8px;
		border-radius: 10px;
		font-size: 10px;
		font-weight: 600;
		white-space: nowrap;
	}

	.shopping-item-details
	{
		display: flex;
		gap: 12px;
		align-items: center;
		flex-wrap: wrap;
		font-size: 14px;
		color: #666;
	}

	.shopping-amount
	{
		color: #667eea;
		font-weight: 700;
		font-size: 15px;
	}

	.shopping-item-erledigt .shopping-amount
	{
		color: #999;
	}

	.shopping-original
	{
		color: #999;
		font-size: 12px;
		font-style: italic;
	}

	.shopping-shelf-life
	{
		color: #888;
		font-size: 12px;
	}

	.shopping-done-by,
	.shopping-done-at
	{
		color: #888;
		font-size: 12px;
	}

	.shopping-item-actions
	{
		display: flex;
		gap: 8px;
		align-items: center;
		flex-shrink: 0;
		margin-left: 12px;
	}

	.teilmenge-info
	{
		background: #ffc107;
		color: #333;
		padding: 4px 10px;
		border-radius: 12px;
		font-size: 11px;
		font-weight: 600;
		white-space: nowrap;
	}

	/* Storage Categories */











	.shopping-item-content-full
	{
		flex: 1;
	}

	.shopping-item-header
	{
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		margin-bottom: 10px;
		gap: 15px;
	}

	.shopping-item-total
	{
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		gap: 4px;
	}

	.menu-references
	{
		display: flex;
		flex-direction: column;
		gap: 8px;
		margin-top: 10px;
		padding-top: 10px;
		border-top: 1px solid #e0e0e0;
	}

	.menu-ref
	{
		display: flex;
		align-items: center;
		gap: 10px;
		flex-wrap: wrap;
		padding: 6px 10px;
		background: #f8f9fa;
		border-radius: 6px;
		font-size: 13px;
	}

	.menu-ref-name
	{
		color: #555;
		font-weight: 500;
	}

	.menu-ref-date
	{
		color: #667eea;
		font-weight: 600;
		font-size: 12px;
	}

	.menu-ref-amount
	{
		color: #888;
		font-size: 12px;
		margin-left: auto;
	}

	.shopping-completed-info
	{
		margin-top: 10px;
		padding-top: 10px;
		border-top: 1px solid #e0e0e0;
		color: #888;
		font-size: 12px;
	}

	/* Responsive */
	@media (max-width: 968px)
	{
		.user-card-info
		{
			grid-template-columns: repeat(2, 1fr);
		}

		.menu-card-info
		{
			grid-template-columns: repeat(2, 1fr);
		}

		.ingredient-fields
		{
			grid-template-columns: 1fr;
		}
	}

	@media (max-width: 768px)
	{

		/* Show burger menu */
		.menu-toggle
		{
			display: flex;
		}

		/* Hide navigation by default on mobile */
		.sidebar
		{
			position: fixed;
			top: 70px;
			left: -100%;
			width: 280px;
			height: calc(100vh - 70px);
			flex-direction: column;
			overflow-y: auto;
			transition: left 0.3s ease;
			z-index: 99;
			box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
		}

		.sidebar.active
		{
			left: 0;
		}

		.nav-item
		{
			padding: 16px 24px;
			border-bottom: none;
			border-left: 3px solid transparent;
		}

		.nav-item:hover
		{
			border-bottom: none;
			border-left-color: #667eea;
		}

		.nav-item.active
		{
			border-bottom: none;
			border-left-color: #667eea;
		}

		.content
		{
			padding: 20px;
		}

		.header
		{
			padding: 15px 20px;
		}

		.header h1
		{
			font-size: 18px;
		}

		.user-info
		{
			display: none;
		}

		.user-card
		{
			padding: 20px;
		}

		.user-card-header
		{
			flex-direction: column;
			gap: 15px;
			align-items: stretch;
		}

		.user-card-actions
		{
			width: 100%;
		}

		.user-card-actions .btn
		{
			flex: 1;
		}

		.page-header
		{
			flex-direction: column;
			align-items: flex-start;
			gap: 15px;
		}

		.page-header .btn
		{
			width: 100%;
		}

		.user-card-info
		{
			grid-template-columns: 1fr;
		}

		.menu-card
		{
			padding: 20px;
		}

		.menu-card-header
		{
			flex-direction: column;
			gap: 15px;
			align-items: stretch;
		}

		.menu-card-actions
		{
			width: 100%;
		}

		.menu-card-actions .btn
		{
			flex: 1;
		}

		.menu-card-info
		{
			grid-template-columns: 1fr;
		}

		.form-row
		{
			grid-template-columns: 1fr;
		}

		.ingredient-fields
		{
			grid-template-columns: 1fr;
		}

		.modal-large
		{
			max-width: 100%;
		}

		.shopping-stats
		{
			flex-wrap: wrap;
		}

		.shopping-menu-header
		{
			flex-direction: column;
			align-items: flex-start;
			gap: 10px;
		}

		.shopping-item
		{
			flex-direction: column;
			gap: 12px;
		}

		.shopping-item-actions
		{
			width: 100%;
			margin-left: 0;
		}

		.shopping-item-actions .btn
		{
			flex: 1;
		}

		.shopping-item-header
		{
			flex-direction: column;
			gap: 8px;
		}

		.shopping-item-total
		{
			align-items: flex-start;
		}

		.menu-ref
		{
			flex-direction: column;
			align-items: flex-start;
			gap: 4px;
		}

		.menu-ref-amount
		{
			margin-left: 0;
		}
	}
}