/* -- Kategorien -- */

.category-head.is-sticky {
    position: sticky;
    top: 0;
}

.is-sticky::before, .is-sticky::after {
	content: "";
	display: block;
	height: 15px;
	background-color: var(--color-body);
}

.category-container {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    color: var(--text-light-primary);
	padding: 15px;
    background-color: var(--color-primary);
}

.menu-category-title {
    flex-grow: 1;
    font-weight: 700;
}

.menu-category-addition {
	font-size: 10pt;
}

/* -- Gerichte -- */

.menu-item {
	display: flex;
	flex-wrap: wrap;
	padding: 10px;
	margin-bottom: 8px;
	border: 1px solid transparent;
	background-color: var(--item-background);
}

.menu-item.new-item {
	border-width: 2px;
	border-color: var(--item-highlight);
}

/* -- Gericht Kopf -- */

.menu-item > header {
	display: flex;
	font-size: 11pt;
	align-items: baseline;
	width: 100%;
}

.item-number {
	color: var(--item-highlight);
	font-weight: 700;
	padding-right: 8px;
}

.item-name {
	flex-grow: 1;
	font-weight: 600;
	color: var(--item-color);
}

/* -- Gericht Beschreibung -- */

.menu-item > article {
	width: 100%;
	color: var(--item-description);
	font-size: 10pt;
	padding-top: 6px;
}

/* -- Gericht Fuss -- */

.menu-item > footer {
	display: flex;
	align-items: center;
	padding-top: 6px;
	width: 100%;
}

.item-additives {
    flex-grow: 1;
	font-size: 9pt;
	text-align: left;
	color: var(--text-disabled);
}

.item-pricing {
	font-size: 11pt;
	font-weight: 600;
    margin-left: 8px;
	color: var(--item-color);
	white-space: nowrap;
}

/* -- Small ------------------------------------------------------------------------------------ */

/*
@media screen and (min-width: 575.98px) {
}
*/

/* -- Medium -- */

@media screen and (min-width: 767.98px) {
    /* -- Kategorien -- */

    .category-head {
		flex: 100%;
		max-width: 100%;
	}

    .menu-category {
		display: flex;
		flex-flow: row wrap;
	}

    /* -- Gerichte -- */

    .menu-item {
		flex: 50%;
		max-width: calc( 50% - 10px );
		margin: 5px;
	}
}

/* -- Large ------------------------------------------------------------------------------------ */

@media screen and (min-width: 991.98px) {
    /* -- Kategorien -- */
    
    .is-sticky::before, .is-sticky::after {
		background-color: var(--color-background);
	}

    .menu-category-title {
        font-weight: 600;
		font-size: 11pt;
    }

    /* -- Gericht Kopf -- */

    .menu-item > header {
		font-size: 11pt;
    }

    /* -- Gericht Fuss -- */

    .item-additives {
		font-size: 10pt;
    }
}

/* -- Extra large ------------------------------------------------------------------------------ */

/*
@media screen and (min-width: 1199.98px) {
}
*/

/* -- Extra extra large ------------------------------------------------------------------------ */

@media screen and (min-width: 1399.98px) {
    /* -- Gerichte -- */

    .menu-item {
		flex: 33.33%;
		max-width: calc( 33.33% - 10px );
	}
}